refactor!: JQuery Removal

packages/joint-core/demo/shapes/src/table.js

@@ -234,7 +234,7 @@ joint.shapes.basic.TableView = joint.dia.ElementView.extend({
 
         this._elements = [];
         var info = this.model.prop('table/metadata');
-        var tableEl = this.findBySelector(info.element, this.el);
+        var tableEl = this.findNode(info.element);
         this.tableVel = tableEl ? V(tableEl[0]) : this.vel;
 
         this._renderFills();

packages/joint-core/docs/src/joint/api/dia/CellView/prototype/findBySelector.html → packages/joint-core/docs/src/joint/api/dia/CellView/prototype/findNode.html

@@ -1,4 +1,4 @@
-<pre class="docs-method-signature"><code>cellView.findBySelector(selector)</code></pre>
+<pre class="docs-method-signature"><code>cellView.findNode(selector)</code></pre>
 
 <p>The method returns an array of DOM nodes matching the <code>selector</code>.</p>
 

packages/joint-core/src/connectionPoints/index.mjs

@@ -131,7 +131,7 @@ function boundaryIntersection(line, view, magnet, opt) {
     var anchor = line.end;
 
     if (typeof selector === 'string') {
-        node = view.findBySelector(selector)[0];
+        node = view.findNode(selector)[0];
     } else if (selector === false) {
         node = magnet;
     } else if (Array.isArray(selector)) {

packages/joint-core/src/dia/CellView.mjs

@@ -202,9 +202,6 @@ export const CellView = View.extend({
 
     findBySelector: function(selector, root, selectors) {
 
-        root || (root = this.el);
-        selectors || (selectors = this.selectors);
-
         // These are either descendants of `this.$el` of `this.$el` itself.
         // `.` is a special selector used to select the wrapping `<g>` element.
         if (!selector || selector === '.') return [root];
@@ -223,6 +220,10 @@ export const CellView = View.extend({
         return [];
     },
 
+    findNode: function(selector) {
+        return this.findBySelector(selector, this.el, this.selectors);
+    },
+
     notify: function(eventName) {
 
         if (this.paper) {
@@ -302,7 +303,7 @@ export const CellView = View.extend({
         const { el: rootNode } = this;
         let node;
         if (typeof el === 'string') {
-            [node = rootNode] = this.findBySelector(el);
+            [node = rootNode] = this.findNode(el);
         } else {
             [node = rootNode] = this.$(el);
         }
@@ -375,7 +376,7 @@ export const CellView = View.extend({
         el || (el = this.el);
         const nodeSelector = el.getAttribute(`${type}-selector`);
         if (nodeSelector) {
-            const [proxyNode] = this.findBySelector(nodeSelector);
+            const [proxyNode] = this.findNode(nodeSelector);
             if (proxyNode) return proxyNode;
         }
         return el;
@@ -460,21 +461,20 @@ export const CellView = View.extend({
 
     getMagnetFromLinkEnd: function(end) {
 
-        var root = this.el;
         var port = end.port;
         var selector = end.magnet;
         var model = this.model;
         var magnet;
         if (port != null && model.isElement() && model.hasPort(port)) {
-            magnet = this.findPortNode(port, selector) || root;
+            magnet = this.findPortNode(port, selector) || this.el;
         } else {
             if (!selector) selector = end.selector;
             if (!selector && port != null) {
                 // link end has only `id` and `port` property referencing
                 // a port created via the `port` attribute (not API).
                 selector = '[port="' + port + '"]';
             }
-            magnet = this.findBySelector(selector, root, this.selectors)[0];
+            magnet = this.findNode(selector)[0];
         }
 
         return this.findProxyNode(magnet, 'magnet');

packages/joint-core/src/dia/ElementView.mjs

@@ -566,7 +566,7 @@ export const ElementView = CellView.extend({
                 const proxyPortNode = this.findPortNode(port, nodeSelector);
                 if (proxyPortNode) return proxyPortNode;
             } else {
-                const [proxyNode] = this.findBySelector(nodeSelector);
+                const [proxyNode] = this.findNode(nodeSelector);
                 if (proxyNode) return proxyNode;
             }
         }

packages/joint-core/src/dia/HighlighterView.mjs

@@ -55,7 +55,7 @@ export const HighlighterView = mvc.View.extend({
     findNode(cellView, nodeSelector = null) {
         let el;
         if (typeof nodeSelector === 'string') {
-            [el] = cellView.findBySelector(nodeSelector);
+            [el] = cellView.findNode(nodeSelector);
         } else if (isPlainObject(nodeSelector)) {
             const isLink = cellView.model.isLink();
             const { label = null, port, selector } = nodeSelector;
@@ -67,7 +67,7 @@ export const HighlighterView = mvc.View.extend({
                 el = cellView.findPortNode(port, selector);
             } else {
                 // Cell Selector
-                [el] = cellView.findBySelector(selector);
+                [el] = cellView.findNode(selector);
             }
         } else if (nodeSelector) {
             el = V.toNode(nodeSelector);

packages/joint-core/src/dia/LinkView.mjs

@@ -1363,7 +1363,7 @@ export const LinkView = CellView.extend({
         var connection;
         if (typeof selector === 'string') {
             // Use custom connection path.
-            connection = this.findBySelector(selector, this.el, this.selectors)[0];
+            connection = this.findNode(selector)[0];
         } else {
             // Select connection path automatically.
             var cache = this._V;

packages/joint-core/src/dia/attributes/index.mjs

@@ -342,7 +342,7 @@ const attributesNS = {
                 if (isObject(textPath)) {
                     const pathSelector = textPath.selector;
                     if (typeof pathSelector === 'string') {
-                        const [pathNode] = this.findBySelector(pathSelector);
+                        const [pathNode] = this.findNode(pathSelector);
                         if (pathNode instanceof SVGPathElement) {
                             textPath = assign({ 'xlink:href': '#' + pathNode.id }, textPath);
                         }

packages/joint-core/src/elementTools/Control.mjs

@@ -95,7 +95,7 @@ export const Control = ToolView.extend({
             this.toggleExtras(false);
             return;
         }
-        const [magnet] = relatedView.findBySelector(selector);
+        const [magnet] = relatedView.findNode(selector);
         if (!magnet) throw new Error('Control: invalid selector.');
         let padding = options.padding;
         if (!isFinite(padding)) padding = 0;

packages/joint-core/src/linkTools/Connect.mjs

@@ -45,7 +45,7 @@ export const Connect = Button.extend({
                 break;
             }
             case 'string': {
-                [magnetNode] = relatedView.findBySelector(magnet);
+                [magnetNode] = relatedView.findNode(magnet);
                 break;
             }
             default: {

packages/joint-core/src/mvc/Dom/events.mjs

@@ -58,7 +58,7 @@ special.dbltap = {
         if (delta < maxDelay && delta > minDelay) {
             targetData.lastTouch = null;
             event.type = handleObj.origType;
-            // let jQuery handle the triggering of "dbltap" event handlers
+            // let $ handle the triggering of "dbltap" event handlers
             handleObj.handler.call(this, event, ...args);
         } else {
             targetData.lastTouch = now;

packages/joint-core/src/mvc/Dom/methods.mjs

@@ -132,7 +132,7 @@ export function attr(name, value) {
             attributes = { [name]: value };
         }
     } else if (!name) {
-        throw new Error('no styles provided');
+        throw new Error('no attributes provided');
     } else {
         attributes = name;
     }

packages/joint-core/src/mvc/index.mjs

@@ -7,3 +7,4 @@ export * from './ViewBase.mjs';
 export * from './mvcUtils.mjs';
 export { default as Data } from './Data.mjs';
 export { default as $ } from './Dom/index.mjs';
+export * from './Dom/Event.mjs';

packages/joint-core/test/jointjs/cellView.js

@@ -155,7 +155,7 @@ QUnit.module('cellView', function(hooks) {
                     `
                 }].forEach(attributes => {
                     cell.set(attributes);
-                    const [a] = cellView.findBySelector('a');
+                    const [a] = cellView.findNode('a');
                     const bbox = V(a).getBBox({ target: cellView.el });
                     assert.equal(bbox.x, ax + gx);
                     assert.equal(bbox.y, ay + gy);

packages/joint-core/test/jointjs/connectionPoints.js

@@ -282,11 +282,11 @@ QUnit.module('connectionPoints', function(hooks) {
                 }]);
                 // lookup off
                 line = new g.Line(tp.clone(), sp.clone());
-                cp = connectionPointFn.call(lv1, line, rv1, rv1.findBySelector('wrapper')[0], { selector: false });
+                cp = connectionPointFn.call(lv1, line, rv1, rv1.findNode('wrapper')[0], { selector: false });
                 assert.ok(cp.round().equals(r1.getBBox().rightMiddle()));
                 // lookup on
                 line = new g.Line(tp.clone(), sp.clone());
-                cp = connectionPointFn.call(lv1, line, rv1, rv1.findBySelector('wrapper')[0], { selector: undefined });
+                cp = connectionPointFn.call(lv1, line, rv1, rv1.findNode('wrapper')[0], { selector: undefined });
                 assert.ok(cp.round().equals(r1.getBBox().center().offset(25, 0)));
             });
 

packages/joint-core/test/jointjs/dia/attributes.js

@@ -134,7 +134,7 @@ QUnit.module('Attributes', function() {
                 var el = new TestElement();
                 el.addTo(graph);
                 var view = el.findView(paper);
-                var text = view.findBySelector('text')[0];
+                var text = view.findNode('text')[0];
                 var tspans = text.childNodes;
                 assert.equal(text.getAttribute('x'), '51');
                 assert.equal(tspans[0].getAttribute('x'), null);
@@ -170,7 +170,7 @@ QUnit.module('Attributes', function() {
 
                 paper.options.embeddingMode = true;
                 cell.attr(['root', 'containerSelector'], 'body');
-                var body = cellView.findBySelector('body')[0];
+                var body = cellView.findNode('body')[0];
 
                 var highlightSpy = sinon.spy();
                 var unhighlightSpy = sinon.spy();
@@ -201,7 +201,7 @@ QUnit.module('Attributes', function() {
             QUnit.test('highlighting, magnet, validation', function(assert) {
 
                 cell.attr(['root', 'magnetSelector'], 'body');
-                var body = cellView.findBySelector('body')[0];
+                var body = cellView.findNode('body')[0];
 
                 var highlightSpy = sinon.spy();
                 var unhighlightSpy = sinon.spy();
@@ -242,7 +242,7 @@ QUnit.module('Attributes', function() {
             QUnit.test('highlighting, magnet, validation', function(assert) {
 
                 cell.attr(['root', 'highlighterSelector'], 'body');
-                var body = cellView.findBySelector('body')[0];
+                var body = cellView.findNode('body')[0];
 
                 var highlightSpy = sinon.spy();
                 var unhighlightSpy = sinon.spy();
@@ -528,7 +528,7 @@ QUnit.module('Attributes', function() {
                     }
                 });
 
-                var bodyNode = cellView.findBySelector('body')[0];
+                var bodyNode = cellView.findNode('body')[0];
                 var markerAttribute = bodyNode.getAttribute('marker-start');
                 var match = idRegex.exec(markerAttribute);
                 assert.ok(match);
@@ -561,7 +561,7 @@ QUnit.module('Attributes', function() {
                     }
                 });
 
-                var bodyNode = cellView.findBySelector('body')[0];
+                var bodyNode = cellView.findNode('body')[0];
                 var markerAttribute = bodyNode.getAttribute('marker-start');
                 var match = idRegex.exec(markerAttribute);
                 assert.ok(match);
@@ -588,7 +588,7 @@ QUnit.module('Attributes', function() {
                     }
                 });
 
-                var bodyNode = cellView.findBySelector('body')[0];
+                var bodyNode = cellView.findNode('body')[0];
                 var markerAttribute = bodyNode.getAttribute('marker-end');
                 var match = idRegex.exec(markerAttribute);
                 assert.ok(match);
@@ -615,7 +615,7 @@ QUnit.module('Attributes', function() {
                     }
                 });
 
-                var bodyNode = cellView.findBySelector('body')[0];
+                var bodyNode = cellView.findNode('body')[0];
                 var markerAttribute = bodyNode.getAttribute('marker-end');
                 var match = idRegex.exec(markerAttribute);
                 assert.ok(match);
@@ -657,7 +657,7 @@ QUnit.module('Attributes', function() {
                     }
                 });
 
-                var bodyNode = cellView.findBySelector('body')[0];
+                var bodyNode = cellView.findNode('body')[0];
                 var markerAttribute = bodyNode.getAttribute('marker-end');
                 var match = idRegex.exec(markerAttribute);
                 assert.ok(match);
@@ -700,7 +700,7 @@ QUnit.module('Attributes', function() {
                     }
                 });
 
-                var bodyNode = cellView.findBySelector('body')[0];
+                var bodyNode = cellView.findNode('body')[0];
                 var markerAttribute = bodyNode.getAttribute('marker-end');
                 var match = idRegex.exec(markerAttribute);
                 assert.ok(match);
@@ -743,7 +743,7 @@ QUnit.module('Attributes', function() {
                     }
                 });
 
-                var bodyNode = cellView.findBySelector('body')[0];
+                var bodyNode = cellView.findNode('body')[0];
                 var markerAttribute = bodyNode.getAttribute('marker-end');
                 var match = idRegex.exec(markerAttribute);
                 assert.ok(match);
@@ -788,7 +788,7 @@ QUnit.module('Attributes', function() {
                     }
                 });
 
-                var bodyNode = cellView.findBySelector('body')[0];
+                var bodyNode = cellView.findNode('body')[0];
                 var markerAttribute = bodyNode.getAttribute('marker-end');
                 var match = idRegex.exec(markerAttribute);
                 assert.ok(match);
@@ -823,7 +823,7 @@ QUnit.module('Attributes', function() {
                     }
                 });
 
-                var bodyNode = cellView.findBySelector('body')[0];
+                var bodyNode = cellView.findNode('body')[0];
                 var markerAttribute = bodyNode.getAttribute('marker-mid');
                 var match = idRegex.exec(markerAttribute);
                 assert.ok(match);
@@ -851,7 +851,7 @@ QUnit.module('Attributes', function() {
                     }
                 });
 
-                var bodyNode = cellView.findBySelector('body')[0];
+                var bodyNode = cellView.findNode('body')[0];
                 var markerAttribute = bodyNode.getAttribute('fill');
                 var match = idRegex.exec(markerAttribute);
                 assert.ok(match);
@@ -880,7 +880,7 @@ QUnit.module('Attributes', function() {
                     }
                 });
 
-                var bodyNode = cellView.findBySelector('body')[0];
+                var bodyNode = cellView.findNode('body')[0];
                 var markerAttribute = bodyNode.getAttribute('stroke');
                 var match = idRegex.exec(markerAttribute);
                 assert.ok(match);

packages/joint-core/test/jointjs/dia/elementTools.js

@@ -184,7 +184,7 @@ QUnit.module('elementTools', function(hooks) {
             });
             // magnet defined as a function
             var magnetSpy = sinon.spy(function(view) {
-                return view.findBySelector('body')[0];
+                return view.findNode('body')[0];
             });
             paper.options.defaultLink = defaultLinkSpy;
             var connect = new joint.elementTools.Connect({ magnet: magnetSpy });
@@ -200,7 +200,7 @@ QUnit.module('elementTools', function(hooks) {
             assert.deepEqual(newLink.source(), { id: element.id, magnet: 'body' });
             assert.ok(magnetSpy.calledOn(connect));
             // magnet defined as an SVGElement
-            connect.options.magnet = elementView.findBySelector('label')[0];
+            connect.options.magnet = elementView.findNode('label')[0];
             evt = {};
             connect.dragstart(evt);
             connect.drag(evt);

packages/joint-core/test/jointjs/dia/linkTools.js

@@ -200,7 +200,7 @@ QUnit.module('linkTools', function(hooks) {
             });
             // magnet defined as a function
             var magnetSpy = sinon.spy(function(view) {
-                return view.findBySelector('line')[0];
+                return view.findNode('line')[0];
             });
             paper.options.defaultLink = defaultLinkSpy;
             var connect = new joint.linkTools.Connect({ magnet: magnetSpy });
@@ -216,7 +216,7 @@ QUnit.module('linkTools', function(hooks) {
             assert.deepEqual(newLink.source(), { id: link.id, magnet: 'line' });
             assert.ok(magnetSpy.calledOn(connect));
             // magnet defined as an SVGElement
-            connect.options.magnet = linkView.findBySelector('wrapper')[0];
+            connect.options.magnet = linkView.findNode('wrapper')[0];
             evt = {};
             connect.dragstart(evt);
             connect.drag(evt);

packages/joint-core/test/jointjs/elementView.js

@@ -249,7 +249,7 @@ QUnit.module('elementView', function(hooks) {
 
             elementView.model.resize(100, 100).translate(100, 100).rotate(90);
 
-            var rectInside = elementView.findBySelector('rectInside')[0];
+            var rectInside = elementView.findNode('rectInside')[0];
             assert.checkBboxApproximately(1, elementView.getNodeBBox(rectInside), {
                 x: 177,
                 y: 121,
@@ -259,7 +259,7 @@ QUnit.module('elementView', function(hooks) {
 
             assert.equal(V.matrixToTransformString(elementView.getNodeMatrix(rectInside)), 'matrix(1,0,0,1,0,0)');
 
-            var rectOutside = elementView.findBySelector('rectOutside')[0];
+            var rectOutside = elementView.findNode('rectOutside')[0];
             assert.checkBboxApproximately(1, elementView.getNodeBBox(rectOutside), {
                 x: 121,
                 y: 113,
@@ -269,7 +269,7 @@ QUnit.module('elementView', function(hooks) {
 
             assert.equal(V.matrixToTransformString(elementView.getNodeMatrix(rectOutside)), 'matrix(1,0,0,1,0,0)');
 
-            var circle = elementView.findBySelector('circle')[0];
+            var circle = elementView.findNode('circle')[0];
             assert.checkBboxApproximately(1, elementView.getNodeBBox(circle), {
                 x: 182,
                 y: 106,