From d1918e3d0617cbb573dd0e1c81d8f8240831d01e Mon Sep 17 00:00:00 2001 From: Roman Bruckner Date: Mon, 2 Dec 2024 14:37:09 +0100 Subject: [PATCH] types(dia.ElementView): fix return types (window.Element vs dia.Element (#2814) --- packages/joint-core/test/ts/index.test.ts | 19 ++++++- packages/joint-core/types/joint.d.ts | 61 ++++++++++++----------- 2 files changed, 50 insertions(+), 30 deletions(-) diff --git a/packages/joint-core/test/ts/index.test.ts b/packages/joint-core/test/ts/index.test.ts index 621a715ed..750a71952 100644 --- a/packages/joint-core/test/ts/index.test.ts +++ b/packages/joint-core/test/ts/index.test.ts @@ -104,7 +104,7 @@ const paper = new joint.dia.Paper({ paper.fitToContent({ padding: { top: 10 }, allowNewOrigin: false }); -const cellView = graph.getCells[0].findView(paper); +const cellView = graph.getCells()[0].findView(paper); cellView.vel.addClass('test-class'); let isHTMLView: AssertExtends = true; @@ -201,6 +201,10 @@ new joint.shapes.standard.Rectangle({ class MyElement extends joint.dia.Element { + test() { + return true; + } + static attributes = { 'empty-attribute': {}, 'set1-attribute': { @@ -222,3 +226,16 @@ class MyElement extends joint.dia.Element { }, }; } + +class CustomElementView extends joint.dia.ElementView { + +} + +const myElement = new MyElement(); +graph.addCell(myElement); +const myElementView = myElement.findView(paper) as CustomElementView; +myElementView.model.test(); + +// TODO: Fix 'MyElement' is assignable to the constraint of type 'E', but 'E' +// could be instantiated with a different subtype of constraint 'Element'. +// const ElementView1: typeof joint.dia.ElementView = CustomElementView; diff --git a/packages/joint-core/types/joint.d.ts b/packages/joint-core/types/joint.d.ts index 57a05f0df..60489eba8 100644 --- a/packages/joint-core/types/joint.d.ts +++ b/packages/joint-core/types/joint.d.ts @@ -22,6 +22,9 @@ type _DeepPartial = { type DeepPartial = _DeepPartial<_DeepRequired>; +// We use `DOMElement` later in the code, to avoid conflicts with the `dia.Element` type. +type DOMElement = Element; + export namespace dia { type Event = mvc.TriggeredEvent; @@ -395,7 +398,7 @@ export namespace dia { type UnsetCallback = ( this: V, - node: Element, + node: DOMElement, nodeAttributes: { [name: string]: any }, cellView: V ) => string | Array | null | void; @@ -404,7 +407,7 @@ export namespace dia { this: V, attributeValue: any, refBBox: g.Rect, - node: Element, + node: DOMElement, nodeAttributes: { [name: string]: any }, cellView: V ) => { [key: string]: any } | string | number | void; @@ -413,7 +416,7 @@ export namespace dia { this: V, attributeValue: any, refBBox: g.Rect, - node: Element, + node: DOMElement, nodeAttributes: { [name: string]: any }, cellView: V ) => dia.Point | null | void; @@ -422,7 +425,7 @@ export namespace dia { this: V, attributeValue: any, nodeBBox: g.Rect, - node: Element, + node: DOMElement, nodeAttributes: { [name: string]: any }, cellView: V ) => dia.Point | null | void; @@ -923,7 +926,7 @@ export namespace dia { isNodeConnection(node: SVGElement): boolean; - getEventTarget(evt: dia.Event, opt?: { fromPoint?: boolean }): Element; + getEventTarget(evt: dia.Event, opt?: { fromPoint?: boolean }): DOMElement; checkMouseleave(evt: dia.Event): void; @@ -1044,7 +1047,7 @@ export namespace dia { class ElementView extends CellViewGeneric { - update(element?: E, renderingOnlyAttrs?: { [key: string]: any }): void; + update(element?: DOMElement, renderingOnlyAttrs?: { [key: string]: any }): void; setInteractivity(value: boolean | ElementView.InteractivityOptions): void; @@ -1053,9 +1056,9 @@ export namespace dia { getTargetParentView(evt: dia.Event): CellView | null; findPortNode(portId: string | number): SVGElement | null; - findPortNode(portId: string | number, selector: string): E | null; + findPortNode(portId: string | number, selector: string): DOMElement | null; - findPortNodes(portId: string | number, groupSelector: string): E[]; + findPortNodes(portId: string | number, groupSelector: string): DOMElement[]; protected renderMarkup(): void; @@ -1204,9 +1207,9 @@ export namespace dia { getEndMagnet(endType: dia.LinkEnd): SVGElement | null; findLabelNode(labelIndex: string | number): SVGElement | null; - findLabelNode(labelIndex: string | number, selector: string): Element | null; + findLabelNode(labelIndex: string | number, selector: string): DOMElement | null; - findLabelNodes(labelIndex: string | number, groupSelector: string): Element[]; + findLabelNodes(labelIndex: string | number, groupSelector: string): DOMElement[]; removeRedundantLinearVertices(opt?: dia.ModelSetOptions): number; @@ -2647,27 +2650,27 @@ export namespace util { export function imageToDataUri(url: string, callback: (err: Error | null, dataUri: string) => void): void; - export function getElementBBox(el: Element): dia.BBox; + export function getElementBBox(el: DOMElement): dia.BBox; export function sortElements( elements: mvc.$Element, - comparator: (a: Element, b: Element) => number - ): Element[]; + comparator: (a: DOMElement, b: DOMElement) => number + ): DOMElement[]; - export function setAttributesBySelector(el: Element, attrs: { [selector: string]: { [attribute: string]: any }}): void; + export function setAttributesBySelector(el: DOMElement, attrs: { [selector: string]: { [attribute: string]: any }}): void; export function normalizeSides(sides: dia.Sides): dia.PaddingJSON; export function template(html: string): (data: any) => string; - export function toggleFullScreen(el?: Element): void; + export function toggleFullScreen(el?: DOMElement): void; export function objectDifference(object: object, base: object, opt?: { maxDepth?: number }): object; interface DOMJSONDocument { fragment: DocumentFragment; - selectors: { [key: string]: Element }; - groupSelectors: { [key: string]: Element[] }; + selectors: { [key: string]: DOMElement }; + groupSelectors: { [key: string]: DOMElement[] }; } export function parseDOMJSON(json: dia.MarkupJSON): DOMJSONDocument; @@ -2998,7 +3001,7 @@ export namespace mvc { type Dom = unknown; // The following types represent the DOM elements that can be passed to the // $() function. - type $Element = string | T | T[] | Dom; + type $Element = string | T | T[] | Dom; type $HTMLElement = $Element; type $SVGElement = $Element; @@ -3006,7 +3009,7 @@ export namespace mvc { duration?: number; delay?: number; easing?: string; - complete?: (this: Element) => void; + complete?: (this: DOMElement) => void; } interface Event { @@ -3029,7 +3032,7 @@ export namespace mvc { screenX: number | undefined; screenY: number | undefined; /** @deprecated */ - toElement: Element | undefined; + toElement: DOMElement | undefined; // PointerEvent pointerId: number | undefined; pointerType: string | undefined; @@ -3394,7 +3397,7 @@ export namespace mvc { } - interface ViewBaseOptions { + interface ViewBaseOptions { model?: TModel | undefined; // TODO: quickfix, this can't be fixed easy. The collection does not need to have the same model as the parent view. collection?: Collection | undefined; // was: Collection; @@ -3408,7 +3411,7 @@ export namespace mvc { type ViewBaseEventListener = (event: mvc.Event) => void; - class ViewBase extends EventsMixin implements Events { + class ViewBase extends EventsMixin implements Events { /** * Do not use, prefer TypeScript's extend functionality. */ @@ -3460,7 +3463,7 @@ export namespace mvc { protected _setAttributes(attributes: Record): void; } - interface ViewOptions extends mvc.ViewBaseOptions { + interface ViewOptions extends mvc.ViewBaseOptions { theme?: string; [key: string]: any; } @@ -3469,7 +3472,7 @@ export namespace mvc { [key: string]: any; } - class View extends mvc.ViewBase { + class View extends mvc.ViewBase { constructor(opt?: ViewOptions); @@ -3497,7 +3500,7 @@ export namespace mvc { children?: dia.MarkupJSON; - childNodes?: { [key: string]: Element } | null; + childNodes?: { [key: string]: DOMElement } | null; style?: { [key: string]: any }; @@ -3509,9 +3512,9 @@ export namespace mvc { undelegateDocumentEvents(): this; - delegateElementEvents(element: Element, events?: mvc.EventsHash, data?: viewEventData): this; + delegateElementEvents(element: DOMElement, events?: mvc.EventsHash, data?: viewEventData): this; - undelegateElementEvents(element: Element): this; + undelegateElementEvents(element: DOMElement): this; eventData(evt: dia.Event): viewEventData; eventData(evt: dia.Event, data: viewEventData): this; @@ -3521,7 +3524,7 @@ export namespace mvc { renderChildren(children?: dia.MarkupJSON): this; - findAttribute(attributeName: string, node: Element): string | null; + findAttribute(attributeName: string, node: DOMElement): string | null; confirmUpdate(flag: number, opt: { [key: string]: any }): number; @@ -3529,7 +3532,7 @@ export namespace mvc { isMounted(): boolean; - protected findAttributeNode(attributeName: string, node: Element): Element | null; + protected findAttributeNode(attributeName: string, node: DOMElement): DOMElement | null; protected init(): void;