-
-
-
-
-
-
-
diff --git a/examples/absolute-port-layout-dynamic-port-sizes-js/package.json b/examples/absolute-port-layout-dynamic-port-sizes-js/package.json
deleted file mode 100644
index 81d53bcd7f..0000000000
--- a/examples/absolute-port-layout-dynamic-port-sizes-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-absolute-port-layout-dynamic-port-sizes-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/absolute-port-layout-dynamic-port-sizes-js/src/main.js b/examples/absolute-port-layout-dynamic-port-sizes-js/src/main.js
deleted file mode 100644
index f35dfab51a..0000000000
--- a/examples/absolute-port-layout-dynamic-port-sizes-js/src/main.js
+++ /dev/null
@@ -1,276 +0,0 @@
-import { V, dia, shapes as defaultShapes, anchors, util } from '@joint/core';
-import './styles.css';
-
-class Shape extends dia.Element {
- defaults() {
- return {
- ...super.defaults,
- type: 'Shape',
- size: {
- width: 120,
- height: 60
- },
- attrs: {
- root: {
- cursor: 'move'
- },
- body: {
- fill: '#f2f1ed',
- stroke: '#4b557d',
- strokeWidth: 2,
- d:
- 'M 0 calc(h) H calc(w) V 4 a 4 4 1 0 0 -4 -4 H 4 a 4 4 1 0 0 -4 4 z M 0 calc(h-4) H calc(w)'
- },
- label: {
- text: 'Custom shape with dynamic port size',
- textWrap: { width: -20, height: -10, ellipsis: true },
- fontSize: 15,
- fontFamily: 'sans-serif',
- fill: '#4b557d',
- textVerticalAnchor: 'middle',
- textAnchor: 'middle',
- x: 'calc(0.5*w)',
- y: 'calc(0.5*h-2)'
- }
- },
- ports: {
- groups: {
- out: {
- z: -1,
- position: 'absolute',
- markup: [
- {
- tagName: 'rect',
- selector: 'portBody'
- },
- {
- tagName: 'text',
- selector: 'portLabel'
- }
- ],
- attrs: {
- portBody: {
- width: 'calc(w)',
- height: 'calc(h + 4)',
- fill: '#7088eb',
- stroke: '#4666E5',
- strokeWidth: 2,
- rx: 4,
- ry: 5,
- y: -4,
- magnet: true,
- cursor: 'crosshair'
- },
- portLabel: {
- x: 'calc(0.5 * w)',
- y: 'calc(0.5 * h)',
- textAnchor: 'middle',
- textVerticalAnchor: 'middle',
- textWrap: {
- width: -this.portPadding / 2,
- ellipsis: true
- },
- pointerEvents: 'none',
- fill: '#ffffff',
- ...this.portFontAttributes
- }
- }
- }
- }
- }
- };
- }
-
- preinitialize() {
- this.minWidth = 100;
- this.portPadding = 10;
- this.portGap = 10;
- this.portHeight = 20;
- this.portFontAttributes = {
- 'font-size': 14,
- 'font-family': 'sans-serif'
- };
- this.markup = [
- {
- tagName: 'path',
- selector: 'body'
- },
- {
- tagName: 'text',
- selector: 'label'
- }
- ];
- }
-
- initialize() {
- super.initialize();
- if (!this.constructor.svgDocument) {
- throw new Error('SVG Document not provided.');
- }
- this.on('change', this.onAttributeChange);
- this.setOutPorts();
- }
-
- onAttributeChange(change, opt) {
- if (opt.shape === this.id) return;
- if ('outPorts' in this.changed) {
- this.setOutPorts();
- }
- }
-
- measureText(svgDocument, text, attrs) {
- const vText = V('text').attr(attrs).text(text);
- vText.appendTo(svgDocument);
- const bbox = vText.getBBox();
- vText.remove();
- return bbox;
- }
-
- setOutPorts(opt = {}) {
- const {
- attributes,
- portPadding,
- portGap,
- portHeight,
- portFontAttributes,
- minWidth,
- constructor
- } = this;
- const { outPorts = [], size, ports } = attributes;
- let x = 0;
- const items = outPorts.map((port) => {
- const { id, label = 'Port' } = port;
- let { width } = this.measureText(
- constructor.svgDocument,
- label,
- portFontAttributes
- );
- width += 2 * portPadding;
- const item = {
- id,
- group: 'out',
- size: { width, height: portHeight },
- args: { x, y: '100%' },
- attrs: {
- portLabel: {
- text: label
- }
- }
- };
- x += width + portGap;
- return item;
- });
- this.set(
- {
- ports: {
- ...ports,
- items
- },
- size: {
- ...size,
- width: Math.max(x - portGap, minWidth)
- }
- },
- { ...opt, shape: this.id }
- );
- }
-
- addOutPort(port, opt = {}) {
- const { outPorts = [] } = this.attributes;
- this.set('outPorts', [...outPorts, port], opt);
- }
-
- removeLastOutPort(opt = {}) {
- const { outPorts = [] } = this.attributes;
- this.set('outPorts', outPorts.slice(0, outPorts.length - 1), opt);
- }
-
- static svgDocument = null;
-}
-
-const shapes = { ...defaultShapes, Shape };
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- linkPinning: false,
- defaultLink: () =>
- new shapes.standard.Link({
- attrs: {
- line: {
- stroke: '#4666E5'
- }
- }
- }),
- validateConnection: (sv, _, tv) => {
- if (sv.model.isLink() || tv.model.isLink()) return false;
- return sv !== tv;
- },
- defaultConnectionPoint: { name: 'anchor' },
- defaultAnchor: (view, magnet, ...rest) => {
- const anchorFn = view.model instanceof Shape ? anchors.bottom : anchors.top;
- return anchorFn(view, magnet, ...rest);
- },
- defaultConnector: {
- name: 'curve'
- }
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-Shape.svgDocument = paper.svg;
-
-const words = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis lacinia nibh. Sed posuere felis sit amet porttitor sollicitudin. Sed lorem felis, semper at volutpat eget, accumsan mollis quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam volutpat sodales sapien, et iaculis mauris pulvinar vel. Fusce in interdum nisi. Donec vel ultricies lectus. Suspendisse mi nisl, vulputate sed scelerisque quis, porttitor ut enim. Praesent augue ligula, interdum sit amet pulvinar ac, tincidunt ut dolor. Vivamus luctus eget ipsum ac eleifend. Suspendisse lorem enim, hendrerit in semper in, porttitor id nulla. Pellentesque iaculis risus ac purus efficitur, id elementum velit hendrerit. Ut nisl mi, ornare eu consectetur congue, placerat at nulla.'.split(
- ' '
-);
-
-function getRandomWord() {
- return words[Math.floor(Math.random() * words.length)];
-}
-
-function getRandomPort() {
- return {
- id: util.uuid(),
- label: getRandomWord()
- };
-}
-
-const shape = new Shape({
- outPorts: [getRandomPort(), getRandomPort(), getRandomPort()]
-});
-
-shape.position(100, 100).addTo(graph);
-
-const target = new shapes.standard.Ellipse({
- size: { width: 50, height: 50 },
- attrs: {
- root: {
- highlighterSelector: 'body'
- },
- body: {
- stroke: '#705d10',
- fill: '#efdc8f'
- }
- }
-});
-target.position(150, 300).addTo(graph);
-
-document.getElementById('add-port').addEventListener('click', () => {
- shape.addOutPort(getRandomPort());
-});
-
-document.getElementById('remove-port').addEventListener('click', () => {
- shape.removeLastOutPort();
-});
diff --git a/examples/absolute-port-layout-dynamic-port-sizes-js/src/styles.css b/examples/absolute-port-layout-dynamic-port-sizes-js/src/styles.css
deleted file mode 100644
index 76eea95276..0000000000
--- a/examples/absolute-port-layout-dynamic-port-sizes-js/src/styles.css
+++ /dev/null
@@ -1,33 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
-
-button {
- width: 100px;
- position: absolute;
-}
-
-#add-port {
- top: 10px;
- left: 10px;
-}
-
-#remove-port {
- top: 10px;
- left: 120px;
-}
diff --git a/examples/activity-diagram-js/README.md b/examples/activity-diagram-js/README.md
deleted file mode 100644
index d89d347b3f..0000000000
--- a/examples/activity-diagram-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Activity Diagram
-
-Have you ever wondered how a bill becomes law in the US? Our activity diagram, a visual representation of workflows of actions, explains this complex process, leveraging some of the JointJS diagramming features like collapsible swimlanes, conditional highlighters or automatic link reconnect.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/activity-diagram-js/assets/jointjs-logo-black.svg b/examples/activity-diagram-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/activity-diagram-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/activity-diagram-js/index.html b/examples/activity-diagram-js/index.html
deleted file mode 100644
index 5fb35931f9..0000000000
--- a/examples/activity-diagram-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/activity-diagram-js/package.json b/examples/activity-diagram-js/package.json
deleted file mode 100644
index 65c53601f7..0000000000
--- a/examples/activity-diagram-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-activity-diagram-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/activity-diagram-js/src/main.js b/examples/activity-diagram-js/src/main.js
deleted file mode 100644
index fa1b11d742..0000000000
--- a/examples/activity-diagram-js/src/main.js
+++ /dev/null
@@ -1,1671 +0,0 @@
-import { g, shapes, util, dia, anchors } from '@joint/core';
-import './styles.css';
-
-const HEADER_HEIGHT = 60;
-const SWIMLANE_PADDING = 5;
-const SWIMLANE_HEADER_HEIGHT = 45;
-const BUTTON_BORDER_OFFSET = 8;
-const BUTTON_SIZE = SWIMLANE_HEADER_HEIGHT - BUTTON_BORDER_OFFSET * 2;
-const POOL_MARGIN = 50;
-const SIGNS = {
- '+': `M ${BUTTON_SIZE / 2} 4 V ${BUTTON_SIZE - 4} M 4 ${BUTTON_SIZE / 2} H ${BUTTON_SIZE - 4
- }`,
- '-': `M 4 ${BUTTON_SIZE / 2} H ${BUTTON_SIZE - 4}`
-};
-const SWIMLANE_SIZE = {
- width: 450,
- height: 1750,
- collapsedWidth: 50
-};
-const SWIMLANES = [
- {
- title: 'Senate',
- color: '#D33653',
- text: '#FFF',
- mainColor: '#E2798C'
- },
- {
- title: 'Committee',
- color: '#433E3F',
- text: '#FFF',
- mainColor: '#7F7677'
- },
- {
- title: 'House of Representatives',
- color: '#318787',
- text: '#FFF',
- mainColor: '#78CECE'
- },
- {
- title: 'President',
- color: '#997C48',
- text: '#FFF',
- mainColor: '#CBB690'
- }
-];
-
-class UMLPool extends dia.Element {
- defaults() {
- return {
- ...super.defaults,
- type: 'UMLPool',
- attrs: {
- body: {
- fill: 'transparent',
- width: 'calc(w)',
- height: 'calc(h)'
- },
- header: {
- stroke: '#333',
- strokeWidth: 2,
- fill: '#333',
- height: HEADER_HEIGHT,
- width: 'calc(w)'
- },
- label: {
- fill: '#fff',
- fontSize: HEADER_HEIGHT * 0.7,
- fontWeight: 'bold',
- textVerticalAnchor: 'middle',
- textAnchor: 'middle',
- fontFamily: 'sans-serif',
- x: 'calc(w / 2)',
- y: HEADER_HEIGHT / 2,
- textWrap: {
- ellipsis: true,
- width: 'calc(w - 20)',
- maxLineCount: 1
- }
- }
- }
- };
- }
-
- preinitialize(...args) {
- this.markup = util.svg`
-
-
-
-
-
-
-
diff --git a/examples/animated-process-flow-diagram-js/package.json b/examples/animated-process-flow-diagram-js/package.json
deleted file mode 100644
index f3c135956b..0000000000
--- a/examples/animated-process-flow-diagram-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-animated-process-flow-diagram-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/animated-process-flow-diagram-js/src/main.js b/examples/animated-process-flow-diagram-js/src/main.js
deleted file mode 100644
index ca0a3f5e75..0000000000
--- a/examples/animated-process-flow-diagram-js/src/main.js
+++ /dev/null
@@ -1,143 +0,0 @@
-import { V, dia, shapes, highlighters } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 10,
- async: true,
- frozen: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- clickThreshold: 10,
- defaultConnector: {
- name: 'rounded'
- },
- defaultRouter: {
- name: 'manhattan',
- args: {
- step: 10,
- endDirections: ['bottom'],
- startDirections: ['top'],
- padding: { bottom: 20 }
- }
- }
-});
-
-paperContainer.appendChild(paper.el);
-
-const color = '#ff4468';
-
-paper.svg.prepend(
- V.createSVGStyle(`
- .joint-element .selection {
- stroke: ${color};
- }
- .joint-link .selection {
- stroke: ${color};
- stroke-dasharray: 5;
- stroke-dashoffset: 10;
- animation: dash 0.5s infinite linear;
- }
- @keyframes dash {
- to {
- stroke-dashoffset: 0;
- }
- }
- `)
-);
-
-function element(x, y) {
- const el = new shapes.standard.Rectangle({
- position: { x, y },
- size: { width: 100, height: 60 },
- attrs: {
- label: {
- text: `Node ${graph.getElements().length + 1}`,
- fontFamily: 'sans-serif'
- }
- },
- z: 2
- });
- graph.addCell(el);
- return el;
-}
-
-function link(target, source) {
- const l = new shapes.standard.Link({
- source: { id: source.id },
- target: { id: target.id },
- z: 1
- });
- graph.addCell(l);
- return l;
-}
-
-const el1 = element(300, 50);
-const el2 = element(100, 200);
-const el3 = element(300, 200);
-const el4 = element(500, 200);
-const el5 = element(300, 350);
-const el6 = element(40, 350);
-const el7 = element(160, 350);
-const el8 = element(160, 500);
-
-link(el1, el3);
-link(el1, el2);
-link(el1, el4);
-link(el2, el6);
-link(el2, el7);
-link(el3, el5);
-link(el7, el8);
-
-paper.unfreeze();
-
-function getElementPredecessorLinks(el) {
- return graph
- .getSubgraph([el, ...graph.getPredecessors(el)])
- .filter((cell) => cell.isLink());
-}
-
-function highlightCell(cell) {
- highlighters.addClass.add(
- cell.findView(paper),
- cell.isElement() ? 'body' : 'line',
- 'selection',
- { className: 'selection' }
- );
-}
-
-function unhighlightCell(cell) {
- highlighters.addClass.remove(cell.findView(paper), 'selection');
-}
-
-let selection = null;
-
-function selectElement(el) {
- if (selection === el) return;
- if (selection) {
- unhighlightCell(selection);
- graph.getLinks().forEach((link) => unhighlightCell(link));
- }
- if (el) {
- highlightCell(el);
- getElementPredecessorLinks(el).forEach((link) => highlightCell(link));
- selection = el;
- } else {
- selection = null;
- }
-}
-
-paper.on('element:pointerclick', (elementView) =>
- selectElement(elementView.model)
-);
-paper.on('blank:pointerclick', (elementView) => selectElement(null));
-
-selectElement(el2);
diff --git a/examples/animated-process-flow-diagram-js/src/styles.css b/examples/animated-process-flow-diagram-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/animated-process-flow-diagram-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/callouts-js/README.md b/examples/callouts-js/README.md
deleted file mode 100644
index e783d98360..0000000000
--- a/examples/callouts-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Callouts
-
-Do you want to annotate diagram elements with various callouts (rectangle or oval balloon, thought, brace) but not sure how to implement them? Check out this demo.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/callouts-js/assets/jointjs-logo-black.svg b/examples/callouts-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/callouts-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/callouts-js/index.html b/examples/callouts-js/index.html
deleted file mode 100644
index fa5bfd3301..0000000000
--- a/examples/callouts-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/callouts-js/package.json b/examples/callouts-js/package.json
deleted file mode 100644
index c03c819761..0000000000
--- a/examples/callouts-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-callouts-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/callouts-js/src/main.js b/examples/callouts-js/src/main.js
deleted file mode 100644
index 6eeb01d1d8..0000000000
--- a/examples/callouts-js/src/main.js
+++ /dev/null
@@ -1,436 +0,0 @@
-import { g, dia, shapes, elementTools } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 5,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-
-paperContainer.appendChild(paper.el);
-
-function getOvalPath(cx, cy, rx, ry) {
- return `
- M ${cx - rx} ${cy}
- a ${rx} ${ry} 0 1 1 ${rx * 2} 0
- a ${rx} ${ry} 0 1 1 ${-rx * 2} 0
- `;
-}
-
-function getOvalCalloutPath(size, delta) {
- const { width, height } = size;
- const rx = width / 2;
- const ry = height / 2;
- const center = new g.Point(rx, ry);
- const ellipse = new g.Ellipse(center, rx, ry);
- if (ellipse.containsPoint(delta)) {
- return getOvalPath(rx, ry, rx, ry);
- }
- const angle = 10;
- const line = new g.Line(center, delta);
- line.setLength(1e6);
- const [{ x: x1, y: y1 }] = ellipse.intersectionWithLine(line.clone().rotate(center, -angle));
- const [{ x: x2, y: y2 }] = ellipse.intersectionWithLine(line.clone().rotate(center, angle));
- return `
- M ${x1} ${y1}
- L ${delta.x} ${delta.y}
- L ${x2} ${y2}
- A ${rx} ${ry} 0 1 0 ${x1} ${y1}
- `;
-}
-
-function getRectangleCalloutPath(size, delta, r = 10) {
- const { width: w, height: h } = size;
- const rect = new g.Rect(size);
- const rectPathArray = [
- `M 0 ${r}`,
- `V ${h - r}`, // LEFT
- `a ${r} ${r} 0 0 0 ${r} ${r}`,
- `H ${w - r}`, // BOTTOM
- `a ${r} ${r} 0 0 0 ${r} -${r}`,
- `V ${r}`, // RIGHT
- `a ${r} ${r} 0 0 0 -${r} -${r}`,
- `H ${r}`, // TOP
- `a ${r} ${r} 0 0 0 -${r} ${r}`
- ];
- if (rect.containsPoint(delta)) {
- return rectPathArray.join(' ');
- }
- switch (rect.sideNearestToPoint(delta)) {
- case 'left': {
- const y1 = h / 2 - 10;
- const y2 = h / 2 + 10;
- rectPathArray[1] = `V ${y1} L ${delta.x} ${delta.y} 0 ${y2} 0 ${h - r}`;
- break;
- }
- case 'right': {
- const y1 = h / 2 - 10;
- const y2 = h / 2 + 10;
- rectPathArray[5] = `V ${y2} L ${delta.x} ${delta.y} ${w} ${y1} ${w} ${r}`;
- break;
- }
- case 'bottom':
- case 'top': {
- let x1, x2;
- if (delta.x > w / 2) {
- x2 = 3 * w / 4 + 10;
- x1 = 3 * w / 4 - 10;
- } else {
- x2 = w / 4 + 10;
- x1 = w / 4 - 10;
- }
- if (delta.y < 0) {
- rectPathArray[7] = `L ${x2} 0 ${delta.x} ${delta.y} ${x1} 0 ${r} 0`;
- break;
- } else {
- rectPathArray[3] = `L ${x1} ${h} ${delta.x} ${delta.y} ${x2} ${h} ${w - r} ${h}`;
- break;
- }
- }
- }
- return rectPathArray.join(' ');
-}
-
-function getThoughtCalloutPath(size, delta) {
- const { width: w, height: h } = size;
- const rx = w / 2;
- const ry = h / 2;
- const center = new g.Point(rx, ry);
- const ellipse = new g.Ellipse(center, rx, ry);
- if (ellipse.containsPoint(delta)) {
- return getOvalPath(rx, ry, rx, ry);
- }
- const lineAnchor = new g.Point(w / 4, ry);
- const [intersection] = ellipse.intersectionWithLine(new g.Line(lineAnchor, delta));
- const distance = delta.distance(intersection);
- const bubbles = [getOvalPath(rx, ry, rx, ry)];
- const p = delta.clone();
- const count = Math.min(Math.floor(distance / 40), 6);
- for (let i = 0; i <= count; i++) {
- p.move(intersection, - distance / (count + 2));
- const cx = p.x;
- const cy = p.y;
- const rx = i * 4;
- const ry = i * 2;
- bubbles.push(getOvalPath(cx, cy, rx, ry));
- }
- return bubbles.join(' ');
-}
-
-function getBraceCalloutPath(size, delta) {
- const { height: h } = size;
- const s = 10;
- const bracePath = `
- M 0 0
- A ${s} ${s} 0 0 0 -${s} ${s}
- V ${h / 2 - s}
- l ${-s} ${s}
- l ${s} ${s}
- V ${h - s}
- A ${s} ${s} 0 0 0 0 ${h}
- `;
- const rect = new g.Rect(size);
- if (rect.containsPoint(delta) || delta.x > 0) {
- return bracePath;
- }
- const y = Math.max(Math.min(delta.y, h), 0);
- const lineY = (Math.abs(y - h / 2) < s) ? Math.sign(y - h / 2) * s + h / 2 : y;
- return `${bracePath} M ${-2 * s} ${lineY} L ${delta.x} ${delta.y}`;
-}
-
-function updateElementCallout(el) {
- const anchor = new g.Point(el.get('calloutAnchor'));
- const delta = (el.get('isCalloutAnchorRelative'))
- ? anchor : anchor.difference(el.position());
- updateElementCalloutPath(el, delta);
-}
-
-
-const CalloutType = {
- Rectangle: 'rectangle',
- Oval: 'oval',
- Thought: 'thought',
- Brace: 'brace',
-};
-
-function updateElementCalloutPath(el, delta) {
- let d;
- const size = el.size();
- switch (el.get('calloutType')) {
- case CalloutType.Oval: {
- d = getOvalCalloutPath(size, delta);
- break;
- }
- case CalloutType.Thought: {
- d = getThoughtCalloutPath(size, delta);
- break;
- }
- case CalloutType.Brace: {
- d = getBraceCalloutPath(size, delta);
- break;
- }
- case CalloutType.Rectangle:
- default: {
- d = getRectangleCalloutPath(size, delta, el.get('radius'));
- break;
- }
- }
- el.attr('body/d', d);
-}
-
-const CalloutRelativeAnchorTool = elementTools.Control.extend({
- getPosition: function(view) {
- const { x = 0, y = 0 } = view.model.get('calloutAnchor') || {};
- return { x, y };
- },
- setPosition: function(view, coordinates) {
- view.model.set('calloutAnchor', { x: coordinates.x, y: coordinates.y });
- }
-});
-
-const CalloutAbsoluteAnchorTool = elementTools.Control.extend({
- getPosition: function(view) {
- const anchor = new g.Point(view.model.get('calloutAnchor'));
- const position = view.model.position();
- return anchor.difference(position);
- },
- setPosition: function(view, coordinates) {
- const { x, y } = view.model.position().offset(coordinates);
- view.model.set('calloutAnchor', { x, y });
- }
-});
-
-const r = new shapes.standard.Path({
- size: {
- width: 150,
- height: 100
- },
- position: {
- x: 200,
- y: 50
- },
- calloutType: CalloutType.Rectangle,
- calloutAnchor: { x: 0, y: 150 },
- isCalloutAnchorRelative: true,
- radius: 10,
- attrs: {
- body: {
- refD: null,
- stroke: '#ff4468',
- fill: {
- type: 'linearGradient',
- stops: [
- { offset: 0, color: '#fbf5d0' },
- { offset: 1, color: '#fcfef4' },
- ]
- }
- },
- label: {
- text: 'Rounded Rectangle\n(Relative)',
- textWrap: {
- width: -10,
- height: -10,
- preserveSpaces: true
- },
- fill: '#ff4468',
- fontSize: 14,
- fontFamily: 'sans-serif'
- }
- }
-});
-
-const rr = new shapes.standard.Path({
- size: {
- width: 150,
- height: 100
- },
- position: {
- x: 500,
- y: 50
- },
- calloutType: CalloutType.Rectangle,
- calloutAnchor: { x: 400, y: 170 },
- isCalloutAnchorRelative: false,
- radius: 0,
- attrs: {
- body: {
- stroke: '#330800',
- fill: {
- type: 'linearGradient',
- stops: [
- { offset: 0, color: '#ffd4cc' },
- { offset: 1, color: '#ffeae5' },
- ]
- },
- refD: null,
- },
- label: {
- text: 'Rectangle\n(Absolute)',
- textWrap: {
- width: -10,
- height: -10,
- preserveSpaces: true
- },
- fill: '#330800',
- fontSize: 14,
- fontFamily: 'sans-serif'
- }
- }
-});
-
-const c = new shapes.standard.Path({
- size: {
- width: 150,
- height: 100
- },
- position: {
- x: 300,
- y: 230
- },
- calloutType: CalloutType.Thought,
- calloutAnchor: { x: -50, y: 200 },
- isCalloutAnchorRelative: true,
- attrs: {
- body: {
- stroke: '#c7afc0',
- fill: {
- type: 'linearGradient',
- stops: [
- { offset: 0, color: '#f3eef2' },
- { offset: 1, color: '#ddcfd8' },
- ]
- },
- refD: null,
- },
- label: {
- text: 'Thought\n(Relative)',
- textWrap: {
- width: -10,
- height: -10
- },
- fill: '#330800',
- fontSize: 14,
- fontFamily: 'sans-serif'
- }
- }
-});
-
-const o = new shapes.standard.Path({
- size: {
- width: 150,
- height: 100
- },
- position: {
- x: 500,
- y: 300
- },
- calloutType: CalloutType.Oval,
- calloutAnchor: { x: 680, y: 250 },
- isCalloutAnchorRelative: false,
- attrs: {
- body: {
- refD: null,
- stroke: '#330800',
- fill: {
- type: 'linearGradient',
- stops: [
- { offset: 0, color: '#b3f2ff' },
- { offset: 1, color: '#e5fbff' },
- ]
- }
- },
- label: {
- text: 'Oval\n(Absolute)',
- textWrap: {
- width: -10,
- height: -10
- },
- fill: '#330800',
- fontSize: 14,
- fontFamily: 'sans-serif'
- }
- }
-});
-
-const b = new shapes.standard.Path({
- size: {
- width: 150,
- height: 100
- },
- position: {
- x: 100,
- y: 300
- },
- calloutType: CalloutType.Brace,
- calloutAnchor: { x: 0, y: 480 },
- isCalloutAnchorRelative: false,
- attrs: {
- body: {
- refD: null,
- stroke: '#4e628d',
- fill: 'transparent'
- },
- label: {
- text: 'Callouts',
- fill: '#4e628d',
- fontSize: 20,
- fontFamily: 'sans-serif',
- refX: null,
- refY: null,
- x: -30,
- y: 'calc(h/2)',
- textVerticalAnchor: 'middle',
- textAnchor: 'end'
- }
- }
-});
-
-graph.on('change:position change:calloutAnchor', (el) => updateElementCallout(el));
-
-graph.on('change:position', (el) => {
- if (el === b) return;
- b.fitEmbeds({ padding: bracePadding });
- updateElementCallout(b);
-});
-
-const bracePadding = { vertical: 20, horizontal: 50 };
-const callouts = [o, r, rr, c, b];
-graph.addCells(callouts);
-b.embed([o, r, rr, c]);
-b.fitEmbeds({ padding: bracePadding });
-
-callouts.forEach((el) => {
- updateElementCallout(el);
- el.findView(paper).addTools(
- new dia.ToolsView({
- tools: (el.get('isCalloutAnchorRelative'))
- ? [new CalloutRelativeAnchorTool({
- handleAttributes: {
- 'fill': 'transparent',
- 'stroke': '#666',
- 'stroke-width': 1,
- 'stroke-dasharray': '3,3',
- }
- })]
- : [new CalloutAbsoluteAnchorTool({
- handleAttributes: {
- 'fill-opacity': 0.2,
- 'fill': '#666',
- 'stroke': '#666',
- 'stroke-width': 1,
- }
- })]
- })
- );
-});
-
diff --git a/examples/callouts-js/src/styles.css b/examples/callouts-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/callouts-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/chatgpt-timeline-js/README.md b/examples/chatgpt-timeline-js/README.md
deleted file mode 100644
index c8b66b901d..0000000000
--- a/examples/chatgpt-timeline-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: OpenAI (ChatGPT) Timeline
-
-This demo shows a serpentine layout used on a real application: OpenAI (ChatGPT) timeline. It also utilizes the convex hull algorithm to help add tight outlines around a group of related elements. Delve into the history of this groundbreaking AI technology with this interactive visualisation.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/chatgpt-timeline-js/assets/jointjs-logo-black.svg b/examples/chatgpt-timeline-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/chatgpt-timeline-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/chatgpt-timeline-js/index.html b/examples/chatgpt-timeline-js/index.html
deleted file mode 100644
index d26931c75b..0000000000
--- a/examples/chatgpt-timeline-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/chatgpt-timeline-js/package.json b/examples/chatgpt-timeline-js/package.json
deleted file mode 100644
index 1041a8bf8e..0000000000
--- a/examples/chatgpt-timeline-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-chatgpt-timeline-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/chatgpt-timeline-js/src/main.js b/examples/chatgpt-timeline-js/src/main.js
deleted file mode 100644
index d844dbaec1..0000000000
--- a/examples/chatgpt-timeline-js/src/main.js
+++ /dev/null
@@ -1,532 +0,0 @@
-import { V, g, dia, shapes as defaultShapes, util, connectors } from '@joint/core';
-import './styles.css';
-
-const shapes = { ...defaultShapes };
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- defaultConnector: { name: 'curve' },
- defaultConnectionPoint: {
- name: 'anchor'
- },
- background: {
- color: '#fff'
- }
-
-});
-
-paperContainer.appendChild(paper.el);
-
-// Color palette
-const colors = ['#557ac5', '#7593d0', '#d9e1f2', '#ecf0f9', '#b73e66', '#2CA58D', '#FEFEFE'];
-
-
-// Underline hyperlinks on hover
-paper.svg.appendChild(
- V.createSVGStyle(`
- .event-link:hover text {
- text-decoration: underline;
- }
- `)
-);
-
-const eventMarkup = util.svg`
-
-
-
-
-
-
-
diff --git a/examples/circular-layout-js/package.json b/examples/circular-layout-js/package.json
deleted file mode 100644
index 4283ba44c4..0000000000
--- a/examples/circular-layout-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-circular-layout-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/circular-layout-js/src/main.js b/examples/circular-layout-js/src/main.js
deleted file mode 100644
index 1718716855..0000000000
--- a/examples/circular-layout-js/src/main.js
+++ /dev/null
@@ -1,160 +0,0 @@
-import { g, dia, shapes, util } from '@joint/core';
-import './styles.css';
-
-const width = 100;
-const height = 80;
-
-const graph = new dia.Graph(
- {},
- {
- cellNamespace: shapes
- }
-);
-
-const paper = new dia.Paper({
- el: document.getElementById('paper'),
- model: graph,
- cellViewNamespace: shapes,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- interactive: false,
- defaultConnectionPoint: {
- name: 'rectangle'
- },
- background: { color: '#F3F7F6' }
-});
-
-paper.unfreeze();
-
-function circularLayout(elements, options = {}) {
- const count = elements.length;
- if (count < 2) return null;
-
- const { x = 0, y = 0, gap = 0, rotate = false } = options;
- const { width, height } = elements[0].size();
-
- const deg180 = Math.PI;
- const deg90 = deg180 / 2;
- const alpha = deg180 / count;
- const size = rotate
- ? // the bottom side of the element is facing the center of the circle
- width
- : // use the diagonal of the rectangle as the largest dimension of the rectangle
- // to make sure that the elements fit along the circle
- Math.sqrt(width ** 2 + height ** 2);
- const b = (size + gap) / 2;
- const c = b / Math.sin(alpha);
- const bbox = new g.Rect(x, y, c * 2, c * 2);
- const center = bbox.center();
- const points = [];
-
- for (let i = 0; i < count; i++) {
- const beta = 2 * alpha * i - deg90;
- const x = center.x + c * Math.cos(beta);
- const y = center.y + c * Math.sin(beta);
- const point = new g.Point(x, y);
- points.push(point);
- }
-
- for (let i = 0; i < count; i++) {
- const element = elements[i];
- const beta = 2 * alpha * i;
- const edge = new g.Line(points[i], points[(i + 1) % count]);
- const point = edge.midpoint();
- point.move(center, height / 2);
- element.position(point.x - width / 2, point.y - height / 2);
- if (rotate) {
- const angle = g.toDeg(beta + alpha);
- // Make sure the text is always readable.
- const legibleAngle = g.normalizeAngle(((angle + 90) % 180) - 90);
- element.rotate(legibleAngle, true);
- }
- }
-
- return bbox;
-}
-
-const templateElement = new shapes.standard.Rectangle({
- size: {
- width,
- height
- },
- attrs: {
- body: {
- strokeWidth: 2
- },
- label: {
- fontFamily: 'sans-serif',
- fontSize: 20
- }
- }
-});
-
-function generate(count, options) {
- const root = templateElement.clone().prop({
- attrs: {
- body: {
- fill: '#ff9580'
- },
- label: {
- text: 'Circular\nLayout'
- }
- }
- });
-
- const colorFn = util.interpolate.hexColor('#00879b', '#80eaff');
- const els = Array.from({ length: count }).map((_, index) => {
- return templateElement.clone().prop({
- attrs: {
- body: {
- fill: colorFn(index / count)
- },
- label: {
- text: `${index + 1}`
- }
- }
- });
- });
-
- const links = els.map((el) => {
- return new shapes.standard.Link({
- source: {
- id: root.id
- },
- target: {
- id: el.id
- }
- });
- });
-
- graph.resetCells([root, ...els, ...links]);
-
- const bbox = circularLayout(els, options);
-
- if (bbox) {
- const center = bbox.center();
- root.position(center.x - width / 2, center.y - height / 2);
- }
- paper.fitToContent({
- useModelGeometry: true,
- padding: 20,
- allowNewOrigin: 'any'
- });
-}
-
-function readInputs() {
- const count = Number(document.getElementById('count').value);
- const gap = Number(document.getElementById('gap').value);
- const rotate = document.getElementById('rotate').checked;
- generate(count, { gap, rotate });
-}
-
-const debouncedReadInputs = util.debounce(readInputs, 10);
-
-document.getElementById('count').addEventListener('input', debouncedReadInputs);
-document.getElementById('gap').addEventListener('input', debouncedReadInputs);
-document
- .getElementById('rotate')
- .addEventListener('change', debouncedReadInputs);
-
-readInputs();
diff --git a/examples/circular-layout-js/src/styles.css b/examples/circular-layout-js/src/styles.css
deleted file mode 100644
index b0a66b1acb..0000000000
--- a/examples/circular-layout-js/src/styles.css
+++ /dev/null
@@ -1,19 +0,0 @@
-body {
- font-family: sans-serif;
- padding: 10px;
-}
-
-#paper {
- border: 1px solid lightgray;
- margin: 10px 0;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/connector-arrows-js/README.md b/examples/connector-arrows-js/README.md
deleted file mode 100644
index da29cebfef..0000000000
--- a/examples/connector-arrows-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Connector Arrows
-
-Explore our collection of connector arrows, including those for special diagram types such as BPMN, UML, or those you may be familiar with from Visio or similar applications. The collection was created using JointJS, our open-source diagramming library, so feel free to grab the source code and use any of these connector arrows in your project.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/connector-arrows-js/assets/jointjs-logo-black.svg b/examples/connector-arrows-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index cf84b0ec24..0000000000
--- a/examples/connector-arrows-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/examples/connector-arrows-js/assets/jointjs-logo-red.svg b/examples/connector-arrows-js/assets/jointjs-logo-red.svg
deleted file mode 100644
index 6a6c912fdd..0000000000
--- a/examples/connector-arrows-js/assets/jointjs-logo-red.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/examples/connector-arrows-js/index.html b/examples/connector-arrows-js/index.html
deleted file mode 100644
index 545e5893a9..0000000000
--- a/examples/connector-arrows-js/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/content-driven-shapes-js/package.json b/examples/content-driven-shapes-js/package.json
deleted file mode 100644
index 3eba430e0d..0000000000
--- a/examples/content-driven-shapes-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-content-driven-shapes-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/content-driven-shapes-js/src/main.js b/examples/content-driven-shapes-js/src/main.js
deleted file mode 100644
index f591c42f77..0000000000
--- a/examples/content-driven-shapes-js/src/main.js
+++ /dev/null
@@ -1,320 +0,0 @@
-import { V, dia, shapes } from '@joint/core';
-import './styles.css';
-
-import jointjsLogoSvg from '../assets/jointjs-logo-black.svg';
-// Shapes
-
-function measureText(svgDocument, text, attrs) {
- const vText = V('text').attr(attrs).text(text);
- vText.appendTo(svgDocument);
- const bbox = vText.getBBox();
- vText.remove();
- return bbox;
-}
-
-class Shape extends dia.Element {
- defaults() {
- return {
- ...super.defaults,
- type: 'custom.Shape',
- fillColor: '#FCFCFC',
- outlineColor: '#A3A5A5',
- label: '',
- image: ''
- };
- }
-
- preinitialize() {
- this.spacing = 10;
- this.labelAttributes = {
- 'font-size': 14,
- 'font-family': 'sans-serif'
- };
- this.imageAttributes = {
- width: 140,
- height: 50,
- };
- this.cache = {};
- }
-
- initialize() {
- super.initialize();
- this.on('change', this.onAttributeChange);
- this.setSizeFromContent();
- }
-
- /* Attributes that affects the size of the model. */
- onAttributeChange() {
- const { changed, cache } = this;
- if ('label' in changed) {
- // invalidate the cache only if the text of the `label` has changed
- delete cache.label;
- }
- if ('label' in changed || 'image' in changed) {
- this.setSizeFromContent();
- }
- }
-
- setSizeFromContent() {
- delete this.cache.layout;
- const { width, height } = this.layout();
- this.resize(width, height);
- }
-
- layout() {
- const { cache } = this;
- const { layout } = cache;
- if (layout) {
- return layout;
- } else {
- const layout = this.calcLayout();
- cache.layout = layout;
- return layout;
- }
- }
-
- calcLayout() {
- const {
- attributes,
- labelAttributes,
- imageAttributes,
- spacing,
- cache
- } = this;
- let width = spacing * 2;
- let height = spacing * 2;
- const x = spacing;
- let y = spacing;
- // image metrics
- let $image;
- if (attributes.image) {
- const { width: w, height: h } = imageAttributes;
- $image = {
- x,
- y,
- width: w,
- height: h
- };
- height += spacing + h;
- y += spacing + h;
- width += w;
- } else {
- $image = null;
- }
- // label metrics
- let $label;
- {
- let w, h;
- if ('label' in cache) {
- w = cache.label.width;
- h = cache.label.height;
- } else {
- const { width, height } = measureText(
- svg,
- attributes.label,
- labelAttributes
- );
- w = width;
- h = height;
- cache.label = {
- width,
- height
- };
- }
- width = Math.max(width, spacing + w + spacing);
- height += h;
- if (!h) {
- // no text
- height -= spacing;
- }
- $label = {
- x,
- y,
- width: w,
- height: h
- };
- }
- // root metrics
- return {
- x: 0,
- y: 0,
- width,
- height,
- $image,
- $label
- };
- }
-}
-
-const ElementView = dia.ElementView;
-
-const ShapeView = ElementView.extend({
- presentationAttributes: ElementView.addPresentationAttributes({
- // attributes that changes the position and size of the DOM elements
- label: [ElementView.Flags.UPDATE],
- image: [ElementView.Flags.UPDATE],
- // attributes that do not affect the size
- outlineColor: ['@color'],
- fillColor: ['@color']
- }),
-
- confirmUpdate: function (...args) {
- let flags = ElementView.prototype.confirmUpdate.call(this, ...args);
- if (this.hasFlag(flags, '@color')) {
- // if only a color is changed, no need to resize the DOM elements
- this.updateColors();
- flags = this.removeFlag(flags, '@color');
- }
- // must return 0
- return flags;
- },
-
- /* Runs only once while initializing */
- render: function () {
- const { vel, model } = this;
- const body = (this.vBody = V('rect')
- .addClass('body')
- .attr('stroke-width', 2));
- const label = (this.vLabel = V('text')
- .addClass('label')
- .attr(model.labelAttributes));
- this.vImage = V('image').addClass('image').attr(model.imageAttributes);
- vel.empty().append([body, label]);
- this.update();
- this.updateColors();
- this.translate(); // default element translate method
- this.el.setAttribute('cursor', 'move');
- },
-
- update: function () {
- const layout = this.model.layout();
- this.updateBody(layout);
- this.updateImage(layout.$image);
- this.updateLabel(layout.$label);
- },
-
- updateColors: function () {
- const { model, vBody } = this;
- vBody.attr({
- fill: model.get('fillColor'),
- stroke: model.get('outlineColor')
- });
- },
-
- updateBody: function () {
- const { model, vBody } = this;
- const { width, height } = model.size();
- const bodyAttributes = {
- width,
- height
- };
- vBody.attr(bodyAttributes);
- },
-
- updateImage: function ($image) {
- const { model, vImage, vel } = this;
- const image = model.get('image');
- if (image) {
- if (!vImage.parent()) {
- vel.append(vImage);
- }
- vImage.attr({
- 'xlink:href': image,
- x: $image.x,
- y: $image.y
- });
- } else {
- vImage.remove();
- }
- },
-
- updateLabel: function ($label) {
- const { model, vLabel } = this;
- vLabel.attr({
- 'text-anchor': 'middle',
- x: $label.x + $label.width / 2,
- y: $label.y + $label.height / 2
- });
- vLabel.text(model.get('label'), {
- textVerticalAnchor: 'middle'
- });
- }
-});
-
-const namespace = {
- ...shapes,
- custom: {
- Shape,
- ShapeView
- }
-};
-
-// Paper
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: namespace });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: namespace,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const svg = paper.svg;
-
-// Example
-
-const customShape1 = new Shape({
- label: 'The simplest shape'
-});
-customShape1.position(60, 40).addTo(graph);
-
-const customShape2 = new Shape();
-customShape2
- .set('label', 'A multiline\n text with no image.')
- .position(60, 100)
- .prop('fillColor', '#EBACCF')
- .prop('outlineColor', '#d80073')
- .addTo(graph);
-
-const customShape3 = new Shape();
-customShape3
- .set('image', jointjsLogoSvg)
- .position(220, 40)
- .prop('fillColor', '#B9DBBB')
- .prop('outlineColor', '#339933')
- .prop(
- 'label',
- 'Lorem ipsum dolor sit amet,\nconsectetur adipiscing elit.\nInteger vehicula.'
- )
- .addTo(graph);
-
-const customShape4 = new Shape();
-customShape4
- .set('image', jointjsLogoSvg)
- .set('label', '')
- .prop('fillColor', '#93B8C7')
- .prop('outlineColor', '#1ba1e2')
- .position(60, 180)
- .addTo(graph);
-
-customShape4.transition(
- 'label',
- 'Lorem ipsum dolor sit amet,\nconsectetur adipiscing elit.\nInteger vehicula.',
- {
- delay: 200,
- duration: 3000,
- valueFunction: function (start, end) {
- return function (time) {
- return end.substr(0, Math.ceil(end.length * time));
- };
- }
- }
-);
diff --git a/examples/content-driven-shapes-js/src/styles.css b/examples/content-driven-shapes-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/content-driven-shapes-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/control-tool-js/README.md b/examples/control-tool-js/README.md
deleted file mode 100644
index b83070bdde..0000000000
--- a/examples/control-tool-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Control Tool
-
-This demo shows the JointJS control tool that lets you change the element shape in a drag and drop fashion.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/control-tool-js/assets/jointjs-logo-black.svg b/examples/control-tool-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/control-tool-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/control-tool-js/index.html b/examples/control-tool-js/index.html
deleted file mode 100644
index f3e842e750..0000000000
--- a/examples/control-tool-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/control-tool-js/package.json b/examples/control-tool-js/package.json
deleted file mode 100644
index b3071a4120..0000000000
--- a/examples/control-tool-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-control-tool-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/control-tool-js/src/main.js b/examples/control-tool-js/src/main.js
deleted file mode 100644
index 73d2a1e00e..0000000000
--- a/examples/control-tool-js/src/main.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import { dia, shapes, elementTools } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const CylinderTiltTool = elementTools.Control.extend({
- getPosition: function(view) {
- const model = view.model;
- const size = model.size();
- const tilt = model.topRy();
- return { x: size.width / 2, y: 2 * tilt };
- },
- setPosition: function(view, coordinates) {
- const model = view.model;
- const size = model.size();
- const tilt = Math.min(Math.max(coordinates.y, 0), size.height) / 2;
- model.topRy(tilt, { ui: true, tool: this.cid });
- }
-});
-
-const RadiusTool = elementTools.Control.extend({
- getPosition: function(view) {
- const model = view.model;
- const radius = model.attr(['body', 'ry']) || 0;
- return { x: 0, y: radius };
- },
- setPosition: function(view, coordinates) {
- const model = view.model;
- const size = model.size();
- const ry = Math.min(Math.max(coordinates.y, 0), size.height) / 2;
- model.attr(['body'], { rx: ry, ry: ry }, { ui: true, tool: this.cid });
- }
-});
-
-const rectangle = new shapes.standard.Rectangle();
-rectangle.resize(100, 100);
-rectangle.position(100, 100);
-rectangle.addTo(graph);
-rectangle.findView(paper).addTools(
- new dia.ToolsView({
- tools: [
- new RadiusTool({
- selector: 'body',
- handleAttributes: {
- fill: '#4666E5'
- }
- })
- ]
- })
-);
-
-const cylinder = new shapes.standard.Cylinder();
-cylinder.resize(100, 200);
-cylinder.position(300, 50);
-cylinder.addTo(graph);
-cylinder.findView(paper).addTools(
- new dia.ToolsView({
- tools: [
- new CylinderTiltTool({
- selector: 'body',
- handleAttributes: {
- fill: '#4666E5'
- }
- })
- ]
- })
-);
diff --git a/examples/control-tool-js/src/styles.css b/examples/control-tool-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/control-tool-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/counters-js/README.md b/examples/counters-js/README.md
deleted file mode 100644
index 77c276f52a..0000000000
--- a/examples/counters-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Counters
-
-This demo shows an example of content-driven elements with real-time updates.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/counters-js/assets/jointjs-logo-black.svg b/examples/counters-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/counters-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/counters-js/index.html b/examples/counters-js/index.html
deleted file mode 100644
index 7e301e699b..0000000000
--- a/examples/counters-js/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/counters-js/package.json b/examples/counters-js/package.json
deleted file mode 100644
index 4dd89f8213..0000000000
--- a/examples/counters-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-counters-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/counters-js/src/main.js b/examples/counters-js/src/main.js
deleted file mode 100644
index 3351b7f19e..0000000000
--- a/examples/counters-js/src/main.js
+++ /dev/null
@@ -1,591 +0,0 @@
-import { V, g, dia, shapes, util } from '@joint/core';
-import './styles.css';
-
-// Config
-
-// number of columns
-const COLS = 10;
-// number of rows
-const ROWS = 10;
-// number of miliseconds between state update
-const STATE_UPDATE_MS = 10;
-// number of miliseconds between data point update
-const DATA_POINT_UPDATE_MS = 10;
-// the height of the node header
-const NODE_HEADER_HEIGHT = 30;
-// the height of the node counter
-const NODE_COUNTER_HEIGHT = 20;
-// the padding around the counters
-const NODE_COUNTER_PADDING = 10;
-// the maximum number of node counters
-const NODE_MAX_COUNTERS = 9;
-
-// Custom shapes
-
-// Shape
-class Node extends dia.Element {
- defaults() {
- return {
- ...super.defaults,
- size: { width: 200, height: 0 },
- z: 2,
- type: 'Node',
- // Data
- uid: null,
- name: '',
- expanded: true,
- counterNames: [],
- counterValues: [],
- status: null
- };
- }
-
- initialize(...args) {
- super.initialize(...args);
- this.on('change', (_cell, opt) => this.onChange(opt));
- this.setSize();
- }
-
- onChange(opt) {
- const { changed } = this;
- if ('uid' in changed && !changed.uid) {
- this.set(
- {
- counterNames: [],
- counterValues: [],
- status: null
- },
- opt
- );
- }
- if ('counterNames' in changed || 'expanded' in changed) {
- this.setSize(opt);
- }
- }
-
- setSize(opt = {}) {
- const { counterNames, size, expanded, uid } = this.attributes;
- let height = NODE_HEADER_HEIGHT;
- const numberOfRows = uid ? counterNames.length : 0;
- if (expanded)
- height += 2 * NODE_COUNTER_PADDING + numberOfRows * NODE_COUNTER_HEIGHT;
- opt.resized = size.height !== height;
- this.resize(size.width, height, opt);
- }
-
- changeNode(node) {
- this.startBatch('change-uid');
- this.set({
- name: node.name,
- uid: node.uid,
- counterNames: [],
- counterValues: [],
- status: null
- });
- this.stopBatch('change-uid');
- }
-
- toggle() {
- this.startBatch('change-expanded');
- this.set('expanded', !this.get('expanded'));
- this.stopBatch('change-expanded');
- }
-
- changeStatus(status) {
- const { status: currentStatus } = this.attributes;
- if (status === currentStatus) return;
- this.prop('status', status, { dry: true });
- }
-
- changeDataPoint(names, values) {
- const { counterValues } = this.attributes;
- for (let i = 0, n = values.length; i < n; i++) {
- if (counterValues[i] !== values[i]) break;
- return;
- }
- this.prop(
- {
- counterNames: names,
- counterValues: values
- },
- { dry: true }
- );
- }
-
- getCounterNames() {
- return this.get('counterNames');
- }
-
- toJSON() {
- const { id, type, position, uid, name, expanded } = this.attributes;
- return { id, type, position, uid, name, expanded };
- }
-}
-
-const Flags = {
- ...dia.ElementView.Flags,
- STATUS: 'STATUS',
- LABEL: 'LABEL',
- VALUES: 'VALUES'
-};
-
-class NodeView extends dia.ElementView {
- vSeparator;
- vBody;
- vLabel;
- vButton;
- vCounterNames;
- vCounterValues;
- counterValuesCache;
-
- presentationAttributes() {
- return dia.ElementView.addPresentationAttributes({
- expanded: [Flags.RENDER],
- counterNames: [Flags.RENDER],
- counterValues: [Flags.VALUES],
- status: [Flags.STATUS],
- name: [Flags.LABEL]
- });
- }
-
- confirmUpdate(flag, opt) {
- let flags = dia.ElementView.prototype.confirmUpdate.call(this, flag, opt);
- if (this.hasFlag(flags, Flags.STATUS)) {
- this.toggleStatus();
- flags = this.removeFlag(flags, Flags.STATUS);
- }
- if (this.hasFlag(flags, Flags.LABEL)) {
- this.updateLabel();
- flags = this.removeFlag(flags, Flags.LABEL);
- }
- if (this.hasFlag(flags, Flags.VALUES)) {
- this.updateCounters();
- flags = this.removeFlag(flags, Flags.VALUES);
- }
- return flags;
- }
-
- render() {
- const { vel, model } = this;
- if (!vel) return this;
-
- this.cleanNodesCache();
-
- const body = (this.vBody = V('rect').addClass('node-body'));
- const label = (this.vLabel = V('text').addClass('node-label'));
- const button = (this.vButton = V('path').addClass('node-button'));
-
- vel.empty().append([body, label, button]);
-
- if (model.get('expanded')) {
- const counterGroup = this.renderCounterGroup();
- const separator = (this.vSeparator = V('path').addClass(
- 'node-separator'
- ));
- vel.append([separator, counterGroup]);
- } else {
- this.vCounterNames = [];
- this.vCounterValues = [];
- this.vSeparator = null;
- }
-
- this.translate();
- this.update();
-
- return this;
- }
-
- renderCounterGroup() {
- const { model } = this;
- const { width } = model.size();
- const vCounterNames = (this.vCounterNames = []);
- const vCounterValues = (this.vCounterValues = []);
- const names = model.get('counterNames');
- for (let i = 0, n = names.length; i < n; i++) {
- const y =
- NODE_COUNTER_PADDING +
- i * NODE_COUNTER_HEIGHT +
- NODE_COUNTER_HEIGHT / 2;
- const vName = V('text')
- .attr({
- transform: `translate(${NODE_COUNTER_PADDING}, ${y})`,
- 'font-size': 14,
- 'font-family': 'sans-serif',
- 'text-anchor': 'start'
- })
- .addClass('node-counter-name')
- .text(names[i], {
- textVerticalAnchor: 'middle'
- });
- const vValue = V('text')
- .attr({
- transform: `translate(${width - NODE_COUNTER_PADDING}, ${y})`,
- 'font-size': 14,
- 'font-family': 'sans-serif',
- 'text-anchor': 'end'
- })
- .addClass('node-counter-value');
-
- vCounterNames.push(vName);
- vCounterValues.push(vValue);
- }
- return V('g')
- .attr({
- transform: `translate(0, ${NODE_HEADER_HEIGHT})`
- })
- .addClass('node-counters')
- .append([...vCounterNames, ...vCounterValues]);
- }
-
- update() {
- this.updateBody();
- this.updateSeparator();
- this.updateLabel();
- this.updateCounters();
- this.toggleStatus();
- this.updateButton();
- }
-
- updateButton() {
- const { vButton, model } = this;
- const { size, expanded } = model.attributes;
- vButton.attr({
- d: expanded ? 'M -6 6 0 0 6 6' : 'M -6 0 0 6 6 0',
- stroke: '#333',
- 'stroke-width': 3,
- fill: 'none',
- 'pointer-events': 'bounding-box',
- event: 'node:button:pointerclick',
- cursor: 'pointer',
- transform: `translate(${size.width - 20},${NODE_HEADER_HEIGHT / 2})`
- });
- }
-
- updateBody() {
- const { model, vBody } = this;
- const { width, height } = model.size();
- vBody.attr({
- width: width,
- height: height,
- stroke: '#333',
- rx: 5,
- ry: 5
- });
- }
-
- updateSeparator() {
- const { model, vSeparator } = this;
- if (!vSeparator) return;
- const { width } = model.size();
- vSeparator.attr({
- d: `M 0 ${NODE_HEADER_HEIGHT} h ${width}`,
- stroke: '#333',
- 'stroke-width': '2'
- });
- }
-
- updateCounters() {
- const { model, vCounterValues } = this;
- const values = model.get('counterValues');
- const cache = this.counterValuesCache;
- this.counterValuesCache = [];
- for (let i = 0, n = vCounterValues.length; i < n; i++) {
- const formattedValue = this.formatValue(values[i]);
- if (cache && formattedValue === cache[i]) continue;
- this.counterValuesCache[i] = formattedValue;
- vCounterValues[i].text(formattedValue, {
- textVerticalAnchor: 'middle'
- });
- }
- }
-
- formatValue(value) {
- if (typeof value !== 'number') return '-';
- return value.toFixed(2);
- }
-
- updateLabel() {
- const { model, paper, vLabel } = this;
- if (!paper) return;
- const { width } = model.size();
- const text = model.get('name') || '';
-
- const fontAttributes = {
- 'font-size': 16,
- 'font-family': 'sans-serif',
- 'text-anchor': 'middle',
- transform: `translate(${width / 2},${NODE_HEADER_HEIGHT / 2})`
- };
-
- const wrappedText = util.breakText(
- text,
- { width: width - 60 },
- fontAttributes,
- {
- svgDocument: paper.svg,
- ellipsis: true,
- maxLineCount: 1
- }
- );
- vLabel.attr(fontAttributes);
- vLabel.text(wrappedText, { textVerticalAnchor: 'middle' });
- }
-
- toggleStatus() {
- let color;
- switch (this.model.prop('status')) {
- case null: {
- color = '#FFFFFF';
- break;
- }
- case 'D': {
- color = '#78A75A';
- break;
- }
- case 'A': {
- color = '#992B15';
- break;
- }
- default: {
- color = '#EAC452';
- }
- }
- this.vBody.attr('fill', color);
- }
-}
-
-const namespace = {
- ...shapes,
- Node,
- NodeView
-};
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: namespace });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: namespace,
- width: '100%',
- height: '100%',
- gridSize: 20,
- drawGrid: { name: 'mesh' },
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-
-paperContainer.appendChild(paper.el);
-
-enableVirtualRendering(paper);
-
-paper.on('blank:pointerdown', function(evt) {
- evt.data = {
- clientX: evt.clientX,
- clientY: evt.clientY,
- scrollLeft: paperContainer.scrollLeft,
- scrollTop: paperContainer.scrollTop
- };
-});
-
-paper.on('blank:pointermove', function(evt) {
- const { clientX, clientY, data } = evt;
- paperContainer.scrollLeft = data.scrollLeft - (clientX - data.clientX);
- paperContainer.scrollTop = data.scrollTop - (clientY - data.clientY);
-});
-
-paper.on('node:button:pointerclick', function(nodeView) {
- const node = nodeView.model;
- node.toggle();
-});
-
-// Events
-
-function getCellsFromUid(graph, uid) {
- const uidMap = graph.get('uidMap');
- if (!uidMap) return [];
- const ids = uidMap[uid];
- if (!ids) return [];
- return ids.reduce((acc, id) => {
- const node = graph.getCell(id);
- if (node) acc.push(node);
- return acc;
- }, []);
-}
-
-function generateCells(graph, c, r) {
- graph.set(
- 'nodes',
- Array.from({ length: c * r }, (_, index) => {
- return { uid: `id-${index}`, name: `Data ${index + 1}` };
- })
- );
-
- const nodes = graph.get('nodes');
- const count = nodes.length;
- const cells = [];
- let lastEl = null;
- let k = 0;
- for (let i = 0; i < r; i++) {
- for (let j = 0; j < c; j++) {
- if (count === k) k = 0;
- const node = nodes[k++];
- const { uid, name } = node;
- const el = new Node({
- id: `generated-${i}-${j}`,
- position: { x: j * 250, y: i * 260 },
- uid,
- name
- });
- cells.push(el);
- if (lastEl && j !== 0) {
- const link = new shapes.standard.Link({
- source: { id: lastEl.id },
- target: { id: el.id }
- });
- link.unset('labels');
- cells.push(link);
- }
- lastEl = el;
- }
- }
- graph.resetCells(cells);
-
- buildUidMap(graph);
-}
-
-function changeDataPoint(graph, dataPointEvent) {
- // eslint-disable-next-line no-unused-vars
- const { uid, name, ...counterPairs } = dataPointEvent;
- getCellsFromUid(graph, uid).forEach((node) => {
- let names = node.getCounterNames();
- if (names.length === 0) {
- names = Object.keys(counterPairs);
- }
- const values = names.map((name) => counterPairs[name]);
- getCellsFromUid(graph, uid).forEach((node) =>
- node.changeDataPoint(names, values)
- );
- });
-}
-
-function changeState(graph, stateEvent) {
- const { uid, messageClass } = stateEvent;
- getCellsFromUid(graph, uid).forEach((node) =>
- node.changeStatus(messageClass)
- );
-}
-
-function runEvents(
- graph,
- { stateInterval = 100, dataInterval = 100 } = {}
-) {
- const id1 = setInterval(() => {
- const elements = graph.getElements();
- const element = elements[g.random(0, elements.length - 1)];
- if (!element) return;
- if (!element.get('uid')) return;
-
- changeState(graph, {
- uid: element.attributes.uid,
- name: element.get('name'),
- messageClass: ['A', 'B', 'C', 'D'][g.random(0, 3)]
- });
- }, stateInterval);
-
- const id2 = setInterval(() => {
- const elements = graph.getElements();
- const element = elements[g.random(0, elements.length - 1)];
- if (!element) return;
- if (!element.get('uid')) return;
-
- let counterNames = element.get('counterNames');
- if (counterNames.length === 0) {
- // or generate a new ones
- counterNames = Array.from(
- { length: g.random(0, NODE_MAX_COUNTERS) },
- (_, i) => {
- return `Counter ${i + 1}`;
- }
- );
- }
-
- const counterPairs = counterNames.reduce((acc, name) => {
- acc[name] = g.random(0, 100);
- return acc;
- }, {});
-
- changeDataPoint(graph, {
- uid: element.attributes.uid,
- name: element.get('name'),
- ...counterPairs
- });
- }, dataInterval);
-
- return () => {
- clearInterval(id1);
- clearInterval(id2);
- };
-}
-
-function buildUidMap(graph) {
- const prevUidMap = Object.assign({}, graph.get('uidMap'));
- const uidMap = {};
-
- graph.getElements().forEach((el) => {
- const { type, uid, id } = el.attributes;
- if (type !== 'Node') return;
- if (uid in uidMap) {
- uidMap[uid].push(id);
- } else {
- uidMap[uid] = [id];
- }
- delete prevUidMap[uid];
- });
- graph.set('uidMap', uidMap);
-}
-
-generateCells(graph, COLS, ROWS);
-
-runEvents(graph, {
- stateInterval: STATE_UPDATE_MS,
- dataInterval: DATA_POINT_UPDATE_MS
-});
-
-paper.fitToContent({
- useModelGeometry: true,
- padding: 20,
- allowNewOrigin: 'any'
-});
-
-function enableVirtualRendering(paper) {
- const paperContainer = paper.el.parentNode;
-
- let viewportArea;
- function updateViewportArea() {
- viewportArea = paper.clientToLocalRect(
- paperContainer.getBoundingClientRect()
- );
- }
-
- // Setup listeners
- updateViewportArea();
- paperContainer.addEventListener('scroll', updateViewportArea, false);
- paper.on('scale', updateViewportArea);
-
- // Paper `viewport` option
- // https://resources.jointjs.com/docs/jointjs/#dia.Paper.prototype.options.viewport
- paper.options.viewport = (view) => {
- const { model } = view;
- // Hide elements and links which are not in the viewport.
- const bbox = model.getBBox();
- if (model.isLink()) {
- // Vertical/horizontal links have zero width/height.
- bbox.width += 1;
- bbox.height += 1;
- }
- return viewportArea.intersect(bbox) !== null;
- };
-}
diff --git a/examples/counters-js/src/styles.css b/examples/counters-js/src/styles.css
deleted file mode 100644
index bad2d959a0..0000000000
--- a/examples/counters-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/curve-connector-js/README.md b/examples/curve-connector-js/README.md
deleted file mode 100644
index 3a1174e099..0000000000
--- a/examples/curve-connector-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Curve Connector
-
-Wondering how to create links between elements that dynamically adjust based on element position? Take a look at this demo that shows how curves behave in JointJS.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/curve-connector-js/assets/jointjs-logo-black.svg b/examples/curve-connector-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/curve-connector-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/curve-connector-js/index.html b/examples/curve-connector-js/index.html
deleted file mode 100644
index ad1fd7d016..0000000000
--- a/examples/curve-connector-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/curve-connector-js/package.json b/examples/curve-connector-js/package.json
deleted file mode 100644
index 3b94d73914..0000000000
--- a/examples/curve-connector-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-curve-connector-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/curve-connector-js/src/main.js b/examples/curve-connector-js/src/main.js
deleted file mode 100644
index 9a32dbc7be..0000000000
--- a/examples/curve-connector-js/src/main.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { dia, shapes } from '@joint/core';
-import './styles.css';
-
-const paperWidth = 780;
-const paperHeight = 490;
-const gap = 10;
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- el: document.getElementById('paper'),
- model: graph,
- cellViewNamespace: shapes,
- width: paperWidth,
- height: paperHeight,
- gridSize: 1,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- defaultConnectionPoint: { name: 'anchor' },
- defaultConnector: {
- name: 'curve',
- args: {
- sourceTangent: { x: 0, y: 100 },
- targetTangent: { x: 0, y: -120 }
- }
- }
-});
-
-paper.svg.style.overflow = 'visible';
-paper.el.style.border = '1px solid #E5E5E5';
-
-const commonBodyAttrs = {
- body: {
- rx: 5,
- ry: 5
- }
-};
-
-const r0width = 100;
-const childCount = 13;
-
-const r0 = new shapes.standard.Rectangle({
- size: { width: r0width, height: 50 },
- position: { x: (paperWidth - r0width) / 2, y: gap },
- attrs: {
- ...commonBodyAttrs,
- label: {
- text: 'Curves',
- fontFamily: 'sans-serif',
- fontSize: 20
- }
- }
-});
-
-graph.addCells([r0]);
-
-Array.from({ length: childCount }).forEach((_, index) => {
- const size = 50;
- const rN = new shapes.standard.Rectangle({
- size: { width: size, height: size },
- position: { x: 5 + index * (gap + size), y: paperHeight - gap - size },
- attrs: {
- ...commonBodyAttrs,
- label: {
- text: String.fromCharCode(65 + index),
- fontFamily: 'sans-serif',
- fontSize: 20
- }
- }
- });
-
- const lN = new shapes.standard.Link({
- source: {
- id: r0.id,
- anchor: {
- name: 'bottom',
- args: {
- dx: ((index + 0.5) / childCount) * r0width - r0width / 2
- }
- }
- },
- target: {
- id: rN.id,
- anchor: { name: 'top' }
- }
- });
-
- graph.addCell([rN, lN]);
-});
diff --git a/examples/curve-connector-js/src/styles.css b/examples/curve-connector-js/src/styles.css
deleted file mode 100644
index 793dc45a28..0000000000
--- a/examples/curve-connector-js/src/styles.css
+++ /dev/null
@@ -1,25 +0,0 @@
-#logo {
- position: absolute;
- top: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
-
-#paper {
- margin: 0 auto;
-}
-
-.joint-tool[data-tool-name="button"] circle {
- fill: #333;
-}
-
-.joint-tool[data-tool-name="connect"]:not(:hover) {
- opacity: 0;
-}
-
-.active [joint-selector="line"] {
- stroke: #4666e5;
-}
diff --git a/examples/different-views-of-the-same-graph-js/README.md b/examples/different-views-of-the-same-graph-js/README.md
deleted file mode 100644
index d933264043..0000000000
--- a/examples/different-views-of-the-same-graph-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Different views of the same graph
-
-Do you need to show different views of the same data model? Display only a subset of what the graph actually contains. The paper viewport option can prevent arbitrary models from displaying as we have demonstrated in the demo below.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/different-views-of-the-same-graph-js/assets/jointjs-logo-black.svg b/examples/different-views-of-the-same-graph-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/different-views-of-the-same-graph-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/different-views-of-the-same-graph-js/index.html b/examples/different-views-of-the-same-graph-js/index.html
deleted file mode 100644
index 6e2f6099fe..0000000000
--- a/examples/different-views-of-the-same-graph-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/different-views-of-the-same-graph-js/package.json b/examples/different-views-of-the-same-graph-js/package.json
deleted file mode 100644
index ca899d221c..0000000000
--- a/examples/different-views-of-the-same-graph-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-different-views-of-the-same-graph-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/different-views-of-the-same-graph-js/src/main.js b/examples/different-views-of-the-same-graph-js/src/main.js
deleted file mode 100644
index 1f01507470..0000000000
--- a/examples/different-views-of-the-same-graph-js/src/main.js
+++ /dev/null
@@ -1,100 +0,0 @@
-// Paper Viewport Option: https://resources.jointjs.com/docs/jointjs/v3.5/html#dia.Paper.prototype.options.viewport
-
-import { dia, shapes } from '@joint/core';
-import './styles.css';
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paperOptions = {
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- frozen: false,
- defaultConnectionPoint: { name: 'boundary' },
- background: { color: '#F3F7F6' }
-};
-
-const paper1 = new dia.Paper({
- ...paperOptions,
- viewport: (view) => view.model.get('subgraph') !== 2
-});
-const paperContainer1 = document.getElementById('paper-container1');
-paperContainer1.appendChild(paper1.el);
-paper1.setGrid('mesh');
-
-const paper2 = new dia.Paper({
- ...paperOptions,
- viewport: (view) => view.model.get('subgraph') !== 1
-});
-const paperContainer2 = document.getElementById('paper-container2');
-paperContainer2.appendChild(paper2.el);
-paper2.setGrid('mesh');
-
-graph.resetCells([
- // common
- {
- id: 'r1',
- type: 'standard.Rectangle',
- size: { width: 100, height: 100 },
- position: { x: 300, y: 100 },
- attrs: { label: { text: 'Common' }}
- },
- {
- id: 'r2',
- type: 'standard.Rectangle',
- size: { width: 100, height: 100 },
- position: { x: 300, y: 300 },
- attrs: { label: { text: 'Common' }}
- },
-
- { type: 'standard.Link', source: { id: 'r1' }, target: { id: 'r2' }},
- // subgraph 1
- {
- id: 'c1',
- type: 'standard.Circle',
- size: { width: 100, height: 100 },
- position: { x: 100, y: 100 },
- attrs: { label: { text: 'Subgraph 1' }},
- subgraph: 1
- },
- {
- id: 'c2',
- type: 'standard.Circle',
- size: { width: 100, height: 100 },
- position: { x: 100, y: 300 },
- attrs: { label: { text: 'Subgraph 1' }},
- subgraph: 1
- },
- {
- type: 'standard.Link',
- source: { id: 'c1' },
- target: { id: 'c2' },
- subgraph: 1
- },
- // subgraph 2
- {
- id: 'h1',
- type: 'standard.HeaderedRectangle',
- size: { width: 100, height: 100 },
- position: { x: 100, y: 100 },
- attrs: { bodyText: { text: 'Subgraph 2' }},
- subgraph: 2
- },
- {
- id: 'h2',
- type: 'standard.HeaderedRectangle',
- size: { width: 100, height: 100 },
- position: { x: 100, y: 300 },
- attrs: { bodyText: { text: 'Subgraph 2' }},
- subgraph: 2
- },
- {
- type: 'standard.Link',
- source: { id: 'h1' },
- target: { id: 'h2' },
- subgraph: 2
- }
-]);
diff --git a/examples/different-views-of-the-same-graph-js/src/styles.css b/examples/different-views-of-the-same-graph-js/src/styles.css
deleted file mode 100644
index e8cd998049..0000000000
--- a/examples/different-views-of-the-same-graph-js/src/styles.css
+++ /dev/null
@@ -1,34 +0,0 @@
-#paper-container1 {
- position: absolute;
- right: 50%;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: hidden;
- border-right: 2px solid black;
-}
-
-#paper-container2 {
- position: absolute;
- right: 0;
- top: 0;
- left: 50%;
- bottom: 0;
- overflow: hidden;
-}
-
-svg {
- font-family: sans-serif;
- font-size: 15;
- font-weight: light;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/drop-image-as-shape-js/README.md b/examples/drop-image-as-shape-js/README.md
deleted file mode 100644
index 90613da428..0000000000
--- a/examples/drop-image-as-shape-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Drop image as shape
-
-Do you want users to be able to drag and drop an image from their operating system directly into a diagram and turn it into an interactive element? This demo shows how it could be done.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/drop-image-as-shape-js/assets/jointjs-logo-black.svg b/examples/drop-image-as-shape-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/drop-image-as-shape-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/drop-image-as-shape-js/index.html b/examples/drop-image-as-shape-js/index.html
deleted file mode 100644
index 73505bc9d1..0000000000
--- a/examples/drop-image-as-shape-js/index.html
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/drop-image-as-shape-js/package.json b/examples/drop-image-as-shape-js/package.json
deleted file mode 100644
index 17a790493c..0000000000
--- a/examples/drop-image-as-shape-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-drop-image-as-shape-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/drop-image-as-shape-js/src/main.js b/examples/drop-image-as-shape-js/src/main.js
deleted file mode 100644
index f4d06ea44f..0000000000
--- a/examples/drop-image-as-shape-js/src/main.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { dia, shapes } from '@joint/core';
-import './styles.scss';
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-
-paperContainer.appendChild(paper.el);
-
-function dragoverHandler(evt) {
- evt.preventDefault();
-}
-
-function dragenterHandler(evt) {
- evt.preventDefault();
- paperContainer.classList.add('drag-n-drop');
-}
-
-function dragleaveHandler(evt) {
- evt.preventDefault();
- paperContainer.classList.remove('drag-n-drop');
-}
-
-async function dropHandler(evt) {
- evt.preventDefault();
- evt.stopPropagation();
- const files = Array.from(event.dataTransfer.files);
- const promises = files.map((file) => readImageFile(file));
- const result = await Promise.all(promises);
- const images = result.filter((image) => image !== null);
- const shift = 20;
- const { x, y } = paper.clientToLocalPoint(evt.clientX, evt.clientY);
- images.forEach((image, index) =>
- image.position(x - shift * index, y - shift * index)
- );
- graph.addCells(images);
- paperContainer.classList.remove('drag-n-drop');
-}
-
-function readImageFile(file) {
- return new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.addEventListener(
- 'load',
- () => {
- const img = new Image();
- img.onload = () => {
- const el = createImage(
- reader.result,
- img.naturalWidth / 4,
- img.naturalHeight / 4
- );
- resolve(el);
- };
- img.onerror = function() {
- resolve(null);
- };
- img.src = reader.result;
- },
- false
- );
- reader.readAsDataURL(file);
- });
-}
-
-function createImage(href, width, height) {
- return new shapes.standard.BorderedImage({
- size: { width, height },
- attrs: {
- image: {
- href,
- preserveAspectRatio: 'none'
- }
- }
- });
-}
-
-paper.el.addEventListener('dragover', dragoverHandler);
-paper.el.addEventListener('dragenter', dragenterHandler);
-paper.el.addEventListener('dragleave', dragleaveHandler);
-paper.el.addEventListener('drop', dropHandler);
diff --git a/examples/drop-image-as-shape-js/src/styles.scss b/examples/drop-image-as-shape-js/src/styles.scss
deleted file mode 100644
index 79f5813fe4..0000000000
--- a/examples/drop-image-as-shape-js/src/styles.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-body {
- text-align: center;
- font-family: sans-serif;
-}
-
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- margin: 30px;
- border: 2px solid lightgray;
-
- &.drag-n-drop {
- border: 2px solid #6fc8a6;
-
- .joint-paper {
- background-color: #b3e2d0 !important;
- }
- }
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/dwdm/.gitignore b/examples/dwdm/.gitignore
deleted file mode 100644
index 69c575d17f..0000000000
--- a/examples/dwdm/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/
-dist/
-node_modules/
diff --git a/examples/dwdm/README.md b/examples/dwdm/README.md
deleted file mode 100644
index 87e05347bd..0000000000
--- a/examples/dwdm/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# JointJS DWDM Demo
-
-## 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-2026 client IO
diff --git a/examples/dwdm/assets/alert.svg b/examples/dwdm/assets/alert.svg
deleted file mode 100644
index c0036e6204..0000000000
--- a/examples/dwdm/assets/alert.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/examples/dwdm/assets/node1.svg b/examples/dwdm/assets/node1.svg
deleted file mode 100644
index 9d34f0eaa2..0000000000
--- a/examples/dwdm/assets/node1.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/dwdm/assets/node2.svg b/examples/dwdm/assets/node2.svg
deleted file mode 100644
index ed53bd89cc..0000000000
--- a/examples/dwdm/assets/node2.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/dwdm/assets/node3.svg b/examples/dwdm/assets/node3.svg
deleted file mode 100644
index 09ce0b6e24..0000000000
--- a/examples/dwdm/assets/node3.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/dwdm/index.html b/examples/dwdm/index.html
deleted file mode 100644
index 2d7ad905fb..0000000000
--- a/examples/dwdm/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/dynamic-font-size-js/package.json b/examples/dynamic-font-size-js/package.json
deleted file mode 100644
index b7a5066f23..0000000000
--- a/examples/dynamic-font-size-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-dynamic-font-size-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/dynamic-font-size-js/src/main.js b/examples/dynamic-font-size-js/src/main.js
deleted file mode 100644
index 9eef44567c..0000000000
--- a/examples/dynamic-font-size-js/src/main.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { elementTools, dia, shapes } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const ResizeTool = elementTools.Control.extend({
- getPosition: function(view) {
- const model = view.model;
- const { width, height } = model.size();
- return { x: width, y: height };
- },
- setPosition: function(view, coordinates) {
- const model = view.model;
- model.resize(Math.max(coordinates.x, 1), Math.max(coordinates.y, 1));
- }
-});
-
-const rect = new shapes.standard.Rectangle({
- position: { x: 100, y: 100 },
- size: { width: 200, height: 100 },
- attrs: {
- body: {
- strokeWidth: 'calc(s/20)'
- },
- label: {
- fontSize: 'calc(h/2)',
- textWrap: {
- text: 'Dynamic',
- width: -10,
- ellipsis: true
- }
- }
- }
-});
-
-rect.addTo(graph);
-
-const toolsView = new dia.ToolsView({
- tools: [
- new ResizeTool({
- selector: 'body',
- handleAttributes: {
- fill: '#4666E5'
- }
- })
- ]
-});
-
-rect.findView(paper).addTools(toolsView);
diff --git a/examples/dynamic-font-size-js/src/styles.css b/examples/dynamic-font-size-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/dynamic-font-size-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/dynamic-status-icons-js/README.md b/examples/dynamic-status-icons-js/README.md
deleted file mode 100644
index 7d9e12e174..0000000000
--- a/examples/dynamic-status-icons-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Dynamic Status Icons
-
-Need to indicate a particular status dynamically? When working with highlighters, we can add a list of arbitrary SVG elements to the cell view, and then update this list in the manner we want.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/dynamic-status-icons-js/assets/jointjs-logo-black.svg b/examples/dynamic-status-icons-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/dynamic-status-icons-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/dynamic-status-icons-js/index.html b/examples/dynamic-status-icons-js/index.html
deleted file mode 100644
index 0bf5fa54cc..0000000000
--- a/examples/dynamic-status-icons-js/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/dynamic-status-icons-js/package.json b/examples/dynamic-status-icons-js/package.json
deleted file mode 100644
index a6c9007900..0000000000
--- a/examples/dynamic-status-icons-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-dynamic-status-icons-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/dynamic-status-icons-js/src/main.js b/examples/dynamic-status-icons-js/src/main.js
deleted file mode 100644
index d9ba1f97e0..0000000000
--- a/examples/dynamic-status-icons-js/src/main.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import { V, g, dia, shapes, highlighters } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- drawGrid: { name: 'mesh' },
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const rectangle = new shapes.standard.Rectangle();
-rectangle.resize(100, 100);
-rectangle.position(10, 10);
-rectangle.attr('label/text', 'Rectangle');
-rectangle.addTo(graph);
-
-const circle = new shapes.standard.Circle();
-circle.resize(100, 100);
-circle.position(160, 10);
-circle.attr('label/text', 'Circle');
-circle.addTo(graph);
-
-const ellipse = new shapes.standard.Ellipse();
-ellipse.resize(150, 100);
-ellipse.position(310, 10);
-ellipse.attr('label/text', 'Ellipse');
-ellipse.addTo(graph);
-
-const path = new shapes.standard.Path();
-path.resize(100, 100);
-path.position(510, 10);
-path.attr('label/text', 'Path');
-path.attr(
- 'body/d',
- 'M 0 calc(0.25 * h) 0 calc(0.75 * h) calc(0.6 * w) calc(h) C calc(1.2 * w) calc(h) calc(1.2 * w) 0 calc(0.6 * w) 0 Z'
-);
-path.addTo(graph);
-
-class StatusList extends highlighters.list {
- createListItem(color, { width, height }) {
- const { node } = V('ellipse', {
- event: 'element:status:pointerdown',
- cursor: 'default',
- rx: width / 2,
- ry: height / 2,
- cx: width / 2,
- cy: height / 2,
- fill: color,
- stroke: '#333',
- 'stroke-width': 2
- });
- return node;
- }
-}
-
-graph.getElements().forEach((el) => {
- StatusList.add(el.findView(paper), 'root', 'status', {
- attribute: 'status',
- position: 'top-right',
- margin: { right: 5, top: 5 },
- size: 20,
- gap: 3,
- direction: 'row'
- });
-});
-
-const randomColor = () =>
- `#${Math.floor(Math.random() * 16777215).toString(16)}`;
-
-const setRandomStatuses = () => {
- graph.getElements().forEach((el) => {
- const status = Array.from({ length: g.random(1, 4) }).map(() =>
- randomColor()
- );
- el.set('status', status);
- });
-};
-
-setInterval(() => setRandomStatuses(), 1000);
-
-setRandomStatuses();
diff --git a/examples/dynamic-status-icons-js/src/styles.css b/examples/dynamic-status-icons-js/src/styles.css
deleted file mode 100644
index c0f5dfd90e..0000000000
--- a/examples/dynamic-status-icons-js/src/styles.css
+++ /dev/null
@@ -1,19 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
- font-family: sans-serif;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/electric-generator-js/README.md b/examples/electric-generator-js/README.md
deleted file mode 100644
index ee7d8e41fa..0000000000
--- a/examples/electric-generator-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Electric generator
-
-Do you want to animate elements in a diagram? You can use the transition feature on the model attributes or write a custom element view and take advantage of the fact that JointJS shapes are made up of SVG, which can be set in motion using the browser's Animation API. See the latter approach in action in this demo.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/electric-generator-js/assets/jointjs-logo-black.svg b/examples/electric-generator-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/electric-generator-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/electric-generator-js/index.html b/examples/electric-generator-js/index.html
deleted file mode 100644
index 7de7d5602b..0000000000
--- a/examples/electric-generator-js/index.html
+++ /dev/null
@@ -1,26 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/electric-generator-js/package.json b/examples/electric-generator-js/package.json
deleted file mode 100644
index 4276829fea..0000000000
--- a/examples/electric-generator-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-electric-generator-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/electric-generator-js/src/main.js b/examples/electric-generator-js/src/main.js
deleted file mode 100644
index 3edc61057c..0000000000
--- a/examples/electric-generator-js/src/main.js
+++ /dev/null
@@ -1,406 +0,0 @@
-import { dia, shapes, util } from '@joint/core';
-import './styles.scss';
-
-const paperContainerEl = document.getElementById('paper-container');
-const playbackRateEl = document.getElementById('power-input');
-const playbackRateOutputEl = document.getElementById('power-output');
-
-// Turbine metrics
-const r = 16;
-const a = 3;
-const b = 4;
-
-// Custom view flags
-const POWER_FLAG = 'POWER';
-const LIGHT_FLAG = 'LIGHT';
-
-class Generator extends dia.Element {
- defaults() {
- return {
- ...super.defaults,
- type: 'Generator',
- size: {
- width: 60,
- height: 80
- },
- power: 0,
- attrs: {
- root: {
- magnetSelector: 'body'
- },
- body: {
- width: 'calc(w)',
- height: 'calc(h)',
- stroke: '#7f4439',
- strokeWidth: 2,
- fill: '#945042',
- rx: 5,
- ry: 5
- },
- label: {
- text: 'Generator',
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
- x: 'calc(0.5*w)',
- y: 'calc(h+10)',
- fontSize: '14',
- fontFamily: 'sans-serif',
- fill: '#350100'
- },
- generatorGroup: {
- transform: 'translate(calc(w/2),calc(h/2))',
- event: 'element:power:click',
- cursor: 'pointer'
- },
- generatorBackground: {
- r: 24,
- fill: '#350100',
- stroke: '#a95b4c',
- strokeWidth: 2
- },
- generator: {
- d: `M ${a} ${a} ${b} ${r} -${b} ${r} -${a} ${a} -${r} ${b} -${r} -${b} -${a} -${a} -${b} -${r} ${b} -${r} ${a} -${a} ${r} -${b} ${r} ${b} Z`,
- stroke: '#a95b4c',
- strokeWidth: 2,
- fill: '#c99287'
- }
- }
- };
- }
-
- get power() {
- return Math.round(this.get('power') * 100);
- }
-
- preinitialize() {
- this.markup = util.svg/* xml */ `
-
-
-
-
-
-
-
diff --git a/examples/element-connect-tool-js/package.json b/examples/element-connect-tool-js/package.json
deleted file mode 100644
index 1c8d8bfba4..0000000000
--- a/examples/element-connect-tool-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-element-connect-tool-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/element-connect-tool-js/src/main.js b/examples/element-connect-tool-js/src/main.js
deleted file mode 100644
index 12cb796798..0000000000
--- a/examples/element-connect-tool-js/src/main.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import { dia, shapes, elementTools } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- drawGrid: { name: 'mesh' },
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- defaultLink: () => new shapes.standard.Link(),
- connectionStrategy: function(end, view, _magnet, coords) {
- end.anchor = {
- name: view.model.getBBox().sideNearestToPoint(coords)
- };
- }
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const rectangle = new shapes.standard.Rectangle();
-rectangle.resize(100, 100);
-rectangle.position(100, 100);
-rectangle.addTo(graph);
-
-function getMarkup(angle = 0) {
- return [
- {
- tagName: 'circle',
- selector: 'button',
- attributes: {
- r: 7,
- fill: '#4666E5',
- stroke: '#FFFFFF',
- cursor: 'pointer'
- }
- },
- {
- tagName: 'path',
- selector: 'icon',
- attributes: {
- transform: `rotate(${angle})`,
- d: 'M -4 -1 L 0 -1 L 0 -4 L 4 0 L 0 4 0 1 -4 1 z',
- fill: '#FFFFFF',
- stroke: 'none',
- 'stroke-width': 2,
- 'pointer-events': 'none'
- }
- }
- ];
-}
-
-const connectRight = new elementTools.Connect({
- x: '100%',
- y: '50%',
- markup: getMarkup(0)
-});
-
-const connectBottom = new elementTools.Connect({
- x: '50%',
- y: '100%',
- markup: getMarkup(90)
-});
-const connectTop = new elementTools.Connect({
- x: '50%',
- y: '0%',
- markup: getMarkup(270)
-});
-const connectLeft = new elementTools.Connect({
- x: '0%',
- y: '50%',
- markup: getMarkup(180)
-});
-
-const tools = new dia.ToolsView({
- tools: [connectRight, connectLeft, connectTop, connectBottom]
-});
-
-rectangle.findView(paper).addTools(tools);
-
-rectangle.clone().position(300, 100).addTo(graph);
diff --git a/examples/element-connect-tool-js/src/styles.css b/examples/element-connect-tool-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/element-connect-tool-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/element-port-and-link-label-markup-js/README.md b/examples/element-port-and-link-label-markup-js/README.md
deleted file mode 100644
index dcb853915b..0000000000
--- a/examples/element-port-and-link-label-markup-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Element, Port and Link Label Markup
-
-You probably know that you can style your JointJS elements in many different ways by providing your own SVG markup. But did you know that you can use the same custom markup not only to define elements but also ports or link labels? Have a look at this example.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/element-port-and-link-label-markup-js/assets/jointjs-logo-black.svg b/examples/element-port-and-link-label-markup-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/element-port-and-link-label-markup-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/element-port-and-link-label-markup-js/index.html b/examples/element-port-and-link-label-markup-js/index.html
deleted file mode 100644
index 826d64d756..0000000000
--- a/examples/element-port-and-link-label-markup-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/element-port-and-link-label-markup-js/package.json b/examples/element-port-and-link-label-markup-js/package.json
deleted file mode 100644
index 043055e83b..0000000000
--- a/examples/element-port-and-link-label-markup-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-element-port-and-link-label-markup-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/element-port-and-link-label-markup-js/src/main.js b/examples/element-port-and-link-label-markup-js/src/main.js
deleted file mode 100644
index 5d397e391e..0000000000
--- a/examples/element-port-and-link-label-markup-js/src/main.js
+++ /dev/null
@@ -1,234 +0,0 @@
-import { dia, shapes, util } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const cellNamespace = { ...shapes };
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: cellNamespace });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: cellNamespace,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- interactive: true,
- defaultConnectionPoint: {
- name: 'boundary',
- },
- validateConnection: function(
- sourceView,
- sourceMagnet,
- targetView,
- targetMagnet
- ) {
- const sourcePort = sourceView.findAttribute('port', sourceMagnet);
- const targetPort = targetView.findAttribute('port', targetMagnet);
- if (sourcePort === targetPort) {
- return false;
- }
- return true;
- },
- highlighting: {
- default: {
- name: 'mask',
- },
- },
- linkPinning: false,
- snapLabels: true,
- defaultLink: () => new shapes.standard.Link(),
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-function getMarkupAttributes() {
- return {
- markup: util.svg`
-
-
-
-
-
-
-
diff --git a/examples/external-svg-images-js/package.json b/examples/external-svg-images-js/package.json
deleted file mode 100644
index 3c84bd76de..0000000000
--- a/examples/external-svg-images-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-external-svg-images-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/external-svg-images-js/src/main.js b/examples/external-svg-images-js/src/main.js
deleted file mode 100644
index e2adf5eb97..0000000000
--- a/examples/external-svg-images-js/src/main.js
+++ /dev/null
@@ -1,351 +0,0 @@
-import { dia, util, shapes as defaultShapes, highlighters, elementTools } from '@joint/core';
-import './styles.css';
-const shapes = { ...defaultShapes };
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- defaultConnectionPoint: {
- name: 'boundary'
- }
-});
-
-paperContainer.appendChild(paper.el);
-
-function addImages(image, x = 0, y = 20) {
- const images = [
- image
- .clone()
- .resize(50, 50)
- .position(x + 50, y),
- image
- .clone()
- .resize(100, 100)
- .position(x + 25, y + 90),
- image
- .clone()
- .resize(150, 150)
- .position(x, y + 230)
- ];
- graph.addCells(images);
- return images;
-}
-
-// -------------------------------------------------------------------
-// 1. Use the image as is with JointJS built-in image shape. The image
-// scales with the model, you can control control the aspect ratio with the `preserveAspectRatio` attribute
-
-// The image by Alpár-Etele Méder
-const christmasTreeSVG = `
-
-`;
-
-const standardImage = new shapes.standard.Image({
- attrs: {
- image: {
- href: `data:image/svg+xml;utf8,${encodeURIComponent(christmasTreeSVG)}`
- // Alternatively convert the SVG to base64
- // href: `data:image/svg+xml;base64;utf8,${btoa(christmasTreeSVG)}`
- },
- label: {
- text: 'Christmas Tree',
- fontSize: 10
- }
- }
-});
-
-const [, si2, si3] = addImages(standardImage, 20);
-
-// --------------------------------------------------------
-// 2. Add placeholders to the original SVG image and replace
-// them with the any color dynamically
-
-// The original SVG image with $color placeholder
-const templateChristmasTreeSVG = `
-
-`;
-
-class TemplateImage extends dia.Element {
- defaults() {
- return {
- ...super.defaults,
- type: 'TemplateImage',
- attrs: {
- root: {
- cursor: 'move'
- },
- image: {
- width: 'calc(w)',
- height: 'calc(h)'
- // href: '[URL]'
- },
- label: {
- textVerticalAnchor: 'top',
- textAnchor: 'middle',
- x: 'calc(w/2)',
- y: 'calc(h + 10)',
- fontSize: 10,
- fill: '#333333'
- }
- }
- };
- }
-
- preinitialize() {
- this.dataURLPrefix = 'data:image/svg+xml;utf8,';
- this.markup = [
- {
- tagName: 'image',
- selector: 'image'
- },
- {
- tagName: 'text',
- selector: 'label'
- }
- ];
- }
-
- initialize(...args) {
- super.initialize(...args);
- this.on('change:color', this.setImageColor);
- this.setImageColor();
- }
-
- setImageColor() {
- const svg = this.get('svg') || '';
- const color = this.get('color') || 'black';
- this.attr(
- 'image/href',
- this.dataURLPrefix + encodeURIComponent(svg.replace(/\$color/g, color))
- );
- }
-}
-shapes.TemplateImage = TemplateImage;
-
-const templateImage = new TemplateImage({
- svg: templateChristmasTreeSVG,
- attrs: {
- label: {
- text: 'Template Christmas Tree',
- fontSize: 10
- }
- }
-});
-
-const [ti1, ti2, ti3] = addImages(templateImage, 220);
-ti1.set('color', 'red');
-ti2.set('color', 'purple');
-ti3.set('color', 'orange');
-
-// ----------------------------------------------
-// 3. The original image is inserted directly into the markup and extended with selectors (and group-selectors)
-// The size of the image SVG element is set to `calc(w)` and `calc(h)` so that it can be scaled with the element.
-// The SVG image changes can be made via the `attr` method using the selectors.
-
-// The string converted into JSON markup with the `util.svg` function.
-const markupChristmasTree = util.svg`
-
- 
-
-
-
-
-
-
diff --git a/examples/fault-tree-analysis-js/package.json b/examples/fault-tree-analysis-js/package.json
deleted file mode 100644
index ee991df49b..0000000000
--- a/examples/fault-tree-analysis-js/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "name": "@joint/demo-fault-tree-analysis-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^",
- "@joint/layout-directed-graph": "workspace:^"
- }
-}
diff --git a/examples/fault-tree-analysis-js/src/main.js b/examples/fault-tree-analysis-js/src/main.js
deleted file mode 100644
index 1579775a32..0000000000
--- a/examples/fault-tree-analysis-js/src/main.js
+++ /dev/null
@@ -1,586 +0,0 @@
-import { dia, elementTools, shapes as defaultShapes, util } from '@joint/core';
-import { DirectedGraph } from '@joint/layout-directed-graph';
-import './styles.css';
-
-const Event = dia.Element.define(
- 'fta.Event',
- {
- z: 3,
- attrs: {
- root: {
- pointerEvents: 'bounding-box',
- },
- body: {
- strokeWidth: 2,
- stroke: '#ed2637',
- fill: {
- type: 'pattern',
- attrs: {
- width: 12,
- height: 12,
- 'stroke-width': 2,
- 'stroke-opacity': 0.3,
- stroke: '#ed2637',
- fill: 'none',
- },
- markup: util.svg`
-
-
-
-
-
-
-
diff --git a/examples/fills-js/package.json b/examples/fills-js/package.json
deleted file mode 100644
index 682baa7200..0000000000
--- a/examples/fills-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-fills-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/fills-js/src/main.js b/examples/fills-js/src/main.js
deleted file mode 100644
index ed0b6e8f41..0000000000
--- a/examples/fills-js/src/main.js
+++ /dev/null
@@ -1,227 +0,0 @@
-import { dia, shapes } from '@joint/core';
-import './styles.css';
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const linearGradientFill = new shapes.standard.Rectangle({
- size: { width: 200, height: 100 },
- attrs: {
- body: {
- rx: 2,
- ry: 2,
- stroke: '#333',
- strokeWidth: 2,
- fill: {
- type: 'linearGradient',
- stops: [
- { offset: 0, color: '#1f005c' },
- { offset: 0.14285714285714285, color: '#5b0060' },
- { offset: 0.2857142857142857, color: '#870160' },
- { offset: 0.42857142857142855, color: '#ac255e' },
- { offset: 0.5714285714285714, color: '#ca485c' },
- { offset: 0.7142857142857142, color: '#e16b5c' },
- { offset: 0.8571428571428571, color: '#f39060' },
- { offset: 1, color: '#ffb56b' }
- ]
- },
- filter: {
- name: 'dropShadow',
- args: { dx: 4, dy: 4, blur: 5, color: '#333' }
- }
- },
- label: {
- fontSize: 20,
- fontFamily: 'sans-serif',
- fill: '#fff',
- text: 'Linear Gradient'
- }
- }
-});
-
-const radialGradientFill = new shapes.standard.Ellipse({
- size: { width: 150, height: 150 },
- attrs: {
- body: {
- stroke: '#333',
- strokeWidth: 2,
- fill: {
- type: 'radialGradient',
- stops: [
- { offset: 0, color: '#ffb56b' },
- { offset: 0.14285714285714285, color: '#f39060' },
- { offset: 0.2857142857142857, color: '#e16b5c' },
- { offset: 0.42857142857142855, color: '#ca485c' },
- { offset: 0.5714285714285714, color: '#ac255e' },
- { offset: 0.7142857142857142, color: '#870160' },
- { offset: 0.8571428571428571, color: '#5b0060' },
- { offset: 1, color: '#1f005c' }
- ]
- },
- filter: {
- name: 'dropShadow',
- args: { dx: 3, dy: 3, blur: 10, color: '#333' }
- }
- },
- label: {
- fontSize: 20,
- fontFamily: 'sans-serif',
- fill: '#fff',
- text: 'Radial Gradient'
- }
- }
-});
-
-const patternFill1 = new shapes.standard.Rectangle({
- size: { width: 200, height: 100 },
- attrs: {
- body: {
- stroke: '#333',
- strokeWidth: 2,
- fill: {
- type: 'pattern',
- attrs: {
- width: 12,
- height: 12,
- 'stroke-width': 1,
- stroke: '#333',
- fill: 'none'
- },
- markup: [
- {
- tagName: 'rect',
- attributes: {
- width: 12,
- height: 12,
- fill: '#fff',
- stroke: 'none'
- }
- },
- {
- tagName: 'path',
- attributes: {
- d: 'M-1,11 l2,2 M11,13 l2,-2'
- }
- },
- {
- tagName: 'polyline',
- attributes: {
- points: '0,0 6,6 12,0'
- }
- }
- ]
- }
- },
- label: {
- fontSize: 20,
- fontFamily: 'sans-serif',
- fill: '#333',
- stroke: '#fff',
- strokeWidth: 5,
- paintOrder: 'stroke',
- text: 'Fill Pattern 1'
- }
- }
-});
-
-// Pattern Monster (https://pattern.monster/) Examples
-
-//
-
-
-
-
-
-
diff --git a/examples/find-all-cells-between-2-elements-js/package.json b/examples/find-all-cells-between-2-elements-js/package.json
deleted file mode 100644
index 09cb8b9d08..0000000000
--- a/examples/find-all-cells-between-2-elements-js/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "name": "@joint/demo-find-all-cells-between-2-elements-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^",
- "@joint/layout-directed-graph": "workspace:^"
- }
-}
diff --git a/examples/find-all-cells-between-2-elements-js/src/main.js b/examples/find-all-cells-between-2-elements-js/src/main.js
deleted file mode 100644
index 50247d35e2..0000000000
--- a/examples/find-all-cells-between-2-elements-js/src/main.js
+++ /dev/null
@@ -1,228 +0,0 @@
-import { V, dia, shapes, highlighters } from '@joint/core';
-import { DirectedGraph } from '@joint/layout-directed-graph';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- interactive: false,
- defaultConnectionPoint: {
- name: 'boundary'
- },
- defaultConnector: {
- name: 'rounded'
- },
- clickThreshold: 10
-});
-
-paperContainer.appendChild(paper.el);
-
-// Adjacency list.
-const list = {
- a: ['b', 'c'],
- b: ['d', 'e'],
- c: ['f', 'g'],
- f: ['b'],
- e: ['c'],
- h: ['f', 'g'],
- i: ['h', 'a', 'd', 'g'],
- j: ['a'],
- k: ['l'],
- l: ['h'],
- m: ['l']
-};
-
-// Create a node with `id` at the position `p`.
-function n(id) {
- const node = new shapes.standard.Circle({
- id: id,
- size: { width: 40, height: 40 },
- attrs: {
- label: {
- text: id.toUpperCase(),
- fontSize: 20,
- fontFamily: 'sans-serif'
- }
- }
- });
- node.addTo(graph);
- return node;
-}
-
-// Create a link between a source element with id `s` and target element with id `t`.
-function l(s, t) {
- const link = new shapes.standard.Link({
- id: [s, t].sort().join(),
- source: { id: s },
- target: { id: t },
- z: -1
- });
- link.addTo(graph);
- return link;
-}
-
-// Construct nodes and links based on the adjacency list.
-Object.keys(list).forEach((parent) => {
- const neighbors = list[parent];
- n(parent);
- neighbors.forEach((adj) => {
- // Do not create the node if it's already in the graph.
- if (!graph.getCell(adj)) n(adj);
- l(parent, adj);
- });
-});
-
-DirectedGraph.layout(graph, {
- marginX: 100,
- marginY: 50,
- setVertices: true,
- nodeSep: 60
-});
-
-let start;
-let subgraph;
-
-function selectStart(element) {
- const id = 'start-highlight';
- if (start) {
- highlighters.mask.remove(start.findView(paper), id);
- }
- start = element;
- highlighters.mask.add(element.findView(paper), 'body', id, {
- padding: 2,
- attrs: {
- stroke: '#4666E5',
- 'stroke-width': 4
- }
- });
-}
-
-selectStart(graph.getCell('a'));
-
-function highlightSubgraph(elements, valid) {
- const id = 'subgraph-highlighter';
- if (subgraph) {
- subgraph.forEach((cell) => {
- highlighters.addClass.remove(cell.findView(paper), id);
- });
- }
- subgraph = graph.getSubgraph(elements);
- if (!valid) {
- // No subgraph found
- subgraph.forEach((cell) => {
- highlighters.addClass.add(cell.findView(paper), 'body', id, {
- className: 'no-subgraph'
- });
- });
- } else {
- subgraph.forEach((cell) => {
- highlighters.addClass.add(
- cell.findView(paper),
- cell.isLink() ? 'line' : 'body',
- id,
- { className: 'subgraph' }
- );
- });
- }
-}
-
-paper.on('element:pointerclick', ({ model: element }) => {
- selectStart(element);
- highlightSubgraph([]);
-});
-
-// When the user hovers over an element,
-// highlight all the elements that are between the Start and the current element.
-paper.on('element:mouseenter', ({ model: end }) => {
- const between = getElementsBetween(start, end);
- if (between.length > 0) {
- highlightSubgraph([start, end, ...between], true);
- } else {
- highlightSubgraph(
- [start, end],
- graph.isNeighbor(start, end, { outbound: true })
- );
- }
-});
-
-paper.on('element:mouseleave', (elementView) => {
- highlightSubgraph([]);
-});
-
-// This method will return all the elements that can be found in whatever
-// possible permutation of connections between the Start and the End element.
-function getElementsBetween(start, end) {
- const start2end = getSuccessors(start, end);
- const end2start = getPredecessors(end, start);
- const intersection = new Set();
- start2end.forEach((element) => {
- if (end2start.includes(element)) {
- intersection.add(element);
- }
- });
- return Array.from(intersection);
-}
-
-function getElements(element, terminator, opt) {
- const res = [];
- graph.search(
- element,
- (el) => {
- if (el !== element) {
- res.push(el);
- }
- if (el === terminator) {
- return false;
- }
- },
- opt
- );
- return res;
-}
-
-function getSuccessors(element, terminator) {
- return getElements(element, terminator, { outbound: true });
-}
-
-function getPredecessors(element, terminator) {
- return getElements(element, terminator, { inbound: true });
-}
-
-// Styling
-
-const color = '#4666E5';
-const invalidColor = '#FF4365';
-const styles = V.createSVGStyle(`
- .joint-element .subgraph {
- stroke: ${color};
- fill: ${color};
- fill-opacity: 0.2;
- }
- .joint-element .no-subgraph {
- stroke: ${invalidColor};
- fill: ${invalidColor};
- fill-opacity: 0.2;
- }
- .joint-link .subgraph {
- stroke: ${color};
- stroke-dasharray: 5;
- stroke-dashoffset: 10;
- animation: dash 0.5s infinite linear;
- }
- @keyframes dash {
- to {
- stroke-dashoffset: 0;
- }
- }
-`);
-paper.svg.prepend(styles);
diff --git a/examples/find-all-cells-between-2-elements-js/src/styles.css b/examples/find-all-cells-between-2-elements-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/find-all-cells-between-2-elements-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/fta-js/.gitignore b/examples/fta-js/.gitignore
deleted file mode 100644
index 69c575d17f..0000000000
--- a/examples/fta-js/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/
-dist/
-node_modules/
diff --git a/examples/fta-js/README.md b/examples/fta-js/README.md
deleted file mode 100644
index 7b1f969047..0000000000
--- a/examples/fta-js/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# JointJS List Demo
-
-## 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-2026 client IO
diff --git a/examples/fta-js/css/fta.css b/examples/fta-js/css/fta.css
deleted file mode 100644
index 400324d859..0000000000
--- a/examples/fta-js/css/fta.css
+++ /dev/null
@@ -1,8 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
- }
diff --git a/examples/fta-js/index.html b/examples/fta-js/index.html
deleted file mode 100644
index 5cdc5ba6e8..0000000000
--- a/examples/fta-js/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/genogram-ts/package.json b/examples/genogram-ts/package.json
deleted file mode 100644
index 1702681d6b..0000000000
--- a/examples/genogram-ts/package.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
- "name": "@joint/demo-genogram-directed-graph-ts",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview",
- "test-layout": "npx tsx scripts/test-layout.cts",
- "test": "npx tsx scripts/test-layout.cts --data=thompson.json && npx tsx scripts/test-layout.cts --data=british-royals.json && npx tsx scripts/test-layout.cts --data=relationship-chart.json"
- },
- "devDependencies": {
- "typescript": "~5.8.2",
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^",
- "@joint/layout-directed-graph": "workspace:^"
- }
-}
diff --git a/examples/genogram-ts/scripts/test-layout.cts b/examples/genogram-ts/scripts/test-layout.cts
deleted file mode 100644
index 8d5b4a7b14..0000000000
--- a/examples/genogram-ts/scripts/test-layout.cts
+++ /dev/null
@@ -1,124 +0,0 @@
-// Test script: runs the genogram layout in Node.js (no browser needed).
-// Uses the same layoutGenogram() as the browser version — no duplication.
-//
-// Usage: cd examples/genogram-ts
-// yarn test-layout
-// yarn test-layout --data=thompson.json
-
-import { readFileSync } from 'node:fs';
-import { resolve, dirname } from 'node:path';
-import { dia, shapes } from '@joint/core';
-import { getParentChildLinks, getMateLinks, type PersonNode } from '../src/data';
-import { layoutGenogram } from '../src/layout';
-
-// --- Parse CLI args ---
-const dataFile = process.argv.find(a => a.startsWith('--data='))?.split('=')[1] || 'thompson.json';
-const familiesDir = resolve(dirname(__filename), '../src/families');
-const persons: PersonNode[] = JSON.parse(readFileSync(`${familiesDir}/${dataFile}`, 'utf-8'));
-
-const personById = new Map
-
-
-
-
-
-
diff --git a/examples/hexagonal-grid-js/package.json b/examples/hexagonal-grid-js/package.json
deleted file mode 100644
index a6b8e0dbc7..0000000000
--- a/examples/hexagonal-grid-js/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "name": "@joint/demo-hexagonal-grid-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^",
- "honeycomb-grid": "^3.1.8"
- }
-}
diff --git a/examples/hexagonal-grid-js/src/main.js b/examples/hexagonal-grid-js/src/main.js
deleted file mode 100644
index 656ae0619f..0000000000
--- a/examples/hexagonal-grid-js/src/main.js
+++ /dev/null
@@ -1,190 +0,0 @@
-import { V, dia, shapes, elementTools } from '@joint/core';
-import { extendHex, defineGrid } from 'honeycomb-grid';
-import './styles.scss';
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- frozen: true,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#ffffff' },
- linkPinning: false,
- clickThreshold: 10,
- defaultLink: () => new shapes.standard.Link(),
- el: document.getElementById('paper'),
- highlighting: {
- connecting: {
- name: 'mask',
- options: {
- attrs: {
- stroke: '#80aaff',
- 'stroke-width': 4,
- 'stroke-linecap': 'butt',
- 'stroke-linejoin': 'miter'
- }
- }
- }
- },
- validateConnection: (sv, _, tv) => {
- const s = sv.model;
- const t = tv.model;
- return s.isElement() && t.isElement() && s !== t;
- },
- defaultConnectionPoint: {
- name: 'boundary'
- }
-});
-
-paperContainer.appendChild(paper.el);
-
-const Hex = extendHex({
- size: 50,
- orientation: 'flat'
-});
-
-const Grid = defineGrid(Hex);
-
-const size = 9;
-const grid = Grid.rectangle({ width: size, height: size });
-
-const hex = Hex();
-
-// get the corners of a hex (they're the same for all hexes created with the same Hex factory)
-const corners = Hex().corners();
-const points = corners.map(({ x, y }) => `${x},${y}`).join(' ');
-
-// an SVG symbol can be reused
-
-const { node: gridEl } = V('g').addClass('hexagon-grid');
-
-grid.forEach((hex) => {
- const { x, y } = hex.toPoint();
- const { node: polygonEl } = V('polygon')
- .addClass('hexagon')
- .attr('points', points)
- .attr('transform', `translate(${x}, ${y})`);
- gridEl.append(polygonEl);
-});
-
-paper.getLayerNode(dia.Paper.Layers.BACK).prepend(gridEl);
-
-paper.setDimensions(grid.pointWidth(), grid.pointHeight());
-
-paper.options.restrictTranslate = function(elementView, px, py) {
- const { x: x0, y: y0 } = elementView.model.position();
- const dx = x0 - px;
- const dy = y0 - py;
- return (x, y) => {
- const hex = Grid.pointToHex(x - dx, y - dy);
- return Hex(
- Math.max(0, Math.min(grid.width - 1, hex.x)),
- Math.max(0, Math.min(grid.height - 1, hex.y))
- ).toPoint();
- };
-};
-
-const hexagon = new shapes.standard.Polygon({
- position: Hex(5, 3).toPoint(),
- size: { width: hex.width(), height: hex.height() },
- attrs: {
- root: {
- highlighterSelector: 'body',
- magnetSelector: 'root'
- },
- body: {
- refPoints: points
- }
- }
-});
-
-const createHexagon = (u, v) => {
- const { x, y } = Hex(u, v).toPoint();
- return hexagon.clone().position(x, y);
-};
-
-const createLink = (s, t) => {
- return new shapes.standard.Link({
- source: { id: s.id },
- target: { id: t.id }
- });
-};
-
-const hexagon1 = createHexagon(4, 3);
-const hexagon2 = createHexagon(3, 5);
-const hexagon3 = createHexagon(5, 5);
-const link1 = createLink(hexagon1, hexagon2);
-const link2 = createLink(hexagon1, hexagon3);
-
-graph.on('add', (cell) => {
- if (cell.isLink()) return;
- const tools = new dia.ToolsView({
- tools: [
- new elementTools.Connect({
- useModelGeometry: true,
- x: '50%',
- y: '100%',
- offset: { x: -10 }
- }),
- new elementTools.Button({
- useModelGeometry: true,
- x: '50%',
- y: '100%',
- offset: { x: 10 },
- action: function(evt, elementView) {
- const sourceHexagon = elementView.model;
- const { x, y } = sourceHexagon.getBBox().center();
- const hex = Grid.pointToHex(x, y);
- hex.y += 2;
- if (!grid.includes(hex)) return;
- const targetHexagon = createHexagon(hex.x, hex.y);
- graph.addCells([
- targetHexagon,
- createLink(sourceHexagon, targetHexagon)
- ]);
- },
- markup: [
- {
- tagName: 'circle',
- selector: 'button',
- attributes: {
- r: 7,
- fill: '#333333',
- cursor: 'pointer'
- }
- },
- {
- tagName: 'path',
- selector: 'icon',
- attributes: {
- d: 'M -4 0 4 0 M 0 -4 0 4',
- fill: 'none',
- stroke: '#FFFFFF',
- 'stroke-width': 2,
- 'pointer-events': 'none'
- }
- }
- ]
- })
- ]
- });
- cell.findView(paper).addTools(tools);
-});
-
-graph.addCells([hexagon1, hexagon2, hexagon3, link1, link2]);
-
-paper.unfreeze();
-
-paper.on('blank:pointerclick', (evt, x, y) => {
- const hex = Grid.pointToHex(x, y);
- const hexagon = createHexagon(hex.x, hex.y);
- graph.addCell(hexagon);
-});
-
-paper.on({
- 'cell:pointerdown': () => gridEl.classList.add('disabled'),
- 'cell:pointerup': () => gridEl.classList.remove('disabled')
-});
diff --git a/examples/hexagonal-grid-js/src/styles.scss b/examples/hexagonal-grid-js/src/styles.scss
deleted file mode 100644
index 251c294d2a..0000000000
--- a/examples/hexagonal-grid-js/src/styles.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-
- .joint-paper {
- margin: 10px auto;
-
- .hexagon-grid {
- &:not(.disabled) {
- cursor: cell;
-
- .hexagon:hover {
- fill: #e5fbff;
- }
- }
-
- .hexagon {
- fill: #f3f7f6;
- stroke: #c0c4c3;
- stroke-width: 1;
- }
- }
-
- svg {
- overflow: visible;
- }
- }
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/hierarchical-diagrams-js/README.md b/examples/hierarchical-diagrams-js/README.md
deleted file mode 100644
index 3d52f9bcc8..0000000000
--- a/examples/hierarchical-diagrams-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Hierarchical Diagrams
-
-Interested in advanced tips for working with hierarchical diagrams? Try this demo, which offers features such as inserting elements into a container, dropping a container over children to embed them, embedding validations, resizing a container based on the elements inside and automatic positioning of elements in the container.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/hierarchical-diagrams-js/assets/jointjs-logo-black.svg b/examples/hierarchical-diagrams-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/hierarchical-diagrams-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/hierarchical-diagrams-js/index.html b/examples/hierarchical-diagrams-js/index.html
deleted file mode 100644
index 8b5100c682..0000000000
--- a/examples/hierarchical-diagrams-js/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/hierarchical-diagrams-js/package.json b/examples/hierarchical-diagrams-js/package.json
deleted file mode 100644
index acdf4b621d..0000000000
--- a/examples/hierarchical-diagrams-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-hierarchical-diagrams-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/hierarchical-diagrams-js/src/main.js b/examples/hierarchical-diagrams-js/src/main.js
deleted file mode 100644
index 82c8f08362..0000000000
--- a/examples/hierarchical-diagrams-js/src/main.js
+++ /dev/null
@@ -1,216 +0,0 @@
-import { g, dia, shapes, highlighters } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const highlighterId = 'embedding';
-
-const highlighterOptions = {
- padding: 2,
- attrs: {
- 'stroke-width': 3,
- stroke: '#7c68fc'
- }
-};
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 1,
- drawGrid: { name: 'mesh' },
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- embeddingMode: true,
- frontParentOnly: false,
- clickThreshold: 10,
- highlighting: {
- embedding: {
- name: 'mask',
- options: highlighterOptions
- }
- },
- validateEmbedding: (childView, parentView) => isContainer(parentView.model)
-});
-
-paperContainer.appendChild(paper.el);
-
-// Elements
-
-const r1 = new shapes.standard.Rectangle({
- position: { x: 100, y: 100 },
- size: { width: 200, height: 100 },
- z: -1,
- attrs: {
- body: {
- stroke: '#999',
- fill: '#f5f5f5'
- }
- }
-});
-
-r1.addTo(graph);
-
-const r2 = r1.clone().set({
- position: { x: 400, y: 400 }
-});
-
-r2.addTo(graph);
-
-const c1 = new shapes.standard.Circle({
- position: { x: 100, y: 400 },
- size: { width: 50, height: 50 }
-});
-
-c1.addTo(graph);
-
-const c2 = c1.clone().set({
- position: { x: 400, y: 100 }
-});
-
-c2.addTo(graph);
-
-const c3 = c1.clone().set({
- position: { x: 450, y: 150 }
-});
-
-c3.addTo(graph);
-
-// Events
-
-paper.on('element:pointermove', function(elementView, evt, x, y) {
- const element = elementView.model;
- if (!isContainer(element)) return;
-
- // The elementView is a container.
-
- const elementsUnder = getElementsUnderElement(paper, element);
- let found = false;
- if (!elementsUnder.find((el) => isContainer(el))) {
- // There is no other container under the elementView
- found = getNewEmbeds(elementsUnder, element).length > 0;
- }
-
- elementView.el.style.opacity = 0.7;
-
- if (found) {
- // and position it over elements that could be
- // embedded into the elementView
- highlighters.mask.add(
- elementView,
- 'body',
- highlighterId,
- highlighterOptions
- );
- } else {
- // There is no element under the elementView
- // that could be embedded to it
- highlighters.mask.remove(elementView, highlighterId);
- }
-});
-
-paper.on('element:pointerup', function(elementView, evt, x, y) {
- const element = elementView.model;
- const elementsUnder = getElementsUnderElement(paper, element);
- const parent = elementsUnder.findLast((el) => isContainer(el));
-
- if (!isContainer(element)) {
- // The elementView is not a container
- if (parent) {
- // If an element is embedded into another we make sure
- // the container is large enough to contain all the embeds
- resizeContainer(graph, parent);
- }
- return;
- }
-
- // The elementView is a container
-
- element.set('z', -1);
- elementView.el.style.opacity = '';
- highlighters.mask.remove(elementView, highlighterId);
-
- if (parent) {
- // The elementView was embedded into another container
- if (elementsUnder.length > 1) {
- // The container has already children and some of them
- // are located under the elementView.
- // Let's make sure none of the children stays under
- // elementView
- layoutEmbeds(graph, parent);
- }
- // If an element is embedded into another we make sure
- // the container is large enough to contain all the embeds
- resizeContainer(graph, parent);
- return;
- }
-
- // The elementView has not been embedded
- // We check the elements under the elementView which are not
- // containers and embed them into elementView.
- const newEmbeds = getNewEmbeds(elementsUnder, element);
- if (newEmbeds.length > 0) {
- element.embed(newEmbeds);
- resizeContainer(graph, element);
- }
-});
-
-paper.on('element:pointerdblclick', (elementView) => {
- const element = elementView.model;
- if (!isContainer(element)) return;
- resizeContainer(graph, element, false);
-});
-
-// Functions
-
-function isContainer(element) {
- return element.get('type') === 'standard.Rectangle';
-}
-
-function resizeContainer(graph, container, increaseOnly = true, padding = 20) {
- const embeds = container.getEmbeddedCells();
- const currentBBox = container.getBBox();
- let bbox;
- if (embeds.length === 0) {
- bbox = new g.Rect(currentBBox.x, currentBBox.y, 200, 100);
- } else {
- bbox = graph.getCellsBBox(embeds).inflate(padding);
- if (increaseOnly) {
- bbox = bbox.union(currentBBox);
- }
- }
- container.position(bbox.x, bbox.y);
- container.resize(bbox.width, bbox.height);
- const parent = container.getParentCell();
- if (parent) {
- resizeContainer(graph, parent, increaseOnly, padding);
- }
-}
-
-function layoutEmbeds(graph, container, gap = 10) {
- let x = gap;
- container.getEmbeddedCells().forEach((el) => {
- el.position(x, gap, { deep: true, parentRelative: true });
- x += el.size().width + gap;
- });
-}
-
-function getElementsUnderElement(paper, element) {
- const { model: graph } = paper;
- return graph.findModelsUnderElement(element, {
- searchBy: paper.options.findParentBy
- });
-}
-
-function getNewEmbeds(elementsUnder, element) {
- if (element.isEmbedded()) return [];
- return elementsUnder.filter((el) => {
- if (el.isEmbedded()) return false;
- return true;
- });
-}
diff --git a/examples/hierarchical-diagrams-js/src/styles.css b/examples/hierarchical-diagrams-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/hierarchical-diagrams-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/highlighterview-update-attribute-js/README.md b/examples/highlighterview-update-attribute-js/README.md
deleted file mode 100644
index 74ce80fa07..0000000000
--- a/examples/highlighterview-update-attribute-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: HighlighterView Update Attribute
-
-Need to update the appearance of a highlighter based on some input value? In the following demo, the highlighter is updated any time the range input value is adjusted. The available stock is displayed as a number. When no stock is available, more unique attributes are displayed.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/highlighterview-update-attribute-js/assets/jointjs-logo-black.svg b/examples/highlighterview-update-attribute-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/highlighterview-update-attribute-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/highlighterview-update-attribute-js/index.html b/examples/highlighterview-update-attribute-js/index.html
deleted file mode 100644
index b762b6e756..0000000000
--- a/examples/highlighterview-update-attribute-js/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/highlighterview-update-attribute-js/package.json b/examples/highlighterview-update-attribute-js/package.json
deleted file mode 100644
index 6d5ff8e80c..0000000000
--- a/examples/highlighterview-update-attribute-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-highlighterview-update-attribute-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/highlighterview-update-attribute-js/src/main.js b/examples/highlighterview-update-attribute-js/src/main.js
deleted file mode 100644
index ee2d9239e1..0000000000
--- a/examples/highlighterview-update-attribute-js/src/main.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import { dia, shapes } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-function setCounterValue(value) {
- counterValueSpan.innerText = value;
- counterRange.value = value;
- graph.getElements().forEach((element) => {
- element.set('counter', value);
- });
-}
-
-const defaultCounterVal = 1;
-const counterValueSpan = document.querySelector('#counter-value');
-const counterRange = document.querySelector('#counter-range');
-setCounterValue(defaultCounterVal);
-
-counterRange.addEventListener('input', ({ target: { value }}) =>
- setCounterValue(value)
-);
-
-const color = '#0057FF';
-const errorColor = '#FF0000';
-
-const CounterHighlighter = dia.HighlighterView.extend({
- UPDATE_ATTRIBUTES: ['counter'],
- tagName: 'g',
- children: [
- {
- tagName: 'rect',
- selector: 'background',
- attributes: {
- x: -10,
- y: -10,
- rx: 10,
- ry: 10,
- height: 20,
- 'stroke-width': 0
- }
- },
- {
- tagName: 'text',
- selector: 'label',
- attributes: {
- x: 0,
- y: '.3em',
- fill: '#ffffff',
- 'font-size': 11,
- 'font-family': 'monospace'
- }
- }
- ],
- highlight: function(cellView) {
- this.renderChildren();
- const { background, label } = this.childNodes;
- const { model } = cellView;
- const counter = model.get('counter');
- const body = cellView.findNode('body');
- if (counter == 0) {
- background.setAttribute('width', 100);
- background.setAttribute('fill', errorColor);
- label.setAttribute('text-anchor', 'start');
- label.textContent = 'Out of Stock';
- // Override the stroke color of the cellView body using CSS.
- body.style.stroke = errorColor;
- } else {
- background.setAttribute('width', 20);
- background.setAttribute('fill', color);
- label.setAttribute('text-anchor', 'middle');
- label.textContent = counter;
- // Reset the stroke color of the cellView body.
- // The color defined on the model will be used.
- body.style.stroke = '';
- }
- }
-});
-
-const rect = new shapes.standard.Rectangle({
- size: { width: 100, height: 100 },
- position: { x: 100, y: 100 },
- counter: defaultCounterVal,
- attrs: {
- body: {
- strokeWidth: 4
- }
- }
-});
-
-rect.addTo(graph);
-
-CounterHighlighter.add(rect.findView(paper), 'root', 'links');
diff --git a/examples/highlighterview-update-attribute-js/src/styles.css b/examples/highlighterview-update-attribute-js/src/styles.css
deleted file mode 100644
index a8120ba113..0000000000
--- a/examples/highlighterview-update-attribute-js/src/styles.css
+++ /dev/null
@@ -1,37 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
-
-#counter-value {
- width: 32px;
-}
-
-#counter-control {
- width: 200px;
- height: 50px;
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- z-index: 1;
- top: 0;
- left: 50%;
- transform: translateX(-50%);
- color: black;
- background-color: rgba(0, 0, 0, 0.2);
-}
diff --git a/examples/hover-element-connect-tool-js/README.md b/examples/hover-element-connect-tool-js/README.md
deleted file mode 100644
index b26c83b766..0000000000
--- a/examples/hover-element-connect-tool-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Hover Element Connect Tool
-
-Need to create links from elements in a drag & drop fashion, but only show the connect tool when a user hovers an element path? When the user hovers an invisible track path on an element, the tool appears at the point where the user moves the mouse.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/hover-element-connect-tool-js/assets/jointjs-logo-black.svg b/examples/hover-element-connect-tool-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/hover-element-connect-tool-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/hover-element-connect-tool-js/index.html b/examples/hover-element-connect-tool-js/index.html
deleted file mode 100644
index 14282d878e..0000000000
--- a/examples/hover-element-connect-tool-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/hover-element-connect-tool-js/package.json b/examples/hover-element-connect-tool-js/package.json
deleted file mode 100644
index 0493e20ff1..0000000000
--- a/examples/hover-element-connect-tool-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-hover-element-connect-tool-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/hover-element-connect-tool-js/src/main.js b/examples/hover-element-connect-tool-js/src/main.js
deleted file mode 100644
index 9254354e57..0000000000
--- a/examples/hover-element-connect-tool-js/src/main.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { dia, shapes, elementTools, connectionStrategies } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- defaultLink: () => new shapes.standard.Link(),
- validateConnection: (srcView, _, tgtView) => {
- const src = srcView.model;
- const tgt = tgtView.model;
- if (src.isLink() || tgt.isLink()) return false;
- if (src === tgt) return false;
- return true;
- },
- defaultConnectionPoint: { name: 'anchor' },
- connectionStrategy: (end, view, magnet, coords) => {
- const bbox = view.getNodeUnrotatedBBox(magnet);
- const p = bbox.pointNearestToPoint(coords);
- return connectionStrategies.pinRelative(end, view, magnet, p);
- },
- snapLinks: { radius: 10 },
- linkPinning: false
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const rectangle = new shapes.standard.Rectangle();
-rectangle.resize(100, 100);
-rectangle.position(200, 100);
-rectangle.addTo(graph);
-
-const tools = new dia.ToolsView({
- tools: [new elementTools.HoverConnect()]
-});
-
-rectangle.findView(paper).addTools(tools);
-
-const rectangle2 = new shapes.standard.Rectangle();
-rectangle2.resize(100, 100);
-rectangle2.position(400, 100);
-rectangle2.addTo(graph);
-
-const tools2 = new dia.ToolsView({
- tools: [new elementTools.HoverConnect()]
-});
-
-rectangle2.findView(paper).addTools(tools2);
diff --git a/examples/hover-element-connect-tool-js/src/styles.css b/examples/hover-element-connect-tool-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/hover-element-connect-tool-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/hover-link-connect-tool-js/README.md b/examples/hover-link-connect-tool-js/README.md
deleted file mode 100644
index 3aa5c25153..0000000000
--- a/examples/hover-link-connect-tool-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Hover Link Connect Tool
-
-Need to create links from other links in a drag & drop fashion, but only show the connect tool when a user hovers a link path? When the user hovers an invisible track path on a link, the tool appears at the point where the user moves the mouse.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/hover-link-connect-tool-js/assets/jointjs-logo-black.svg b/examples/hover-link-connect-tool-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/hover-link-connect-tool-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/hover-link-connect-tool-js/index.html b/examples/hover-link-connect-tool-js/index.html
deleted file mode 100644
index 35949501f2..0000000000
--- a/examples/hover-link-connect-tool-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/hover-link-connect-tool-js/package.json b/examples/hover-link-connect-tool-js/package.json
deleted file mode 100644
index a3c41a37e1..0000000000
--- a/examples/hover-link-connect-tool-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-hover-link-connect-tool-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/hover-link-connect-tool-js/src/main.js b/examples/hover-link-connect-tool-js/src/main.js
deleted file mode 100644
index c14907f774..0000000000
--- a/examples/hover-link-connect-tool-js/src/main.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { dia, shapes, linkTools, connectionStrategies } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- defaultLink: () => new shapes.standard.Link(),
- connectionStrategy: connectionStrategies.pinAbsolute
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const rectangle = new shapes.standard.Rectangle();
-rectangle.resize(100, 100);
-rectangle.position(300, 100);
-rectangle.addTo(graph);
-
-const link = new shapes.standard.Link();
-link.source({ x: 100, y: 100 });
-link.target({ x: 400, y: 50 });
-link.vertices([{ x: 300, y: 50 }]);
-link.addTo(graph);
-
-const tools = new dia.ToolsView({
- tools: [
- new linkTools.HoverConnect(),
- new linkTools.TargetArrowhead(),
- new linkTools.SourceArrowhead(),
- new linkTools.Vertices({ vertexAdding: false })
- ]
-});
-
-link.findView(paper).addTools(tools);
diff --git a/examples/hover-link-connect-tool-js/src/styles.css b/examples/hover-link-connect-tool-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/hover-link-connect-tool-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/isometric/.gitignore b/examples/isometric/.gitignore
deleted file mode 100644
index 69c575d17f..0000000000
--- a/examples/isometric/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/
-dist/
-node_modules/
diff --git a/examples/isometric/README.md b/examples/isometric/README.md
deleted file mode 100644
index b2cfe996e2..0000000000
--- a/examples/isometric/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# JointJS Isometric Demo
-
-## 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-2026 client IO
diff --git a/examples/isometric/assets/jj-logo.svg b/examples/isometric/assets/jj-logo.svg
deleted file mode 100644
index 6a6c912fdd..0000000000
--- a/examples/isometric/assets/jj-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/examples/isometric/assets/router-icon.svg b/examples/isometric/assets/router-icon.svg
deleted file mode 100644
index 00c9e79fcb..0000000000
--- a/examples/isometric/assets/router-icon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/isometric/assets/switch-icon.svg b/examples/isometric/assets/switch-icon.svg
deleted file mode 100644
index 0736f45947..0000000000
--- a/examples/isometric/assets/switch-icon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/isometric/index.html b/examples/isometric/index.html
deleted file mode 100644
index 59ee89a3a2..0000000000
--- a/examples/isometric/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
-
-
-
- 
-
-
-
-
diff --git a/examples/isometric/package.json b/examples/isometric/package.json
deleted file mode 100644
index b215f8725b..0000000000
--- a/examples/isometric/package.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
- "name": "@joint/demo-isometric",
- "version": "4.2.4",
- "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:^",
- "@joint/decorators": "workspace:^"
- },
- "devDependencies": {
- "css-loader": "^6.8.1",
- "raw-loader": "^4.0.2",
- "style-loader": "^3.3.3",
- "ts-loader": "^9.2.5",
- "typescript": "5.8.2",
- "webpack": "5.98.0",
- "webpack-cli": "6.0.1",
- "webpack-dev-server": "5.2.0"
- },
- "volta": {
- "node": "22.14.0",
- "npm": "11.2.0",
- "yarn": "4.7.0"
- }
-}
diff --git a/examples/isometric/src/eslint.config.mjs b/examples/isometric/src/eslint.config.mjs
deleted file mode 100644
index 16d02c115e..0000000000
--- a/examples/isometric/src/eslint.config.mjs
+++ /dev/null
@@ -1,30 +0,0 @@
-import { defineConfig } from 'eslint/config';
-import tsParser from '@typescript-eslint/parser';
-import js from '@eslint/js';
-
-export default defineConfig([
- {
- ignores: ['**/node_modules', 'scripts', 'dist', 'build'],
- files: ['**/*.js', '**/*.mjs'],
- extends: [js.configs.recommended],
- languageOptions: {
- parser: tsParser,
- parserOptions: {
- ecmaVersion: 2022,
- sourceType: 'module'
- }
- },
- rules: {
- 'indent': ['error', 4, { 'SwitchCase': 1 }],
- 'space-before-function-paren': ['error', 'never'],
- 'no-console': ['error', { 'allow': ['warn'] }],
- 'object-curly-spacing': ['error', 'always', { 'objectsInObjects': false }],
- 'no-constant-condition': ['off'],
- 'no-undef': ['error'],
- 'no-unused-vars': ['error', { 'vars': 'local', 'args': 'none' }],
- 'quotes': ['error', 'single'],
- 'semi': ['error', 'always'],
- 'no-prototype-builtins': ['off']
- }
- }
-]);
diff --git a/examples/isometric/src/index.ts b/examples/isometric/src/index.ts
deleted file mode 100644
index edc6f3cac2..0000000000
--- a/examples/isometric/src/index.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-import { g, dia } from '@joint/core';
-import Obstacles from './obstacles';
-import IsometricShape, { View } from './shapes/isometric-shape';
-import { Computer, Database, ActiveDirectory, User, Firewall, Switch, Router, Link, cellNamespace } from './shapes';
-import { sortElements, drawGrid, switchView } from './utils';
-import { GRID_SIZE, GRID_COUNT, HIGHLIGHT_COLOR, SCALE, ISOMETRIC_SCALE } from './theme';
-
-import '../style.css';
-
-const canvasEl = document.getElementById('canvas') as HTMLDivElement;
-const buttonEl = document.getElementById('toggle') as HTMLButtonElement;
-
-let currentView = View.Isometric;
-let currentCell: IsometricShape | Link = null;
-
-const graph = new dia.Graph({}, { cellNamespace });
-
-// Obstacles listen to changes in the graph and update their internal state
-const obstacles = new Obstacles(graph);
-graph.set('obstacles', obstacles);
-
-const paper = new dia.Paper({
- el: canvasEl,
- model: graph,
- // Prevent the elements from being dragged outside of the paper
- // and from being dropped on top of other elements
- restrictTranslate: (elementView) => {
- const element = elementView.model as IsometricShape;
- const { width, height } = element.size();
- // a little memory allocation optimization
- // we don't need to create a new rect on every call, we can reuse the same one
- const newBBox = new g.Rect();
- return function(x, y) {
- newBBox.update(x , y, width, height);
- return obstacles.isFree(newBBox, element.cid)
- ? { x, y }
- : element.position();
- }
- },
- gridSize: GRID_SIZE,
- async: true,
- autoFreeze: true,
- defaultConnectionPoint: {
- name: 'boundary',
- args: {
- offset: GRID_SIZE / 2,
- // It's important to set selector to false, and determine the magnet
- // with `magnet-selector` attribute on the element.
- // Otherwise, the element bounding box would contain the isometric part of the element
- // and the connection would be created to the wrong point.
- selector: false
- }
- },
- defaultRouter: {
- name: 'manhattan',
- args: {
- step: GRID_SIZE / 2,
- startDirections: ['top'],
- endDirections: ['bottom'],
- // Use the existing obstacle detection to determine if the point is an obstacle
- // By default, the router would need to build its own obstacles map
- isPointObstacle: (point: g.Point) => {
- const x = Math.floor(point.x / GRID_SIZE) * GRID_SIZE - GRID_SIZE;
- const y = Math.floor(point.y / GRID_SIZE) * GRID_SIZE - GRID_SIZE;
- const rect = new g.Rect(x, y, GRID_SIZE * 3, GRID_SIZE * 2);
- return !obstacles.isFree(rect);
- }
- }
- },
- defaultLink: () => new Link(),
- linkPinning: false,
- overflow: true,
- snapLinks: { radius: GRID_SIZE / 2 },
- cellViewNamespace: cellNamespace,
- defaultAnchor: { name: 'modelCenter' },
- highlighting: {
- default: {
- name: 'mask',
- options: {
- layer: dia.Paper.Layers.BACK,
- attrs: {
- 'stroke': HIGHLIGHT_COLOR,
- 'stroke-width': 3
- }
- }
- }
- }
-});
-
-drawGrid(paper, GRID_COUNT, GRID_SIZE);
-
-// Set the paper size to fit the transformed isometric grid
-paper.setDimensions(
- 2 * GRID_SIZE * GRID_COUNT * SCALE * ISOMETRIC_SCALE + (2 * GRID_SIZE),
- GRID_SIZE * GRID_COUNT * SCALE + (2 * GRID_SIZE)
-);
-
-// Generate example graph
-
-const c1 = new Computer().position(40, 140).attr('label/text', 'Computer 1');
-const c2 = new Computer().position(180, 140).attr('label/text', 'Computer 2');
-const db1 = new Database().position(100, 20);
-const ad1 = new ActiveDirectory().position(100, 260);
-const admin = new User().position(100, 460).attr('label/text', 'Admin');
-const user = new User().position(280, 460);
-const firewall = new Firewall().position(260, 380);
-const switchEl = new Switch().position(400, 160);
-const router = new Router().position(400, 100);
-
-const l1 = new Link().source(ad1).target(c1);
-const l2 = l1.clone().target(c2);
-const l3 = new Link().source(c1).target(db1);
-const l4 = l3.clone().source(c2);
-const l5 = new Link().source(user).target(firewall);
-const l6 = new Link().source(firewall).target(ad1);
-const l7 = new Link().source(admin).target(ad1);
-
-graph.resetCells([c1, c2, db1, ad1, l1, l2, l3, l4, admin, l5, firewall, l6, user, l7, switchEl, router]);
-
-// Sort cells on position and size change
-
-graph.on('change:position change:size', () => {
- if (currentView !== View.Isometric) return;
- sortElements(graph);
-});
-
-// Switch between isometric and 2D view
-
-buttonEl.addEventListener('click', () => {
- currentView = (currentView === View.Isometric) ? View.TwoDimensional : View.Isometric;
- switchView(paper, currentView, currentCell);
-});
-
-switchView(paper, currentView, currentCell);
-
-// Show/Hide tools on cell pointer events
-
-paper.on('link:pointerup', (linkView: dia.LinkView) => {
- const link = linkView.model as Link;
- paper.removeTools();
- link.addTools(paper);
- currentCell = link;
-});
-
-paper.on('element:pointerup', (elementView: dia.ElementView) => {
- const shape = elementView.model as IsometricShape;
- paper.removeTools();
- shape.addTools(paper, currentView);
- currentCell = shape;
-});
-
-paper.on('blank:pointerdown', () => {
- paper.removeTools();
- currentCell = null;
-});
-
-// Setup scrolling
-
-paper.el.style.cursor = 'grab';
-
-paper.on('blank:pointerdown', (evt) => {
- evt.data = {
- scrollX: window.scrollX, clientX: evt.clientX,
- scrollY: window.scrollY, clientY: evt.clientY
- };
- paper.el.style.cursor = 'grabbing';
-});
-
-paper.on('blank:pointermove', (evt) => {
- window.scroll(evt.data.scrollX + (evt.data.clientX - evt.clientX), evt.data.scrollY + (evt.data.clientY - evt.clientY));
-});
-
-paper.on('blank:pointerup', () => {
- paper.el.style.cursor = 'grab';
-});
diff --git a/examples/isometric/src/obstacles.ts b/examples/isometric/src/obstacles.ts
deleted file mode 100644
index 80716a9f25..0000000000
--- a/examples/isometric/src/obstacles.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { g, dia, mvc } from '@joint/core';
-import { GRID_COUNT, GRID_SIZE } from './theme';
-
-// Simplified version of obstacle detection.
-// It assumes that the grid is always square, which is true in our case
-// It assumes that obstacles are always squares, which is true in our case
-// It assumes that obstacles never overlap, which is true in our case
-export default class Obstacles {
-
- step: number = GRID_SIZE;
- size: number = GRID_COUNT;
- grid: string[][] = [];
- graph: dia.Graph;
- listener: mvc.Listener<[]>;
-
- constructor(graph: dia.Graph) {
- this.graph = graph;
- const listener = new mvc.Listener();
- listener.listenTo(graph, 'reset', () => this.update());
- listener.listenTo(graph, 'add', (cell) => this.addCell(cell));
- listener.listenTo(graph, 'remove', (cell) => this.removeCell(cell));
- listener.listenTo(graph, 'change:position', (cell) => this.updateCellPosition(cell));
- listener.listenTo(graph, 'change:size', (cell) => this.updateCellSize(cell));
- this.reset();
- }
-
- protected getCellArea(bbox: g.Rect): g.Rect {
- const { step } = this;
- const x = Math.floor(bbox.x / step);
- const y = Math.floor(bbox.y / step);
- const width = Math.ceil(bbox.width / step);
- const height = Math.ceil(bbox.height / step);
- return new g.Rect({ x, y, width, height });
- }
-
- protected toggleArea(area: g.Rect, value: string) {
- const { x, y, width, height } = area;
- for (let i = Math.max(0, x); i < Math.min(x + width, this.size); i++) {
- for (let j = Math.max(0, y); j < Math.min(y + height, this.size); j++) {
- this.grid[i][j] = value;
- }
- }
- }
-
- protected addCell(cell: dia.Cell) {
- if (cell.isLink()) return;
- this.toggleArea(this.getCellArea(cell.getBBox()), cell.cid);
- }
-
- protected removeCell(cell: dia.Cell) {
- if (cell.isLink()) return;
- this.toggleArea(this.getCellArea(cell.getBBox()), null);
- }
-
- protected updateCellPosition(cell: dia.Cell) {
- if (cell.isLink()) return;
- const prevPosition = cell.previous('position');
- const prevBBox = cell.getBBox();
- prevBBox.x = prevPosition.x;
- prevBBox.y = prevPosition.y;
- this.toggleArea(this.getCellArea(prevBBox), null);
- this.toggleArea(this.getCellArea(cell.getBBox()), cell.cid);
- }
-
- protected updateCellSize(cell: dia.Cell) {
- if (cell.isLink()) return;
- const prevSize = cell.previous('size');
- const prevBBox = cell.getBBox();
- prevBBox.width = prevSize.width;
- prevBBox.height = prevSize.height;
- this.toggleArea(this.getCellArea(prevBBox), null);
- this.toggleArea(this.getCellArea(cell.getBBox()), cell.cid);
- }
-
- protected reset() {
- this.grid = Array.from({ length: this.size }, () => Array.from({ length: this.size }, () => null));
- }
-
- // Is the given bounding box free of obstacles?
- // If key is given, the occupied cells are ignored if they belong to the same cell key
- isFree(bbox: g.Rect, key: string = null): boolean {
- const area = this.getCellArea(bbox);
- const { x, y, width, height } = area;
- for (let i = x; i < x + width; i++) {
- for (let j = y; j < y + height; j++) {
- // check if the cell is out of the grid
- if (i < 0 || i >= this.size || j < 0 || j >= this.size) return false;
- // check if the cell is occupied
- const value = this.grid[i][j];
- if (value && value !== key) return false;
- }
- }
- return true;
- }
-
- // Update the whole grid based on the current graph
- update() {
- this.reset();
- this.graph.getElements().forEach((cell) => this.addCell(cell));
- }
-
- // Destroy the obstacles instance
- destroy() {
- this.listener.stopListening();
- }
-}
diff --git a/examples/isometric/src/shapes/active-directory/active-directory.svg b/examples/isometric/src/shapes/active-directory/active-directory.svg
deleted file mode 100644
index 38618a3882..0000000000
--- a/examples/isometric/src/shapes/active-directory/active-directory.svg
+++ /dev/null
@@ -1,51 +0,0 @@
-Embedded teams remain grouped while joint-layout-msagl routes cross-cutting work around - department bounds.
-Left → Right layering · Rectilinear routing · 115px node spacing
-Adjust the sliders to see joint-layout-msagl update the layout in real time.
-
-
-
-
-
-
-
diff --git a/examples/link-connect-tool-js/package.json b/examples/link-connect-tool-js/package.json
deleted file mode 100644
index c1c71aa92d..0000000000
--- a/examples/link-connect-tool-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-link-connect-tool-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/link-connect-tool-js/src/main.js b/examples/link-connect-tool-js/src/main.js
deleted file mode 100644
index c6f40f9a55..0000000000
--- a/examples/link-connect-tool-js/src/main.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { dia, shapes, linkTools, connectionStrategies } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- drawGrid: { name: 'mesh' },
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- defaultLink: () => new shapes.standard.Link(),
- connectionStrategy: connectionStrategies.pinAbsolute
-});
-
-paperContainer.appendChild(paper.el);
-
-const rectangle = new shapes.standard.Rectangle();
-rectangle.resize(100, 100);
-rectangle.position(300, 100);
-rectangle.addTo(graph);
-
-const link = new shapes.standard.Link();
-link.source({ x: 100, y: 100 });
-link.target({ x: 400, y: 50 });
-link.addTo(graph);
-
-function getMarkup(angle = 0) {
- return [
- {
- tagName: 'circle',
- selector: 'button',
- attributes: {
- r: 7,
- fill: '#4666E5',
- cursor: 'pointer'
- }
- },
- {
- tagName: 'path',
- selector: 'icon',
- attributes: {
- transform: `rotate(${angle})`,
- d: 'M -4 -1 L 0 -1 L 0 -4 L 4 0 L 0 4 0 1 -4 1 z',
- fill: '#FFFFFF',
- stroke: 'none',
- 'stroke-width': 2,
- 'pointer-events': 'none'
- }
- }
- ];
-}
-
-const connect1 = new linkTools.Connect({
- distance: '20%',
- markup: getMarkup(0)
-});
-
-const connect2 = new linkTools.Connect({
- distance: '50%',
- markup: getMarkup(0)
-});
-
-const connect3 = new linkTools.Connect({
- distance: '80%',
- markup: getMarkup(0)
-});
-
-const tools = new dia.ToolsView({
- tools: [connect1, connect2, connect3]
-});
-
-link.findView(paper).addTools(tools);
diff --git a/examples/link-connect-tool-js/src/styles.css b/examples/link-connect-tool-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/link-connect-tool-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/list/.gitignore b/examples/list/.gitignore
deleted file mode 100644
index 69c575d17f..0000000000
--- a/examples/list/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/
-dist/
-node_modules/
diff --git a/examples/list/README.md b/examples/list/README.md
deleted file mode 100644
index 7b1f969047..0000000000
--- a/examples/list/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# JointJS List Demo
-
-## 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-2026 client IO
diff --git a/examples/list/index.html b/examples/list/index.html
deleted file mode 100644
index ba4eaa12de..0000000000
--- a/examples/list/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
-
-
- 
-
-
-
-
-
-
diff --git a/examples/microsoft-adaptive-cards-js/package.json b/examples/microsoft-adaptive-cards-js/package.json
deleted file mode 100644
index e2ca6aafbb..0000000000
--- a/examples/microsoft-adaptive-cards-js/package.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
- "name": "@joint/demo-microsoft-adaptive-cards-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^",
- "adaptivecards": "^3.0.5",
- "swiper": "^12.1.0"
- }
-}
diff --git a/examples/microsoft-adaptive-cards-js/src/main.js b/examples/microsoft-adaptive-cards-js/src/main.js
deleted file mode 100644
index 6e42806503..0000000000
--- a/examples/microsoft-adaptive-cards-js/src/main.js
+++ /dev/null
@@ -1,2206 +0,0 @@
-
-import { shapes as defaultShapes, dia } from '@joint/core';
-import { AdaptiveCard, HostConfig, SubmitAction, OpenUrlAction } from 'adaptivecards';
-import './styles.css';
-
-const shapes = { ...defaultShapes };
-
-const AdaptiveCardModel = dia.Element.define('AdaptiveCardModel', {
- size: { width: 300, height: 0 },
- z: 1,
- template: null,
- border: '2px solid #ddd',
-});
-shapes.AdaptiveCardModel = AdaptiveCardModel;
-
-const ACFlags = {
- // RenderView is used to render the adaptive card inside the foreign object
- RenderView: '@render-view',
- // UpdateView is used to update the size of the foreign object
- // and the color of border
- UpdateView: '@update-view',
- // TransformView is used to position and rotate the view
- TransformView: '@transform-view',
- // MeasureView is used to measure the view and update
- // the size of the model
- MeasureView: '@measure-view'
-};
-
-// The `AdaptiveCardModelView` is a custom view for the `AdaptiveCardModel` model.
-// It is responsible for rendering the adaptive card inside the foreign object.
-// It is located in the same namespace as the model so that it is automatically
-// used when the model is added to the graph.
-// The convention is to name the view as `[-model-name-]View`.
-shapes.AdaptiveCardModelView = dia.ElementView.extend({
-
- // The root of the element view is the
-
-
-
-
-
-
diff --git a/examples/nodejs-milestones-timeline-js/package.json b/examples/nodejs-milestones-timeline-js/package.json
deleted file mode 100644
index 510f7178c0..0000000000
--- a/examples/nodejs-milestones-timeline-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-nodejs-milestones-timeline-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/nodejs-milestones-timeline-js/src/main.js b/examples/nodejs-milestones-timeline-js/src/main.js
deleted file mode 100644
index ea6f35d547..0000000000
--- a/examples/nodejs-milestones-timeline-js/src/main.js
+++ /dev/null
@@ -1,434 +0,0 @@
-import { dia, util, shapes as defaultShapes } from '@joint/core';
-import './styles.css';
-
-const chevronCount = 40;
-const chevronHeight = 8;
-const chevronWidth = 3;
-const timelineColor = '#fff';
-const backgroundColor = '#444';
-const padding = 10;
-const gap = 70;
-const timelineY = 300;
-const timelineXMin = 140;
-const timelineXMax = 1100;
-
-const timelineEventJSONMarkup = util.svg`
-
-
-
-
-
-
-
diff --git a/examples/optional-ports-js/package.json b/examples/optional-ports-js/package.json
deleted file mode 100644
index 024dc5c95e..0000000000
--- a/examples/optional-ports-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-optional-ports-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/optional-ports-js/src/main.js b/examples/optional-ports-js/src/main.js
deleted file mode 100644
index ba32867e8b..0000000000
--- a/examples/optional-ports-js/src/main.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import { dia, shapes } from '@joint/core';
-import './styles.scss';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- drawGrid: { name: 'mesh' },
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- defaultLink: () => new shapes.standard.Link(),
- validateConnection: (sv, _sm, tv, _tm) => sv !== tv,
- linkPinning: false,
- defaultAnchor: { name: 'perpendicular' }
-});
-
-paperContainer.appendChild(paper.el);
-
-const PORT_WIDTH = 30;
-const PORT_HEIGHT = 20;
-const PORT_GAP = 20;
-
-const el1 = new shapes.standard.Rectangle({
- position: {
- x: 50,
- y: 50
- },
- size: {
- width: 400,
- height: 90
- },
- attrs: {
- root: {
- magnet: false
- },
- body: {
- strokeWidth: 2,
- fill: '#555555'
- },
- label: {
- fontWeight: 'bold',
- fontSize: 20,
- fontFamily: 'sans-serif',
- fill: '#ffffff',
- stroke: '#333333',
- strokeWidth: 5,
- paintOrder: 'stroke',
- text: 'Optional Ports'
- }
- },
- ports: {
- groups: {
- digits: {
- markup: [
- {
- tagName: 'rect',
- selector: 'portBody'
- },
- {
- tagName: 'text',
- selector: 'portLabel'
- }
- ],
- attrs: {
- portBody: {
- x: 0,
- y: -PORT_HEIGHT / 2,
- width: 'calc(w)',
- height: 'calc(h)',
- fill: '#ffffff',
- stroke: '#333333',
- strokeWidth: 2,
- magnet: 'active',
- cursor: 'grab'
- },
- portLabel: {
- x: 'calc(0.5*w)',
- textAnchor: 'middle',
- textVerticalAnchor: 'middle',
- pointerEvents: 'none',
- fontWeight: 'bold',
- fontSize: 12,
- fontFamily: 'sans-serif'
- }
- },
- size: { width: PORT_WIDTH, height: PORT_HEIGHT },
- position: 'absolute'
- }
- },
- items: []
- }
-});
-
-const el2 = new shapes.standard.Rectangle({
- position: {
- x: 50,
- y: 300
- },
- size: {
- width: 400,
- height: 90
- }
-});
-
-const l1 = new shapes.standard.Link({
- source: { id: el1.id, port: '1' },
- target: { id: el2.id }
-});
-
-const l2 = new shapes.standard.Link({
- source: { id: el1.id, port: '2' },
- target: { id: el2.id }
-});
-
-graph.addCells([el1, el2, l1, l2]);
-
-function setPorts(el, digits) {
- let width = 0;
- // Optional ports
- const digitPorts = digits.map((digit, index) => {
- const x = index * (PORT_WIDTH + PORT_GAP);
- width = x + PORT_WIDTH;
- return {
- id: `${digit}`,
- group: 'digits',
- attrs: {
- portLabel: {
- text: `${digit}`
- }
- },
- args: {
- x,
- y: '100%'
- }
- };
- });
- if (digitPorts.length > 0) {
- width += PORT_GAP;
- }
-
- // Required port.
- const fallbackPort = {
- id: 'fallback',
- group: 'digits',
- size: { width: PORT_WIDTH * 2, height: PORT_HEIGHT },
- attrs: {
- portLabel: {
- text: 'fallback'
- }
- },
- args: {
- x: width,
- y: '100%'
- }
- };
-
- width += 2 * PORT_WIDTH;
-
- el1.prop(['ports', 'items'], [...digitPorts, fallbackPort], {
- rewrite: true
- });
- el1.prop(['size', 'width'], width);
-}
-
-// Update element from html inputs
-
-const outputPortsEl = document.getElementById('output-ports');
-outputPortsEl.addEventListener('change', () => update());
-function update() {
- const digits = [];
- Array.from(outputPortsEl.querySelectorAll('input')).forEach((input) => {
- if (input.checked) digits.push(input.name);
- });
- setPorts(el1, digits);
-}
-update();
diff --git a/examples/optional-ports-js/src/styles.scss b/examples/optional-ports-js/src/styles.scss
deleted file mode 100644
index 2efe8f147f..0000000000
--- a/examples/optional-ports-js/src/styles.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-$side_width: 200px;
-
-#paper-container {
- position: absolute;
- left: $side_width;
- top: 0;
- right: 0;
- bottom: 0;
- overflow: auto;
-}
-
-#side-container {
- position: absolute;
- left: 0;
- top: 0;
- width: $side_width;
- bottom: 0;
- overflow: auto;
- font-family: sans-serif;
-
- legend {
- background-color: #555;
- color: #fff;
- padding: 3px 6px;
- }
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/port-reordering-tool-js/README.md b/examples/port-reordering-tool-js/README.md
deleted file mode 100644
index 2f7fbe5ac9..0000000000
--- a/examples/port-reordering-tool-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Port Reordering Tool
-
-Need to support user interactions that are not part of JointJS? For example, allowing users to drag and drop ports and change their order? This can be accomplished using the custom element tool, as we have done in this demo.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/port-reordering-tool-js/assets/jointjs-logo-black.svg b/examples/port-reordering-tool-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/port-reordering-tool-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/port-reordering-tool-js/index.html b/examples/port-reordering-tool-js/index.html
deleted file mode 100644
index ae75f707f0..0000000000
--- a/examples/port-reordering-tool-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/port-reordering-tool-js/package.json b/examples/port-reordering-tool-js/package.json
deleted file mode 100644
index fcd9ac2558..0000000000
--- a/examples/port-reordering-tool-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-port-reordering-tool-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/port-reordering-tool-js/src/main.js b/examples/port-reordering-tool-js/src/main.js
deleted file mode 100644
index 836de1cff3..0000000000
--- a/examples/port-reordering-tool-js/src/main.js
+++ /dev/null
@@ -1,463 +0,0 @@
-import { V, g, dia, shapes, mvc, config } from '@joint/core';
-import './styles.css';
-
-config.layerAttribute = 'graphLayer';
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- defaultLink: () => new shapes.standard.Link({ z: -1 }),
- defaultConnectionPoint: { name: 'boundary' },
- clickThreshold: 10,
- magnetThreshold: 'onleave',
- linkPinning: false,
- validateConnection: (sourceView, _, targetView) => sourceView !== targetView,
- snapLinks: true
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const r1 = new shapes.standard.Rectangle({
- layer: 'group1',
- position: { x: 100, y: 100 },
- size: { width: 200, height: 200 },
- attrs: {
- root: {
- magnet: false
- },
- body: {
- stroke: '#333333',
- fill: '#fff',
- rx: 10,
- ry: 10
- }
- },
- portMarkup: [
- {
- tagName: 'circle',
- selector: 'portBody',
- attributes: {
- r: 10,
- fill: '#FFFFFF',
- stroke: '#333333'
- }
- }
- ],
- portLabelMarkup: [
- {
- tagName: 'rect',
- selector: 'portLabelBackground'
- },
- {
- tagName: 'text',
- selector: 'portLabel',
- attributes: {
- fill: '#333333'
- }
- }
- ],
- ports: {
- groups: {
- left: {
- position: 'left',
- label: {
- position: {
- name: 'outside',
- args: {
- offset: 30
- }
- }
- },
- attrs: {
- portLabelBackground: {
- ref: 'portLabel',
- fill: '#FFFFFF',
- fillOpacity: 0.8,
- x: 'calc(x - 2)',
- y: 'calc(y - 2)',
- width: 'calc(w + 4)',
- height: 'calc(h + 4)'
- },
- portLabel: {
- fontFamily: 'sans-serif'
- },
- portBody: {
- strokeWidth: 2,
- magnet: 'active'
- }
- }
- },
- right: {
- position: 'right',
- label: {
- position: {
- name: 'outside',
- args: {
- offset: 30
- }
- }
- },
- attrs: {
- portLabelBackground: {
- ref: 'portLabel',
- fill: '#FFFFFF',
- fillOpacity: 0.8,
- x: 'calc(x - 2)',
- y: 'calc(y - 2)',
- width: 'calc(w + 4)',
- height: 'calc(h + 4)'
- },
- portLabel: {
- fontFamily: 'sans-serif'
- },
- portBody: {
- strokeWidth: 2,
- magnet: 'active'
- }
- }
- }
- },
- items: [
- {
- id: 'p1',
- group: 'left',
- attrs: {
- portLabel: {
- text: 'Port 1'
- }
- }
- },
- {
- id: 'p2',
- group: 'left',
- attrs: {
- portLabel: {
- text: 'Port 2'
- }
- }
- },
- {
- id: 'p3',
- group: 'left',
- attrs: {
- portLabel: {
- text: 'Port 3'
- }
- }
- },
- {
- id: 'p4',
- group: 'left',
- attrs: {
- portLabel: {
- text: 'Port 4'
- }
- }
- },
- {
- id: 'out1',
- group: 'right',
- attrs: {
- portLabel: {
- text: 'Out 1'
- }
- }
- },
- {
- id: 'out2',
- group: 'right',
- attrs: {
- portLabel: {
- text: 'Out 2'
- }
- }
- },
- {
- id: 'out3',
- group: 'right',
- attrs: {
- portLabel: {
- text: 'Out 3'
- }
- }
- }
- ]
- }
-});
-
-const r2 = r1.clone().translate(400);
-const l1 = new shapes.standard.Link({ z: -1 });
-const l2 = l1.clone();
-l1.source(r1, { port: 'out2' }).target(r2, { port: 'p3' });
-l2.source(r1, { port: 'out1' }).target(r2, { port: 'p1' });
-graph.addCells([r1, r2, l1, l2]);
-
-const PortHandle = mvc.View.extend({
- tagName: 'circle',
- svgElement: true,
- className: 'port-handle',
- events: {
- mousedown: 'onPointerDown',
- touchstart: 'onPointerDown',
- dblclick: 'onDoubleClick',
- dbltap: 'onDoubleClick'
- },
- documentEvents: {
- mousemove: 'onPointerMove',
- touchmove: 'onPointerMove',
- mouseup: 'onPointerUp',
- touchend: 'onPointerUp',
- touchcancel: 'onPointerUp'
- },
- attributes: {
- r: 13,
- fill: 'transparent',
- stroke: 'gray',
- 'stroke-width': 2,
- cursor: 'grab'
- },
- position: function(x, y) {
- this.vel.attr({ cx: x, cy: y });
- },
- color: function(color) {
- this.el.style.stroke = color || this.attributes.stroke;
- },
- onPointerDown: function(evt) {
- if (this.options.guard(evt)) return;
- evt.stopPropagation();
- evt.preventDefault();
- this.options.paper.undelegateEvents();
- this.delegateDocumentEvents(null, evt.data);
- this.trigger('will-change', this, evt);
- },
- onPointerMove: function(evt) {
- this.trigger('changing', this, evt);
- },
- onDoubleClick: function(evt) {
- this.trigger('remove', this, evt);
- },
- onPointerUp: function(evt) {
- this.trigger('changed', this, evt);
- this.undelegateDocumentEvents();
- this.options.paper.delegateEvents();
- }
-});
-
-const Ports = dia.ToolView.extend({
- name: 'ports',
- options: {
- handleClass: PortHandle,
- activeColor: '#4666E5'
- },
- children: [
- {
- tagName: 'path',
- selector: 'preview',
- className: 'joint-ports-preview',
- attributes: {
- d:
- 'M -30 -5 -20 0 -30 5 M -20 -5 -10 0 -20 5 M 20 -5 10 0 20 5 M 30 -5 20 0 30 5',
- 'stroke-width': 2,
- fill: 'none'
- }
- }
- ],
- handles: null,
- onRender: function() {
- this.renderChildren();
- this.updatePreview(null);
- this.resetHandles();
- this.renderHandles();
- return this;
- },
- update: function() {
- const positions = this.getPositions();
- if (positions.length === this.handles.length) {
- this.updateHandles();
- } else {
- this.resetHandles();
- this.renderHandles();
- }
- this.updatePreview(null);
- return this;
- },
- resetHandles: function() {
- const handles = this.handles;
- this.handles = [];
- this.stopListening();
- if (!Array.isArray(handles)) return;
- for (let i = 0, n = handles.length; i < n; i++) {
- handles[i].remove();
- }
- },
- renderHandles: function() {
- const positions = this.getPositions();
- for (let i = 0, n = positions.length; i < n; i++) {
- const position = positions[i];
- const handle = new this.options.handleClass({
- index: i,
- portId: position.id,
- paper: this.paper,
- guard: (evt) => this.guard(evt)
- });
- handle.render();
- handle.position(position.x, position.y);
- this.simulateRelatedView(handle.el);
- handle.vel.appendTo(this.el);
- this.handles.push(handle);
- this.startHandleListening(handle);
- }
- },
- updateHandles: function() {
- const positions = this.getPositions();
- for (let i = 0, n = positions.length; i < n; i++) {
- const position = positions[i];
- const handle = this.handles[i];
- if (!handle) return;
- handle.position(position.x, position.y);
- }
- },
- updatePreview: function(candidateIndex) {
- const { preview } = this.childNodes;
- if (!preview) return;
- if (!Number.isFinite(candidateIndex)) {
- preview.setAttribute('display', 'none');
- } else {
- preview.removeAttribute('display');
- preview.setAttribute('stroke', this.options.activeColor);
- const positions = this.getPositions();
- const position = positions[candidateIndex];
- const lastPosition = positions[positions.length - 1];
- const distance =
- new g.Line(positions[0], lastPosition).length() /
- (positions.length - 1);
- let x, y;
- if (position) {
- x = position.x;
- y = position.y - distance / 2;
- } else {
- x = lastPosition.x;
- y = lastPosition.y + distance / 2;
- }
- preview.setAttribute('transform', `translate(${x},${y})`);
- }
- },
- startHandleListening: function(handle) {
- this.listenTo(handle, 'will-change', this.onHandleWillChange);
- this.listenTo(handle, 'changing', this.onHandleChanging);
- this.listenTo(handle, 'changed', this.onHandleChanged);
- },
- getPositions: function() {
- const { relatedView } = this;
- const translateMatrix = relatedView.getRootTranslateMatrix();
- const rotateMatrix = relatedView.getRootRotateMatrix();
- const matrix = translateMatrix.multiply(rotateMatrix);
- const portsPositions = this.relatedView.model.getPortsPositions(
- this.options.group
- );
- const positions = [];
- for (const id in portsPositions) {
- const point = V.transformPoint(portsPositions[id], matrix);
- positions.push({
- x: point.x,
- y: point.y,
- id
- });
- }
- return positions;
- },
- getPortIndex: function(handle, x, y) {
- const positions = this.getPositions();
- let candidateIndex = positions.findIndex((position) => position.y > y);
- const index = handle.options.index;
- if (
- candidateIndex === index ||
- candidateIndex === index + 1 ||
- (candidateIndex === -1 && index === positions.length - 1)
- ) {
- candidateIndex = index;
- }
- return candidateIndex;
- },
- onHandleWillChange: function(handle, evt) {
- this.focus();
- handle.color(this.options.activeColor);
- const portNode = this.relatedView.findPortNode(
- handle.options.portId,
- 'root'
- );
- portNode.style.opacity = 0.2;
- },
- onHandleChanging: function(handle, evt) {
- const { relatedView } = this;
- const [, x, y] = relatedView.paper.getPointerArgs(evt);
- const index = handle.options.index;
- const candidateIndex = this.getPortIndex(handle, x, y);
- this.updatePreview(candidateIndex !== index ? candidateIndex : null);
- },
- onHandleChanged: function(handle, evt) {
- const { relatedView } = this;
- const { model, paper } = relatedView;
- handle.color(null);
- const portNode = this.relatedView.findPortNode(
- handle.options.portId,
- 'root'
- );
- portNode.style.opacity = '';
- const [, x, y] = paper.getPointerArgs(evt);
- this.updatePreview(null);
- const index = handle.options.index;
- const newIndex = this.getPortIndex(handle, x, y);
- if (newIndex !== index) {
- const positions = this.getPositions();
- const position = positions[index];
- const newPosition = positions[newIndex];
- const portsPath = ['ports', 'items'];
- const ports = model.prop(portsPath);
- const positionIndex = ports.findIndex((port) => port.id === position.id);
- const port = ports[positionIndex];
- const newPositionIndex = newPosition
- ? ports.findIndex((port) => port.id === newPosition.id)
- : ports.length;
- const newPorts = ports.slice();
- newPorts.splice(positionIndex, 1);
- newPorts.splice(newPositionIndex - (index < newIndex ? 1 : 0), 0, port);
- model.prop(portsPath, newPorts, { rewrite: true, tool: this.cid });
- this.resetHandles();
- this.renderHandles();
- }
- },
- onRemove: function() {
- this.resetHandles();
- }
-});
-
-paper.on('element:magnet:pointerclick', (elementView, evt, magnet) => {
- paper.removeTools();
- const group = elementView.findAttribute('port-group', magnet);
- elementView.addTools(
- new dia.ToolsView({
- tools: [new Ports({ group })]
- })
- );
-});
-
-paper.on('blank:pointerdown cell:pointerdown', () => {
- paper.removeTools();
-});
-
-r2.findView(paper).addTools(
- new dia.ToolsView({
- tools: [new Ports({ group: 'left' })]
- })
-);
diff --git a/examples/port-reordering-tool-js/src/styles.css b/examples/port-reordering-tool-js/src/styles.css
deleted file mode 100644
index 76ee341c41..0000000000
--- a/examples/port-reordering-tool-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: scroll;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/preserve-spaces-in-text-wrap-js/README.md b/examples/preserve-spaces-in-text-wrap-js/README.md
deleted file mode 100644
index 215e3a5ac8..0000000000
--- a/examples/preserve-spaces-in-text-wrap-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Preserve Spaces In Text Wrap
-
-Do you need to preserve spacing between words when using the textWrap attribute? Adding the preserveSpaces attribute can help you maintain the specific spacing required when working with text subelements.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/preserve-spaces-in-text-wrap-js/assets/jointjs-logo-black.svg b/examples/preserve-spaces-in-text-wrap-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/preserve-spaces-in-text-wrap-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/preserve-spaces-in-text-wrap-js/index.html b/examples/preserve-spaces-in-text-wrap-js/index.html
deleted file mode 100644
index f6ffe37843..0000000000
--- a/examples/preserve-spaces-in-text-wrap-js/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/preserve-spaces-in-text-wrap-js/package.json b/examples/preserve-spaces-in-text-wrap-js/package.json
deleted file mode 100644
index 6ff4d58073..0000000000
--- a/examples/preserve-spaces-in-text-wrap-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-preserve-spaces-in-text-wrap-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/preserve-spaces-in-text-wrap-js/src/main.js b/examples/preserve-spaces-in-text-wrap-js/src/main.js
deleted file mode 100644
index 122025dd5c..0000000000
--- a/examples/preserve-spaces-in-text-wrap-js/src/main.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import { elementTools, dia, shapes } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const ResizeTool = elementTools.Control.extend({
- getPosition: function(view) {
- const model = view.model;
- const { width, height } = model.size();
- return { x: width, y: height };
- },
- setPosition: function(view, coordinates) {
- const model = view.model;
- model.resize(Math.max(coordinates.x, 1), Math.max(coordinates.y, 1));
- }
-});
-
-const rect1 = new shapes.standard.Rectangle({
- size: { width: 100, height: 100 },
- position: { x: 100, y: 100 },
- attrs: {
- label: {
- fontFamily: 'sans-serif',
- textWrap: {
- text: ' Not preserving spaces '
- }
- }
- }
-});
-
-const rect2 = new shapes.standard.Rectangle({
- size: { width: 100, height: 100 },
- position: { x: 300, y: 100 },
- attrs: {
- label: {
- fontFamily: 'sans-serif',
- textWrap: {
- text: ' Preserving spaces ',
- preserveSpaces: true
- }
- }
- }
-});
-
-graph.addCells([rect1, rect2]);
-
-[rect1, rect2].forEach((element) => {
- element.findView(paper).addTools(
- new dia.ToolsView({
- tools: [
- new ResizeTool({
- selector: 'body',
- handleAttributes: {
- fill: '#4666E5'
- }
- })
- ]
- })
- );
-});
diff --git a/examples/preserve-spaces-in-text-wrap-js/src/styles.css b/examples/preserve-spaces-in-text-wrap-js/src/styles.css
deleted file mode 100644
index fd6448ca09..0000000000
--- a/examples/preserve-spaces-in-text-wrap-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: auto;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/rectangular-layout-js/README.md b/examples/rectangular-layout-js/README.md
deleted file mode 100644
index 980c2b4c10..0000000000
--- a/examples/rectangular-layout-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Rectangular Layout
-
-Do you want the elements in the diagram to form a rectangle? Do you want the position of the elements to be automatically calculated based on the number of elements? Let’s take a look at the demo below.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/rectangular-layout-js/assets/jointjs-logo-black.svg b/examples/rectangular-layout-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/rectangular-layout-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/rectangular-layout-js/index.html b/examples/rectangular-layout-js/index.html
deleted file mode 100644
index f5549c0982..0000000000
--- a/examples/rectangular-layout-js/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/rectangular-layout-js/package.json b/examples/rectangular-layout-js/package.json
deleted file mode 100644
index 352a1576fa..0000000000
--- a/examples/rectangular-layout-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-rectangular-layout-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/rectangular-layout-js/src/main.js b/examples/rectangular-layout-js/src/main.js
deleted file mode 100644
index bbc478699c..0000000000
--- a/examples/rectangular-layout-js/src/main.js
+++ /dev/null
@@ -1,166 +0,0 @@
-import { g, dia, shapes, util } from '@joint/core';
-import './styles.css';
-
-const width = 100;
-const height = 80;
-
-const graph = new dia.Graph(
- {},
- {
- cellNamespace: shapes
- }
-);
-
-const paper = new dia.Paper({
- el: document.getElementById('paper'),
- model: graph,
- cellViewNamespace: shapes,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- interactive: false,
- defaultConnectionPoint: {
- name: 'rectangle'
- },
- background: { color: '#F3F7F6' }
-});
-
-function squareLayout(elements, options = {}) {
- const count = elements.length;
- if (count < 2) return null;
-
- const { x = 0, y = 0, gap = 10 } = options;
- const { width, height } = elements[0].size();
-
- const firstRowElementCount = Math.ceil(count / 4) + 1;
- let middleRowsCount = Math.ceil(count / 4) - 1;
- let lastRowElementCount = count - firstRowElementCount - 2 * middleRowsCount;
- let lastRowElementGap = gap;
-
- switch (firstRowElementCount - lastRowElementCount) {
- case 0:
- // nothing to do
- break;
- case 1: {
- lastRowElementGap += (width + gap) / (lastRowElementCount - 1);
- break;
- }
- case 2: {
- middleRowsCount -= 1;
- lastRowElementCount += 2;
- break;
- }
- case 3: {
- middleRowsCount -= 1;
- lastRowElementCount += 2;
- lastRowElementGap += (width + gap) / (lastRowElementCount - 1);
- break;
- }
- }
-
- const totalWidth =
- firstRowElementCount * width + (firstRowElementCount - 1) * gap;
- const totalHeight = (middleRowsCount + 2) * height + middleRowsCount * gap;
-
- for (let i = 0; i < firstRowElementCount; i++) {
- elements[i].position(x + i * (width + gap), y);
- }
- for (let i = 0; i < middleRowsCount; i++) {
- elements[firstRowElementCount + 2 * i].position(
- x,
- y + (1 + i) * (height + gap)
- );
- elements[firstRowElementCount + 2 * i + 1].position(
- x + (firstRowElementCount - 1) * (width + gap),
- y + (1 + i) * (height + gap)
- );
- }
- for (let i = 0; i < lastRowElementCount; i++) {
- elements[firstRowElementCount + 2 * middleRowsCount + i].position(
- x + i * (width + lastRowElementGap),
- y + (middleRowsCount + 1) * (height + gap)
- );
- }
-
- return new g.Rect(x, y, totalWidth, totalHeight);
-}
-
-const templateElement = new shapes.standard.Rectangle({
- size: {
- width,
- height
- },
- attrs: {
- body: {
- strokeWidth: 2
- },
- label: {
- fontFamily: 'sans-serif',
- fontSize: 17
- }
- }
-});
-
-function generate(count, options) {
- const root = templateElement.clone().prop({
- attrs: {
- body: {
- fill: '#ff9580'
- },
- label: {
- text: 'Rectangular\nLayout'
- }
- }
- });
-
- const colorFn = util.interpolate.hexColor('#00879b', '#80eaff');
- const els = Array.from({ length: count }).map((_, index) => {
- return templateElement.clone().prop({
- attrs: {
- body: {
- fill: colorFn(index / count)
- },
- label: {
- text: `${index + 1}`
- }
- }
- });
- });
-
- const links = els.map((el) => {
- return new shapes.standard.Link({
- source: {
- id: root.id
- },
- target: {
- id: el.id
- }
- });
- });
-
- graph.resetCells([root, ...els, ...links]);
- const bbox = squareLayout(els, options);
-
- if (bbox) {
- const center = bbox.center();
- root.position(center.x - width / 2, center.y - height / 2);
- }
-
- paper.fitToContent({
- useModelGeometry: true,
- padding: 20,
- allowNewOrigin: 'any'
- });
-}
-
-function readInputs() {
- const count = Number(document.getElementById('count').value);
- const gap = Number(document.getElementById('gap').value);
- generate(count, { gap });
-}
-
-const debouncedReadInputs = util.debounce(readInputs, 10);
-
-document.getElementById('count').addEventListener('input', debouncedReadInputs);
-document.getElementById('gap').addEventListener('input', debouncedReadInputs);
-
-generate(20);
diff --git a/examples/rectangular-layout-js/src/styles.css b/examples/rectangular-layout-js/src/styles.css
deleted file mode 100644
index b0a66b1acb..0000000000
--- a/examples/rectangular-layout-js/src/styles.css
+++ /dev/null
@@ -1,19 +0,0 @@
-body {
- font-family: sans-serif;
- padding: 10px;
-}
-
-#paper {
- border: 1px solid lightgray;
- margin: 10px 0;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/resize-control-tool-js/README.md b/examples/resize-control-tool-js/README.md
deleted file mode 100644
index 58b39d0ccd..0000000000
--- a/examples/resize-control-tool-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Resize Control Tool
-
-Want to easily resize an element? Play around with the demo below and see how it can be done in JointJS.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/resize-control-tool-js/assets/icons/resize.svg b/examples/resize-control-tool-js/assets/icons/resize.svg
deleted file mode 100644
index 58eb96705f..0000000000
--- a/examples/resize-control-tool-js/assets/icons/resize.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/resize-control-tool-js/assets/jointjs-logo-black.svg b/examples/resize-control-tool-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/resize-control-tool-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/resize-control-tool-js/index.html b/examples/resize-control-tool-js/index.html
deleted file mode 100644
index 0d190adc4e..0000000000
--- a/examples/resize-control-tool-js/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/resize-control-tool-js/package.json b/examples/resize-control-tool-js/package.json
deleted file mode 100644
index 13d897ba39..0000000000
--- a/examples/resize-control-tool-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-resize-control-tool-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/resize-control-tool-js/src/main.js b/examples/resize-control-tool-js/src/main.js
deleted file mode 100644
index 0368a480c6..0000000000
--- a/examples/resize-control-tool-js/src/main.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import { dia, shapes, elementTools } from '@joint/core';
-import './styles.css';
-import resizeIcon from '../assets/icons/resize.svg';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const ResizeTool = elementTools.Control.extend({
- children: [
- {
- tagName: 'image',
- selector: 'handle',
- attributes: {
- cursor: 'pointer',
- width: 20,
- height: 20,
- 'xlink:href': resizeIcon
- }
- },
- {
- tagName: 'rect',
- selector: 'extras',
- attributes: {
- 'pointer-events': 'none',
- fill: 'none',
- stroke: '#33334F',
- 'stroke-dasharray': '2,4',
- rx: 5,
- ry: 5
- }
- }
- ],
- getPosition: function(view) {
- const model = view.model;
- const { width, height } = model.size();
- return { x: width, y: height };
- },
- setPosition: function(view, coordinates) {
- const model = view.model;
- model.resize(
- Math.max(coordinates.x - 10, 1),
- Math.max(coordinates.y - 10, 1)
- );
- }
-});
-
-const rectangle = new shapes.standard.Rectangle();
-rectangle.resize(100, 100);
-rectangle.position(100, 100);
-rectangle.addTo(graph);
-rectangle.findView(paper).addTools(
- new dia.ToolsView({
- tools: [
- new ResizeTool({
- selector: 'body'
- })
- ]
- })
-);
diff --git a/examples/resize-control-tool-js/src/styles.css b/examples/resize-control-tool-js/src/styles.css
deleted file mode 100644
index fd6448ca09..0000000000
--- a/examples/resize-control-tool-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: auto;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/roi-calculator-js/README.md b/examples/roi-calculator-js/README.md
deleted file mode 100644
index e9f6de4794..0000000000
--- a/examples/roi-calculator-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: ROI calculator
-
-Explore this simplified ROI calculator to find out your potential profits or losses based on historical data and also what diagramming enthusiasts will appreciate, how JointJS handles the integration of HTML form elements directly into the shapes via foreign objects. Besides, this demo shows JointJS accessibility as it works well on screen readers.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/roi-calculator-js/assets/jointjs-logo-black.svg b/examples/roi-calculator-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index cf84b0ec24..0000000000
--- a/examples/roi-calculator-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/examples/roi-calculator-js/index.html b/examples/roi-calculator-js/index.html
deleted file mode 100644
index 54b4fd93b6..0000000000
--- a/examples/roi-calculator-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/roi-calculator-js/package.json b/examples/roi-calculator-js/package.json
deleted file mode 100644
index ee542d221a..0000000000
--- a/examples/roi-calculator-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-roi-calculator-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/roi-calculator-js/src/main.js b/examples/roi-calculator-js/src/main.js
deleted file mode 100644
index 8b817e3d74..0000000000
--- a/examples/roi-calculator-js/src/main.js
+++ /dev/null
@@ -1,697 +0,0 @@
-import { shapes as defaultShapes, dia, util } from '@joint/core';
-import './styles.css';
-
-const MAIN_COLOR = '#D4D9D7';
-const SECONDARY_COLOR = '#EAECEA';
-const BTC_COLOR = '#9C9EC8';
-const GOLD_COLOR = '#F7E3AE';
-const SP500_COLOR = '#FFCCD6';
-
-const currentYear = 2023;
-
-const data = {
- '2013': {
- gold: 1685.50,
- bitcoin: 13.51,
- sp500: 1480.40
- },
- '2014': {
- gold: 1219.75,
- bitcoin: 771.40,
- sp500: 1822.36
- },
- '2015': {
- gold: 1184.25,
- bitcoin: 314.25,
- sp500: 2028.18
- },
- '2016': {
- gold: 1060.20,
- bitcoin: 434.33,
- sp500: 1918.60
- },
- '2017': {
- gold: 1162.00,
- bitcoin: 998.33,
- sp500: 2275.12
- },
- '2018': {
- gold: 1312.80,
- bitcoin: 13657.20,
- sp500: 2789.80
- },
- '2019': {
- gold: 1287.20,
- bitcoin: 3800,
- sp500: 2607.39
- },
- '2020': {
- gold: 1520.55,
- bitcoin: 7197.92,
- sp500: 3278.20
- },
- '2021': {
- gold: 1947.60,
- bitcoin: 29624.63,
- sp500: 3793.75
- },
- '2022': {
- gold: 1800.10,
- bitcoin: 47434.29,
- sp500: 4573.82
- },
- '2023': {
- gold: 1824.16,
- bitcoin: 16610.44,
- sp500: 3960.66
- }
-};
-
-const shapes = { ...defaultShapes };
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- width: '100%',
- height: '100%',
- model: graph,
- cellViewNamespace: shapes,
- defaultConnector: {
- name: 'curve'
- },
- defaultConnectionPoint: {
- name: 'anchor'
- },
- background: {
- color: '#f6f4f4'
- },
- preventDefaultViewAction: false,
- interactive: {
- stopDelegation: false
- },
- elementView: dia.ElementView.extend({
-
- events: {
- 'change input,select': 'onInputChange'
- },
-
- onInputChange: function(evt) {
- const input = evt.target;
- if (!input.validity.valid) return;
- const valuePath = input.getAttribute('joint-selector') + '/props/value';
- const currentValue = this.model.attr(valuePath);
- this.model.attr(valuePath, input.value, { previousValue: currentValue, calc: true });
- }
- })
-});
-
-document.getElementById('paper-container').appendChild(paper.el);
-// Define various shapes for the demo.
-
-class ForeignObjectElement extends dia.Element {
-
- defaults() {
- return {
- ...super.defaults,
- attrs: {
- root: {
- cursor: 'move'
- },
- body: {
- rx: 10,
- ry: 10,
- width: 'calc(w)',
- height: 'calc(h)',
- stroke: '#333333',
- fill: MAIN_COLOR,
- strokeWidth: 2
- },
- foreignObject: {
- width: 'calc(w)',
- height: 'calc(h)'
- }
- }
- };
- }
-}
-
-class Investment extends ForeignObjectElement {
- defaults() {
- return {
- ...super.defaults(),
- type: 'Investment',
- size: {
- width: 140,
- height: 225
- }
- };
- }
-
- preinitialize() {
- this.markup = util.svg/* xml */`
- This is your portfolio now in ${currentYear}.
- -
-
-
-
-
-
-
diff --git a/examples/scale-option-for-tools-js/package.json b/examples/scale-option-for-tools-js/package.json
deleted file mode 100644
index 89565c1797..0000000000
--- a/examples/scale-option-for-tools-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-scale-option-for-tools-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/scale-option-for-tools-js/src/main.js b/examples/scale-option-for-tools-js/src/main.js
deleted file mode 100644
index 359fb99283..0000000000
--- a/examples/scale-option-for-tools-js/src/main.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { linkTools, elementTools, dia, shapes } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- linkPinning: false,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- defaultLink: () => new shapes.standard.Link()
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const defaultScale = 1;
-const scaleValueSpan = document.querySelector('#scale-value');
-const scaleRange = document.querySelector('#scale-range');
-
-scaleRange.addEventListener('input', ({ target: { value }}) =>
- setScaleValue(value)
-);
-
-const rect1 = new shapes.standard.Rectangle({
- size: { width: 100, height: 100 },
- position: { x: 100, y: 100 }
-});
-const rect2 = rect1.clone().position(500, 100);
-const link = new shapes.standard.Link();
-link.source(rect1);
-link.target(rect2);
-
-graph.addCells([rect1, rect2, link]);
-
-function addElementTools(element, scale) {
- const connectTool = new elementTools.Connect({
- scale,
- x: 'calc(w)',
- y: 'calc(h)',
- magnet: 'body'
- });
-
- element.findView(paper).addTools(
- new dia.ToolsView({
- tools: [connectTool]
- })
- );
-}
-
-function addLinkTools(link, scale) {
- const verticesTool = new linkTools.Vertices({ scale });
- const targetArrowheadTool = new linkTools.TargetArrowhead({ scale });
- const targetAnchorTool = new linkTools.TargetAnchor({ scale });
- const removeTool = new linkTools.Remove({ scale });
-
- link.findView(paper).addTools(
- new dia.ToolsView({
- tools: [verticesTool, targetArrowheadTool, targetAnchorTool, removeTool]
- })
- );
-}
-
-function setScaleValue(value) {
- scaleValueSpan.innerText = value;
- scaleRange.value = value;
-
- graph.getLinks().forEach((link) => addLinkTools(link, value));
- graph.getElements().forEach((element) => addElementTools(element, value));
-}
-
-paper.on('link:connect', (linkView) => {
- if (linkView.hasTools()) return;
- addLinkTools(linkView.model, scaleRange.value);
-});
-
-setScaleValue(defaultScale);
diff --git a/examples/scale-option-for-tools-js/src/styles.css b/examples/scale-option-for-tools-js/src/styles.css
deleted file mode 100644
index a35b0b4b76..0000000000
--- a/examples/scale-option-for-tools-js/src/styles.css
+++ /dev/null
@@ -1,38 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: auto;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
-
-#scale-value {
- width: 32px;
- font-family: sans-serif;
-}
-
-#scale-control {
- width: 200px;
- height: 50px;
- display: flex;
- justify-content: center;
- align-items: center;
- position: absolute;
- z-index: 1;
- top: 0;
- left: 50%;
- transform: translateX(-50%);
- color: black;
- background-color: rgba(0, 0, 0, 0.2);
-}
diff --git a/examples/scale-svgmarker-js/README.md b/examples/scale-svgmarker-js/README.md
deleted file mode 100644
index 27a328b182..0000000000
--- a/examples/scale-svgmarker-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Scale SVGMarker with link's thickness
-
-If you need to keep the size of your link and SVG marker in sync, this is the demo for you. Use the thickness of a link as the basis for its SVG marker sizing to achieve symmetrical scaling.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/scale-svgmarker-js/assets/jointjs-logo-black.svg b/examples/scale-svgmarker-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/scale-svgmarker-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/scale-svgmarker-js/index.html b/examples/scale-svgmarker-js/index.html
deleted file mode 100644
index 045b17bf06..0000000000
--- a/examples/scale-svgmarker-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/scale-svgmarker-js/package.json b/examples/scale-svgmarker-js/package.json
deleted file mode 100644
index bc60c79043..0000000000
--- a/examples/scale-svgmarker-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-scale-svgmarker-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/scale-svgmarker-js/src/main.js b/examples/scale-svgmarker-js/src/main.js
deleted file mode 100644
index 9936779d9d..0000000000
--- a/examples/scale-svgmarker-js/src/main.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import { g, dia, shapes } from '@joint/core';
-import './styles.css';
-const { Point } = g;
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-paperContainer.appendChild(paper.el);
-
-paper.setGrid('mesh');
-
-const Link = dia.Link.define(
- 'Link',
- {
- attrs: {
- line: {
- connection: true,
- fill: 'none',
- targetMarker: {
- 'stroke-width': 1,
- markerUnits: 'strokeWidth', // the default is `userSpaceOnUse`
- d: 'M 1,-1 0,0 1,1 Z'
- // fill: 'blue', if not defined, we use 'stroke' of the line`
- // stroke: 'blue', if not defined, we use 'stroke' of the line`
- }
- }
- }
- },
- {
- markup: [
- {
- tagName: 'path',
- selector: 'line'
- }
- ]
- }
-);
-
-const link1 = new Link({
- attrs: {
- line: {
- stroke: 'red',
- strokeWidth: 2
- }
- }
-});
-link1.source(new Point(50, 50));
-link1.target(new Point(300, 50));
-link1.addTo(graph);
-
-const link2 = new Link({
- attrs: {
- line: {
- stroke: 'blue',
- strokeWidth: 4
- }
- }
-});
-link2.source(new Point(50, 150));
-link2.target(new Point(300, 150));
-link2.addTo(graph);
-
-const link3 = new Link({
- attrs: {
- line: {
- stroke: 'green',
- strokeWidth: 6
- }
- }
-});
-link3.source(new Point(50, 250));
-link3.target(new Point(300, 250));
-link3.addTo(graph);
diff --git a/examples/scale-svgmarker-js/src/styles.css b/examples/scale-svgmarker-js/src/styles.css
deleted file mode 100644
index fd6448ca09..0000000000
--- a/examples/scale-svgmarker-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: auto;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/serpentine-layout-js/README.md b/examples/serpentine-layout-js/README.md
deleted file mode 100644
index 8ffe28a5dc..0000000000
--- a/examples/serpentine-layout-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Serpentine Layout
-
-This demo is an example of a serpentine layout, a custom layout where the elements are arranged in a zigzag pattern, where the rows are filled alternately from left to right and right to left, and where the rows fit the given width.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/serpentine-layout-js/assets/jointjs-logo-black.svg b/examples/serpentine-layout-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/serpentine-layout-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/serpentine-layout-js/index.html b/examples/serpentine-layout-js/index.html
deleted file mode 100644
index 72cad8d78f..0000000000
--- a/examples/serpentine-layout-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/serpentine-layout-js/package.json b/examples/serpentine-layout-js/package.json
deleted file mode 100644
index 70a735c0eb..0000000000
--- a/examples/serpentine-layout-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-serpentine-layout-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/serpentine-layout-js/src/main.js b/examples/serpentine-layout-js/src/main.js
deleted file mode 100644
index b6d4be110c..0000000000
--- a/examples/serpentine-layout-js/src/main.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import { dia, shapes as defaultShapes, util } from '@joint/core';
-import './styles.css';
-
-const shapes = { ...defaultShapes };
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- gridSize: 20,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- defaultConnector: { name: 'curve' },
- defaultConnectionPoint: {
- name: 'anchor'
- },
- background: {
- color: '#fff'
- }
-});
-
-paperContainer.appendChild(paper.el);
-
-function serpentineLayout(graph, elements, options = {}) {
- const {
- gap = 20,
- width = 1000,
- rowHeight = 100,
- x = 0,
- y = 0,
- alignRowLastElement = false
- } = options;
- const linkProps = [];
- const elementProps = [];
- let currentX = x;
- let currentY = y + rowHeight / 2;
- let leftToRight = true;
- let index = 0;
- // Find the links that connect the elements in the order they are in the array.
- const links = [];
- elements.forEach((el, i) => {
- const nextEl = elements[i + 1];
- if (!nextEl) return;
- const link = graph.getConnectedLinks(el, { outbound: true }).find(l => l.target().id === nextEl.id);
- if (link) links.push(link);
- });
- // Calculate the positions of the elements and the links.
- while (index < elements.length) {
- const item = elements[index];
- const size = item.size();
- if (leftToRight) {
- if (currentX + size.width > x + width) {
- // Not enough space on the right. Move to the next row.
- // The current element will be processed in the next iteration.
- currentX = x + width;
- currentY += rowHeight;
- leftToRight = false;
- if (index > 0) {
- linkProps[index - 1] = {
- source: { anchor: { name: 'right' }},
- target: { anchor: { name: 'right' }},
- };
- if (alignRowLastElement) {
- // Adjust the position of the previous element to make sure
- // it is aligned with the right edge of the result.
- elementProps[elementProps.length - 1].position.x = Math.max(
- x + width - elements[elementProps.length - 1].size().width,
- x
- );
- }
- }
- }
- } else {
- if (currentX - size.width < x) {
- // Not enough space on the left. Move to the next row.
- // The current element will be processed in the next iteration.
- currentX = x;
- currentY += rowHeight;
- leftToRight = true;
- if (index > 0) {
- linkProps[index - 1] = {
- source: { anchor: { name: 'left' }},
- target: { anchor: { name: 'left' }},
- };
- if (alignRowLastElement) {
- // Adjust the position of the previous element to make sure
- // it is aligned with the left side of the result.
- elementProps[elementProps.length - 1].position.x = x;
- }
- }
- }
- }
- elementProps[index] = {
- position: { y: currentY - size.height / 2 },
- leftToRight
- };
- if (leftToRight) {
- elementProps[index].position.x = currentX;
- currentX += size.width + gap;
- } else {
- elementProps[index].position.x = Math.max(currentX - size.width, x);
- currentX -= size.width + gap;
- }
- // Adjust the link between the current element and the next one.
- if (index < links.length) {
- if (leftToRight) {
- linkProps[index] = {
- source: { anchor: { name: 'right' }},
- target: { anchor: { name: 'left' }},
- };
- } else {
- linkProps[index] = {
- source: { anchor: { name: 'left' }},
- target: { anchor: { name: 'right' }},
- };
- }
- }
- index++;
- }
- // Set the positions of the elements and the links.
- elementProps.forEach((props, i) => {
- elements[i].prop(props);
- });
- linkProps.forEach((props, i) => {
- if (links[i]) {
- links[i].prop(props);
- }
- });
- return currentY;
-}
-
-function createElement(text) {
- return new shapes.standard.Rectangle({
- size: { width: 150, height: 40 },
- attrs: {
- body: {
- fill: '#fffae2',
- stroke: '#ffc7b0',
- rx: 5,
- ry: 5
- },
- label: {
- text,
- fill: '#ff9580',
- fontSize: 14,
- fontWeight: 'bold'
- }
- }
- });
-}
-
-function createLink(source, target) {
- const link = new shapes.standard.Link({
- source: { id: source.id },
- target: { id: target.id },
- attrs: {
- line: {
- stroke: '#80eaff',
- strokeWidth: 2,
- targetMarker: {
- 'type': 'path',
- 'd': 'M 10 -5 0 0 10 5 z',
- 'fill': '#b6ffff',
- 'stroke-width': 2
- }
- }
- }
- });
- return link;
-}
-
-// Create an array with 30 elements and 29 links. The names of the elements are historical figures in chronological order.
-const elements = [];
-const links = [];
-const names = [
- 'Louis XIV', 'Peter the Great', 'Louis XV', 'Frederick the Great', 'Charles III of Spain', 'Joseph II', 'George III', 'Catherine the Great',
- 'Maria Theresa', 'Charles IV of Spain', 'Maria I', 'Charles VI', 'Maria II', 'Joseph I', 'George IV', 'William I', 'Louis I', 'Guillaume I',
- 'Louis II', 'Louis-Philippe I', 'Louis III', 'Napoleon I', 'Louis-Philippe II', 'Louis Napoleon', 'Napoleon III', 'Louis XVIII', 'Charles X',
- 'Louis-Philippe III', 'Louis-Charles'
-];
-for (let i = 0; i < names.length; i++) {
- elements.push(createElement(names[i]));
- if (i > 0) {
- links.push(createLink(elements[i - 1], elements[i]));
- }
-}
-
-graph.addCells([...elements, ...links]);
-
-function layout() {
- const x0 = 100;
- const y0 = 50;
- const yMax = serpentineLayout(graph, elements, {
- gap: 20,
- rowHeight: 60,
- x: x0,
- y: y0,
- width: window.innerWidth - 2 * x0,
- });
- // resize the paper to fit the content
- // enable the horizontal scrollbar if the content is wider than the paper
- paper.setDimensions('100%', yMax + y0 + 50);
-}
-
-// layout the graph initially and on window resize
-layout();
-window.addEventListener('resize', util.debounce(layout, 100));
diff --git a/examples/serpentine-layout-js/src/styles.css b/examples/serpentine-layout-js/src/styles.css
deleted file mode 100644
index fd6448ca09..0000000000
--- a/examples/serpentine-layout-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: auto;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/shapes-drawing-js/README.md b/examples/shapes-drawing-js/README.md
deleted file mode 100644
index 837b45229f..0000000000
--- a/examples/shapes-drawing-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Shapes Drawing
-
-Do you want to enable your customers to draw shapes into diagrams, such as a rectangle, ellipse or any other shape using the free drawing function? Check out this demo that's all about drawing.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/shapes-drawing-js/assets/jointjs-logo-black.svg b/examples/shapes-drawing-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/shapes-drawing-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/shapes-drawing-js/index.html b/examples/shapes-drawing-js/index.html
deleted file mode 100644
index d9b3e82054..0000000000
--- a/examples/shapes-drawing-js/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/shapes-drawing-js/package.json b/examples/shapes-drawing-js/package.json
deleted file mode 100644
index 1db3989a36..0000000000
--- a/examples/shapes-drawing-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-shapes-drawing-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/shapes-drawing-js/src/main.js b/examples/shapes-drawing-js/src/main.js
deleted file mode 100644
index 7246830c99..0000000000
--- a/examples/shapes-drawing-js/src/main.js
+++ /dev/null
@@ -1,218 +0,0 @@
-import { V, g, dia, shapes } from '@joint/core';
-import './styles.scss';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' }
-});
-paperContainer.appendChild(paper.el);
-
-const Tool = {
- Pointer: 0,
- Line: 1,
- Rectangle: 2,
- Ellipse: 3,
- FreeDraw: 4
-};
-
-let tool = Tool.Pointer;
-
-function dragStart(evt, x, y) {
- const data = (evt.data = {
- tool,
- ox: x,
- oy: y
- });
- switch (tool) {
- case Tool.Line: {
- evt.data.x1 = x;
- evt.data.y1 = y;
- evt.data.x2 = x;
- evt.data.y2 = y;
- data.vel = V('line', { x1: x, y1: y, x2: x, y2: y });
- break;
- }
- case Tool.Rectangle: {
- data.vel = V('rect', {
- x: x,
- y: y,
- width: 1,
- height: 1
- });
- break;
- }
- case Tool.Ellipse: {
- data.vel = V('ellipse', {
- cx: x,
- cy: y,
- rx: 1,
- ry: 1
- });
- break;
- }
- case Tool.FreeDraw: {
- data.vel = V('polyline');
- evt.data.points = [[x, y]];
- break;
- }
- default:
- case Tool.Pointer: {
- return;
- }
- }
- data.vel.appendTo(paper.viewport);
- data.vel.addClass('preview-shape');
-}
-
-function drag(evt, x, y) {
- const { ox, oy, vel, tool } = evt.data;
- if (!tool) return;
- const bbox = new g.Rect(ox, oy, x - ox, y - oy);
- if (bbox.width === 0) bbox.width = 1;
- if (bbox.height === 0) bbox.height = 1;
- bbox.normalize();
- evt.data.bbox = bbox;
- switch (tool) {
- case Tool.Line: {
- evt.data.x2 = x;
- evt.data.y2 = y;
- vel.attr({ x2: x, y2: y });
- break;
- }
- case Tool.Rectangle: {
- vel.attr(bbox.toJSON());
- break;
- }
- case Tool.Ellipse: {
- vel.attr({
- rx: bbox.width / 2,
- ry: bbox.height / 2,
- cx: bbox.x + bbox.width / 2,
- cy: bbox.y + bbox.height / 2
- });
- break;
- }
- case Tool.FreeDraw: {
- const { points } = evt.data;
- points.push([x, y]);
- vel.attr('points', points.join(' '));
- break;
- }
- }
-}
-
-function dragEnd(evt) {
- const { vel, bbox, tool } = evt.data;
- if (!tool) return;
- vel.remove();
- if (!bbox) return;
- const { x, y, width, height } = bbox;
- switch (tool) {
- case Tool.Line: {
- const { x1, x2, y1, y2 } = evt.data;
- const line = new g.Line({ x: x1, y: y1 }, { x: x2, y: y2 });
- const angle = line.angle();
- const { start } = line.clone().rotate(line.midpoint(), angle);
- graph.addCell({
- type: 'standard.Path',
- angle,
- position: {
- x: start.x,
- y: start.y
- },
- size: {
- width: line.length(),
- height: 1
- },
- attrs: {
- body: {
- d: 'M 0 calc(0.5 * h) H calc(w)'
- }
- }
- });
- break;
- }
- case Tool.Rectangle: {
- graph.addCell({
- type: 'standard.Rectangle',
- position: {
- x,
- y
- },
- size: {
- width,
- height
- }
- });
- break;
- }
- case Tool.Ellipse: {
- graph.addCell({
- type: 'standard.Ellipse',
- position: {
- x,
- y
- },
- size: {
- width,
- height
- }
- });
- break;
- }
- case Tool.FreeDraw: {
- const { points } = evt.data;
- const geometry = new g.Polyline(points.join(' '));
- geometry.simplify({ threshold: 0.8 });
- const geometryBBox = geometry.bbox();
- graph.addCell({
- type: 'standard.Polyline',
- position: {
- x: geometryBBox.x,
- y: geometryBBox.y
- },
- size: {
- width: geometryBBox.width,
- height: geometryBBox.height
- },
- attrs: {
- body: {
- refPoints: geometry.serialize()
- }
- }
- });
- break;
- }
- }
-}
-
-paper.on('blank:pointerdown', (evt, x, y) => dragStart(evt, x, y));
-paper.on('element:pointerdown', (_, evt, x, y) => dragStart(evt, x, y));
-
-paper.on('blank:pointermove', (evt, x, y) => drag(evt, x, y));
-paper.on('element:pointermove', (_, evt, x, y) => drag(evt, x, y));
-
-paper.on('blank:pointerup', (evt) => dragEnd(evt));
-paper.on('element:pointerup', (_, evt) => dragEnd(evt));
-
-setTool(document.querySelector('[checked]')?.id ?? 'Pointer');
-
-document
- .getElementById('tools')
- .addEventListener('change', (evt) => setTool(evt.target.id));
-
-function setTool(toolId) {
- tool = Tool[toolId];
- paper.setInteractivity(tool === Tool.Pointer);
- paper.el.classList.toggle('paper-active-tools', tool !== Tool.Pointer);
-}
diff --git a/examples/shapes-drawing-js/src/styles.scss b/examples/shapes-drawing-js/src/styles.scss
deleted file mode 100644
index 9215018e50..0000000000
--- a/examples/shapes-drawing-js/src/styles.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-/* VARS */
-
-$darkGreen: #2a5045;
-$green1: #59e2af;
-$green2: #08b081;
-
-$activeShadow: 0 0 10px rgba($green1, 0.5);
-
-/* MIXINS */
-@mixin focusOutline {
- outline: dotted 1px #ccc;
- outline-offset: 0.45rem;
-}
-
-@mixin hideInput {
- width: 0;
- height: 0;
- position: absolute;
- left: -9999px;
-}
-
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: auto;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
-
-.preview-shape {
- stroke: $green2;
- fill: none;
- stroke-width: 2;
-}
-
-.paper-active-tools * {
- cursor: crosshair;
-}
-
-/* TOGGLE STYLING */
-#tools {
- margin: 0 0 1.5rem;
- box-sizing: border-box;
- font-size: 0;
- display: flex;
- flex-flow: row nowrap;
- justify-content: flex-start;
- align-items: stretch;
- position: absolute;
- top: 10px;
- left: 10px;
- font-family: sans-serif;
-
- input {
- @include hideInput;
- }
-
- input+label {
- margin: 0;
- padding: 0.75rem 1.5rem;
- box-sizing: border-box;
- position: relative;
- display: inline-block;
- border: solid 1px #ddd;
- background-color: #fff;
- font-size: 1rem;
- line-height: 120%;
- font-weight: 600;
- text-align: center;
- cursor: pointer;
- box-shadow: 0 0 0 rgba(255, 255, 255, 0);
- transition: border-color 0.15s ease-out, color 0.25s ease-out,
- background-color 0.15s ease-out, box-shadow 0.15s ease-out;
-
- /* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
- /*flex: 0 0 50%; display: flex; justify-content: center; align-items: center;*/
- /* ----- */
-
- &:first-of-type {
- border-radius: 6px 0 0 6px;
- border-right: none;
- }
-
- &:last-of-type {
- border-radius: 0 6px 6px 0;
- border-left: none;
- }
- }
-
- input:hover+label {
- border-color: #2a5045;
- }
-
- input:checked+label {
- background-color: $green2;
- color: #fff;
- box-shadow: $activeShadow;
- border-color: $green2;
- z-index: 1;
- }
-
- input:focus+label {
- @include focusOutline;
- }
-}
diff --git a/examples/snap-links-to-themselves-js/README.md b/examples/snap-links-to-themselves-js/README.md
deleted file mode 100644
index e41c28e534..0000000000
--- a/examples/snap-links-to-themselves-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Snap Links To Themselves
-
-Need a link to snap to itself? Utilising the snapLinksSelf option on the JointJS paper forces a link end to snap to itself under specified conditions.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/snap-links-to-themselves-js/assets/jointjs-logo-black.svg b/examples/snap-links-to-themselves-js/assets/jointjs-logo-black.svg
deleted file mode 100644
index e5cc83f907..0000000000
--- a/examples/snap-links-to-themselves-js/assets/jointjs-logo-black.svg
+++ /dev/null
@@ -1,91 +0,0 @@
-
\ No newline at end of file
diff --git a/examples/snap-links-to-themselves-js/index.html b/examples/snap-links-to-themselves-js/index.html
deleted file mode 100644
index 60bea3eb0c..0000000000
--- a/examples/snap-links-to-themselves-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/snap-links-to-themselves-js/package.json b/examples/snap-links-to-themselves-js/package.json
deleted file mode 100644
index 6657201b54..0000000000
--- a/examples/snap-links-to-themselves-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-snap-links-to-themselves-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/snap-links-to-themselves-js/src/main.js b/examples/snap-links-to-themselves-js/src/main.js
deleted file mode 100644
index 26eafe1b68..0000000000
--- a/examples/snap-links-to-themselves-js/src/main.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { linkTools, dia, shapes } from '@joint/core';
-import './styles.css';
-
-// Paper
-
-const paperContainer = document.getElementById('paper-container');
-
-const graph = new dia.Graph({}, { cellNamespace: shapes });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapes,
- width: '100%',
- height: '100%',
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- validateConnection: () => false,
- snapLinksSelf: { radius: 50 }
-});
-
-paperContainer.appendChild(paper.el);
-
-function getLinkToolsView() {
- const verticesTool = new linkTools.Vertices();
- const targetArrowheadTool = new linkTools.TargetArrowhead();
- const sourceArrowheadTool = new linkTools.SourceArrowhead();
-
- return new dia.ToolsView({
- tools: [verticesTool, targetArrowheadTool, sourceArrowheadTool]
- });
-}
-
-const link1 = new shapes.standard.Link();
-
-link1.source({ x: 200, y: 100 });
-link1.target({ x: 200, y: 300 });
-link1.vertices([
- { x: 100, y: 100 },
- { x: 100, y: 200 },
- { x: 200, y: 200 }
-]);
-
-const rect = new shapes.standard.Rectangle({
- size: { width: 120, height: 120 },
- position: { x: 400, y: 40 }
-});
-
-const link2 = new shapes.standard.Link();
-link2.source(rect);
-link2.target({ x: 300, y: 100 });
-
-graph.addCells([link1, rect, link2]);
-
-link1.findView(paper).addTools(getLinkToolsView());
-link2.findView(paper).addTools(getLinkToolsView());
diff --git a/examples/snap-links-to-themselves-js/src/styles.css b/examples/snap-links-to-themselves-js/src/styles.css
deleted file mode 100644
index fd6448ca09..0000000000
--- a/examples/snap-links-to-themselves-js/src/styles.css
+++ /dev/null
@@ -1,18 +0,0 @@
-#paper-container {
- position: absolute;
- right: 0;
- top: 0;
- left: 0;
- bottom: 0;
- overflow: auto;
-}
-
-#logo {
- position: absolute;
- bottom: 20px;
- right: 20px;
- background-color: #ffffff;
- border: 1px solid #d3d3d3;
- padding: 5px;
- box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.3);
-}
diff --git a/examples/spreadsheet-shapes-with-handsontable-js/README.md b/examples/spreadsheet-shapes-with-handsontable-js/README.md
deleted file mode 100644
index 6f61785f03..0000000000
--- a/examples/spreadsheet-shapes-with-handsontable-js/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# JointJS: Spreadsheet Shapes with Handsontable
-
-In the demo below, we reveal how we've integrated the Handsontable third-party spreadsheet library with JointJS. It includes the insertion of a table into a JointJS shape using a custom element view, aligning ports to the center of the columns, and introducing the concept of mapping with transformation functions between two separate tables.
-
-## Install
-
-From the root of the monorepo, install all dependencies:
-
-```bash
-yarn install
-yarn run build
-````
-
-## Development
-
-Run the development server from this example directory:
-
-```bash
-yarn dev
-```
-
-Then open the URL printed in the terminal (usually `http://localhost:5173`).
-
-## Build
-
-Create a production build:
-
-```bash
-yarn build
-```
-
-The output will be generated in the `dist/` directory.
-
-## Preview
-
-Preview the production build locally:
-
-```bash
-yarn preview
-```
diff --git a/examples/spreadsheet-shapes-with-handsontable-js/assets/jointjs-logo-red.svg b/examples/spreadsheet-shapes-with-handsontable-js/assets/jointjs-logo-red.svg
deleted file mode 100644
index 6a6c912fdd..0000000000
--- a/examples/spreadsheet-shapes-with-handsontable-js/assets/jointjs-logo-red.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/examples/spreadsheet-shapes-with-handsontable-js/index.html b/examples/spreadsheet-shapes-with-handsontable-js/index.html
deleted file mode 100644
index 040805ad39..0000000000
--- a/examples/spreadsheet-shapes-with-handsontable-js/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/examples/spreadsheet-shapes-with-handsontable-js/package.json b/examples/spreadsheet-shapes-with-handsontable-js/package.json
deleted file mode 100644
index 910dcb7543..0000000000
--- a/examples/spreadsheet-shapes-with-handsontable-js/package.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "name": "@joint/demo-spreadsheet-shapes-with-handsontable-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^",
- "handsontable": "^16.2.0"
- }
-}
diff --git a/examples/spreadsheet-shapes-with-handsontable-js/src/main.js b/examples/spreadsheet-shapes-with-handsontable-js/src/main.js
deleted file mode 100644
index 3de17ec8cd..0000000000
--- a/examples/spreadsheet-shapes-with-handsontable-js/src/main.js
+++ /dev/null
@@ -1,663 +0,0 @@
-import {
- dia,
- shapes,
- highlighters,
- util,
- linkTools,
-} from '@joint/core';
-import Handsontable from 'handsontable';
-import 'handsontable/dist/handsontable.min.css';
-import './styles.scss';
-
-const HotModel = dia.Element.define('HotModel', {
- size: {
- width: 300,
- height: 0
- },
- z: 1,
- data: null,
- ports: {
- groups: {
- top: {
- z: 0,
- position: {
- name: 'line',
- args: {
- start: {
- x: 50,
- y: -15
- },
- end: {
- x: 'calc(w)',
- y: -15
- }
- }
- },
- markup: util.svg/*xml*/`
-
-
-
-
-
-
-
diff --git a/examples/working-with-ports-js/package.json b/examples/working-with-ports-js/package.json
deleted file mode 100644
index 95db263e59..0000000000
--- a/examples/working-with-ports-js/package.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
- "name": "@joint/demo-working-with-ports-js",
- "private": true,
- "version": "0.0.0",
- "type": "module",
- "scripts": {
- "dev": "vite",
- "build": "tsc && vite build",
- "preview": "vite preview"
- },
- "devDependencies": {
- "vite": "^7.3.1"
- },
- "dependencies": {
- "@joint/core": "workspace:^"
- }
-}
diff --git a/examples/working-with-ports-js/src/main.js b/examples/working-with-ports-js/src/main.js
deleted file mode 100644
index 3102d903e7..0000000000
--- a/examples/working-with-ports-js/src/main.js
+++ /dev/null
@@ -1,580 +0,0 @@
-import { dia, shapes, connectors, anchors, linkTools } from '@joint/core';
-import './styles.scss';
-
-const paperContainer = document.getElementById('paper-container');
-const logsContainer = document.getElementById('logs-container');
-
-class Shape extends dia.Element {
- defaults() {
- return {
- ...super.defaults,
- type: 'Shape',
- size: { width: 140, height: 140 },
- attrs: {
- root: {
- magnet: false,
- cursor: 'move'
- },
- background: {
- fill: '#0057ff',
- width: 'calc(w)',
- height: 'calc(h)',
- opacity: 0.1
- },
- body: {
- stroke: '#333333',
- fill: '#fff',
- strokeWidth: 2,
- d:
- 'M 0 0 H calc(w) V calc(h) H 0 Z M 20 20 V calc(h-20) H calc(w-20) V 20 Z'
- },
- label: {
- x: 'calc(0.5 * w)',
- y: 'calc(h - 10)',
- textAnchor: 'middle',
- textVerticalAnchor: 'middle',
- fontSize: 13,
- fontFamily: 'sans-serif'
- }
- },
- portMarkup: [
- {
- tagName: 'path',
- selector: 'portBody',
- attributes: {
- fill: '#FFFFFF',
- stroke: '#333333',
- 'stroke-width': 2
- }
- }
- ],
- portLabelMarkup: [
- {
- tagName: 'rect',
- selector: 'portLabelBackground'
- },
- {
- tagName: 'text',
- selector: 'portLabel',
- attributes: {
- fill: '#333333'
- }
- }
- ],
- ports: {
- groups: {
- in: {
- position: 'left',
- label: {
- position: {
- name: 'outside',
- args: {
- offset: 30
- }
- }
- },
- size: { width: 20, height: 20 },
- attrs: {
- portLabelBackground: {
- ref: 'portLabel',
- fill: '#FFFFFF',
- fillOpacity: 0.7,
- x: 'calc(x - 2)',
- y: 'calc(y - 2)',
- width: 'calc(w + 4)',
- height: 'calc(h + 4)',
- pointerEvents: 'none'
- },
- portLabel: {
- fontFamily: 'sans-serif',
- pointerEvents: 'none'
- },
- portBody: {
- d:
- 'M 0 -calc(0.5 * h) h -calc(w) l 3 calc(0.5 * h) l -3 calc(0.5 * h) H 0 A calc(0.5 * h) calc(0.5 * h) 1 1 0 0 -calc(0.5 * h) Z',
- magnet: 'active'
- }
- }
- },
- out: {
- position: 'right',
- label: {
- position: {
- name: 'outside',
- args: {
- offset: 30
- }
- }
- },
- size: { width: 20, height: 20 },
- attrs: {
- portLabelBackground: {
- ref: 'portLabel',
- fill: '#FFFFFF',
- fillOpacity: 0.8,
- x: 'calc(x - 2)',
- y: 'calc(y - 2)',
- width: 'calc(w + 4)',
- height: 'calc(h + 4)',
- pointerEvents: 'none'
- },
- portLabel: {
- fontFamily: 'sans-serif',
- pointerEvents: 'none'
- },
- portBody: {
- d:
- 'M 0 -calc(0.5 * h) h calc(w) l 3 calc(0.5 * h) l -3 calc(0.5 * h) H 0 A calc(0.5 * h) calc(0.5 * h) 1 1 1 0 -calc(0.5 * h) Z',
- magnet: 'active'
- }
- }
- }
- }
- }
- };
- }
-
- preinitialize() {
- this.markup = [
- {
- tagName: 'rect',
- selector: 'background'
- },
- {
- tagName: 'path',
- selector: 'body'
- },
- {
- tagName: 'text',
- selector: 'label'
- }
- ];
- }
-}
-
-let linkIdCounter = 0;
-
-const shapeNamespace = { ...shapes, Shape };
-const graph = new dia.Graph({}, { cellNamespace: shapeNamespace });
-const paper = new dia.Paper({
- model: graph,
- cellViewNamespace: shapeNamespace,
- width: '100%',
- height: '100%',
- gridSize: 1,
- async: true,
- sorting: dia.Paper.sorting.APPROX,
- background: { color: '#F3F7F6' },
- interactive: {
- // label move is disabled by default
- labelMove: true
- },
- defaultLink: () => {
- const linkIdNumber = ++linkIdCounter;
- return new shapes.standard.DoubleLink({
- id: `link${linkIdNumber}`,
- z: -1,
- attrs: {
- line: {
- stroke: '#fff',
- strokeWidth: 14,
- targetMarker: null
- },
- outline: {
- strokeWidth: 18
- }
- },
- labels: [
- {
- attrs: {
- text: {
- text: ` Link ${linkIdNumber} `,
- fontFamily: 'sans-serif',
- fontSize: 10
- },
- rect: {
- fillOpacity: 0.9
- }
- },
- position: {
- args: {
- keepGradient: true,
- ensureLegibility: true
- }
- }
- }
- ]
- });
- },
- defaultConnectionPoint: { name: 'anchor' },
- defaultAnchor: (view, magnet, ...rest) => {
- const group = view.findAttribute('port-group', magnet);
- const anchorFn = group === 'in' ? anchors.left : anchors.right;
- return anchorFn(view, magnet, ...rest);
- },
- defaultConnector: {
- name: 'curve',
- args: {
- sourceDirection: connectors.curve.TangentDirections.RIGHT,
- targetDirection: connectors.curve.TangentDirections.LEFT
- }
- },
- validateMagnet: (sourceView, sourceMagnet) => {
- const sourceGroup = sourceView.findAttribute('port-group', sourceMagnet);
- const sourcePort = sourceView.findAttribute('port', sourceMagnet);
- const source = sourceView.model;
-
- if (sourceGroup !== 'out') {
- log(
- 'paperpowered by GarboChess.js
- - - - - - - - - - diff --git a/packages/joint-core/demo/chess/src/chess.js b/packages/joint-core/demo/chess/src/chess.js deleted file mode 100644 index 42cb5ba332..0000000000 --- a/packages/joint-core/demo/chess/src/chess.js +++ /dev/null @@ -1,513 +0,0 @@ -const KingWhite = joint.dia.Element.define('chess.KingWhite', { - size: { width: 42, height: 38 } -}, { - markup: joint.util.svg/*xml*/` -This is your portfolio now in ${currentYear}.
- -