From 11f48fca7720fa38bfdab4583b485cf060a74a84 Mon Sep 17 00:00:00 2001 From: Maciej Barelkowski Date: Tue, 17 May 2022 13:48:08 +0200 Subject: [PATCH] feat: add hit box to disable move interaction Use `no-move` type of hit box to disable element movement via hit box. Related to https://github.com/camunda/camunda-modeler/issues/2859 --- assets/diagram-js.css | 16 +++++----------- .../interaction-events/InteractionEvents.js | 5 ++++- lib/features/move/Move.js | 9 +++++++++ test/spec/features/move/MoveSpec.js | 17 +++++++++++++++++ 4 files changed, 35 insertions(+), 12 deletions(-) diff --git a/assets/diagram-js.css b/assets/diagram-js.css index be356e28c..dd8c742cc 100644 --- a/assets/diagram-js.css +++ b/assets/diagram-js.css @@ -9,7 +9,7 @@ --color-grey-225-10-80: hsl(225, 10%, 80%); --color-grey-225-10-85: hsl(225, 10%, 85%); --color-grey-225-10-90: hsl(225, 10%, 90%); - --color-grey-225-10-95: hsl(225, 10%, 95%); + --color-grey-225-10-95: hsl(225, 10%, 95%); --color-grey-225-10-97: hsl(225, 10%, 97%); --color-blue-205-100-45: hsl(205, 100%, 45%); @@ -25,8 +25,8 @@ --color-red-360-100-97: hsl(360, 100%, 97%); --color-white: hsl(0, 0%, 100%); - --color-black: hsl(0, 0%, 0%); - --color-black-opacity-05: hsla(0, 0%, 0%, 5%); + --color-black: hsl(0, 0%, 0%); + --color-black-opacity-05: hsla(0, 0%, 0%, 5%); --color-black-opacity-10: hsla(0, 0%, 0%, 10%); --bendpoint-fill-color: var(--color-blue-205-100-45-opacity-30); @@ -296,7 +296,8 @@ marker.djs-dragger tspan { /** * all pointer events for hit shape */ -.djs-element > .djs-hit-all { +.djs-element > .djs-hit-all, +.djs-element > .djs-hit-no-move { pointer-events: all; } @@ -305,13 +306,6 @@ marker.djs-dragger tspan { pointer-events: stroke; } -/** - * all pointer events for hit shape - */ -.djs-drag-active .djs-element > .djs-hit-click-stroke { - pointer-events: all; -} - /** * shape / connection basic styles */ diff --git a/lib/features/interaction-events/InteractionEvents.js b/lib/features/interaction-events/InteractionEvents.js index ee2641533..af2ff8cdf 100644 --- a/lib/features/interaction-events/InteractionEvents.js +++ b/lib/features/interaction-events/InteractionEvents.js @@ -258,10 +258,13 @@ export default function InteractionEvents(eventBus, elementRegistry, styles) { var ALL_HIT_STYLE = createHitStyle('djs-hit djs-hit-all'); + var NO_MOVE_HIT_STYLE = createHitStyle('djs-hit djs-hit-no-move'); + var HIT_TYPES = { 'all': ALL_HIT_STYLE, 'click-stroke': CLICK_STROKE_HIT_STYLE, - 'stroke': STROKE_HIT_STYLE + 'stroke': STROKE_HIT_STYLE, + 'no-move': NO_MOVE_HIT_STYLE }; function createHitStyle(classNames, attrs) { diff --git a/lib/features/move/Move.js b/lib/features/move/Move.js index 173f115d9..0eae520cf 100644 --- a/lib/features/move/Move.js +++ b/lib/features/move/Move.js @@ -5,6 +5,10 @@ import { isObject } from 'min-dash'; +import { + classes as svgClasses +} from 'tiny-svg'; + var LOW_PRIORITY = 500, MEDIUM_PRIORITY = 1250, HIGH_PRIORITY = 1500; @@ -202,6 +206,11 @@ export default function MoveEvents( return; } + // ignore non-draggable hits + if (svgClasses(event.target).has('djs-hit-no-move')) { + return; + } + var referencePoint = mid(element); dragging.init(event, referencePoint, 'shape.move', { diff --git a/test/spec/features/move/MoveSpec.js b/test/spec/features/move/MoveSpec.js index ea8d85f4a..a32d94e72 100644 --- a/test/spec/features/move/MoveSpec.js +++ b/test/spec/features/move/MoveSpec.js @@ -180,6 +180,21 @@ describe('features/move - Move', function() { } )); + + it('should NOT start if triggered on `no-move` hit', inject(function(dragging, move) { + + // given + var target = document.createElement('svg'), + event = canvasEvent({ x: 0, y: 0 }, { target: target }); + + target.classList.add('djs-hit-no-move'); + + // when + move.start(event, childShape); + + // then + expect(dragging.context()).not.to.exist; + })); }); @@ -215,6 +230,8 @@ describe('features/move - Move', function() { function mouseDownEvent(element, data) { + data = data || { target: document.createElement('svg') }; + return getDiagramJS().invoke(function(eventBus) { return eventBus.createEvent({ type: 'element.mousedown',