clientIO · MartinKanera · Mar 7, 2025 · Mar 7, 2025 · Mar 8, 2025 · Mar 8, 2025
diff --git a/examples/layout-msagl/.gitignore b/examples/layout-msagl/.gitignore
@@ -0,0 +1,3 @@
+build/
+dist/
+node_modules/
diff --git a/examples/layout-msagl/README.md b/examples/layout-msagl/README.md
@@ -0,0 +1,22 @@
+# JointJS MSAGL 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-2025 client IO
diff --git a/examples/layout-msagl/css/styles.css b/examples/layout-msagl/css/styles.css
@@ -0,0 +1,87 @@
+html,
+body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+body {
+    height: 100vh;
+}
+
+* {
+    font-family: sans-serif;
+}
+
+#controls {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    bottom: 50px;
+    right: 50px;
+    width: 275px;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: white;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+}
+
+#controls > div {
+    display: flex;
+    gap: 20px;
+}
+
+#controls > div > input, #controls > div > select {
+    flex: 1;
+}
+
+#connections-list {
+    position: absolute;
+    bottom: 50px;
+    left: 50px;
+    max-width: 180px;
+    max-height: 150px;
+    overflow-y: auto;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: white;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+}
+
+#connections-list .connection-list-item, #connections-list > h3 {
+    padding: 4px;
+}
+
+#connections-list .element-list {
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    gap: 4px;
+    width: auto;
+}
+
+#connections-list .connection-list-item {
+    cursor: pointer;
+    font-size: 13px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+}
+
+#connections-list .connection-list-item:hover {
+    background-color: #f0f0f0;
+}
+
+#connections-list .connection-list-item > svg {
+    pointer-events: none;
+}
+
+#connections-list > h3 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: normal;
+}
diff --git a/examples/layout-msagl/index.html b/examples/layout-msagl/index.html
@@ -0,0 +1,35 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Layout MSAGL | JointJS</title>
+    <link rel="stylesheet" href="dist/styles.css"/>
+  </head>
+  <body>
+    <div id="paper"></div>
+    <div id="connections-list" style="display: none;"></div>
+    <div id="controls">
+      <div>
+        <label>
+        Layout direction:
+      </label>
+      <select id="layout-direction">
+        <option value="0" selected>Top to Bottom</option>
+        <option value="1">Left to Right</option>
+        <option value="2">Bottom to Top</option>
+        <option value="3">Right to Left</option>
+      </select>
+      </div>
+      <div>
+        <label>Node separation:</label>
+        <input type="range" id="node-separation" min="50" max="200" step="1" value="50"/>
+      </div>
+      <div>
+        <label>Layer separation:</label>
+        <input type="range" id="layer-separation" min="50" max="200" step="1" value="50"/>
+      </div>
+    </div>
+    <script src="dist/bundle.js"></script>
+  </body>
+</html>
diff --git a/examples/layout-msagl/package.json b/examples/layout-msagl/package.json
@@ -0,0 +1,53 @@
+{
+    "name": "@joint/demo-layout-msagl",
+    "version": "4.1.3",
+    "main": "src/index.ts",
+    "homepage": "https://jointjs.com",
+    "author": {
+        "name": "client IO",
+        "url": "https://client.io"
+    },
+    "contributors": [
+        "Roman Bruckner <[email protected]> (https://github.com/kumilingus)",
+        "Martin Kanera <[email protected]> (https://github.com/MartinKanera)"
+    ],
+    "licenses": [
+        {
+            "type": "JointJS+ License",
+            "url": "https://www.jointjs.com/license"
+        }
+    ],
+    "private": true,
+    "files": [
+        "src/",
+        "./index.html",
+        "./README.md",
+        "./tsconfig.json",
+        "./webpack.config.js"
+    ],
+    "installConfig": {
+        "hoistingLimits": "workspaces"
+    },
+    "scripts": {
+        "start": "webpack-dev-server",
+        "build": "webpack"
+    },
+    "dependencies": {
+        "@joint/core": "workspace:^",
+        "@joint/layout-msagl": "workspace:^"
+    },
+    "devDependencies": {
+        "css-loader": "^6.8.1",
+        "style-loader": "^3.3.3",
+        "ts-loader": "^9.2.5",
+        "typescript": "^5.7.3",
+        "webpack": "^5.53.0",
+        "webpack-cli": "^4.8.0",
+        "webpack-dev-server": "^4.2.1"
+    },
+    "volta": {
+        "node": "16.18.1",
+        "npm": "8.19.2",
+        "yarn": "3.4.1"
+    }
+}
diff --git a/examples/layout-msagl/src/ElementController.ts b/examples/layout-msagl/src/ElementController.ts
@@ -0,0 +1,171 @@
+import { dia, linkTools, mvc } from '@joint/core';
+import { Ellipse, Rectangle, Triangle, isButton } from './shapes';
+import { runLayout, createExistingElementListItem, isBridge, createNewElementListItem } from './utils';
+import { addEffect, effects, removeEffect } from './effects';
+import { RemoveTool } from './RemoveTool';
+
+interface ElementControllerArgs {
+    graph: dia.Graph;
+    paper: dia.Paper;
+}
+
+export class ElementController extends mvc.Listener<[ElementControllerArgs]> {
+
+    get context() {
+        return this.callbackArguments[0];
+    }
+
+    constructor(args: ElementControllerArgs) {
+        super(args);
+    }
+
+    startListening() {
+        const { paper, graph } = this.context;
+
+        this.listenTo(graph, {
+            'add': onAdd,
+            'remove': onRemove
+        })
+
+        this.listenTo(paper, {
+            'link:connect': onLinkConnect,
+            'link:pointerclick': onLinkPointerClick,
+            'blank:pointerclick': onBlankPointerClick,
+            'element:pointerclick': onElementPointerClick,
+            'cell:highlight': onCellHighlight,
+            'cell:unhighlight': onCellUnhighlight
+        })
+    }
+}
+
+function onAdd({ paper }: ElementControllerArgs, cell: dia.Cell, _collection: mvc.Collection, opt: any) {
+    if (cell.isLink() || isButton(cell) || opt.preview) return;
+
+    closeConnectionsList(paper);
+    openConnectionsList(paper, cell as dia.Element);
+}
+
+function onRemove({ paper }: ElementControllerArgs, _cell: dia.Cell, _: any, opt: any) {
+    if (!opt.ui) return;
+    runLayout(paper);
+}
+
+function onLinkConnect({ paper, graph }: ElementControllerArgs, linkView: dia.LinkView) {
+    const { model } = linkView;
+
+    const button = model.getSourceElement();
+
+    // Button has only one neighbor
+    const [parent] = graph.getNeighbors(button, { inbound: true });
+    model.source({ id: parent.id });
+
+    runLayout(paper);
+}
+
+// Add a function to handle link clicks
+function onLinkPointerClick({ paper, graph }: ElementControllerArgs, linkView: dia.LinkView) {
+    paper.removeTools();
+
+    // Only show remove tool if removing the link won't break the graph
+    if (!isBridge(graph, linkView.model)) {
+        const removeTool = new linkTools.Remove();
+        linkView.addTools(new dia.ToolsView({
+            tools: [removeTool]
+        }));
+    }
+}
+
+function onBlankPointerClick({ paper }: ElementControllerArgs) {
+    closeConnectionsList(paper);
+    paper.removeTools();
+}
+
+function onElementPointerClick({ paper, graph }: ElementControllerArgs, elementView: dia.ElementView) {
+
+    closeConnectionsList(paper);
+    paper.removeTools();
+    const { model } = elementView;
+
+    if (!isButton(model)) {
+        // Add remove button
+        if (graph.isSource(model)) return;
+        const removeButton = new RemoveTool({
+            x: '100%',
+            y: '50%',
+            offset: { x: 10 }
+        });
+
+        const elementsTools = new dia.ToolsView({
+            tools: [removeButton]
+        });
+
+        elementView.addTools(elementsTools);
+        return;
+    }
+
+    const [parent] = graph.getNeighbors(model, { inbound: true });
+    openConnectionsList(paper, parent);
+}
+
+function onCellHighlight(_context: ElementControllerArgs, cellView: dia.CellView, _node: SVGElement, { type }: { type: dia.CellView.Highlighting }) {
+    if (type !== dia.CellView.Highlighting.CONNECTING) return;
+
+    addEffect(cellView, effects.CONNECTION_SOURCE);
+}
+
+function onCellUnhighlight({ paper }: ElementControllerArgs, _cellView: dia.CellView, _node: SVGElement, { type }: { type: dia.CellView.Highlighting }) {
+    if (type !== dia.CellView.Highlighting.CONNECTING) return;
+
+    removeEffect(paper, effects.CONNECTION_SOURCE);
+}
+
+const connectionsList = document.querySelector<HTMLDivElement>('#connections-list')!;
+
+function openConnectionsList(paper: dia.Paper, parent: dia.Element) {
+    connectionsList.style.display = 'block';
+
+    addEffect(parent.findView(paper), effects.CONNECTION_SOURCE);
+
+    const graph = paper.model;
+
+    // New Connections
+    const addElementSubtitle = document.createElement('h3');
+    addElementSubtitle.textContent = 'Add element:';
+    connectionsList.appendChild(addElementSubtitle);
+
+    const addElementList = document.createElement('div');
+    addElementList.classList.add('element-list');
+
+    const newRectItem = createNewElementListItem(Rectangle.create(), parent, paper);
+    const newEllipseItem = createNewElementListItem(Ellipse.create(), parent, paper);
+    const newTriangleItem = createNewElementListItem(Triangle.create(), parent, paper);
+
+    addElementList.appendChild(newRectItem);
+    addElementList.appendChild(newEllipseItem);
+    addElementList.appendChild(newTriangleItem);
+
+    connectionsList.appendChild(addElementList);
+
+    // Existing Connections
+    const connectionsSubtitle = document.createElement('h3');
+    connectionsSubtitle.textContent = 'Make connection to:';
+    connectionsList.appendChild(connectionsSubtitle);
+
+    const availableConnections = document.createElement('div');
+    availableConnections.classList.add('element-list');
+
+    const elements = graph.getElements().filter((element) => !isButton(element) && element.id !== parent.id);
+
+    elements.forEach((element) => {
+        availableConnections.appendChild(createExistingElementListItem(parent, element, paper));
+    });
+
+    connectionsList.appendChild(availableConnections);
+}
+
+function closeConnectionsList(paper: dia.Paper) {
+    connectionsList.style.display = 'none';
+    // Clear all child elements from the connections list
+    connectionsList.innerHTML = '';
+    removeEffect(paper, effects.CONNECTION_SOURCE);
+}