Skip to content

Commit 3c1d940

Browse files
kumilinguskumilingus
committed
feat(dia.Element): add getPortBBox(), getPortCenter(); port metrics c… (#2944)
1 parent 0bd880d commit 3c1d940

File tree

15 files changed

+841
-87
lines changed

15 files changed

+841
-87
lines changed

‎examples/connection-points-ts/.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
build/
2+
dist/
3+
node_modules/

‎examples/connection-points-ts/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# JointJS Link Label Tools
2+
3+
The example shows different tools for editing labels.
4+
5+
## Setup
6+
7+
Use Yarn to run this demo.
8+
9+
You need to build *JointJS* first. Navigate to the root folder and run:
10+
```bash
11+
yarn install
12+
yarn run build
13+
```
14+
15+
Navigate to this directory, then run:
16+
```bash
17+
yarn start
18+
```
19+
20+
## License
21+
22+
The *JointJS* library is licensed under the [Mozilla Public License 2.0](https://github.com/clientIO/joint/blob/master/LICENSE).
23+
24+
Copyright © 2013-2024 client IO

‎examples/connection-points-ts/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en" style="height:100%;">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6+
<meta name="description" content="The JointJS link connection points demo serves as a template to help bring your idea to life in no time."/>
7+
<title>Anchors Typescript | JointJS</title>
8+
</head>
9+
<body style="margin:0;">
10+
<div id="paper"></div>
11+
<script src="dist/bundle.js"></script>
12+
</body>
13+
</html>

‎examples/connection-points-ts/package.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "@joint/demo-connection-points-ts",
3+
"version": "4.1.3",
4+
"main": "src/index.ts",
5+
"homepage": "https://jointjs.com",
6+
"author": {
7+
"name": "client IO",
8+
"url": "https://client.io"
9+
},
10+
"license": "MPL-2.0",
11+
"private": true,
12+
"installConfig": {
13+
"hoistingLimits": "workspaces"
14+
},
15+
"scripts": {
16+
"start": "webpack-dev-server",
17+
"tsc": "tsc"
18+
},
19+
"dependencies": {
20+
"@joint/core": "workspace:^"
21+
},
22+
"devDependencies": {
23+
"css-loader": "3.5.3",
24+
"style-loader": "1.2.1",
25+
"ts-loader": "^9.2.5",
26+
"typescript": "^5.7.3",
27+
"webpack": "^5.61.0",
28+
"webpack-cli": "^4.8.0",
29+
"webpack-dev-server": "^4.2.1"
30+
},
31+
"volta": {
32+
"node": "22.14.0",
33+
"npm": "11.2.0",
34+
"yarn": "4.7.0"
35+
}
36+
}

‎examples/connection-points-ts/src/index.ts

Lines changed: 224 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
import { dia, shapes, util } from '@joint/core';
2+
3+
const cellNamespace = {
4+
...shapes,
5+
}
6+
7+
const graph = new dia.Graph({}, {
8+
cellNamespace: cellNamespace
9+
});
10+
11+
const paper = new dia.Paper({
12+
el: document.getElementById('paper'),
13+
width: 1000,
14+
height: 800,
15+
overflow: true,
16+
model: graph,
17+
cellViewNamespace: cellNamespace,
18+
gridSize: 1,
19+
// async: true,
20+
defaultAnchor: {
21+
name: 'center',
22+
args: {
23+
useModelGeometry: true,
24+
}
25+
}
26+
});
27+
28+
paper.el.style.display = 'none'
29+
30+
let y = 100;
31+
32+
function createPair(graph,{
33+
sourceConnectionPoint = null,
34+
targetConnectionPoint = null,
35+
sourceLabel = '',
36+
targetLabel = '',
37+
sourceAttributes = {},
38+
targetAttributes = {},
39+
sourcePort = null,
40+
targetPort = null
41+
} = {}) {
42+
const portMarkup = util.svg`<rect x="-20" y="-10" width="40" height="20" fill="white" stroke="black" stroke-width="2" />`;
43+
44+
const sourceEl = new shapes.standard.Rectangle({
45+
...sourceAttributes,
46+
position: {
47+
x: 100,
48+
y
49+
},
50+
size: {
51+
width: 140,
52+
height: 100
53+
},
54+
attrs: {
55+
label: {
56+
fontFamily: 'sans-serif',
57+
text: sourceLabel,
58+
}
59+
},
60+
ports: {
61+
groups: {
62+
portGroup1: {
63+
position: 'top',
64+
size: { width: 40, height: 20 },
65+
}
66+
}
67+
},
68+
portMarkup,
69+
});
70+
const targetEl = new shapes.standard.Rectangle({
71+
...targetAttributes,
72+
position: {
73+
x: 400,
74+
y
75+
},
76+
size: {
77+
width: 150,
78+
height: 100
79+
},
80+
attrs: {
81+
label: {
82+
fontFamily: 'sans-serif',
83+
text: targetLabel,
84+
}
85+
},
86+
ports: {
87+
groups: {
88+
portGroup1: {
89+
position: 'top',
90+
size: { width: 40, height: 20 },
91+
attrs: {
92+
portBody: {
93+
width: 'calc(w)',
94+
height: 'calc(h)',
95+
96+
}
97+
}
98+
}
99+
}
100+
},
101+
portMarkup,
102+
});
103+
if (sourcePort) {
104+
sourceEl.addPort({
105+
id: sourcePort,
106+
group: 'portGroup1',
107+
});
108+
}
109+
if (targetPort) {
110+
targetEl.addPort({
111+
id: targetPort,
112+
group: 'portGroup1',
113+
});
114+
}
115+
const link = new shapes.standard.Link({
116+
source: {
117+
id: sourceEl.id,
118+
port: sourcePort,
119+
connectionPoint: sourceConnectionPoint,
120+
},
121+
target: {
122+
id: targetEl.id,
123+
port: targetPort,
124+
connectionPoint: targetConnectionPoint,
125+
},
126+
attrs: {
127+
line: {
128+
stroke: 'red',
129+
strokeWidth: 3
130+
}
131+
}
132+
});
133+
graph.addCells([sourceEl, targetEl, link]);
134+
y += 200;
135+
return [sourceEl, targetEl, link];
136+
}
137+
138+
createPair(graph, {
139+
sourceConnectionPoint: {
140+
name: 'bbox',
141+
args: {
142+
useModelGeometry: true,
143+
}
144+
},
145+
sourceAttributes: {
146+
angle: 45
147+
},
148+
sourceLabel: 'bbox',
149+
targetConnectionPoint: {
150+
name: 'bbox',
151+
args: {
152+
useModelGeometry: true,
153+
}
154+
},
155+
targetLabel: 'bbox',
156+
});
157+
158+
createPair(graph, {
159+
sourceAttributes: {
160+
angle: 45
161+
},
162+
sourceConnectionPoint: {
163+
name: 'rectangle',
164+
args: {
165+
useModelGeometry: true,
166+
}
167+
},
168+
sourceLabel: 'rectangle',
169+
targetConnectionPoint: {
170+
name: 'rectangle',
171+
args: {
172+
useModelGeometry: true,
173+
}
174+
},
175+
targetLabel: 'rectangle',
176+
});
177+
178+
createPair(graph, {
179+
sourceConnectionPoint: {
180+
name: 'bbox',
181+
args: {
182+
useModelGeometry: true,
183+
}
184+
},
185+
sourcePort: 'port1',
186+
sourceLabel: 'bbox',
187+
targetAttributes: {
188+
angle: 45
189+
},
190+
targetConnectionPoint: {
191+
name: 'bbox',
192+
args: {
193+
useModelGeometry: true,
194+
}
195+
},
196+
targetPort: 'port1',
197+
targetLabel: 'bbox',
198+
});
199+
200+
createPair(graph, {
201+
sourceConnectionPoint: {
202+
name: 'rectangle',
203+
args: {
204+
useModelGeometry: true,
205+
}
206+
},
207+
sourcePort: 'port1',
208+
sourceLabel: 'rectangle',
209+
targetAttributes: {
210+
angle: 45
211+
},
212+
targetConnectionPoint: {
213+
name: 'rectangle',
214+
args: {
215+
useModelGeometry: true,
216+
}
217+
},
218+
targetLabel: 'rectangle',
219+
targetPort: 'port1',
220+
});
221+
222+
paper.el.style.display = 'block';
223+
224+
paper.fitToContent({ useModelGeometry: true, padding: 20 });

‎examples/connection-points-ts/tsconfig.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"moduleResolution": "nodenext",
4+
"module": "NodeNext",
5+
"target": "es6",
6+
"noImplicitAny": false,
7+
"sourceMap": false,
8+
"outDir": "./build"
9+
}
10+
}

‎examples/connection-points-ts/webpack.config.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
const path = require('path');
2+
3+
module.exports = {
4+
resolve: {
5+
extensions: ['.ts', '.tsx', '.js']
6+
},
7+
entry: './src/index.ts',
8+
output: {
9+
filename: 'bundle.js',
10+
path: path.resolve(__dirname, 'dist'),
11+
publicPath: '/dist/'
12+
},
13+
mode: 'development',
14+
module: {
15+
rules: [
16+
{ test: /\.ts$/, loader: 'ts-loader' },
17+
{
18+
test: /\.css$/,
19+
sideEffects: true,
20+
use: ['style-loader', 'css-loader'],
21+
}
22+
]
23+
},
24+
devServer: {
25+
static: {
26+
directory: __dirname,
27+
},
28+
compress: true
29+
},
30+
};

0 commit comments

Comments
 (0)