clientIO · kumilingus · May 4, 2026 · Apr 1, 2026 · Apr 7, 2026 · Apr 9, 2026
diff --git a/examples/right-angle-playground-js/index.html b/examples/right-angle-playground-js/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A playground for the right-angle router with movable vertices, anchors, and a resize handle.">
+    <title>JointJS: Right Angle Router Playground</title>
+</head>
+
+<body id="app">
+    <div id="paper-container"></div>
+    <!-- Application files: -->
+    <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
diff --git a/examples/right-angle-playground-js/package.json b/examples/right-angle-playground-js/package.json
@@ -0,0 +1,17 @@
+{
+    "name": "@joint/demo-right-angle-playground-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/right-angle-playground-js/src/main.js b/examples/right-angle-playground-js/src/main.js
@@ -0,0 +1,137 @@
+import { dia, shapes, linkTools, elementTools } from '@joint/core';
+import './styles.css';
+
+class ResizeTool extends elementTools.Control {
+    getPosition(view) {
+        const model = view.model;
+        const { width, height } = model.size();
+        return { x: width, y: height };
+    }
+
+    setPosition(view, coordinates) {
+        const model = view.model;
+        model.resize(
+            Math.max(Math.round(coordinates.x / 10) * 10, 50),
+            Math.max(Math.round(coordinates.y / 10) * 10, 50)
+        );
+    }
+}
+
+const graph = new dia.Graph({}, { cellNamespace: shapes });
+
+const paper = new dia.Paper({
+    el: document.getElementById('paper-container'),
+    width: '100%',
+    height: '100%',
+    gridSize: 10,
+    async: true,
+    frozen: true,
+    model: graph,
+    cellViewNamespace: shapes,
+    defaultRouter: { name: 'rightAngle', args: {
+        useVertices: true,
+        margin: 40,
+        minPathMargin: 10,
+        //sourceMargin: 40,
+        //targetMargin: 30
+    }},
+    defaultConnector: { name: 'rounded' },
+    background: {
+        color: '#151D29'
+    },
+    defaultLinkAnchor: {
+        name: 'connectionRatio',
+        args: {
+            ratio: 0.25
+        }
+    }
+});
+
+paper.setGrid({ name: 'dot'});
+
+const rect = new shapes.standard.Rectangle({
+    position: { x: 120, y: 120 },
+    size: { width: 220, height: 60 },
+    attrs: {
+        body: {
+            stroke: 'none',
+            fill: '#DF423D',
+            rx: 10,
+            ry: 10,
+        }
+    }
+});
+
+const rect2 = rect.clone();
+
+rect2.resize(60, 220);
+rect2.position(300, 250);
+
+const link = new shapes.standard.Link({
+    attrs: {
+        line: {
+            stroke: 'white'
+        }
+    }
+});
+
+link.source({ id: rect.id, anchor: { name: 'top' }});
+link.target({ id: rect2.id, anchor: { name: 'right' }});
+
+graph.addCells([rect, rect2, link]);
+
+rect.findView(paper).addTools(
+    new dia.ToolsView({
+        tools: [
+            new ResizeTool({
+                selector: 'body',
+
+            })
+        ]
+    })
+);
+
+rect2.findView(paper).addTools(
+    new dia.ToolsView({
+        tools: [
+            new ResizeTool({
+                selector: 'body'
+            })
+        ]
+    })
+);
+
+const linkToolsView = new dia.ToolsView({
+    tools: [
+        new linkTools.Vertices({
+            focusOpacity: 0.5,
+        }),
+        new linkTools.TargetAnchor({
+            focusOpacity: 0.5,
+            scale: 1.2
+        }),
+        new linkTools.SourceAnchor({
+            focusOpacity: 0.5,
+            scale: 1.2
+        }),
+    ]
+});
+
+link.findView(paper).addTools(linkToolsView);
+
+function scaleToFit() {
+    const graphBBox = graph.getBBox();
+    paper.transformToFitContent({
+        contentArea: graphBBox.clone().inflate(0, 100)
+    });
+    const { sy } = paper.scale();
+    const area = paper.getArea();
+    const yTop = area.height / 2 - graphBBox.y - graphBBox.height / 2;
+    const xLeft = area.width / 2 - graphBBox.x - graphBBox.width / 2;
+    paper.translate(xLeft * sy, yTop * sy);
+}
+
+window.addEventListener('resize', () => scaleToFit());
+scaleToFit();
+
+paper.unfreeze();
diff --git a/examples/right-angle-playground-js/src/styles.css b/examples/right-angle-playground-js/src/styles.css
@@ -0,0 +1,17 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: #151D29;
+    width: 100%;
+    height: 100vh;
+}
+
+#paper-container {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+}