diff --git a/.changeset/view-lookup-typings.md b/.changeset/view-lookup-typings.md new file mode 100644 index 0000000000..aafb9508c3 --- /dev/null +++ b/.changeset/view-lookup-typings.md @@ -0,0 +1,5 @@ +--- +"@joint/core": patch +--- + +types - view lookups (`cell.findView()`, `paper.findViewByModel()`, `paper.getCellView()`) now infer the view type from the model and include the absent-view case in the return type diff --git a/packages/joint-core/types/dia.d.ts b/packages/joint-core/types/dia.d.ts index 356555820a..e5d9a52752 100644 --- a/packages/joint-core/types/dia.d.ts +++ b/packages/joint-core/types/dia.d.ts @@ -752,7 +752,7 @@ export class Cell, opt?: Element.ConstructorOptions); + findView(paper: Paper): ElementView | undefined; + translate(tx: number, ty?: number, opt?: Element.TranslateOptions): this; position(opt?: Element.PositionOptions): g.Point; @@ -1053,6 +1055,8 @@ export class Link { findView(element: mvc.$SVGElement): T; - findViewByModel(model: Graph.CellRef): T; + findViewByModel(model: Element): ElementView | undefined; + findViewByModel(model: Link): LinkView | undefined; + findViewByModel(model: Cell | Cell.ID): CellView | undefined; + /** @deprecated Pass the model and let the view type be inferred. */ + findViewByModel(model: Graph.CellRef): T | undefined; + getCellView(model: Element): ElementView | null; + getCellView(model: Link): LinkView | null; + getCellView(model: Cell | Cell.ID): CellView | null; + /** @deprecated Pass the model and let the view type be inferred. */ getCellView(model: Graph.CellRef): T | null; /** diff --git a/packages/joint-react/src/store/clear-view.ts b/packages/joint-react/src/store/clear-view.ts index 2fc483eebe..0119e63547 100644 --- a/packages/joint-react/src/store/clear-view.ts +++ b/packages/joint-react/src/store/clear-view.ts @@ -99,7 +99,6 @@ export function clearConnectedLinkViews( linkView._sourceMagnet = null; // @ts-expect-error we use private jointjs api method linkView._targetMagnet = null; - // @ts-expect-error we use private jointjs api method linkView.requestConnectionUpdate({ async: true }); changes.set(String(link.id), { type: 'change', data: link }); } diff --git a/packages/joint-react/stories/examples/dynamic-status-icons/code.tsx b/packages/joint-react/stories/examples/dynamic-status-icons/code.tsx index 57ed9103e1..904bdb5ad8 100644 --- a/packages/joint-react/stories/examples/dynamic-status-icons/code.tsx +++ b/packages/joint-react/stories/examples/dynamic-status-icons/code.tsx @@ -228,7 +228,9 @@ function Main() { useOnElementsMeasured(({ isInitial, paper }) => { if (!isInitial) return; for (const element of graph.getElements()) { - StatusList.add(element.findView(paper), 'root', 'status', { + const elementView = element.findView(paper); + if (!elementView) continue; + StatusList.add(elementView, 'root', 'status', { attribute: 'status', position: 'top-right', margin: { right: 5, top: 5 }, diff --git a/packages/joint-react/stories/examples/element-controls/code.tsx b/packages/joint-react/stories/examples/element-controls/code.tsx index 8a04c02055..020be5f59c 100644 --- a/packages/joint-react/stories/examples/element-controls/code.tsx +++ b/packages/joint-react/stories/examples/element-controls/code.tsx @@ -740,7 +740,7 @@ function addElementControls(paper: dia.Paper) { const factory = controlMap[type]; if (!factory) continue; const toolsView = new dia.ToolsView({ tools: [factory()] }); - element.findView(paper).addTools(toolsView); + element.findView(paper)?.addTools(toolsView); } } diff --git a/packages/joint-react/stories/examples/portal-selectors/code.tsx b/packages/joint-react/stories/examples/portal-selectors/code.tsx index 77ca80a98e..7f77241986 100644 --- a/packages/joint-react/stories/examples/portal-selectors/code.tsx +++ b/packages/joint-react/stories/examples/portal-selectors/code.tsx @@ -219,6 +219,7 @@ function Selection({ selectedId }: { selectedId: CellId | null }) { if (!cell) return; const view = paper.findViewByModel(cell); + if (!view) return; highlighters.mask.add(view, 'root', 'selection', { padding: 8, layer: dia.Paper.Layers.FRONT,