@joint/core 4.0.1 → 4.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +124 -5
- package/dist/geometry.js +1 -1
- package/dist/geometry.min.js +1 -1
- package/dist/joint.d.ts +25 -13
- package/dist/joint.js +578 -209
- package/dist/joint.min.js +2 -2
- package/dist/joint.nowrap.js +578 -209
- package/dist/joint.nowrap.min.js +2 -2
- package/dist/vectorizer.js +5 -1
- package/dist/vectorizer.min.js +2 -2
- package/dist/version.mjs +1 -1
- package/package.json +2 -1
- package/src/V/index.mjs +4 -0
- package/src/dia/CellView.mjs +11 -6
- package/src/dia/Paper.mjs +2 -0
- package/src/dia/attributes/text.mjs +8 -4
- package/src/dia/layers/GridLayer.mjs +6 -2
- package/src/dia/ports.mjs +7 -0
- package/src/linkTools/Arrowhead.mjs +3 -1
- package/src/mvc/View.mjs +9 -7
- package/src/routers/rightAngle.mjs +486 -153
- package/types/joint.d.ts +24 -12
package/README.md
CHANGED
|
@@ -1,6 +1,55 @@
|
|
|
1
|
-
# JointJS
|
|
1
|
+
# JointJS - JavaScript diagramming library powering exceptional UIs
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://app.travis-ci.com/clientIO/joint)
|
|
4
|
+
[](https://github.com/clientIO/joint/discussions)
|
|
5
|
+
[](https://www.npmjs.com/package/jointjs)
|
|
6
|
+
[](https://github.com/clientIO/joint/blob/master/LICENSE)
|
|
7
|
+
|
|
8
|
+
[JointJS](https://jointjs.com) is a tested and proven *JavaScript*/*Typescript* diagramming library that helps developers and companies of any size build visual and No-Code/Low-Code applications faster and with confidence. It’s a flexible tool from which a wide range of UIs can be created (interactive diagramming applications, drawing tools, data visualizations, UIs for monitoring systems, and many more). It can become the foundational layer of your next application and help you bring your idea to market in days, not months or years.
|
|
9
|
+
|
|
10
|
+

|
|
11
|
+
|
|
12
|
+
Further **information**, **examples** and **documentation** can be found at [jointjs.com](https://jointjs.com).
|
|
13
|
+
|
|
14
|
+
:1234: Get started with [tutorials](https://resources.jointjs.com/tutorial).
|
|
15
|
+
|
|
16
|
+
:bulb: To ask a question, share feedback, or engage in a discussion with other community members, visit our [GitHub discussions](https://github.com/clientIO/joint/discussions).
|
|
17
|
+
|
|
18
|
+
:pen: More examples are available on [CodePen](https://codepen.io/jointjs).
|
|
19
|
+
|
|
20
|
+
:book: Check out our [mind-map documentation](https://resources.jointjs.com/mmap/joint.html).
|
|
21
|
+
|
|
22
|
+
## Features
|
|
23
|
+
|
|
24
|
+
* essential diagram elements (rect, circle, ellipse, text, image, path)
|
|
25
|
+
* ready-to-use diagram elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, ...)
|
|
26
|
+
* custom diagram elements based on SVG or programmatically rendered
|
|
27
|
+
* connecting diagram elements with links or links with links
|
|
28
|
+
* customizable links, their arrowheads and labels
|
|
29
|
+
* configurable link shapes (anchors, connection points, vertices, routers, connectors)
|
|
30
|
+
* custom element properties and data
|
|
31
|
+
* import/export from/to JSON format
|
|
32
|
+
* customizable element ports (look and position, distributed around shapes or manually positioned)
|
|
33
|
+
* rich graph API (traversal, dfs, bfs, find neighbors, predecessors, elements at point, ...)
|
|
34
|
+
* granular interactivity
|
|
35
|
+
* hierarchical diagrams (containers, embedded elements, child-parent relationships)
|
|
36
|
+
* element & link tools (buttons, status icons, tools to change the shape of links, ...)
|
|
37
|
+
* highlighters (provide visual emphasis to your elements)
|
|
38
|
+
* automatic layouts (arrange the elements and links automatically)
|
|
39
|
+
* highly event driven (react on any event that happens inside the diagram)
|
|
40
|
+
* zoom in/out
|
|
41
|
+
* touch support
|
|
42
|
+
* MVC architecture
|
|
43
|
+
* SVG based
|
|
44
|
+
* ... a lot more
|
|
45
|
+
|
|
46
|
+
## Supported browsers
|
|
47
|
+
|
|
48
|
+
* Latest Google Chrome (including mobile)
|
|
49
|
+
* Latest Firefox
|
|
50
|
+
* Latest Safari (including mobile)
|
|
51
|
+
* Latest Microsoft's Edge
|
|
52
|
+
* Latest Opera
|
|
4
53
|
|
|
5
54
|
## Development Environment
|
|
6
55
|
|
|
@@ -14,14 +63,16 @@ Make sure you have the following dependencies installed on your system:
|
|
|
14
63
|
* [git](https://git-scm.com/)
|
|
15
64
|
* [yarn](https://yarnpkg.com/getting-started/install)
|
|
16
65
|
|
|
66
|
+
Make sure that you are using Yarn version >= 2.0.0, so that you have access to [Yarn workspace ranges](https://yarnpkg.com/features/workspaces#workspace-ranges-workspace) functionality. If you are using [Volta](https://volta.sh/), it will automatically read this restriction from `package.json`.
|
|
67
|
+
|
|
17
68
|
### Setup
|
|
18
69
|
|
|
19
|
-
Clone
|
|
70
|
+
Clone this git repository:
|
|
20
71
|
```bash
|
|
21
72
|
git clone https://github.com/clientIO/joint.git
|
|
22
73
|
```
|
|
23
74
|
|
|
24
|
-
Navigate to the
|
|
75
|
+
Navigate to the `joint` directory:
|
|
25
76
|
```bash
|
|
26
77
|
cd joint
|
|
27
78
|
```
|
|
@@ -36,12 +87,80 @@ Generate distribution files from the source code:
|
|
|
36
87
|
yarn run dist
|
|
37
88
|
```
|
|
38
89
|
|
|
39
|
-
You are now ready to browse our
|
|
90
|
+
You are now ready to browse our example applications, which combine functionality from multiple JointJS packages:
|
|
91
|
+
```bash
|
|
92
|
+
cd examples
|
|
93
|
+
```
|
|
94
|
+
Refer to each application's `README.md` file for additional instructions.
|
|
95
|
+
|
|
96
|
+
You can also browse the demo applications of our JointJS Core package:
|
|
40
97
|
```bash
|
|
41
98
|
cd packages/joint-core/demo
|
|
42
99
|
```
|
|
43
100
|
Most demos can be run by simply opening the `index.html` file in your browser. Some demos have additional instructions, which you can find in their respective `README.md` files.
|
|
44
101
|
|
|
102
|
+
### Tests
|
|
103
|
+
|
|
104
|
+
To run all tests:
|
|
105
|
+
```bash
|
|
106
|
+
yarn run test
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
To run only the server-side tests:
|
|
110
|
+
```bash
|
|
111
|
+
yarn run test-server
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
To run only the client-side tests:
|
|
115
|
+
```bash
|
|
116
|
+
yarn run test-client
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
To run only TypeScript tests:
|
|
120
|
+
```bash
|
|
121
|
+
yarn run test-ts
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Lint
|
|
125
|
+
|
|
126
|
+
To check for linting errors in `src` and `types` directories:
|
|
127
|
+
```bash
|
|
128
|
+
yarn run lint
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
To auto fix errors, run eslint for `src` and `types` directories:
|
|
132
|
+
```bash
|
|
133
|
+
yarn run lint-fix
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Code Coverage Reports
|
|
137
|
+
|
|
138
|
+
To output a code coverage report in HTML:
|
|
139
|
+
```bash
|
|
140
|
+
yarn run test-coverage
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
To output a code coverage report in [lcov format](http://ltp.sourceforge.net/coverage/lcov/geninfo.1.php):
|
|
144
|
+
```bash
|
|
145
|
+
yarn run test-coverage-lcov
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
The output for all unit tests will be saved in the `packages/joint-core/coverage` directory.
|
|
149
|
+
|
|
150
|
+
## Documentation
|
|
151
|
+
|
|
152
|
+
The source files for the *JointJS* documentation (plus *Geometry* and *Vectorizer* libraries) are included in this repository; see the `packages/joint-core/docs` directory. The documentation can be built into stand-alone HTML documents like this:
|
|
153
|
+
```bash
|
|
154
|
+
yarn run build-docs
|
|
155
|
+
```
|
|
156
|
+
The output of the above command can be found at `packages/joint-core/build/docs`.
|
|
157
|
+
|
|
158
|
+
## Contributors
|
|
159
|
+
|
|
160
|
+
<a href="https://github.com/clientIO/joint/graphs/contributors">
|
|
161
|
+
<img src="https://contrib.rocks/image?repo=clientIO/joint" />
|
|
162
|
+
</a>
|
|
163
|
+
|
|
45
164
|
## License
|
|
46
165
|
|
|
47
166
|
The *JointJS* library is licensed under the [Mozilla Public License 2.0](https://github.com/clientIO/joint/blob/master/LICENSE).
|
package/dist/geometry.js
CHANGED
package/dist/geometry.min.js
CHANGED
package/dist/joint.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! JointJS v4.0.
|
|
1
|
+
/*! JointJS v4.0.3 (2024-05-14) - JavaScript diagramming library
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
This Source Code Form is subject to the terms of the Mozilla Public
|
|
@@ -72,7 +72,7 @@ export declare namespace anchors {
|
|
|
72
72
|
endMagnet: SVGElement,
|
|
73
73
|
anchorReference: g.Point | SVGElement,
|
|
74
74
|
opt: AnchorArgumentsMap[K],
|
|
75
|
-
endType:
|
|
75
|
+
endType: dia.LinkEnd,
|
|
76
76
|
linkView: dia.LinkView
|
|
77
77
|
): g.Point;
|
|
78
78
|
}
|
|
@@ -469,7 +469,7 @@ export declare namespace connectionPoints {
|
|
|
469
469
|
endView: dia.CellView,
|
|
470
470
|
endMagnet: SVGElement,
|
|
471
471
|
opt: ConnectionPointArgumentsMap[K],
|
|
472
|
-
endType:
|
|
472
|
+
endType: dia.LinkEnd,
|
|
473
473
|
linkView: dia.LinkView
|
|
474
474
|
): g.Point;
|
|
475
475
|
}
|
|
@@ -1519,18 +1519,18 @@ export declare namespace dia {
|
|
|
1519
1519
|
}
|
|
1520
1520
|
}
|
|
1521
1521
|
|
|
1522
|
-
export class ElementView extends CellViewGeneric<
|
|
1522
|
+
export class ElementView<E extends Element = Element> extends CellViewGeneric<E> {
|
|
1523
1523
|
|
|
1524
|
-
update(element?:
|
|
1524
|
+
update(element?: E, renderingOnlyAttrs?: { [key: string]: any }): void;
|
|
1525
1525
|
|
|
1526
1526
|
setInteractivity(value: boolean | ElementView.InteractivityOptions): void;
|
|
1527
1527
|
|
|
1528
1528
|
getDelegatedView(): ElementView | null;
|
|
1529
1529
|
|
|
1530
1530
|
findPortNode(portId: string | number): SVGElement | null;
|
|
1531
|
-
findPortNode(portId: string | number, selector: string):
|
|
1531
|
+
findPortNode(portId: string | number, selector: string): E | null;
|
|
1532
1532
|
|
|
1533
|
-
findPortNodes(portId: string | number, groupSelector: string):
|
|
1533
|
+
findPortNodes(portId: string | number, groupSelector: string): E[];
|
|
1534
1534
|
|
|
1535
1535
|
protected renderMarkup(): void;
|
|
1536
1536
|
|
|
@@ -1605,14 +1605,14 @@ export declare namespace dia {
|
|
|
1605
1605
|
|
|
1606
1606
|
}
|
|
1607
1607
|
|
|
1608
|
-
export interface Options extends mvc.ViewOptions<
|
|
1608
|
+
export interface Options<L extends Link = Link> extends mvc.ViewOptions<L, SVGElement> {
|
|
1609
1609
|
labelsLayer?: Paper.Layers | string | false;
|
|
1610
1610
|
}
|
|
1611
1611
|
}
|
|
1612
1612
|
|
|
1613
|
-
export class LinkView extends CellViewGeneric<
|
|
1613
|
+
export class LinkView<L extends Link = Link> extends CellViewGeneric<L> {
|
|
1614
1614
|
|
|
1615
|
-
options: LinkView.Options
|
|
1615
|
+
options: LinkView.Options<L>;
|
|
1616
1616
|
sourceAnchor: g.Point;
|
|
1617
1617
|
targetAnchor: g.Point;
|
|
1618
1618
|
|
|
@@ -1680,6 +1680,8 @@ export declare namespace dia {
|
|
|
1680
1680
|
|
|
1681
1681
|
removeRedundantLinearVertices(opt?: dia.ModelSetOptions): number;
|
|
1682
1682
|
|
|
1683
|
+
startArrowheadMove(end: dia.LinkEnd, options?: any): unknown;
|
|
1684
|
+
|
|
1683
1685
|
protected updateRoute(): void;
|
|
1684
1686
|
|
|
1685
1687
|
protected updatePath(): void;
|
|
@@ -1919,7 +1921,7 @@ export declare namespace dia {
|
|
|
1919
1921
|
gridWidth?: number;
|
|
1920
1922
|
gridHeight?: number;
|
|
1921
1923
|
padding?: Padding;
|
|
1922
|
-
allowNewOrigin?: 'negative' | 'positive' | 'any';
|
|
1924
|
+
allowNewOrigin?: false | 'negative' | 'positive' | 'any';
|
|
1923
1925
|
allowNegativeBottomRight?: boolean;
|
|
1924
1926
|
minWidth?: number;
|
|
1925
1927
|
minHeight?: number;
|
|
@@ -2405,8 +2407,6 @@ export declare namespace dia {
|
|
|
2405
2407
|
hide(): this;
|
|
2406
2408
|
|
|
2407
2409
|
mount(): this;
|
|
2408
|
-
|
|
2409
|
-
protected simulateRelatedView(el: SVGElement): void;
|
|
2410
2410
|
}
|
|
2411
2411
|
|
|
2412
2412
|
export namespace ToolView {
|
|
@@ -2426,6 +2426,8 @@ export declare namespace dia {
|
|
|
2426
2426
|
|
|
2427
2427
|
configure(opt?: ToolView.Options): this;
|
|
2428
2428
|
|
|
2429
|
+
protected simulateRelatedView(el: SVGElement): void;
|
|
2430
|
+
|
|
2429
2431
|
show(): void;
|
|
2430
2432
|
|
|
2431
2433
|
hide(): void;
|
|
@@ -2561,6 +2563,14 @@ export declare namespace elementTools {
|
|
|
2561
2563
|
constructor(opt?: Button.Options);
|
|
2562
2564
|
|
|
2563
2565
|
protected onPointerDown(evt: dia.Event): void;
|
|
2566
|
+
|
|
2567
|
+
protected position(): void;
|
|
2568
|
+
|
|
2569
|
+
protected getCellMatrix(): SVGMatrix;
|
|
2570
|
+
|
|
2571
|
+
protected getElementMatrix(): SVGMatrix;
|
|
2572
|
+
|
|
2573
|
+
protected getLinkMatrix(): SVGMatrix;
|
|
2564
2574
|
}
|
|
2565
2575
|
|
|
2566
2576
|
export class Remove extends Button {
|
|
@@ -4477,6 +4487,8 @@ export declare namespace mvc {
|
|
|
4477
4487
|
|
|
4478
4488
|
isMounted(): boolean;
|
|
4479
4489
|
|
|
4490
|
+
protected findAttributeNode(attributeName: string, node: Element): Element | null;
|
|
4491
|
+
|
|
4480
4492
|
protected init(): void;
|
|
4481
4493
|
|
|
4482
4494
|
protected onRender(): void;
|