Let labels overwrite static edit control dimension

By default, use a static dimension for edit labels, but let SModel elements
overwrite this static dimensions.
This change also fixes the key listeners (Esc to cancel editing) didn't
work anymore.

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;

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`;

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<T extends SModelElement>(element: T): element is T & EditableLabel {

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)}
         </g>;
         setAttr(node, 'class', model.type);
-        const subType = getSubType(model);
-        if (subType) setAttr(node, 'class', subType);
         setNamespace(foreignObjectContents, model.namespace);
         return node;
     }