From 85b8a0b718aa1dc9835fe0a51bddc866429cf945 Mon Sep 17 00:00:00 2001 From: Philipp Date: Mon, 6 Nov 2023 10:57:51 +0100 Subject: [PATCH] WIP --- assets/diagram-js.css | 55 ++++++++++++----- .../complex-preview/ComplexPreview.js | 59 ++++++++++--------- lib/features/move/MovePreview.js | 17 ++++-- lib/features/space-tool/SpaceToolPreview.js | 11 +++- .../label-support/LabelSupportSpec.js | 32 ++++++++-- .../overlays/OverlaysIntegrationSpec.js | 12 ++-- 6 files changed, 125 insertions(+), 61 deletions(-) diff --git a/assets/diagram-js.css b/assets/diagram-js.css index f869ef75b..91ba14a20 100644 --- a/assets/diagram-js.css +++ b/assets/diagram-js.css @@ -41,6 +41,7 @@ --element-dragger-color: var(--color-blue-205-100-50); --element-dragging-color: var(--color-grey-225-10-75); + --element-resizing-color: var(--color-grey-225-10-75); --element-hover-outline-fill-color: var(--color-blue-205-100-45); --element-selected-outline-stroke-color: var(--color-blue-205-100-50); --element-selected-outline-secondary-stroke-color: var(--color-blue-205-100-70); @@ -248,6 +249,21 @@ svg.new-parent { visibility: hidden; } +.djs-resizing circle, +.djs-resizing path, +.djs-resizing polygon, +.djs-resizing polyline, +.djs-resizing rect { + fill: none !important; + stroke: var(--element-resizing-color) !important; +} + +.djs-resizing text, +.djs-resizing tspan { + stroke: none !important; + fill: var(--element-resizing-color) !important; +} + .djs-dragger > .djs-resizer { visibility: hidden; } @@ -281,38 +297,41 @@ marker.djs-dragger tspan { stroke: var(--element-dragger-color) !important; } -.djs-dragging, -.djs-dragging > * { - pointer-events: none !important; +.djs-dragging { + opacity: 0.25; } -.djs-dragging .djs-context-pad, -.djs-dragging .djs-outline { +.djs-dragging .djs-visual { display: none !important; } -.djs-dragging * { +.djs-dragging-preview, +.djs-dragging-preview > * { + pointer-events: none !important; +} + +.djs-dragging-preview * { fill: none !important; stroke: var(--element-dragging-color) !important; } -.djs-dragging tspan, -.djs-dragging text { +.djs-dragging-preview tspan, +.djs-dragging-preview text { fill: var(--element-dragging-color) !important; stroke: none !important; } -marker.djs-dragging circle, -marker.djs-dragging path, -marker.djs-dragging polygon, -marker.djs-dragging polyline, -marker.djs-dragging rect { +marker.djs-dragging-preview circle, +marker.djs-dragging-preview path, +marker.djs-dragging-preview polygon, +marker.djs-dragging-preview polyline, +marker.djs-dragging-preview rect { fill: var(--element-dragging-color) !important; stroke: none !important; } -marker.djs-dragging text, -marker.djs-dragging tspan { +marker.djs-dragging-preview text, +marker.djs-dragging-preview tspan { fill: none !important; stroke: var(--element-dragging-color) !important; } @@ -995,7 +1014,7 @@ marker.djs-dragging tspan { /** * hidden styles */ -.djs-element-hidden, +.djs-element-hidden .djs-visual, .djs-element-hidden .djs-hit, .djs-element-hidden .djs-outline, .djs-label-hidden .djs-label { @@ -1006,4 +1025,8 @@ marker.djs-dragging tspan { .djs-element .djs-hit-click-stroke, .djs-element .djs-hit-all { cursor: move; +} + +.djs-overlays.djs-dragging { + opacity: 0.25; } \ No newline at end of file diff --git a/lib/features/complex-preview/ComplexPreview.js b/lib/features/complex-preview/ComplexPreview.js index b93e74c27..1b07467f7 100644 --- a/lib/features/complex-preview/ComplexPreview.js +++ b/lib/features/complex-preview/ComplexPreview.js @@ -28,6 +28,9 @@ import { translate } from '../../util/SvgTransformUtil'; const LAYER_NAME = 'complex-preview'; +const MARKER_DRAGGING = 'djs-dragging', + MARKER_DRAGGING_PREVIEW = 'djs-dragging-preview'; + /** * Complex preview for shapes and connections. */ @@ -59,32 +62,22 @@ export default class ComplexPreview { const layer = this._canvas.getLayer(LAYER_NAME); - // shapes and connections to be created - created.filter(element => !isHidden(element)).forEach(element => { - let gfx; - - if (isConnection(element)) { - gfx = this._graphicsFactory._createContainer('connection', svgCreate('g')); - - this._graphicsFactory.drawConnection(getVisual(gfx), element); - } else { - gfx = this._graphicsFactory._createContainer('shape', svgCreate('g')); - - this._graphicsFactory.drawShape(getVisual(gfx), element); + // elements to be removed + removed.forEach(element => { + this._previewSupport.addDragger(element, layer, undefined, MARKER_DRAGGING_PREVIEW); - translate(gfx, element.x, element.y); - } + this._canvas.addMarker(element, MARKER_DRAGGING); - this._previewSupport.addDragger(element, layer, gfx); + this._markers.push([ element, MARKER_DRAGGING ]); }); // elements to be moved moved.forEach(({ element, delta }) => { - this._previewSupport.addDragger(element, layer, undefined, 'djs-dragging'); + this._previewSupport.addDragger(element, layer, undefined, MARKER_DRAGGING_PREVIEW); - this._canvas.addMarker(element, 'djs-element-hidden'); + this._canvas.addMarker(element, MARKER_DRAGGING); - this._markers.push([ element, 'djs-element-hidden' ]); + this._markers.push([ element, MARKER_DRAGGING ]); const dragger = this._previewSupport.addDragger(element, layer); @@ -95,22 +88,13 @@ export default class ComplexPreview { } }); - // elements to be removed - removed.forEach(element => { - this._previewSupport.addDragger(element, layer, undefined, 'djs-dragging'); - - this._canvas.addMarker(element, 'djs-element-hidden'); - - this._markers.push([ element, 'djs-element-hidden' ]); - }); - // elements to be resized resized.forEach(({ shape, bounds }) => { this._canvas.addMarker(shape, 'djs-hidden'); this._markers.push([ shape, 'djs-hidden' ]); - this._previewSupport.addDragger(shape, layer, undefined, 'djs-dragging'); + this._previewSupport.addDragger(shape, layer, undefined, MARKER_DRAGGING_PREVIEW); const gfx = this._graphicsFactory._createContainer('shape', svgCreate('g')); @@ -123,6 +107,25 @@ export default class ComplexPreview { this._previewSupport.addDragger(shape, layer, gfx); }); + + // shapes and connections to be created + created.filter(element => !isHidden(element)).forEach(element => { + let gfx; + + if (isConnection(element)) { + gfx = this._graphicsFactory._createContainer('connection', svgCreate('g')); + + this._graphicsFactory.drawConnection(getVisual(gfx), element); + } else { + gfx = this._graphicsFactory._createContainer('shape', svgCreate('g')); + + this._graphicsFactory.drawShape(getVisual(gfx), element); + + translate(gfx, element.x, element.y); + } + + this._previewSupport.addDragger(element, layer, gfx); + }); } cleanUp() { diff --git a/lib/features/move/MovePreview.js b/lib/features/move/MovePreview.js index 3da4c6e7d..0409ab7a0 100644 --- a/lib/features/move/MovePreview.js +++ b/lib/features/move/MovePreview.js @@ -16,6 +16,7 @@ import { import { append as svgAppend, attr as svgAttr, + clear as svgClear, create as svgCreate, remove as svgRemove } from 'tiny-svg'; @@ -36,11 +37,13 @@ import { isConnection } from '../../util/ModelUtil'; var LOW_PRIORITY = 499; var MARKER_DRAGGING = 'djs-dragging', + MARKER_DRAGGING_PREVIEW = 'djs-dragging-preview', MARKER_OK = 'drop-ok', MARKER_NOT_OK = 'drop-not-ok', MARKER_NEW_PARENT = 'new-parent', MARKER_ATTACH = 'attach-ok'; +var LAYER_NAME = 'move-preview'; /** * Provides previews for moving shapes when moving. @@ -95,12 +98,14 @@ export default function MovePreview( */ function makeDraggable(context, element, addMarker) { - previewSupport.addDragger(element, context.dragGroup); - if (addMarker) { canvas.addMarker(element, MARKER_DRAGGING); + + previewSupport.addDragger(element, canvas.getLayer(LAYER_NAME), undefined, MARKER_DRAGGING_PREVIEW); } + previewSupport.addDragger(element, context.dragGroup); + if (context.allDraggedElements) { context.allDraggedElements.push(element); } else { @@ -147,8 +152,10 @@ export default function MovePreview( } // add dragging marker - forEach(allDraggedElements, function(e) { - canvas.addMarker(e, MARKER_DRAGGING); + forEach(allDraggedElements, function(element) { + canvas.addMarker(element, MARKER_DRAGGING); + + previewSupport.addDragger(element, canvas.getLayer(LAYER_NAME), undefined, MARKER_DRAGGING_PREVIEW); }); context.allDraggedElements = allDraggedElements; @@ -204,6 +211,8 @@ export default function MovePreview( if (dragGroup) { svgRemove(dragGroup); } + + svgClear(canvas.getLayer(LAYER_NAME)); }); diff --git a/lib/features/space-tool/SpaceToolPreview.js b/lib/features/space-tool/SpaceToolPreview.js index 8addcedcd..4c78a096c 100644 --- a/lib/features/space-tool/SpaceToolPreview.js +++ b/lib/features/space-tool/SpaceToolPreview.js @@ -3,6 +3,7 @@ import { } from 'min-dash'; var MARKER_DRAGGING = 'djs-dragging', + MARKER_DRAGGING_PREVIEW = 'djs-dragging-preview', MARKER_RESIZING = 'djs-resizing'; var LOW_PRIORITY = 250; @@ -11,6 +12,7 @@ import { append as svgAppend, attr as svgAttr, classes as svgClasses, + clear as svgClear, create as svgCreate, remove as svgRemove } from 'tiny-svg'; @@ -30,6 +32,8 @@ import { isConnection } from '../../util/ModelUtil'; var max = Math.max; +var LAYER_NAME = 'space-tool-preview'; + /** * Provides previews for selecting/moving/resizing shapes when creating/removing space. @@ -45,9 +49,12 @@ export default function SpaceToolPreview( function addPreviewGfx(collection, dragGroup) { forEach(collection, function(element) { + canvas.addMarker(element, MARKER_DRAGGING); + + previewSupport.addDragger(element, canvas.getLayer(LAYER_NAME), undefined, MARKER_DRAGGING_PREVIEW); + previewSupport.addDragger(element, dragGroup); - canvas.addMarker(element, MARKER_DRAGGING); }); } @@ -125,6 +132,7 @@ export default function SpaceToolPreview( context.line = line; var dragGroup = svgCreate('g'); + svgAttr(dragGroup, styles.cls('djs-drag-group', [ 'no-events' ])); svgAppend(canvas.getActiveLayer(), dragGroup); @@ -284,6 +292,7 @@ export default function SpaceToolPreview( if (dragGroup) { svgRemove(line); svgRemove(dragGroup); + svgClear(canvas.getLayer(LAYER_NAME)); } forEach(resizingShapes, function(shape) { diff --git a/test/spec/features/label-support/LabelSupportSpec.js b/test/spec/features/label-support/LabelSupportSpec.js index dfed5ccef..74f6d44d1 100644 --- a/test/spec/features/label-support/LabelSupportSpec.js +++ b/test/spec/features/label-support/LabelSupportSpec.js @@ -17,6 +17,9 @@ import { classes as svgClasses } from 'tiny-svg'; +import { + query as domQuery +} from 'min-dom'; describe('features/label-support', function() { @@ -413,7 +416,7 @@ describe('features/label-support', function() { describe('visuals', function() { - it('should add marker', inject(function(elementRegistry, move, dragging) { + it('should add preview and hide element', inject(function(canvas, elementRegistry, move, dragging) { // given var labelGfx = elementRegistry.getGraphics(label), @@ -425,12 +428,22 @@ describe('features/label-support', function() { dragging.move(canvasEvent({ x: 225, y: 150 })); // then - expect(svgClasses(labelGfx).has('djs-dragging')).to.be.true; - expect(svgClasses(otherLabelGfx).has('djs-dragging')).to.be.true; + var context = dragging.context().data.context; + + expect(svgClasses(labelGfx).has('djs-element-hidden')).to.be.true; + expect(svgClasses(otherLabelGfx).has('djs-element-hidden')).to.be.true; + + // grey preview + expect(domQuery('.djs-dragging[data-preview-support-element-id="label"]', canvas.getLayer('move-preview'))).to.exist; + expect(domQuery('.djs-dragging[data-preview-support-element-id="otherLabel"]', canvas.getLayer('move-preview'))).to.exist; + + // blue preview + expect(domQuery('.djs-dragger[data-preview-support-element-id="label"]', context.dragGroup)).to.exist; + expect(domQuery('.djs-dragger[data-preview-support-element-id="otherLabel"]', context.dragGroup)).to.exist; })); - it('should remove marker', inject(function(elementRegistry, move, dragging) { + it('should remove preview and unhide element', inject(function(canvas, elementRegistry, move, dragging) { // given var labelGfx = elementRegistry.getGraphics(label), @@ -443,8 +456,15 @@ describe('features/label-support', function() { dragging.end(); // then - expect(svgClasses(labelGfx).has('djs-dragging')).to.be.false; - expect(svgClasses(otherLabelGfx).has('djs-dragging')).to.be.false; + expect(svgClasses(labelGfx).has('djs-element-hidden')).to.be.false; + expect(svgClasses(otherLabelGfx).has('djs-element-hidden')).to.be.false; + + // grey preview + expect(domQuery('.djs-dragging[data-preview-support-element-id="label"]', canvas.getLayer('move-preview'))).not.to.exist; + expect(domQuery('.djs-dragging[data-preview-support-element-id="otherLabel"]', canvas.getLayer('move-preview'))).not.to.exist; + + // blue preview + expect(context.dragGroup).not.to.exist; })); diff --git a/test/spec/features/overlays/OverlaysIntegrationSpec.js b/test/spec/features/overlays/OverlaysIntegrationSpec.js index 45dc63928..2cbc6c884 100755 --- a/test/spec/features/overlays/OverlaysIntegrationSpec.js +++ b/test/spec/features/overlays/OverlaysIntegrationSpec.js @@ -292,7 +292,7 @@ describe('features/overlay - integration', function() { describe('drag integration', function() { - it('should add marker class', inject(function(canvas, move, dragging, overlays) { + it('should add marker class', inject(function(canvas, move, dragging, overlays) { // given var parent = canvas.addShape({ @@ -320,12 +320,12 @@ describe('features/overlay - integration', function() { dragging.move(canvasEvent({ x: 20, y: 30 })); // then - expect(domClasses(parentOverlayContainer.html).has('djs-dragging')).to.be.true; - expect(domClasses(childOverlayContainer.html).has('djs-dragging')).to.be.true; + expect(domClasses(parentOverlayContainer.html).has('djs-element-hidden')).to.be.true; + expect(domClasses(childOverlayContainer.html).has('djs-element-hidden')).to.be.true; })); - it('should remove marker class on end', inject(function(canvas, move, dragging, overlays) { + it('should remove marker class on end', inject(function(canvas, move, dragging, overlays) { // given var parent = canvas.addShape({ @@ -354,8 +354,8 @@ describe('features/overlay - integration', function() { dragging.end(); // then - expect(domClasses(parentOverlayContainer.html).has('djs-dragging')).to.be.false; - expect(domClasses(childOverlayContainer.html).has('djs-dragging')).to.be.false; + expect(domClasses(parentOverlayContainer.html).has('djs-element-hidden')).to.be.false; + expect(domClasses(childOverlayContainer.html).has('djs-element-hidden')).to.be.false; })); });