diff --git a/examples/decorators/src/index.ts b/examples/decorators/src/index.ts
index 10a7cd011..1d9d07455 100644
--- 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
index a35e8788c..8579f2e9d 100644
--- 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
index f476b21d7..243054a72 100644
--- 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
index 090ac7985..1c76773ec 100644
--- 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
index 36fe49ae6..ebdf58967 100644
--- 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
index a3ac5ea05..a0aaf8b7e 100644
--- 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
index fa4aaa06a..5d39b97b1 100644
--- 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
index dab9505d9..eb342cbd5 100644
--- 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
index f2124f0f0..451c6142d 100644
--- 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
index d4e444123..d72edfc64 100644
--- 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
index a315d5015..bd6369598 100644
--- 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
index 8977c4869..0ef4bc1be 100644
--- 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
index 6fd3d4ef6..f8f665702 100644
--- 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
index da75e1f34..c0f09a742 100644
--- 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
index c1e0951c2..34aa17ef6 100644
--- 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
index d57c1f9e7..3fdeed15b 100644
--- 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
index 42e472c9a..4ad2becce 100644
--- 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
index 545a4e807..5e12a2e03 100644
--- 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
index 4a2ece51c..3c9819dd0 100644
--- 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
index c76643e45..bf52ac63b 100644
--- 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
index 66e3da347..e335897e3 100644
--- 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
index e5395ee14..b5ab48e21 100644
--- 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
index 5a454fa20..d59cef529 100644
--- 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
index 1ad7b5058..edea0e4ae 100644
--- 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
index d8c96b171..b35661167 100644
--- 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
index b066fe6ca..3b510ca32 100644
--- 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
index d149a9d9c..4dceac20c 100644
--- 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
index aac9deae2..3bfa3fcf0 100644
--- 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
index 5c185d070..139676521 100644
--- 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 @@
The Paper object exposes a sorting object with three values that may be used as values of this option:
- joint.dia.Paper.sorting.EXACT - (default) render views in exactly the same order as reported by graph.getCells() (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.joint.dia.Paper.sorting.APPROX - 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 EXACT option, but much faster.joint.dia.Paper.sorting.APPROX - (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 EXACT option, but much faster.joint.dia.Paper.sorting.EXACT - render views in exactly the same order as reported by graph.getCells() (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.joint.dia.Paper.sorting.NONE - render views in an indeterminate order. (Note that this setting disables all toFront/toBack functions mentioned above.)
diff --git a/packages/joint-core/src/dia/Paper.mjs b/packages/joint-core/src/dia/Paper.mjs
index 7a3f46a13..46edf4a4a 100644
--- 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
index d1585f30e..adbc63702 100644
--- 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
index d395cb84a..8b4f24187 100644
--- 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
index 13331eda0..989573bff 100644
--- a/packages/joint-core/tutorials/js/content-driven-element.js
+++ b/packages/joint-core/tutorials/js/content-driven-element.js
@@ -11,12 +11,11 @@
gridSize: 20,
model: graph,
async: true,
- sorting: joint.dia.Paper.sorting.APPROX,
cellViewNamespace: joint.shapes
});
-
+
const svg = paper.svg;
-
+
function measureText(svgDocument, text, attrs) {
const vText = V('text').attr(attrs).text(text);
vText.appendTo(svgDocument);
@@ -24,9 +23,9 @@
vText.remove();
return bbox;
}
-
+
class Shape extends joint.dia.Element {
-
+
defaults() {
return {
...super.defaults,
@@ -37,7 +36,7 @@
image: ''
};
}
-
+
preinitialize() {
this.spacing = 10;
this.labelAttributes = {
@@ -51,13 +50,13 @@
};
this.cache = {};
}
-
+
initialize() {
super.initialize();
this.on('change', this.onAttributeChange);
this.setSizeFromContent();
}
-
+
/* Attributes that affects the size of the model. */
onAttributeChange() {
const {
@@ -72,7 +71,7 @@
this.setSizeFromContent();
}
}
-
+
setSizeFromContent() {
delete this.cache.layout;
const {
@@ -81,7 +80,7 @@
} = this.layout();
this.resize(width, height);
}
-
+
layout() {
const {
cache
@@ -97,7 +96,7 @@
return layout;
}
}
-
+
calcLayout() {
const {
attributes,
@@ -171,11 +170,11 @@
};
}
}
-
+
const ElementView = joint.dia.ElementView;
-
+
const ShapeView = ElementView.extend({
-
+
presentationAttributes: ElementView.addPresentationAttributes({
// attributes that changes the position and size of the DOM elements
label: [ElementView.Flags.UPDATE],
@@ -184,7 +183,7 @@
outlineColor: ['@color'],
fillColor: ['@color'],
}),
-
+
confirmUpdate: function(...args) {
let flags = ElementView.prototype.confirmUpdate.call(this, ...args);
if (this.hasFlag(flags, '@color')) {
@@ -195,7 +194,7 @@
// must return 0
return flags;
},
-
+
/* Runs only once while initializing */
render: function() {
const {
@@ -213,14 +212,14 @@
this.updateColors();
this.translate(); // default element translate method
},
-
+
update: function() {
const layout = this.model.layout();
this.updateBody();
this.updateImage(layout.$image);
this.updateLabel(layout.$label);
},
-
+
updateColors: function() {
const {
model,
@@ -231,7 +230,7 @@
stroke: model.get('outlineColor')
});
},
-
+
updateBody: function() {
const {
model,
@@ -247,9 +246,9 @@
};
vBody.attr(bodyAttributes);
},
-
+
updateImage: function($image) {
-
+
const {
model,
vImage,
@@ -265,14 +264,14 @@
x: $image.x,
y: $image.y
});
-
+
} else {
vImage.remove();
}
},
-
+
updateLabel: function($label) {
-
+
const {
model,
vLabel
@@ -287,14 +286,14 @@
});
}
});
-
+
joint.shapes.custom = {
Shape,
ShapeView
};
-
+
// Example
-
+
const customShape1 = new Shape({
label: 'A Shape'
});
@@ -309,15 +308,15 @@
.position(200, 200)
.prop('fillColor', 'lightgreen')
.addTo(graph);
-
-
+
+
const customShape3 = new Shape();
customShape3
.set('image', 'https://via.placeholder.com/50/0000FF/FFFFFF')
.position(50, 50)
.prop('fillColor', 'lightblue')
.addTo(graph);
-
+
const customShape4 = new Shape();
customShape4
.set('image', 'https://via.placeholder.com/150/FF0000/FFFFFF')
diff --git a/packages/joint-core/tutorials/ts-shape.html b/packages/joint-core/tutorials/ts-shape.html
index 6339c03e0..997cb1157 100644
--- a/packages/joint-core/tutorials/ts-shape.html
+++ b/packages/joint-core/tutorials/ts-shape.html
@@ -301,7 +301,6 @@ "type", a few more notes
interactive: true,
async: true,
frozen: false,
- sorting: dia.Paper.sorting.APPROX,
background: { color: '#F3F7F6' },
cellViewNamespace: myNamespace,
});
@@ -482,7 +481,6 @@ Custom Views
interactive: true,
async: true,
frozen: false,
- sorting: dia.Paper.sorting.APPROX,
background: { color: '#F3F7F6' },
cellViewNamespace: shapes,
});