refactor(dia.CellView)!: disable useCSSSelectors by default (#2478)

examples/isometric/src/index.ts

@@ -1,4 +1,4 @@
-import { g, dia, config } from 'jointjs';
+import { g, dia } from 'jointjs';
 import Obstacles from './obstacles';
 import IsometricShape, { View } from './shapes/isometric-shape';
 import { Computer, Database, ActiveDirectory, User, Firewall, Switch, Router, Link, cellNamespace } from './shapes';
@@ -19,8 +19,6 @@ const graph = new dia.Graph({}, { cellNamespace });
 const obstacles = new Obstacles(graph);
 graph.set('obstacles', obstacles);
 
-config.useCSSSelectors = false
-
 const paper = new dia.Paper({
     el: canvasEl,
     model: graph,

packages/joint-core/demo/archive/erd/src/erd.js

@@ -19,6 +19,7 @@ const Entity = joint.dia.Element.define('erd.Entity', {
     }
 }, {
     markup: '<g class="rotatable"><g class="scalable"><polygon class="outer"/><polygon class="inner"/></g><text/></g>',
+    useCSSSelectors: true
 });
 
 const WeakEntity = Entity.define('erd.WeakEntity', {
@@ -49,6 +50,7 @@ const Relationship = joint.dia.Element.define('erd.Relationship', {
     }
 }, {
     markup: '<g class="rotatable"><g class="scalable"><polygon class="outer"/><polygon class="inner"/></g><text/></g>',
+    useCSSSelectors: true
 });
 
 const IdentifyingRelationship = Relationship.define('erd.IdentifyingRelationship', {
@@ -82,6 +84,7 @@ const Attribute = joint.dia.Element.define('erd.Attribute', {
     }
 }, {
     markup: '<g class="rotatable"><g class="scalable"><ellipse class="outer"/><ellipse class="inner"/></g><text/></g>',
+    useCSSSelectors: true
 });
 
 const Multivalued = Attribute.define('erd.Multivalued', {
@@ -125,9 +128,11 @@ const ISA = joint.dia.Element.define('erd.ISA', {
     }
 }, {
     markup: '<g class="rotatable"><g class="scalable"><polygon/></g><text/></g>',
+    useCSSSelectors: true
 });
 
 const Line = joint.dia.Link.define('erd.Line', {}, {
+    useCSSSelectors: true,
     cardinality: function(value) {
         this.set('labels', [{ position: -20, attrs: { text: { dy: -8, text: value }}}]);
     }

packages/joint-core/demo/archive/org/src/org.js

@@ -29,6 +29,7 @@ const Member = joint.dia.Element.define('org.Member', {
     }
 }, {
     markup: '<g class="rotatable"><g class="scalable"><rect class="card"/><image/></g><text class="rank"/><text class="name"/></g>',
+    useCSSSelectors: true,
 });
 
 const Arrow = joint.dia.Link.define('org.Arrow', {

packages/joint-core/demo/archive/petri-nets/src/pn.js

@@ -36,6 +36,7 @@ const Place = joint.dia.Element.define('pn.Place', {
     }
 }, {
     markup: '<g class="rotatable"><g class="scalable"><circle class="root"/><g class="tokens" /></g><text class="label"/></g>',
+    useCSSSelectors: true,
 });
 
 const PlaceView = joint.dia.ElementView.extend({
@@ -111,10 +112,13 @@ const Transition = joint.dia.Element.define('pn.Transition', {
     }
 }, {
     markup: '<g class="rotatable"><g class="scalable"><rect class="root"/></g></g><text class="label"/>',
+    useCSSSelectors: true,
 });
 
 const Link = joint.dia.Link.define('pn.Link', {
     attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' }}
+}, {
+    useCSSSelectors: true
 });
 
 const shapes = { ...joint.shapes, pn: { Place, PlaceView, Transition, Link }};

packages/joint-core/demo/archive/pipes/src/pipes.js

@@ -1,3 +1,5 @@
+joint.config.useCSSSelectors = true;
+
 joint.connectors.normal = function(sourcePoint, targetPoint, vertices) {
 
     var chromeFix = 1e-3;

packages/joint-core/demo/archive/umlcd/src/umlcd.js

@@ -31,6 +31,7 @@ const Class = joint.dia.Element.define('uml.Class', {
     attributes: [],
     methods: []
 }, {
+    useCSSSelectors: true,
     markup: [
         '<g class="rotatable">',
         '<g class="scalable">',

packages/joint-core/demo/archive/umlsc/src/umlsc.js

@@ -21,6 +21,7 @@ const State = joint.dia.Element.define('uml.State', {
     events: []
 
 }, {
+    useCSSSelectors: true,
     markup: [
         '<g class="rotatable">',
         '<g class="scalable">',
@@ -92,6 +93,7 @@ const StartState = joint.dia.Element.define('uml.StartState', {
         }
     }
 }, {
+    useCSSSelectors: true,
     markup: '<g class="rotatable"><g class="scalable"><circle/></g><text/></g>',
 });
 
@@ -112,6 +114,7 @@ const EndState = joint.dia.Element.define('uml.EndState', {
         }
     }
 }, {
+    useCSSSelectors: true,
     markup: '<g class="rotatable"><g class="scalable"><circle class="outer"/><circle class="inner"/></g></g>',
 });
 
@@ -120,6 +123,8 @@ const Transition = joint.dia.Link.define('uml.Transition', {
         '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z', fill: '#34495e', stroke: '#2c3e50' },
         '.connection': { stroke: '#2c3e50' }
     }
+}, {
+    useCSSSelectors: true
 });
 
 const shapes = { ...joint.shapes, uml: { State, StartState, EndState, Transition }};

packages/joint-core/demo/archive/fsa/index.html → packages/joint-core/demo/fsa/index.html

@@ -13,7 +13,7 @@
 
         <div id="paper"></div>
 
-        <script src="../../../build/joint.js"></script>
+        <script src="../../build/joint.js"></script>
 
         <script src="src/fsa.js"></script>
 

packages/joint-core/demo/archive/fsa/src/fsa.js → packages/joint-core/demo/fsa/src/fsa.js

@@ -1,81 +1,11 @@
-const State = joint.dia.Element.define('fsa.State', {
-    size: { width: 60, height: 60 },
-    attrs: {
-        'circle': {
-            fill: '#ffffff',
-            stroke: '#000000',
-            'stroke-width': 3,
-            r: 30,
-            cx: 30,
-            cy: 30
-        },
-        'text': {
-            'font-size': 14,
-            text: '',
-            'text-anchor': 'middle',
-            'ref-x': .5,
-            'ref-y': .5,
-            'y-alignment': 'middle',
-            fill: '#000000',
-            'font-weight': '800',
-            'font-family': 'Arial, helvetica, sans-serif'
-        }
-    }
-}, {
-    markup: '<g class="rotatable"><g class="scalable"><circle/></g><text/></g>',
-});
-
-const StartState = joint.dia.Element.define('fsa.StartState', {
-    size: { width: 20, height: 20 },
-    attrs: {
-        circle: {
-            transform: 'translate(10, 10)',
-            r: 10,
-            fill: '#000000'
-        }
-    }
-}, {
-    markup: '<g class="rotatable"><g class="scalable"><circle/></g></g>',
-});
-
-const EndState = joint.dia.Element.define('fsa.EndState', {
-    size: { width: 20, height: 20 },
-    attrs: {
-        '.outer': {
-            transform: 'translate(10, 10)',
-            r: 10,
-            fill: '#ffffff',
-            stroke: '#000000'
-        },
-
-        '.inner': {
-            transform: 'translate(10, 10)',
-            r: 6,
-            fill: '#000000'
-        }
-    }
-}, {
-    markup: '<g class="rotatable"><g class="scalable"><circle class="outer"/><circle class="inner"/></g></g>',
-});
-
-const Arrow = joint.dia.Link.define('fsa.Arrow', {
-    attrs: { '.marker-target': { d: 'M 10 0 L 0 5 L 10 10 z' }},
-});
-
-const shapes = {
-    ...joint.shapes,
-    fsa: { State, StartState, EndState, Arrow }
-};
-
-
-var graph = new joint.dia.Graph({}, { cellNamespace: shapes });
+const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
 
-var paper = new joint.dia.Paper({
+const paper = new joint.dia.Paper({
     el: document.getElementById('paper'),
     width: 800,
     height: 600,
     model: graph,
-    cellViewNamespace: shapes,
+    cellViewNamespace: joint.shapes,
     defaultConnectionPoint: { name: 'boundary' },
     defaultConnector: { name: 'smooth' },
     interactive: { linkMove: false },
@@ -97,7 +27,7 @@ paper.on('cell:pointerdown blank:pointerdown', function() {
 });
 
 function state(x, y, label) {
-    var circle = new joint.shapes.standard.Circle({
+    const circle = new joint.shapes.standard.Circle({
         position: { x: x, y: y },
         size: { width: 60, height: 60 },
         attrs: {
@@ -119,7 +49,7 @@ function state(x, y, label) {
 }
 
 function initState(x, y) {
-    var start = new joint.shapes.standard.Circle({
+    const start = new joint.shapes.standard.Circle({
         position: { x: x, y: y },
         size: { width: 20, height: 20 },
         attrs: {
@@ -132,7 +62,7 @@ function initState(x, y) {
 }
 
 function link(source, target, label, vertices) {
-    var link = new joint.shapes.standard.Link({
+    const link = new joint.shapes.standard.Link({
         source: { id: source.id },
         target: { id: target.id },
         attrs: {
@@ -161,12 +91,12 @@ function link(source, target, label, vertices) {
     return link.addTo(graph);
 }
 
-var start = initState(50, 530);
-var code  = state(180, 390, 'code');
-var slash = state(340, 220, 'slash');
-var star  = state(600, 400, 'star');
-var line  = state(190, 100, 'line');
-var block = state(560, 140, 'block');
+const start = initState(50, 530);
+const code  = state(180, 390, 'code');
+const slash = state(340, 220, 'slash');
+const star  = state(600, 400, 'star');
+const line  = state(190, 100, 'line');
+const block = state(560, 140, 'block');
 
 link(start, code,  'start');
 link(code,  slash, '/');

packages/joint-core/docs/src/joint/api/dia/Cell/markup.html

@@ -5,21 +5,6 @@
     Used as a template to build DOM Elements on the fly when the associated cellView is rendered.
 </p>
 
-<h4 id="dia.Cell.markup.xml">XML String</h4>
-
-<p>
-    A valid XML string that contains either a single <code>tagName</code> or XML that can be parsed with <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/DOMParser"><code>DOMParser</code></a>.
-</p>
-
-<pre><code>markup: 'rect'
-markup: '&lt;rect class="rectangle"/&gt;'
-markup: '&lt;rect&gt;&lt;g&gt;&lt;circle/&gt;&lt;circle/&gt;&lt;/g&gt;'</code></pre>
-
-<p>
-    Note that defining Cell markup with XML strings is slower than defining it with JSON arrays, precisely because of the need for parsing.
-    We strongly recommend you to use the <a href="#dia.Cell.markup.json">JSON markup</a> for your Cell definitions.
-</p>
-
 <h4 id="dia.Cell.markup.json">JSON Markup</h4>
 
 <p>
@@ -175,3 +160,34 @@ <h5>Setting attributes with selectors</h5>
     circle1: { fill: 'red' },
     circles: { fill: 'blue', stroke: 'black' }
 });</code></pre>
+
+<h4 id="dia.Cell.markup.xml">XML String</h4>
+
+<p>
+    A valid XML string that contains either a single <code>tagName</code> or XML that can be parsed with <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/DOMParser"><code>DOMParser</code></a>.
+</p>
+
+<pre><code>markup: 'rect'
+markup: '&lt;rect class="rectangle"/&gt;'
+markup: '&lt;rect&gt;&lt;g&gt;&lt;circle/&gt;&lt;circle/&gt;&lt;/g&gt;'</code></pre>
+
+
+<div class="docs-important-note">
+    Note that defining Cell markup with XML strings is slower than defining it with JSON arrays, precisely because of the need for parsing.
+    We strongly recommend you to use the <a href="#dia.Cell.markup.json">JSON markup</a> for your Cell definitions.
+</div>
+
+<p>
+    Note that you also need to set the <code>useCSSSelectors=true</code> on the model's prototype in order to use CSS selectors in the <code>attrs</code> attribute.
+
+    <pre><code>joint.dia.Element.define('Rectangle', {
+        attrs: {
+            rect: { // CSS Selector for the &lt;rect/&gt; element
+                fill: 'red'
+            }
+        }
+    }, {
+        markup: '&lt;rect class="rectangle"/&gt;',
+        useCSSSelectors: true
+    });</code></pre>
+</p>

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

@@ -5,5 +5,3 @@
 <p>The method searches for matching sub-element among the descendants of <code>this.el</code>. If no such sub-element is found, <code>null</code> is returned.</p>
 
 <p>The available <code>selectors</code> are defined by the <code>markup</code> <a href="#dia.Cell.markup">attribute of the Cell model</a> from which the CellView was initialized.</p>
-
-<p><i>(Deprecated)</i> If no matching sub-element JSON selector is found then <code>this.el.querySelector(selector)</code> is used to try and find an element through CSS selectors. You may disable this functionality to increase performance by setting <code>useCSSSelectors = false</code> in the global config.</p>

packages/joint-core/docs/src/joint/api/dia/CellView/prototype/findNodes.html

@@ -5,5 +5,3 @@
 <p>The method searches for matching sub-elements among the descendants of <code>this.el</code>. If no such sub-elements are found, an empty array is returned.</p>
 
 <p>The available <code>groupSelectors</code> are defined by the <code>markup</code> <a href="#dia.Cell.markup">attribute of the Cell model</a> from which the CellView was initialized.</p>
-
-<p><i>(Deprecated)</i> If no matching sub-element JSON selector is found then <code>this.el.querySelectorAll(selector)</code> is used to try and find an element through CSS selectors. You may disable this functionality to increase performance by setting <code>useCSSSelectors = false</code> in the global config.</p>

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

@@ -1,12 +1,9 @@
 export const config = {
     // When set to `true` the cell selectors could be defined as CSS selectors.
     // If not, only JSON Markup selectors are taken into account.
-    // export let useCSSSelectors = true;
-    useCSSSelectors: true,
+    useCSSSelectors: false,
     // The class name prefix config is for advanced use only.
     // Be aware that if you change the prefix, the JointJS CSS will no longer function properly.
-    // export let classNamePrefix = 'joint-';
-    // export let defaultTheme = 'default';
     classNamePrefix: 'joint-',
     defaultTheme: 'default',
     // The maximum delay required for two consecutive touchend events to be interpreted

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

@@ -942,3 +942,4 @@ export const Cell = Model.extend({
         return Cell;
     }
 });
+