From 11c1c12ec229f4f3bd72b115499e8af99409aedc Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 3 May 2025 19:35:56 +0200 Subject: [PATCH] refactor!: remove the DIALECT enum Introduce the `DialectValue` type. BREAKING CHANGES: the DIALECT enum has been removed. Use the `DialectValue` type instead. --- CHANGELOG.md | 7 ++++--- packages/core/src/types.ts | 13 +++++++++++++ packages/core/src/util/Constants.ts | 11 ----------- packages/core/src/util/xmlUtils.ts | 4 ++-- packages/core/src/view/AbstractGraph.ts | 5 +++-- packages/core/src/view/cell/CellHighlight.ts | 5 ++--- packages/core/src/view/cell/CellRenderer.ts | 15 +++++++-------- packages/core/src/view/cell/VertexHandle.ts | 6 ++---- packages/core/src/view/geometry/Shape.ts | 4 ++-- .../core/src/view/geometry/node/TextShape.ts | 16 +++++++--------- .../core/src/view/handler/ConstraintHandler.ts | 6 ++---- packages/core/src/view/handler/EdgeHandler.ts | 10 ++++------ packages/core/src/view/handler/VertexHandler.ts | 15 +++++++-------- packages/core/src/view/other/Guide.ts | 6 +++--- packages/core/src/view/other/PrintPreview.ts | 3 +-- .../core/src/view/plugins/CellEditorHandler.ts | 3 +-- .../core/src/view/plugins/ConnectionHandler.ts | 7 +++---- .../core/src/view/plugins/SelectionHandler.ts | 5 ++--- packages/html/stories/SecondLabel.stories.js | 2 +- 19 files changed, 66 insertions(+), 77 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35f7be08fc..6ed5a5b482 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,9 +11,10 @@ _**Note:** Yet to be released breaking changes appear here._ **Breaking Changes**: - Some enums have been removed. Use the string counterparts from related types: - - `constants.ALIGN` --> `AlignValue` and `VAlignValue` - - `constants.ARROW` --> `ArrowValue` - - `constants.EDGESTYLE` --> `EdgeStyleValue` + - `constants.ALIGN` --> `AlignValue` and `VAlignValue` + - `constants.DIALECT` --> `DialectValue` + - `constants.ARROW` --> `ArrowValue` + - `constants.EDGESTYLE` --> `EdgeStyleValue` - `constants.PERIMETER` --> `PerimeterValue` - `constants.RENDERING_HINT`: no replacement as it wasn't used - `constants.SHAPE` --> `ShapeValue` diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index cb3f2b321a..c9ba3adf41 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -1447,3 +1447,16 @@ export type GraphCollaboratorsOptions = { stylesheet?: Stylesheet; view?: (graph: AbstractGraph) => GraphView; }; + +/** + * @since 0.20.0 + */ +export type DialectValue = + /** The mixed HTML display dialect name. */ + | 'mixedHtml' + /** The preferred HTML display dialect name. */ + | 'preferHtml' + /** The strict HTML display dialect name. */ + | 'strictHtml' + /** The SVG display dialect name. */ + | 'svg'; diff --git a/packages/core/src/util/Constants.ts b/packages/core/src/util/Constants.ts index 5d3abd18a6..d9e1ed1585 100644 --- a/packages/core/src/util/Constants.ts +++ b/packages/core/src/util/Constants.ts @@ -41,17 +41,6 @@ export const MIN_HOTSPOT_SIZE = 8; */ export const MAX_HOTSPOT_SIZE = 0; -export enum DIALECT { - /** the SVG display dialect name. */ - SVG = 'svg', - /** the mixed HTML display dialect name. */ - MIXEDHTML = 'mixedHtml', - /** the preferred HTML display dialect name. */ - PREFERHTML = 'preferHtml', - /** the strict HTML display dialect name. */ - STRICTHTML = 'strictHtml', -} - /** * Name of the field to be used to store the object ID. */ diff --git a/packages/core/src/util/xmlUtils.ts b/packages/core/src/util/xmlUtils.ts index a57ca31dbe..7e0960de12 100644 --- a/packages/core/src/util/xmlUtils.ts +++ b/packages/core/src/util/xmlUtils.ts @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { DIALECT, NODETYPE, NS_SVG } from './Constants'; +import { NODETYPE, NS_SVG } from './Constants'; import Point from '../view/geometry/Point'; import type Cell from '../view/cell/Cell'; import type { AbstractGraph } from '../view/AbstractGraph'; @@ -63,7 +63,7 @@ export const getViewXml = ( const { drawPane } = view; const { overlayPane } = view; - if (graph.dialect === DIALECT.SVG) { + if (graph.dialect === 'svg') { view.drawPane = document.createElementNS(NS_SVG, 'g'); view.canvas.appendChild(view.drawPane); diff --git a/packages/core/src/view/AbstractGraph.ts b/packages/core/src/view/AbstractGraph.ts index 51dfd7f422..d778ae54e3 100644 --- a/packages/core/src/view/AbstractGraph.ts +++ b/packages/core/src/view/AbstractGraph.ts @@ -45,6 +45,7 @@ import VertexHandler from './handler/VertexHandler'; import EdgeSegmentHandler from './handler/EdgeSegmentHandler'; import ElbowEdgeHandler from './handler/ElbowEdgeHandler'; import type { + DialectValue, EdgeStyleFunction, GraphCollaboratorsOptions, GraphFoldingOptions, @@ -140,9 +141,9 @@ export abstract class AbstractGraph extends EventSource { renderHint: string | null = null; /** - * Dialect to be used for drawing the graph. Possible values are all constants in {@link DIALECT}. + * Dialect to be used for drawing the graph. */ - dialect: 'svg' | 'mixedHtml' | 'preferHtml' | 'strictHtml' = 'svg'; + dialect: DialectValue = 'svg'; /** * Value returned by {@link getOverlap} if {@link isAllowOverlapParent} returns diff --git a/packages/core/src/view/cell/CellHighlight.ts b/packages/core/src/view/cell/CellHighlight.ts index 5ffe0ee64a..a4e94fa5b7 100644 --- a/packages/core/src/view/cell/CellHighlight.ts +++ b/packages/core/src/view/cell/CellHighlight.ts @@ -18,7 +18,6 @@ limitations under the License. import { DEFAULT_VALID_COLOR, - DIALECT, HIGHLIGHT_OPACITY, HIGHLIGHT_STROKEWIDTH, } from '../../util/Constants'; @@ -169,11 +168,11 @@ class CellHighlight { shape.isDashed = this.dashed; shape.isShadow = false; - shape.dialect = DIALECT.SVG; + shape.dialect = 'svg'; shape.init(this.graph.getView().getOverlayPane()); InternalEvent.redirectMouseEvents(shape.node, this.graph, this.state); - if (this.graph.dialect !== DIALECT.SVG) { + if (this.graph.dialect !== 'svg') { shape.pointerEvents = false; } else { shape.svgPointerEvents = 'stroke'; diff --git a/packages/core/src/view/cell/CellRenderer.ts b/packages/core/src/view/cell/CellRenderer.ts index b6774e4aef..6922755ed9 100644 --- a/packages/core/src/view/cell/CellRenderer.ts +++ b/packages/core/src/view/cell/CellRenderer.ts @@ -25,7 +25,6 @@ import { DEFAULT_FONTSIZE, DEFAULT_FONTSTYLE, DEFAULT_TEXT_DIRECTION, - DIALECT, NONE, } from '../../util/Constants'; import { getRotatedPoint, mod, toRadians } from '../../util/mathUtils'; @@ -377,7 +376,7 @@ class CellRenderer { state.style.textDirection ?? DEFAULT_TEXT_DIRECTION ); state.text.opacity = state.style.textOpacity ?? 100; - state.text.dialect = isForceHtml ? DIALECT.STRICTHTML : graph.dialect; + state.text.dialect = isForceHtml ? 'strictHtml' : graph.dialect; state.text.style = state.style; state.text.state = state; this.initializeLabel(state, state.text); @@ -418,7 +417,7 @@ class CellRenderer { forceGetCell = // @ts-ignore nodeName should exist. - graph.dialect !== DIALECT.SVG && source.nodeName === 'IMG'; + graph.dialect !== 'svg' && source.nodeName === 'IMG'; } }, (evt: MouseEvent) => { @@ -459,7 +458,7 @@ class CellRenderer { * @param shape {@link Shape} that represents the label. */ initializeLabel(state: CellState, shape: Shape): void { - if (Client.IS_SVG && Client.NO_FO && shape.dialect !== DIALECT.SVG) { + if (Client.IS_SVG && Client.NO_FO && shape.dialect !== 'svg') { const graph = state.view.graph; shape.init(graph.container); } else { @@ -653,10 +652,10 @@ class CellRenderer { // should go into the graph container directly in order to be clickable. Otherwise // it is obscured by the HTML label that overlaps the cell. const isForceHtml = - graph.isHtmlLabel(state.cell) && Client.NO_FO && graph.dialect === DIALECT.SVG; + graph.isHtmlLabel(state.cell) && Client.NO_FO && graph.dialect === 'svg'; if (isForceHtml) { - control.dialect = DIALECT.PREFERHTML; + control.dialect = 'preferHtml'; control.init(graph.container); control.node.style.zIndex = String(1); } else { @@ -768,7 +767,7 @@ class CellRenderer { if ( (source && - graph.dialect !== DIALECT.SVG && + graph.dialect !== 'svg' && // @ts-ignore nodeName should exist source.nodeName === 'IMG') || Client.IS_TOUCH @@ -839,7 +838,7 @@ class CellRenderer { const wrapping = graph.isWrapping(state.cell); const clipping = graph.isLabelClipped(state.cell); const isForceHtml = graph.isHtmlLabel(state.cell) || (value && isNode(value)); - const dialect = isForceHtml ? DIALECT.STRICTHTML : graph.dialect; + const dialect = isForceHtml ? 'strictHtml' : graph.dialect; const overflow = state.style.overflow ?? 'visible'; if ( diff --git a/packages/core/src/view/cell/VertexHandle.ts b/packages/core/src/view/cell/VertexHandle.ts index d48718896b..431270af16 100644 --- a/packages/core/src/view/cell/VertexHandle.ts +++ b/packages/core/src/view/cell/VertexHandle.ts @@ -21,7 +21,6 @@ import Point from '../geometry/Point'; import ImageShape from '../geometry/node/ImageShape'; import Rectangle from '../geometry/Rectangle'; import RectangleShape from '../geometry/node/RectangleShape'; -import { DIALECT } from '../../util/Constants'; import InternalEvent from '../event/InternalEvent'; import Shape from '../geometry/Shape'; import InternalMouseEvent from '../event/InternalMouseEvent'; @@ -205,11 +204,10 @@ class VertexHandle implements CellHandle { const shape = this.shape as Shape; // `this.shape` cannot be null. if (html && shape.isHtmlAllowed()) { - shape.dialect = DIALECT.STRICTHTML; + shape.dialect = 'strictHtml'; shape.init(this.graph.container); } else { - shape.dialect = - this.graph.dialect !== DIALECT.SVG ? DIALECT.MIXEDHTML : DIALECT.SVG; + shape.dialect = this.graph.dialect !== 'svg' ? 'mixedHtml' : 'svg'; if (this.cursor) { shape.init(this.graph.getView().getOverlayPane()); diff --git a/packages/core/src/view/geometry/Shape.ts b/packages/core/src/view/geometry/Shape.ts index 9d22df1df7..564c4fbafd 100644 --- a/packages/core/src/view/geometry/Shape.ts +++ b/packages/core/src/view/geometry/Shape.ts @@ -39,6 +39,7 @@ import type { ArrowValue, CellStateStyle, ColorValue, + DialectValue, DirectionValue, GradientMap, } from '../../types'; @@ -144,9 +145,8 @@ class Shape { /** * Holds the dialect in which the shape is to be painted. - * This can be one of the DIALECT constants in {@link Constants}. */ - dialect: string | null = null; + dialect: DialectValue | null = null; /** * Holds the scale in which the shape is being painted. diff --git a/packages/core/src/view/geometry/node/TextShape.ts b/packages/core/src/view/geometry/node/TextShape.ts index 53df8fd36a..21aef7d627 100644 --- a/packages/core/src/view/geometry/node/TextShape.ts +++ b/packages/core/src/view/geometry/node/TextShape.ts @@ -23,7 +23,6 @@ import { DEFAULT_FONTSIZE, DEFAULT_FONTSTYLE, DEFAULT_TEXT_DIRECTION, - DIALECT, FONT, NONE, TEXT_DIRECTION, @@ -250,7 +249,7 @@ class TextShape extends Shape { ); } else { // Checks if text contains HTML markup - const realHtml = isNode(this.value) || this.dialect === DIALECT.STRICTHTML; + const realHtml = isNode(this.value) || this.dialect === 'strictHtml'; // Always renders labels as HTML in VML const fmt = realHtml ? 'html' : ''; @@ -308,7 +307,7 @@ class TextShape extends Shape { this.checkBounds() && this.cacheEnabled && this.lastValue === this.value && - (isNode(this.value) || this.dialect === DIALECT.STRICTHTML) + (isNode(this.value) || this.dialect === 'strictHtml') ) { if (this.node.nodeName === 'DIV') { this.redrawHtmlShape(); @@ -328,7 +327,7 @@ class TextShape extends Shape { } else { super.redraw(); - if (isNode(this.value) || this.dialect === DIALECT.STRICTHTML) { + if (isNode(this.value) || this.dialect === 'strictHtml') { this.lastValue = this.value; } else { this.lastValue = null; @@ -574,8 +573,7 @@ class TextShape extends Shape { getHtmlValue() { let val = this.value as string; - if (this.dialect !== DIALECT.STRICTHTML) { - // @ts-ignore + if (this.dialect !== 'strictHtml') { val = htmlEntities(val, false); } @@ -699,7 +697,7 @@ class TextShape extends Shape { } else { let val = this.value as string; - if (this.dialect !== DIALECT.STRICTHTML) { + if (this.dialect !== 'strictHtml') { // LATER: Can be cached in updateValue val = htmlEntities(val, false); } @@ -725,7 +723,7 @@ class TextShape extends Shape { } else { let val = this.value as string; - if (this.dialect !== DIALECT.STRICTHTML) { + if (this.dialect !== 'strictHtml') { val = htmlEntities(val, false); } @@ -771,7 +769,7 @@ class TextShape extends Shape { if (divs.length > 0) { let dir = this.textDirection; - if (dir === TEXT_DIRECTION.AUTO && this.dialect !== DIALECT.STRICTHTML) { + if (dir === TEXT_DIRECTION.AUTO && this.dialect !== 'strictHtml') { dir = this.getAutoDirection(); } diff --git a/packages/core/src/view/handler/ConstraintHandler.ts b/packages/core/src/view/handler/ConstraintHandler.ts index d2c4e0a6ac..d19c7105a8 100644 --- a/packages/core/src/view/handler/ConstraintHandler.ts +++ b/packages/core/src/view/handler/ConstraintHandler.ts @@ -20,7 +20,6 @@ import Image from '../image/ImageBox'; import Client from '../../Client'; import { DEFAULT_VALID_COLOR, - DIALECT, HIGHLIGHT_OPACITY, HIGHLIGHT_SIZE, HIGHLIGHT_STROKEWIDTH, @@ -321,7 +320,7 @@ class ConstraintHandler { if (!this.focusHighlight) { const hl = this.createHighlightShape(); - hl.dialect = DIALECT.SVG; + hl.dialect = 'svg'; hl.pointerEvents = false; hl.init(this.graph.getView().getOverlayPane()); @@ -416,8 +415,7 @@ class ConstraintHandler { img.height ); const icon = new ImageShape(bounds, src); - icon.dialect = - this.graph.dialect !== DIALECT.SVG ? DIALECT.MIXEDHTML : DIALECT.SVG; + icon.dialect = this.graph.dialect !== 'svg' ? 'mixedHtml' : 'svg'; icon.preserveImageAspect = false; icon.init(this.graph.getView().getDecoratorPane()); diff --git a/packages/core/src/view/handler/EdgeHandler.ts b/packages/core/src/view/handler/EdgeHandler.ts index c4fd7ad8a0..c788578e5e 100644 --- a/packages/core/src/view/handler/EdgeHandler.ts +++ b/packages/core/src/view/handler/EdgeHandler.ts @@ -23,7 +23,6 @@ import { DEFAULT_HOTSPOT, DEFAULT_INVALID_COLOR, DEFAULT_VALID_COLOR, - DIALECT, HIGHLIGHT_STROKEWIDTH, LOCKED_HANDLE_FILLCOLOR, NONE, @@ -243,8 +242,7 @@ class EdgeHandler implements MouseListenerSet { // for the initial configuration and preview this.abspoints = this.getSelectionPoints(this.state); this.shape = this.createSelectionShape(this.abspoints); - this.shape.dialect = - this.graph.dialect !== DIALECT.SVG ? DIALECT.MIXEDHTML : DIALECT.SVG; + this.shape.dialect = this.graph.dialect !== 'svg' ? 'mixedHtml' : 'svg'; this.shape.init(this.graph.getView().getOverlayPane()); this.shape.pointerEvents = false; this.shape.setCursor(CURSOR.MOVABLE_EDGE); @@ -361,7 +359,7 @@ class EdgeHandler implements MouseListenerSet { if (parent && parent.isVertex() && pstate && !pstate.parentHighlight) { this.parentHighlight = this.createParentHighlightShape(pstate); // VML dialect required here for event transparency in IE - this.parentHighlight.dialect = DIALECT.SVG; + this.parentHighlight.dialect = 'svg'; this.parentHighlight.pointerEvents = false; if (pstate.style.rotation) { this.parentHighlight.rotation = pstate.style.rotation; @@ -670,10 +668,10 @@ class EdgeHandler implements MouseListenerSet { */ initBend(bend: Shape, dblClick?: (evt: MouseEvent) => void) { if (this.preferHtml) { - bend.dialect = DIALECT.STRICTHTML; + bend.dialect = 'strictHtml'; bend.init(this.graph.container); } else { - bend.dialect = this.graph.dialect !== DIALECT.SVG ? DIALECT.MIXEDHTML : DIALECT.SVG; + bend.dialect = this.graph.dialect !== 'svg' ? 'mixedHtml' : 'svg'; bend.init(this.graph.getView().getOverlayPane()); } diff --git a/packages/core/src/view/handler/VertexHandler.ts b/packages/core/src/view/handler/VertexHandler.ts index a14c75b8e1..0dfe0809da 100644 --- a/packages/core/src/view/handler/VertexHandler.ts +++ b/packages/core/src/view/handler/VertexHandler.ts @@ -17,7 +17,7 @@ limitations under the License. */ import Rectangle from '../geometry/Rectangle'; -import { CURSOR, DIALECT, NONE } from '../../util/Constants'; +import { CURSOR, NONE } from '../../util/Constants'; import InternalEvent from '../event/InternalEvent'; import RectangleShape from '../geometry/node/RectangleShape'; import ImageShape from '../geometry/node/ImageShape'; @@ -225,7 +225,7 @@ class VertexHandler implements MouseListenerSet { ); this.selectionBorder = this.createSelectionShape(this.bounds); // VML dialect required here for event transparency in IE - this.selectionBorder.dialect = DIALECT.SVG; + this.selectionBorder.dialect = 'svg'; this.selectionBorder.pointerEvents = false; this.selectionBorder.rotation = this.state.style.rotation ?? 0; this.selectionBorder.init(this.graph.getView().getOverlayPane()); @@ -482,11 +482,10 @@ class VertexHandler implements MouseListenerSet { ) { sizer.bounds.height -= 1; sizer.bounds.width -= 1; - sizer.dialect = DIALECT.STRICTHTML; + sizer.dialect = 'strictHtml'; sizer.init(this.graph.container); } else { - sizer.dialect = - this.graph.dialect !== DIALECT.SVG ? DIALECT.MIXEDHTML : DIALECT.SVG; + sizer.dialect = this.graph.dialect !== 'svg' ? 'mixedHtml' : 'svg'; sizer.init(this.graph.getView().getOverlayPane()); } @@ -695,10 +694,10 @@ class VertexHandler implements MouseListenerSet { this.state.text != null && this.state.text.node.parentNode === this.graph.container ) { - this.preview.dialect = DIALECT.STRICTHTML; + this.preview.dialect = 'strictHtml'; this.preview.init(this.graph.container); } else { - this.preview.dialect = DIALECT.SVG; + this.preview.dialect = 'svg'; this.preview.init(this.graph.view.getOverlayPane()); } } @@ -1981,7 +1980,7 @@ class VertexHandler implements MouseListenerSet { ) { this.parentHighlight = this.createParentHighlightShape(pstate); // VML dialect required here for event transparency in IE - this.parentHighlight.dialect = DIALECT.SVG; + this.parentHighlight.dialect = 'svg'; this.parentHighlight.pointerEvents = false; this.parentHighlight.rotation = pstate.style.rotation ?? 0; this.parentHighlight.init(this.graph.getView().getOverlayPane()); diff --git a/packages/core/src/view/other/Guide.ts b/packages/core/src/view/other/Guide.ts index ecbe2980fd..913f53ed13 100644 --- a/packages/core/src/view/other/Guide.ts +++ b/packages/core/src/view/other/Guide.ts @@ -16,7 +16,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import { DIALECT, GUIDE_COLOR, GUIDE_STROKEWIDTH } from '../../util/Constants'; +import { GUIDE_COLOR, GUIDE_STROKEWIDTH } from '../../util/Constants'; import Point from '../geometry/Point'; import PolylineShape from '../geometry/edge/PolylineShape'; import type CellState from '../cell/CellState'; @@ -183,7 +183,7 @@ class Guide { // Makes sure to use SVG shapes in order to implement // event-transparency on the background area of the rectangle since // HTML shapes do not let mouseevents through even when transparent - this.guideX.dialect = DIALECT.SVG; + this.guideX.dialect = 'svg'; this.guideX.pointerEvents = false; this.guideX.init(this.graph.getView().getOverlayPane()); } @@ -222,7 +222,7 @@ class Guide { // Makes sure to use SVG shapes in order to implement // event-transparency on the background area of the rectangle since // HTML shapes do not let mouseevents through even when transparent - this.guideY.dialect = DIALECT.SVG; + this.guideY.dialect = 'svg'; this.guideY.pointerEvents = false; this.guideY.init(this.graph.getView().getOverlayPane()); } diff --git a/packages/core/src/view/other/PrintPreview.ts b/packages/core/src/view/other/PrintPreview.ts index 08e4143837..bc6e85d6c9 100644 --- a/packages/core/src/view/other/PrintPreview.ts +++ b/packages/core/src/view/other/PrintPreview.ts @@ -22,7 +22,6 @@ import TemporaryCellStates from '../cell/TemporaryCellStates'; import InternalEvent from '../event/InternalEvent'; import Client from '../../Client'; import { intersects } from '../../util/mathUtils'; -import { DIALECT } from '../../util/Constants'; import { addLinkToHead, write } from '../../util/domUtils'; import type { AbstractGraph } from '../AbstractGraph'; import type CellState from '../cell/CellState'; @@ -803,7 +802,7 @@ class PrintPreview { const overlayPane = view.getOverlayPane(); const realScale = scale; - if (this.graph.dialect === DIALECT.SVG) { + if (this.graph.dialect === 'svg') { view.createSvg(); // Uses CSS transform for scaling diff --git a/packages/core/src/view/plugins/CellEditorHandler.ts b/packages/core/src/view/plugins/CellEditorHandler.ts index 2ced9409be..cb9a8e4ade 100644 --- a/packages/core/src/view/plugins/CellEditorHandler.ts +++ b/packages/core/src/view/plugins/CellEditorHandler.ts @@ -25,7 +25,6 @@ import { DEFAULT_FONTFAMILY, DEFAULT_FONTSIZE, DEFAULT_TEXT_DIRECTION, - DIALECT, FONT, LINE_HEIGHT, NONE, @@ -729,7 +728,7 @@ class CellEditorHandler implements GraphPlugin { if (dir === 'auto') { if ( state.text !== null && - state.text.dialect !== DIALECT.STRICTHTML && + state.text.dialect !== 'strictHtml' && !isNode(state.text.value) ) { dir = state.text.getAutoDirection(); diff --git a/packages/core/src/view/plugins/ConnectionHandler.ts b/packages/core/src/view/plugins/ConnectionHandler.ts index 1eface8b4a..78eaedeaf0 100644 --- a/packages/core/src/view/plugins/ConnectionHandler.ts +++ b/packages/core/src/view/plugins/ConnectionHandler.ts @@ -26,7 +26,6 @@ import { DEFAULT_HOTSPOT, DEFAULT_INVALID_COLOR, DEFAULT_VALID_COLOR, - DIALECT, HIGHLIGHT_STROKEWIDTH, INVALID_COLOR, NONE, @@ -504,7 +503,7 @@ class ConnectionHandler extends EventSource implements GraphPlugin, MouseListene : new PolylineShape([], INVALID_COLOR); if (shape && shape.node) { - shape.dialect = DIALECT.SVG; + shape.dialect = 'svg'; shape.scale = this.graph.view.scale; shape.pointerEvents = false; shape.isDashed = true; @@ -635,10 +634,10 @@ class ConnectionHandler extends EventSource implements GraphPlugin, MouseListene icon.preserveImageAspect = false; if (this.isMoveIconToFrontForState(state)) { - icon.dialect = DIALECT.STRICTHTML; + icon.dialect = 'strictHtml'; icon.init(this.graph.container); } else { - icon.dialect = DIALECT.SVG; + icon.dialect = 'svg'; icon.init(this.graph.getView().getOverlayPane()); // Move the icon back in the overlay pane diff --git a/packages/core/src/view/plugins/SelectionHandler.ts b/packages/core/src/view/plugins/SelectionHandler.ts index 3be83049d0..c030d4b808 100644 --- a/packages/core/src/view/plugins/SelectionHandler.ts +++ b/packages/core/src/view/plugins/SelectionHandler.ts @@ -25,7 +25,6 @@ import Guide from '../other/Guide'; import Point from '../geometry/Point'; import { CURSOR, - DIALECT, DROP_TARGET_COLOR, INVALID_CONNECT_TARGET_COLOR, NONE, @@ -707,13 +706,13 @@ class SelectionHandler implements GraphPlugin { shape.isDashed = true; if (this.htmlPreview) { - shape.dialect = DIALECT.STRICTHTML; + shape.dialect = 'strictHtml'; shape.init(this.graph.container); } else { // Makes sure to use either VML or SVG shapes in order to implement // event-transparency on the background area of the rectangle since // HTML shapes do not let mouseevents through even when transparent - shape.dialect = DIALECT.SVG; + shape.dialect = 'svg'; shape.init(this.graph.getView().getOverlayPane()); shape.pointerEvents = false; diff --git a/packages/html/stories/SecondLabel.stories.js b/packages/html/stories/SecondLabel.stories.js index 034ec3fd87..ccdc020c88 100644 --- a/packages/html/stories/SecondLabel.stories.js +++ b/packages/html/stories/SecondLabel.stories.js @@ -132,7 +132,7 @@ const Template = ({ label, ...args }) => { state.secondLabel.border = 'black'; state.secondLabel.valign = 'bottom'; state.secondLabel.dialect = state.shape.dialect; - state.secondLabel.dialect = constants.DIALECT.STRICTHTML; + state.secondLabel.dialect = 'strictHtml'; state.secondLabel.wrap = true; graph.cellRenderer.initializeLabel(state, state.secondLabel); }