Made requested changes

Author: Developer-Mike

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

@@ -3,7 +3,7 @@ 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 DIRECTIONS = ['up', 'down', 'left', 'right'] as Direction[]
 const DIRECTION_KEYS = {
   up: 'ArrowUp',
   down: 'ArrowDown',
@@ -39,7 +39,7 @@ export default class CommandsCanvasExtension {
       )
     })
 
-    for (const direction of DRIECTIONS) {
+    for (const direction of DIRECTIONS) {
       this.plugin.addCommand({
         id: `clone-node-${direction}`,
         name: `Clone node ${direction}`,

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

@@ -1,4 +1,3 @@
-import delay from 'src/utils/delay-helper'
 import { Notice } from 'obsidian'
 import { Canvas, CanvasEdge, CanvasNode, Position, Size } from 'src/@types/Canvas'
 import AdvancedCanvasPlugin from 'src/main'
@@ -150,13 +149,13 @@ export default class PresentationCanvasExtension {
       if (useCustomZoomFunction) CanvasHelper.zoomToBBox(canvas, currentNodeBBoxEnlarged)
       else canvas.zoomToBbox(currentNodeBBoxEnlarged)
 
-      await delay(animationDurationMs / 2)
+      await sleep(animationDurationMs / 2)
 
       const nextNodeBBoxEnlarged = CanvasHelper.scaleBBox(toNode.getBBox(), animationIntensity)
       if (useCustomZoomFunction) CanvasHelper.zoomToBBox(canvas, nextNodeBBoxEnlarged)
       else canvas.zoomToBbox(nextNodeBBoxEnlarged)
 
-      await delay(animationDurationMs / 2)
+      await sleep(animationDurationMs / 2)
     }
 
     let nodeBBox = toNode.getBBox()
@@ -203,7 +202,7 @@ export default class PresentationCanvasExtension {
     this.isPresentationMode = true
 
     // Wait for fullscreen to be enabled
-    await delay(500)
+    await sleep(500)
 
     // Zoom to first node
     this.visitedNodes.push(startNode)

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

@@ -1,4 +1,3 @@
-import { addIcon } from "obsidian"
 import { Canvas, CanvasNode } from "src/@types/Canvas"
 import AdvancedCanvasPlugin from "src/main"
 import * as CanvasHelper from "src/utils/canvas-helper"
@@ -7,86 +6,54 @@ import { CanvasEvent } from "src/events/events"
 interface Shape {
   id: string|null
   menuName: string
-  icon: () => string
+  icon: string
 }
 
 const SHAPES: Shape[] = [
   {
     id: null,
     menuName: 'Default',
-    icon: () => 'circle-off'
+    icon: 'circle-off'
   },
   {
     id: 'oval',
     menuName: 'Oval',
-    icon: () => {
-      addIcon('oval', `
-        <rect rx="31.25" height="62.5" width="93.75" y="18.75" x="3.125" stroke-width="8.333" stroke="currentColor" fill="transparent"/>
-      `)
-      return 'oval'
-    }
+    icon: 'oval'
   },
   {
     id: 'centered-rectangle',
     menuName: 'Rectangle',
-    icon: () => 'rectangle-horizontal'
+    icon: 'rectangle-horizontal'
   },
   {
     id: 'diamond',
     menuName: 'Diamond',
-    icon: () => 'diamond'
+    icon: 'diamond'
   },
   {
     id: 'parallelogram',
     menuName: 'Parallelogram',
-    icon: () => {
-      addIcon('parallelogram', `
-        <rect transform="skewX(-20)" rx="5" height="50" width="70" y="25" x="35" stroke-width="8.333" stroke="currentColor" fill="transparent"/>
-      `)
-      return 'parallelogram'
-    }
+    icon: 'parallelogram'
   },
   {
     id: 'circle',
     menuName: 'Circle',
-    icon: () => 'circle'
+    icon: 'circle'
   },
   {
     id: 'predefined-process',
     menuName: 'Predefined process',
-    icon: () => {
-      addIcon('predefined-process', `
-        <g stroke-width="2" stroke="currentColor" fill="none" transform="matrix(4.166667,0,0,4.166667,0,0)">
-          <path d="M 4.999687 3 L 19.000312 3 C 20.104688 3 21 3.895312 21 4.999687 L 21 19.000312 C 21 20.104688 20.104688 21 19.000312 21 L 4.999687 21 C 3.895312 21 3 20.104688 3 19.000312 L 3 4.999687 C 3 3.895312 3.895312 3 4.999687 3 Z M 4.999687 3 "/>
-          <path d="M 7 3 L 7 21 "/>
-          <path d="M 17 3 L 17 21 "/>
-        </g>
-      `)
-      return 'predefined-process'
-    }
+    icon: 'predefined-process'
   },
   {
     id: 'document',
     menuName: 'Document',
-    icon: () => {
-      addIcon('document', `
-        <path transform="translate(0, 5)" stroke="currentColor" fill="none" stroke-width="8.333" d="M83.75 25C85.82 25 87.5 26.68 87.5 28.75L87.5 64.375Q68.75 54.25 50 64.375 31.25 74.5 12.5 64.375L12.5 30.625 12.5 28.75C12.5 26.68 14.18 25 16.25 25Z"/>
-      `)
-      return 'document'
-    }
+    icon: 'document'
   },
   {
     id: 'database',
     menuName: 'Database',
-    icon: () => {
-      addIcon('database-shape', `
-        <g transform="translate(20, 20)" stroke-width="8.333" stroke="currentColor" fill="none">
-          <path d="M 1 51 L 1 11 C 1 5.48 14.43 1 31 1 C 47.57 1 61 5.48 61 11 L 61 51 C 61 56.52 47.57 61 31 61 C 14.43 61 1 56.52 1 51 Z"/>
-          <path d="M 1 11 C 1 16.52 14.43 21 31 21 C 47.57 21 61 16.52 61 11"/>
-        </g>
-      `)
-      return 'database-shape'
-    }
+    icon: 'database-shape'
   }
 ]
 
@@ -126,7 +93,7 @@ export default class ShapesCanvasExtension {
       const shapeButton = CanvasHelper.createPopupMenuOption(
         '',
         shape.menuName,
-        shape.icon(),
+        shape.icon,
         () => this.setShapeForSelection(canvas, shape)
       )
 

src/main.ts

@@ -10,6 +10,7 @@ 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'
+import IconsHelper from './utils/icons-helper'
 
 const CANVAS_EXTENSIONS: any[] = [
   NodeDataTaggerCanvasExtension,
@@ -28,6 +29,8 @@ export default class AdvancedCanvasPlugin extends Plugin {
   canvasExtensions: any[]
 
 	async onload() {
+    IconsHelper.addIcons()
+    
     this.settingsManager = new AdvancedCanvasSettingsManager(this)
     await this.settingsManager.loadSettings()
     this.settingsManager.addSettingsTab()

src/settings.ts

@@ -96,8 +96,6 @@ export class AdvancedCanvasPluginSettingTab extends PluginSettingTab {
     let { containerEl } = this
     containerEl.empty()
 
-    containerEl.createEl('h1', { cls: 'main-header', text: 'Advanced Canvas' })
-
     this.createFeatureHeading(
       containerEl,
       "Shapes",

src/styles.scss

@@ -1,4 +1,3 @@
-@use "styles/settings";
 @use "styles/menu";
 @use "styles/shapes";
 @use "styles/presentation";

src/styles/settings.scss

@@ -0,0 +1,28 @@
+import { addIcon } from "obsidian"
+
+const CUSTOM_ICONS = {
+  'oval': `<rect rx="31.25" height="62.5" width="93.75" y="18.75" x="3.125" stroke-width="8.333" stroke="currentColor" fill="transparent"/>`,
+  'parallelogram': `<rect transform="skewX(-20)" rx="5" height="50" width="70" y="25" x="35" stroke-width="8.333" stroke="currentColor" fill="transparent"/>`,
+  'predefined-process': `
+    <g stroke-width="2" stroke="currentColor" fill="none" transform="matrix(4.166667,0,0,4.166667,0,0)">
+      <path d="M 4.999687 3 L 19.000312 3 C 20.104688 3 21 3.895312 21 4.999687 L 21 19.000312 C 21 20.104688 20.104688 21 19.000312 21 L 4.999687 21 C 3.895312 21 3 20.104688 3 19.000312 L 3 4.999687 C 3 3.895312 3.895312 3 4.999687 3 Z M 4.999687 3 "/>
+      <path d="M 7 3 L 7 21 "/>
+      <path d="M 17 3 L 17 21 "/>
+    </g>
+  `,
+  'document': `<path transform="translate(0, 5)" stroke="currentColor" fill="none" stroke-width="8.333" d="M83.75 25C85.82 25 87.5 26.68 87.5 28.75L87.5 64.375Q68.75 54.25 50 64.375 31.25 74.5 12.5 64.375L12.5 30.625 12.5 28.75C12.5 26.68 14.18 25 16.25 25Z"/>`,
+  'database-shape': `
+    <g transform="translate(20, 20)" stroke-width="8.333" stroke="currentColor" fill="none">
+      <path d="M 1 51 L 1 11 C 1 5.48 14.43 1 31 1 C 47.57 1 61 5.48 61 11 L 61 51 C 61 56.52 47.57 61 31 61 C 14.43 61 1 56.52 1 51 Z"/>
+      <path d="M 1 11 C 1 16.52 14.43 21 31 21 C 47.57 21 61 16.52 61 11"/>
+    </g>
+  `
+}
+
+export default class IconsHelper {
+  static addIcons() {
+    for (const [id, svg] of Object.entries(CUSTOM_ICONS)) {
+      addIcon(id, svg)
+    }
+  }
+}