From 49b5ee6d7b0adbc3cd1e9865a5b599b983459e88 Mon Sep 17 00:00:00 2001 From: Beatriz Mendes Date: Tue, 31 Oct 2023 16:14:37 +0100 Subject: [PATCH 1/2] deps: update to diagram-js@12.7.1 --- package-lock.json | 45 ++++++++++--------- packages/dmn-js-decision-table/package.json | 2 +- packages/dmn-js-drd/package.json | 2 +- .../dmn-js-literal-expression/package.json | 2 +- packages/dmn-js-shared/package.json | 2 +- packages/dmn-js/package.json | 2 +- 6 files changed, 29 insertions(+), 26 deletions(-) diff --git a/package-lock.json b/package-lock.json index da6a3d53..47d73d4c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4988,8 +4988,9 @@ } }, "node_modules/clsx": { - "version": "1.2.1", - "license": "MIT", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", "engines": { "node": ">=6" } @@ -6887,12 +6888,12 @@ "license": "MIT" }, "node_modules/diagram-js": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-12.2.0.tgz", - "integrity": "sha512-CXo/qc2KJz663t2b7AlrkeMCo4SdVZMNxq4oNwUN6QzbWesnbjNCwS9aptIDFkpBjXRGtgOzf/T6D6QaVJfTqw==", + "version": "12.7.1", + "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-12.7.1.tgz", + "integrity": "sha512-g5TqtbrTTIMepyrIXuRy7xS6paHnvnQajclm/rMJxGZp7/9kAK5zxELmvS0r+Z2S18h17eaDRxtsmosBVuOTcQ==", "dependencies": { "@bpmn-io/diagram-js-ui": "^0.2.2", - "clsx": "^1.2.1", + "clsx": "^2.0.0", "didi": "^9.0.2", "hammerjs": "^2.0.1", "inherits-browser": "^0.1.0", @@ -19782,7 +19783,7 @@ "cpx": "^1.5.0", "del": "^5.1.0", "del-cli": "^5.0.0", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "dmn-font": "^0.6.2", "execa": "^8.0.0", "min-dom": "^4.0.3", @@ -19796,7 +19797,7 @@ "dependencies": { "@bpmn-io/dmn-variable-resolver": "^0.3.1", "css.escape": "^1.5.1", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "dmn-js-shared": "^14.5.0", "escape-html": "^1.0.3", "inferno": "~5.6.2", @@ -19814,7 +19815,7 @@ "version": "14.6.0", "license": "SEE LICENSE IN LICENSE", "dependencies": { - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "diagram-js-direct-editing": "^2.0.0", "dmn-js-shared": "^14.5.0", "inherits-browser": "^0.1.0", @@ -19832,7 +19833,7 @@ "license": "SEE LICENSE IN LICENSE", "dependencies": { "@bpmn-io/dmn-variable-resolver": "^0.3.1", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "dmn-js-shared": "^14.5.0", "escape-html": "^1.0.3", "inferno": "~5.6.2", @@ -19850,7 +19851,7 @@ "license": "SEE LICENSE IN LICENSE", "dependencies": { "@bpmn-io/feel-editor": "^1.0.0", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "didi": "^9.0.0", "dmn-moddle": "^10.0.0", "ids": "^1.0.0", @@ -23329,7 +23330,9 @@ } }, "clsx": { - "version": "1.2.1" + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==" }, "cmd-shim": { "version": "6.0.1", @@ -24687,12 +24690,12 @@ "dev": true }, "diagram-js": { - "version": "12.2.0", - "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-12.2.0.tgz", - "integrity": "sha512-CXo/qc2KJz663t2b7AlrkeMCo4SdVZMNxq4oNwUN6QzbWesnbjNCwS9aptIDFkpBjXRGtgOzf/T6D6QaVJfTqw==", + "version": "12.7.1", + "resolved": "https://registry.npmjs.org/diagram-js/-/diagram-js-12.7.1.tgz", + "integrity": "sha512-g5TqtbrTTIMepyrIXuRy7xS6paHnvnQajclm/rMJxGZp7/9kAK5zxELmvS0r+Z2S18h17eaDRxtsmosBVuOTcQ==", "requires": { "@bpmn-io/diagram-js-ui": "^0.2.2", - "clsx": "^1.2.1", + "clsx": "^2.0.0", "didi": "^9.0.2", "hammerjs": "^2.0.1", "inherits-browser": "^0.1.0", @@ -24748,7 +24751,7 @@ "cpx": "^1.5.0", "del": "^5.1.0", "del-cli": "^5.0.0", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "dmn-font": "^0.6.2", "dmn-js-decision-table": "^14.6.0", "dmn-js-drd": "^14.6.0", @@ -24846,7 +24849,7 @@ "requires": { "@bpmn-io/dmn-variable-resolver": "^0.3.1", "css.escape": "^1.5.1", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "dmn-font": "^0.6.2", "dmn-js-shared": "^14.5.0", "escape-html": "^1.0.3", @@ -24861,7 +24864,7 @@ "dmn-js-drd": { "version": "file:packages/dmn-js-drd", "requires": { - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "diagram-js-direct-editing": "^2.0.0", "dmn-font": "^0.6.2", "dmn-js-shared": "^14.5.0", @@ -24876,7 +24879,7 @@ "version": "file:packages/dmn-js-literal-expression", "requires": { "@bpmn-io/dmn-variable-resolver": "^0.3.1", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "dmn-font": "^0.6.2", "dmn-js-shared": "^14.5.0", "escape-html": "^1.0.3", @@ -24891,7 +24894,7 @@ "version": "file:packages/dmn-js-shared", "requires": { "@bpmn-io/feel-editor": "^1.0.0", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "didi": "^9.0.0", "dmn-moddle": "^10.0.0", "ids": "^1.0.0", diff --git a/packages/dmn-js-decision-table/package.json b/packages/dmn-js-decision-table/package.json index a94f80e3..40b4a08e 100644 --- a/packages/dmn-js-decision-table/package.json +++ b/packages/dmn-js-decision-table/package.json @@ -32,7 +32,7 @@ "dependencies": { "@bpmn-io/dmn-variable-resolver": "^0.3.1", "css.escape": "^1.5.1", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "dmn-js-shared": "^14.5.0", "escape-html": "^1.0.3", "inferno": "~5.6.2", diff --git a/packages/dmn-js-drd/package.json b/packages/dmn-js-drd/package.json index ebcab9be..2230034c 100644 --- a/packages/dmn-js-drd/package.json +++ b/packages/dmn-js-drd/package.json @@ -26,7 +26,7 @@ "drd" ], "dependencies": { - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "diagram-js-direct-editing": "^2.0.0", "dmn-js-shared": "^14.5.0", "inherits-browser": "^0.1.0", diff --git a/packages/dmn-js-literal-expression/package.json b/packages/dmn-js-literal-expression/package.json index fe4e525b..ded69ae8 100644 --- a/packages/dmn-js-literal-expression/package.json +++ b/packages/dmn-js-literal-expression/package.json @@ -31,7 +31,7 @@ }, "dependencies": { "@bpmn-io/dmn-variable-resolver": "^0.3.1", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "dmn-js-shared": "^14.5.0", "escape-html": "^1.0.3", "inferno": "~5.6.2", diff --git a/packages/dmn-js-shared/package.json b/packages/dmn-js-shared/package.json index 2a44141a..8e46e10a 100644 --- a/packages/dmn-js-shared/package.json +++ b/packages/dmn-js-shared/package.json @@ -24,7 +24,7 @@ }, "dependencies": { "@bpmn-io/feel-editor": "^1.0.0", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "didi": "^9.0.0", "dmn-moddle": "^10.0.0", "ids": "^1.0.0", diff --git a/packages/dmn-js/package.json b/packages/dmn-js/package.json index 1f6d2616..19a9c5aa 100644 --- a/packages/dmn-js/package.json +++ b/packages/dmn-js/package.json @@ -51,7 +51,7 @@ "cpx": "^1.5.0", "del": "^5.1.0", "del-cli": "^5.0.0", - "diagram-js": "^12.0.0", + "diagram-js": "^12.7.1", "dmn-font": "^0.6.2", "execa": "^8.0.0", "min-dom": "^4.0.3", From 4e7b477df47d3e7bef4a79b6a43fd1fd44abef13 Mon Sep 17 00:00:00 2001 From: Beatriz Mendes Date: Tue, 31 Oct 2023 21:12:16 +0100 Subject: [PATCH 2/2] feat: custom selection outline Closes #799 --- packages/dmn-js-drd/src/Modeler.js | 2 + .../src/features/outline/OutlineProvider.js | 125 ++++++++++++++++++ .../src/features/outline/OutlineUtil.js | 50 +++++++ .../dmn-js-drd/src/features/outline/index.js | 10 ++ .../spec/features/outline/OutlineProvider.dmn | 32 +++++ .../features/outline/OutlineProviderSpec.js | 76 +++++++++++ 6 files changed, 295 insertions(+) create mode 100644 packages/dmn-js-drd/src/features/outline/OutlineProvider.js create mode 100644 packages/dmn-js-drd/src/features/outline/OutlineUtil.js create mode 100644 packages/dmn-js-drd/src/features/outline/index.js create mode 100644 packages/dmn-js-drd/test/spec/features/outline/OutlineProvider.dmn create mode 100644 packages/dmn-js-drd/test/spec/features/outline/OutlineProviderSpec.js diff --git a/packages/dmn-js-drd/src/Modeler.js b/packages/dmn-js-drd/src/Modeler.js index 3b91d019..db823eb7 100644 --- a/packages/dmn-js-drd/src/Modeler.js +++ b/packages/dmn-js-drd/src/Modeler.js @@ -19,6 +19,7 @@ import KeyboardMoveSelectionModule from 'diagram-js/lib/features/keyboard-move-s import LabelEditingModule from './features/label-editing'; import ModelingModule from './features/modeling'; import MoveModule from 'diagram-js/lib/features/move'; +import OutlineProvider from './features/outline'; import PaletteModule from './features/palette'; import ResizeModule from 'diagram-js/lib/features/resize'; import SnappingModule from './features/snapping'; @@ -131,6 +132,7 @@ Modeler.prototype._modelingModules = [ LabelEditingModule, ModelingModule, MoveModule, + OutlineProvider, PaletteModule, ResizeModule, SnappingModule diff --git a/packages/dmn-js-drd/src/features/outline/OutlineProvider.js b/packages/dmn-js-drd/src/features/outline/OutlineProvider.js new file mode 100644 index 00000000..5a53a1ed --- /dev/null +++ b/packages/dmn-js-drd/src/features/outline/OutlineProvider.js @@ -0,0 +1,125 @@ +import { assign } from 'min-dash'; + +import { + attr as svgAttr, + create as svgCreate +} from 'tiny-svg'; + +import { + is, + isAny +} from 'dmn-js-shared/lib/util/ModelUtil'; + +import { + BUSINESS_KNOWLEDGE_MODEL_OUTLINE_PATH, + KNOWLEDGE_SOURCE_OUTLINE_PATH, + BUSINESS_KNOWLEDGE_MODEL_STANDARD_SIZE, + KNOWLEDGE_SOURCE_STANDARD_SIZE, + createPath +} from './OutlineUtil'; + +const DEFAULT_OFFSET = 5; + +/** + * DMN-specific outline provider. + * + * @implements {BaseOutlineProvider} + * + * @param {Outline} outline + * @param {Styles} styles + */ +export default function OutlineProvider(outline, styles) { + + this._styles = styles; + + outline.registerProvider(this); +} + +OutlineProvider.$inject = [ + 'outline', + 'styles' +]; + +/** + * Returns outline for a given element. + * + * @param {Element} element + * + * @return {Outline} + */ +OutlineProvider.prototype.getOutline = function(element) { + + const OUTLINE_STYLE = this._styles.cls('djs-outline', [ 'no-fill' ]); + + var outline; + + if (is(element, 'dmn:InputData')) { + outline = svgCreate('rect'); + + svgAttr(outline, assign({ + x: -DEFAULT_OFFSET, + y: -DEFAULT_OFFSET, + rx: 27, + width: element.width + DEFAULT_OFFSET * 2, + height: element.height + DEFAULT_OFFSET * 2, + }, OUTLINE_STYLE)); + + } else if ( + is(element, 'dmn:BusinessKnowledgeModel') + && isStandardSize(element, 'dmn:BusinessKnowledgeModel') + ) { + outline = createPath( + BUSINESS_KNOWLEDGE_MODEL_OUTLINE_PATH, + { x: -6, y:-6 }, + OUTLINE_STYLE + ); + + } else if ( + is(element, 'dmn:KnowledgeSource') + && isStandardSize(element, 'dmn:KnowledgeSource')) { + outline = createPath( + KNOWLEDGE_SOURCE_OUTLINE_PATH, + { x: -6, y:-1.5 }, + OUTLINE_STYLE + ); + } + + return outline; +}; + +/** + * Updates the outline for a given element. + * Returns true if the update for the given element was handled by this provider. + * + * @param {Element} element + * @param {Outline} outline + * @returns {boolean} + */ +OutlineProvider.prototype.updateOutline = function(element) { + + if (isAny(element, [ + 'dmn:InputData', + 'dmn:BusinessKnowledgeModel', + 'dmn:KnowledgeSource' + ])) { + return true; + } + + return false; +}; + + +// helpers ////////// + +function isStandardSize(element, type) { + var standardSize; + + if (type === 'dmn:BusinessKnowledgeModel') { + standardSize = BUSINESS_KNOWLEDGE_MODEL_STANDARD_SIZE; + } else if (type === 'dmn:KnowledgeSource') { + standardSize = KNOWLEDGE_SOURCE_STANDARD_SIZE; + } + + return element.width === standardSize.width + && element.height === standardSize.height; +} \ No newline at end of file diff --git a/packages/dmn-js-drd/src/features/outline/OutlineUtil.js b/packages/dmn-js-drd/src/features/outline/OutlineUtil.js new file mode 100644 index 00000000..52f18501 --- /dev/null +++ b/packages/dmn-js-drd/src/features/outline/OutlineUtil.js @@ -0,0 +1,50 @@ +import { + create as svgCreate +} from 'tiny-svg'; + +export const BUSINESS_KNOWLEDGE_MODEL_OUTLINE_PATH = ` +M2.45221 16.0068L18.7175 1.74436L18.0615 0.996331L18.7175 1.74436C19.2646 1.26455 19.9676 +1 20.6953 1H140.926C142.583 1 143.926 2.34295 143.926 3.99967L143.93 37.5457C143.93 +38.3668 143.593 39.152 142.999 39.7183L143.689 40.4424L142.999 39.7183L127.299 +54.6723C126.741 55.2036 126 55.5 125.23 55.5H4.53787C2.88599 55.5 1.54491 54.1646 1.5379 +52.5127L1.43066 27.229L1.43065 27.2248L1.4301 18.2626C1.43005 +17.3986 1.80255 16.5765 2.45221 16.0068Z +`; + + +export const KNOWLEDGE_SOURCE_OUTLINE_PATH = ` +M1.79494 63.0032L1.2941 63.6423L1.79493 63.0032C1.71778 62.9427 1.6428 62.8741 1.57288 +62.8L1.01736 63.3241L1.57288 62.8C1.20495 62.41 1 61.8941 1 61.3579V2.65067C1 1.74066 +1.73867 1.00345 2.64868 1.00526L108.006 1.2145C109.66 1.21778 111 2.55996 111 +4.21449V21.7015V61.6762C111 63.3188 109.679 64.656 108.037 64.676L107.06 64.6879C106.66 +64.6927 106.26 64.6165 105.89 64.4652C105.04 64.1176 104.222 63.78 103.43 +63.4531C93.4866 59.3517 87.6891 56.9603 76.3991 58.1057C71.7035 58.5821 66.8747 60.74 +61.5721 63.1744C61.3243 63.2881 61.0753 63.4026 60.825 63.5177C55.6712 65.8868 49.9696 +68.5077 43.2365 70.3468C31.101 73.6617 15.2135 73.5179 1.79494 63.0032Z +`; + +/** + * @type {Dimensions} + */ +export const BUSINESS_KNOWLEDGE_MODEL_STANDARD_SIZE = { width: 135, height: 46 }; + +/** + * @type {Dimensions} + */ +export const KNOWLEDGE_SOURCE_STANDARD_SIZE = { width: 100, height: 63 }; + +/** + * Create a path element with given attributes. + * @param {string} path + * @param {Object} attrs + * @param {Object} OUTLINE_STYLE + * @return {SVGElement} + */ +export function createPath(path, attrs, OUTLINE_STYLE) { + return svgCreate('path', { + d: path, + strokeWidth: 2, + transform: `translate(${attrs.x}, ${attrs.y})`, + ...OUTLINE_STYLE + }); +} \ No newline at end of file diff --git a/packages/dmn-js-drd/src/features/outline/index.js b/packages/dmn-js-drd/src/features/outline/index.js new file mode 100644 index 00000000..8a018a32 --- /dev/null +++ b/packages/dmn-js-drd/src/features/outline/index.js @@ -0,0 +1,10 @@ +import Outline from 'diagram-js/lib/features/outline'; +import OutlineProvider from './OutlineProvider'; + +export default { + __depends__: [ + Outline + ], + __init__: [ 'outlineProvider' ], + outlineProvider: [ 'type', OutlineProvider ] +}; \ No newline at end of file diff --git a/packages/dmn-js-drd/test/spec/features/outline/OutlineProvider.dmn b/packages/dmn-js-drd/test/spec/features/outline/OutlineProvider.dmn new file mode 100644 index 00000000..54de48f3 --- /dev/null +++ b/packages/dmn-js-drd/test/spec/features/outline/OutlineProvider.dmn @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/dmn-js-drd/test/spec/features/outline/OutlineProviderSpec.js b/packages/dmn-js-drd/test/spec/features/outline/OutlineProviderSpec.js new file mode 100644 index 00000000..5efbabac --- /dev/null +++ b/packages/dmn-js-drd/test/spec/features/outline/OutlineProviderSpec.js @@ -0,0 +1,76 @@ +import { + bootstrapModeler, + inject +} from 'test/TestHelper'; + +import coreModule from 'src/core'; +import modelingModule from 'src/features/modeling'; +import outlineProviderModule from 'src/features/outline'; + +import diagramXml from './OutlineProvider.dmn'; + +import { + KNOWLEDGE_SOURCE_OUTLINE_PATH, + BUSINESS_KNOWLEDGE_MODEL_OUTLINE_PATH +} from 'src/features/outline/OutlineUtil'; + + +describe('features/outline - outline provider', function() { + var testModules = [ + coreModule, + modelingModule, + outlineProviderModule + ]; + + + beforeEach(bootstrapModeler(diagramXml, { modules: testModules })); + + describe('should provide outline for', function() { + + it('input data', inject(function(elementRegistry, outline) { + + // given + var inputData = elementRegistry.get('InputData'); + + // when + var outlineShape = outline.getOutline(inputData); + + // then + expect(outlineShape).to.exist; + expect(outlineShape.tagName).to.eql('rect'); + })); + + + it('knowledge source', inject(function(elementRegistry, outline) { + + // given + var knowledgeSource = elementRegistry.get('KnowledgeSource'); + + // when + var outlineShape = outline.getOutline(knowledgeSource); + + // then + expect(outlineShape).to.exist; + expect(outlineShape.tagName).to.eql('path'); + expect(outlineShape.getAttribute('d')).to.eql(KNOWLEDGE_SOURCE_OUTLINE_PATH); + })); + + + it('business knowledge model', inject(function(elementRegistry, outline) { + + // given + var businessKnowledgeModel = elementRegistry.get('BusinessKnowledgeModel'); + + // when + var outlineShape = outline.getOutline(businessKnowledgeModel); + + // then + expect(outlineShape).to.exist; + expect(outlineShape.tagName).to.eql('path'); + expect(outlineShape.getAttribute('d')) + .to.eql(BUSINESS_KNOWLEDGE_MODEL_OUTLINE_PATH); + })); + + }); + +}); \ No newline at end of file