From c0b8eb722e3b5bb10e337c24dcc92eead8f9cd61 Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Wed, 14 Jun 2023 11:14:34 +0200 Subject: [PATCH] refactor: directly use mxGraph value objects The mxgraph initializer module now exports main mxGraph objects that are used several times in the library. This make the code easier to read and reduce the size of minified bundles. So, when used, there is no more need to prefix the call of mxGraph object by mxgraph. For instance, instead of writing `mxgraph.mxConstants.XXX`, it is possible to write `mxConstants.XXX`. Notice that in files where both values (from mxGraph) and types (from typed-mxgraph) are imported, the types are aliased to avoid name clash. The convention taken is to postfix the type by `Type` to make it explicit. --- dev/ts/component/SvgExporter.ts | 22 +-- dev/ts/component/ThemedBpmnVisualization.ts | 6 +- src/component/mxgraph/BpmnGraph.ts | 10 +- src/component/mxgraph/BpmnRenderer.ts | 14 +- src/component/mxgraph/GraphCellUpdater.ts | 4 +- src/component/mxgraph/GraphConfigurator.ts | 8 +- .../mxgraph/config/ShapeConfigurator.ts | 70 ++++----- .../mxgraph/config/StyleConfigurator.ts | 146 +++++++++--------- src/component/mxgraph/initializer.ts | 21 +++ .../mxgraph/overlay/custom-overlay.ts | 31 ++-- .../mxgraph/renderer/CoordinatesTranslator.ts | 18 +-- .../mxgraph/renderer/StyleComputer.ts | 44 +++--- .../mxgraph/shape/activity-shapes.ts | 10 +- src/component/mxgraph/shape/edges.ts | 10 +- src/component/mxgraph/shape/event-shapes.ts | 6 +- src/component/mxgraph/shape/flow-shapes.ts | 6 +- src/component/mxgraph/shape/gateway-shapes.ts | 4 +- .../mxgraph/shape/render/icon-painter.ts | 10 +- .../mxgraph/shape/text-annotation-shapes.ts | 4 +- src/component/mxgraph/style/utils.ts | 36 ++--- src/component/version.ts | 4 +- test/integration/config/mxgraph-config.ts | 4 +- test/integration/matchers/toBeEdge/index.ts | 4 +- test/integration/matchers/toBeShape/index.ts | 4 +- .../mxGraph.model.bpmn.elements.test.ts | 62 ++++---- 25 files changed, 288 insertions(+), 270 deletions(-) diff --git a/dev/ts/component/SvgExporter.ts b/dev/ts/component/SvgExporter.ts index eae334786b..b6602c5e07 100644 --- a/dev/ts/component/SvgExporter.ts +++ b/dev/ts/component/SvgExporter.ts @@ -14,8 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { mxgraph } from '../../../src/component/mxgraph/initializer'; -import type { mxGraph, mxSvgCanvas2D } from 'mxgraph'; +import { mxgraph, mxClient, mxConstants, mxSvgCanvas2D, mxUtils } from '../../../src/component/mxgraph/initializer'; +import type { mxGraph, mxSvgCanvas2D as mxSvgCanvas2DType } from 'mxgraph'; interface SvgExportOptions { scale: number; @@ -40,13 +40,13 @@ export class SvgExporter { // chrome and webkit: tainted canvas when svg contains foreignObject // also on brave --> probably fail on chromium based browsers // so disable foreign objects for such browsers - const isFirefox = mxgraph.mxClient.IS_FF; + const isFirefox = mxClient.IS_FF; return this.doSvgExport(isFirefox); } private doSvgExport(enableForeignObjectForLabel: boolean): string { const svgDocument = this.computeSvg({ scale: 1, border: 25, enableForeignObjectForLabel: enableForeignObjectForLabel }); - const svgAsString = mxgraph.mxUtils.getXml(svgDocument); + const svgAsString = mxUtils.getXml(svgDocument); return ` ${svgAsString} @@ -63,8 +63,8 @@ ${svgAsString} const viewScale = this.graph.view.scale; // Prepares SVG document that holds the output - const svgDoc = mxgraph.mxUtils.createXmlDocument(); - const root = svgDoc.createElementNS(mxgraph.mxConstants.NS_SVG, 'svg'); + const svgDoc = mxUtils.createXmlDocument(); + const root = svgDoc.createElementNS(mxConstants.NS_SVG, 'svg'); const s = scale / viewScale; const w = Math.max(1, Math.ceil(bounds.width * s) + 2 * border); @@ -76,7 +76,7 @@ ${svgAsString} root.setAttribute('viewBox', (crisp ? '-0.5 -0.5' : '0 0') + ' ' + w + ' ' + h); svgDoc.appendChild(root); - const group = svgDoc.createElementNS(mxgraph.mxConstants.NS_SVG, 'g'); + const group = svgDoc.createElementNS(mxConstants.NS_SVG, 'g'); root.appendChild(group); const svgCanvas = this.createSvgCanvas(group); @@ -100,7 +100,7 @@ ${svgAsString} return svgDoc; } - createSvgCanvas(node: Element): mxSvgCanvas2D { + createSvgCanvas(node: Element): mxSvgCanvas2DType { const canvas = new CanvasForExport(node); // from the draw.io code, may not be needed here canvas.pointerEvents = true; @@ -108,7 +108,7 @@ ${svgAsString} } } -class CanvasForExport extends mxgraph.mxSvgCanvas2D { +class CanvasForExport extends mxSvgCanvas2D { // Convert HTML entities private htmlConverter = document.createElement('div'); @@ -167,7 +167,7 @@ class CanvasForExport extends mxgraph.mxSvgCanvas2D { try { this.htmlConverter.innerHTML = str; - str = mxgraph.mxUtils.extractTextWithWhitespace(this.htmlConverter.childNodes); + str = mxUtils.extractTextWithWhitespace(this.htmlConverter.childNodes); // Workaround for substring breaking double byte UTF const exp = Math.ceil((2 * w) / this.state.fontSize); @@ -192,7 +192,7 @@ class CanvasForExport extends mxgraph.mxSvgCanvas2D { // Uses result and adds ellipsis if more than 1 char remains if (result.length < str.length && str.length - result.length > 1) { - str = mxgraph.mxUtils.trim(result.join('')) + '...'; + str = mxUtils.trim(result.join('')) + '...'; } } catch (e) { console.warn('Error while computing txt label', e); diff --git a/dev/ts/component/ThemedBpmnVisualization.ts b/dev/ts/component/ThemedBpmnVisualization.ts index fda61c6f39..be2fbb743a 100644 --- a/dev/ts/component/ThemedBpmnVisualization.ts +++ b/dev/ts/component/ThemedBpmnVisualization.ts @@ -16,7 +16,7 @@ limitations under the License. import { BpmnVisualization, FlowKind, ShapeBpmnElementKind, ShapeUtil, StyleConfigurator, StyleDefault } from '../../../src/bpmn-visualization'; import { logStartup } from '../utils/internal-helpers'; -import { mxgraph } from '../../../src/component/mxgraph/initializer'; +import { mxConstants } from '../../../src/component/mxgraph/initializer'; interface Theme { defaultFillColor: string; @@ -189,8 +189,8 @@ export class ThemedBpmnVisualization extends BpmnVisualization { // directly access the 'styles' map to update values. Using stylesheet.getCellStyle returns a copy of the style const seqFlowStyle = stylesheet.styles[FlowKind.SEQUENCE_FLOW]; - seqFlowStyle[mxgraph.mxConstants.STYLE_STROKECOLOR] = color; - seqFlowStyle[mxgraph.mxConstants.STYLE_FILLCOLOR] = color; + seqFlowStyle[mxConstants.STYLE_STROKECOLOR] = color; + seqFlowStyle[mxConstants.STYLE_FILLCOLOR] = color; logStartup('Sequence flows style updated'); } diff --git a/src/component/mxgraph/BpmnGraph.ts b/src/component/mxgraph/BpmnGraph.ts index 2227a6609e..52d0b443a8 100644 --- a/src/component/mxgraph/BpmnGraph.ts +++ b/src/component/mxgraph/BpmnGraph.ts @@ -18,7 +18,7 @@ import type { FitOptions, ZoomConfiguration } from '../options'; import { FitType } from '../options'; import { ensurePositiveValue, ensureValidZoomConfiguration } from '../helpers/validators'; import { debounce, throttle } from 'lodash-es'; -import { mxgraph } from './initializer'; +import { mxgraph, mxEvent } from './initializer'; import type { mxCellState, mxGraphView, mxPoint } from 'mxgraph'; const zoomFactorIn = 1.25; @@ -158,8 +158,8 @@ export class BpmnGraph extends mxgraph.mxGraph { */ registerMouseWheelZoomListeners(config: ZoomConfiguration): void { config = ensureValidZoomConfiguration(config); - mxgraph.mxEvent.addMouseWheelListener(debounce(this.createMouseWheelZoomListener(true), config.debounceDelay), this.container); - mxgraph.mxEvent.addMouseWheelListener(throttle(this.createMouseWheelZoomListener(false), config.throttleDelay), this.container); + mxEvent.addMouseWheelListener(debounce(this.createMouseWheelZoomListener(true), config.debounceDelay), this.container); + mxEvent.addMouseWheelListener(throttle(this.createMouseWheelZoomListener(false), config.throttleDelay), this.container); } // Update the currentZoomLevel when performScaling is false, use the currentZoomLevel to set the scale otherwise @@ -171,13 +171,13 @@ export class BpmnGraph extends mxgraph.mxGraph { const [offsetX, offsetY] = this.getEventRelativeCoordinates(evt); const [newScale, dx, dy] = this.getScaleAndTranslationDeltas(offsetX, offsetY); this.view.scaleAndTranslate(newScale, this.view.translate.x + dx, this.view.translate.y + dy); - mxgraph.mxEvent.consume(evt); + mxEvent.consume(evt); } } private createMouseWheelZoomListener(performScaling: boolean) { return (event: Event, up: boolean) => { - if (mxgraph.mxEvent.isConsumed(event)) { + if (mxEvent.isConsumed(event)) { return; } const evt = event as MouseEvent; diff --git a/src/component/mxgraph/BpmnRenderer.ts b/src/component/mxgraph/BpmnRenderer.ts index ca21a386c2..1869a52c96 100644 --- a/src/component/mxgraph/BpmnRenderer.ts +++ b/src/component/mxgraph/BpmnRenderer.ts @@ -25,7 +25,7 @@ import StyleComputer from './renderer/StyleComputer'; import type { BpmnGraph } from './BpmnGraph'; import type { FitOptions, RendererOptions } from '../options'; import type { RenderedModel } from '../registry/bpmn-model-registry'; -import { mxgraph } from './initializer'; +import { mxPoint } from './initializer'; import type { mxCell } from 'mxgraph'; /** @@ -93,10 +93,10 @@ export class BpmnRenderer { if (edgeCenterCoordinate) { mxEdge.geometry.relative = false; - const labelBoundsRelativeCoordinateFromParent = this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new mxgraph.mxPoint(labelBounds.x, labelBounds.y)); + const labelBoundsRelativeCoordinateFromParent = this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new mxPoint(labelBounds.x, labelBounds.y)); const relativeLabelX = labelBoundsRelativeCoordinateFromParent.x + labelBounds.width / 2 - edgeCenterCoordinate.x; const relativeLabelY = labelBoundsRelativeCoordinateFromParent.y - edgeCenterCoordinate.y; - mxEdge.geometry.offset = new mxgraph.mxPoint(relativeLabelX, relativeLabelY); + mxEdge.geometry.offset = new mxPoint(relativeLabelX, relativeLabelY); } } @@ -108,13 +108,13 @@ export class BpmnRenderer { if (edge.bpmnElement instanceof MessageFlow && edge.messageVisibleKind !== MessageVisibleKind.NONE) { const cell = this.graph.insertVertex(mxEdge, messageFowIconId(mxEdge.id), undefined, 0, 0, 20, 14, this.styleComputer.computeMessageFlowIconStyle(edge)); cell.geometry.relative = true; - cell.geometry.offset = new mxgraph.mxPoint(-10, -7); + cell.geometry.offset = new mxPoint(-10, -7); } } private insertWaypoints(waypoints: Waypoint[], mxEdge: mxCell): void { if (waypoints) { - mxEdge.geometry.points = waypoints.map(waypoint => this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new mxgraph.mxPoint(waypoint.x, waypoint.y))); + mxEdge.geometry.points = waypoints.map(waypoint => this.coordinatesTranslator.computeRelativeCoordinates(mxEdge.parent, new mxPoint(waypoint.x, waypoint.y))); } } @@ -123,14 +123,14 @@ export class BpmnRenderer { } private insertVertex(parent: mxCell, id: string | null, value: string, bounds: Bounds, labelBounds: Bounds, style?: string): mxCell { - const vertexCoordinates = this.coordinatesTranslator.computeRelativeCoordinates(parent, new mxgraph.mxPoint(bounds.x, bounds.y)); + const vertexCoordinates = this.coordinatesTranslator.computeRelativeCoordinates(parent, new mxPoint(bounds.x, bounds.y)); const cell = this.graph.insertVertex(parent, id, value, vertexCoordinates.x, vertexCoordinates.y, bounds.width, bounds.height, style); if (labelBounds) { // label coordinates are relative in the cell referential coordinates const relativeLabelX = labelBounds.x - bounds.x; const relativeLabelY = labelBounds.y - bounds.y; - cell.geometry.offset = new mxgraph.mxPoint(relativeLabelX, relativeLabelY); + cell.geometry.offset = new mxPoint(relativeLabelX, relativeLabelY); } return cell; } diff --git a/src/component/mxgraph/GraphCellUpdater.ts b/src/component/mxgraph/GraphCellUpdater.ts index 5291d15694..5b41818814 100644 --- a/src/component/mxgraph/GraphCellUpdater.ts +++ b/src/component/mxgraph/GraphCellUpdater.ts @@ -18,7 +18,7 @@ import { isShapeStyleUpdate, setStyle, updateFill, updateFont, updateStroke } fr import { StyleManager } from './style/StyleManager'; import type { BpmnGraph } from './BpmnGraph'; -import { mxgraph } from './initializer'; +import { mxConstants } from './initializer'; import { BpmnStyleIdentifier } from './style'; import type { Overlay, StyleUpdate } from '../registry'; import type { CssRegistry } from '../registry/css-registry'; @@ -105,7 +105,7 @@ export default class GraphCellUpdater { this.styleManager.ensureStyleIsStored(cell); let cellStyle = cell.getStyle(); - cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_OPACITY, styleUpdate.opacity, ensureOpacityValue); + cellStyle = setStyle(cellStyle, mxConstants.STYLE_OPACITY, styleUpdate.opacity, ensureOpacityValue); cellStyle = updateStroke(cellStyle, styleUpdate.stroke); cellStyle = updateFont(cellStyle, styleUpdate.font); diff --git a/src/component/mxgraph/GraphConfigurator.ts b/src/component/mxgraph/GraphConfigurator.ts index 9bb301773c..7f50f19f08 100644 --- a/src/component/mxgraph/GraphConfigurator.ts +++ b/src/component/mxgraph/GraphConfigurator.ts @@ -19,7 +19,7 @@ import ShapeConfigurator from './config/ShapeConfigurator'; import MarkerConfigurator from './config/MarkerConfigurator'; import type { GlobalOptions } from '../options'; import { BpmnGraph } from './BpmnGraph'; -import { mxgraph } from './initializer'; +import { mxEvent } from './initializer'; import type { mxMouseEvent } from 'mxgraph'; /** @@ -66,13 +66,13 @@ export default class GraphConfigurator { const panningHandler = this.graph.panningHandler; if (options?.navigation?.enabled) { // Pan configuration - panningHandler.addListener(mxgraph.mxEvent.PAN_START, this.getPanningHandler('grab')); - panningHandler.addListener(mxgraph.mxEvent.PAN_END, this.getPanningHandler('default')); + panningHandler.addListener(mxEvent.PAN_START, this.getPanningHandler('grab')); + panningHandler.addListener(mxEvent.PAN_END, this.getPanningHandler('default')); panningHandler.usePopupTrigger = false; // only use the left button to trigger panning // Reimplement the function as we also want to trigger 'panning on cells' (ignoreCell to true) and only on left-click // The mxGraph standard implementation doesn't ignore right click in this case, so do it by ourselves - panningHandler.isForcePanningEvent = (me): boolean => mxgraph.mxEvent.isLeftMouseButton(me.getEvent()) || mxgraph.mxEvent.isMultiTouchEvent(me.getEvent()); + panningHandler.isForcePanningEvent = (me): boolean => mxEvent.isLeftMouseButton(me.getEvent()) || mxEvent.isMultiTouchEvent(me.getEvent()); this.graph.setPanning(true); // Zoom configuration diff --git a/src/component/mxgraph/config/ShapeConfigurator.ts b/src/component/mxgraph/config/ShapeConfigurator.ts index bd7e058285..fe481ddcef 100644 --- a/src/component/mxgraph/config/ShapeConfigurator.ts +++ b/src/component/mxgraph/config/ShapeConfigurator.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { mxgraph } from '../initializer'; +import { mxgraph, mxCellRenderer, mxConstants, mxRectangle, mxSvgCanvas2D } from '../initializer'; import type { mxCellState, mxImageShape, mxShape } from 'mxgraph'; import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; import { EndEventShape, EventShape, IntermediateEventShape, ThrowIntermediateEventShape } from '../shape/event-shapes'; @@ -52,43 +52,43 @@ export default class ShapeConfigurator { private registerShapes(): void { // events - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_END, EndEventShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_START, EventShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW, ThrowIntermediateEventShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH, IntermediateEventShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_BOUNDARY, IntermediateEventShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_END, EndEventShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_START, EventShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_INTERMEDIATE_THROW, ThrowIntermediateEventShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_INTERMEDIATE_CATCH, IntermediateEventShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.EVENT_BOUNDARY, IntermediateEventShape); // gateways - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_COMPLEX, ComplexGatewayShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EVENT_BASED, EventBasedGatewayShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EXCLUSIVE, ExclusiveGatewayShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_INCLUSIVE, InclusiveGatewayShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_PARALLEL, ParallelGatewayShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_COMPLEX, ComplexGatewayShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EVENT_BASED, EventBasedGatewayShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_EXCLUSIVE, ExclusiveGatewayShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_INCLUSIVE, InclusiveGatewayShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.GATEWAY_PARALLEL, ParallelGatewayShape); // activities - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.SUB_PROCESS, SubProcessShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.CALL_ACTIVITY, CallActivityShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.SUB_PROCESS, SubProcessShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.CALL_ACTIVITY, CallActivityShape); // tasks - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK, TaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_SERVICE, ServiceTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_USER, UserTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_RECEIVE, ReceiveTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_SEND, SendTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_MANUAL, ManualTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_SCRIPT, ScriptTaskShape); - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_BUSINESS_RULE, BusinessRuleTaskShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK, TaskShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_SERVICE, ServiceTaskShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_USER, UserTaskShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_RECEIVE, ReceiveTaskShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_SEND, SendTaskShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_MANUAL, ManualTaskShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_SCRIPT, ScriptTaskShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.TASK_BUSINESS_RULE, BusinessRuleTaskShape); // artifacts - mxgraph.mxCellRenderer.registerShape(ShapeBpmnElementKind.TEXT_ANNOTATION, TextAnnotationShape); + mxCellRenderer.registerShape(ShapeBpmnElementKind.TEXT_ANNOTATION, TextAnnotationShape); // shapes for flows - mxgraph.mxCellRenderer.registerShape(BpmnStyleIdentifier.EDGE, BpmnConnector); - mxgraph.mxCellRenderer.registerShape(BpmnStyleIdentifier.MESSAGE_FLOW_ICON, MessageFlowIconShape); + mxCellRenderer.registerShape(BpmnStyleIdentifier.EDGE, BpmnConnector); + mxCellRenderer.registerShape(BpmnStyleIdentifier.MESSAGE_FLOW_ICON, MessageFlowIconShape); } private initMxSvgCanvasPrototype(): void { // getTextCss is only used when creating foreignObject for label, so there is no impact on svg text that we use for Overlays. // Analysis done for mxgraph@4.1.1, still apply to mxgraph@4.2.2 - mxgraph.mxSvgCanvas2D.prototype.getTextCss = function () { + mxSvgCanvas2D.prototype.getTextCss = function () { const s = this.state; - const lh = mxgraph.mxConstants.ABSOLUTE_LINE_HEIGHT ? s.fontSize * mxgraph.mxConstants.LINE_HEIGHT + 'px' : mxgraph.mxConstants.LINE_HEIGHT * this.lineHeightCorrection; + const lh = mxConstants.ABSOLUTE_LINE_HEIGHT ? s.fontSize * mxConstants.LINE_HEIGHT + 'px' : mxConstants.LINE_HEIGHT * this.lineHeightCorrection; let css = 'display: inline-block; font-size: ' + s.fontSize + @@ -107,18 +107,18 @@ export default class ShapeConfigurator { // END OF Fix for issue #920 '; '; - if ((s.fontStyle & mxgraph.mxConstants.FONT_BOLD) == mxgraph.mxConstants.FONT_BOLD) { + if ((s.fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD) { css += 'font-weight: bold; '; } - if ((s.fontStyle & mxgraph.mxConstants.FONT_ITALIC) == mxgraph.mxConstants.FONT_ITALIC) { + if ((s.fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC) { css += 'font-style: italic; '; } const deco = []; - if ((s.fontStyle & mxgraph.mxConstants.FONT_UNDERLINE) == mxgraph.mxConstants.FONT_UNDERLINE) { + if ((s.fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE) { deco.push('underline'); } - if ((s.fontStyle & mxgraph.mxConstants.FONT_STRIKETHROUGH) == mxgraph.mxConstants.FONT_STRIKETHROUGH) { + if ((s.fontStyle & mxConstants.FONT_STRIKETHROUGH) == mxConstants.FONT_STRIKETHROUGH) { deco.push('line-through'); } if (deco.length > 0) { @@ -133,7 +133,7 @@ export default class ShapeConfigurator { // The following is copied from the mxgraph mxShape implementation then converted to TypeScript and enriched for bpmn-visualization // It is needed for adding the custom attributes that permits identification of the BPMN elements in the DOM mxgraph.mxShape.prototype.createSvgCanvas = function () { - const canvas = new mxgraph.mxSvgCanvas2D(this.node, false); + const canvas = new mxSvgCanvas2D(this.node, false); canvas.strokeTolerance = this.pointerEvents ? this.svgStrokeTolerance : 0; canvas.pointerEventsValue = this.svgPointerEvents; const off = this.getSvgScreenOffset(); @@ -151,7 +151,7 @@ export default class ShapeConfigurator { // 'this.state.cell.style' = the style applied to the cell: 1st element: style name = bpmn shape name const cell = this.state.cell; // dialect = strictHtml is set means that current node holds an HTML label - let allBpmnClassNames = computeAllBpmnClassNamesOfCell(cell, this.dialect === mxgraph.mxConstants.DIALECT_STRICTHTML); + let allBpmnClassNames = computeAllBpmnClassNamesOfCell(cell, this.dialect === mxConstants.DIALECT_STRICTHTML); const extraCssClasses = this.state.style[BpmnStyleIdentifier.EXTRA_CSS_CLASSES]; if (typeof extraCssClasses == 'string') { allBpmnClassNames = allBpmnClassNames.concat(extraCssClasses.split(',')); @@ -175,7 +175,7 @@ export default class ShapeConfigurator { } initMxCellRendererCreateCellOverlays(): void { - mxgraph.mxCellRenderer.prototype.createCellOverlays = function (state: mxCellState) { + mxCellRenderer.prototype.createCellOverlays = function (state: mxCellState) { const graph = state.view.graph; const overlays = graph.getCellOverlays(state.cell); let dict = null; @@ -194,9 +194,9 @@ export default class ShapeConfigurator { // START bpmn-visualization CUSTOMIZATION if (currentOverlay instanceof MxGraphCustomOverlay) { - overlayShape = new OverlayBadgeShape(currentOverlay.label, new mxgraph.mxRectangle(0, 0, 0, 0), currentOverlay.style); + overlayShape = new OverlayBadgeShape(currentOverlay.label, new mxRectangle(0, 0, 0, 0), currentOverlay.style); } else { - overlayShape = new mxgraph.mxImageShape(new mxgraph.mxRectangle(0, 0, 0, 0), currentOverlay.image.src); + overlayShape = new mxgraph.mxImageShape(new mxRectangle(0, 0, 0, 0), currentOverlay.image.src); (overlayShape).preserveImageAspect = false; } // END bpmn-visualization CUSTOMIZATION diff --git a/src/component/mxgraph/config/StyleConfigurator.ts b/src/component/mxgraph/config/StyleConfigurator.ts index 138b271dc8..61f84aeb84 100644 --- a/src/component/mxgraph/config/StyleConfigurator.ts +++ b/src/component/mxgraph/config/StyleConfigurator.ts @@ -17,7 +17,7 @@ limitations under the License. import { AssociationDirectionKind, FlowKind, SequenceFlowKind, ShapeBpmnElementKind, ShapeUtil } from '../../../model/bpmn/internal'; import { BpmnStyleIdentifier, MarkerIdentifier, StyleDefault } from '../style'; import type { BpmnGraph } from '../BpmnGraph'; -import { mxgraph } from '../initializer'; +import { mxConstants, mxPerimeter } from '../initializer'; import type { mxStylesheet, StyleMap } from 'mxgraph'; const arrowDefaultSize = 12; @@ -35,30 +35,30 @@ export class StyleConfigurator { [ FlowKind.SEQUENCE_FLOW, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_ENDARROW] = mxgraph.mxConstants.ARROW_BLOCK_THIN; + style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_BLOCK_THIN; }, ], [ FlowKind.MESSAGE_FLOW, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_DASHED] = true; - style[mxgraph.mxConstants.STYLE_DASH_PATTERN] = '8 5'; - style[mxgraph.mxConstants.STYLE_STARTARROW] = mxgraph.mxConstants.ARROW_OVAL; - style[mxgraph.mxConstants.STYLE_STARTSIZE] = 8; - style[mxgraph.mxConstants.STYLE_STARTFILL] = true; + style[mxConstants.STYLE_DASHED] = true; + style[mxConstants.STYLE_DASH_PATTERN] = '8 5'; + style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_OVAL; + style[mxConstants.STYLE_STARTSIZE] = 8; + style[mxConstants.STYLE_STARTFILL] = true; style[BpmnStyleIdentifier.EDGE_START_FILL_COLOR] = StyleDefault.MESSAGE_FLOW_MARKER_START_FILL_COLOR; - style[mxgraph.mxConstants.STYLE_ENDARROW] = mxgraph.mxConstants.ARROW_BLOCK_THIN; - style[mxgraph.mxConstants.STYLE_ENDFILL] = true; + style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_BLOCK_THIN; + style[mxConstants.STYLE_ENDFILL] = true; style[BpmnStyleIdentifier.EDGE_END_FILL_COLOR] = StyleDefault.MESSAGE_FLOW_MARKER_END_FILL_COLOR; }, ], [ FlowKind.ASSOCIATION_FLOW, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_DASHED] = true; - style[mxgraph.mxConstants.STYLE_DASH_PATTERN] = '1 2'; + style[mxConstants.STYLE_DASHED] = true; + style[mxConstants.STYLE_DASH_PATTERN] = '1 2'; // STYLE_ENDARROW and STYLE_STARTARROW are defined in specific AssociationDirectionKind styles when needed - style[mxgraph.mxConstants.STYLE_STARTSIZE] = arrowDefaultSize; + style[mxConstants.STYLE_STARTSIZE] = arrowDefaultSize; }, ], ]); @@ -66,15 +66,15 @@ export class StyleConfigurator { [ SequenceFlowKind.DEFAULT, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_STARTARROW] = MarkerIdentifier.ARROW_DASH; + style[mxConstants.STYLE_STARTARROW] = MarkerIdentifier.ARROW_DASH; }, ], [ SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_STARTARROW] = mxgraph.mxConstants.ARROW_DIAMOND_THIN; - style[mxgraph.mxConstants.STYLE_STARTSIZE] = 18; - style[mxgraph.mxConstants.STYLE_STARTFILL] = true; + style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_DIAMOND_THIN; + style[mxConstants.STYLE_STARTSIZE] = 18; + style[mxConstants.STYLE_STARTFILL] = true; style[BpmnStyleIdentifier.EDGE_START_FILL_COLOR] = StyleDefault.SEQUENCE_FLOW_CONDITIONAL_FROM_ACTIVITY_MARKER_FILL_COLOR; }, ], @@ -90,14 +90,14 @@ export class StyleConfigurator { [ AssociationDirectionKind.ONE, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_ENDARROW] = mxgraph.mxConstants.ARROW_OPEN_THIN; + style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_OPEN_THIN; }, ], [ AssociationDirectionKind.BOTH, (style: StyleMap) => { - style[mxgraph.mxConstants.STYLE_STARTARROW] = mxgraph.mxConstants.ARROW_OPEN_THIN; - style[mxgraph.mxConstants.STYLE_ENDARROW] = mxgraph.mxConstants.ARROW_OPEN_THIN; + style[mxConstants.STYLE_STARTARROW] = mxConstants.ARROW_OPEN_THIN; + style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_OPEN_THIN; }, ], ]); @@ -133,33 +133,33 @@ export class StyleConfigurator { const style = this.getStylesheet().getDefaultVertexStyle(); configureCommonDefaultStyle(style); - style[mxgraph.mxConstants.STYLE_ABSOLUTE_ARCSIZE] = true; - style[mxgraph.mxConstants.STYLE_ARCSIZE] = StyleDefault.SHAPE_ARC_SIZE; + style[mxConstants.STYLE_ABSOLUTE_ARCSIZE] = true; + style[mxConstants.STYLE_ARCSIZE] = StyleDefault.SHAPE_ARC_SIZE; } private configurePoolStyle(): void { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = mxgraph.mxConstants.SHAPE_SWIMLANE; + style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE; // label style - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_MIDDLE; - style[mxgraph.mxConstants.STYLE_ALIGN] = mxgraph.mxConstants.ALIGN_CENTER; - style[mxgraph.mxConstants.STYLE_STARTSIZE] = StyleDefault.POOL_LABEL_SIZE; - style[mxgraph.mxConstants.STYLE_FILLCOLOR] = StyleDefault.POOL_LABEL_FILL_COLOR; + style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; + style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; + style[mxConstants.STYLE_STARTSIZE] = StyleDefault.POOL_LABEL_SIZE; + style[mxConstants.STYLE_FILLCOLOR] = StyleDefault.POOL_LABEL_FILL_COLOR; this.graph.getStylesheet().putCellStyle(ShapeBpmnElementKind.POOL, style); } private configureLaneStyle(): void { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = mxgraph.mxConstants.SHAPE_SWIMLANE; + style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_SWIMLANE; // label style - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_MIDDLE; - style[mxgraph.mxConstants.STYLE_ALIGN] = mxgraph.mxConstants.ALIGN_CENTER; - style[mxgraph.mxConstants.STYLE_SWIMLANE_LINE] = 0; // hide the line between the title region and the content area - style[mxgraph.mxConstants.STYLE_STARTSIZE] = StyleDefault.LANE_LABEL_SIZE; - style[mxgraph.mxConstants.STYLE_FILLCOLOR] = StyleDefault.LANE_LABEL_FILL_COLOR; + style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; + style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; + style[mxConstants.STYLE_SWIMLANE_LINE] = 0; // hide the line between the title region and the content area + style[mxConstants.STYLE_STARTSIZE] = StyleDefault.LANE_LABEL_SIZE; + style[mxConstants.STYLE_FILLCOLOR] = StyleDefault.LANE_LABEL_FILL_COLOR; this.graph.getStylesheet().putCellStyle(ShapeBpmnElementKind.LANE, style); } @@ -167,35 +167,35 @@ export class StyleConfigurator { private configureEventStyles(): void { ShapeUtil.eventKinds().forEach(kind => { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = kind; - style[mxgraph.mxConstants.STYLE_PERIMETER] = mxgraph.mxPerimeter.EllipsePerimeter; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN; - style[mxgraph.mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxgraph.mxConstants.ALIGN_BOTTOM; + style[mxConstants.STYLE_SHAPE] = kind; + style[mxConstants.STYLE_PERIMETER] = mxPerimeter.EllipsePerimeter; + style[mxConstants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.EVENT_END ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN; + style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_BOTTOM; this.putCellStyle(kind, style); }); } private configureTextAnnotationStyle(): void { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = ShapeBpmnElementKind.TEXT_ANNOTATION; - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_MIDDLE; - style[mxgraph.mxConstants.STYLE_ALIGN] = mxgraph.mxConstants.ALIGN_LEFT; - style[mxgraph.mxConstants.STYLE_SPACING_LEFT] = 5; - style[mxgraph.mxConstants.STYLE_FILLCOLOR] = StyleDefault.TEXT_ANNOTATION_FILL_COLOR; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; + style[mxConstants.STYLE_SHAPE] = ShapeBpmnElementKind.TEXT_ANNOTATION; + style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; + style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_LEFT; + style[mxConstants.STYLE_SPACING_LEFT] = 5; + style[mxConstants.STYLE_FILLCOLOR] = StyleDefault.TEXT_ANNOTATION_FILL_COLOR; + style[mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; this.putCellStyle(ShapeBpmnElementKind.TEXT_ANNOTATION, style); } private configureGroupStyle(): void { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_ROUNDED] = true; - style[mxgraph.mxConstants.STYLE_DASHED] = true; - style[mxgraph.mxConstants.STYLE_DASH_PATTERN] = '7 4 1 4'; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; - style[mxgraph.mxConstants.STYLE_FILLCOLOR] = StyleDefault.GROUP_FILL_COLOR; + style[mxConstants.STYLE_ROUNDED] = true; + style[mxConstants.STYLE_DASHED] = true; + style[mxConstants.STYLE_DASH_PATTERN] = '7 4 1 4'; + style[mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; + style[mxConstants.STYLE_FILLCOLOR] = StyleDefault.GROUP_FILL_COLOR; // Default label positioning - style[mxgraph.mxConstants.STYLE_ALIGN] = mxgraph.mxConstants.ALIGN_CENTER; - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_TOP; + style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; + style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; this.putCellStyle(ShapeBpmnElementKind.GROUP, style); } @@ -203,10 +203,10 @@ export class StyleConfigurator { private configureActivityStyles(): void { ShapeUtil.activityKinds().forEach(kind => { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = kind; - style[mxgraph.mxConstants.STYLE_ROUNDED] = true; // required by the BPMN specification - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_MIDDLE; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.CALL_ACTIVITY ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN; + style[mxConstants.STYLE_SHAPE] = kind; + style[mxConstants.STYLE_ROUNDED] = true; // required by the BPMN specification + style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; + style[mxConstants.STYLE_STROKEWIDTH] = kind == ShapeBpmnElementKind.CALL_ACTIVITY ? StyleDefault.STROKE_WIDTH_THICK : StyleDefault.STROKE_WIDTH_THIN; this.putCellStyle(kind, style); }); } @@ -214,14 +214,14 @@ export class StyleConfigurator { private configureGatewayStyles(): void { ShapeUtil.gatewayKinds().forEach(kind => { const style: StyleMap = {}; - style[mxgraph.mxConstants.STYLE_SHAPE] = kind; - style[mxgraph.mxConstants.STYLE_PERIMETER] = mxgraph.mxPerimeter.RhombusPerimeter; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_TOP; + style[mxConstants.STYLE_SHAPE] = kind; + style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RhombusPerimeter; + style[mxConstants.STYLE_STROKEWIDTH] = StyleDefault.STROKE_WIDTH_THIN; + style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_TOP; // Default label positioning - style[mxgraph.mxConstants.STYLE_LABEL_POSITION] = mxgraph.mxConstants.ALIGN_LEFT; - style[mxgraph.mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxgraph.mxConstants.ALIGN_TOP; + style[mxConstants.STYLE_LABEL_POSITION] = mxConstants.ALIGN_LEFT; + style[mxConstants.STYLE_VERTICAL_LABEL_POSITION] = mxConstants.ALIGN_TOP; this.putCellStyle(kind, style); }); @@ -231,15 +231,15 @@ export class StyleConfigurator { const style = this.getStylesheet().getDefaultEdgeStyle(); configureCommonDefaultStyle(style); - style[mxgraph.mxConstants.STYLE_SHAPE] = BpmnStyleIdentifier.EDGE; - style[mxgraph.mxConstants.STYLE_ENDSIZE] = arrowDefaultSize; - style[mxgraph.mxConstants.STYLE_STROKEWIDTH] = 1.5; - style[mxgraph.mxConstants.STYLE_ROUNDED] = true; - style[mxgraph.mxConstants.STYLE_ARCSIZE] = 5; - style[mxgraph.mxConstants.STYLE_VERTICAL_ALIGN] = mxgraph.mxConstants.ALIGN_BOTTOM; + style[mxConstants.STYLE_SHAPE] = BpmnStyleIdentifier.EDGE; + style[mxConstants.STYLE_ENDSIZE] = arrowDefaultSize; + style[mxConstants.STYLE_STROKEWIDTH] = 1.5; + style[mxConstants.STYLE_ROUNDED] = true; + style[mxConstants.STYLE_ARCSIZE] = 5; + style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_BOTTOM; // The end arrow must be redefined in specific style - delete style[mxgraph.mxConstants.STYLE_ENDARROW]; + delete style[mxConstants.STYLE_ENDARROW]; } private configureEdgeStyles(styleKinds: T[], specificStyles: Map void>): void { @@ -258,15 +258,15 @@ export class StyleConfigurator { } function configureCommonDefaultStyle(style: StyleMap): void { - style[mxgraph.mxConstants.STYLE_FONTFAMILY] = StyleDefault.DEFAULT_FONT_FAMILY; - style[mxgraph.mxConstants.STYLE_FONTSIZE] = StyleDefault.DEFAULT_FONT_SIZE; - style[mxgraph.mxConstants.STYLE_FONTCOLOR] = StyleDefault.DEFAULT_FONT_COLOR; - style[mxgraph.mxConstants.STYLE_FILLCOLOR] = StyleDefault.DEFAULT_FILL_COLOR; - style[mxgraph.mxConstants.STYLE_STROKECOLOR] = StyleDefault.DEFAULT_STROKE_COLOR; - style[mxgraph.mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = mxgraph.mxConstants.NONE; + style[mxConstants.STYLE_FONTFAMILY] = StyleDefault.DEFAULT_FONT_FAMILY; + style[mxConstants.STYLE_FONTSIZE] = StyleDefault.DEFAULT_FONT_SIZE; + style[mxConstants.STYLE_FONTCOLOR] = StyleDefault.DEFAULT_FONT_COLOR; + style[mxConstants.STYLE_FILLCOLOR] = StyleDefault.DEFAULT_FILL_COLOR; + style[mxConstants.STYLE_STROKECOLOR] = StyleDefault.DEFAULT_STROKE_COLOR; + style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = mxConstants.NONE; // only works with html labels (enabled by GraphConfigurator) - style[mxgraph.mxConstants.STYLE_WHITE_SPACE] = 'wrap'; + style[mxConstants.STYLE_WHITE_SPACE] = 'wrap'; } class MapWithDefault extends Map void> { diff --git a/src/component/mxgraph/initializer.ts b/src/component/mxgraph/initializer.ts index 301d4d63ce..4441dd0c3a 100644 --- a/src/component/mxgraph/initializer.ts +++ b/src/component/mxgraph/initializer.ts @@ -33,6 +33,27 @@ import factory, { type mxGraphExportObject } from 'mxgraph'; */ export const mxgraph = initialize(); +/** @internal */ +export const mxCellRenderer = mxgraph.mxCellRenderer; +/** @internal */ +export const mxClient = mxgraph.mxClient; +/** @internal */ +export const mxConstants = mxgraph.mxConstants; +/** @internal */ +export const mxEvent = mxgraph.mxEvent; +/** @internal */ +export const mxPerimeter = mxgraph.mxPerimeter; +/** @internal */ +export const mxPoint = mxgraph.mxPoint; +/** @internal */ +export const mxRectangle = mxgraph.mxRectangle; +/** @internal */ +export const mxRectangleShape = mxgraph.mxRectangleShape; +/** @internal */ +export const mxSvgCanvas2D = mxgraph.mxSvgCanvas2D; +/** @internal */ +export const mxUtils = mxgraph.mxUtils; + /** @internal */ declare global { interface Window { diff --git a/src/component/mxgraph/overlay/custom-overlay.ts b/src/component/mxgraph/overlay/custom-overlay.ts index 86f4bf9f3f..2bbda2413f 100644 --- a/src/component/mxgraph/overlay/custom-overlay.ts +++ b/src/component/mxgraph/overlay/custom-overlay.ts @@ -14,8 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { mxgraph } from '../initializer'; -import type { mxCellState, mxPoint, mxRectangle } from 'mxgraph'; +import { mxgraph, mxConstants, mxPoint, mxRectangle } from '../initializer'; +import type { mxCellState, mxPoint as mxPointType, mxRectangle as mxRectangleType } from 'mxgraph'; import type { OverlayStyle } from '../../registry'; export type VerticalAlignType = 'bottom' | 'middle' | 'top'; @@ -42,7 +42,7 @@ export class MxGraphCustomOverlay extends mxgraph.mxCellOverlay { } // Based on original method from mxCellOverlay (mxCellOverlay.prototype.getBounds) - override getBounds(state: mxCellState): mxRectangle { + override getBounds(state: mxCellState): mxRectangleType { const isEdge = state.view.graph.getModel().isEdge(state.cell); const s = state.view.scale; let pt; @@ -56,48 +56,43 @@ export class MxGraphCustomOverlay extends mxgraph.mxCellOverlay { if (isEdge) { pt = this.computeEdgeBounds(state); } else { - pt = new mxgraph.mxPoint(); + pt = new mxPoint(); - if (this.align == mxgraph.mxConstants.ALIGN_LEFT) { + if (this.align == mxConstants.ALIGN_LEFT) { pt.x = state.x; - } else if (this.align == mxgraph.mxConstants.ALIGN_CENTER) { + } else if (this.align == mxConstants.ALIGN_CENTER) { pt.x = state.x + state.width / 2; } else { pt.x = state.x + state.width; } - if (this.verticalAlign == mxgraph.mxConstants.ALIGN_TOP) { + if (this.verticalAlign == mxConstants.ALIGN_TOP) { pt.y = state.y; - } else if (this.verticalAlign == mxgraph.mxConstants.ALIGN_MIDDLE) { + } else if (this.verticalAlign == mxConstants.ALIGN_MIDDLE) { pt.y = state.y + state.height / 2; } else { pt.y = state.y + state.height; } } - return new mxgraph.mxRectangle( - Math.round(pt.x - (w * this.defaultOverlap - this.offset.x) * s), - Math.round(pt.y - (h * this.defaultOverlap - this.offset.y) * s), - w * s, - h * s, - ); + return new mxRectangle(Math.round(pt.x - (w * this.defaultOverlap - this.offset.x) * s), Math.round(pt.y - (h * this.defaultOverlap - this.offset.y) * s), w * s, h * s); } - private computeEdgeBounds(state: mxCellState): mxPoint { + private computeEdgeBounds(state: mxCellState): mxPointType { const pts = state.absolutePoints; // 1st point for start position - if (this.align == mxgraph.mxConstants.ALIGN_LEFT) { + if (this.align == mxConstants.ALIGN_LEFT) { return pts[0]; } // middle point for middle position - else if (this.align == mxgraph.mxConstants.ALIGN_CENTER) { + else if (this.align == mxConstants.ALIGN_CENTER) { if (pts.length % 2 == 1) { return pts[Math.floor(pts.length / 2)]; } else { const idx = pts.length / 2; const p0 = pts[idx - 1]; const p1 = pts[idx]; - return new mxgraph.mxPoint(p0.x + (p1.x - p0.x) / 2, p0.y + (p1.y - p0.y) / 2); + return new mxPoint(p0.x + (p1.x - p0.x) / 2, p0.y + (p1.y - p0.y) / 2); } } // last point for end position diff --git a/src/component/mxgraph/renderer/CoordinatesTranslator.ts b/src/component/mxgraph/renderer/CoordinatesTranslator.ts index d23a1703a4..df5ed354a0 100644 --- a/src/component/mxgraph/renderer/CoordinatesTranslator.ts +++ b/src/component/mxgraph/renderer/CoordinatesTranslator.ts @@ -15,8 +15,8 @@ limitations under the License. */ import type { BpmnGraph } from '../BpmnGraph'; -import { mxgraph } from '../initializer'; -import type { mxCell, mxPoint } from 'mxgraph'; +import { mxPoint } from '../initializer'; +import type { mxCell, mxPoint as mxPointType } from 'mxgraph'; /** * @internal @@ -29,11 +29,11 @@ export default class CoordinatesTranslator { * @param parent the cell to use for the new coordinate referential * @param absoluteCoordinate */ - computeRelativeCoordinates(parent: mxCell, absoluteCoordinate: mxPoint): mxPoint { + computeRelativeCoordinates(parent: mxCell, absoluteCoordinate: mxPointType): mxPointType { const translateForRoot = this.getTranslateForRoot(parent); const relativeX = absoluteCoordinate.x + translateForRoot.x; const relativeY = absoluteCoordinate.y + translateForRoot.y; - return new mxgraph.mxPoint(relativeX, relativeY); + return new mxPoint(relativeX, relativeY); } // Returns the translation to be applied to a cell whose mxGeometry x and y values are expressed with absolute coordinates @@ -42,9 +42,9 @@ export default class CoordinatesTranslator { // // This implementation is taken from the example described in the documentation of mxgraph#getTranslateForRoot (4.1.1) // The translation is generally negative - private getTranslateForRoot(cell: mxCell): mxPoint { + private getTranslateForRoot(cell: mxCell): mxPointType { const model = this.graph.getModel(); - const offset = new mxgraph.mxPoint(0, 0); + const offset = new mxPoint(0, 0); while (cell != null) { const geo = model.getGeometry(cell); @@ -64,8 +64,8 @@ export default class CoordinatesTranslator { * * The center coordinates are given in the same referential as the `mxCell`, so relative to its parent. */ - computeEdgeCenter(mxEdge: mxCell): mxPoint { - const points: mxPoint[] = mxEdge.geometry.points; + computeEdgeCenter(mxEdge: mxCell): mxPointType { + const points: mxPointType[] = mxEdge.geometry.points; const p0 = points[0]; const pe = points[points.length - 1]; @@ -73,7 +73,7 @@ export default class CoordinatesTranslator { if (p0 != null && pe != null) { const dx = pe.x - p0.x; const dy = pe.y - p0.y; - return new mxgraph.mxPoint(p0.x + dx / 2, p0.y + dy / 2); + return new mxPoint(p0.x + dx / 2, p0.y + dy / 2); } return undefined; diff --git a/src/component/mxgraph/renderer/StyleComputer.ts b/src/component/mxgraph/renderer/StyleComputer.ts index c814516de8..7909d30d39 100644 --- a/src/component/mxgraph/renderer/StyleComputer.ts +++ b/src/component/mxgraph/renderer/StyleComputer.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { mxgraph } from '../initializer'; +import { mxConstants } from '../initializer'; import Shape from '../../../model/bpmn/internal/shape/Shape'; import type { Edge } from '../../../model/bpmn/internal/edge/edge'; import type Bounds from '../../../model/bpmn/internal/Bounds'; @@ -71,10 +71,10 @@ export default class StyleComputer { } else if (bpmnElement instanceof ShapeBpmnActivity) { StyleComputer.computeActivityShapeStyle(bpmnElement, styleValues); } else if (ShapeUtil.isPoolOrLane(bpmnElement.kind)) { - // mxgraph.mxConstants.STYLE_HORIZONTAL is for the label + // mxConstants.STYLE_HORIZONTAL is for the label // In BPMN, isHorizontal is for the Shape // So we invert the value when we switch from the BPMN value to the mxGraph value. - styleValues.set(mxgraph.mxConstants.STYLE_HORIZONTAL, shape.isHorizontal ? '0' : '1'); + styleValues.set(mxConstants.STYLE_HORIZONTAL, shape.isHorizontal ? '0' : '1'); } else if (bpmnElement instanceof ShapeBpmnEventBasedGateway) { styleValues.set(BpmnStyleIdentifier.IS_INSTANTIATING, String(bpmnElement.instantiate)); styleValues.set(BpmnStyleIdentifier.EVENT_BASED_GATEWAY_KIND, String(bpmnElement.gatewayKind)); @@ -84,12 +84,12 @@ export default class StyleComputer { const extensions = shape.extensions; const fillColor = extensions.fillColor; if (fillColor) { - styleValues.set(mxgraph.mxConstants.STYLE_FILLCOLOR, fillColor); + styleValues.set(mxConstants.STYLE_FILLCOLOR, fillColor); if (ShapeUtil.isPoolOrLane(bpmnElement.kind)) { - styleValues.set(mxgraph.mxConstants.STYLE_SWIMLANE_FILLCOLOR, fillColor); + styleValues.set(mxConstants.STYLE_SWIMLANE_FILLCOLOR, fillColor); } } - extensions.strokeColor && styleValues.set(mxgraph.mxConstants.STYLE_STROKECOLOR, extensions.strokeColor); + extensions.strokeColor && styleValues.set(mxConstants.STYLE_STROKECOLOR, extensions.strokeColor); } return styleValues; @@ -137,7 +137,7 @@ export default class StyleComputer { if (!this.ignoreBpmnColors) { const extensions = edge.extensions; - extensions.strokeColor && styleValues.set(mxgraph.mxConstants.STYLE_STROKECOLOR, extensions.strokeColor); + extensions.strokeColor && styleValues.set(mxConstants.STYLE_STROKECOLOR, extensions.strokeColor); } return styleValues; @@ -148,14 +148,14 @@ export default class StyleComputer { const font = bpmnCell.label?.font; if (font) { - styleValues.set(mxgraph.mxConstants.STYLE_FONTFAMILY, font.name); - styleValues.set(mxgraph.mxConstants.STYLE_FONTSIZE, font.size); - styleValues.set(mxgraph.mxConstants.STYLE_FONTSTYLE, getFontStyleValue(font)); + styleValues.set(mxConstants.STYLE_FONTFAMILY, font.name); + styleValues.set(mxConstants.STYLE_FONTSIZE, font.size); + styleValues.set(mxConstants.STYLE_FONTSTYLE, getFontStyleValue(font)); } if (!this.ignoreBpmnColors) { const extensions = bpmnCell.label?.extensions; - extensions?.color && styleValues.set(mxgraph.mxConstants.STYLE_FONTCOLOR, extensions.color); + extensions?.color && styleValues.set(mxConstants.STYLE_FONTCOLOR, extensions.color); } return styleValues; @@ -166,20 +166,20 @@ export default class StyleComputer { const bpmnElement = bpmnCell.bpmnElement; if (labelBounds) { - styleValues.set(mxgraph.mxConstants.STYLE_VERTICAL_ALIGN, mxgraph.mxConstants.ALIGN_TOP); + styleValues.set(mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_TOP); if (bpmnCell.bpmnElement.kind != ShapeBpmnElementKind.TEXT_ANNOTATION) { - styleValues.set(mxgraph.mxConstants.STYLE_ALIGN, mxgraph.mxConstants.ALIGN_CENTER); + styleValues.set(mxConstants.STYLE_ALIGN, mxConstants.ALIGN_CENTER); } if (bpmnCell instanceof Shape) { // arbitrarily increase width to relax too small bounds (for instance for reference diagrams from miwg-test-suite) - styleValues.set(mxgraph.mxConstants.STYLE_LABEL_WIDTH, labelBounds.width + 1); + styleValues.set(mxConstants.STYLE_LABEL_WIDTH, labelBounds.width + 1); // align settings // According to the documentation, "label position" can only take values in left, center, right with default=center // However, there is undocumented behavior when the value is not one of these and this behavior is exactly what we want. // See https://github.com/jgraph/mxgraph/blob/v4.2.2/javascript/src/js/view/mxGraphView.js#L1183-L1252 - styleValues.set(mxgraph.mxConstants.STYLE_LABEL_POSITION, 'ignore'); - styleValues.set(mxgraph.mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxgraph.mxConstants.ALIGN_MIDDLE); + styleValues.set(mxConstants.STYLE_LABEL_POSITION, 'ignore'); + styleValues.set(mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE); } } // when no label bounds, adjust the default style dynamically @@ -189,7 +189,7 @@ export default class StyleComputer { (bpmnElement instanceof ShapeBpmnCallActivity && bpmnElement.callActivityKind === ShapeBpmnCallActivityKind.CALLING_PROCESS)) && !bpmnElement.markers.includes(ShapeBpmnMarkerKind.EXPAND) ) { - styleValues.set(mxgraph.mxConstants.STYLE_VERTICAL_ALIGN, mxgraph.mxConstants.ALIGN_TOP); + styleValues.set(mxConstants.STYLE_VERTICAL_ALIGN, mxConstants.ALIGN_TOP); } return styleValues; @@ -200,7 +200,7 @@ export default class StyleComputer { styleValues.push(['shape', BpmnStyleIdentifier.MESSAGE_FLOW_ICON]); styleValues.push([BpmnStyleIdentifier.IS_INITIATING, String(edge.messageVisibleKind === MessageVisibleKind.INITIATING)]); if (!this.ignoreBpmnColors) { - edge.extensions.strokeColor && styleValues.push([mxgraph.mxConstants.STYLE_STROKECOLOR, edge.extensions.strokeColor]); + edge.extensions.strokeColor && styleValues.push([mxConstants.STYLE_STROKECOLOR, edge.extensions.strokeColor]); } return toArrayOfMxGraphStyleEntries(styleValues).join(';'); @@ -214,16 +214,16 @@ export default class StyleComputer { export function getFontStyleValue(font: Font): number { let value = 0; if (font.isBold) { - value += mxgraph.mxConstants.FONT_BOLD; + value += mxConstants.FONT_BOLD; } if (font.isItalic) { - value += mxgraph.mxConstants.FONT_ITALIC; + value += mxConstants.FONT_ITALIC; } if (font.isStrikeThrough) { - value += mxgraph.mxConstants.FONT_STRIKETHROUGH; + value += mxConstants.FONT_STRIKETHROUGH; } if (font.isUnderline) { - value += mxgraph.mxConstants.FONT_UNDERLINE; + value += mxConstants.FONT_UNDERLINE; } return value; } diff --git a/src/component/mxgraph/shape/activity-shapes.ts b/src/component/mxgraph/shape/activity-shapes.ts index bc08f23a52..354fc2dbc8 100644 --- a/src/component/mxgraph/shape/activity-shapes.ts +++ b/src/component/mxgraph/shape/activity-shapes.ts @@ -15,7 +15,7 @@ limitations under the License. */ import type { mxAbstractCanvas2D } from 'mxgraph'; -import { mxgraph } from '../initializer'; +import { mxRectangleShape, mxUtils } from '../initializer'; import { BpmnStyleIdentifier, StyleDefault } from '../style'; import { getBpmnIsInstantiating } from '../style/utils'; import type { BpmnCanvas, PaintParameter, ShapeConfiguration } from './render'; @@ -36,7 +36,7 @@ function paintEnvelopeIcon(paintParameter: PaintParameter, isFilled: boolean): v /** * @internal */ -export abstract class BaseActivityShape extends mxgraph.mxRectangleShape { +export abstract class BaseActivityShape extends mxRectangleShape { protected iconPainter = IconPainterProvider.get(); constructor() { @@ -50,7 +50,7 @@ export abstract class BaseActivityShape extends mxgraph.mxRectangleShape { } protected paintMarkerIcons(paintParameter: PaintParameter): void { - const markers = mxgraph.mxUtils.getValue(this.style, BpmnStyleIdentifier.MARKERS, undefined); + const markers = mxUtils.getValue(this.style, BpmnStyleIdentifier.MARKERS, undefined); if (markers) { orderActivityMarkers(markers.split(',')).forEach((marker, idx, allMarkers) => { paintParameter = { @@ -211,7 +211,7 @@ export class CallActivityShape extends BaseActivityShape { const paintParameter = buildPaintParameter({ canvas: c, x, y, width: w, height: h, shape: this }); - switch (mxgraph.mxUtils.getValue(this.style, BpmnStyleIdentifier.GLOBAL_TASK_KIND, undefined)) { + switch (mxUtils.getValue(this.style, BpmnStyleIdentifier.GLOBAL_TASK_KIND, undefined)) { case ShapeBpmnElementKind.GLOBAL_TASK_MANUAL: this.iconPainter.paintHandIcon({ ...paintParameter, @@ -251,7 +251,7 @@ export class CallActivityShape extends BaseActivityShape { */ export class SubProcessShape extends BaseActivityShape { override paintBackground(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void { - const subProcessKind = mxgraph.mxUtils.getValue(this.style, BpmnStyleIdentifier.SUB_PROCESS_KIND, undefined); + const subProcessKind = mxUtils.getValue(this.style, BpmnStyleIdentifier.SUB_PROCESS_KIND, undefined); c.save(); // ensure we can later restore the configuration if (subProcessKind === ShapeBpmnSubProcessKind.EVENT) { c.setDashed(true, false); diff --git a/src/component/mxgraph/shape/edges.ts b/src/component/mxgraph/shape/edges.ts index 6c63ded142..58acf06350 100644 --- a/src/component/mxgraph/shape/edges.ts +++ b/src/component/mxgraph/shape/edges.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { mxgraph } from '../initializer'; +import { mxgraph, mxSvgCanvas2D, mxUtils } from '../initializer'; import type { mxAbstractCanvas2D, mxPoint } from 'mxgraph'; import { BpmnStyleIdentifier } from '../style'; @@ -37,12 +37,12 @@ export class BpmnConnector extends mxgraph.mxConnector { c.setDashed(false, false); if (sourceMarker != null) { - c.setFillColor(mxgraph.mxUtils.getValue(this.style, BpmnStyleIdentifier.EDGE_START_FILL_COLOR, this.stroke)); + c.setFillColor(mxUtils.getValue(this.style, BpmnStyleIdentifier.EDGE_START_FILL_COLOR, this.stroke)); sourceMarker(); } if (targetMarker != null) { - c.setFillColor(mxgraph.mxUtils.getValue(this.style, BpmnStyleIdentifier.EDGE_END_FILL_COLOR, this.stroke)); + c.setFillColor(mxUtils.getValue(this.style, BpmnStyleIdentifier.EDGE_END_FILL_COLOR, this.stroke)); targetMarker(); } } @@ -58,11 +58,11 @@ export class BpmnConnector extends mxgraph.mxConnector { } function getPointerEventsValue(c: mxAbstractCanvas2D): string { - return c instanceof mxgraph.mxSvgCanvas2D ? c.pointerEventsValue : null; + return c instanceof mxSvgCanvas2D ? c.pointerEventsValue : null; } function setPointerEventsValue(c: mxAbstractCanvas2D, value: string): void { - if (c instanceof mxgraph.mxSvgCanvas2D) { + if (c instanceof mxSvgCanvas2D) { c.pointerEventsValue = value; } } diff --git a/src/component/mxgraph/shape/event-shapes.ts b/src/component/mxgraph/shape/event-shapes.ts index 28be6575ca..e854b48f02 100644 --- a/src/component/mxgraph/shape/event-shapes.ts +++ b/src/component/mxgraph/shape/event-shapes.ts @@ -15,7 +15,7 @@ limitations under the License. */ import type { mxAbstractCanvas2D } from 'mxgraph'; -import { mxgraph } from '../initializer'; +import { mxgraph, mxUtils } from '../initializer'; import { BpmnStyleIdentifier, StyleDefault } from '../style'; import { ShapeBpmnEventDefinitionKind } from '../../../model/bpmn/internal'; import type { BpmnCanvas, PaintParameter } from './render'; @@ -88,7 +88,7 @@ export class EventShape extends mxgraph.mxEllipse { override paintVertexShape(c: mxAbstractCanvas2D, x: number, y: number, w: number, h: number): void { const paintParameter = buildPaintParameter({ canvas: c, x, y, width: w, height: h, shape: this, isFilled: this.withFilledIcon }); - EventShape.setDashedOuterShapePattern(paintParameter, mxgraph.mxUtils.getValue(this.style, BpmnStyleIdentifier.IS_INTERRUPTING, undefined)); + EventShape.setDashedOuterShapePattern(paintParameter, mxUtils.getValue(this.style, BpmnStyleIdentifier.IS_INTERRUPTING, undefined)); this.paintOuterShape(paintParameter); EventShape.restoreOriginalOuterShapePattern(paintParameter); @@ -101,7 +101,7 @@ export class EventShape extends mxgraph.mxEllipse { private paintInnerShape(paintParameter: PaintParameter): void { const paintIcon = - this.iconPainters.get(mxgraph.mxUtils.getValue(this.style, BpmnStyleIdentifier.EVENT_DEFINITION_KIND, ShapeBpmnEventDefinitionKind.NONE)) ?? + this.iconPainters.get(mxUtils.getValue(this.style, BpmnStyleIdentifier.EVENT_DEFINITION_KIND, ShapeBpmnEventDefinitionKind.NONE)) ?? (() => this.iconPainter.paintEmptyIcon()); paintIcon(paintParameter); } diff --git a/src/component/mxgraph/shape/flow-shapes.ts b/src/component/mxgraph/shape/flow-shapes.ts index ecd3d2823d..8cafc6ee80 100644 --- a/src/component/mxgraph/shape/flow-shapes.ts +++ b/src/component/mxgraph/shape/flow-shapes.ts @@ -17,13 +17,13 @@ limitations under the License. import { IconPainterProvider } from './render'; import { buildPaintParameter } from './render/icon-painter'; import { BpmnStyleIdentifier } from '../style'; -import { mxgraph } from '../initializer'; +import { mxRectangleShape, mxUtils } from '../initializer'; import type { mxAbstractCanvas2D, mxRectangle } from 'mxgraph'; /** * @internal */ -export class MessageFlowIconShape extends mxgraph.mxRectangleShape { +export class MessageFlowIconShape extends mxRectangleShape { protected iconPainter = IconPainterProvider.get(); constructor(bounds: mxRectangle, fill: string, stroke: string, strokewidth: number) { @@ -39,7 +39,7 @@ export class MessageFlowIconShape extends mxgraph.mxRectangleShape { height: h, shape: this, ratioFromParent: 1, - isFilled: mxgraph.mxUtils.getValue(this.style, BpmnStyleIdentifier.IS_INITIATING, 'true') == 'false', + isFilled: mxUtils.getValue(this.style, BpmnStyleIdentifier.IS_INITIATING, 'true') == 'false', }); this.iconPainter.paintEnvelopeIcon(paintParameter); diff --git a/src/component/mxgraph/shape/gateway-shapes.ts b/src/component/mxgraph/shape/gateway-shapes.ts index c3134b0d6a..45170806e3 100644 --- a/src/component/mxgraph/shape/gateway-shapes.ts +++ b/src/component/mxgraph/shape/gateway-shapes.ts @@ -15,7 +15,7 @@ limitations under the License. */ import type { mxAbstractCanvas2D } from 'mxgraph'; -import { mxgraph } from '../initializer'; +import { mxgraph, mxUtils } from '../initializer'; import { BpmnStyleIdentifier, StyleDefault } from '../style'; import { getBpmnIsInstantiating } from '../style/utils'; import { ShapeBpmnEventBasedGatewayKind } from '../../../model/bpmn/internal'; @@ -115,7 +115,7 @@ export class EventBasedGatewayShape extends GatewayShape { ...paintParameter, ratioFromParent: 0.3, }; - if (mxgraph.mxUtils.getValue(this.style, BpmnStyleIdentifier.EVENT_BASED_GATEWAY_KIND, ShapeBpmnEventBasedGatewayKind.Exclusive) == ShapeBpmnEventBasedGatewayKind.Parallel) { + if (mxUtils.getValue(this.style, BpmnStyleIdentifier.EVENT_BASED_GATEWAY_KIND, ShapeBpmnEventBasedGatewayKind.Exclusive) == ShapeBpmnEventBasedGatewayKind.Parallel) { this.iconPainter.paintPlusCrossIcon(innerIconPaintParameter); } else { this.iconPainter.paintPentagon(innerIconPaintParameter); diff --git a/src/component/mxgraph/shape/render/icon-painter.ts b/src/component/mxgraph/shape/render/icon-painter.ts index 61c8001dfb..ec23e37d63 100644 --- a/src/component/mxgraph/shape/render/icon-painter.ts +++ b/src/component/mxgraph/shape/render/icon-painter.ts @@ -15,7 +15,7 @@ limitations under the License. */ import type { mxAbstractCanvas2D, mxShape } from 'mxgraph'; -import { mxgraph } from '../../initializer'; +import { mxConstants, mxUtils } from '../../initializer'; import { StyleDefault } from '../../style'; import { BpmnCanvas } from './BpmnCanvas'; import type { IconStyleConfiguration, ShapeConfiguration, Size } from './render-types'; @@ -58,10 +58,10 @@ export function buildPaintParameter({ isFilled?: boolean; iconStrokeWidth?: number; }): PaintParameter { - const shapeStrokeWidth = shape.strokewidth || mxgraph.mxUtils.getValue(shape.style, mxgraph.mxConstants.STYLE_STROKEWIDTH, StyleDefault.STROKE_WIDTH_THIN); - const fillColor = shape.fill || mxgraph.mxUtils.getValue(shape.style, mxgraph.mxConstants.STYLE_FILLCOLOR, StyleDefault.DEFAULT_FILL_COLOR); - const strokeColor = shape.stroke || mxgraph.mxUtils.getValue(shape.style, mxgraph.mxConstants.STYLE_STROKECOLOR, StyleDefault.DEFAULT_STROKE_COLOR); - const margin = mxgraph.mxUtils.getValue(shape.style, mxgraph.mxConstants.STYLE_MARGIN, StyleDefault.DEFAULT_MARGIN); + const shapeStrokeWidth = shape.strokewidth || mxUtils.getValue(shape.style, mxConstants.STYLE_STROKEWIDTH, StyleDefault.STROKE_WIDTH_THIN); + const fillColor = shape.fill || mxUtils.getValue(shape.style, mxConstants.STYLE_FILLCOLOR, StyleDefault.DEFAULT_FILL_COLOR); + const strokeColor = shape.stroke || mxUtils.getValue(shape.style, mxConstants.STYLE_STROKECOLOR, StyleDefault.DEFAULT_STROKE_COLOR); + const margin = mxUtils.getValue(shape.style, mxConstants.STYLE_MARGIN, StyleDefault.DEFAULT_MARGIN); ratioFromParent ??= 0.25; isFilled ??= false; iconStrokeWidth ??= 0; diff --git a/src/component/mxgraph/shape/text-annotation-shapes.ts b/src/component/mxgraph/shape/text-annotation-shapes.ts index c2a9c0f5c9..dc937e7104 100644 --- a/src/component/mxgraph/shape/text-annotation-shapes.ts +++ b/src/component/mxgraph/shape/text-annotation-shapes.ts @@ -15,13 +15,13 @@ limitations under the License. */ import { StyleDefault } from '../style'; -import { mxgraph } from '../initializer'; +import { mxRectangleShape } from '../initializer'; import type { mxAbstractCanvas2D } from 'mxgraph'; /** * @internal */ -export class TextAnnotationShape extends mxgraph.mxRectangleShape { +export class TextAnnotationShape extends mxRectangleShape { override paintForeground(c: mxAbstractCanvas2D, x: number, y: number, _w: number, h: number): void { // paint sort of left square bracket shape - for text annotation c.begin(); diff --git a/src/component/mxgraph/style/utils.ts b/src/component/mxgraph/style/utils.ts index 38a6803ef8..38f720a51c 100644 --- a/src/component/mxgraph/style/utils.ts +++ b/src/component/mxgraph/style/utils.ts @@ -17,7 +17,7 @@ limitations under the License. import { ensureOpacityValue, ensureStrokeWidthValue } from '../../helpers/validators'; import type { Fill, Font, ShapeStyleUpdate, Stroke, StyleUpdate } from '../../registry'; import { ShapeBpmnElementKind } from '../../../model/bpmn/internal'; -import { mxgraph } from '../initializer'; +import { mxConstants, mxUtils } from '../initializer'; import { BpmnStyleIdentifier } from './identifiers'; /** @@ -74,52 +74,52 @@ export const StyleDefault = { * @internal * @private */ -export const getBpmnIsInstantiating = (style: { [p: string]: unknown }): boolean => mxgraph.mxUtils.getValue(style, BpmnStyleIdentifier.IS_INSTANTIATING, 'false') == 'true'; +export const getBpmnIsInstantiating = (style: { [p: string]: unknown }): boolean => mxUtils.getValue(style, BpmnStyleIdentifier.IS_INSTANTIATING, 'false') == 'true'; const convertDefaultValue = (value: string): string | undefined => (value == 'default' ? undefined : value); export const updateStroke = (cellStyle: string, stroke: Stroke): string => { if (stroke) { - cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_STROKECOLOR, stroke.color, convertDefaultValue); - cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_STROKE_OPACITY, stroke.opacity, ensureOpacityValue); - cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_STROKEWIDTH, stroke.width, ensureStrokeWidthValue); + cellStyle = setStyle(cellStyle, mxConstants.STYLE_STROKECOLOR, stroke.color, convertDefaultValue); + cellStyle = setStyle(cellStyle, mxConstants.STYLE_STROKE_OPACITY, stroke.opacity, ensureOpacityValue); + cellStyle = setStyle(cellStyle, mxConstants.STYLE_STROKEWIDTH, stroke.width, ensureStrokeWidthValue); } return cellStyle; }; export const setStyle = (cellStyle: string, key: string, value: T | undefined, converter: (value: T) => T | undefined = (value: T) => value): string => { - return value == undefined ? cellStyle : mxgraph.mxUtils.setStyle(cellStyle, key, converter(value)); + return value == undefined ? cellStyle : mxUtils.setStyle(cellStyle, key, converter(value)); }; export const setStyleFlag = (cellStyle: string, key: string, flag: number, value: boolean | undefined): string => - value == undefined ? cellStyle : mxgraph.mxUtils.setStyleFlag(cellStyle, key, flag, value); + value == undefined ? cellStyle : mxUtils.setStyleFlag(cellStyle, key, flag, value); export const updateFont = (cellStyle: string, font: Font): string => { if (font) { - cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_FONTCOLOR, font.color, convertDefaultValue); - cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_FONTSIZE, font.size); - cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_FONTFAMILY, font.family); + cellStyle = setStyle(cellStyle, mxConstants.STYLE_FONTCOLOR, font.color, convertDefaultValue); + cellStyle = setStyle(cellStyle, mxConstants.STYLE_FONTSIZE, font.size); + cellStyle = setStyle(cellStyle, mxConstants.STYLE_FONTFAMILY, font.family); - cellStyle = setStyleFlag(cellStyle, mxgraph.mxConstants.STYLE_FONTSTYLE, mxgraph.mxConstants.FONT_BOLD, font.isBold); - cellStyle = setStyleFlag(cellStyle, mxgraph.mxConstants.STYLE_FONTSTYLE, mxgraph.mxConstants.FONT_ITALIC, font.isItalic); - cellStyle = setStyleFlag(cellStyle, mxgraph.mxConstants.STYLE_FONTSTYLE, mxgraph.mxConstants.FONT_UNDERLINE, font.isUnderline); - cellStyle = setStyleFlag(cellStyle, mxgraph.mxConstants.STYLE_FONTSTYLE, mxgraph.mxConstants.FONT_STRIKETHROUGH, font.isStrikeThrough); + cellStyle = setStyleFlag(cellStyle, mxConstants.STYLE_FONTSTYLE, mxConstants.FONT_BOLD, font.isBold); + cellStyle = setStyleFlag(cellStyle, mxConstants.STYLE_FONTSTYLE, mxConstants.FONT_ITALIC, font.isItalic); + cellStyle = setStyleFlag(cellStyle, mxConstants.STYLE_FONTSTYLE, mxConstants.FONT_UNDERLINE, font.isUnderline); + cellStyle = setStyleFlag(cellStyle, mxConstants.STYLE_FONTSTYLE, mxConstants.FONT_STRIKETHROUGH, font.isStrikeThrough); - cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_TEXT_OPACITY, font.opacity, ensureOpacityValue); + cellStyle = setStyle(cellStyle, mxConstants.STYLE_TEXT_OPACITY, font.opacity, ensureOpacityValue); } return cellStyle; }; export const updateFill = (cellStyle: string, fill: Fill): string => { if (fill.color) { - cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_FILLCOLOR, fill.color, convertDefaultValue); + cellStyle = setStyle(cellStyle, mxConstants.STYLE_FILLCOLOR, fill.color, convertDefaultValue); if (cellStyle.includes(ShapeBpmnElementKind.POOL) || cellStyle.includes(ShapeBpmnElementKind.LANE)) { - cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_SWIMLANE_FILLCOLOR, fill.color, convertDefaultValue); + cellStyle = setStyle(cellStyle, mxConstants.STYLE_SWIMLANE_FILLCOLOR, fill.color, convertDefaultValue); } } - cellStyle = setStyle(cellStyle, mxgraph.mxConstants.STYLE_FILL_OPACITY, fill.opacity, ensureOpacityValue); + cellStyle = setStyle(cellStyle, mxConstants.STYLE_FILL_OPACITY, fill.opacity, ensureOpacityValue); return cellStyle; }; diff --git a/src/component/version.ts b/src/component/version.ts index c91baeea98..252d26e97f 100644 --- a/src/component/version.ts +++ b/src/component/version.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { mxgraph } from './mxgraph/initializer'; +import { mxClient } from './mxgraph/initializer'; // WARN: this constant is automatically updated at release time by the 'manage-version-in-files.mjs' script. // So, if you modify the name of this file or this constant, please update the script accordingly. @@ -24,7 +24,7 @@ const libVersion = '0.36.0-post'; * @internal */ export const version = (): Version => { - return { lib: libVersion, dependencies: new Map([['mxGraph', mxgraph.mxClient.VERSION]]) }; + return { lib: libVersion, dependencies: new Map([['mxGraph', mxClient.VERSION]]) }; }; /** diff --git a/test/integration/config/mxgraph-config.ts b/test/integration/config/mxgraph-config.ts index faa94cd159..994f551ddc 100644 --- a/test/integration/config/mxgraph-config.ts +++ b/test/integration/config/mxgraph-config.ts @@ -14,8 +14,8 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { mxgraph } from '@lib/component/mxgraph/initializer'; +import { mxClient } from '@lib/component/mxgraph/initializer'; // Force usage of ForeignObject // By default, mxGraph detects no ForeignObject support when running tests in jsdom environment -mxgraph.mxClient.NO_FO = false; +mxClient.NO_FO = false; diff --git a/test/integration/matchers/toBeEdge/index.ts b/test/integration/matchers/toBeEdge/index.ts index 12753be463..b8056d3a62 100644 --- a/test/integration/matchers/toBeEdge/index.ts +++ b/test/integration/matchers/toBeEdge/index.ts @@ -20,7 +20,7 @@ import { FlowKind, MessageVisibleKind } from '@lib/model/bpmn/internal'; import type { ExpectedEdgeModelElement, ExpectedSequenceFlowModelElement } from '../../helpers/model-expect'; import { getDefaultParentId } from '../../helpers/model-expect'; import { BpmnStyleIdentifier } from '@lib/component/mxgraph/style'; -import { mxgraph } from '@lib/component/mxgraph/initializer'; +import { mxConstants } from '@lib/component/mxgraph/initializer'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; @@ -83,7 +83,7 @@ export function toBeSequenceFlow(this: MatcherContext, received: string, expecte } export function toBeMessageFlow(this: MatcherContext, received: string, expected: ExpectedEdgeModelElement): CustomMatcherResult { - return buildEdgeMatcher('toBeMessageFlow', this, received, { ...expected, kind: FlowKind.MESSAGE_FLOW, startArrow: mxgraph.mxConstants.ARROW_OVAL, endArrow: 'blockThin' }); + return buildEdgeMatcher('toBeMessageFlow', this, received, { ...expected, kind: FlowKind.MESSAGE_FLOW, startArrow: mxConstants.ARROW_OVAL, endArrow: 'blockThin' }); } export function toBeAssociationFlow(this: MatcherContext, received: string, expected: ExpectedEdgeModelElement): CustomMatcherResult { diff --git a/test/integration/matchers/toBeShape/index.ts b/test/integration/matchers/toBeShape/index.ts index a748ff8111..4e1cf5acf2 100644 --- a/test/integration/matchers/toBeShape/index.ts +++ b/test/integration/matchers/toBeShape/index.ts @@ -27,7 +27,7 @@ import type { } from '../../helpers/model-expect'; import { getDefaultParentId } from '../../helpers/model-expect'; import { ShapeBpmnElementKind, ShapeBpmnMarkerKind, ShapeBpmnSubProcessKind } from '@lib/model/bpmn/internal'; -import { mxgraph } from '@lib/component/mxgraph/initializer'; +import { mxConstants } from '@lib/component/mxgraph/initializer'; import MatcherContext = jest.MatcherContext; import CustomMatcherResult = jest.CustomMatcherResult; @@ -141,7 +141,7 @@ function buildShapeMatcher(matcherName: string, matcherContext: MatcherContext, function buildContainerMatcher(matcherName: string, matcherContext: MatcherContext, received: string, expected: ExpectedShapeModelElement): CustomMatcherResult { return buildShapeMatcher(matcherName, matcherContext, received, { ...expected, - styleShape: mxgraph.mxConstants.SHAPE_SWIMLANE, + styleShape: mxConstants.SHAPE_SWIMLANE, isSwimLaneLabelHorizontal: expected.isSwimLaneLabelHorizontal ?? false, }); } diff --git a/test/integration/mxGraph.model.bpmn.elements.test.ts b/test/integration/mxGraph.model.bpmn.elements.test.ts index e7726a7cfa..b7367b7185 100644 --- a/test/integration/mxGraph.model.bpmn.elements.test.ts +++ b/test/integration/mxGraph.model.bpmn.elements.test.ts @@ -35,7 +35,9 @@ import { expectTotalShapesInModel, getDefaultParentId, } from './helpers/model-expect'; -import { mxgraph } from '@lib/component/mxgraph/initializer'; +import { mxgraph, mxConstants, mxPoint } from '@lib/component/mxgraph/initializer'; + +const mxGeometry = mxgraph.mxGeometry; describe('mxGraph model - BPMN elements', () => { describe('BPMN elements should be available in the mxGraph model', () => { @@ -1480,7 +1482,7 @@ describe('mxGraph model - BPMN elements', () => { }); expect('conditional_sequence_flow_from_activity_id').toBeSequenceFlow({ sequenceFlowKind: SequenceFlowKind.CONDITIONAL_FROM_ACTIVITY, - startArrow: mxgraph.mxConstants.ARROW_DIAMOND_THIN, + startArrow: mxConstants.ARROW_DIAMOND_THIN, parentId: 'participant_1_id', verticalAlign: 'bottom', }); @@ -1561,12 +1563,12 @@ describe('mxGraph model - BPMN elements', () => { expect('Participant_1').toBeCellWithParentAndGeometry({ // unchanged as this is a pool, coordinates are the ones from the bpmn source - geometry: new mxgraph.mxGeometry(160, 80, 900, 180), + geometry: new mxGeometry(160, 80, 900, 180), }); expect('StartEvent_1').toBeCellWithParentAndGeometry({ parentId: 'Participant_1', - geometry: new mxgraph.mxGeometry( + geometry: new mxGeometry( 150, // absolute coordinates: parent 160, cell 310 80, // absolute coordinates: parent 80, cell 160 40, // unchanged as no transformation on size @@ -1574,23 +1576,23 @@ describe('mxGraph model - BPMN elements', () => { ), }); - const sequenceFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); - sequenceFlowMxGeometry.points = [ - new mxgraph.mxPoint(190, 100), // absolute coordinates: parent x="160" y="80", cell x="350" y="180" - new mxgraph.mxPoint(350, 100), // absolute coordinates: parent x="160" y="80", cell x="510" y="180" + const sequenceFlowGeometry = new mxGeometry(0, 0, 0, 0); + sequenceFlowGeometry.points = [ + new mxPoint(190, 100), // absolute coordinates: parent x="160" y="80", cell x="350" y="180" + new mxPoint(350, 100), // absolute coordinates: parent x="160" y="80", cell x="510" y="180" ]; expect('SequenceFlow_id').toBeCellWithParentAndGeometry({ parentId: 'Participant_1', - geometry: sequenceFlowMxGeometry, + geometry: sequenceFlowGeometry, }); - const messageFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); - messageFlowMxGeometry.points = [ - new mxgraph.mxPoint(334, 260), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="260" - new mxgraph.mxPoint(334, 342), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="342" + const messageFlowGeometry = new mxGeometry(0, 0, 0, 0); + messageFlowGeometry.points = [ + new mxPoint(334, 260), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="260" + new mxPoint(334, 342), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="342" ]; expect('MessageFlow_1').toBeCellWithParentAndGeometry({ - geometry: messageFlowMxGeometry, + geometry: messageFlowGeometry, }); }); @@ -1599,12 +1601,12 @@ describe('mxGraph model - BPMN elements', () => { expect('Participant_1').toBeCellWithParentAndGeometry({ // unchanged as this is a pool, coordinates are the ones from the bpmn source - geometry: new mxgraph.mxGeometry(160, 80, 900, 400), + geometry: new mxGeometry(160, 80, 900, 400), }); expect('Lane_1_1').toBeCellWithParentAndGeometry({ parentId: 'Participant_1', - geometry: new mxgraph.mxGeometry( + geometry: new mxGeometry( 30, // absolute coordinates: parent 160, cell 190 0, // absolute coordinates: parent 80, cell 80 870, // unchanged as no transformation on size @@ -1614,7 +1616,7 @@ describe('mxGraph model - BPMN elements', () => { expect('StartEvent_1').toBeCellWithParentAndGeometry({ parentId: 'Lane_1_1', - geometry: new mxgraph.mxGeometry( + geometry: new mxGeometry( 120, // absolute coordinates: parent 190, cell 310 80, // absolute coordinates: parent 80, cell 160 40, // unchanged as no transformation on size @@ -1624,7 +1626,7 @@ describe('mxGraph model - BPMN elements', () => { expect('Lane_1_847987').not.toBeCellWithParentAndGeometry({ parentId: 'Participant_1', - geometry: new mxgraph.mxGeometry( + geometry: new mxGeometry( 30, // absolute coordinates: parent 160, cell 190 200, // absolute coordinates: parent 80, cell 280 870, // unchanged as no transformation on size @@ -1632,20 +1634,20 @@ describe('mxGraph model - BPMN elements', () => { ), }); - const sequenceFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); + const sequenceFlowMxGeometry = new mxGeometry(0, 0, 0, 0); sequenceFlowMxGeometry.points = [ - new mxgraph.mxPoint(160, 100), // absolute coordinates: parent x="190" y="80", cell x="350" y="180" - new mxgraph.mxPoint(320, 100), // absolute coordinates: parent x="190" y="80", cell x="510" y="180" + new mxPoint(160, 100), // absolute coordinates: parent x="190" y="80", cell x="350" y="180" + new mxPoint(320, 100), // absolute coordinates: parent x="190" y="80", cell x="510" y="180" ]; expect('SequenceFlow_id').toBeCellWithParentAndGeometry({ parentId: 'Lane_1_1', geometry: sequenceFlowMxGeometry, }); - const messageFlowMxGeometry = new mxgraph.mxGeometry(0, 0, 0, 0); + const messageFlowMxGeometry = new mxGeometry(0, 0, 0, 0); messageFlowMxGeometry.points = [ - new mxgraph.mxPoint(334, 480), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="480" - new mxgraph.mxPoint(334, 632), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="632" + new mxPoint(334, 480), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="480" + new mxPoint(334, 632), // absolute coordinates: parent graph.getDefaultParent(), cell x="334" y="632" ]; expect('MessageFlow_1').toBeCellWithParentAndGeometry({ geometry: messageFlowMxGeometry, @@ -1676,7 +1678,7 @@ describe('mxGraph model - BPMN elements', () => { expect('StartEvent_1').toBeCellWithParentAndGeometry({ parentId: defaultParentId, - geometry: new mxgraph.mxGeometry( + geometry: new mxGeometry( 156.10001, // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore @@ -1688,14 +1690,14 @@ describe('mxGraph model - BPMN elements', () => { expect('Activity_1').toBeCellWithParentAndGeometry({ parentId: defaultParentId, - geometry: new mxgraph.mxGeometry(250, 59, 100, 80), + geometry: new mxGeometry(250, 59, 100, 80), }); - const mxGeometry = new mxgraph.mxGeometry(412, 81, 36, 36); - mxGeometry.offset = new mxgraph.mxPoint(4.16e25, 1.24000000003e29); + const geometry = new mxGeometry(412, 81, 36, 36); + geometry.offset = new mxPoint(4.16e25, 1.24000000003e29); expect('EndEvent_1').toBeCellWithParentAndGeometry({ parentId: defaultParentId, - geometry: mxGeometry, + geometry: geometry, }); }); @@ -1704,7 +1706,7 @@ describe('mxGraph model - BPMN elements', () => { expect('Activity_1').toBeCellWithParentAndGeometry({ parentId: defaultParentId, - geometry: new mxgraph.mxGeometry( + geometry: new mxGeometry( // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore malformed source, conversion result 'not_a_number0', // from 'not_a_number'