diff --git a/examples/svg/src/di.config.ts b/examples/svg/src/di.config.ts index c591d8a4..862db89b 100644 --- a/examples/svg/src/di.config.ts +++ b/examples/svg/src/di.config.ts @@ -59,7 +59,7 @@ export class RectangleWithEditableLabel extends RectangularNode implements WithE export class EditableForeignObjectElement extends ForeignObjectElement implements EditableLabel { readonly isMultiLine = true; - readonly editControlBoundsCorrection = { x: 5, y: 3, height: -7.5, width: -7.5 }; + get editControlDimension() { return { width: this.bounds.width, height: this.bounds.height }; } get text(): string { return this.code; diff --git a/src/features/edit/edit-label-ui.ts b/src/features/edit/edit-label-ui.ts index 9bdb1ef2..0c417419 100644 --- a/src/features/edit/edit-label-ui.ts +++ b/src/features/edit/edit-label-ui.ts @@ -91,9 +91,9 @@ export class EditLabelUI extends AbstractUIExtension { element.style.position = 'absolute'; element.style.top = '0px'; element.style.left = '0px'; - element.onkeyup = (event) => this.validateLabelIfContentChange(event, this.inputElement.value); - element.onkeydown = (event) => this.hideIfEscapeEvent(event); - element.onblur = () => window.setTimeout(() => this.applyLabelEdit(), 200); + element.addEventListener('keydown', (event) => this.hideIfEscapeEvent(event)); + element.addEventListener('keyup', (event) => this.validateLabelIfContentChange(event, this.inputElement.value)); + element.addEventListener('blur', () => window.setTimeout(() => this.applyLabelEdit(), 200)); containerElement.appendChild(element); } @@ -212,10 +212,10 @@ export class EditLabelUI extends AbstractUIExtension { if (this.label) { const zoom = getZoom(this.label); const bounds = getAbsoluteClientBounds(this.label, this.domHelper, this.viewerOptions); - x = bounds.x + (this.label.editControlBoundsCorrection ? this.label.editControlBoundsCorrection.x * zoom : 0); - y = bounds.y + (this.label.editControlBoundsCorrection ? this.label.editControlBoundsCorrection.y * zoom : 0); - height = bounds.height + (this.label.editControlBoundsCorrection ? this.label.editControlBoundsCorrection.height * zoom : 0); - width = bounds.width + (this.label.editControlBoundsCorrection ? this.label.editControlBoundsCorrection.width * zoom : 0); + x = bounds.x + (this.label.editControlPositionCorrection ? this.label.editControlPositionCorrection.x : 0) * zoom; + y = bounds.y + (this.label.editControlPositionCorrection ? this.label.editControlPositionCorrection.y : 0) * zoom; + height = (this.label.editControlDimension ? this.label.editControlDimension.height : height) * zoom; + width = (this.label.editControlDimension ? this.label.editControlDimension.width : width) * zoom; } containerElement.style.left = `${x}px`; diff --git a/src/features/edit/model.ts b/src/features/edit/model.ts index fd5c4d66..f95b879e 100644 --- a/src/features/edit/model.ts +++ b/src/features/edit/model.ts @@ -17,7 +17,7 @@ import { SModelElement } from '../../base/model/smodel'; import { SRoutableElement } from '../routing/model'; import { SModelExtension } from '../../base/model/smodel-extension'; -import { Bounds } from '../../utils/geometry'; +import { Point, Dimension } from '../../utils/geometry'; export const editFeature = Symbol('editFeature'); @@ -30,7 +30,8 @@ export const editLabelFeature = Symbol('editLabelFeature'); export interface EditableLabel extends SModelExtension { text: string; readonly isMultiLine?: boolean; - readonly editControlBoundsCorrection?: Bounds; + readonly editControlDimension?: Dimension; + readonly editControlPositionCorrection?: Point; } export function isEditableLabel(element: T): element is T & EditableLabel { diff --git a/src/lib/generic-views.tsx b/src/lib/generic-views.tsx index 4c960f38..780d5142 100644 --- a/src/lib/generic-views.tsx +++ b/src/lib/generic-views.tsx @@ -22,7 +22,6 @@ import { VNode } from "snabbdom/vnode"; import { IView, RenderingContext } from "../base/views/view"; import { setNamespace, setAttr } from "../base/views/vnode-utils"; import { ForeignObjectElement, PreRenderedElement } from "./model"; -import { getSubType } from "../base/model/smodel-utils"; @injectable() export class PreRenderedView implements IView { @@ -55,8 +54,6 @@ export class ForeignObjectView implements IView { {context.renderChildren(model)} ; setAttr(node, 'class', model.type); - const subType = getSubType(model); - if (subType) setAttr(node, 'class', subType); setNamespace(foreignObjectContents, model.namespace); return node; }