From b89daea472af40fc0a854127a34c6205358f03cd Mon Sep 17 00:00:00 2001 From: Roman Bruckner Date: Thu, 29 Aug 2024 14:58:15 +0200 Subject: [PATCH] update --- .../.gitignore | 0 .../README.md | 0 .../index.html | 2 +- .../package.json | 2 +- .../src/index.ts | 91 ++++++++++++++++++- .../tsconfig.json | 0 .../webpack.config.js | 0 7 files changed, 91 insertions(+), 4 deletions(-) rename examples/{link-label-rotation => link-labels-ts}/.gitignore (100%) rename examples/{link-label-rotation => link-labels-ts}/README.md (100%) rename examples/{link-label-rotation => link-labels-ts}/index.html (90%) rename examples/{link-label-rotation => link-labels-ts}/package.json (94%) rename examples/{link-label-rotation => link-labels-ts}/src/index.ts (57%) rename examples/{link-label-rotation => link-labels-ts}/tsconfig.json (100%) rename examples/{link-label-rotation => link-labels-ts}/webpack.config.js (100%) diff --git a/examples/link-label-rotation/.gitignore b/examples/link-labels-ts/.gitignore similarity index 100% rename from examples/link-label-rotation/.gitignore rename to examples/link-labels-ts/.gitignore diff --git a/examples/link-label-rotation/README.md b/examples/link-labels-ts/README.md similarity index 100% rename from examples/link-label-rotation/README.md rename to examples/link-labels-ts/README.md diff --git a/examples/link-label-rotation/index.html b/examples/link-labels-ts/index.html similarity index 90% rename from examples/link-label-rotation/index.html rename to examples/link-labels-ts/index.html index 599cc3922..cff7573d9 100644 --- a/examples/link-label-rotation/index.html +++ b/examples/link-labels-ts/index.html @@ -4,7 +4,7 @@ - Link Label Rotation | JointJS + Link Labels Typescript | JointJS
diff --git a/examples/link-label-rotation/package.json b/examples/link-labels-ts/package.json similarity index 94% rename from examples/link-label-rotation/package.json rename to examples/link-labels-ts/package.json index 5a22d60a2..63b9cfa98 100644 --- a/examples/link-label-rotation/package.json +++ b/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 b/examples/link-labels-ts/src/index.ts similarity index 57% rename from examples/link-label-rotation/src/index.ts rename to examples/link-labels-ts/src/index.ts index 956e062fa..c4333a386 100644 --- a/examples/link-label-rotation/src/index.ts +++ b/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 */` + + + `, + distance: '50%', + visibility: (view) => !view.model.hasLabels(), + action: (_evt, view) => { + view.model.appendLabel({ + markup: util.svg/* xml */` + + + `, + 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 */` + + + `, + 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 b/examples/link-labels-ts/tsconfig.json similarity index 100% rename from examples/link-label-rotation/tsconfig.json rename to examples/link-labels-ts/tsconfig.json diff --git a/examples/link-label-rotation/webpack.config.js b/examples/link-labels-ts/webpack.config.js similarity index 100% rename from examples/link-label-rotation/webpack.config.js rename to examples/link-labels-ts/webpack.config.js