Merge branch 'beta'

Author: Developer-Mike

src/@types/Canvas.d.ts

@@ -170,6 +170,8 @@ export interface CanvasElement {
   initialize(): void
   setColor(color: string): void
 
+  getBBox(): BBox
+  
   getData(): CanvasNodeData | CanvasEdgeData
   setData(data: CanvasNodeData | CanvasEdgeData): void
 }
@@ -188,6 +190,8 @@ export interface CanvasNodeData {
   collapsedData?: CanvasData
 
   isStartNode?: boolean
+  sideRatio?: number
+
   edgesToNodeFromPortal?: { [key: string]: CanvasEdgeData[] }
 
   // Portal node
@@ -207,7 +211,6 @@ export interface CanvasNodeData {
 
 export interface CanvasNode extends CanvasElement {
   nodeEl: HTMLElement
-  getBBox(): BBox
 
   labelEl?: HTMLElement
   file?: TFile

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

@@ -1,5 +1,5 @@
-import { Notice } from 'obsidian'
-import { Canvas, CanvasEdge, CanvasNode, Position, Size } from 'src/@types/Canvas'
+import { Menu, Notice } from 'obsidian'
+import { BBox, Canvas, CanvasEdge, CanvasElement, CanvasNode, Position, Size } from 'src/@types/Canvas'
 import AdvancedCanvasPlugin from 'src/main'
 import { CanvasEvent } from 'src/events/events'
 import * as CanvasHelper from "src/utils/canvas-helper"
@@ -19,6 +19,23 @@ export default class PresentationCanvasExtension {
 
     if (!this.plugin.settings.getSetting('presentationFeatureEnabled')) return
 
+    /* Add wrap in slide option to context menu */
+    this.plugin.registerEvent(this.plugin.app.workspace.on(
+      'canvas:selection-menu',
+      (menu: Menu, canvas: Canvas) => {
+        menu.addItem((item) =>
+          item
+            .setTitle('Wrap in slide')
+            .setIcon('gallery-vertical')
+            .onClick(() => this.addSlide(canvas, undefined, 
+              BBoxHelper.enlargeBBox(BBoxHelper.combineBBoxes(
+                [...canvas.selection.values()].map((element: CanvasElement) => element.getBBox())
+              ), this.plugin.settings.getSetting('wrapInSlidePadding'))
+            ))
+        )
+      }
+    ))
+
     this.plugin.addCommand({
 			id: 'create-new-slide',
 			name: 'Create new slide',
@@ -69,6 +86,11 @@ export default class PresentationCanvasExtension {
       CanvasEvent.PopupMenuCreated,
       (canvas: Canvas) => this.onPopupMenuCreated(canvas)
     ))
+
+    this.plugin.registerEvent(this.plugin.app.workspace.on(
+      CanvasEvent.NodeMoved,
+      (canvas: Canvas, node: CanvasNode) => this.onNodeMoved(canvas, node)
+    ))
   }
 
   onCanvasChanged(canvas: Canvas): void {
@@ -81,7 +103,7 @@ export default class PresentationCanvasExtension {
           label: 'Drag to add slide',
           icon: 'gallery-vertical'
         },
-        () => this.getSlideSize(),
+        () => this.getDefaultSlideSize(),
         (canvas: Canvas, pos: Position) => this.addSlide(canvas, pos)
       )
     )
@@ -105,6 +127,28 @@ export default class PresentationCanvasExtension {
       })
     )
   }
+
+  private onNodeMoved(_canvas: Canvas, node: CanvasNode) {
+    const nodeData = node.getData()
+    if (!nodeData.sideRatio) return
+
+    const nodeBBox = node.getBBox()
+    const nodeSize = {
+      width: nodeBBox.maxX - nodeBBox.minX,
+      height: nodeBBox.maxY - nodeBBox.minY
+    }
+    const nodeAspectRatio = nodeSize.width / nodeSize.height
+
+    if (nodeAspectRatio < nodeData.sideRatio)
+      nodeSize.width = nodeSize.height * nodeData.sideRatio
+    else nodeSize.height = nodeSize.width / nodeData.sideRatio
+
+    node.setData({
+      ...nodeData,
+      width: nodeSize.width,
+      height: nodeSize.height
+    })
+  }
 
   private getStartNode(canvas: Canvas): CanvasNode|undefined {
     for (const [_, node] of canvas.nodes) {
@@ -123,26 +167,56 @@ export default class PresentationCanvasExtension {
     if (node !== startNode) node.setData({ ...node.getData(), isStartNode: true })
   }
 
-  private getSlideSize(): Size {
+  private getDefaultSlideSize(): Size {
     const slideSizeString = this.plugin.settings.getSetting('defaultSlideSize')
     const slideSizeArray = slideSizeString.split('x').map((value: string) => parseInt(value))
     return { width: slideSizeArray[0], height: slideSizeArray[1] }
   }
 
-  private addSlide(canvas: Canvas, pos?: Position) {
-    if (!pos) pos = CanvasHelper.getCenterCoordinates(canvas, this.getSlideSize())
+  private getSlideAspectRatio(): number {
+    const slideSize = this.getDefaultSlideSize()
+    return slideSize.width / slideSize.height
+  }
 
+  private addSlide(canvas: Canvas, pos?: Position, bbox?: BBox) {
     const isStartNode = this.getStartNode(canvas) == null
-    const nodeSize = this.getSlideSize()
+    const slideSize = this.getDefaultSlideSize()
+    const slideAspectRatio = this.getSlideAspectRatio()
+
+    if (bbox) {
+      const bboxWidth = bbox.maxX - bbox.minX
+      const bboxHeight = bbox.maxY - bbox.minY
+
+      // Make sure the nodes fit inside the bounding box while keeping the aspect ratio
+      if (bboxWidth / bboxHeight > slideAspectRatio) {
+        slideSize.width = bboxWidth
+        slideSize.height = bboxWidth / slideAspectRatio
+      } else {
+        slideSize.height = bboxHeight
+        slideSize.width = bboxHeight * slideAspectRatio
+      }
+      
+      pos = { 
+        x: bbox.minX,
+        y: bbox.minY
+      }
+    }
+
+    // If no position is provided, use the center of the canvas
+    if (!pos) pos = CanvasHelper.getCenterCoordinates(canvas, this.getDefaultSlideSize())
 
     const groupNode = canvas.createGroupNode({
       pos: pos,
-      size: nodeSize,
+      size: slideSize,
       label: isStartNode ? START_SLIDE_NAME : DEFAULT_SLIDE_NAME,
       focus: false,
     })
 
-    if (isStartNode) groupNode.setData({ ...groupNode.getData(), isStartNode: true })
+    groupNode.setData({ 
+      ...groupNode.getData(), 
+      sideRatio: slideAspectRatio,
+      isStartNode: isStartNode ? true : undefined,
+    })
   }
 
   private async animateNodeTransition(canvas: Canvas, fromNode: CanvasNode|undefined, toNode: CanvasNode) {

src/settings.ts

@@ -6,10 +6,10 @@ const NODE_TYPES_ON_DOUBLE_CLICK = {
   'file': 'File'
 }
 
-const SLIDE_SIZE_OPTIONS = {
+/*const SLIDE_SIZE_OPTIONS = {
   '1200x675': '16:9',
   '1350x900': '3:2',
-}
+}*/
 
 export interface AdvancedCanvasPluginSettings {
   nodeTypeOnDoubleClick: string
@@ -42,6 +42,7 @@ export interface AdvancedCanvasPluginSettings {
 
   presentationFeatureEnabled: boolean
   defaultSlideSize: string
+  wrapInSlidePadding: number
   useArrowKeysToChangeSlides: boolean
   zoomToSlideWithoutPadding: boolean
   slideTransitionAnimationDuration: number
@@ -70,8 +71,8 @@ export const DEFAULT_SETTINGS: Partial<AdvancedCanvasPluginSettings> = {
 
   commandsFeatureEnabled: true,
   zoomToClonedNode: true,
-  cloneNodeMargin: 25,
-  expandNodeStepSize: 25,
+  cloneNodeMargin: 20,
+  expandNodeStepSize: 20,
 
   betterReadonlyEnabled: true,
   disableNodePopup: false,
@@ -84,7 +85,8 @@ export const DEFAULT_SETTINGS: Partial<AdvancedCanvasPluginSettings> = {
   stickersFeatureEnabled: true,
 
   presentationFeatureEnabled: true,
-  defaultSlideSize: Object.keys(SLIDE_SIZE_OPTIONS).first(),
+  defaultSlideSize: '1200x675',
+  wrapInSlidePadding: 20,
   useArrowKeysToChangeSlides: true,
   zoomToSlideWithoutPadding: true,
   slideTransitionAnimationDuration: 0.5,
@@ -346,13 +348,21 @@ export class AdvancedCanvasPluginSettingTab extends PluginSettingTab {
 
     new Setting(containerEl)
       .setName("Default slide ratio")
-      .setDesc("The default ratio of the slide.")
-      .addDropdown((dropdown) =>
-        dropdown
-          .addOptions(SLIDE_SIZE_OPTIONS)
+      .setDesc("The default ratio of the slide. For example, 16:9 is 1200x675 and 3:2 is 1350x900.")
+      .addText((text) =>
+        text
           .setValue(this.settingsManager.getSetting('defaultSlideSize'))
-          .onChange(async (value) => await this.settingsManager.setSetting({ defaultSlideSize: value }))
-        )
+          .onChange(async (value) => await this.settingsManager.setSetting({ defaultSlideSize: value.replace(' ', '') }))
+      )
+
+    new Setting(containerEl)
+      .setName("Wrap in slide padding")
+      .setDesc("The padding of the slide when wrapping the canvas in a slide.")
+      .addText((text) =>
+        text
+          .setValue(this.settingsManager.getSetting('wrapInSlidePadding').toString())
+          .onChange(async (value) => await this.settingsManager.setSetting({ wrapInSlidePadding: parseInt(value) }))
+      )
 
     new Setting(containerEl)
       .setName("Use arrow keys to change slides")

src/utils/bbox-helper.ts

@@ -1,5 +1,21 @@
 import { BBox, CanvasNodeData, Position, Side } from "src/@types/Canvas"
 
+export function combineBBoxes(bboxes: BBox[]): BBox {
+  let minX = Infinity
+  let minY = Infinity
+  let maxX = -Infinity
+  let maxY = -Infinity
+
+  for (let bbox of bboxes) {
+    minX = Math.min(minX, bbox.minX)
+    minY = Math.min(minY, bbox.minY)
+    maxX = Math.max(maxX, bbox.maxX)
+    maxY = Math.max(maxY, bbox.maxY)
+  }
+
+  return { minX, minY, maxX, maxY }
+}
+
 export function scaleBBox(bbox: BBox, scale: number): BBox {
   let diffX = (scale - 1) * (bbox.maxX - bbox.minX)
   let diffY = (scale - 1) * (bbox.maxY - bbox.minY)