clientIO · zbynekstara · Dec 8, 2023 · Nov 29, 2023 · Nov 29, 2023 · Nov 29, 2023
diff --git a/packages/joint-core/demo/archive/basic.html b/packages/joint-core/demo/archive/basic.html
@@ -45,12 +45,7 @@
 
         <div id="paper"></div>
 
-        <!-- Dependencies: -->
-        <script src="../../node_modules/jquery/dist/jquery.js"></script>
-        <script src="../../node_modules/lodash/lodash.js"></script>
-
         <script src="../../build/joint.js"></script>
-
         <script src="./basic.js"></script>
 
     </body>

diff --git a/packages/joint-core/demo/archive/basic.js b/packages/joint-core/demo/archive/basic.js
@@ -3,7 +3,7 @@
 var graph = new joint.dia.Graph;
 
 var paper = new joint.dia.Paper({
-    el: $('#paper'),
+    el: document.getElementById('paper'),
     width: 650,
     height: 400,
     gridSize: 20,

diff --git a/packages/joint-core/demo/archive/clipping.html b/packages/joint-core/demo/archive/clipping.html
@@ -19,10 +19,6 @@
 
         <div id="paper"></div>
 
-        <!-- Dependencies: -->
-        <script src="../../node_modules/jquery/dist/jquery.js"></script>
-        <script src="../../node_modules/lodash/lodash.js"></script>
-
         <script src="../../build/joint.js"></script>
 
         <script src="./clipping.js"></script>

diff --git a/packages/joint-core/demo/archive/links.html b/packages/joint-core/demo/archive/links.html
@@ -19,10 +19,6 @@
         <label>Perpendicular links</label><input type="checkbox" id="perpendicularLinks" />
         <div id="paper"></div>
 
-        <!-- Dependencies: -->
-        <script src="../../node_modules/jquery/dist/jquery.js"></script>
-        <script src="../../node_modules/lodash/lodash.js"></script>
-
         <script src="../../build/joint.js"></script>
 
         <script src="./links.js"></script>

diff --git a/packages/joint-core/demo/archive/links.js b/packages/joint-core/demo/archive/links.js
@@ -42,8 +42,8 @@ paper.on('link:connect', function(linkView, evt, connectedToView, magnetElement,
     console.log('link:connect', type, connectedToView, magnetElement);
 });
 
-$('#perpendicularLinks').on('change', function() {
-    paper.options.perpendicularLinks = $(this).is(':checked') ? true : false;
+document.getElementById('perpendicularLinks').addEventListener('change', function(evt) {
+    paper.options.perpendicularLinks = evt.target.checked ? true : false;
 });
 
 // custom link definition

diff --git a/packages/joint-core/demo/bandwidth/index.html b/packages/joint-core/demo/bandwidth/index.html
@@ -13,9 +13,6 @@
     <body>
         <div id="paper"></div>
 
-        <script src="../../node_modules/jquery/dist/jquery.js"></script>
-        <script src="../../node_modules/lodash/lodash.js"></script>
-
         <script src="../../build/joint.js"></script>
 
         <script src="src/bandwidth.js"></script>

diff --git a/packages/joint-core/demo/bus/index.html b/packages/joint-core/demo/bus/index.html
@@ -14,10 +14,6 @@
 
         <div id="paper"></div>
 
-        <!-- Dependencies: -->
-        <script src="../../node_modules/jquery/dist/jquery.js"></script>
-        <script src="../../node_modules/lodash/lodash.js"></script>
-
         <script src="../../build/joint.js"></script>
         <script src="src/joint.shapes.mix.js"></script>
         <script src="src/bus.js"></script>

diff --git a/packages/joint-core/demo/chess/index.html b/packages/joint-core/demo/chess/index.html
@@ -16,9 +16,6 @@
 
         <div id="message"></div>
 
-        <script src="../../node_modules/jquery/dist/jquery.js"></script>
-        <script src="../../node_modules/lodash/lodash.js"></script>
-
         <script src="../../build/joint.js"></script>
         <script src="src/garbochess.js"></script>
         <script src="src/chess.js"></script>

diff --git a/packages/joint-core/demo/container/index.html b/packages/joint-core/demo/container/index.html
@@ -15,7 +15,6 @@
         <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/graphlib/dist/graphlib.min.js"></script>
         <script src="../../node_modules/dagre/dist/dagre.min.js"></script>

diff --git a/packages/joint-core/demo/curves/index.html b/packages/joint-core/demo/curves/index.html
@@ -10,8 +10,6 @@
     </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="../../build/joint.js"></script>
         <script src="src/curves.js"></script>
     </body>

diff --git a/packages/joint-core/demo/devs/index.html b/packages/joint-core/demo/devs/index.html
@@ -17,9 +17,6 @@
         <div id="paper"></div>
 
         <!-- Dependencies: -->
-        <script src="../../node_modules/jquery/dist/jquery.js"></script>
-        <script src="../../node_modules/lodash/lodash.js"></script>
-
         <script src="../../build/joint.js"></script>
 
         <script src="src/shapes.devs.js"></script>

diff --git a/packages/joint-core/demo/dgl/package.json b/packages/joint-core/demo/dgl/package.json
@@ -15,18 +15,13 @@
     "build": "webpack --config webpack.config.js",
     "start": "webpack serve --config webpack.config.js"
   },
-  "dependencies": {
-    "jquery": "~3.5.1",
-    "lodash": "~4.17.20"
-  },
   "devDependencies": {
     "@babel/core": "7.10.4",
     "@babel/preset-env": "7.10.4",
     "babel-loader": "8.1.0",
     "copy-webpack-plugin": "5.1.1",
     "core-js": "3.6.1",
     "css-loader": "3.5.3",
-    "elkjs": "0.6.2",
     "file-loader": "6.0.0",
     "regenerator-runtime": "0.13.5",
     "sass": "1.26.8",

diff --git a/packages/joint-core/demo/dgl/src/directed-graph.mjs b/packages/joint-core/demo/dgl/src/directed-graph.mjs
@@ -1,6 +1,15 @@
 import * as dagre from 'dagre';
 import * as joint from '../../../joint.mjs';
 
+function val(view, selector, val) {
+    var el = view.el.querySelector(selector);
+    if (!el) return null;
+    if (val === undefined) {
+        return el.value;
+    }
+    el.value = val;
+}
+
 var Shape = joint.dia.Element.define('demo.Shape', {
     z: 2,
     size: {
@@ -180,12 +189,12 @@ var LayoutControls = joint.mvc.View.extend({
             graphlib: dagre.graphlib,
             setVertices: true,
             setLabels: true,
-            ranker: this.$('#ranker').val(),
-            rankDir: this.$('#rankdir').val(),
-            align: this.$('#align').val(),
-            rankSep: parseInt(this.$('#ranksep').val(), 10),
-            edgeSep: parseInt(this.$('#edgesep').val(), 10),
-            nodeSep: parseInt(this.$('#nodesep').val(), 10)
+            ranker: val(this, '#ranker'),
+            rankDir: val(this, '#rankdir'),
+            align: val(this, '#align'),
+            rankSep: parseInt(val(this, '#ranksep'), 10),
+            edgeSep: parseInt(val(this, '#edgesep'), 10),
+            nodeSep: parseInt(val(this, '#nodesep'), 10)
         };
     },
 
@@ -254,18 +263,18 @@ var LinkControls = joint.mvc.View.extend({
 
         var link = this.options.cellView.model;
 
-        this.$('#labelpos').val(link.get('labelPosition'));
-        this.$('#labeloffset').val(link.get('labelOffset'));
-        this.$('#minlen').val(link.get('minLen'));
-        this.$('#weight').val(link.get('weight'));
+        val(this, '#labelpos', link.get('labelPosition'));
+        val(this, '#labeloffset', link.get('labelOffset'));
+        val(this, '#minlen', link.get('minLen'));
+        val(this, '#weight', link.get('weight'));
     },
 
     getModelAttributes: function() {
         return {
-            minLen: parseInt(this.$('#minlen').val(), 10),
-            weight: parseInt(this.$('#weight').val(), 10),
-            labelPosition: this.$('#labelpos').val(),
-            labelOffset: parseInt(this.$('#labeloffset').val(), 10)
+            minLen: parseInt(val(this, '#minlen'), 10),
+            weight: parseInt(val(this, '#weight'), 10),
+            labelPosition: val(this, '#labelpos'),
+            labelOffset: parseInt(val(this, '#labeloffset'), 10)
         };
     },
 
@@ -289,7 +298,7 @@ var LinkControls = joint.mvc.View.extend({
             el: this.template.cloneNode(true),
             cellView: linkView
         });
-        this.instance.$el.insertAfter('#layout-controls');
+        document.getElementById('layout-controls').after(this.instance.el);
     },
 
     remove: function() {