Added preview of collapsed group while node gets dragged

Author: Developer-Mike

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

@@ -0,0 +1,43 @@
+import { Canvas } from "src/@types/Canvas"
+import { CanvasEvent } from "src/events/events"
+import AdvancedCanvasPlugin from "src/main"
+import SettingsManager, { AdvancedCanvasPluginSettings } from "src/settings"
+
+const EXPOSED_SETTINGS: (keyof AdvancedCanvasPluginSettings)[] = [
+  'collapsibleGroupsFeatureEnabled',
+  'collapsedGroupPreviewOnDrag'
+]
+
+export default class CanvasWrapperDataTaggerCanvasExtension {
+  plugin: AdvancedCanvasPlugin
+
+  constructor(plugin: AdvancedCanvasPlugin) {
+    this.plugin = plugin
+
+    this.plugin.registerEvent(this.plugin.app.workspace.on(
+      SettingsManager.SETTINGS_CHANGED_EVENT,
+      () => this.updateExposedSettings(this.plugin.getCurrentCanvas())
+    ))
+
+    this.plugin.registerEvent(this.plugin.app.workspace.on(
+      CanvasEvent.CanvasChanged,
+      (canvas: Canvas) => this.updateExposedSettings(canvas)
+    ))
+
+    this.plugin.registerEvent(this.plugin.app.workspace.on(
+      CanvasEvent.DraggingStateChanged,
+      (canvas: Canvas, dragging: boolean) => {
+        if (dragging) canvas.wrapperEl.dataset.isDragging = 'true'
+        else delete canvas.wrapperEl.dataset.isDragging
+      }
+    ))
+  }
+
+  private updateExposedSettings(canvas: Canvas | null) {
+    if (!canvas) return
+
+    for (const setting of EXPOSED_SETTINGS) {
+      canvas.wrapperEl.dataset[setting] = this.plugin.settings.getSetting(setting).toString()
+    }
+  }
+}

src/canvas-extensions/collapsible-groups-canvas-extension.ts

@@ -14,11 +14,6 @@ export default class CollapsibleGroupsCanvasExtension {
 
     if (!this.plugin.settings.getSetting('collapsibleGroupsFeatureEnabled')) return
 
-    this.plugin.registerEvent(this.plugin.app.workspace.on(
-      CanvasEvent.CanvasChanged,
-      (canvas: Canvas) => canvas.wrapperEl.dataset.collapsibleGroupsEnabled = 'true'
-    ))
-
     this.plugin.registerEvent(this.plugin.app.workspace.on(
       CanvasEvent.NodeChanged,
       (canvas: Canvas, node: CanvasNode) => this.onNodeChanged(canvas, node)

src/canvas-extensions/color-palette-canvas-extension.ts

@@ -14,8 +14,8 @@ export default class ColorPaletteCanvasExtension {
     this.plugin = plugin
 
     this.plugin.registerEvent(this.plugin.app.workspace.on(
-      'advanced-canvas:window-open',
-      () => this.updateCustomColorModStyleClasses()
+      'window-open',
+      (_win: WorkspaceWindow, _window: Window) => this.updateCustomColorModStyleClasses()
     ))
 
     this.plugin.registerEvent(this.plugin.app.workspace.on(

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

@@ -1,9 +1,9 @@
 import { Canvas, CanvasEdge, CanvasEdgeData } from "src/@types/Canvas"
 import { CanvasEvent } from "src/events/events"
 import AdvancedCanvasPlugin from "src/main"
-import AdvancedCanvasSettingsManager from "src/settings"
+import SettingsManager from "src/settings"
 
-export function getExposedEdgeData(settings: AdvancedCanvasSettingsManager): (keyof CanvasEdgeData)[] {
+export function getExposedEdgeData(settings: SettingsManager): (keyof CanvasEdgeData)[] {
   const exposedData: (keyof CanvasEdgeData)[] = []
 
   if (settings.getSetting('edgesStylingFeatureEnabled')) exposedData.push('edgeStyle')

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

@@ -1,9 +1,9 @@
 import { Canvas, CanvasNode, CanvasNodeData } from "src/@types/Canvas"
 import { CanvasEvent } from "src/events/events"
 import AdvancedCanvasPlugin from "src/main"
-import AdvancedCanvasSettingsManager from "src/settings"
+import SettingsManager from "src/settings"
 
-export function getExposedNodeData(settings: AdvancedCanvasSettingsManager): (keyof CanvasNodeData)[] {
+export function getExposedNodeData(settings: SettingsManager): (keyof CanvasNodeData)[] {
   const exposedData: (keyof CanvasNodeData)[] = []
 
   if (settings.getSetting('stickersFeatureEnabled')) exposedData.push('isSticker')

src/main.ts

@@ -1,4 +1,4 @@
-import { ItemView, Plugin, WorkspaceWindow } from 'obsidian'
+import { ItemView, Plugin } from 'obsidian'
 import SettingsManager from './settings'
 import ShapesCanvasExtension from './canvas-extensions/shapes-canvas-extension'
 import { Canvas, CanvasView } from './@types/Canvas'
@@ -20,8 +20,10 @@ import DefaultNodeSizeCanvasExtension from './canvas-extensions/default-node-siz
 import ColorPaletteCanvasExtension from './canvas-extensions/color-palette-canvas-extension'
 import CollapsibleGroupsCanvasExtension from './canvas-extensions/collapsible-groups-canvas-extension'
 import WindowsManager from './windows-manager'
+import CanvasWrapperDataTaggerCanvasExtension from './canvas-extensions/canvas-wrapper-data-tagger-canvas-extension'
 
 const CANVAS_EXTENSIONS: any[] = [
+  CanvasWrapperDataTaggerCanvasExtension,
   NodeDataTaggerCanvasExtension,
   EdgeDataTaggerCanvasExtension,
   InteractionTaggerCanvasExtension,

src/settings.ts

@@ -25,6 +25,7 @@ export interface AdvancedCanvasPluginSettings {
   disablePan: boolean
 
   collapsibleGroupsFeatureEnabled: boolean
+  collapsedGroupPreviewOnDrag: boolean
 
   stickersFeatureEnabled: boolean
 
@@ -61,6 +62,7 @@ export const DEFAULT_SETTINGS: Partial<AdvancedCanvasPluginSettings> = {
   disablePan: false,
 
   collapsibleGroupsFeatureEnabled: true,
+  collapsedGroupPreviewOnDrag: true,
 
   stickersFeatureEnabled: true,
 
@@ -78,7 +80,9 @@ export const DEFAULT_SETTINGS: Partial<AdvancedCanvasPluginSettings> = {
   showEdgesIntoDisabledPortals: true
 }
 
-export default class AdvancedCanvasSettingsManager {
+export default class SettingsManager {
+  static SETTINGS_CHANGED_EVENT = 'advanced-canvas:settings-changed'
+
   private plugin: AdvancedCanvasPlugin
   private settings: AdvancedCanvasPluginSettings
   private settingsTab: AdvancedCanvasPluginSettingTab
@@ -89,6 +93,7 @@ export default class AdvancedCanvasSettingsManager {
 
   async loadSettings() {
     this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.plugin.loadData())
+    this.plugin.app.workspace.trigger(SettingsManager.SETTINGS_CHANGED_EVENT)
   }
 
   async saveSettings() {
@@ -102,6 +107,7 @@ export default class AdvancedCanvasSettingsManager {
   async setSetting(data: Partial<AdvancedCanvasPluginSettings>) {
     this.settings = Object.assign(this.settings, data)
     await this.saveSettings()
+    this.plugin.app.workspace.trigger(SettingsManager.SETTINGS_CHANGED_EVENT)
   }
 
   addSettingsTab() {
@@ -111,9 +117,9 @@ export default class AdvancedCanvasSettingsManager {
 }
 
 export class AdvancedCanvasPluginSettingTab extends PluginSettingTab {
-  settingsManager: AdvancedCanvasSettingsManager
+  settingsManager: SettingsManager
 
-  constructor(plugin: AdvancedCanvasPlugin, settingsManager: AdvancedCanvasSettingsManager) {
+  constructor(plugin: AdvancedCanvasPlugin, settingsManager: SettingsManager) {
     super(plugin.app, plugin)
     this.settingsManager = settingsManager
   }
@@ -248,6 +254,15 @@ export class AdvancedCanvasPluginSettingTab extends PluginSettingTab {
       'collapsibleGroupsFeatureEnabled'
     )
 
+    new Setting(containerEl)
+      .setName("Collapsed group preview on drag")
+      .setDesc("When enabled, a group that is collapsed show its border while dragging a node.")
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.settingsManager.getSetting('collapsedGroupPreviewOnDrag'))
+          .onChange(async (value) => await this.settingsManager.setSetting({ collapsedGroupPreviewOnDrag: value }))
+      )
+
     this.createFeatureHeading(
       containerEl,
       "Stickers",

src/styles/collapsible-groups.scss

@@ -21,7 +21,7 @@
   transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-[data-collapsible-groups-enabled] .canvas-node .canvas-group-label {
+.canvas-wrapper[data-collapsible-groups-feature-enabled="true"] .canvas-node .canvas-group-label {
   left: calc(40px * var(--zoom-multiplier));
 }
 
@@ -35,6 +35,17 @@
   }
 }
 
+.canvas-wrapper[data-collapsed-group-preview-on-drag="true"][data-is-dragging] .canvas-node[data-is-collapsed] .canvas-node-container {
+  display: block;
+  opacity: 0.5;
+
+  border-style: dashed;
+
+  .canvas-node-content {
+    background-color: transparent;
+  }
+}
+
 .canvas-node-interaction-layer[data-target-is-collapsed] {
   .canvas-node-resizer {
     pointer-events: none;

src/windows-manager.ts

@@ -3,33 +3,17 @@ import AdvancedCanvasPlugin from "./main"
 
 export default class WindowsManager {
   plugin: AdvancedCanvasPlugin
-  windows: Window[] = []
+  windows: Window[] = [window]
 
   constructor(plugin: AdvancedCanvasPlugin) {
     this.plugin = plugin
 
-    this.addWindow(window)
-
     this.plugin.registerEvent(this.plugin.app.workspace.on('window-open', 
-      (_win: WorkspaceWindow, window: Window) => this.addWindow(window)
+      (_win: WorkspaceWindow, window: Window) => this.windows.push(window)
     ))
 
     this.plugin.registerEvent(this.plugin.app.workspace.on('window-close', 
-      (_win: WorkspaceWindow, window: Window) => this.removeWindow(window)
+      (_win: WorkspaceWindow, window: Window) => this.windows = this.windows.filter((w) => w !== window)
     ))
   }
-
-  private addWindow(window: Window) {
-    this.windows.push(window)
-    this.plugin.app.workspace.trigger('advanced-canvas:window-open')
-
-    console.log('WindowsManager: window opened', window)
-  }
-
-  private removeWindow(window: Window) {
-    this.windows = this.windows.filter((w) => w !== window)
-    this.plugin.app.workspace.trigger('advanced-canvas:window-close')
-
-    console.log('WindowsManager: window closed', window)
-  }
 }