Fixed bug where popup menu items dont show up when new canvas got created

Author: Developer-Mike

src/@types/Canvas.d.ts

@@ -4,7 +4,6 @@ export interface Canvas {
   view: CanvasView
   config: CanvasConfig
 
-  data: CanvasData
   getData(): CanvasData
 
   nodes: Map<string, CanvasNode>
@@ -28,7 +27,7 @@ export interface Canvas {
   setReadonly(readonly: boolean): void
 
   selection: Set<CanvasNode>
-  getSelectionData(): { nodes: CanvasNodeData[], edges: CanvasEdgeData[], center: Position }
+  getSelectionData(): SelectionData
   deselectAll(): void
 
   getEdgesForNode(node: CanvasNode): CanvasEdge[]
@@ -58,7 +57,13 @@ export interface Canvas {
   lockedX: number
   lockedY: number
   lockedZoom: number
-  setNodeUnknownData(node: CanvasNode, key: keyof CanvasNodeUnknownData, value: any): void
+  setNodeData(node: CanvasNode, key: keyof CanvasNodeData, value: any): void
+}
+
+export interface SelectionData {
+  nodes: CanvasNodeData[]
+  edges: CanvasEdgeData[]
+  center: Position
 }
 
 export interface CanvasConfig {
@@ -113,7 +118,13 @@ export interface CanvasData {
   edges: CanvasEdge[]
 }
 
-export interface CanvasNodeData extends CanvasNodeUnknownData {}
+export interface CanvasNodeData {
+  type: CanvasNodeType
+  shape: string
+  isStartNode: boolean
+
+  [key: string]: any
+}
 
 export interface CanvasNode {
   canvas: Canvas
@@ -122,15 +133,11 @@ export interface CanvasNode {
   getBBox(): BBox
   text?: string
   color: string
-  unknownData: CanvasNodeUnknownData
+  setData(data: CanvasNodeData): void
+  getData(): CanvasNodeData
 }
 
 export interface CanvasNodeUnknownData {
-  type: CanvasNodeType
-  shape: string
-  isStartNode: boolean
-
-  [key: string]: any
 }
 
 export type CanvasNodeType = 'text' | 'group' | 'file'

src/canvas-extensions/commands-canvas-extension.ts

@@ -98,7 +98,7 @@ export default class CommandsCanvasExtension {
     })
 
     clonedNode.color = sourceNode.color
-    canvas.setNodeUnknownData(clonedNode, 'shape', sourceNodeData.shape)
+    canvas.setNodeData(clonedNode, 'shape', sourceNodeData.shape)
 
     if (this.plugin.settingsManager.getSetting('zoomToClonedNode'))
       canvas.zoomToBbox(clonedNode.getBBox())

src/canvas-extensions/interaction-tagger-canvas-extension.ts

@@ -19,9 +19,9 @@ export default class InteractionTaggerCanvasExtension {
         if (!interactionEl) return
 
         for (const dataKey of EXPOSED_DATA) {
-          const datasetKey = TARGET_NODE_DATASET_PREFIX + dataKey.charAt(0).toUpperCase() + dataKey.slice(1)
+          const datasetKey = TARGET_NODE_DATASET_PREFIX + dataKey.toString().charAt(0).toUpperCase() + dataKey.toString().slice(1)
 
-          const dataValue = node?.unknownData[dataKey]
+          const dataValue = node?.getData()[dataKey]
           if (dataValue) interactionEl.dataset[datasetKey] = dataValue
         }
       }

src/canvas-extensions/node-data-tagger-canvas-extension.ts

@@ -1,8 +1,8 @@
-import { Canvas, CanvasNode } from "src/@types/Canvas"
+import { Canvas, CanvasNode, CanvasNodeData } from "src/@types/Canvas"
 import { CanvasEvent } from "src/events/events"
 import AdvancedCanvasPlugin from "src/main"
 
-export const EXPOSED_DATA = ["type", "isStartNode", "shape"]
+export const EXPOSED_DATA = ['type', 'isStartNode', 'shape'] as (keyof CanvasNodeData)[]
 
 export default class NodeDataTaggerCanvasExtension {
   plugin: AdvancedCanvasPlugin
@@ -14,7 +14,7 @@ export default class NodeDataTaggerCanvasExtension {
       CanvasEvent.NodesChanged,
       (_canvas: Canvas, nodes: CanvasNode[]) => {
         for (const node of nodes) {
-          const nodeData = node?.unknownData
+          const nodeData = node?.getData()
           if (!nodeData) continue
 
           for (const dataKey of EXPOSED_DATA) {

src/canvas-extensions/presentation-canvas-extension.ts

@@ -102,7 +102,7 @@ export default class PresentationCanvasExtension {
 
   private getStartNode(canvas: Canvas): CanvasNode|undefined {
     for (const [_, node] of canvas.nodes) {
-      if (node.unknownData.isStartNode) return node
+      if (node.getData().isStartNode) return node
     }
 
     return undefined
@@ -112,9 +112,9 @@ export default class PresentationCanvasExtension {
     if (!node) return
 
     const startNode = this.getStartNode(canvas)
-    if (startNode) canvas.setNodeUnknownData(startNode, 'isStartNode', false)
+    if (startNode) canvas.setNodeData(startNode, 'isStartNode', false)
 
-    canvas.setNodeUnknownData(node, 'isStartNode', true)
+    canvas.setNodeData(node, 'isStartNode', true)
   }
 
   private getSlideSize(): Size {
@@ -136,7 +136,7 @@ export default class PresentationCanvasExtension {
       focus: false,
     })
 
-    if (isStartNode) canvas.setNodeUnknownData(groupNode, 'isStartNode', true)
+    if (isStartNode) canvas.setNodeData(groupNode, 'isStartNode', true)
   }
 
   private async animateNodeTransition(canvas: Canvas, fromNode: CanvasNode|undefined, toNode: CanvasNode) {

src/canvas-extensions/shapes-canvas-extension.ts

@@ -141,17 +141,17 @@ export default class ShapesCanvasExtension {
     if (!selection) return false
 
     for (const node of selection) {
-      if (node.unknownData.type === 'text') return true
+      if (node.getData().type === 'text') return true
     }
 
     return false
   }
 
   private setShapeForSelection(canvas: Canvas, shape: Shape) {  
     for (const node of canvas.selection) {
-      if (node.unknownData.type !== 'text') continue
+      if (node.getData().type !== 'text') continue
 
-      canvas.setNodeUnknownData(node, 'shape', shape.id)
+      canvas.setNodeData(node, 'shape', shape.id)
     }
   }
 }

src/events/canvas-event-emitter.ts

@@ -1,5 +1,5 @@
 import AdvancedCanvasPlugin from "src/main"
-import { BBox, CanvasNode } from "src/@types/Canvas"
+import { BBox, CanvasNode, SelectionData } from "src/@types/Canvas"
 import { patchWorkspaceFunction } from "src/utils/patch-helper"
 import { CanvasEvent } from "./events"
 
@@ -13,19 +13,14 @@ export default class CanvasEventEmitter {
     // Patch canvas
     patchWorkspaceFunction(this.plugin, () => this.plugin.getCurrentCanvas(), {
       // Add custom function
-      setNodeUnknownData: (_next: any) => function (node: CanvasNode, key: string, value: any) {
-        node.unknownData[key] = value
-        this.requestSave()
-  
+      setNodeData: (_next: any) => function (node: CanvasNode, key: string, value: any) {
+        node.setData({ 
+          ...node.getData(),
+          [key]: value 
+        })
+
         that.triggerWorkspaceEvent(CanvasEvent.NodesChanged, this, [node])
       },
-      // Listen to canvas change
-      importData: (next: any) => function (...args: any) {
-        const result = next.call(this, ...args)
-        that.triggerWorkspaceEvent(CanvasEvent.CanvasChanged, this)
-        that.triggerWorkspaceEvent(CanvasEvent.NodesChanged, this, [...this.nodes.values()])
-        return result
-      },
       markViewportChanged: (next: any) => function (...args: any) {
         that.triggerWorkspaceEvent(CanvasEvent.ViewportChanged.Before, this)
         const result = next.call(this, ...args)
@@ -48,9 +43,9 @@ export default class CanvasEventEmitter {
         that.triggerWorkspaceEvent(CanvasEvent.NodesChanged, this, [...this.nodes.values()])
         return result
       },
-      addNode: (next: any) => function (node: CanvasNode) {
-        const result = next.call(this, node)
-        that.triggerWorkspaceEvent(CanvasEvent.NodesChanged, this, [node])
+      handlePaste: (next: any) => function (...args: any) {
+        const result = next.call(this, ...args)
+        that.triggerWorkspaceEvent(CanvasEvent.NodesChanged, this, [...this.nodes.values()])
         return result
       },
       setReadonly: (next: any) => function (readonly: boolean) {
@@ -62,13 +57,15 @@ export default class CanvasEventEmitter {
 
     // Patch canvas popup menu
     patchWorkspaceFunction(this.plugin, () => this.plugin.getCurrentCanvas()?.menu, {
-      render: (next: any) => function (...args: any) {
-        const result = next.call(this, ...args)
+      render: (next: any) => function (visible: boolean) {
+        const result = next.call(this, visible)
 
-        that.triggerWorkspaceEvent(CanvasEvent.PopupMenuCreated, this.canvas)
+        if (visible) {
+          that.triggerWorkspaceEvent(CanvasEvent.PopupMenuCreated, this.canvas)
 
-        // Re-Center the popup menu
-        next.call(this)
+          // Re-Center the popup menu
+          next.call(this, false)
+        }
 
         return result
       }
@@ -85,25 +82,24 @@ export default class CanvasEventEmitter {
       }
     })
 
-    // Update current canvas on startup
-    const startupListener = this.plugin.app.workspace.on('active-leaf-change', () => {
+    // Listen to canvas changes
+    const onCanvasChangeListener = this.plugin.app.workspace.on('active-leaf-change', () => {
       const canvas = this.plugin.getCurrentCanvas()
       if (!canvas) return
 
       this.triggerWorkspaceEvent(CanvasEvent.CanvasChanged, canvas)
       this.triggerWorkspaceEvent(CanvasEvent.ViewportChanged.After, canvas)
       this.triggerWorkspaceEvent(CanvasEvent.ReadonlyChanged, canvas, canvas.readonly)
       this.triggerWorkspaceEvent(CanvasEvent.NodesChanged, canvas, [...canvas.nodes.values()])
-
-      this.plugin.app.workspace.offref(startupListener)
     })
-    this.plugin.registerEvent(startupListener)
+    this.plugin.registerEvent(onCanvasChangeListener)
 
     // Trigger instantly (Plugin reload)
-    startupListener.fn.call(this.plugin.app.workspace)
+    onCanvasChangeListener.fn.call(this.plugin.app.workspace)
   }
 
   private triggerWorkspaceEvent(event: string, ...args: any) {
+    if (event === CanvasEvent.CanvasChanged) console.log('Canvas changed')
     this.plugin.app.workspace.trigger(event, ...args)
   }
 }