refactor(dia.Paper)!: change sorting default to APPROX (#2427)

kumilingus · web-flow · commit fa5b94aede61 · 2023-12-12T14:53:13.000+01:00
diff --git a/examples/decorators/src/index.ts b/examples/decorators/src/index.ts
@@ -15,7 +15,6 @@ const paper = new dia.Paper({
     frozen: true,
     async: true,
     defaultLink: () => new shapes.standard.Link(),
-    sorting: dia.Paper.sorting.APPROX,
     magnetThreshold: 'onleave',
     linkPinning: false,
     snapLinks: true,
diff --git a/examples/dwdm/src/index.ts b/examples/dwdm/src/index.ts
@@ -18,7 +18,6 @@ const paper = new dia.Paper({
     el: document.getElementById('paper'),
     model: graph,
     async: true,
-    sorting: dia.Paper.sorting.APPROX,
     interactive: false,
     cellViewNamespace: cellNamespace,
     background: { color: 'transparent' },
diff --git a/examples/isometric/src/index.ts b/examples/isometric/src/index.ts
@@ -41,7 +41,6 @@ const paper = new dia.Paper({
     gridSize: GRID_SIZE,
     async: true,
     autoFreeze: true,
-    sorting: dia.Paper.sorting.APPROX,
     defaultConnectionPoint: {
         name: 'boundary',
         args: {
diff --git a/examples/list/src/index.ts b/examples/list/src/index.ts
@@ -310,7 +310,6 @@ const paper = new dia.Paper({
     frozen: true,
     async: true,
     defaultLink: () => new ListLink(),
-    sorting: dia.Paper.sorting.APPROX,
     magnetThreshold: 'onleave',
     linkPinning: false,
     snapLinks: true,
diff --git a/examples/shapes-general/src/index.ts b/examples/shapes-general/src/index.ts
@@ -117,7 +117,6 @@ const paper = new dia.Paper({
     model: graph,
     frozen: true,
     async: true,
-    sorting: dia.Paper.sorting.APPROX,
     interactive: false,
     guard: (evt) =>
         paper.getLayerNode(dia.Paper.Layers.TOOLS).contains(evt.target)
diff --git a/examples/tree-of-life/src/index.ts b/examples/tree-of-life/src/index.ts
@@ -351,7 +351,6 @@ const paper = new dia.Paper({
     frozen: true,
     async: true,
     overflow: true,
-    sorting: dia.Paper.sorting.APPROX,
     cellViewNamespace: shapeNamespace,
     clickThreshold: 5,
     interactive: {
diff --git a/packages/joint-core/demo/bandwidth/src/bandwidth.js b/packages/joint-core/demo/bandwidth/src/bandwidth.js
@@ -12,7 +12,6 @@ const paper = new dia.Paper({
     height: 300,
     model: graph,
     async: true,
-    sorting: dia.Paper.sorting.APPROX,
     background: { color:  '#F3F7F6' },
     defaultConnectionPoint: {
         name: 'boundary',
diff --git a/packages/joint-core/demo/bus/src/bus.js b/packages/joint-core/demo/bus/src/bus.js
@@ -9,7 +9,6 @@ var paper = new joint.dia.Paper({
     model: graph,
     async: true,
     frozen: true,
-    sorting: joint.dia.Paper.sorting.APPROX,
     restrictTranslate: true,
     defaultConnectionPoint: {
         name: 'boundary',
diff --git a/packages/joint-core/demo/container/src/index.js b/packages/joint-core/demo/container/src/index.js
@@ -14,7 +14,6 @@
         defaultConnectionPoint: {
             name: 'boundary'
         },
-        sorting: joint.dia.Paper.sorting.APPROX,
         viewport: function(view) {
             var element = view.model;
             // Hide any element or link which is embedded inside a collapsed parent (or parent of the parent).
diff --git a/packages/joint-core/demo/curves/src/curves.js b/packages/joint-core/demo/curves/src/curves.js
@@ -63,7 +63,6 @@ const paper = new dia.Paper({
     height: 600,
     gridSize: 1,
     async: true,
-    sorting: dia.Paper.sorting.APPROX,
     background: { color: '#F3F7F6' },
     snapLinks: true,
     highlighting: {
diff --git a/packages/joint-core/demo/dgl/src/directed-graph.mjs b/packages/joint-core/demo/dgl/src/directed-graph.mjs
@@ -325,7 +325,6 @@ var controls = new LayoutControls({
     el: document.getElementById('layout-controls'),
     paper: new joint.dia.Paper({
         el: document.getElementById('paper'),
-        sorting: joint.dia.Paper.sorting.APPROX,
         interactive: function(cellView) {
             return cellView.model.isElement();
         }
diff --git a/packages/joint-core/demo/dynamic-font-size/src/index.js b/packages/joint-core/demo/dynamic-font-size/src/index.js
@@ -11,7 +11,6 @@ const paper = new joint.dia.Paper({
     gridSize: 20,
     drawGrid: { name: 'mesh' },
     async: true,
-    sorting: joint.dia.Paper.sorting.APPROX,
     background: { color: '#F3F7F6' }
 });
 
diff --git a/packages/joint-core/demo/elk/src/app.js b/packages/joint-core/demo/elk/src/app.js
@@ -20,7 +20,6 @@ export const init = () => {
         interactive: false,
         async: true,
         frozen: true,
-        sorting: joint.dia.Paper.sorting.APPROX,
         background: { color: '#F3F7F6' },
         viewport: (view) => {
             const { sx } = paper.scale();
diff --git a/packages/joint-core/demo/flowchart/index.js b/packages/joint-core/demo/flowchart/index.js
@@ -27,7 +27,6 @@ const paper = new dia.Paper({
     width: '100%',
     height: '100%',
     async: true,
-    sorting: dia.Paper.sorting.APPROX,
     background: { color: 'transparent' },
     snapLabels: true,
     clickThreshold: 10,
diff --git a/packages/joint-core/demo/fta/src/index.js b/packages/joint-core/demo/fta/src/index.js
@@ -428,7 +428,6 @@ const paper = new dia.Paper({
     async: true,
     interactive: false,
     frozen: true,
-    sorting: dia.Paper.sorting.APPROX,
     cellViewNamespace: shapes,
     background: { color: '#131e29' },
     viewport: function(view) {
diff --git a/packages/joint-core/demo/icons/src/icons.js b/packages/joint-core/demo/icons/src/icons.js
@@ -52,7 +52,6 @@ const paper = new dia.Paper({
     height: '100%',
     gridSize: 20,
     async: true,
-    sorting: dia.Paper.sorting.APPROX,
     background: { color: '#F3F7F6' },
 });
 
diff --git a/packages/joint-core/demo/marey/src/marey.js b/packages/joint-core/demo/marey/src/marey.js
@@ -374,7 +374,6 @@ const paper = new dia.Paper({
     async: true,
     width: 'calc(100% - 20px)',
     height: 'calc(100% - 70px)',
-    sorting: dia.Paper.sorting.APPROX,
     interactive: { linkMove: false, vertexMove: true },
     background: {
         color: BG_COLOR
diff --git a/packages/joint-core/demo/performance/async.js b/packages/joint-core/demo/performance/async.js
@@ -53,7 +53,6 @@ var paper = new Paper({
     model: graph,
     async: true,
     frozen: true,
-    sorting: Paper.sorting.APPROX,
     defaultAnchor: { name: 'modelCenter' },
     defaultConnectionPoint: { name: 'boundary' },
     viewport: function(view, isInViewport) {
diff --git a/packages/joint-core/demo/performance/conveyor.js b/packages/joint-core/demo/performance/conveyor.js
@@ -161,7 +161,6 @@ var paper = new joint.dia.Paper({
     height: canvasHeight,
     model: graph,
     async: true,
-    sorting: joint.dia.Paper.sorting.APPROX,
     background: {
         color: '#000000'
     }
diff --git a/packages/joint-core/demo/puzzle/src/puzzle.js b/packages/joint-core/demo/puzzle/src/puzzle.js
@@ -92,7 +92,6 @@ var Jigsaw = {
             model: graph,
             clickThreshold: 5,
             async: true,
-            sorting: joint.dia.Paper.sorting.APPROX
         }).on({
             'cell:pointerdown': function(pieceView) {
                 pieceView.model.toFront();
diff --git a/packages/joint-core/demo/roi/src/roi.js b/packages/joint-core/demo/roi/src/roi.js
@@ -75,7 +75,6 @@ const paper = new dia.Paper({
     model: graph,
     async: true,
     cellViewNamespace: shapes,
-    sorting: dia.Paper.sorting.APPROX,
     defaultConnector: {
         name: 'curve'
     },
diff --git a/packages/joint-core/demo/rough/src/rough.js b/packages/joint-core/demo/rough/src/rough.js
@@ -13,8 +13,7 @@
         model: graph,
         clickThreshold: 5,
         async: true,
-        sorting: joint.dia.Paper.sorting.APPROX,
-        connectionStrategy: joint.connectionStrategies.pinAbsolute,
+w        connectionStrategy: joint.connectionStrategies.pinAbsolute,
         defaultConnectionPoint: { name: 'boundary', args: { selector: 'border' }},
         defaultLink: function() {
             return new RoughLink();
diff --git a/packages/joint-core/demo/sequence/src/sequence.js b/packages/joint-core/demo/sequence/src/sequence.js
@@ -12,7 +12,6 @@
         model: graph,
         frozen: true,
         async: true,
-        sorting: dia.Paper.sorting.APPROX,
         defaultConnectionPoint: { name: 'rectangle' },
         background: { color:  '#F3F7F6' },
         moveThreshold: 5,
diff --git a/packages/joint-core/demo/shapes/src/fills.js b/packages/joint-core/demo/shapes/src/fills.js
@@ -11,7 +11,6 @@ const paper = new dia.Paper({
     },
     gridSize: 1,
     async: true,
-    sorting: dia.Paper.sorting.APPROX,
     frozen: true,
     model: graph,
     defaultConnector: (sourcePoint, targetPoint, vertices) => {
diff --git a/packages/joint-core/demo/ts-demo/index.ts b/packages/joint-core/demo/ts-demo/index.ts
@@ -31,7 +31,6 @@ const paper = new joint.dia.Paper({
     async: true,
     defaultLink: new joint.shapes.app.Link(),
     connectionStrategy: joint.connectionStrategies.pinAbsolute,
-    sorting: joint.dia.Paper.sorting.APPROX,
     cellViewNamespace: joint.shapes
 });
 
diff --git a/packages/joint-core/docs/demo/dia/Element/js/portZIndex.js b/packages/joint-core/docs/demo/dia/Element/js/portZIndex.js
@@ -8,7 +8,6 @@ document.addEventListener('DOMContentLoaded', function() {
         height: 250,
         gridSize: 1,
         model: graph,
-        sorting: joint.dia.Paper.sorting.APPROX,
         interactive: false,
         cellViewNamespace: joint.shapes
     });
@@ -18,19 +17,19 @@ document.addEventListener('DOMContentLoaded', function() {
         size: { width: 80, height: 150 },
         attrs: {
             bodyMain: {
-                width: 80, 
+                width: 80,
                 height: 150,
-                stroke: '#000000', 
-                strokeWidth: 2, 
+                stroke: '#000000',
+                strokeWidth: 2,
                 fill: '#FFFFFF'
             },
             bodyInner: {
-                width: 60, 
-                height: 130, 
-                x: 10, 
+                width: 60,
+                height: 130,
+                x: 10,
                 y: 10,
-                stroke: '#000000', 
-                strokeWidth: 2, 
+                stroke: '#000000',
+                strokeWidth: 2,
                 fill: '#8ECAE6'
             },
             label: {
@@ -43,7 +42,7 @@ document.addEventListener('DOMContentLoaded', function() {
             tagName: 'rect',
             selector: 'bodyMain',
             className: 'bodyMain'
-                
+
         }, {
             tagName: 'rect',
             selector: 'bodyInner',
@@ -60,16 +59,16 @@ document.addEventListener('DOMContentLoaded', function() {
         size: { width: 80, height: 150 },
         attrs: {
             bodyMain: {
-                width: 80, 
+                width: 80,
                 height: 150,
-                stroke: '#000000', 
-                strokeWidth: 2, 
+                stroke: '#000000',
+                strokeWidth: 2,
                 fill: '#FFFFFF'
             },
             bodyInner: {
-                width: 60, 
-                height: 130, 
-                x: 10, 
+                width: 60,
+                height: 130,
+                x: 10,
                 y: 10,
                 stroke: '#000000',
                 strokeWidth: 2,
diff --git a/packages/joint-core/docs/demo/elementTools/js/control.js b/packages/joint-core/docs/demo/elementTools/js/control.js
@@ -7,7 +7,6 @@ document.addEventListener('DOMContentLoaded', function() {
         width: 400,
         height: 300,
         model: graph,
-        sorting: joint.dia.Paper.sorting.APPROX,
         interactive: false,
         background: {
             color: '#F3F7F6'
diff --git a/packages/joint-core/docs/demo/highlighters/js/mask.js b/packages/joint-core/docs/demo/highlighters/js/mask.js
@@ -107,7 +107,6 @@ document.addEventListener('DOMContentLoaded', function() {
         clickThreshold: 5,
         highlighting: false,
         async: true,
-        sorting: joint.dia.Paper.sorting.APPROX,
         background: {
             color: '#F3F7F6'
         }
diff --git a/packages/joint-core/docs/src/joint/api/dia/Paper/prototype/options/sorting.html b/packages/joint-core/docs/src/joint/api/dia/Paper/prototype/options/sorting.html
@@ -5,7 +5,7 @@
 <p>The Paper object exposes a <code>sorting</code> object with three values that may be used as values of this option:</p>
 
 <ul>
-	<li><code>joint.dia.Paper.sorting.EXACT</code> - (default) render views in exactly the same order as reported by <a href="#dia.Graph.prototype.getCells"><code>graph.getCells()</code></a> (views with different z-values are rendered in order, and views with the same z-value are rendered in the order in which they were added). This is by far the slowest option, present mainly for backwards compatibility.</li>
-	<li><code>joint.dia.Paper.sorting.APPROX</code> - render views according to their z-values. Views with different z-value are rendered in order, but the ordering of views with the same z-value is indeterminate. Similar in functionality to the <code>EXACT</code> option, but much faster.</li>
+	<li><code>joint.dia.Paper.sorting.APPROX</code> - (default) render views according to their z-values. Views with different z-value are rendered in order, but the ordering of views with the same z-value is indeterminate. Similar in functionality to the <code>EXACT</code> option, but much faster.</li>
+	<li><code>joint.dia.Paper.sorting.EXACT</code> - render views in exactly the same order as reported by <a href="#dia.Graph.prototype.getCells"><code>graph.getCells()</code></a> (views with different z-values are rendered in order, and views with the same z-value are rendered in the order in which they were added). This is by far the slowest option, present mainly for backwards compatibility.</li>
 	<li><code>joint.dia.Paper.sorting.NONE</code> - render views in an indeterminate order. (Note that this setting disables all <code>toFront</code>/<code>toBack</code> functions mentioned above.)</li>
 </ul>
diff --git a/packages/joint-core/src/dia/Paper.mjs b/packages/joint-core/src/dia/Paper.mjs
@@ -254,7 +254,7 @@ export const Paper = View.extend({
 
         // Rendering Options
 
-        sorting: sortingTypes.EXACT,
+        sorting: sortingTypes.APPROX,
 
         frozen: false,
 
diff --git a/packages/joint-core/test/jointjs/basic.js b/packages/joint-core/test/jointjs/basic.js
@@ -732,6 +732,8 @@ QUnit.module('basic', function(hooks) {
 
     QUnit.test('toBack(), toFront()', function(assert) {
 
+        this.paper.options.sorting = joint.dia.Paper.sorting.EXACT;
+
         var r1 = new joint.shapes.standard.Rectangle;
         var r2 = new joint.shapes.standard.Rectangle;
 
@@ -796,6 +798,8 @@ QUnit.module('basic', function(hooks) {
 
     QUnit.test('toBack(), toFront() with active batch', function(assert) {
 
+        this.paper.options.sorting = joint.dia.Paper.sorting.EXACT;
+
         var r1 = new joint.shapes.standard.Rectangle;
         var r2 = new joint.shapes.standard.Rectangle;
 
diff --git a/packages/joint-core/test/jointjs/paper.js b/packages/joint-core/test/jointjs/paper.js
@@ -183,6 +183,8 @@ QUnit.module('paper', function(hooks) {
 
     QUnit.test('graph.fromJSON(), graph.toJSON()', function(assert) {
 
+        this.paper.options.sorting = joint.dia.Paper.sorting.EXACT;
+
         var json = JSON.parse('{"cells":[{"type":"standard.Ellipse","size":{"width":100,"height":60},"position":{"x":110,"y":480},"id":"bbb9e641-9756-4f42-997a-f4818b89f374","embeds":"","z":0},{"type":"link","source":{"id":"bbb9e641-9756-4f42-997a-f4818b89f374"},"target":{"id":"cbd1109e-4d34-4023-91b0-f31bce1318e6"},"id":"b4289c08-07ea-49d2-8dde-e67eb2f2a06a","z":1},{"type":"standard.Rectangle","position":{"x":420,"y":410},"size":{"width":100,"height":60},"id":"cbd1109e-4d34-4023-91b0-f31bce1318e6","embeds":"","z":2}]}');
 
         this.graph.fromJSON(json);
diff --git a/packages/joint-core/tutorials/js/content-driven-element.js b/packages/joint-core/tutorials/js/content-driven-element.js
diff --git a/packages/joint-core/tutorials/ts-shape.html b/packages/joint-core/tutorials/ts-shape.html
