update

clientIO · Aug 29, 2024 · b89daea · b89daea
1 parent 05ff15e
commit b89daea
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 4 deletions.
diff --git a/examples/link-label-rotation/.gitignore → examples/link-labels-ts/.gitignore b/examples/link-label-rotation/.gitignore → examples/link-labels-ts/.gitignore
diff --git a/examples/link-label-rotation/README.md → examples/link-labels-ts/README.md b/examples/link-label-rotation/README.md → examples/link-labels-ts/README.md
diff --git a/examples/link-label-rotation/index.html → examples/link-labels-ts/index.html b/examples/link-label-rotation/index.html → examples/link-labels-ts/index.html
@@ -4,7 +4,7 @@
     <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>
+    <title>Link Labels Typescript | JointJS</title>
   </head>
   <body style="height:100%;display:flex;justify-content:center;align-items:center;margin:0;overflow-y:hidden;">
     <div id="paper"></div>

diff --git a/examples/link-label-rotation/package.json → examples/link-labels-ts/package.json b/examples/link-label-rotation/package.json → examples/link-labels-ts/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@joint/demo-link-label-rotation",
+  "name": "@joint/demo-link-labels-ts",
   "version": "4.0.4",
   "main": "src/index.ts",
   "homepage": "https://jointjs.com",

diff --git a/examples/link-label-rotation/src/index.ts → examples/link-labels-ts/src/index.ts b/examples/link-label-rotation/src/index.ts → examples/link-labels-ts/src/index.ts
@@ -19,7 +19,8 @@ const paper = new dia.Paper({
     async: true,
 });
 
-// Example
+// Example 1
+// Rotate labels on a link.
 
 const el1 = new shapes.standard.Rectangle({
     position: {
@@ -156,7 +157,7 @@ l1.findView(paper).addTools(new dia.ToolsView({
             buttonColor: '#fff',
             iconColor: '#333',
             outlineColor: '#333',
-            scale: 1.5
+            scale: 1.5,
         }),
         new linkTools.RotateLabel({
             labelIndex: 2,
@@ -165,3 +166,89 @@ l1.findView(paper).addTools(new dia.ToolsView({
     ]
 }));
 
+// Example 2
+// Add or remove labels on a link with buttons.
+
+const l2 = new shapes.standard.Link({
+    source: {
+        x: 10,
+        y: 500
+    },
+    target: {
+        x: 400,
+        y: 570
+    },
+    attrs: {
+        line: {
+            strokeWidth: 3
+        }
+    }
+});
+
+graph.addCells([l2]);
+
+l2.findView(paper).addTools(new dia.ToolsView({
+    tools: [
+        new linkTools.Button({
+            attributes: {
+                cursor: 'pointer'
+            },
+            markup: util.svg/* xml */`
+                <circle r="10" fill="#266DD3" />
+                <path d="M -5 0 5 0 M 0 -5 0 5" stroke="#fff" stroke-width="2" />
+            `,
+            distance: '50%',
+            visibility: (view) => !view.model.hasLabels(),
+            action: (_evt, view) => {
+                view.model.appendLabel({
+                    markup: util.svg/* xml */`
+                        <rect @selector="labelBody" />
+                        <text @selector="labelText" />
+                    `,
+                    attrs: {
+                        labelBody: {
+                            ref: 'labelText',
+                            fill: '#fff',
+                            stroke: '#131E29',
+                            strokeWidth: 2,
+                            width: 'calc(w + 10)',
+                            height: 'calc(h + 10)',
+                            x: 'calc(x - 5)',
+                            y: 'calc(y - 5)',
+                        },
+                        labelText: {
+                            text: 'Label',
+                            textAnchor: 'middle',
+                            textVerticalAnchor: 'middle',
+                            fill: '#131E29',
+                            fontSize: 16,
+                            fontFamily: 'sans-serif',
+                        }
+                    },
+                    position: {
+                        distance: 0.5,
+                        args: {
+                            keepGradient: true
+                        }
+                    }
+                });
+            },
+        }),
+        new linkTools.Button({
+            attributes: {
+                cursor: 'pointer'
+            },
+            markup: util.svg/* xml */`
+                <circle r="10" fill="#ED2637" />
+                <path d="M -5 0 5 0" stroke="#fff" stroke-width="2" />
+            `,
+            distance: '50%',
+            offset: -30,
+            visibility: (view) => view.model.hasLabels(),
+            action: (_evt, view) => {
+                view.model.removeLabel(0);
+            }
+        })
+    ]
+}));
+
diff --git a/examples/link-label-rotation/tsconfig.json → examples/link-labels-ts/tsconfig.json b/examples/link-label-rotation/tsconfig.json → examples/link-labels-ts/tsconfig.json
diff --git a/...les/link-label-rotation/webpack.config.js → examples/link-labels-ts/webpack.config.js b/...les/link-label-rotation/webpack.config.js → examples/link-labels-ts/webpack.config.js