clientIO · Geliogabalus · Apr 30, 2025 · Apr 28, 2025 · Apr 28, 2025 · Apr 28, 2025
diff --git a/examples/connection-points-ts/.gitignore b/examples/connection-points-ts/.gitignore
@@ -0,0 +1,3 @@
+build/
+dist/
+node_modules/
diff --git a/examples/connection-points-ts/README.md b/examples/connection-points-ts/README.md
@@ -0,0 +1,24 @@
+# JointJS Link Label Tools
+
+The example shows different tools for editing labels.
+
+## 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/connection-points-ts/index.html b/examples/connection-points-ts/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 connection points demo serves as a template to help bring your idea to life in no time."/>
+    <title>Anchors Typescript | JointJS</title>
+  </head>
+  <body style="margin:0;">
+    <div id="paper"></div>
+    <script src="dist/bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/connection-points-ts/package.json b/examples/connection-points-ts/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@joint/demo-connection-points-ts",
+  "version": "4.1.3",
+  "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": "^5.7.3",
+    "webpack": "^5.61.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.1"
+  },
+  "volta": {
+    "node": "22.14.0",
+    "npm": "11.2.0",
+    "yarn": "4.7.0"
+  }
+}
diff --git a/examples/connection-points-ts/src/index.ts b/examples/connection-points-ts/src/index.ts
@@ -0,0 +1,224 @@
+import { dia, shapes, util } from '@joint/core';
+
+const cellNamespace = {
+    ...shapes,
+}
+
+const graph = new dia.Graph({}, {
+    cellNamespace: cellNamespace
+});
+
+const paper = new dia.Paper({
+    el: document.getElementById('paper'),
+    width: 1000,
+    height: 800,
+    overflow: true,
+    model: graph,
+    cellViewNamespace: cellNamespace,
+    gridSize: 1,
+    // async: true,
+    defaultAnchor: {
+        name: 'center',
+        args: {
+            useModelGeometry: true,
+        }
+    }
+});
+
+paper.el.style.display = 'none'
+
+let y = 100;
+
+function createPair(graph,{
+    sourceConnectionPoint = null,
+    targetConnectionPoint = null,
+    sourceLabel = '',
+    targetLabel = '',
+    sourceAttributes = {},
+    targetAttributes = {},
+    sourcePort = null,
+    targetPort = null
+} = {}) {
+    const portMarkup = util.svg`<rect x="-20" y="-10" width="40" height="20" fill="white" stroke="black" stroke-width="2" />`;
+
+    const sourceEl = new shapes.standard.Rectangle({
+        ...sourceAttributes,
+        position: {
+            x: 100,
+            y
+        },
+        size: {
+            width: 140,
+            height: 100
+        },
+        attrs: {
+            label: {
+                fontFamily: 'sans-serif',
+                text: sourceLabel,
+            }
+        },
+        ports: {
+            groups: {
+                portGroup1: {
+                    position: 'top',
+                    size: { width: 40, height: 20 },
+                }
+            }
+        },
+        portMarkup,
+    });
+    const targetEl = new shapes.standard.Rectangle({
+        ...targetAttributes,
+        position: {
+            x: 400,
+            y
+        },
+        size: {
+            width: 150,
+            height: 100
+        },
+        attrs: {
+            label: {
+                fontFamily: 'sans-serif',
+                text: targetLabel,
+            }
+        },
+        ports: {
+            groups: {
+                portGroup1: {
+                    position: 'top',
+                    size: { width: 40, height: 20 },
+                    attrs: {
+                        portBody: {
+                            width: 'calc(w)',
+                            height: 'calc(h)',
+
+                        }
+                    }
+                }
+            }
+        },
+        portMarkup,
+    });
+    if (sourcePort) {
+        sourceEl.addPort({
+            id: sourcePort,
+            group: 'portGroup1',
+        });
+    }
+    if (targetPort) {
+        targetEl.addPort({
+            id: targetPort,
+            group: 'portGroup1',
+        });
+    }
+    const link = new shapes.standard.Link({
+        source: {
+            id: sourceEl.id,
+            port: sourcePort,
+            connectionPoint: sourceConnectionPoint,
+        },
+        target: {
+            id: targetEl.id,
+            port: targetPort,
+            connectionPoint: targetConnectionPoint,
+        },
+        attrs: {
+            line: {
+                stroke: 'red',
+                strokeWidth: 3
+            }
+        }
+    });
+    graph.addCells([sourceEl, targetEl, link]);
+    y += 200;
+    return [sourceEl, targetEl, link];
+}
+
+createPair(graph, {
+    sourceConnectionPoint: {
+        name: 'bbox',
+        args: {
+            useModelGeometry: true,
+        }
+    },
+    sourceAttributes: {
+        angle: 45
+    },
+    sourceLabel: 'bbox',
+    targetConnectionPoint: {
+        name: 'bbox',
+        args: {
+            useModelGeometry: true,
+        }
+    },
+    targetLabel: 'bbox',
+});
+
+createPair(graph, {
+    sourceAttributes: {
+        angle: 45
+    },
+    sourceConnectionPoint: {
+        name: 'rectangle',
+        args: {
+            useModelGeometry: true,
+        }
+    },
+    sourceLabel: 'rectangle',
+    targetConnectionPoint: {
+        name: 'rectangle',
+        args: {
+            useModelGeometry: true,
+        }
+    },
+    targetLabel: 'rectangle',
+});
+
+createPair(graph, {
+    sourceConnectionPoint: {
+        name: 'bbox',
+        args: {
+            useModelGeometry: true,
+        }
+    },
+    sourcePort: 'port1',
+    sourceLabel: 'bbox',
+    targetAttributes: {
+        angle: 45
+    },
+    targetConnectionPoint: {
+        name: 'bbox',
+        args: {
+            useModelGeometry: true,
+        }
+    },
+    targetPort: 'port1',
+    targetLabel: 'bbox',
+});
+
+createPair(graph, {
+    sourceConnectionPoint: {
+        name: 'rectangle',
+        args: {
+            useModelGeometry: true,
+        }
+    },
+    sourcePort: 'port1',
+    sourceLabel: 'rectangle',
+    targetAttributes: {
+        angle: 45
+    },
+    targetConnectionPoint: {
+        name: 'rectangle',
+        args: {
+            useModelGeometry: true,
+        }
+    },
+    targetLabel: 'rectangle',
+    targetPort: 'port1',
+});
+
+paper.el.style.display = 'block';
+
+paper.fitToContent({ useModelGeometry: true, padding: 20 });
diff --git a/examples/connection-points-ts/tsconfig.json b/examples/connection-points-ts/tsconfig.json
@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "moduleResolution": "nodenext",
+        "module": "NodeNext",
+        "target": "es6",
+        "noImplicitAny": false,
+        "sourceMap": false,
+        "outDir": "./build"
+    }
+}
diff --git a/examples/connection-points-ts/webpack.config.js b/examples/connection-points-ts/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
+    },
+};