Skip to content

Commit 3d5c034

Browse files
Developer-MikeDeveloper-Mike
committed
Added node border styles
1 parent 9bf2110 commit 3d5c034

File tree

9 files changed

+209
-126
lines changed

9 files changed

+209
-126
lines changed

‎src/@types/Canvas.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,7 @@ export interface CanvasNodeData {
190190

191191
isSticker?: boolean
192192
shape?: string | null
193+
borderStyle?: string
193194

194195
isCollapsed?: boolean
195196
collapsedData?: CanvasData

‎src/canvas-extensions/edges-style-canvas-extension.ts‎ renamed to ‎src/canvas-extensions/edge-styles-canvas-extension.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const ROUTES_MENU_OPTIONS: CanvasHelper.MenuOption[] = [
5252
}
5353
]
5454

55-
export default class EdgesStyleCanvasExtension {
55+
export default class EdgeStylesCanvasExtension {
5656
plugin: AdvancedCanvasPlugin
5757

5858
constructor(plugin: AdvancedCanvasPlugin) {

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,12 @@ import SettingsManager from "src/settings"
66
export function getExposedNodeData(settings: SettingsManager): (keyof CanvasNodeData)[] {
77
const exposedData: (keyof CanvasNodeData)[] = []
88

9+
if (settings.getSetting('nodeStylingFeatureEnabled')) {
10+
if (settings.getSetting('shapesFeatureEnabled')) exposedData.push('shape')
11+
if (settings.getSetting('borderStyleFeatureEnabled')) exposedData.push('borderStyle')
12+
}
13+
914
if (settings.getSetting('stickersFeatureEnabled')) exposedData.push('isSticker')
10-
if (settings.getSetting('shapesFeatureEnabled')) exposedData.push('shape')
1115
if (settings.getSetting('collapsibleGroupsFeatureEnabled')) exposedData.push('isCollapsed')
1216
if (settings.getSetting('presentationFeatureEnabled')) exposedData.push('isStartNode')
1317
if (settings.getSetting('portalsFeatureEnabled')) exposedData.push('portalToFile', 'portalId')

‎src/canvas-extensions/node-styles-canvas-extension.ts‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import { Canvas } from "src/@types/Canvas"
2+
import AdvancedCanvasPlugin from "src/main"
3+
import * as CanvasHelper from "src/utils/canvas-helper"
4+
import { CanvasEvent } from "src/core/events"
5+
6+
const SHAPES_MENU_OPTIONS: CanvasHelper.MenuOption[] = [
7+
{
8+
label: 'Default',
9+
icon: 'circle-off'
10+
},
11+
{
12+
id: 'oval',
13+
label: 'Oval',
14+
icon: 'oval'
15+
},
16+
{
17+
id: 'centered-rectangle',
18+
label: 'Rectangle',
19+
icon: 'rectangle-horizontal'
20+
},
21+
{
22+
id: 'diamond',
23+
label: 'Diamond',
24+
icon: 'diamond'
25+
},
26+
{
27+
id: 'parallelogram',
28+
label: 'Parallelogram',
29+
icon: 'parallelogram'
30+
},
31+
{
32+
id: 'circle',
33+
label: 'Circle',
34+
icon: 'circle'
35+
},
36+
{
37+
id: 'predefined-process',
38+
label: 'Predefined process',
39+
icon: 'predefined-process'
40+
},
41+
{
42+
id: 'document',
43+
label: 'Document',
44+
icon: 'document'
45+
},
46+
{
47+
id: 'database',
48+
label: 'Database',
49+
icon: 'database-shape'
50+
}
51+
]
52+
53+
const BORDER_STYLES_MENU_OPTIONS: CanvasHelper.MenuOption[] = [
54+
{
55+
label: 'Solid',
56+
icon: 'square'
57+
},
58+
{
59+
id: 'dashed',
60+
label: 'Dashed',
61+
icon: 'box-select'
62+
},
63+
{
64+
id: 'dotted',
65+
label: 'Dotted',
66+
icon: 'dot'
67+
},
68+
{
69+
id: 'invisible',
70+
label: 'Invisible',
71+
icon: 'eye-off'
72+
}
73+
]
74+
75+
export default class NodeStylesCanvasExtension {
76+
plugin: AdvancedCanvasPlugin
77+
78+
constructor(plugin: AdvancedCanvasPlugin) {
79+
this.plugin = plugin
80+
81+
if (!this.plugin.settings.getSetting('nodeStylingFeatureEnabled')) return
82+
83+
this.plugin.registerEvent(this.plugin.app.workspace.on(
84+
CanvasEvent.PopupMenuCreated,
85+
(canvas: Canvas) => this.onPopupMenuCreated(canvas)
86+
))
87+
}
88+
89+
onPopupMenuCreated(canvas: Canvas): void {
90+
// If the canvas is readonly or there is no valid shape in the selection, return
91+
if (canvas.readonly || !this.hasValidNodeInSelection(canvas))
92+
return
93+
94+
// Add shapes menu option
95+
if (this.plugin.settings.getSetting('shapesFeatureEnabled')) {
96+
const menuOption = CanvasHelper.createExpandablePopupMenuOption({
97+
id: 'node-shape-option',
98+
label: 'Node shape',
99+
icon: 'shapes'
100+
}, SHAPES_MENU_OPTIONS.map((shape) => ({
101+
...shape,
102+
callback: () => this.setShapeForSelection(canvas, shape.id)
103+
})))
104+
105+
// Add menu option to menu bar
106+
CanvasHelper.addPopupMenuOption(canvas, menuOption)
107+
}
108+
109+
// Add border styles menu option
110+
if (this.plugin.settings.getSetting('borderStyleFeatureEnabled')) {
111+
const menuOption = CanvasHelper.createExpandablePopupMenuOption({
112+
id: 'node-border-style-option',
113+
label: 'Border style',
114+
icon: 'box-select'
115+
}, BORDER_STYLES_MENU_OPTIONS.map((borderStyle) => ({
116+
...borderStyle,
117+
callback: () => this.setBorderStyleForSelection(canvas, borderStyle.id)
118+
})))
119+
120+
// Add menu option to menu bar
121+
CanvasHelper.addPopupMenuOption(canvas, menuOption)
122+
}
123+
}
124+
125+
private hasValidNodeInSelection(canvas: Canvas): boolean {
126+
const selectedNodesData = canvas.getSelectionData().nodes
127+
128+
for (const nodeData of selectedNodesData) {
129+
if (nodeData.type === 'text') return true
130+
}
131+
132+
return false
133+
}
134+
135+
private setShapeForSelection(canvas: Canvas, shapeId: string | undefined) {
136+
const selectedNodesData = canvas.getSelectionData().nodes
137+
138+
for (const nodeData of selectedNodesData) {
139+
if (nodeData.type !== 'text') continue
140+
141+
const node = canvas.nodes.get(nodeData.id)
142+
if (!node) continue
143+
144+
node.setData({ ...nodeData, shape: shapeId })
145+
}
146+
}
147+
148+
private setBorderStyleForSelection(canvas: Canvas, borderId: string | undefined) {
149+
const selectedNodesData = canvas.getSelectionData().nodes
150+
151+
for (const nodeData of selectedNodesData) {
152+
const node = canvas.nodes.get(nodeData.id)
153+
if (!node) continue
154+
155+
node.setData({ ...nodeData, borderStyle: borderId })
156+
}
157+
}
158+
}

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

Lines changed: 0 additions & 116 deletions
This file was deleted.

‎src/main.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ItemView, Plugin } from 'obsidian'
22
import SettingsManager from './settings'
3-
import ShapesCanvasExtension from './canvas-extensions/shapes-canvas-extension'
3+
import NodeStylesCanvasExtension from './canvas-extensions/node-styles-canvas-extension'
44
import { Canvas, CanvasView } from './@types/Canvas'
55
import CanvasPatcher from './core/canvas-patcher'
66
import GroupCanvasExtension from './canvas-extensions/group-canvas-extension'
@@ -13,7 +13,7 @@ import CommandsCanvasExtension from './canvas-extensions/commands-canvas-extensi
1313
import PortalsCanvasExtension from './canvas-extensions/portals-canvas-extension'
1414
import IconsHelper from './utils/icons-helper'
1515
import StickersCanvasExtension from './canvas-extensions/stickers-canvas-extension'
16-
import EdgesStyleCanvasExtension from './canvas-extensions/edges-style-canvas-extension'
16+
import EdgeStylesCanvasExtension from './canvas-extensions/edge-styles-canvas-extension'
1717
import EdgeDataTaggerCanvasExtension from './canvas-extensions/edge-data-tagger-canvas-extension'
1818
import DebugHelper from './utils/debug-helper'
1919
import BetterDefaultSettingsCanvasExtension from './canvas-extensions/better-default-settings-canvas-extension'
@@ -37,8 +37,8 @@ const CANVAS_EXTENSIONS: any[] = [
3737
EncapsulateCanvasExtension,
3838
ColorPaletteCanvasExtension,
3939
StickersCanvasExtension,
40-
ShapesCanvasExtension,
41-
EdgesStyleCanvasExtension,
40+
NodeStylesCanvasExtension,
41+
EdgeStylesCanvasExtension,
4242
PresentationCanvasExtension,
4343
PortalsCanvasExtension
4444
]

‎src/settings.ts‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ export interface AdvancedCanvasPluginSettings {
1313
defaultFileNodeWidth: number
1414
defaultFileNodeHeight: number
1515

16+
nodeStylingFeatureEnabled: boolean
1617
shapesFeatureEnabled: boolean
18+
borderStyleFeatureEnabled: boolean
1719

1820
edgesStylingFeatureEnabled: boolean
1921
edgeStylePathfinderGridResolution: number
@@ -77,7 +79,9 @@ export const DEFAULT_SETTINGS: Partial<AdvancedCanvasPluginSettings> = {
7779
collapsibleGroupsFeatureEnabled: true,
7880
collapsedGroupPreviewOnDrag: true,
7981

82+
nodeStylingFeatureEnabled: true,
8083
stickersFeatureEnabled: true,
84+
borderStyleFeatureEnabled: true,
8185

8286
presentationFeatureEnabled: true,
8387
defaultSlideSize: '1200x675',
@@ -194,11 +198,29 @@ export class AdvancedCanvasPluginSettingTab extends PluginSettingTab {
194198

195199
this.createFeatureHeading(
196200
containerEl,
197-
"Shapes",
198-
"Shape your nodes for creating e.g. mind maps or flow charts.",
199-
'shapesFeatureEnabled'
201+
"Node styling",
202+
"Style your nodes with different shapes and borders.",
203+
'nodeStylingFeatureEnabled'
200204
)
201205

206+
new Setting(containerEl)
207+
.setName("Node Shapes")
208+
.setDesc("Shape your nodes for creating e.g. mind maps or flow charts.")
209+
.addToggle((toggle) =>
210+
toggle
211+
.setValue(this.settingsManager.getSetting('shapesFeatureEnabled'))
212+
.onChange(async (value) => await this.settingsManager.setSetting({ shapesFeatureEnabled: value }))
213+
)
214+
215+
new Setting(containerEl)
216+
.setName("Border styles")
217+
.setDesc("Style your nodes with different border styles.")
218+
.addToggle((toggle) =>
219+
toggle
220+
.setValue(this.settingsManager.getSetting('borderStyleFeatureEnabled'))
221+
.onChange(async (value) => await this.settingsManager.setSetting({ borderStyleFeatureEnabled: value }))
222+
)
223+
202224
this.createFeatureHeading(
203225
containerEl,
204226
"Edges styling",

‎src/styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use "styles/settings";
22
@use "styles/menu";
33
@use "styles/stickers";
4-
@use "styles/shapes";
4+
@use "styles/node-styles";
55
@use "styles/edge-styles";
66
@use "styles/collapsible-groups";
77
@use "styles/presentation";

0 commit comments

Comments
 (0)