WIP

bpmn-io · Nov 6, 2023 · 85b8a0b · 85b8a0b
1 parent fa64a79
commit 85b8a0b
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 61 deletions.
diff --git 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;
 }
diff --git 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
@@ -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
@@ -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
@@ -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;
     }));