Merge pull request #3 from Developer-Mike/better-commands

Developer-Mike · web-flow · commit 4377eb77f71b · 2024-02-07T21:58:44.000+01:00
Add more canvas commands
diff --git a/README.md b/README.md
@@ -22,7 +22,10 @@
 - Enable the plugin in Settings -> Community plugins -> Installed plugins
 
 ## Features
+All features can be enabled/disabled in the settings.
+
 - Create groups independently of the nodes ([Updated card menu](#updated-canvas-card-menu))
+- More [canvas commands](#canvas-commands)
 - (Flowchart) [Node shapes](#node-shapes)
   - Terminal shape
   - Process shape
@@ -63,6 +66,16 @@
     <img src="./assets/control-menu.png" alt="New canvas control menu"/>
 </details>
 
+## Canvas Commands
+- `Advanced Canvas: Create text node`
+  - Create a new text node
+- `Advanced Canvas: Clone node up/down/left/right`
+  - Clone the selected node in the direction of the arrow keys
+  - The cloned node will have the same dimensions and color as the original node
+- `Advanced Canvas: Expand node up/down/left/right`
+  - Expand the selected node in the direction of the arrow keys
+  - Default hotkey: `Alt` + `Arrow keys`
+
 ## Node Shapes
 <details>
     <summary>Flowchart Example</summary>
diff --git a/src/@types/Canvas.d.ts b/src/@types/Canvas.d.ts
@@ -2,6 +2,7 @@ import { TFile } from "obsidian"
 
 export interface Canvas {
   view: CanvasView
+  config: CanvasConfig
 
   data: CanvasData
   getData(): CanvasData
@@ -32,6 +33,7 @@ export interface Canvas {
 
   getEdgesForNode(node: CanvasNode): CanvasEdge[]
 
+  createTextNode(options: TextNodeOptions): CanvasNode
   createGroupNode(options: GroupNodeOptions): CanvasNode
   createFileNode(options: FileNodeOptions): CanvasNode
   removeNode(node: CanvasNode): void
@@ -55,7 +57,11 @@ export interface Canvas {
   lockedX: number
   lockedY: number
   lockedZoom: number
-  setNodeUnknownData(node: CanvasNode, key: string, value: any): void
+  setNodeUnknownData(node: CanvasNode, key: keyof CanvasNodeUnknownData, value: any): void
+}
+
+export interface CanvasConfig {
+  defaultTextNodeDimensions: Size
 }
 
 export interface CanvasView {
@@ -88,6 +94,10 @@ export interface NodeOptions {
   focus?: boolean
 }
 
+export interface TextNodeOptions extends NodeOptions {
+  text?: string
+}
+
 export interface GroupNodeOptions extends NodeOptions {
   label?: string
 }
@@ -108,6 +118,9 @@ export interface CanvasNode {
   canvas: Canvas
   nodeEl: HTMLElement
   bbox: BBox
+  getBBox(): BBox
+  text?: string
+  color: string
   unknownData: CanvasNodeUnknownData
 }
 
diff --git a/src/canvas-extensions/commands-canvas-extension.ts b/src/canvas-extensions/commands-canvas-extension.ts
@@ -0,0 +1,113 @@
+import { Canvas } from "src/@types/Canvas"
+import AdvancedCanvasPlugin from "src/main"
+import * as CanvasHelper from "src/utils/canvas-helper"
+
+type Direction = 'up' | 'down' | 'left' | 'right'
+const DRIECTIONS = ['up', 'down', 'left', 'right'] as Direction[]
+const DIRECTION_KEYS = {
+  up: 'ArrowUp',
+  down: 'ArrowDown',
+  left: 'ArrowLeft',
+  right: 'ArrowRight'
+}
+
+export default class CommandsCanvasExtension {
+  plugin: AdvancedCanvasPlugin
+
+  constructor(plugin: AdvancedCanvasPlugin) {
+    this.plugin = plugin
+
+    if (!this.plugin.settingsManager.getSetting('commandsFeatureEnabled')) return
+
+    this.plugin.addCommand({
+      id: 'create-text-node',
+      name: 'Create text node',
+      checkCallback: CanvasHelper.canvasCommand(
+        this.plugin,
+        (canvas: Canvas) => !canvas.readonly,
+        (canvas: Canvas) => this.createTextNode(canvas)
+      )
+    })
+
+    for (const direction of DRIECTIONS) {
+      this.plugin.addCommand({
+        id: `clone-node-${direction}`,
+        name: `Clone node ${direction}`,
+        checkCallback: CanvasHelper.canvasCommand(
+          this.plugin,
+          (canvas: Canvas) => !canvas.readonly && canvas.selection.size === 1 && canvas.selection.values().next().value?.getData().type === 'text',
+          (canvas: Canvas) => this.cloneNode(canvas, direction)
+        )
+      })
+
+      this.plugin.addCommand({
+        id: `expand-node-${direction}`,
+        name: `Expand node ${direction}`,
+        hotkeys: [
+          {
+            modifiers: ['Alt'],
+            key: DIRECTION_KEYS[direction]
+          }
+        ],
+        checkCallback: CanvasHelper.canvasCommand(
+          this.plugin,
+          (canvas: Canvas) => !canvas.readonly && canvas.selection.size === 1,
+          (canvas: Canvas) => this.expandNode(canvas, direction)
+        )
+      })
+    }
+  }
+
+  private createTextNode(canvas: Canvas) {
+    const size = canvas.config.defaultTextNodeDimensions
+    const pos = CanvasHelper.getCenterCoordinates(canvas, size)
+
+    canvas.createTextNode({ pos: pos, size: size })
+  }
+
+  private cloneNode(canvas: Canvas, cloneDirection: Direction) {
+    const sourceNode = canvas.selection.values().next().value
+    if (!sourceNode) return
+    const sourceNodeData = sourceNode.getData()
+
+    const nodeMargin = this.plugin.settingsManager.getSetting('cloneNodeMargin')
+    const offset = { 
+      x: (sourceNode.width + nodeMargin) * (cloneDirection === 'left' ? -1 : (cloneDirection === 'right' ? 1 : 0)),
+      y: (sourceNode.height + nodeMargin) * (cloneDirection === 'up' ? -1 : (cloneDirection === 'down' ? 1 : 0))
+    }
+
+    const clonedNode = canvas.createTextNode({
+      pos: {
+        x: sourceNode.x + offset.x,
+        y: sourceNode.y + offset.y
+      },
+      size: {
+        width: sourceNode.width,
+        height: sourceNode.height
+      }
+    })
+
+    clonedNode.color = sourceNode.color
+    canvas.setNodeUnknownData(clonedNode, 'shape', sourceNodeData.shape)
+
+    if (this.plugin.settingsManager.getSetting('zoomToClonedNode'))
+      canvas.zoomToBbox(clonedNode.getBBox())
+  }
+
+  private expandNode(canvas: Canvas, expandDirection: Direction) {
+    const node = canvas.selection.values().next().value
+    if (!node) return
+
+    const expandNodeStepSize = this.plugin.settingsManager.getSetting('expandNodeStepSize')
+    const expand = {
+      x: expandDirection === 'left' ? -1 : (expandDirection === 'right' ? 1 : 0),
+      y: expandDirection === 'up' ? -1 : (expandDirection === 'down' ? 1 : 0)
+    }
+
+    node.setData({
+      ...node.getData(),
+      width: node.width + expand.x * expandNodeStepSize,
+      height: node.height + expand.y * expandNodeStepSize
+    })
+  }
+}
diff --git a/src/main.ts b/src/main.ts
@@ -9,10 +9,12 @@ import CanvasEventEmitter from './events/canvas-event-emitter'
 import { Canvas } from './@types/Canvas'
 import ReadonlyCanvasExtension from './canvas-extensions/readonly-canvas-extension'
 import EncapsulateCanvasExtension from './canvas-extensions/encapsulate-canvas-extension'
+import CommandsCanvasExtension from './canvas-extensions/commands-canvas-extension'
 
 const CANVAS_EXTENSIONS: any[] = [
   NodeDataTaggerCanvasExtension,
   InteractionTaggerCanvasExtension,
+  CommandsCanvasExtension,
   ReadonlyCanvasExtension,
   GroupCanvasExtension,
   EncapsulateCanvasExtension,
diff --git a/src/settings.ts b/src/settings.ts
@@ -9,6 +9,11 @@ const SLIDE_SIZE_OPTIONS: { [key: string]: string } = {
 export interface AdvancedCanvasPluginSettings {
   shapesFeatureEnabled: boolean
 
+  commandsFeatureEnabled: boolean
+  zoomToClonedNode: boolean
+  cloneNodeMargin: number
+  expandNodeStepSize: number
+
   betterReadonlyEnabled: boolean
   disableNodePopup: boolean
   disableZoom: boolean
@@ -27,6 +32,11 @@ export interface AdvancedCanvasPluginSettings {
 export const DEFAULT_SETTINGS: Partial<AdvancedCanvasPluginSettings> = {
   shapesFeatureEnabled: true,
 
+  commandsFeatureEnabled: true,
+  zoomToClonedNode: true,
+  cloneNodeMargin: 25,
+  expandNodeStepSize: 25,
+
   betterReadonlyEnabled: true,
   disableNodePopup: false,
   disableZoom: false,
@@ -99,6 +109,44 @@ export class AdvancedCanvasPluginSettingTab extends PluginSettingTab {
           .onChange(async (value) => await this.settingsManager.setSetting({ shapesFeatureEnabled: value }))
       )
 
+    new Setting(containerEl)
+      .setHeading()
+      .setName("Extended Commands")
+      .setDesc("Add more commands to the canvas.")
+      .addToggle((toggle) =>
+        toggle
+          .setTooltip("Requires a reload to take effect.")
+          .setValue(this.settingsManager.getSetting('commandsFeatureEnabled'))
+          .onChange(async (value) => await this.settingsManager.setSetting({ commandsFeatureEnabled: value }))
+      )
+
+    new Setting(containerEl)
+      .setName("Zoom to cloned node")
+      .setDesc("When enabled, the canvas will zoom to the cloned node.")
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.settingsManager.getSetting('zoomToClonedNode'))
+          .onChange(async (value) => await this.settingsManager.setSetting({ zoomToClonedNode: value }))
+      )
+
+    new Setting(containerEl)
+      .setName("Clone node margin")
+      .setDesc("The margin between the cloned node and the source node.")
+      .addText((text) =>
+        text
+          .setValue(this.settingsManager.getSetting('cloneNodeMargin').toString())
+          .onChange(async (value) => await this.settingsManager.setSetting({ cloneNodeMargin: parseInt(value) }))
+      )
+
+    new Setting(containerEl)
+      .setName("Expand node step size")
+      .setDesc("The step size for expanding the node.")
+      .addText((text) =>
+        text
+          .setValue(this.settingsManager.getSetting('expandNodeStepSize').toString())
+          .onChange(async (value) => await this.settingsManager.setSetting({ expandNodeStepSize: parseInt(value) }))
+      )
+
     new Setting(containerEl)
       .setHeading()
       .setName("Better readonly")
