clientIO · jamesgeorgewilliams · Feb 2, 2024
diff --git a/.gitignore b/.gitignore
@@ -8,3 +8,4 @@ node_modules/
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+package-lock.json
diff --git a/demo/archive/devs/css/shapes.devs.css b/demo/archive/devs/css/shapes.devs.css
@@ -0,0 +1,93 @@
+html,
+body {
+    height: 100%;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    overflow-y: hidden;
+}
+
+.joint-type-devs text {
+    text-transform: uppercase;
+    font-weight: 800;
+    font-family: "Source Sans Pro", sans-serif;
+}
+
+.joint-type-devs .body {
+    fill: #ffffff;
+    stroke: #31d0c6;
+    stroke-width: 6px;
+}
+
+.joint-type-devs .label {
+    fill: #31d0c6;
+    font-size: 16px;
+}
+
+.joint-type-devs .port-body {
+    stroke: #ffffff;
+    stroke-width: 3px;
+    fill: #7c68fc;
+}
+
+.joint-type-devs .port-body:hover {
+    opacity: 1;
+    fill: #ff7e5d;
+}
+
+.joint-type-devs .port-label {
+    fill: #7c68fc;
+    text-decoration: none;
+}
+
+.joint-type-devs.joint-type-devs-atomic .body {
+    stroke: #feb663;
+}
+
+.joint-type-devs.joint-type-devs-atomic .label {
+    fill: #feb663;
+}
+
+/* links */
+
+.joint-link .connection {
+    stroke: #4B4F6A;
+    stroke-width: 4px;
+}
+
+.joint-link .marker-arrowheads .marker-arrowhead,
+.joint-link .marker-vertex-group .marker-vertex,
+.joint-link .marker-vertex-group .marker-vertex:hover {
+    fill: #31D0C6;
+}
+
+.joint-link .marker-arrowheads .marker-arrowhead:hover {
+    fill: #F39C12;
+}
+
+.joint-link .link-tools .link-tool .tool-remove circle {
+    fill: #fe854f;
+}
+
+/* highlighting */
+
+.highlighted-parent .body {
+    stroke: #fe854f;
+    transition: stroke 1s;
+}
+
+.highlighted-parent .label {
+    fill: #fe854f;
+    transition: fill 1s;
+    text-decoration: underline;
+}
+
+.joint-type-devs .joint-highlight-stroke {
+    stroke: #ff7e5d;
+    stroke-width: 6px;
+    pointer-events: none;
+}
diff --git a/demo/archive/devs/index.html b/demo/archive/devs/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
+        <meta name="description" content="The JointJS Discrete Event System Specification demo serves as a template to help bring your idea to life in no time.">
+
+        <title>Discrete Event System Specification | JointJS</title>
+
+        <link rel="stylesheet" type="text/css" href="../node_modules/jointjs/dist/joint.css" />
+        <link rel="stylesheet" type="text/css" href="css/shapes.devs.css"/>
+        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet" type="text/css">
+
+    </head>
+    <body>
+
+        <div id="paper"></div>
+
+        <!-- Dependencies: -->
+        <script src="../node_modules/jquery/dist/jquery.js"></script>
+        <script src="../node_modules/lodash/lodash.js"></script>
+        <script src="../node_modules/backbone/backbone.js"></script>
+
+        <script src="../node_modules/jointjs/dist/joint.js"></script>
+
+        <script src="src/shapes.devs.js"></script>
+
+    </body>
+</html>
diff --git a/demo/archive/devs/src/shapes.devs.js b/demo/archive/devs/src/shapes.devs.js
@@ -0,0 +1,139 @@
+var graph = new joint.dia.Graph;
+
+var paper = new joint.dia.Paper({
+
+    el: document.getElementById('paper'),
+    width: 800,
+    height: 400,
+    gridSize: 1,
+    model: graph,
+    snapLinks: true,
+    linkPinning: false,
+    embeddingMode: true,
+    clickThreshold: 5,
+    defaultConnectionPoint: { name: 'boundary' },
+    highlighting: {
+        'default': {
+            name: 'stroke',
+            options: {
+                padding: 6
+            }
+        },
+        'embedding': {
+            name: 'addClass',
+            options: {
+                className: 'highlighted-parent'
+            }
+        }
+    },
+
+    validateEmbedding: function(childView, parentView) {
+        return parentView.model instanceof joint.shapes.devs.Coupled;
+    },
+
+    validateConnection: function(sourceView, sourceMagnet, targetView, targetMagnet) {
+        return sourceMagnet != targetMagnet;
+    }
+});
+
+var connect = function(source, sourcePort, target, targetPort) {
+
+    var link = new joint.shapes.devs.Link({
+        source: {
+            id: source.id,
+            port: sourcePort
+        },
+        target: {
+            id: target.id,
+            port: targetPort
+        }
+    });
+
+    link.addTo(graph).reparent();
+};
+
+var c1 = new joint.shapes.devs.Coupled({
+    position: {
+        x: 230,
+        y: 50
+    },
+    size: {
+        width: 300,
+        height: 300
+    }
+});
+
+c1.set('inPorts', ['in']);
+c1.set('outPorts', ['out 1', 'out 2']);
+
+var a1 = new joint.shapes.devs.Atomic({
+    position: {
+        x: 360,
+        y: 260
+    },
+    inPorts: ['xy'],
+    outPorts: ['x', 'y']
+});
+
+var a2 = new joint.shapes.devs.Atomic({
+    position: {
+        x: 50,
+        y: 160
+    },
+    outPorts: ['out']
+});
+
+var a3 = new joint.shapes.devs.Atomic({
+    position: {
+        x: 650,
+        y: 50
+    },
+    size: {
+        width: 100,
+        height: 300
+    },
+    inPorts: ['a', 'b']
+});
+
+[c1, a1, a2, a3].forEach(function(element) {
+    element.attr({
+        '.body': {
+            'rx': 6,
+            'ry': 6
+        }
+    });
+});
+
+graph.addCells([c1, a1, a2, a3]);
+
+c1.embed(a1);
+
+connect(a2, 'out', c1, 'in');
+connect(c1, 'in', a1, 'xy');
+connect(a1, 'x', c1, 'out 1');
+connect(a1, 'y', c1, 'out 2');
+connect(c1, 'out 1', a3, 'a');
+connect(c1, 'out 2', a3, 'b');
+
+// Interactions
+
+var strokeDasharrayPath = '.body/strokeDasharray';
+
+paper.on('element:pointerdblclick', function(elementView) {
+    var element = elementView.model;
+    if (element.get('type') === 'devs.Atomic') {
+        toggleDelegation(element);
+    }
+});
+
+paper.setInteractivity(function(elementView) {
+    return {
+        stopDelegation: !elementView.model.attr(strokeDasharrayPath)
+    };
+});
+
+toggleDelegation(a1);
+
+function toggleDelegation(element) {
+    element.attr(strokeDasharrayPath, element.attr(strokeDasharrayPath) ? '' : '15,1');
+}
diff --git a/demo/archive/erd/css/erd.css b/demo/archive/erd/css/erd.css
@@ -0,0 +1,28 @@
+html,
+body {
+    height: 100%;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    overflow-y: hidden;
+}
+
+#paper {
+    width: inherit;
+    display: block;
+    border: 0;
+    margin-bottom: 3px;
+    text-align: center;
+    background: #464a65;
+}
+#paper>svg {
+    overflow: visible;
+}
+.connection,
+.connection-wrap {
+    stroke: #ccc0ef;
+}
diff --git a/demo/archive/erd/index.html b/demo/archive/erd/index.html
@@ -0,0 +1,24 @@
+<!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="The JointJS ER diagrams demo serves as a template to help bring your idea to life in no time.">
+
+        <title>ER Diagrams | JointJS</title>
+
+        <link rel="stylesheet" type="text/css" href="../node_modules/jointjs/dist/joint.css" />
+        <link rel="stylesheet" type="text/css" href="css/erd.css" />
+    </head>
+    <body>
+        <div id="paper"></div>
+
+        <script src="../node_modules/jquery/dist/jquery.js"></script>
+        <script src="../node_modules/lodash/lodash.js"></script>
+        <script src="../node_modules/backbone/backbone.js"></script>
+
+        <script src="../node_modules/jointjs/dist/joint.js"></script>
+        <script src="src/erd.js"></script>
+
+    </body>
+</html>