feat(linkTools): add Control and RotateLabel link tool

clientIO · Jul 27, 2024 · 07f018d · 07f018d
1 parent b1b7a45
commit 07f018d
Show file tree

Hide file tree

Showing 22 changed files with 442 additions and 15 deletions.
diff --git a/examples/link-label-rotation/.gitignore b/examples/link-label-rotation/.gitignore
@@ -0,0 +1,3 @@
+build/
+dist/
+node_modules/
diff --git a/examples/link-label-rotation/README.md b/examples/link-label-rotation/README.md
@@ -0,0 +1,21 @@
+# JointJS Link Label Rotation
+## Setup
+
+Use Yarn to run this demo.
+
+You need to build *JointJS* first. Navigate to the root folder and run:
+```bash
+yarn install
+yarn run build
+```
+
+Navigate to this directory, then run:
+```bash
+yarn start
+```
+
+## License
+
+The *JointJS* library is licensed under the [Mozilla Public License 2.0](https://github.com/clientIO/joint/blob/master/LICENSE).
+
+Copyright © 2013-2024 client IO
diff --git a/examples/link-label-rotation/index.html b/examples/link-label-rotation/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" style="height:100%;">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="description" content="The JointJS Link Label Rotation demo serves as a template to help bring your idea to life in no time."/>
+    <title>Link Label Rotation | JointJS</title>
+  </head>
+  <body style="height:100%;display:flex;justify-content:center;align-items:center;margin:0;overflow-y:hidden;">
+    <div id="paper"></div>
+    <script src="dist/bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/link-label-rotation/package.json b/examples/link-label-rotation/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@joint/demo-link-label-rotation",
+  "version": "4.0.4",
+  "main": "src/index.ts",
+  "homepage": "https://jointjs.com",
+  "author": {
+    "name": "client IO",
+    "url": "https://client.io"
+  },
+  "license": "MPL-2.0",
+  "private": true,
+  "installConfig": {
+    "hoistingLimits": "workspaces"
+  },
+  "scripts": {
+    "start": "webpack-dev-server",
+    "tsc": "tsc"
+  },
+  "dependencies": {
+    "@joint/core": "workspace:^"
+  },
+  "devDependencies": {
+    "css-loader": "3.5.3",
+    "style-loader": "1.2.1",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.4.3",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.1"
+  },
+  "volta": {
+    "node": "16.18.1",
+    "npm": "8.19.2",
+    "yarn": "3.4.1"
+  }
+}
diff --git a/examples/link-label-rotation/src/index.ts b/examples/link-label-rotation/src/index.ts
@@ -0,0 +1,167 @@
+import { dia, shapes, linkTools, util } from '@joint/core';
+
+const graph = new dia.Graph({}, {
+    cellNamespace: shapes
+});
+
+const paper = new dia.Paper({
+    el: document.getElementById('paper'),
+    width: 800,
+    height: 900,
+    overflow: true,
+    model: graph,
+    cellViewNamespace: shapes,
+    interactive: {
+        labelMove: true
+    },
+    snapLabels: true,
+    gridSize: 10,
+    async: true,
+});
+
+// Example
+
+const el1 = new shapes.standard.Rectangle({
+    position: {
+        x: 10,
+        y: 270
+    },
+    size: {
+        width: 80,
+        height: 80
+    },
+    attrs: {
+        body: {
+            strokeWidth: 3
+        }
+    }
+});
+const el2 = new shapes.standard.Rectangle({
+    position: {
+        x: 400,
+        y: 170
+    },
+    size: {
+        width: 80,
+        height: 80
+    },
+    attrs: {
+        body: {
+            strokeWidth: 3
+        }
+    }
+});
+
+const l1 = new shapes.standard.Link({
+    source: {
+        id: el1.id
+    },
+    target: {
+        id: el2.id
+    },
+    attrs: {
+        line: {
+            strokeWidth: 3
+        }
+    },
+    labels: [{
+        markup: util.svg/* xml */`
+            <path @selector="labelPath" />
+            <circle @selector="labelCircle" />
+        `,
+        attrs: {
+            labelPath: {
+                fill: 'none',
+                stroke: '#333',
+                strokeWidth: 4,
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round',
+                d: 'M 0 0 V -100 M -20 -100 v 20 H 20 v -20'
+            },
+            labelCircle: {
+                fill: '#333',
+                stroke: '#FFF',
+                r: 3,
+            }
+        },
+        position: {
+            distance: 0.5,
+            args: {
+                keepGradient: true
+            }
+        }
+    }, {
+        markup: util.svg/* xml */`
+            <path @selector="labelPath" />
+            <circle @selector="labelCircle" />
+        `,
+        attrs: {
+            labelPath: {
+                fill: 'none',
+                stroke: '#999',
+                strokeWidth: 2,
+                strokeDasharray: '5 5',
+                d: 'M 0 0 V -100 M -20 -80 v -20 H 20 v 20'
+            },
+            labelCircle: {
+                fill: '#333',
+                stroke: '#FFF',
+                r: 5,
+            }
+        },
+        position: {
+            distance: 0.8,
+            args: {
+                keepGradient: true
+            }
+        }
+    }, {
+        markup: util.svg/* xml */`
+            <path @selector="labelPath" />
+            <circle @selector="labelCircle" />
+        `,
+        attrs: {
+            labelPath: {
+                fill: 'none',
+                stroke: '#333',
+                strokeWidth: 3,
+                d: 'M 0 0 V -100 M -20 -80 L 0 -100 l 20 20'
+            },
+            labelCircle: {
+                fill: '#333',
+                stroke: '#FFF',
+                r: 3,
+            }
+        },
+        position: {
+            distance: 0.2,
+            args: {
+                keepGradient: false
+            }
+        }
+    }]
+});
+
+graph.addCells([el1, el2, l1]);
+
+l1.findView(paper).addTools(new dia.ToolsView({
+    tools: [
+        new linkTools.RotateLabel({
+            labelIndex: 0,
+            offset: -60,
+        }),
+        new linkTools.RotateLabel({
+            labelIndex: 1,
+            offset: -125,
+            buttonColor: '#fff',
+            iconColor: '#333',
+            outlineColor: '#333',
+            scale: 1.5
+        }),
+        new linkTools.RotateLabel({
+            labelIndex: 2,
+            offset: -115,
+        })
+    ]
+}));
+
diff --git a/examples/link-label-rotation/tsconfig.json b/examples/link-label-rotation/tsconfig.json
@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es5",
+        "noImplicitAny": false,
+        "sourceMap": false,
+        "outDir": "./build"
+    }
+}
diff --git a/examples/link-label-rotation/webpack.config.js b/examples/link-label-rotation/webpack.config.js
@@ -0,0 +1,30 @@
+const path = require('path');
+
+module.exports = {
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js']
+    },
+    entry: './src/index.ts',
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'dist'),
+        publicPath: '/dist/'
+    },
+    mode: 'development',
+    module: {
+        rules: [
+            { test: /\.ts$/, loader: 'ts-loader' },
+            {
+                test: /\.css$/,
+                sideEffects: true,
+                use: ['style-loader', 'css-loader'],
+            }
+        ]
+    },
+    devServer: {
+        static: {
+            directory: __dirname,
+        },
+        compress: true
+    },
+};
diff --git a/...ges/joint-core/src/linkTools/Boundary.mjs → ...ges/joint-core/src/cellTools/Boundary.mjs b/...ges/joint-core/src/linkTools/Boundary.mjs → ...ges/joint-core/src/cellTools/Boundary.mjs
diff --git a/packages/joint-core/src/linkTools/Button.mjs → packages/joint-core/src/cellTools/Button.mjs b/packages/joint-core/src/linkTools/Button.mjs → packages/joint-core/src/cellTools/Button.mjs
diff --git a/...ages/joint-core/src/linkTools/Connect.mjs → ...ages/joint-core/src/cellTools/Connect.mjs b/...ages/joint-core/src/linkTools/Connect.mjs → ...ages/joint-core/src/cellTools/Connect.mjs
diff --git a/...s/joint-core/src/elementTools/Control.mjs → ...ages/joint-core/src/cellTools/Control.mjs b/...s/joint-core/src/elementTools/Control.mjs → ...ages/joint-core/src/cellTools/Control.mjs
diff --git a/...joint-core/src/linkTools/HoverConnect.mjs → ...joint-core/src/cellTools/HoverConnect.mjs b/...joint-core/src/linkTools/HoverConnect.mjs → ...joint-core/src/cellTools/HoverConnect.mjs
@@ -1,4 +1,4 @@
-import { Connect } from '../linkTools/Connect.mjs';
+import { Connect } from './Connect.mjs';
 import V from '../V/index.mjs';
 import $ from '../mvc/Dom/index.mjs';
 import * as util from '../util/index.mjs';

diff --git a/...ages/joint-core/src/linkTools/helpers.mjs → ...ages/joint-core/src/cellTools/helpers.mjs b/...ages/joint-core/src/linkTools/helpers.mjs → ...ages/joint-core/src/cellTools/helpers.mjs
diff --git a/packages/joint-core/src/dia/LinkView.mjs b/packages/joint-core/src/dia/LinkView.mjs
@@ -63,7 +63,7 @@ export const LinkView = CellView.extend({
         attrs: [Flags.UPDATE],
         router: [Flags.UPDATE],
         connector: [Flags.CONNECTOR],
-        labels: [Flags.LABELS],
+        labels: [Flags.LABELS, Flags.TOOLS],
         labelMarkup: [Flags.LABELS],
         vertices: [Flags.UPDATE],
         source: [Flags.SOURCE, Flags.UPDATE],

diff --git a/packages/joint-core/src/elementTools/HoverConnect.mjs b/packages/joint-core/src/elementTools/HoverConnect.mjs
@@ -1,7 +1,7 @@
-import { HoverConnect as LinkHoverConnect } from '../linkTools/HoverConnect.mjs';
+import { HoverConnect as LinkHoverConnect } from '../cellTools/HoverConnect.mjs';
 import V from '../V/index.mjs';
 import * as g from '../g/index.mjs';
-import { getViewBBox } from '../linkTools/helpers.mjs';
+import { getViewBBox } from '../cellTools/helpers.mjs';
 import { isCalcAttribute, evalCalcAttribute } from '../dia/attributes/calc.mjs';
 
 export const HoverConnect = LinkHoverConnect.extend({

diff --git a/packages/joint-core/src/elementTools/index.mjs b/packages/joint-core/src/elementTools/index.mjs
@@ -1,5 +1,6 @@
-export * from './Control.mjs';
-export { Button, Remove } from '../linkTools/Button.mjs';
-export { Connect } from '../linkTools/Connect.mjs';
-export { Boundary } from '../linkTools/Boundary.mjs';
 export { HoverConnect } from './HoverConnect.mjs';
+
+export { Button, Remove } from '../cellTools/Button.mjs';
+export { Connect } from '../cellTools/Connect.mjs';
+export { Boundary } from '../cellTools/Boundary.mjs';
+export { Control } from '../cellTools/Control.mjs';
diff --git a/packages/joint-core/src/linkTools/Anchor.mjs b/packages/joint-core/src/linkTools/Anchor.mjs
@@ -1,7 +1,7 @@
 import * as g from '../g/index.mjs';
 import * as util from '../util/index.mjs';
 import { ToolView } from '../dia/ToolView.mjs';
-import { getAnchor, snapAnchor } from './helpers.mjs';
+import { getAnchor, snapAnchor } from '../cellTools/helpers.mjs';
 
 const Anchor = ToolView.extend({
     tagName: 'g',