max-kut · p000ic · Mar 1, 2023 · Mar 1, 2023 · Mar 2, 2023 · Mar 2, 2023
diff --git a/README.md b/README.md
@@ -11,7 +11,8 @@ Please read the documentation [https://vue-diagram-editor.js.org](https://vue-di
 
 The main purpose of this component is to make it possible to use any component within each node of the diagram.
 
-### Vue Diagram Editor features:
+### Vue Diagram Editor features
+
 * **scoped-slot for node**
 * ripple (pulsable) node
 * any number of instances per page
@@ -21,13 +22,15 @@ The main purpose of this component is to make it possible to use any component w
 ## Getting Started with Vue Diagram Editor
 
 It's recommended to install `vue-diagram-editor` via npm, and build your app using a bundler like webpack:
+
 ```bash
 npm install vue-diagram-editor
 ```
 
 **Requires Vue 2.6+**
 
 ### Simple example
+
 ```vue
 <template>
   <VueDiagramEditor
@@ -120,6 +123,7 @@ export default {
 ```
 
 If you just don't want to use webpack or any other bundlers, you can simply include the standalone UMD build in your page. In this way, make sure Vue as a dependency is included before vue-diagram-editor.
+
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -196,7 +200,9 @@ If you just don't want to use webpack or any other bundlers, you can simply incl
 ```
 
 ## API
+
 ### [Node](#node)
+
 |  Prop  | Required | Default | Description |
 |:-------|:---------|:--------|:------------|
 | `id` | no | generated [ulid](https://github.com/ulid/javascript "ulid") identifier | Unique identifier of node |
@@ -208,6 +214,7 @@ If you just don't want to use webpack or any other bundlers, you can simply incl
 | `data` | no | `{}` | Custom data object. May be useful when handling events |
 
 ### [Link](#link)
+
 |  Prop  | Required | Type/Default | Description |
 |:-------|:---------|:-------------|:------------|
 | `id` | no | String / generated [ulid](https://github.com/ulid/javascript "ulid") identifier | Unique identifier of link |
@@ -267,14 +274,16 @@ If you just don't want to use webpack or any other bundlers, you can simply incl
 |`created-link`|[`Link`](#link)|The event is emitted after creating a new link|
 
 ## CONTRIBUTING
+
 Best way to contribute is to create a pull request. In order to create a pull request:
-- Fork this repository
-- Clone repository fork (created in previous step) locally (on your machine)
-- Ensure that you have nodejs and npm installed locally
-- In console:
-  - `cd` into project folder
-  - `npm install && npm run dev`
-- After change is done lint project `npm run lint`
-- Commit only meaningful changes. Do not commit distribution files (dist folder). Distribution files are built only before a release
-- Push your changes into your fork
-- Create a pull request
+
+* Fork this repository
+* Clone repository fork (created in previous step) locally (on your machine)
+* Ensure that you have nodejs and npm installed locally
+* In console:
+  * `cd` into project folder
+  * `npm install && npm run dev`
+* After change is done lint project `npm run lint`
+* Commit only meaningful changes. Do not commit distribution files (dist folder). Distribution files are built only before a release
+* Push your changes into your fork
+* Create a pull request
diff --git a/docs/components/simple-example.vue b/docs/components/simple-example.vue
@@ -5,64 +5,72 @@
       :node-color="nodeColor"
       :node-pulsable="nodePulsable"
     >
-      <pre slot="node" slot-scope="{node}">{{ format(node) }}</pre>
+      <pre slot="node" slot-scope="{ node }">{{ format(node) }}</pre>
     </VueDiagramEditor>
 
     <div class="d-flex">
-      <button class="btn btn-secondary m-1" @click="$refs.diagram.resetZoom()">resetZoom</button>
-      <button class="btn btn-secondary m-1" @click="$refs.diagram.fit()">fit</button>
-      <button class="btn btn-secondary m-1" @click="$refs.diagram.contain()">contain</button>
-      <button class="btn btn-secondary m-1" @click="$refs.diagram.center()">center</button>
+      <button class="btn btn-secondary m-1" @click="$refs.diagram.resetZoom()">
+        resetZoom
+      </button>
+      <button class="btn btn-secondary m-1" @click="$refs.diagram.fit()">
+        fit
+      </button>
+      <button class="btn btn-secondary m-1" @click="$refs.diagram.contain()">
+        contain
+      </button>
+      <button class="btn btn-secondary m-1" @click="$refs.diagram.center()">
+        center
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import VueDiagramEditor from '../../src';
+import VueDiagramEditor from "../../src";
 
 export default {
-  name: 'SimpleExample',
+  name: "SimpleExample",
   components: {
-    VueDiagramEditor
+    VueDiagramEditor,
   },
   data: () => ({
     nodes: {
-      'node-1': {
-        id: 'node-1',
-        title: 'My node 1',
+      "node-1": {
+        id: "node-1",
+        title: "My node 1",
         size: {
           width: 200,
-          height: 220
+          height: 220,
         },
         portsOut: {
-          default: 'out port default'
-        }
+          default: "out port default",
+        },
       },
-      'node-2': {
-        id: 'node-2',
-        title: 'My node 2',
+      "node-2": {
+        id: "node-2",
+        title: "My node 2",
         size: {
           width: 200,
-          height: 220
+          height: 220,
         },
         coordinates: {
           x: 280,
-          y: 100
+          y: 100,
         },
         portsIn: {
-          default: 'in port'
-        }
+          default: "in port",
+        },
       },
     },
     links: {
-      'link-1': {
-        id: 'link-1',
-        start_id: 'node-1',
-        start_port: 'default',
-        end_id: 'node-2',
-        end_port: 'default'
-      }
-    }
+      "link-1": {
+        id: "link-1",
+        start_id: "node-1",
+        start_port: "default",
+        end_id: "node-2",
+        end_port: "default",
+      },
+    },
   }),
   mounted() {
     this.init();
@@ -71,7 +79,7 @@ export default {
     init() {
       this.$refs.diagram.setModel({
         nodes: this.nodes,
-        links: this.links
+        links: this.links,
       });
     },
 
@@ -81,19 +89,19 @@ export default {
 
     nodeColor(node) {
       if (node.coordinates.x > 200) {
-        return '#0f0';
+        return "#0f0";
       }
       if (node.coordinates.y > 200) {
-        return '#f00';
+        return "#f00";
       }
 
-      return '#00f';
+      return "#00f";
     },
 
     nodePulsable(node) {
       return node.coordinates.y > 200;
-    }
-  }
+    },
+  },
 };
 </script>
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-diagram-editor",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Highly customizable diagram editor support for Vue.js",
   "author": "Maksim Kutishchev <max@amopro.ru>",
   "license": "Apache-2.0",
@@ -18,10 +18,10 @@
     "build-library": "node build/build-library.js",
     "build-docs": "rimraf gh-pages && mkdir gh-pages && node build/build-docs.js",
     "preview-docs": "http-server gh-pages",
-    "gh-pages": "npm run build-docs && gh-pages --dist gh-pages --branch gh-pages --dotfiles",
-    "lint:js": "eslint --ext .js --ext .vue --cache --cache-location node_modules/.cache/eslint --rule 'no-console: 2' .",
-    "lint:css": "stylelint '**/*.scss'",
-    "lint": "npm run lint:js && npm run lint:css"
+    "gh-pages": "yarn run build-docs && gh-pages --dist gh-pages --branch gh-pages --dotfiles",
+    "lint:js": "eslint --ext .js --ext .vue --cache --cache-location node_modules/.cache/eslint .",
+    "lint:css": "stylelint --fix \"**/*.scss\"",
+    "lint": "yarn run lint:js && yarn run lint:css"
   },
   "pre-commit": "lint",
   "dependencies": {

diff --git a/src/components/Diagram.vue b/src/components/Diagram.vue
@@ -2,6 +2,7 @@
   <div class="diagram-editor__wrapper">
     <DiagramRoot
       ref="diagram"
+      :bg-pattern="bgPattern"
       :width="width"
       :height="height"
       :grid-snap="gridSnap"
@@ -18,20 +19,22 @@
       :prevent-mouse-events-default="preventMouseEventsDefault"
       @select-node="$emit('select-node', $event)"
       @deleted-node="$emit('deleted-node', $event)"
-      @deleted-link="$emit('deleted-link', $event)"
       @updated-node="$emit('updated-node', $event)"
-      @click-port="$emit('click-port', $event)"
       @created-link="$emit('created-link', $event)"
+      @deleted-link="$emit('deleted-link', $event)"
+      @select-link="$emit('select-link', $event)"
+      @click-port="$emit('click-port', $event)"
+      @clear-selection="$emit('clear-selection', $event)"
     >
       <template #default="scopedParams">
-        <slot name="node" v-bind="scopedParams"/>
+        <slot name="node" v-bind="scopedParams" />
       </template>
     </DiagramRoot>
   </div>
 </template>
 <script>
 import DiagramRoot from "./DiagramRoot";
-import throttle from 'lodash/throttle';
+import throttle from "lodash/throttle";
 
 export default {
   name: "Diagram",
@@ -41,57 +44,61 @@ export default {
   },
 
   props: {
+    bgPattern:{
+      type: Number,
+      default: 0
+    },
     height: {
       type: Number,
-      default: 500
+      default: 500,
     },
     gridSnap: {
       type: Number,
-      default: 1
+      default: 1,
     },
     zoomEnabled: {
       type: Boolean,
-      default: true
+      default: true,
     },
     nodeColor: {
       type: Function,
-      default: () => "#66cc00"
+      default: () => "#66cc00",
     },
     nodePulseColor: {
       type: Function,
-      default: () => '#f00'
+      default: () => "#f00",
     },
     nodePulsable: {
       type: Function,
-      default: () => false
+      default: () => false,
     },
     nodeDeletable: {
       type: Function,
-      default: () => true
+      default: () => true,
     },
     beforeDeleteNode: {
       type: Function,
-      default: () => true
+      default: () => true,
     },
     beforeDeleteLink: {
       type: Function,
-      default: () => true
+      default: () => true,
     },
     portDisabled: {
       type: Function,
-      default: () => false
+      default: () => false,
     },
     portAvailable: {
       type: Function,
-      default: () => true
+      default: () => true,
     },
     pan: {
       type: Boolean,
-      default: true
+      default: true,
     },
     preventMouseEventsDefault: {
       type: Boolean,
-      default: true
+      default: true,
     },
   },
 
@@ -102,17 +109,17 @@ export default {
   },
 
   mounted() {
-    window.addEventListener('resize', this.updateWrapperWidth);
+    window.addEventListener("resize", this.updateWrapperWidth);
     this.updateWrapperWidth();
   },
 
   beforeDestroy() {
-    window.removeEventListener('resize', this.updateWrapperWidth);
+    window.removeEventListener("resize", this.updateWrapperWidth);
   },
 
   methods: {
     updateWrapperWidth: throttle(function () {
-      const {width} = this.$el.getBoundingClientRect();
+      const { width } = this.$el.getBoundingClientRect();
       this.width = width;
     }, 100),
 
@@ -132,8 +139,8 @@ export default {
       this.$refs.diagram.addLink(link);
     },
 
-    updateNode({id, name, value}) {
-      this.$refs.diagram.updateNode({id, name, value});
+    updateNode({ id, name, value }) {
+      this.$refs.diagram.updateNode({ id, name, value });
     },
 
     deleteNode(id) {
@@ -177,7 +184,12 @@ export default {
     center() {
       return this.$refs.diagram.center();
     },
+    zoomIn() {
+      return this.$refs.diagram.zoomIn();
+    },
+    zoomOut() {
+      return this.$refs.diagram.zoomOut();
+    },
   },
 };
 </script>
-