From 6736fa78014c0314741b1e5fe417d5565ba3b67a Mon Sep 17 00:00:00 2001 From: Roman Bruckner Date: Sun, 1 Dec 2024 15:59:21 +0100 Subject: [PATCH 1/2] types(dia.ElementView): fix return types (window.Element vs dia.Element --- 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 8f2843220..baf1283da 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; @@ -2645,27 +2648,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; @@ -2996,7 +2999,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; @@ -3004,7 +3007,7 @@ export namespace mvc { duration?: number; delay?: number; easing?: string; - complete?: (this: Element) => void; + complete?: (this: DOMElement) => void; } interface Event { @@ -3027,7 +3030,7 @@ export namespace mvc { screenX: number | undefined; screenY: number | undefined; /** @deprecated */ - toElement: Element | undefined; + toElement: DOMElement | undefined; // PointerEvent pointerId: number | undefined; pointerType: string | undefined; @@ -3392,7 +3395,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; @@ -3406,7 +3409,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. */ @@ -3458,7 +3461,7 @@ export namespace mvc { protected _setAttributes(attributes: Record): void; } - interface ViewOptions extends mvc.ViewBaseOptions { + interface ViewOptions extends mvc.ViewBaseOptions { theme?: string; [key: string]: any; } @@ -3467,7 +3470,7 @@ export namespace mvc { [key: string]: any; } - class View extends mvc.ViewBase { + class View extends mvc.ViewBase { constructor(opt?: ViewOptions); @@ -3495,7 +3498,7 @@ export namespace mvc { children?: dia.MarkupJSON; - childNodes?: { [key: string]: Element } | null; + childNodes?: { [key: string]: DOMElement } | null; style?: { [key: string]: any }; @@ -3507,9 +3510,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; @@ -3519,7 +3522,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; @@ -3527,7 +3530,7 @@ export namespace mvc { isMounted(): boolean; - protected findAttributeNode(attributeName: string, node: Element): Element | null; + protected findAttributeNode(attributeName: string, node: DOMElement): Element | null; protected init(): void; From ecc997bd44c3de672b3bcaa55334bbe87aea7e7b Mon Sep 17 00:00:00 2001 From: Roman Bruckner Date: Mon, 2 Dec 2024 13:22:13 +0100 Subject: [PATCH 2/2] update --- packages/joint-core/types/joint.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/joint-core/types/joint.d.ts b/packages/joint-core/types/joint.d.ts index baf1283da..516f5f298 100644 --- a/packages/joint-core/types/joint.d.ts +++ b/packages/joint-core/types/joint.d.ts @@ -3530,7 +3530,7 @@ export namespace mvc { isMounted(): boolean; - protected findAttributeNode(attributeName: string, node: DOMElement): Element | null; + protected findAttributeNode(attributeName: string, node: DOMElement): DOMElement | null; protected init(): void;