Merge pull request #5 from Developer-Mike/portals

Portals

Author: Developer-Mike

README.md

@@ -38,6 +38,9 @@ All features can be enabled/disabled in the settings.
   - Database shape
 - [Presentation mode](#presentation)
   - Create presentations by connecting nodes with arrows
+- [Portals](#portals)
+  - Embed other canvases inside your canvas
+  - Create edges (arrows) to the embedded canvas
 - [Better readonly](#better-readonly)
   - Disable node popup menus
   - Lock the canvas' position
@@ -160,6 +163,14 @@ In presentation mode, you can navigate through the nodes using the arrow keys. T
   - Change slides using the arrow keys
   - Exit the presentation using the `ESC` key
 
+## Portals
+Embed other canvases inside your canvas and create edges (arrows) to the embedded canvas.
+
+<img src="./assets/sample-portal-usage.png" alt="Portal example"/>
+
+### Usage
+- Embed a canvas file and click on the door icon of the popup menu to open a portal
+
 ## Better Readonly
 - Disable node popup menus
 - Lock the canvas' position
@@ -180,28 +191,60 @@ Move the current selection to a new canvas and create a link in the current canv
 ## Canvas Events
 All custom events are prefixed with `advanced-canvas:` and can be listened to using `app.workspace.on` (Just like the default events).
 
-Events:
-- `advanced-canvas:canvas-changed`
-  - Fired when a new canvas gets loaded
-  - Payload: `Canvas`
-- `advanced-canvas:viewport-changed:before` and `advanced-canvas:viewport-changed:after`
-  - Fired before and after the viewport gets changed
-  - Payload: `Canvas`
-- `advanced-canvas:zoom-to-bbox:before` and `advanced-canvas:zoom-to-bbox:after`
-  - Fired before and after the canvas gets zoomed to a bounding box (e.g. zoom to selection, zoom to fit all)
-  - Payload: `Canvas`, `BBox`
-- `advanced-canvas:popup-menu-created`
-  - Fired when the a node popup menu gets created (Not firing multiple times if it gets moved between nodes of the same type)
-  - Payload: `Canvas`, `Node`
-- `advanced-canvas:nodes-changed`
-  - Fired when any node gets changed
-  - Payload: `Canvas`, `Node[]`
-- `advanced-canvas:node-interaction`
-  - Fired when a node gets hovered over
-  - Payload: `Canvas`, `Node`
-- `advanced-canvas:readonly-changed`
-  - Fired when the readonly state of the canvas changes
-  - Payload: `Canvas`, `boolean`
+<details>
+    <summary>
+        All Events (19)
+    </summary>
+
+  - `advanced-canvas:canvas-changed`
+    - Fired when a new canvas gets loaded
+    - Payload: `Canvas`
+  - `advanced-canvas:viewport-changed:before` and `advanced-canvas:viewport-changed:after`
+    - Fired before and after the viewport gets changed
+    - Payload: `Canvas`
+  - `advanced-canvas:node-moved`
+    - Fired when a node gets moved
+    - Payload: `Canvas`, `Node`
+  - `advanced-canvas:dragging-state-changed`
+    - Fired when the dragging state of the canvas changes
+    - Payload: `Canvas`, `boolean`
+  - `advanced-canvas:node-removed`
+    - Fired when a node gets removed
+    - Payload: `Canvas`, `Node`
+  - `advanced-canvas:selection-changed`
+    - Fired when the selection of the canvas changes
+    - Payload: `Canvas`, `updateSelection: (() => void) => void`
+  - `advanced-canvas:zoom-to-bbox:before` and `advanced-canvas:zoom-to-bbox:after`
+    - Fired before and after the canvas gets zoomed to a bounding box (e.g. zoom to selection, zoom to fit all)
+    - Payload: `Canvas`, `BBox`
+  - `advanced-canvas:popup-menu-created`
+    - Fired when the a node popup menu gets created (Not firing multiple times if it gets moved between nodes of the same type)
+    - Payload: `Canvas`, `Node`
+  - `advanced-canvas:nodes-changed`
+    - Fired when any node gets changed
+    - Payload: `Canvas`, `Node[]`
+  - `advanced-canvas:node-interaction`
+    - Fired when a node gets hovered over
+    - Payload: `Canvas`, `Node`
+  - `advanced-canvas:undo`
+    - Fired when undo gets called
+    - Payload: `Canvas`
+  - `advanced-canvas:redo`
+    - Fired when redo gets called
+    - Payload: `Canvas`
+  - `advanced-canvas:readonly-changed`
+    - Fired when the readonly state of the canvas changes
+    - Payload: `Canvas`, `boolean`
+  - `advanced-canvas:data-requested`
+    - Fired when the canvas data gets requested
+    - Payload: `Canvas`, `CanvasData (Reference!)`
+  - `advanced-canvas:load-data`
+    - Fired when the canvas data gets set
+    - Payload: `Canvas`, `CanvasData (Reference!)`, `setData: (CanvasData) => void`
+  - `advanced-canvas:canvas-saved:before` and `advanced-canvas:canvas-saved:after`
+    - Fired before and after the canvas gets saved
+    - Payload: `Canvas`
+</details>
 
 ## Settings
 Every feature can be enabled/disabled in the settings. All features were made to be as customizable as possible.

assets/sample-portal-usage.png

@@ -1,4 +1,4 @@
-import { TFile, View } from "obsidian"
+import { TFile, View, WorkspaceLeaf } from "obsidian"
 
 export interface Size {
   width: number
@@ -20,8 +20,13 @@ export interface BBox {
 export interface Canvas {
   view: CanvasView
   config: CanvasConfig
+  options: CanvasOptions
 
   getData(): CanvasData
+  setData(data: CanvasData): void
+
+  /** Basically setData, but without modifying the history */
+  importData(data: CanvasData): void
 
   nodes: Map<string, CanvasNode>
   edges: Map<string, CanvasEdge>
@@ -47,6 +52,9 @@ export interface Canvas {
   ty: number
   tZoom: number
 
+  isDragging: boolean
+  setDragging(dragging: boolean): void
+  
   zoomToBbox(bbox: BBox): void
   zoomToSelection(): void
 
@@ -57,12 +65,17 @@ export interface Canvas {
   getSelectionData(): SelectionData
   deselectAll(): void
 
+  toggleObjectSnapping(enabled: boolean): void
   dragTempNode(dragEvent: any, nodeSize: Size, onDropped: (position: Position) => void): void
+
   createTextNode(options: TextNodeOptions): CanvasNode
   createGroupNode(options: GroupNodeOptions): CanvasNode
   createFileNode(options: FileNodeOptions): CanvasNode
+
   removeNode(node: CanvasNode): void
+  removeEdge(edge: CanvasEdge): void
 
+  history: CanvasHistory
   undo(): void
   redo(): void
 
@@ -74,6 +87,24 @@ export interface Canvas {
   lockedY: number
   lockedZoom: number
   setNodeData(node: CanvasNode, key: keyof CanvasNodeData, value: any): void
+  foreignCanvasData: { [key: string]: CanvasData }
+}
+
+export interface CanvasOptions {
+  snapToObjects: boolean
+  snapToGrid: boolean
+}
+
+export interface CanvasHistory {
+  data: CanvasData[]
+  current: number
+  max: number
+
+  applyHistory: (data: CanvasData) => void
+  canUndo: () => boolean
+  undo: () => CanvasData|null
+  canRedo: () => boolean
+  redo: () => CanvasData|null
 }
 
 export interface SelectionData {
@@ -87,7 +118,17 @@ export interface CanvasConfig {
 }
 
 export interface CanvasView extends View {
+  _loaded: boolean
   file: TFile
+  canvas: Canvas
+  leaf: CanvasWorkspaceLeaf
+
+  getViewData(): string
+  setViewData(data: string): void
+}
+
+export interface CanvasWorkspaceLeaf extends WorkspaceLeaf {
+  id: string
 }
 
 export interface NodeOptions {
@@ -118,8 +159,25 @@ export interface CanvasData {
 export type CanvasNodeType = 'text' | 'group' | 'file' | 'link'
 export interface CanvasNodeData {
   type: CanvasNodeType
+  text?: string
+  label?: string
+  file?: string
+
   shape: string
   isStartNode: boolean
+  edgesToNodeFromPortal?: { [key: string]: CanvasEdgeData[] }
+
+  // Portal node
+  portalToFile?: string
+  closedPortalWidth?: number
+  closedPortalHeight?: number
+  portalIdMaps?: { 
+    nodeIdMap: { [key: string]: string }
+    edgeIdMap: { [key: string]: string }
+  }
+
+  // Node from portal
+  portalId?: string
 
   [key: string]: any
 }
@@ -129,9 +187,16 @@ export interface CanvasNode {
   nodeEl: HTMLElement
   getBBox(): BBox
 
+  file?: TFile
+
+  x: number
+  y: number
+  width: number
+  height: number
+
   color: string
+  zIndex: number
 
-  /** @deprecated Use `canvas.setNodeData` instead */
   setData(data: CanvasNodeData): void
   getData(): CanvasNodeData
 }
@@ -145,6 +210,8 @@ export interface CanvasEdgeData {
 
   fromSide: Side
   toSide: Side
+  
+  portalId?: string
 }
 
 export interface CanvasEdge {

package-lock.json

@@ -22,7 +22,9 @@ export default class InteractionTaggerCanvasExtension {
           const datasetKey = TARGET_NODE_DATASET_PREFIX + dataKey.toString().charAt(0).toUpperCase() + dataKey.toString().slice(1)
 
           const dataValue = node?.getData()[dataKey]
-          if (dataValue) interactionEl.dataset[datasetKey] = dataValue
+
+          if (dataValue === undefined) delete interactionEl.dataset[datasetKey]
+          else interactionEl.dataset[datasetKey] = dataValue
         }
       }
     ))

src/@types/Canvas.d.ts

@@ -2,7 +2,7 @@ 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'] as (keyof CanvasNodeData)[]
+export const EXPOSED_DATA = ['type', 'shape', 'isStartNode', 'portalToFile', 'portalId'] as (keyof CanvasNodeData)[]
 
 export default class NodeDataTaggerCanvasExtension {
   plugin: AdvancedCanvasPlugin
@@ -19,7 +19,9 @@ export default class NodeDataTaggerCanvasExtension {
 
           for (const dataKey of EXPOSED_DATA) {
             const dataValue = nodeData[dataKey]
-            node.nodeEl.dataset[dataKey] = dataValue
+            
+            if (dataValue === undefined) delete node.nodeEl.dataset[dataKey]
+            else node.nodeEl.dataset[dataKey] = dataValue
           }
         }
       }