json-canvas-viewer 4.1.1 → 4.2.1

package/dist/kernel/StyleManager.js

@@ -1,2 +1,2 @@
-import{BaseModule as e}from"./BaseModule.js";import t from"./utilities.js";import n from"./DataManager.js";import{parseHex as r,parseHsl as i,parseRgb as a,rgbToHsl as o,toHslString as s}from"@ahmedsemih/color-fns";var c=class extends e{theme=`light`;onChangeTheme=t.makeHook();definedColors={light:{0:{hue:0,saturation:0,lightness:72},1:{hue:358,saturation:81,lightness:55},2:{hue:19,saturation:87,lightness:58},3:{hue:41,saturation:79,lightness:52},4:{hue:150,saturation:100,lightness:37},5:{hue:221,saturation:100,lightness:59},6:{hue:257,saturation:81,lightness:62}},dark:{0:{hue:0,saturation:0,lightness:40},1:{hue:358,saturation:100,lightness:65},2:{hue:23,saturation:86,lightness:63},3:{hue:39,saturation:91,lightness:70},4:{hue:153,saturation:80,lightness:45},5:{hue:217,saturation:100,lightness:62},6:{hue:259,saturation:100,lightness:75}}};namedColors={light:{dots:`hsla(0, 0%, 72%, 0.4)`,text:`rgb(30, 30, 30)`,background:`rgb(250, 250, 250)`,"background-secondary":`rgb(255, 255, 255)`,shadow:`0px 0px 8px rgb(0, 0, 0, 0.1)`,border:`hsla(0, 0%, 82%, 0.7)`},dark:{dots:`hsla(0, 0%, 40%, 0.3)`,text:`rgb(242, 242, 242)`,background:`rgb(30, 30, 30)`,"background-secondary":`rgb(37, 37, 40)`,shadow:`0px 0px 8px rgb(0, 0, 0, 0.2)`,border:`hsla(0, 0%, 30%, 0.7)`}};colorCache={dark:{},light:{}};constructor(...e){super(...e);let t=this.options.colors;t&&[`light`,`dark`].forEach(e=>{if(!(e in t))return;let n=t[e];n&&Object.entries(n).forEach(([t,n])=>{if(!n)return;let r=this.namedColors[e],i=this.definedColors[e];if(t in r)r[t]=n;else if(t in i){let e=this.parseColor(n);if(!e){console.warn(`[JSON Canvas Viewer] Color ${n} unsupported.`);return}i[t]=e}})}),this.changeTheme(this.options.theme??`light`),this.augment({changeTheme:this.changeTheme,onChangeTheme:this.onChangeTheme})}hslProcessor=e=>{let{hue:t,saturation:n,lightness:r}=e,i;return i=this.theme===`dark`?{active:e,card:{hue:t,saturation:n/3,lightness:r/3},border:{...e,alpha:.7},background:{...e,alpha:.1},text:e.lightness>=70?`rgb(30, 30, 30)`:`rgb(242, 242, 242)`}:{active:e,card:t===0?{hue:t,saturation:n,lightness:100}:{hue:t,saturation:n*.4,lightness:90},border:{...e,alpha:.7},background:{...e,alpha:.1},text:e.lightness>=70?`rgb(30, 30, 30)`:`rgb(242, 242, 242)`},{active:s(i.active),card:s(i.card),border:s(i.border),background:s(i.background),text:i.text}};parseColor=e=>{if(e.startsWith(`rgb`))return o(a(e));if(e.startsWith(`#`))return o(r(e));if(e.startsWith(`hsl`))return i(e)};getColor=(e=`0`)=>{let t=this.theme,n;if(this.colorCache[t][e])return this.colorCache[t][e];n=e in this.definedColors[t]?this.hslProcessor(this.definedColors[t][e]):this.hslProcessor(o(r(e)));let i={...n,"border-width":e===`0`?`1px`:`2px`};return this.colorCache[t][e]=i,i};getNamedColor=e=>this.namedColors[this.theme][e];changeTheme=e=>{this.theme=e||(this.theme===`dark`?`light`:`dark`);let t=this.container.get(n).data.container;Object.entries(this.namedColors[this.theme]).forEach(([e,n])=>{t.style.setProperty(`--${e}`,n)}),this.onChangeTheme(this.theme)}};export{c as default};
+import{BaseModule as e}from"./BaseModule.js";import{makeHook as t}from"./utilities.js";import n from"./DataManager.js";import{parseHex as r,parseHsl as i,parseRgb as a,rgbToHsl as o,toHslString as s}from"@ahmedsemih/color-fns";var c=class extends e{theme=`light`;onChangeTheme=t();definedColors={dark:{0:{hue:0,lightness:40,saturation:0},1:{hue:358,lightness:65,saturation:100},2:{hue:23,lightness:63,saturation:86},3:{hue:39,lightness:70,saturation:91},4:{hue:153,lightness:45,saturation:80},5:{hue:217,lightness:62,saturation:100},6:{hue:259,lightness:75,saturation:100}},light:{0:{hue:0,lightness:72,saturation:0},1:{hue:358,lightness:55,saturation:81},2:{hue:19,lightness:58,saturation:87},3:{hue:41,lightness:52,saturation:79},4:{hue:150,lightness:37,saturation:100},5:{hue:221,lightness:59,saturation:100},6:{hue:257,lightness:62,saturation:81}}};namedColors={dark:{background:`rgb(30, 30, 30)`,"background-secondary":`rgb(37, 37, 40)`,border:`hsla(0, 0%, 30%, 0.7)`,dots:`hsla(0, 0%, 40%, 0.3)`,shadow:`0px 0px 8px rgb(0, 0, 0, 0.2)`,text:`rgb(242, 242, 242)`},light:{background:`rgb(250, 250, 250)`,"background-secondary":`rgb(255, 255, 255)`,border:`hsla(0, 0%, 82%, 0.7)`,dots:`hsla(0, 0%, 72%, 0.4)`,shadow:`0px 0px 8px rgb(0, 0, 0, 0.1)`,text:`rgb(30, 30, 30)`}};colorCache={dark:{},light:{}};constructor(...e){super(...e);let t=this.options.colors;t&&[`light`,`dark`].forEach(e=>{if(!(e in t))return;let n=t[e];n&&Object.entries(n).forEach(([t,n])=>{if(!n)return;let r=this.namedColors[e],i=this.definedColors[e];if(t in r)r[t]=n;else if(t in i){let e=this.parseColor(n);if(!e){console.warn(`[JSON Canvas Viewer] Color ${n} unsupported.`);return}i[t]=e}})}),this.changeTheme(this.options.theme??`light`),this.augment({changeTheme:this.changeTheme,onChangeTheme:this.onChangeTheme})}hslProcessor=e=>{let{hue:t,saturation:n,lightness:r}=e,i=this.theme===`dark`?{active:e,background:{...e,alpha:.1},border:{...e,alpha:.7},card:{hue:t,lightness:r/3,saturation:n/3},text:e.lightness>=70?`rgb(30, 30, 30)`:`rgb(242, 242, 242)`}:{active:e,background:{...e,alpha:.1},border:{...e,alpha:.7},card:t===0?{hue:t,lightness:100,saturation:n}:{hue:t,lightness:90,saturation:n*.4},text:e.lightness>=70?`rgb(30, 30, 30)`:`rgb(242, 242, 242)`};return{active:s(i.active),background:s(i.background),border:s(i.border),card:s(i.card),text:i.text}};parseColor=e=>{if(e.startsWith(`rgb`))return o(a(e));if(e.startsWith(`#`))return o(r(e));if(e.startsWith(`hsl`))return i(e)};getColor=(e=`0`)=>{let t=this.theme,n;if(this.colorCache[t][e])return this.colorCache[t][e];n=e in this.definedColors[t]?this.hslProcessor(this.definedColors[t][e]):this.hslProcessor(o(r(e)));let i={...n,"border-width":e===`0`?`1px`:`2px`};return this.colorCache[t][e]=i,i};getNamedColor=e=>this.namedColors[this.theme][e];changeTheme=e=>{this.theme=e??(this.theme===`dark`?`light`:`dark`);let t=this.container.get(n).data.container;Object.entries(this.namedColors[this.theme]).forEach(([e,n])=>{t.style.setProperty(`--${e}`,n)}),this.onChangeTheme(this.theme)}};export{c as default};
 //# sourceMappingURL=StyleManager.js.map

package/dist/kernel/StyleManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyleManager.js","names":["utilities"],"sources":["../../src/kernel/StyleManager.ts"],"sourcesContent":["import type { BaseOptions } from '$';\nimport { BaseModule, type BaseArgs } from '$/BaseModule';\nimport DataManager from '$/DataManager';\nimport utilities from '$/utilities';\nimport {\n\tparseHex,\n\ttoHslString,\n\ttype HslColor,\n\trgbToHsl,\n\tparseHsl,\n\tparseRgb,\n} from '@ahmedsemih/color-fns';\n\ninterface Color {\n\tborder: string;\n\tbackground: string;\n\tactive: string;\n\ttext: string;\n\tcard: string;\n}\n\nexport interface WithBorderWidth extends Color {\n\t'border-width': string;\n}\n\ntype ColorOptions = {\n\t[K in keyof (StyleManager['definedColors']['light'] &\n\t\tStyleManager['namedColors']['light'])]?: string;\n};\n\ninterface Options extends BaseOptions {\n\ttheme?: 'dark' | 'light';\n\tcolors?: {\n\t\tlight?: ColorOptions;\n\t\tdark?: ColorOptions;\n\t};\n}\n\ninterface Augmentation {\n\tchangeTheme: StyleManager['changeTheme'];\n\tonChangeTheme: StyleManager['onChangeTheme'];\n}\n\nexport default class StyleManager extends BaseModule<Options, Augmentation> {\n\ttheme: 'dark' | 'light' = 'light';\n\tonChangeTheme = utilities.makeHook<['light' | 'dark']>();\n\tdefinedColors = {\n\t\tlight: {\n\t\t\t'0': { hue: 0, saturation: 0, lightness: 72 },\n\t\t\t'1': { hue: 358, saturation: 81, lightness: 55 },\n\t\t\t'2': { hue: 19, saturation: 87, lightness: 58 },\n\t\t\t'3': { hue: 41, saturation: 79, lightness: 52 },\n\t\t\t'4': { hue: 150, saturation: 100, lightness: 37 },\n\t\t\t'5': { hue: 221, saturation: 100, lightness: 59 },\n\t\t\t'6': { hue: 257, saturation: 81, lightness: 62 },\n\t\t},\n\t\tdark: {\n\t\t\t'0': { hue: 0, saturation: 0, lightness: 40 },\n\t\t\t'1': { hue: 358, saturation: 100, lightness: 65 },\n\t\t\t'2': { hue: 23, saturation: 86, lightness: 63 },\n\t\t\t'3': { hue: 39, saturation: 91, lightness: 70 },\n\t\t\t'4': { hue: 153, saturation: 80, lightness: 45 },\n\t\t\t'5': { hue: 217, saturation: 100, lightness: 62 },\n\t\t\t'6': { hue: 259, saturation: 100, lightness: 75 },\n\t\t},\n\t};\n\n\tnamedColors = {\n\t\tlight: {\n\t\t\tdots: 'hsla(0, 0%, 72%, 0.4)',\n\t\t\ttext: 'rgb(30, 30, 30)',\n\t\t\tbackground: 'rgb(250, 250, 250)',\n\t\t\t'background-secondary': 'rgb(255, 255, 255)',\n\t\t\tshadow: '0px 0px 8px rgb(0, 0, 0, 0.1)',\n\t\t\tborder: 'hsla(0, 0%, 82%, 0.7)',\n\t\t},\n\t\tdark: {\n\t\t\tdots: 'hsla(0, 0%, 40%, 0.3)',\n\t\t\ttext: 'rgb(242, 242, 242)',\n\t\t\tbackground: 'rgb(30, 30, 30)',\n\t\t\t'background-secondary': 'rgb(37, 37, 40)',\n\t\t\tshadow: '0px 0px 8px rgb(0, 0, 0, 0.2)',\n\t\t\tborder: 'hsla(0, 0%, 30%, 0.7)',\n\t\t},\n\t};\n\n\tprivate colorCache: {\n\t\tdark: {\n\t\t\t[key: string]: WithBorderWidth;\n\t\t};\n\t\tlight: {\n\t\t\t[key: string]: WithBorderWidth;\n\t\t};\n\t} = {\n\t\tdark: {},\n\t\tlight: {},\n\t};\n\n\tconstructor(...args: BaseArgs) {\n\t\tsuper(...args);\n\n\t\t// user-defined color merging\n\t\tconst colors = this.options.colors;\n\t\tif (colors) {\n\t\t\tconst themes = ['light', 'dark'] as const;\n\t\t\tthemes.forEach((theme) => {\n\t\t\t\tif (!(theme in colors)) return;\n\t\t\t\tconst colorObject = colors[theme];\n\t\t\t\tif (!colorObject) return;\n\t\t\t\tObject.entries(colorObject).forEach(([key, value]) => {\n\t\t\t\t\tif (!value) return;\n\t\t\t\t\tconst namedColorsDict = this.namedColors[theme];\n\t\t\t\t\tconst definedColorsDict = this.definedColors[theme];\n\t\t\t\t\tif (key in namedColorsDict)\n\t\t\t\t\t\tnamedColorsDict[key as keyof typeof namedColorsDict] = value;\n\t\t\t\t\telse if (key in definedColorsDict) {\n\t\t\t\t\t\tconst color = this.parseColor(value);\n\t\t\t\t\t\tif (!color) {\n\t\t\t\t\t\t\tconsole.warn(`[JSON Canvas Viewer] Color ${value} unsupported.`);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdefinedColorsDict[key as keyof typeof definedColorsDict] = color;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\n\t\tthis.changeTheme(this.options.theme ?? 'light');\n\t\tthis.augment({\n\t\t\tchangeTheme: this.changeTheme,\n\t\t\tonChangeTheme: this.onChangeTheme,\n\t\t});\n\t}\n\n\tprivate hslProcessor = (color: HslColor) => {\n\t\tconst { hue, saturation, lightness } = color;\n\t\tlet result;\n\t\tif (this.theme === 'dark') {\n\t\t\tresult = {\n\t\t\t\tactive: color,\n\t\t\t\tcard: { hue, saturation: saturation / 3, lightness: lightness / 3 },\n\t\t\t\tborder: { ...color, alpha: 0.7 },\n\t\t\t\tbackground: { ...color, alpha: 0.1 },\n\t\t\t\ttext: color.lightness >= 70 ? 'rgb(30, 30, 30)' : 'rgb(242, 242, 242)',\n\t\t\t};\n\t\t} else {\n\t\t\tresult = {\n\t\t\t\tactive: color,\n\t\t\t\tcard:\n\t\t\t\t\thue === 0\n\t\t\t\t\t\t? { hue, saturation, lightness: 100 }\n\t\t\t\t\t\t: { hue, saturation: saturation * 0.4, lightness: 90 },\n\t\t\t\tborder: { ...color, alpha: 0.7 },\n\t\t\t\tbackground: { ...color, alpha: 0.1 },\n\t\t\t\ttext: color.lightness >= 70 ? 'rgb(30, 30, 30)' : 'rgb(242, 242, 242)',\n\t\t\t};\n\t\t}\n\t\treturn {\n\t\t\tactive: toHslString(result.active),\n\t\t\tcard: toHslString(result.card),\n\t\t\tborder: toHslString(result.border),\n\t\t\tbackground: toHslString(result.background),\n\t\t\ttext: result.text,\n\t\t};\n\t};\n\n\tprivate parseColor = (color: string) => {\n\t\tif (color.startsWith('rgb')) return rgbToHsl(parseRgb(color));\n\t\tif (color.startsWith('#')) return rgbToHsl(parseHex(color));\n\t\tif (color.startsWith('hsl')) return parseHsl(color);\n\t};\n\n\tgetColor = (colorIndex: string = '0') => {\n\t\tconst theme = this.theme;\n\t\tlet color: Color;\n\t\tif (this.colorCache[theme][colorIndex]) return this.colorCache[theme][colorIndex];\n\t\telse if (colorIndex in this.definedColors[theme])\n\t\t\tcolor = this.hslProcessor(\n\t\t\t\tthis.definedColors[theme][colorIndex as keyof typeof this.definedColors.dark],\n\t\t\t);\n\t\telse color = this.hslProcessor(rgbToHsl(parseHex(colorIndex)));\n\t\tconst withBorderWidth: WithBorderWidth = {\n\t\t\t...color,\n\t\t\t'border-width': colorIndex === '0' ? '1px' : '2px',\n\t\t};\n\t\tthis.colorCache[theme][colorIndex] = withBorderWidth;\n\t\treturn withBorderWidth;\n\t};\n\n\tgetNamedColor = (name: keyof typeof this.namedColors.light) =>\n\t\tthis.namedColors[this.theme][name];\n\n\tchangeTheme = (theme?: 'dark' | 'light') => {\n\t\tthis.theme = theme ? theme : this.theme === 'dark' ? 'light' : 'dark';\n\t\tconst container = this.container.get(DataManager).data.container;\n\t\tObject.entries(this.namedColors[this.theme]).forEach(([key, value]) => {\n\t\t\tcontainer.style.setProperty(`--${key}`, value);\n\t\t});\n\t\tthis.onChangeTheme(this.theme);\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"file":"StyleManager.js","names":[],"sources":["../../src/kernel/StyleManager.ts"],"sourcesContent":["import type { BaseOptions } from '$';\nimport type { BaseArgs } from '$/BaseModule';\nimport type { HslColor } from '@ahmedsemih/color-fns';\nimport { BaseModule } from '$/BaseModule';\nimport DataManager from '$/DataManager';\nimport { makeHook } from '$/utilities';\nimport { parseHex, toHslString, rgbToHsl, parseHsl, parseRgb } from '@ahmedsemih/color-fns';\n\ntype Color = {\n\tborder: string;\n\tbackground: string;\n\tactive: string;\n\ttext: string;\n\tcard: string;\n};\n\nexport type WithBorderWidth = {\n\t'border-width': string;\n} & Color;\n\ntype ColorOptions = {\n\t[K in keyof (StyleManager['definedColors']['light'] &\n\t\tStyleManager['namedColors']['light'])]?: string;\n};\n\ntype Options = {\n\ttheme?: 'dark' | 'light';\n\tcolors?: {\n\t\tlight?: ColorOptions;\n\t\tdark?: ColorOptions;\n\t};\n} & BaseOptions;\n\ntype Augmentation = {\n\tchangeTheme: StyleManager['changeTheme'];\n\tonChangeTheme: StyleManager['onChangeTheme'];\n};\n\nexport default class StyleManager extends BaseModule<Options, Augmentation> {\n\ttheme: 'dark' | 'light' = 'light';\n\tonChangeTheme = makeHook<['light' | 'dark']>();\n\tdefinedColors = {\n\t\tdark: {\n\t\t\t'0': { hue: 0, lightness: 40, saturation: 0 },\n\t\t\t'1': { hue: 358, lightness: 65, saturation: 100 },\n\t\t\t'2': { hue: 23, lightness: 63, saturation: 86 },\n\t\t\t'3': { hue: 39, lightness: 70, saturation: 91 },\n\t\t\t'4': { hue: 153, lightness: 45, saturation: 80 },\n\t\t\t'5': { hue: 217, lightness: 62, saturation: 100 },\n\t\t\t'6': { hue: 259, lightness: 75, saturation: 100 },\n\t\t},\n\t\tlight: {\n\t\t\t'0': { hue: 0, lightness: 72, saturation: 0 },\n\t\t\t'1': { hue: 358, lightness: 55, saturation: 81 },\n\t\t\t'2': { hue: 19, lightness: 58, saturation: 87 },\n\t\t\t'3': { hue: 41, lightness: 52, saturation: 79 },\n\t\t\t'4': { hue: 150, lightness: 37, saturation: 100 },\n\t\t\t'5': { hue: 221, lightness: 59, saturation: 100 },\n\t\t\t'6': { hue: 257, lightness: 62, saturation: 81 },\n\t\t},\n\t};\n\n\tnamedColors = {\n\t\tdark: {\n\t\t\tbackground: 'rgb(30, 30, 30)',\n\t\t\t'background-secondary': 'rgb(37, 37, 40)',\n\t\t\tborder: 'hsla(0, 0%, 30%, 0.7)',\n\t\t\tdots: 'hsla(0, 0%, 40%, 0.3)',\n\t\t\tshadow: '0px 0px 8px rgb(0, 0, 0, 0.2)',\n\t\t\ttext: 'rgb(242, 242, 242)',\n\t\t},\n\t\tlight: {\n\t\t\tbackground: 'rgb(250, 250, 250)',\n\t\t\t'background-secondary': 'rgb(255, 255, 255)',\n\t\t\tborder: 'hsla(0, 0%, 82%, 0.7)',\n\t\t\tdots: 'hsla(0, 0%, 72%, 0.4)',\n\t\t\tshadow: '0px 0px 8px rgb(0, 0, 0, 0.1)',\n\t\t\ttext: 'rgb(30, 30, 30)',\n\t\t},\n\t};\n\n\tprivate readonly colorCache: {\n\t\tdark: Record<string, WithBorderWidth>;\n\t\tlight: Record<string, WithBorderWidth>;\n\t} = {\n\t\tdark: {},\n\t\tlight: {},\n\t};\n\n\tconstructor(...args: BaseArgs) {\n\t\tsuper(...args);\n\n\t\t// User-defined color merging\n\t\tconst colors = this.options.colors;\n\t\tif (colors) {\n\t\t\tconst themes = ['light', 'dark'] as const;\n\t\t\tthemes.forEach((theme) => {\n\t\t\t\tif (!(theme in colors)) return;\n\t\t\t\tconst colorObject = colors[theme];\n\t\t\t\tif (!colorObject) return;\n\t\t\t\tObject.entries(colorObject).forEach(([key, value]) => {\n\t\t\t\t\tif (!value) return;\n\t\t\t\t\tconst namedColorsDict = this.namedColors[theme];\n\t\t\t\t\tconst definedColorsDict = this.definedColors[theme];\n\t\t\t\t\tif (key in namedColorsDict)\n\t\t\t\t\t\tnamedColorsDict[key as keyof typeof namedColorsDict] = value;\n\t\t\t\t\telse if (key in definedColorsDict) {\n\t\t\t\t\t\tconst color = this.parseColor(value);\n\t\t\t\t\t\tif (!color) {\n\t\t\t\t\t\t\tconsole.warn(`[JSON Canvas Viewer] Color ${value} unsupported.`);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdefinedColorsDict[key as keyof typeof definedColorsDict] = color;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\n\t\tthis.changeTheme(this.options.theme ?? 'light');\n\t\tthis.augment({\n\t\t\tchangeTheme: this.changeTheme,\n\t\t\tonChangeTheme: this.onChangeTheme,\n\t\t});\n\t}\n\n\tprivate readonly hslProcessor = (color: HslColor) => {\n\t\tconst { hue, saturation, lightness } = color;\n\t\tconst result =\n\t\t\tthis.theme === 'dark'\n\t\t\t\t? {\n\t\t\t\t\t\tactive: color,\n\t\t\t\t\t\tbackground: { ...color, alpha: 0.1 },\n\t\t\t\t\t\tborder: { ...color, alpha: 0.7 },\n\t\t\t\t\t\tcard: { hue, lightness: lightness / 3, saturation: saturation / 3 },\n\t\t\t\t\t\ttext: color.lightness >= 70 ? 'rgb(30, 30, 30)' : 'rgb(242, 242, 242)',\n\t\t\t\t\t}\n\t\t\t\t: {\n\t\t\t\t\t\tactive: color,\n\t\t\t\t\t\tbackground: { ...color, alpha: 0.1 },\n\t\t\t\t\t\tborder: { ...color, alpha: 0.7 },\n\t\t\t\t\t\tcard:\n\t\t\t\t\t\t\thue === 0\n\t\t\t\t\t\t\t\t? { hue, lightness: 100, saturation }\n\t\t\t\t\t\t\t\t: { hue, lightness: 90, saturation: saturation * 0.4 },\n\t\t\t\t\t\ttext: color.lightness >= 70 ? 'rgb(30, 30, 30)' : 'rgb(242, 242, 242)',\n\t\t\t\t\t};\n\t\treturn {\n\t\t\tactive: toHslString(result.active),\n\t\t\tbackground: toHslString(result.background),\n\t\t\tborder: toHslString(result.border),\n\t\t\tcard: toHslString(result.card),\n\t\t\ttext: result.text,\n\t\t};\n\t};\n\n\tprivate readonly parseColor = (color: string) => {\n\t\tif (color.startsWith('rgb')) return rgbToHsl(parseRgb(color));\n\t\tif (color.startsWith('#')) return rgbToHsl(parseHex(color));\n\t\tif (color.startsWith('hsl')) return parseHsl(color);\n\t};\n\n\tgetColor = (colorIndex = '0') => {\n\t\tconst theme = this.theme;\n\t\tlet color: Color;\n\t\tif (this.colorCache[theme][colorIndex]) return this.colorCache[theme][colorIndex];\n\t\telse if (colorIndex in this.definedColors[theme])\n\t\t\tcolor = this.hslProcessor(\n\t\t\t\tthis.definedColors[theme][colorIndex as keyof typeof this.definedColors.dark],\n\t\t\t);\n\t\telse color = this.hslProcessor(rgbToHsl(parseHex(colorIndex)));\n\t\tconst withBorderWidth: WithBorderWidth = {\n\t\t\t...color,\n\t\t\t'border-width': colorIndex === '0' ? '1px' : '2px',\n\t\t};\n\t\tthis.colorCache[theme][colorIndex] = withBorderWidth;\n\t\treturn withBorderWidth;\n\t};\n\n\tgetNamedColor = (name: keyof typeof this.namedColors.light) =>\n\t\tthis.namedColors[this.theme][name];\n\n\tchangeTheme = (theme?: 'dark' | 'light') => {\n\t\tthis.theme = theme ?? (this.theme === 'dark' ? 'light' : 'dark');\n\t\tconst container = this.container.get(DataManager).data.container;\n\t\tObject.entries(this.namedColors[this.theme]).forEach(([key, value]) => {\n\t\t\tcontainer.style.setProperty(`--${key}`, value);\n\t\t});\n\t\tthis.onChangeTheme(this.theme);\n\t};\n}\n"],"mappings":"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"}

package/dist/kernel/index.d.ts

@@ -1,26 +1,26 @@
 import { JSONCanvas } from "../shared/index.js";
 import { Hook } from "./utilities.js";
 import { Augmentation, ModuleInput, ModuleInputCtor, Options } from "./BaseModule.js";
-import { Controller } from "./Controller.js";
 import { DataManager } from "./DataManager.js";
 import { InteractionHandler } from "./InteractionHandler.js";
 import { OverlayManager } from "./OverlayManager.js";
 import { Renderer } from "./Renderer.js";
 import { StyleManager } from "./StyleManager.js";
+import { Controller } from "./Controller.js";
 import { Container } from "@needle-di/core";
 
 //#region src/kernel/index.d.ts
-interface BaseOptions {
+type BaseOptions = {
   container: HTMLElement;
   loading?: 'normal' | 'lazy' | 'none';
-}
+};
 declare const internalModules: (typeof Controller | typeof DataManager | typeof InteractionHandler | typeof OverlayManager | typeof Renderer | typeof StyleManager)[];
 type InternalModules = typeof internalModules;
 type AllOptions<M extends ModuleInput = []> = Options<M> & Options<InternalModules>;
 type AllAugmentation<M extends ModuleInput = []> = Augmentation<M> & Augmentation<InternalModules>;
 declare class JSONCanvasViewer<M extends ModuleInputCtor> {
-  private allModules;
-  private IO;
+  private readonly allModules;
+  private IO?;
   private started;
   private disposed;
   options: AllOptions<M>;
@@ -29,8 +29,8 @@ declare class JSONCanvasViewer<M extends ModuleInputCtor> {
   onStart: Hook<[], false>;
   onRestart: Hook<[], false>;
   constructor(options: AllOptions<M>, modules?: M);
-  private onVisibilityCheck;
-  private augment;
+  private readonly onVisibilityCheck;
+  private readonly augment;
   load: (options?: {
     canvas?: JSONCanvas;
     attachmentDir?: string;

package/dist/kernel/index.js

@@ -1,2 +1,2 @@
-import e from"./utilities.js";import t from"./DataManager.js";import n from"./StyleManager.js";import r from"./Controller.js";import i from"./OverlayManager.js";import a from"./InteractionHandler.js";import o from"./Renderer.js";import{Container as s}from"@needle-di/core";const c=[t,n,r,i,a,o];var l=class{allModules;IO=null;started=!1;disposed=!1;options;container;onDispose=e.makeHook(!0);onStart=e.makeHook();onRestart=e.makeHook();constructor(e,t){this.container=new s,this.options=e;let n=e=>{this.container.bind({provide:e,useFactory:()=>new e(this.container,this.options,this.onStart,this.onDispose,this.onRestart,this.augment)})};this.allModules=[...c,...t??[]],this.allModules.forEach(n),this.allModules.forEach(e=>{this.container.get(e)});let r=this.options.loading??`normal`;r===`normal`?this.load():r===`lazy`&&(this.IO=new IntersectionObserver(this.onVisibilityCheck,{root:null,rootMargin:`50px`,threshold:0}),this.IO.observe(this.options.container))}onVisibilityCheck=e=>{e.forEach(e=>{if(e.isIntersecting){this.load(),this.IO?.disconnect(),this.IO=null;return}})};augment=e=>{let t=Object.getOwnPropertyDescriptors(e);Object.defineProperties(this,t)};load=e=>{this.disposed||(e&&Object.assign(this.options,e),this.started?this.onRestart():(this.onStart(),this.started=!0))};dispose=()=>{if(!this.started||this.disposed)return;this.IO?.disconnect(),this.IO=null;let e=this.options.container;for(;e.firstChild;)e.firstChild.remove();this.onDispose(),this.container.unbindAll(),this.disposed=!0}};export{l as default};
+import{makeHook as e}from"./utilities.js";import t from"./DataManager.js";import n from"./StyleManager.js";import r from"./Controller.js";import i from"./OverlayManager.js";import a from"./InteractionHandler.js";import o from"./Renderer.js";import{Container as s}from"@needle-di/core";const c=[t,n,r,i,a,o];var l=class{allModules;IO;started=!1;disposed=!1;options;container;onDispose=e(!0);onStart=e();onRestart=e();constructor(e,t){this.container=new s,this.options=e;let n=e=>{this.container.bind({provide:e,useFactory:()=>new e(this.container,this.options,this.onStart,this.onDispose,this.onRestart,this.augment)})};this.allModules=[...c,...t??[]],this.allModules.forEach(n),this.allModules.forEach(e=>{this.container.get(e)});let r=this.options.loading??`normal`;r===`normal`?this.load():r===`lazy`&&(this.IO=new IntersectionObserver(this.onVisibilityCheck,{rootMargin:`50px`,threshold:0}),this.IO.observe(this.options.container))}onVisibilityCheck=e=>{e.forEach(e=>{if(e.isIntersecting){this.load(),this.IO?.disconnect(),this.IO=void 0;return}})};augment=e=>{let t=Object.getOwnPropertyDescriptors(e);Object.defineProperties(this,t)};load=e=>{this.disposed||(e&&Object.assign(this.options,e),this.started?this.onRestart():(this.onStart(),this.started=!0))};dispose=()=>{if(!this.started||this.disposed)return;this.IO?.disconnect(),this.IO=void 0;let e=this.options.container;for(;e.firstChild;)e.firstChild.remove();this.onDispose(),this.container.unbindAll(),this.disposed=!0}};export{l as default};
 //# sourceMappingURL=index.js.map

package/dist/kernel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["utilities"],"sources":["../../src/kernel/index.ts"],"sourcesContent":["import type {\n\tModuleInputCtor,\n\tModuleInput,\n\tOptions,\n\tAugmentation,\n\tGeneralModuleCtor,\n} from '$/BaseModule';\nimport type { GeneralObject } from '$/types';\nimport type { JSONCanvas } from '@repo/shared';\nimport Controller from '$/Controller';\nimport DataManager from '$/DataManager';\nimport InteractionHandler from '$/InteractionHandler';\nimport OverlayManager from '$/OverlayManager';\nimport Renderer from '$/Renderer';\nimport StyleManager from '$/StyleManager';\nimport utilities from '$/utilities';\nimport { Container } from '@needle-di/core';\n\nexport interface BaseOptions {\n\tcontainer: HTMLElement;\n\tloading?: 'normal' | 'lazy' | 'none';\n}\n\nconst internalModules = [\n\tDataManager,\n\tStyleManager,\n\tController,\n\tOverlayManager,\n\tInteractionHandler,\n\tRenderer,\n];\n\ntype InternalModules = typeof internalModules;\n\nexport type AllOptions<M extends ModuleInput = []> = Options<M> & Options<InternalModules>;\ntype AllAugmentation<M extends ModuleInput = []> = Augmentation<M> & Augmentation<InternalModules>;\n\nclass JSONCanvasViewer<M extends ModuleInputCtor> {\n\tprivate allModules: ModuleInputCtor;\n\tprivate IO: IntersectionObserver | null = null;\n\tprivate started = false;\n\tprivate disposed = false;\n\toptions: AllOptions<M>;\n\tcontainer: Container;\n\tonDispose = utilities.makeHook(true);\n\tonStart = utilities.makeHook();\n\tonRestart = utilities.makeHook();\n\n\tconstructor(options: AllOptions<M>, modules?: M) {\n\t\tthis.container = new Container();\n\t\tthis.options = options;\n\t\tconst bind = (Class: GeneralModuleCtor) => {\n\t\t\tthis.container.bind({\n\t\t\t\tprovide: Class,\n\t\t\t\tuseFactory: () =>\n\t\t\t\t\tnew Class(\n\t\t\t\t\t\tthis.container,\n\t\t\t\t\t\tthis.options,\n\t\t\t\t\t\tthis.onStart,\n\t\t\t\t\t\tthis.onDispose,\n\t\t\t\t\t\tthis.onRestart,\n\t\t\t\t\t\tthis.augment,\n\t\t\t\t\t),\n\t\t\t});\n\t\t};\n\t\tthis.allModules = [...internalModules, ...(modules ?? [])];\n\t\tthis.allModules.forEach(bind);\n\t\tthis.allModules.forEach((Module) => {\n\t\t\tthis.container.get(Module);\n\t\t});\n\n\t\tconst loading = this.options.loading ?? 'normal';\n\t\tif (loading === 'normal') this.load();\n\t\telse if (loading === 'lazy') {\n\t\t\tthis.IO = new IntersectionObserver(this.onVisibilityCheck, {\n\t\t\t\troot: null,\n\t\t\t\trootMargin: '50px',\n\t\t\t\tthreshold: 0,\n\t\t\t});\n\t\t\tthis.IO.observe(this.options.container);\n\t\t}\n\t}\n\n\tprivate onVisibilityCheck = (entries: Array<IntersectionObserverEntry>) => {\n\t\tentries.forEach((entry) => {\n\t\t\tif (entry.isIntersecting) {\n\t\t\t\tthis.load();\n\t\t\t\tthis.IO?.disconnect();\n\t\t\t\tthis.IO = null;\n\t\t\t\treturn;\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate augment = (aug: GeneralObject) => {\n\t\tconst descriptors = Object.getOwnPropertyDescriptors(aug);\n\t\tObject.defineProperties(this, descriptors);\n\t};\n\n\tload = (options?: {\n\t\tcanvas?: JSONCanvas;\n\t\tattachmentDir?: string;\n\t\tattachments?: Record<string, string>;\n\t}) => {\n\t\tif (this.disposed) return;\n\t\tif (options) Object.assign(this.options, options);\n\t\tif (this.started) this.onRestart();\n\t\telse {\n\t\t\tthis.onStart();\n\t\t\tthis.started = true;\n\t\t}\n\t};\n\n\tdispose = () => {\n\t\tif (!this.started || this.disposed) return;\n\t\tthis.IO?.disconnect();\n\t\tthis.IO = null;\n\t\tconst container = this.options.container;\n\t\twhile (container.firstChild) container.firstChild.remove();\n\t\tthis.onDispose();\n\t\tthis.container.unbindAll();\n\t\tthis.disposed = true;\n\t};\n}\n\ntype JSONCanvasViewerType = new <M extends ModuleInputCtor = []>(\n\t...args: ConstructorParameters<typeof JSONCanvasViewer<M>>\n) => JSONCanvasViewer<M> & AllAugmentation<M>;\n\nexport type JSONCanvasViewerInterface<M extends ModuleInput = []> = JSONCanvasViewer<never> &\n\tAllAugmentation<M>;\n\nexport default JSONCanvasViewer as JSONCanvasViewerType;\n"],"mappings":"iRAuBA,MAAM,EAAkB,CACvB,EACA,EACA,EACA,EACA,EACA,EACA,CAOD,IAAM,EAAN,KAAkD,CACjD,WACA,GAA0C,KAC1C,QAAkB,GAClB,SAAmB,GACnB,QACA,UACA,UAAYA,EAAU,SAAS,GAAK,CACpC,QAAUA,EAAU,UAAU,CAC9B,UAAYA,EAAU,UAAU,CAEhC,YAAY,EAAwB,EAAa,CAChD,KAAK,UAAY,IAAI,EACrB,KAAK,QAAU,EACf,IAAM,EAAQ,GAA6B,CAC1C,KAAK,UAAU,KAAK,CACnB,QAAS,EACT,eACC,IAAI,EACH,KAAK,UACL,KAAK,QACL,KAAK,QACL,KAAK,UACL,KAAK,UACL,KAAK,QACL,CACF,CAAC,EAEH,KAAK,WAAa,CAAC,GAAG,EAAiB,GAAI,GAAW,EAAE,CAAE,CAC1D,KAAK,WAAW,QAAQ,EAAK,CAC7B,KAAK,WAAW,QAAS,GAAW,CACnC,KAAK,UAAU,IAAI,EAAO,EACzB,CAEF,IAAM,EAAU,KAAK,QAAQ,SAAW,SACpC,IAAY,SAAU,KAAK,MAAM,CAC5B,IAAY,SACpB,KAAK,GAAK,IAAI,qBAAqB,KAAK,kBAAmB,CAC1D,KAAM,KACN,WAAY,OACZ,UAAW,EACX,CAAC,CACF,KAAK,GAAG,QAAQ,KAAK,QAAQ,UAAU,EAIzC,kBAA6B,GAA8C,CAC1E,EAAQ,QAAS,GAAU,CAC1B,GAAI,EAAM,eAAgB,CACzB,KAAK,MAAM,CACX,KAAK,IAAI,YAAY,CACrB,KAAK,GAAK,KACV,SAEA,EAGH,QAAmB,GAAuB,CACzC,IAAM,EAAc,OAAO,0BAA0B,EAAI,CACzD,OAAO,iBAAiB,KAAM,EAAY,EAG3C,KAAQ,GAIF,CACD,KAAK,WACL,GAAS,OAAO,OAAO,KAAK,QAAS,EAAQ,CAC7C,KAAK,QAAS,KAAK,WAAW,EAEjC,KAAK,SAAS,CACd,KAAK,QAAU,MAIjB,YAAgB,CACf,GAAI,CAAC,KAAK,SAAW,KAAK,SAAU,OACpC,KAAK,IAAI,YAAY,CACrB,KAAK,GAAK,KACV,IAAM,EAAY,KAAK,QAAQ,UAC/B,KAAO,EAAU,YAAY,EAAU,WAAW,QAAQ,CAC1D,KAAK,WAAW,CAChB,KAAK,UAAU,WAAW,CAC1B,KAAK,SAAW"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/kernel/index.ts"],"sourcesContent":["import type {\n\tModuleInputCtor,\n\tModuleInput,\n\tOptions,\n\tAugmentation,\n\tGeneralModuleCtor,\n} from '$/BaseModule';\nimport type { GeneralObject } from '$/types';\nimport type { JSONCanvas } from '@repo/shared';\nimport Controller from '$/Controller';\nimport DataManager from '$/DataManager';\nimport InteractionHandler from '$/InteractionHandler';\nimport OverlayManager from '$/OverlayManager';\nimport Renderer from '$/Renderer';\nimport StyleManager from '$/StyleManager';\nimport { makeHook } from '$/utilities';\nimport { Container } from '@needle-di/core';\n\nexport type BaseOptions = {\n\tcontainer: HTMLElement;\n\tloading?: 'normal' | 'lazy' | 'none';\n};\n\nconst internalModules = [\n\tDataManager,\n\tStyleManager,\n\tController,\n\tOverlayManager,\n\tInteractionHandler,\n\tRenderer,\n];\n\ntype InternalModules = typeof internalModules;\n\nexport type AllOptions<M extends ModuleInput = []> = Options<M> & Options<InternalModules>;\ntype AllAugmentation<M extends ModuleInput = []> = Augmentation<M> & Augmentation<InternalModules>;\n\nclass JSONCanvasViewer<M extends ModuleInputCtor> {\n\tprivate readonly allModules: ModuleInputCtor;\n\tprivate IO?: IntersectionObserver;\n\tprivate started = false;\n\tprivate disposed = false;\n\toptions: AllOptions<M>;\n\tcontainer: Container;\n\tonDispose = makeHook(true);\n\tonStart = makeHook();\n\tonRestart = makeHook();\n\n\tconstructor(options: AllOptions<M>, modules?: M) {\n\t\tthis.container = new Container();\n\t\tthis.options = options;\n\t\tconst bind = (Class: GeneralModuleCtor) => {\n\t\t\tthis.container.bind({\n\t\t\t\tprovide: Class,\n\t\t\t\tuseFactory: () =>\n\t\t\t\t\tnew Class(\n\t\t\t\t\t\tthis.container,\n\t\t\t\t\t\tthis.options,\n\t\t\t\t\t\tthis.onStart,\n\t\t\t\t\t\tthis.onDispose,\n\t\t\t\t\t\tthis.onRestart,\n\t\t\t\t\t\tthis.augment,\n\t\t\t\t\t),\n\t\t\t});\n\t\t};\n\t\tthis.allModules = [...internalModules, ...(modules ?? [])];\n\t\tthis.allModules.forEach(bind);\n\t\tthis.allModules.forEach((Module) => {\n\t\t\tthis.container.get(Module);\n\t\t});\n\n\t\tconst loading = this.options.loading ?? 'normal';\n\t\tif (loading === 'normal') this.load();\n\t\telse if (loading === 'lazy') {\n\t\t\tthis.IO = new IntersectionObserver(this.onVisibilityCheck, {\n\t\t\t\trootMargin: '50px',\n\t\t\t\tthreshold: 0,\n\t\t\t});\n\t\t\tthis.IO.observe(this.options.container);\n\t\t}\n\t}\n\n\tprivate readonly onVisibilityCheck = (entries: Array<IntersectionObserverEntry>) => {\n\t\tentries.forEach((entry) => {\n\t\t\tif (entry.isIntersecting) {\n\t\t\t\tthis.load();\n\t\t\t\tthis.IO?.disconnect();\n\t\t\t\tthis.IO = undefined;\n\t\t\t\treturn;\n\t\t\t}\n\t\t});\n\t};\n\n\tprivate readonly augment = (aug: GeneralObject) => {\n\t\tconst descriptors = Object.getOwnPropertyDescriptors(aug);\n\t\tObject.defineProperties(this, descriptors);\n\t};\n\n\tload = (options?: {\n\t\tcanvas?: JSONCanvas;\n\t\tattachmentDir?: string;\n\t\tattachments?: Record<string, string>;\n\t}) => {\n\t\tif (this.disposed) return;\n\t\tif (options) Object.assign(this.options, options);\n\t\tif (this.started) this.onRestart();\n\t\telse {\n\t\t\tthis.onStart();\n\t\t\tthis.started = true;\n\t\t}\n\t};\n\n\tdispose = () => {\n\t\tif (!this.started || this.disposed) return;\n\t\tthis.IO?.disconnect();\n\t\tthis.IO = undefined;\n\t\tconst container = this.options.container;\n\t\twhile (container.firstChild) container.firstChild.remove();\n\t\tthis.onDispose();\n\t\tthis.container.unbindAll();\n\t\tthis.disposed = true;\n\t};\n}\n\ntype JSONCanvasViewerType = new <M extends ModuleInputCtor = []>(\n\t...args: ConstructorParameters<typeof JSONCanvasViewer<M>>\n) => JSONCanvasViewer<M> & AllAugmentation<M>;\n\nexport type JSONCanvasViewerInterface<M extends ModuleInput = []> = JSONCanvasViewer<never> &\n\tAllAugmentation<M>;\n\nexport default JSONCanvasViewer as JSONCanvasViewerType;\n"],"mappings":"6RAuBA,MAAM,EAAkB,CACvB,EACA,EACA,EACA,EACA,EACA,EACA,CAOD,IAAM,EAAN,KAAkD,CACjD,WACA,GACA,QAAkB,GAClB,SAAmB,GACnB,QACA,UACA,UAAY,EAAS,GAAK,CAC1B,QAAU,GAAU,CACpB,UAAY,GAAU,CAEtB,YAAY,EAAwB,EAAa,CAChD,KAAK,UAAY,IAAI,EACrB,KAAK,QAAU,EACf,IAAM,EAAQ,GAA6B,CAC1C,KAAK,UAAU,KAAK,CACnB,QAAS,EACT,eACC,IAAI,EACH,KAAK,UACL,KAAK,QACL,KAAK,QACL,KAAK,UACL,KAAK,UACL,KAAK,QACL,CACF,CAAC,EAEH,KAAK,WAAa,CAAC,GAAG,EAAiB,GAAI,GAAW,EAAE,CAAE,CAC1D,KAAK,WAAW,QAAQ,EAAK,CAC7B,KAAK,WAAW,QAAS,GAAW,CACnC,KAAK,UAAU,IAAI,EAAO,EACzB,CAEF,IAAM,EAAU,KAAK,QAAQ,SAAW,SACpC,IAAY,SAAU,KAAK,MAAM,CAC5B,IAAY,SACpB,KAAK,GAAK,IAAI,qBAAqB,KAAK,kBAAmB,CAC1D,WAAY,OACZ,UAAW,EACX,CAAC,CACF,KAAK,GAAG,QAAQ,KAAK,QAAQ,UAAU,EAIzC,kBAAsC,GAA8C,CACnF,EAAQ,QAAS,GAAU,CAC1B,GAAI,EAAM,eAAgB,CACzB,KAAK,MAAM,CACX,KAAK,IAAI,YAAY,CACrB,KAAK,GAAK,IAAA,GACV,SAEA,EAGH,QAA4B,GAAuB,CAClD,IAAM,EAAc,OAAO,0BAA0B,EAAI,CACzD,OAAO,iBAAiB,KAAM,EAAY,EAG3C,KAAQ,GAIF,CACD,KAAK,WACL,GAAS,OAAO,OAAO,KAAK,QAAS,EAAQ,CAC7C,KAAK,QAAS,KAAK,WAAW,EAEjC,KAAK,SAAS,CACd,KAAK,QAAU,MAIjB,YAAgB,CACf,GAAI,CAAC,KAAK,SAAW,KAAK,SAAU,OACpC,KAAK,IAAI,YAAY,CACrB,KAAK,GAAK,IAAA,GACV,IAAM,EAAY,KAAK,QAAQ,UAC/B,KAAO,EAAU,YAAY,EAAU,WAAW,QAAQ,CAC1D,KAAK,WAAW,CAChB,KAAK,UAAU,WAAW,CAC1B,KAAK,SAAW"}

package/dist/kernel/types.d.ts

@@ -22,7 +22,7 @@ type Box = {
 type General = any;
 type GeneralArray = ReadonlyArray<General>;
 type GeneralObject = object;
-type GeneralConstructor = new (...args: General[]) => General;
+type GeneralConstructor = new (...args: Array<General>) => General;
 type UnionToIntersection<U> = (U extends General ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never;
 type GeneralModuleInput = ReadonlyArray<GeneralConstructor> | ReadonlyArray<GeneralObject>;
 type ModuleInput<T extends GeneralConstructor> = ReadonlyArray<T> | ReadonlyArray<InstanceType<T>>;

package/dist/kernel/utilities.d.ts

@@ -1,23 +1,6 @@
 import { GeneralArray } from "./types.js";
-import { JSONCanvasNode } from "../shared/index.js";
 
 //#region src/kernel/utilities.d.ts
-declare const _default: {
-  round: typeof round;
-  resizeCanvasForDPR: typeof resizeCanvasForDPR;
-  applyStyles: typeof applyStyles;
-  drawRoundRect: typeof drawRoundRect;
-  getAnchorCoord: typeof getAnchorCoord;
-  makeHook: typeof makeHook;
-};
-declare function applyStyles(container: HTMLElement | ShadowRoot, styleString: string): void;
-declare function drawRoundRect(ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number): void;
-declare function getAnchorCoord(node: JSONCanvasNode, side: 'top' | 'bottom' | 'left' | 'right'): {
-  x: number;
-  y: number;
-};
-declare function resizeCanvasForDPR(canvas: HTMLCanvasElement, width: number, height: number): void;
-declare function round(roundedNum: number, digits: number): number;
 type MatchingFunc<Args extends GeneralArray> = (...args: Args) => void | Promise<void>;
 type Hook<Args extends GeneralArray = [], Async extends boolean = false> = {
   (...args: Args): Async extends true ? Promise<void> : void;
@@ -25,15 +8,6 @@ type Hook<Args extends GeneralArray = [], Async extends boolean = false> = {
   subscribe(callback: MatchingFunc<Args>): void;
   unsubscribe(callback: MatchingFunc<Args>): void;
 };
-/**
- * A quick function to create a hook that can be subscribed to and unsubscribed from.
- * Pass your arguments as the type parameter
- *
- * @param reverse - Whether the hook should reverse the execution order or not
- * @param async - Whether the hook is async or not
- * @example const hook = makeHook(true);
- */
-declare function makeHook<Args extends GeneralArray = [], Async extends boolean = false>(reverse?: boolean, async?: Async): Hook<Args, Async>;
 //#endregion
-export { Hook, _default };
+export { Hook };
 //# sourceMappingURL=utilities.d.ts.map

package/dist/kernel/utilities.js

@@ -1,2 +1,2 @@
-var e={round:o,resizeCanvasForDPR:a,applyStyles:n,drawRoundRect:r,getAnchorCoord:i,makeHook:s};const t=Error(`[JSONCanvasViewer] Resource hasn't been set up or has been disposed.`);function n(e,t){let n=document.createElement(`style`);n.innerHTML=t,e.appendChild(n)}function r(e,t,n,r,i,a){e.beginPath(),e.moveTo(t+a,n),e.lineTo(t+r-a,n),e.quadraticCurveTo(t+r,n,t+r,n+a),e.lineTo(t+r,n+i-a),e.quadraticCurveTo(t+r,n+i,t+r-a,n+i),e.lineTo(t+a,n+i),e.quadraticCurveTo(t,n+i,t,n+i-a),e.lineTo(t,n+a),e.quadraticCurveTo(t,n,t+a,n),e.closePath()}function i(e,t){let n=e.x+e.width/2,r=e.y+e.height/2;switch(t){case`top`:return{x:n,y:e.y};case`bottom`:return{x:n,y:e.y+e.height};case`left`:return{x:e.x,y:r};case`right`:return{x:e.x+e.width,y:r};default:return{x:n,y:r}}}function a(e,t,n){let r=window.devicePixelRatio??1,i=e.getContext(`2d`);if(!i)throw Error(`[JSONCanvasViewer] This error is unexpected, probably caused uncontrollable runtime errors. Please contact the developer and show how to reproduce.`);e.width=Math.round(t*r),e.height=Math.round(n*r),i.setTransform(1,0,0,1,0,0),i.scale(r,r)}function o(e,t){let n=10**t;return Math.round(e*n)/n}function s(e=!1,t=!1){let n=t?async(...t)=>{if(e){let e=Array.from(n.subs).reverse();for(let n of e)await n(...t)}else for(let e of n.subs)await e(...t)}:(...t)=>{if(e){let e=Array.from(n.subs).reverse();for(let n of e)n(...t)}else for(let e of n.subs)e(...t)};return n.subs=new Set,n.subscribe=e=>{n.subs.add(e)},n.unsubscribe=e=>{n.subs.delete(e)},n}export{e as default,t as destroyError};
+const e=Error(`[JSONCanvasViewer] Resource hasn't been set up or has been disposed.`);function t(e,t){let n=document.createElement(`style`);n.innerHTML=t,e.appendChild(n)}function n(e,t,n,r,i,a){e.beginPath(),e.moveTo(t+a,n),e.lineTo(t+r-a,n),e.quadraticCurveTo(t+r,n,t+r,n+a),e.lineTo(t+r,n+i-a),e.quadraticCurveTo(t+r,n+i,t+r-a,n+i),e.lineTo(t+a,n+i),e.quadraticCurveTo(t,n+i,t,n+i-a),e.lineTo(t,n+a),e.quadraticCurveTo(t,n,t+a,n),e.closePath()}function r(e,t){let n=e.x+e.width/2,r=e.y+e.height/2;switch(t){case`top`:return{x:n,y:e.y};case`bottom`:return{x:n,y:e.y+e.height};case`left`:return{x:e.x,y:r};case`right`:return{x:e.x+e.width,y:r};default:return{x:n,y:r}}}function i(e,t,n){let r=window.devicePixelRatio??1,i=e.getContext(`2d`);if(!i)throw Error(`[JSONCanvasViewer] This error is unexpected, probably caused uncontrollable runtime errors. Please contact the developer and show how to reproduce.`);e.width=Math.round(t*r),e.height=Math.round(n*r),i.setTransform(1,0,0,1,0,0),i.scale(r,r)}function a(e,t){let n=10**t;return Math.round(e*n)/n}function o(e=!1,t=!1){let n=t?async(...t)=>{if(e){let e=[...n.subs].reverse();for(let n of e)await n(...t)}else for(let e of n.subs)await e(...t)}:(...t)=>{if(e){let e=[...n.subs].reverse();for(let n of e)n(...t)}else for(let e of n.subs)e(...t)};return n.subs=new Set,n.subscribe=e=>{n.subs.add(e)},n.unsubscribe=e=>{n.subs.delete(e)},n}export{t as applyStyles,e as destroyError,n as drawRoundRect,r as getAnchorCoord,o as makeHook,i as resizeCanvasForDPR,a as round};
 //# sourceMappingURL=utilities.js.map

package/dist/kernel/utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.js","names":[],"sources":["../../src/kernel/utilities.ts"],"sourcesContent":["import type { GeneralArray } from '$/types';\nimport type { JSONCanvasNode } from '@repo/shared';\n\nexport default {\n\tround,\n\tresizeCanvasForDPR,\n\tapplyStyles,\n\tdrawRoundRect,\n\tgetAnchorCoord,\n\tmakeHook,\n};\n\nexport const destroyError = new Error(\n\t\"[JSONCanvasViewer] Resource hasn't been set up or has been disposed.\",\n);\n\nfunction applyStyles(container: HTMLElement | ShadowRoot, styleString: string) {\n\tconst style = document.createElement('style');\n\tstyle.innerHTML = styleString;\n\tcontainer.appendChild(style);\n}\n\nfunction drawRoundRect(\n\tctx: CanvasRenderingContext2D,\n\tx: number,\n\ty: number,\n\twidth: number,\n\theight: number,\n\tradius: number,\n) {\n\tctx.beginPath();\n\tctx.moveTo(x + radius, y);\n\tctx.lineTo(x + width - radius, y);\n\tctx.quadraticCurveTo(x + width, y, x + width, y + radius);\n\tctx.lineTo(x + width, y + height - radius);\n\tctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\n\tctx.lineTo(x + radius, y + height);\n\tctx.quadraticCurveTo(x, y + height, x, y + height - radius);\n\tctx.lineTo(x, y + radius);\n\tctx.quadraticCurveTo(x, y, x + radius, y);\n\tctx.closePath();\n}\n\nfunction getAnchorCoord(node: JSONCanvasNode, side: 'top' | 'bottom' | 'left' | 'right') {\n\tconst midX = node.x + node.width / 2;\n\tconst midY = node.y + node.height / 2;\n\tswitch (side) {\n\t\tcase 'top':\n\t\t\treturn { x: midX, y: node.y };\n\t\tcase 'bottom':\n\t\t\treturn { x: midX, y: node.y + node.height };\n\t\tcase 'left':\n\t\t\treturn { x: node.x, y: midY };\n\t\tcase 'right':\n\t\t\treturn { x: node.x + node.width, y: midY };\n\t\tdefault:\n\t\t\treturn { x: midX, y: midY };\n\t}\n}\n\nfunction resizeCanvasForDPR(canvas: HTMLCanvasElement, width: number, height: number) {\n\tconst dpr = window.devicePixelRatio ?? 1;\n\tconst ctx = canvas.getContext('2d');\n\tif (!ctx)\n\t\tthrow new Error(\n\t\t\t'[JSONCanvasViewer] This error is unexpected, probably caused uncontrollable runtime errors. Please contact the developer and show how to reproduce.',\n\t\t);\n\tcanvas.width = Math.round(width * dpr);\n\tcanvas.height = Math.round(height * dpr);\n\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\tctx.scale(dpr, dpr);\n}\n\nfunction round(roundedNum: number, digits: number) {\n\tconst factor = 10 ** digits;\n\treturn Math.round(roundedNum * factor) / factor;\n}\n\ntype MatchingFunc<Args extends GeneralArray> = (...args: Args) => void | Promise<void>;\nexport type Hook<Args extends GeneralArray = [], Async extends boolean = false> = {\n\t(...args: Args): Async extends true ? Promise<void> : void;\n\tsubs: Set<MatchingFunc<Args>>;\n\tsubscribe(callback: MatchingFunc<Args>): void;\n\tunsubscribe(callback: MatchingFunc<Args>): void;\n};\n\n/**\n * A quick function to create a hook that can be subscribed to and unsubscribed from.\n * Pass your arguments as the type parameter\n *\n * @param reverse - Whether the hook should reverse the execution order or not\n * @param async - Whether the hook is async or not\n * @example const hook = makeHook(true);\n */\nexport function makeHook<Args extends GeneralArray = [], Async extends boolean = false>(\n\treverse: boolean = false,\n\tasync: Async = false as Async,\n) {\n\tconst result = (\n\t\tasync\n\t\t\t? async (...args: Args) => {\n\t\t\t\t\tif (reverse) {\n\t\t\t\t\t\tconst items = Array.from(result.subs).reverse();\n\t\t\t\t\t\tfor (const callback of items) await callback(...args);\n\t\t\t\t\t} else for (const callback of result.subs) await callback(...args);\n\t\t\t\t}\n\t\t\t: (...args: Args) => {\n\t\t\t\t\tif (reverse) {\n\t\t\t\t\t\tconst items = Array.from(result.subs).reverse();\n\t\t\t\t\t\tfor (const callback of items) void callback(...args);\n\t\t\t\t\t} else for (const callback of result.subs) void callback(...args);\n\t\t\t\t}\n\t) as Hook<Args, Async>;\n\tresult.subs = new Set();\n\tresult.subscribe = (callback: MatchingFunc<Args>) => {\n\t\tresult.subs.add(callback);\n\t};\n\tresult.unsubscribe = (callback: MatchingFunc<Args>) => {\n\t\tresult.subs.delete(callback);\n\t};\n\treturn result;\n}\n"],"mappings":"AAGA,IAAA,EAAe,CACd,QACA,qBACA,cACA,gBACA,iBACA,WACA,CAED,MAAa,EAAmB,MAC/B,uEACA,CAED,SAAS,EAAY,EAAqC,EAAqB,CAC9E,IAAM,EAAQ,SAAS,cAAc,QAAQ,CAC7C,EAAM,UAAY,EAClB,EAAU,YAAY,EAAM,CAG7B,SAAS,EACR,EACA,EACA,EACA,EACA,EACA,EACC,CACD,EAAI,WAAW,CACf,EAAI,OAAO,EAAI,EAAQ,EAAE,CACzB,EAAI,OAAO,EAAI,EAAQ,EAAQ,EAAE,CACjC,EAAI,iBAAiB,EAAI,EAAO,EAAG,EAAI,EAAO,EAAI,EAAO,CACzD,EAAI,OAAO,EAAI,EAAO,EAAI,EAAS,EAAO,CAC1C,EAAI,iBAAiB,EAAI,EAAO,EAAI,EAAQ,EAAI,EAAQ,EAAQ,EAAI,EAAO,CAC3E,EAAI,OAAO,EAAI,EAAQ,EAAI,EAAO,CAClC,EAAI,iBAAiB,EAAG,EAAI,EAAQ,EAAG,EAAI,EAAS,EAAO,CAC3D,EAAI,OAAO,EAAG,EAAI,EAAO,CACzB,EAAI,iBAAiB,EAAG,EAAG,EAAI,EAAQ,EAAE,CACzC,EAAI,WAAW,CAGhB,SAAS,EAAe,EAAsB,EAA2C,CACxF,IAAM,EAAO,EAAK,EAAI,EAAK,MAAQ,EAC7B,EAAO,EAAK,EAAI,EAAK,OAAS,EACpC,OAAQ,EAAR,CACC,IAAK,MACJ,MAAO,CAAE,EAAG,EAAM,EAAG,EAAK,EAAG,CAC9B,IAAK,SACJ,MAAO,CAAE,EAAG,EAAM,EAAG,EAAK,EAAI,EAAK,OAAQ,CAC5C,IAAK,OACJ,MAAO,CAAE,EAAG,EAAK,EAAG,EAAG,EAAM,CAC9B,IAAK,QACJ,MAAO,CAAE,EAAG,EAAK,EAAI,EAAK,MAAO,EAAG,EAAM,CAC3C,QACC,MAAO,CAAE,EAAG,EAAM,EAAG,EAAM,EAI9B,SAAS,EAAmB,EAA2B,EAAe,EAAgB,CACrF,IAAM,EAAM,OAAO,kBAAoB,EACjC,EAAM,EAAO,WAAW,KAAK,CACnC,GAAI,CAAC,EACJ,MAAU,MACT,sJACA,CACF,EAAO,MAAQ,KAAK,MAAM,EAAQ,EAAI,CACtC,EAAO,OAAS,KAAK,MAAM,EAAS,EAAI,CACxC,EAAI,aAAa,EAAG,EAAG,EAAG,EAAG,EAAG,EAAE,CAClC,EAAI,MAAM,EAAK,EAAI,CAGpB,SAAS,EAAM,EAAoB,EAAgB,CAClD,IAAM,EAAS,IAAM,EACrB,OAAO,KAAK,MAAM,EAAa,EAAO,CAAG,EAmB1C,SAAgB,EACf,EAAmB,GACnB,EAAe,GACd,CACD,IAAM,EACL,EACG,MAAO,GAAG,IAAe,CACzB,GAAI,EAAS,CACZ,IAAM,EAAQ,MAAM,KAAK,EAAO,KAAK,CAAC,SAAS,CAC/C,IAAK,IAAM,KAAY,EAAO,MAAM,EAAS,GAAG,EAAK,MAC/C,IAAK,IAAM,KAAY,EAAO,KAAM,MAAM,EAAS,GAAG,EAAK,GAEjE,GAAG,IAAe,CACnB,GAAI,EAAS,CACZ,IAAM,EAAQ,MAAM,KAAK,EAAO,KAAK,CAAC,SAAS,CAC/C,IAAK,IAAM,KAAY,EAAY,EAAS,GAAG,EAAK,MAC9C,IAAK,IAAM,KAAY,EAAO,KAAW,EAAS,GAAG,EAAK,EAUrE,MAPA,GAAO,KAAO,IAAI,IAClB,EAAO,UAAa,GAAiC,CACpD,EAAO,KAAK,IAAI,EAAS,EAE1B,EAAO,YAAe,GAAiC,CACtD,EAAO,KAAK,OAAO,EAAS,EAEtB"}
+{"version":3,"file":"utilities.js","names":[],"sources":["../../src/kernel/utilities.ts"],"sourcesContent":["import type { GeneralArray } from '$/types';\nimport type { JSONCanvasNode } from '@repo/shared';\n\nexport const destroyError = new Error(\n\t\"[JSONCanvasViewer] Resource hasn't been set up or has been disposed.\",\n);\n\nexport function applyStyles(container: HTMLElement | ShadowRoot, styleString: string) {\n\tconst style = document.createElement('style');\n\tstyle.innerHTML = styleString;\n\tcontainer.appendChild(style);\n}\n\n// oxlint-disable-next-line max-params\nexport function drawRoundRect(\n\tctx: CanvasRenderingContext2D,\n\tx: number,\n\ty: number,\n\twidth: number,\n\theight: number,\n\tradius: number,\n) {\n\tctx.beginPath();\n\tctx.moveTo(x + radius, y);\n\tctx.lineTo(x + width - radius, y);\n\tctx.quadraticCurveTo(x + width, y, x + width, y + radius);\n\tctx.lineTo(x + width, y + height - radius);\n\tctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\n\tctx.lineTo(x + radius, y + height);\n\tctx.quadraticCurveTo(x, y + height, x, y + height - radius);\n\tctx.lineTo(x, y + radius);\n\tctx.quadraticCurveTo(x, y, x + radius, y);\n\tctx.closePath();\n}\n\nexport function getAnchorCoord(node: JSONCanvasNode, side: 'top' | 'bottom' | 'left' | 'right') {\n\tconst midX = node.x + node.width / 2;\n\tconst midY = node.y + node.height / 2;\n\tswitch (side) {\n\t\tcase 'top': {\n\t\t\treturn { x: midX, y: node.y };\n\t\t}\n\t\tcase 'bottom': {\n\t\t\treturn { x: midX, y: node.y + node.height };\n\t\t}\n\t\tcase 'left': {\n\t\t\treturn { x: node.x, y: midY };\n\t\t}\n\t\tcase 'right': {\n\t\t\treturn { x: node.x + node.width, y: midY };\n\t\t}\n\t\tdefault: {\n\t\t\treturn { x: midX, y: midY };\n\t\t}\n\t}\n}\n\nexport function resizeCanvasForDPR(canvas: HTMLCanvasElement, width: number, height: number) {\n\tconst dpr = window.devicePixelRatio ?? 1;\n\tconst ctx = canvas.getContext('2d');\n\tif (!ctx)\n\t\tthrow new Error(\n\t\t\t'[JSONCanvasViewer] This error is unexpected, probably caused uncontrollable runtime errors. Please contact the developer and show how to reproduce.',\n\t\t);\n\tcanvas.width = Math.round(width * dpr);\n\tcanvas.height = Math.round(height * dpr);\n\tctx.setTransform(1, 0, 0, 1, 0, 0);\n\tctx.scale(dpr, dpr);\n}\n\nexport function round(roundedNum: number, digits: number) {\n\tconst factor = 10 ** digits;\n\treturn Math.round(roundedNum * factor) / factor;\n}\n\ntype MatchingFunc<Args extends GeneralArray> = (...args: Args) => void | Promise<void>;\nexport type Hook<Args extends GeneralArray = [], Async extends boolean = false> = {\n\t(...args: Args): Async extends true ? Promise<void> : void;\n\tsubs: Set<MatchingFunc<Args>>;\n\tsubscribe(callback: MatchingFunc<Args>): void;\n\tunsubscribe(callback: MatchingFunc<Args>): void;\n};\n\n/**\n * A quick function to create a hook that can be subscribed to and unsubscribed from.\n * Pass your arguments as the type parameter\n *\n * @param reverse - Whether the hook should reverse the execution order or not\n * @param async - Whether the hook is async or not\n * @example const hook = makeHook(true);\n */\nexport function makeHook<Args extends GeneralArray = [], Async extends boolean = false>(\n\treverse = false,\n\tasync: Async = false as Async,\n) {\n\tconst result = (\n\t\tasync\n\t\t\t? async (...args: Args) => {\n\t\t\t\t\tif (reverse) {\n\t\t\t\t\t\tconst items = [...result.subs].reverse();\n\t\t\t\t\t\tfor (const callback of items) await callback(...args);\n\t\t\t\t\t} else for (const callback of result.subs) await callback(...args);\n\t\t\t\t}\n\t\t\t: (...args: Args) => {\n\t\t\t\t\tif (reverse) {\n\t\t\t\t\t\tconst items = [...result.subs].reverse();\n\t\t\t\t\t\tfor (const callback of items) void callback(...args);\n\t\t\t\t\t} else for (const callback of result.subs) void callback(...args);\n\t\t\t\t}\n\t) as Hook<Args, Async>;\n\tresult.subs = new Set();\n\tresult.subscribe = (callback: MatchingFunc<Args>) => {\n\t\tresult.subs.add(callback);\n\t};\n\tresult.unsubscribe = (callback: MatchingFunc<Args>) => {\n\t\tresult.subs.delete(callback);\n\t};\n\treturn result;\n}\n"],"mappings":"AAGA,MAAa,EAAmB,MAC/B,uEACA,CAED,SAAgB,EAAY,EAAqC,EAAqB,CACrF,IAAM,EAAQ,SAAS,cAAc,QAAQ,CAC7C,EAAM,UAAY,EAClB,EAAU,YAAY,EAAM,CAI7B,SAAgB,EACf,EACA,EACA,EACA,EACA,EACA,EACC,CACD,EAAI,WAAW,CACf,EAAI,OAAO,EAAI,EAAQ,EAAE,CACzB,EAAI,OAAO,EAAI,EAAQ,EAAQ,EAAE,CACjC,EAAI,iBAAiB,EAAI,EAAO,EAAG,EAAI,EAAO,EAAI,EAAO,CACzD,EAAI,OAAO,EAAI,EAAO,EAAI,EAAS,EAAO,CAC1C,EAAI,iBAAiB,EAAI,EAAO,EAAI,EAAQ,EAAI,EAAQ,EAAQ,EAAI,EAAO,CAC3E,EAAI,OAAO,EAAI,EAAQ,EAAI,EAAO,CAClC,EAAI,iBAAiB,EAAG,EAAI,EAAQ,EAAG,EAAI,EAAS,EAAO,CAC3D,EAAI,OAAO,EAAG,EAAI,EAAO,CACzB,EAAI,iBAAiB,EAAG,EAAG,EAAI,EAAQ,EAAE,CACzC,EAAI,WAAW,CAGhB,SAAgB,EAAe,EAAsB,EAA2C,CAC/F,IAAM,EAAO,EAAK,EAAI,EAAK,MAAQ,EAC7B,EAAO,EAAK,EAAI,EAAK,OAAS,EACpC,OAAQ,EAAR,CACC,IAAK,MACJ,MAAO,CAAE,EAAG,EAAM,EAAG,EAAK,EAAG,CAE9B,IAAK,SACJ,MAAO,CAAE,EAAG,EAAM,EAAG,EAAK,EAAI,EAAK,OAAQ,CAE5C,IAAK,OACJ,MAAO,CAAE,EAAG,EAAK,EAAG,EAAG,EAAM,CAE9B,IAAK,QACJ,MAAO,CAAE,EAAG,EAAK,EAAI,EAAK,MAAO,EAAG,EAAM,CAE3C,QACC,MAAO,CAAE,EAAG,EAAM,EAAG,EAAM,EAK9B,SAAgB,EAAmB,EAA2B,EAAe,EAAgB,CAC5F,IAAM,EAAM,OAAO,kBAAoB,EACjC,EAAM,EAAO,WAAW,KAAK,CACnC,GAAI,CAAC,EACJ,MAAU,MACT,sJACA,CACF,EAAO,MAAQ,KAAK,MAAM,EAAQ,EAAI,CACtC,EAAO,OAAS,KAAK,MAAM,EAAS,EAAI,CACxC,EAAI,aAAa,EAAG,EAAG,EAAG,EAAG,EAAG,EAAE,CAClC,EAAI,MAAM,EAAK,EAAI,CAGpB,SAAgB,EAAM,EAAoB,EAAgB,CACzD,IAAM,EAAS,IAAM,EACrB,OAAO,KAAK,MAAM,EAAa,EAAO,CAAG,EAmB1C,SAAgB,EACf,EAAU,GACV,EAAe,GACd,CACD,IAAM,EACL,EACG,MAAO,GAAG,IAAe,CACzB,GAAI,EAAS,CACZ,IAAM,EAAQ,CAAC,GAAG,EAAO,KAAK,CAAC,SAAS,CACxC,IAAK,IAAM,KAAY,EAAO,MAAM,EAAS,GAAG,EAAK,MAC/C,IAAK,IAAM,KAAY,EAAO,KAAM,MAAM,EAAS,GAAG,EAAK,GAEjE,GAAG,IAAe,CACnB,GAAI,EAAS,CACZ,IAAM,EAAQ,CAAC,GAAG,EAAO,KAAK,CAAC,SAAS,CACxC,IAAK,IAAM,KAAY,EAAY,EAAS,GAAG,EAAK,MAC9C,IAAK,IAAM,KAAY,EAAO,KAAW,EAAS,GAAG,EAAK,EAUrE,MAPA,GAAO,KAAO,IAAI,IAClB,EAAO,UAAa,GAAiC,CACpD,EAAO,KAAK,IAAI,EAAS,EAE1B,EAAO,YAAe,GAAiC,CACtD,EAAO,KAAK,OAAO,EAAS,EAEtB"}

package/dist/modules/Controls/index.d.ts

@@ -2,22 +2,22 @@ import { BaseArgs, BaseModule } from "../../kernel/BaseModule.js";
 import { BaseOptions } from "../../kernel/index.js";
 
 //#region src/modules/Controls/index.d.ts
-interface Options extends BaseOptions {
+type Options = {
   controlsCollapsed?: boolean;
-}
-interface Augmentation {
+} & BaseOptions;
+type Augmentation = {
   toggleControlsCollapse: Controls['toggleCollapse'];
-}
+};
 declare class Controls extends BaseModule<Options, Augmentation> {
-  private _controlsPanel;
-  private _toggleCollapseBtn;
-  private _toggleFullscreenBtn;
-  private _zoomOutBtn;
-  private _zoomSlider;
-  private _zoomInBtn;
-  private _resetViewBtn;
-  private DM;
-  private IH;
+  private _controlsPanel?;
+  private _toggleCollapseBtn?;
+  private _toggleFullscreenBtn?;
+  private _zoomOutBtn?;
+  private _zoomSlider?;
+  private _zoomInBtn?;
+  private _resetViewBtn?;
+  private readonly DM;
+  private readonly IH;
   private collapsed;
   private get controlsPanel();
   private get toggleCollapseBtn();
@@ -28,14 +28,14 @@ declare class Controls extends BaseModule<Options, Augmentation> {
   private get resetViewBtn();
   constructor(...args: BaseArgs);
   toggleCollapse: () => void;
-  private zoomIn;
-  private zoomOut;
-  private slide;
-  private updateFullscreenBtn;
-  private toggleFullscreen;
-  private updateSlider;
-  private scaleToSlider;
-  private dispose;
+  private readonly zoomIn;
+  private readonly zoomOut;
+  private readonly slide;
+  private readonly updateFullscreenBtn;
+  private readonly toggleFullscreen;
+  private readonly updateSlider;
+  private readonly scaleToSlider;
+  private readonly dispose;
 }
 //#endregion
 export { Controls };

package/dist/modules/Controls/index.js

@@ -1,2 +1,2 @@
-import{BaseModule as e}from"../../kernel/BaseModule.js";import t,{destroyError as n}from"../../kernel/utilities.js";import r from"../../kernel/DataManager.js";import i from"../../kernel/Controller.js";import a from"../../kernel/InteractionHandler.js";import o from"./styles.js";const s=`<svg viewBox="-5.28 -5.28 34.56 34.56" fill="none"><path d="M4 9V5.6c0-.56 0-.84.109-1.054a1 1 0 0 1 .437-.437C4.76 4 5.04 4 5.6 4H9M4 15v3.4c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437C4.76 20 5.04 20 5.6 20H9m6-16h3.4c.56 0 .84 0 1.054.109a1 1 0 0 1 .437.437C20 4.76 20 5.04 20 5.6V9m0 6v3.4c0 .56 0 .84-.109 1.054a1 1 0 0 1-.437.437C19.24 20 18.96 20 18.4 20H15" stroke-width="2.4" stroke-linecap="round"/></svg>`;var c=class extends e{_controlsPanel=null;_toggleCollapseBtn=null;_toggleFullscreenBtn=null;_zoomOutBtn=null;_zoomSlider=null;_zoomInBtn=null;_resetViewBtn=null;DM;IH;collapsed;get controlsPanel(){if(this._controlsPanel===null)throw n;return this._controlsPanel}get toggleCollapseBtn(){if(this._toggleCollapseBtn===null)throw n;return this._toggleCollapseBtn}get toggleFullscreenBtn(){if(this._toggleFullscreenBtn===null)throw n;return this._toggleFullscreenBtn}get zoomOutBtn(){if(this._zoomOutBtn===null)throw n;return this._zoomOutBtn}get zoomSlider(){if(this._zoomSlider===null)throw n;return this._zoomSlider}get zoomInBtn(){if(this._zoomInBtn===null)throw n;return this._zoomInBtn}get resetViewBtn(){if(this._resetViewBtn===null)throw n;return this._resetViewBtn}constructor(...e){super(...e),this.collapsed=this.options.controlsCollapsed??!1,this.DM=this.container.get(r),this.IH=this.container.get(a),this.DM.onToggleFullscreen.subscribe(this.updateFullscreenBtn),this.container.get(i).onRefresh.subscribe(this.updateSlider),this._controlsPanel=document.createElement(`div`),this._controlsPanel.className=`JCV-controls`,this._controlsPanel.classList.toggle(`JCV-collapsed`,this.collapsed),t.applyStyles(this._controlsPanel,o),this._toggleCollapseBtn=document.createElement(`button`),this._toggleCollapseBtn.className=`JCV-button JCV-collapse-button JCV-border-shadow-bg`,this._toggleCollapseBtn.innerHTML=`<svg viewBox="-3.6 -3.6 31.2 31.2" stroke-width=".4"><path d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" /></svg>`,this._controlsPanel.appendChild(this._toggleCollapseBtn);let n=document.createElement(`div`);n.className=`JCV-controls-content`,this._toggleFullscreenBtn=document.createElement(`button`),this._toggleFullscreenBtn.className=`JCV-button`,this._toggleFullscreenBtn.innerHTML=s,n.appendChild(this._toggleFullscreenBtn),this._zoomOutBtn=document.createElement(`button`),this.zoomOutBtn.className=`JCV-button`,this._zoomOutBtn.innerHTML=`<svg viewBox="-1.2 -1.2 26.4 26.4"><path d="M6 12h12" stroke-width="2" stroke-linecap="round" /></svg>`,n.appendChild(this._zoomOutBtn),this._zoomSlider=document.createElement(`input`),this._zoomSlider.type=`range`,this._zoomSlider.className=`JCV-zoom-slider`,this._zoomSlider.min=`-30`,this._zoomSlider.max=`30`,this._zoomSlider.value=`0`,n.appendChild(this._zoomSlider),this._zoomInBtn=document.createElement(`button`),this._zoomInBtn.className=`JCV-button`,this._zoomInBtn.innerHTML=`<svg viewBox="-1.2 -1.2 26.4 26.4"><path d="M6 12h12m-6-6v12" stroke-width="2" stroke-linecap="round" /></svg>`,n.appendChild(this._zoomInBtn),this._resetViewBtn=document.createElement(`button`),this._resetViewBtn.className=`JCV-button`,this._resetViewBtn.innerHTML=`<svg viewBox="-6 -6 30 30" stroke-width=".08"><path d="m14.955 7.986.116.01a1 1 0 0 1 .85 1.13 8 8 0 0 1-13.374 4.728l-.84.84c-.63.63-1.707.184-1.707-.707V10h3.987c.89 0 1.337 1.077.707 1.707l-.731.731a6 6 0 0 0 8.347-.264 6 6 0 0 0 1.63-3.33 1 1 0 0 1 1.131-.848zM11.514.813a8 8 0 0 1 1.942 1.336l.837-.837c.63-.63 1.707-.184 1.707.707V6h-3.981c-.89 0-1.337-1.077-.707-1.707l.728-.729a6 6 0 0 0-9.98 3.591 1 1 0 1 1-1.98-.281A8 8 0 0 1 11.514.813Z" /></svg>`,n.appendChild(this._resetViewBtn),this._controlsPanel.appendChild(n),this.DM.data.container.appendChild(this._controlsPanel),this._toggleCollapseBtn.addEventListener(`click`,this.toggleCollapse),this._zoomInBtn.addEventListener(`click`,this.zoomIn),this._zoomOutBtn.addEventListener(`click`,this.zoomOut),this._zoomSlider.addEventListener(`input`,this.slide),this._resetViewBtn.addEventListener(`click`,this.DM.resetView),this._toggleFullscreenBtn.addEventListener(`click`,this.toggleFullscreen),this.augment({toggleControlsCollapse:this.toggleCollapse}),this.onDispose(this.dispose)}toggleCollapse=()=>{this.collapsed=!this.collapsed,this.controlsPanel.classList.toggle(`JCV-collapsed`,this.collapsed),this.collapsed||this.updateSlider()};zoomIn=()=>this.IH.zoom(1.3,this.DM.middleViewer());zoomOut=()=>this.IH.zoom(1/1.3,this.DM.middleViewer());slide=()=>this.IH.trueZoom(1.1**Number(this.zoomSlider.value)/this.DM.data.scale,this.DM.middleViewer());updateFullscreenBtn=e=>{e===`enter`?this.toggleFullscreenBtn.innerHTML=`<svg viewBox="-40.32 -40.32 176.64 176.64"><path d="M30 60H6a6 6 0 0 0 0 12h18v18a6 6 0 0 0 12 0V66a5.997 5.997 0 0 0-6-6Zm60 0H66a5.997 5.997 0 0 0-6 6v24a6 6 0 0 0 12 0V72h18a6 6 0 0 0 0-12ZM66 36h24a6 6 0 0 0 0-12H72V6a6 6 0 0 0-12 0v24a5.997 5.997 0 0 0 6 6ZM30 0a5.997 5.997 0 0 0-6 6v18H6a6 6 0 0 0 0 12h24a5.997 5.997 0 0 0 6-6V6a5.997 5.997 0 0 0-6-6Z"/></svg>`:this.toggleFullscreenBtn.innerHTML=s};toggleFullscreen=()=>this.DM.toggleFullscreen();updateSlider=()=>{this.collapsed||(this.zoomSlider.value=String(this.scaleToSlider(this.DM.data.scale)))};scaleToSlider=e=>Math.log(e)/Math.log(1.1);dispose=()=>{this.toggleCollapseBtn.removeEventListener(`click`,this.toggleCollapse),this.zoomInBtn.removeEventListener(`click`,this.zoomIn),this.zoomOutBtn.removeEventListener(`click`,this.zoomOut),this.zoomSlider.removeEventListener(`input`,this.slide),this.resetViewBtn.removeEventListener(`click`,this.DM.resetView),this.toggleFullscreenBtn.removeEventListener(`click`,this.toggleFullscreen),this.controlsPanel.remove(),this._controlsPanel=null,this._toggleCollapseBtn=null,this._zoomInBtn=null,this._zoomOutBtn=null,this._zoomSlider=null,this._resetViewBtn=null,this._toggleFullscreenBtn=null}};export{c as default};
+import{BaseModule as e}from"../../kernel/BaseModule.js";import{applyStyles as t,destroyError as n}from"../../kernel/utilities.js";import r from"../../kernel/DataManager.js";import i from"../../kernel/Controller.js";import a from"../../kernel/InteractionHandler.js";import o from"./styles.js";const s=`<svg viewBox="-5.28 -5.28 34.56 34.56" fill="none"><path d="M4 9V5.6c0-.56 0-.84.109-1.054a1 1 0 0 1 .437-.437C4.76 4 5.04 4 5.6 4H9M4 15v3.4c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437C4.76 20 5.04 20 5.6 20H9m6-16h3.4c.56 0 .84 0 1.054.109a1 1 0 0 1 .437.437C20 4.76 20 5.04 20 5.6V9m0 6v3.4c0 .56 0 .84-.109 1.054a1 1 0 0 1-.437.437C19.24 20 18.96 20 18.4 20H15" stroke-width="2.4" stroke-linecap="round"/></svg>`;var c=class extends e{_controlsPanel;_toggleCollapseBtn;_toggleFullscreenBtn;_zoomOutBtn;_zoomSlider;_zoomInBtn;_resetViewBtn;DM;IH;collapsed;get controlsPanel(){if(!this._controlsPanel)throw n;return this._controlsPanel}get toggleCollapseBtn(){if(!this._toggleCollapseBtn)throw n;return this._toggleCollapseBtn}get toggleFullscreenBtn(){if(!this._toggleFullscreenBtn)throw n;return this._toggleFullscreenBtn}get zoomOutBtn(){if(!this._zoomOutBtn)throw n;return this._zoomOutBtn}get zoomSlider(){if(!this._zoomSlider)throw n;return this._zoomSlider}get zoomInBtn(){if(!this._zoomInBtn)throw n;return this._zoomInBtn}get resetViewBtn(){if(!this._resetViewBtn)throw n;return this._resetViewBtn}constructor(...e){super(...e),this.collapsed=this.options.controlsCollapsed??!1,this.DM=this.container.get(r),this.IH=this.container.get(a),this.DM.onToggleFullscreen.subscribe(this.updateFullscreenBtn),this.container.get(i).onRefresh.subscribe(this.updateSlider),this._controlsPanel=document.createElement(`div`),this._controlsPanel.className=`JCV-controls`,this._controlsPanel.classList.toggle(`JCV-collapsed`,this.collapsed),t(this._controlsPanel,o),this._toggleCollapseBtn=document.createElement(`button`),this._toggleCollapseBtn.className=`JCV-button JCV-collapse-button JCV-border-shadow-bg`,this._toggleCollapseBtn.innerHTML=`<svg viewBox="-3.6 -3.6 31.2 31.2" stroke-width=".4"><path d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" /></svg>`,this._controlsPanel.appendChild(this._toggleCollapseBtn);let n=document.createElement(`div`);n.className=`JCV-controls-content`,this._toggleFullscreenBtn=document.createElement(`button`),this._toggleFullscreenBtn.className=`JCV-button`,this._toggleFullscreenBtn.innerHTML=s,n.appendChild(this._toggleFullscreenBtn),this._zoomOutBtn=document.createElement(`button`),this.zoomOutBtn.className=`JCV-button`,this._zoomOutBtn.innerHTML=`<svg viewBox="-1.2 -1.2 26.4 26.4"><path d="M6 12h12" stroke-width="2" stroke-linecap="round" /></svg>`,n.appendChild(this._zoomOutBtn),this._zoomSlider=document.createElement(`input`),this._zoomSlider.type=`range`,this._zoomSlider.className=`JCV-zoom-slider`,this._zoomSlider.min=`-30`,this._zoomSlider.max=`30`,this._zoomSlider.value=`0`,n.appendChild(this._zoomSlider),this._zoomInBtn=document.createElement(`button`),this._zoomInBtn.className=`JCV-button`,this._zoomInBtn.innerHTML=`<svg viewBox="-1.2 -1.2 26.4 26.4"><path d="M6 12h12m-6-6v12" stroke-width="2" stroke-linecap="round" /></svg>`,n.appendChild(this._zoomInBtn),this._resetViewBtn=document.createElement(`button`),this._resetViewBtn.className=`JCV-button`,this._resetViewBtn.innerHTML=`<svg viewBox="-6 -6 30 30" stroke-width=".08"><path d="m14.955 7.986.116.01a1 1 0 0 1 .85 1.13 8 8 0 0 1-13.374 4.728l-.84.84c-.63.63-1.707.184-1.707-.707V10h3.987c.89 0 1.337 1.077.707 1.707l-.731.731a6 6 0 0 0 8.347-.264 6 6 0 0 0 1.63-3.33 1 1 0 0 1 1.131-.848zM11.514.813a8 8 0 0 1 1.942 1.336l.837-.837c.63-.63 1.707-.184 1.707.707V6h-3.981c-.89 0-1.337-1.077-.707-1.707l.728-.729a6 6 0 0 0-9.98 3.591 1 1 0 1 1-1.98-.281A8 8 0 0 1 11.514.813Z" /></svg>`,n.appendChild(this._resetViewBtn),this._controlsPanel.appendChild(n),this.DM.data.container.appendChild(this._controlsPanel),this._toggleCollapseBtn.addEventListener(`click`,this.toggleCollapse),this._zoomInBtn.addEventListener(`click`,this.zoomIn),this._zoomOutBtn.addEventListener(`click`,this.zoomOut),this._zoomSlider.addEventListener(`input`,this.slide),this._resetViewBtn.addEventListener(`click`,this.DM.resetView),this._toggleFullscreenBtn.addEventListener(`click`,this.toggleFullscreen),this.augment({toggleControlsCollapse:this.toggleCollapse}),this.onDispose(this.dispose)}toggleCollapse=()=>{this.collapsed=!this.collapsed,this.controlsPanel.classList.toggle(`JCV-collapsed`,this.collapsed),this.collapsed||this.updateSlider()};zoomIn=()=>this.IH.zoom(1.3,this.DM.middleViewer());zoomOut=()=>this.IH.zoom(1/1.3,this.DM.middleViewer());slide=()=>this.IH.trueZoom(1.1**Number(this.zoomSlider.value)/this.DM.data.scale,this.DM.middleViewer());updateFullscreenBtn=e=>{this.toggleFullscreenBtn.innerHTML=e===`enter`?`<svg viewBox="-40.32 -40.32 176.64 176.64"><path d="M30 60H6a6 6 0 0 0 0 12h18v18a6 6 0 0 0 12 0V66a5.997 5.997 0 0 0-6-6Zm60 0H66a5.997 5.997 0 0 0-6 6v24a6 6 0 0 0 12 0V72h18a6 6 0 0 0 0-12ZM66 36h24a6 6 0 0 0 0-12H72V6a6 6 0 0 0-12 0v24a5.997 5.997 0 0 0 6 6ZM30 0a5.997 5.997 0 0 0-6 6v18H6a6 6 0 0 0 0 12h24a5.997 5.997 0 0 0 6-6V6a5.997 5.997 0 0 0-6-6Z"/></svg>`:s};toggleFullscreen=()=>this.DM.toggleFullscreen();updateSlider=()=>{this.collapsed||(this.zoomSlider.value=String(this.scaleToSlider(this.DM.data.scale)))};scaleToSlider=e=>Math.log(e)/Math.log(1.1);dispose=()=>{this.toggleCollapseBtn.removeEventListener(`click`,this.toggleCollapse),this.zoomInBtn.removeEventListener(`click`,this.zoomIn),this.zoomOutBtn.removeEventListener(`click`,this.zoomOut),this.zoomSlider.removeEventListener(`input`,this.slide),this.resetViewBtn.removeEventListener(`click`,this.DM.resetView),this.toggleFullscreenBtn.removeEventListener(`click`,this.toggleFullscreen),this.controlsPanel.remove(),this._controlsPanel=void 0,this._toggleCollapseBtn=void 0,this._zoomInBtn=void 0,this._zoomOutBtn=void 0,this._zoomSlider=void 0,this._resetViewBtn=void 0,this._toggleFullscreenBtn=void 0}};export{c as default};
 //# sourceMappingURL=index.js.map

package/dist/modules/Controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["style"],"sources":["../../../src/modules/Controls/index.ts"],"sourcesContent":["import type { BaseOptions } from '$';\nimport { type BaseArgs, BaseModule } from '$/BaseModule';\nimport Controller from '$/Controller';\nimport DataManager from '$/DataManager';\nimport InteractionHandler from '$/InteractionHandler';\nimport utilities, { destroyError } from '$/utilities';\nimport style from './styles.scss?inline';\n\ninterface Options extends BaseOptions {\n\tcontrolsCollapsed?: boolean;\n}\n\ninterface Augmentation {\n\ttoggleControlsCollapse: Controls['toggleCollapse'];\n}\n\nconst resetIcon =\n\t'<svg viewBox=\"-6 -6 30 30\" stroke-width=\".08\"><path d=\"m14.955 7.986.116.01a1 1 0 0 1 .85 1.13 8 8 0 0 1-13.374 4.728l-.84.84c-.63.63-1.707.184-1.707-.707V10h3.987c.89 0 1.337 1.077.707 1.707l-.731.731a6 6 0 0 0 8.347-.264 6 6 0 0 0 1.63-3.33 1 1 0 0 1 1.131-.848zM11.514.813a8 8 0 0 1 1.942 1.336l.837-.837c.63-.63 1.707-.184 1.707.707V6h-3.981c-.89 0-1.337-1.077-.707-1.707l.728-.729a6 6 0 0 0-9.98 3.591 1 1 0 1 1-1.98-.281A8 8 0 0 1 11.514.813Z\" /></svg>';\nconst enterFullscreenIcon =\n\t'<svg viewBox=\"-5.28 -5.28 34.56 34.56\" fill=\"none\"><path d=\"M4 9V5.6c0-.56 0-.84.109-1.054a1 1 0 0 1 .437-.437C4.76 4 5.04 4 5.6 4H9M4 15v3.4c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437C4.76 20 5.04 20 5.6 20H9m6-16h3.4c.56 0 .84 0 1.054.109a1 1 0 0 1 .437.437C20 4.76 20 5.04 20 5.6V9m0 6v3.4c0 .56 0 .84-.109 1.054a1 1 0 0 1-.437.437C19.24 20 18.96 20 18.4 20H15\" stroke-width=\"2.4\" stroke-linecap=\"round\"/></svg>';\nconst exitFullscreenIcon =\n\t'<svg viewBox=\"-40.32 -40.32 176.64 176.64\"><path d=\"M30 60H6a6 6 0 0 0 0 12h18v18a6 6 0 0 0 12 0V66a5.997 5.997 0 0 0-6-6Zm60 0H66a5.997 5.997 0 0 0-6 6v24a6 6 0 0 0 12 0V72h18a6 6 0 0 0 0-12ZM66 36h24a6 6 0 0 0 0-12H72V6a6 6 0 0 0-12 0v24a5.997 5.997 0 0 0 6 6ZM30 0a5.997 5.997 0 0 0-6 6v18H6a6 6 0 0 0 0 12h24a5.997 5.997 0 0 0 6-6V6a5.997 5.997 0 0 0-6-6Z\"/></svg>';\nconst zoomInIcon =\n\t'<svg viewBox=\"-1.2 -1.2 26.4 26.4\"><path d=\"M6 12h12m-6-6v12\" stroke-width=\"2\" stroke-linecap=\"round\" /></svg>';\nconst zoomOutIcon =\n\t'<svg viewBox=\"-1.2 -1.2 26.4 26.4\"><path d=\"M6 12h12\" stroke-width=\"2\" stroke-linecap=\"round\" /></svg>';\nconst toggleCollapseIcon =\n\t'<svg viewBox=\"-3.6 -3.6 31.2 31.2\" stroke-width=\".4\"><path d=\"M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z\" /></svg>';\n\nexport default class Controls extends BaseModule<Options, Augmentation> {\n\tprivate _controlsPanel: HTMLDivElement | null = null;\n\tprivate _toggleCollapseBtn: HTMLButtonElement | null = null;\n\tprivate _toggleFullscreenBtn: HTMLButtonElement | null = null;\n\tprivate _zoomOutBtn: HTMLButtonElement | null = null;\n\tprivate _zoomSlider: HTMLInputElement | null = null;\n\tprivate _zoomInBtn: HTMLButtonElement | null = null;\n\tprivate _resetViewBtn: HTMLButtonElement | null = null;\n\tprivate DM: DataManager;\n\tprivate IH: InteractionHandler;\n\tprivate collapsed: boolean;\n\n\tprivate get controlsPanel() {\n\t\tif (this._controlsPanel === null) throw destroyError;\n\t\treturn this._controlsPanel;\n\t}\n\tprivate get toggleCollapseBtn() {\n\t\tif (this._toggleCollapseBtn === null) throw destroyError;\n\t\treturn this._toggleCollapseBtn;\n\t}\n\tprivate get toggleFullscreenBtn() {\n\t\tif (this._toggleFullscreenBtn === null) throw destroyError;\n\t\treturn this._toggleFullscreenBtn;\n\t}\n\tprivate get zoomOutBtn() {\n\t\tif (this._zoomOutBtn === null) throw destroyError;\n\t\treturn this._zoomOutBtn;\n\t}\n\tprivate get zoomSlider() {\n\t\tif (this._zoomSlider === null) throw destroyError;\n\t\treturn this._zoomSlider;\n\t}\n\tprivate get zoomInBtn() {\n\t\tif (this._zoomInBtn === null) throw destroyError;\n\t\treturn this._zoomInBtn;\n\t}\n\tprivate get resetViewBtn() {\n\t\tif (this._resetViewBtn === null) throw destroyError;\n\t\treturn this._resetViewBtn;\n\t}\n\n\tconstructor(...args: BaseArgs) {\n\t\tsuper(...args);\n\t\tthis.collapsed = this.options.controlsCollapsed ?? false;\n\t\tthis.DM = this.container.get(DataManager);\n\t\tthis.IH = this.container.get(InteractionHandler);\n\t\tthis.DM.onToggleFullscreen.subscribe(this.updateFullscreenBtn);\n\t\tthis.container.get(Controller).onRefresh.subscribe(this.updateSlider);\n\n\t\tthis._controlsPanel = document.createElement('div');\n\t\tthis._controlsPanel.className = 'JCV-controls';\n\t\tthis._controlsPanel.classList.toggle('JCV-collapsed', this.collapsed);\n\n\t\tutilities.applyStyles(this._controlsPanel, style);\n\n\t\tthis._toggleCollapseBtn = document.createElement('button');\n\t\tthis._toggleCollapseBtn.className = 'JCV-button JCV-collapse-button JCV-border-shadow-bg';\n\t\tthis._toggleCollapseBtn.innerHTML = toggleCollapseIcon;\n\t\tthis._controlsPanel.appendChild(this._toggleCollapseBtn);\n\n\t\tconst controlsContent = document.createElement('div');\n\t\tcontrolsContent.className = 'JCV-controls-content';\n\n\t\tthis._toggleFullscreenBtn = document.createElement('button');\n\t\tthis._toggleFullscreenBtn.className = 'JCV-button';\n\t\tthis._toggleFullscreenBtn.innerHTML = enterFullscreenIcon;\n\t\tcontrolsContent.appendChild(this._toggleFullscreenBtn);\n\n\t\tthis._zoomOutBtn = document.createElement('button');\n\t\tthis.zoomOutBtn.className = 'JCV-button';\n\t\tthis._zoomOutBtn.innerHTML = zoomOutIcon;\n\t\tcontrolsContent.appendChild(this._zoomOutBtn);\n\n\t\tthis._zoomSlider = document.createElement('input');\n\t\tthis._zoomSlider.type = 'range';\n\t\tthis._zoomSlider.className = 'JCV-zoom-slider';\n\t\tthis._zoomSlider.min = '-30';\n\t\tthis._zoomSlider.max = '30';\n\t\tthis._zoomSlider.value = '0';\n\t\tcontrolsContent.appendChild(this._zoomSlider);\n\n\t\tthis._zoomInBtn = document.createElement('button');\n\t\tthis._zoomInBtn.className = 'JCV-button';\n\t\tthis._zoomInBtn.innerHTML = zoomInIcon;\n\t\tcontrolsContent.appendChild(this._zoomInBtn);\n\n\t\tthis._resetViewBtn = document.createElement('button');\n\t\tthis._resetViewBtn.className = 'JCV-button';\n\t\tthis._resetViewBtn.innerHTML = resetIcon;\n\t\tcontrolsContent.appendChild(this._resetViewBtn);\n\n\t\tthis._controlsPanel.appendChild(controlsContent);\n\n\t\tthis.DM.data.container.appendChild(this._controlsPanel);\n\n\t\tthis._toggleCollapseBtn.addEventListener('click', this.toggleCollapse);\n\t\tthis._zoomInBtn.addEventListener('click', this.zoomIn);\n\t\tthis._zoomOutBtn.addEventListener('click', this.zoomOut);\n\t\tthis._zoomSlider.addEventListener('input', this.slide);\n\t\tthis._resetViewBtn.addEventListener('click', this.DM.resetView);\n\t\tthis._toggleFullscreenBtn.addEventListener('click', this.toggleFullscreen);\n\n\t\tthis.augment({ toggleControlsCollapse: this.toggleCollapse });\n\t\tthis.onDispose(this.dispose);\n\t}\n\ttoggleCollapse = () => {\n\t\tthis.collapsed = !this.collapsed;\n\t\tthis.controlsPanel.classList.toggle('JCV-collapsed', this.collapsed);\n\t\tif (!this.collapsed) this.updateSlider();\n\t};\n\tprivate zoomIn = () => this.IH.zoom(1.3, this.DM.middleViewer());\n\tprivate zoomOut = () => this.IH.zoom(1 / 1.3, this.DM.middleViewer());\n\tprivate slide = () =>\n\t\tthis.IH.trueZoom(\n\t\t\t1.1 ** Number(this.zoomSlider.value) / this.DM.data.scale,\n\t\t\tthis.DM.middleViewer(),\n\t\t);\n\n\tprivate updateFullscreenBtn = (enter: 'enter' | 'exit') => {\n\t\tif (enter === 'enter') this.toggleFullscreenBtn.innerHTML = exitFullscreenIcon;\n\t\telse this.toggleFullscreenBtn.innerHTML = enterFullscreenIcon;\n\t};\n\tprivate toggleFullscreen = () => this.DM.toggleFullscreen();\n\n\tprivate updateSlider = () => {\n\t\tif (this.collapsed) return;\n\t\tthis.zoomSlider.value = String(this.scaleToSlider(this.DM.data.scale));\n\t};\n\tprivate scaleToSlider = (scale: number) => Math.log(scale) / Math.log(1.1);\n\n\tprivate dispose = () => {\n\t\tthis.toggleCollapseBtn.removeEventListener('click', this.toggleCollapse);\n\t\tthis.zoomInBtn.removeEventListener('click', this.zoomIn);\n\t\tthis.zoomOutBtn.removeEventListener('click', this.zoomOut);\n\t\tthis.zoomSlider.removeEventListener('input', this.slide);\n\t\tthis.resetViewBtn.removeEventListener('click', this.DM.resetView);\n\t\tthis.toggleFullscreenBtn.removeEventListener('click', this.toggleFullscreen);\n\t\tthis.controlsPanel.remove();\n\t\tthis._controlsPanel = null;\n\t\tthis._toggleCollapseBtn = null;\n\t\tthis._zoomInBtn = null;\n\t\tthis._zoomOutBtn = null;\n\t\tthis._zoomSlider = null;\n\t\tthis._resetViewBtn = null;\n\t\tthis._toggleFullscreenBtn = null;\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["style"],"sources":["../../../src/modules/Controls/index.ts"],"sourcesContent":["import type { BaseOptions } from '$';\nimport type { BaseArgs } from '$/BaseModule';\nimport { BaseModule } from '$/BaseModule';\nimport Controller from '$/Controller';\nimport DataManager from '$/DataManager';\nimport InteractionHandler from '$/InteractionHandler';\nimport { applyStyles, destroyError } from '$/utilities';\nimport style from './styles.scss?inline';\n\ntype Options = {\n\tcontrolsCollapsed?: boolean;\n} & BaseOptions;\n\ntype Augmentation = {\n\ttoggleControlsCollapse: Controls['toggleCollapse'];\n};\n\nconst resetIcon =\n\t'<svg viewBox=\"-6 -6 30 30\" stroke-width=\".08\"><path d=\"m14.955 7.986.116.01a1 1 0 0 1 .85 1.13 8 8 0 0 1-13.374 4.728l-.84.84c-.63.63-1.707.184-1.707-.707V10h3.987c.89 0 1.337 1.077.707 1.707l-.731.731a6 6 0 0 0 8.347-.264 6 6 0 0 0 1.63-3.33 1 1 0 0 1 1.131-.848zM11.514.813a8 8 0 0 1 1.942 1.336l.837-.837c.63-.63 1.707-.184 1.707.707V6h-3.981c-.89 0-1.337-1.077-.707-1.707l.728-.729a6 6 0 0 0-9.98 3.591 1 1 0 1 1-1.98-.281A8 8 0 0 1 11.514.813Z\" /></svg>';\nconst enterFullscreenIcon =\n\t'<svg viewBox=\"-5.28 -5.28 34.56 34.56\" fill=\"none\"><path d=\"M4 9V5.6c0-.56 0-.84.109-1.054a1 1 0 0 1 .437-.437C4.76 4 5.04 4 5.6 4H9M4 15v3.4c0 .56 0 .84.109 1.054a1 1 0 0 0 .437.437C4.76 20 5.04 20 5.6 20H9m6-16h3.4c.56 0 .84 0 1.054.109a1 1 0 0 1 .437.437C20 4.76 20 5.04 20 5.6V9m0 6v3.4c0 .56 0 .84-.109 1.054a1 1 0 0 1-.437.437C19.24 20 18.96 20 18.4 20H15\" stroke-width=\"2.4\" stroke-linecap=\"round\"/></svg>';\nconst exitFullscreenIcon =\n\t'<svg viewBox=\"-40.32 -40.32 176.64 176.64\"><path d=\"M30 60H6a6 6 0 0 0 0 12h18v18a6 6 0 0 0 12 0V66a5.997 5.997 0 0 0-6-6Zm60 0H66a5.997 5.997 0 0 0-6 6v24a6 6 0 0 0 12 0V72h18a6 6 0 0 0 0-12ZM66 36h24a6 6 0 0 0 0-12H72V6a6 6 0 0 0-12 0v24a5.997 5.997 0 0 0 6 6ZM30 0a5.997 5.997 0 0 0-6 6v18H6a6 6 0 0 0 0 12h24a5.997 5.997 0 0 0 6-6V6a5.997 5.997 0 0 0-6-6Z\"/></svg>';\nconst zoomInIcon =\n\t'<svg viewBox=\"-1.2 -1.2 26.4 26.4\"><path d=\"M6 12h12m-6-6v12\" stroke-width=\"2\" stroke-linecap=\"round\" /></svg>';\nconst zoomOutIcon =\n\t'<svg viewBox=\"-1.2 -1.2 26.4 26.4\"><path d=\"M6 12h12\" stroke-width=\"2\" stroke-linecap=\"round\" /></svg>';\nconst toggleCollapseIcon =\n\t'<svg viewBox=\"-3.6 -3.6 31.2 31.2\" stroke-width=\".4\"><path d=\"M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z\" /></svg>';\n\nexport default class Controls extends BaseModule<Options, Augmentation> {\n\tprivate _controlsPanel?: HTMLDivElement;\n\tprivate _toggleCollapseBtn?: HTMLButtonElement;\n\tprivate _toggleFullscreenBtn?: HTMLButtonElement;\n\tprivate _zoomOutBtn?: HTMLButtonElement;\n\tprivate _zoomSlider?: HTMLInputElement;\n\tprivate _zoomInBtn?: HTMLButtonElement;\n\tprivate _resetViewBtn?: HTMLButtonElement;\n\tprivate readonly DM: DataManager;\n\tprivate readonly IH: InteractionHandler;\n\tprivate collapsed: boolean;\n\n\tprivate get controlsPanel() {\n\t\tif (!this._controlsPanel) throw destroyError;\n\t\treturn this._controlsPanel;\n\t}\n\tprivate get toggleCollapseBtn() {\n\t\tif (!this._toggleCollapseBtn) throw destroyError;\n\t\treturn this._toggleCollapseBtn;\n\t}\n\tprivate get toggleFullscreenBtn() {\n\t\tif (!this._toggleFullscreenBtn) throw destroyError;\n\t\treturn this._toggleFullscreenBtn;\n\t}\n\tprivate get zoomOutBtn() {\n\t\tif (!this._zoomOutBtn) throw destroyError;\n\t\treturn this._zoomOutBtn;\n\t}\n\tprivate get zoomSlider() {\n\t\tif (!this._zoomSlider) throw destroyError;\n\t\treturn this._zoomSlider;\n\t}\n\tprivate get zoomInBtn() {\n\t\tif (!this._zoomInBtn) throw destroyError;\n\t\treturn this._zoomInBtn;\n\t}\n\tprivate get resetViewBtn() {\n\t\tif (!this._resetViewBtn) throw destroyError;\n\t\treturn this._resetViewBtn;\n\t}\n\n\tconstructor(...args: BaseArgs) {\n\t\tsuper(...args);\n\t\tthis.collapsed = this.options.controlsCollapsed ?? false;\n\t\tthis.DM = this.container.get(DataManager);\n\t\tthis.IH = this.container.get(InteractionHandler);\n\t\tthis.DM.onToggleFullscreen.subscribe(this.updateFullscreenBtn);\n\t\tthis.container.get(Controller).onRefresh.subscribe(this.updateSlider);\n\n\t\tthis._controlsPanel = document.createElement('div');\n\t\tthis._controlsPanel.className = 'JCV-controls';\n\t\tthis._controlsPanel.classList.toggle('JCV-collapsed', this.collapsed);\n\n\t\tapplyStyles(this._controlsPanel, style);\n\n\t\tthis._toggleCollapseBtn = document.createElement('button');\n\t\tthis._toggleCollapseBtn.className = 'JCV-button JCV-collapse-button JCV-border-shadow-bg';\n\t\tthis._toggleCollapseBtn.innerHTML = toggleCollapseIcon;\n\t\tthis._controlsPanel.appendChild(this._toggleCollapseBtn);\n\n\t\tconst controlsContent = document.createElement('div');\n\t\tcontrolsContent.className = 'JCV-controls-content';\n\n\t\tthis._toggleFullscreenBtn = document.createElement('button');\n\t\tthis._toggleFullscreenBtn.className = 'JCV-button';\n\t\tthis._toggleFullscreenBtn.innerHTML = enterFullscreenIcon;\n\t\tcontrolsContent.appendChild(this._toggleFullscreenBtn);\n\n\t\tthis._zoomOutBtn = document.createElement('button');\n\t\tthis.zoomOutBtn.className = 'JCV-button';\n\t\tthis._zoomOutBtn.innerHTML = zoomOutIcon;\n\t\tcontrolsContent.appendChild(this._zoomOutBtn);\n\n\t\tthis._zoomSlider = document.createElement('input');\n\t\tthis._zoomSlider.type = 'range';\n\t\tthis._zoomSlider.className = 'JCV-zoom-slider';\n\t\tthis._zoomSlider.min = '-30';\n\t\tthis._zoomSlider.max = '30';\n\t\tthis._zoomSlider.value = '0';\n\t\tcontrolsContent.appendChild(this._zoomSlider);\n\n\t\tthis._zoomInBtn = document.createElement('button');\n\t\tthis._zoomInBtn.className = 'JCV-button';\n\t\tthis._zoomInBtn.innerHTML = zoomInIcon;\n\t\tcontrolsContent.appendChild(this._zoomInBtn);\n\n\t\tthis._resetViewBtn = document.createElement('button');\n\t\tthis._resetViewBtn.className = 'JCV-button';\n\t\tthis._resetViewBtn.innerHTML = resetIcon;\n\t\tcontrolsContent.appendChild(this._resetViewBtn);\n\n\t\tthis._controlsPanel.appendChild(controlsContent);\n\n\t\tthis.DM.data.container.appendChild(this._controlsPanel);\n\n\t\tthis._toggleCollapseBtn.addEventListener('click', this.toggleCollapse);\n\t\tthis._zoomInBtn.addEventListener('click', this.zoomIn);\n\t\tthis._zoomOutBtn.addEventListener('click', this.zoomOut);\n\t\tthis._zoomSlider.addEventListener('input', this.slide);\n\t\tthis._resetViewBtn.addEventListener('click', this.DM.resetView);\n\t\tthis._toggleFullscreenBtn.addEventListener('click', this.toggleFullscreen);\n\n\t\tthis.augment({ toggleControlsCollapse: this.toggleCollapse });\n\t\tthis.onDispose(this.dispose);\n\t}\n\ttoggleCollapse = () => {\n\t\tthis.collapsed = !this.collapsed;\n\t\tthis.controlsPanel.classList.toggle('JCV-collapsed', this.collapsed);\n\t\tif (!this.collapsed) this.updateSlider();\n\t};\n\tprivate readonly zoomIn = () => this.IH.zoom(1.3, this.DM.middleViewer());\n\tprivate readonly zoomOut = () => this.IH.zoom(1 / 1.3, this.DM.middleViewer());\n\tprivate readonly slide = () =>\n\t\tthis.IH.trueZoom(\n\t\t\t1.1 ** Number(this.zoomSlider.value) / this.DM.data.scale,\n\t\t\tthis.DM.middleViewer(),\n\t\t);\n\n\tprivate readonly updateFullscreenBtn = (enter: 'enter' | 'exit') => {\n\t\tthis.toggleFullscreenBtn.innerHTML =\n\t\t\tenter === 'enter' ? exitFullscreenIcon : enterFullscreenIcon;\n\t};\n\tprivate readonly toggleFullscreen = () => this.DM.toggleFullscreen();\n\n\tprivate readonly updateSlider = () => {\n\t\tif (this.collapsed) return;\n\t\tthis.zoomSlider.value = String(this.scaleToSlider(this.DM.data.scale));\n\t};\n\tprivate readonly scaleToSlider = (scale: number) => Math.log(scale) / Math.log(1.1);\n\n\tprivate readonly dispose = () => {\n\t\tthis.toggleCollapseBtn.removeEventListener('click', this.toggleCollapse);\n\t\tthis.zoomInBtn.removeEventListener('click', this.zoomIn);\n\t\tthis.zoomOutBtn.removeEventListener('click', this.zoomOut);\n\t\tthis.zoomSlider.removeEventListener('input', this.slide);\n\t\tthis.resetViewBtn.removeEventListener('click', this.DM.resetView);\n\t\tthis.toggleFullscreenBtn.removeEventListener('click', this.toggleFullscreen);\n\t\tthis.controlsPanel.remove();\n\t\tthis._controlsPanel = undefined;\n\t\tthis._toggleCollapseBtn = undefined;\n\t\tthis._zoomInBtn = undefined;\n\t\tthis._zoomOutBtn = undefined;\n\t\tthis._zoomSlider = undefined;\n\t\tthis._resetViewBtn = undefined;\n\t\tthis._toggleFullscreenBtn = undefined;\n\t};\n}\n"],"mappings":"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"}

package/dist/modules/DebugPanel/index.d.ts

@@ -2,12 +2,12 @@ import { BaseArgs, BaseModule } from "../../kernel/BaseModule.js";
 
 //#region src/modules/DebugPanel/index.d.ts
 declare class DebugPanel extends BaseModule {
-  private _debugPanel;
-  private DM;
+  private _debugPanel?;
+  private readonly DM;
   private get debugPanel();
   constructor(...args: BaseArgs);
-  private update;
-  private dispose;
+  private readonly update;
+  private readonly dispose;
 }
 //#endregion
 export { DebugPanel };

package/dist/modules/DebugPanel/index.js

@@ -1,2 +1,2 @@
-import{BaseModule as e}from"../../kernel/BaseModule.js";import t,{destroyError as n}from"../../kernel/utilities.js";import r from"../../kernel/DataManager.js";import i from"../../kernel/Controller.js";import a from"./styles.js";var o=class extends e{_debugPanel=null;DM;get debugPanel(){if(!this._debugPanel)throw n;return this._debugPanel}constructor(...e){super(...e),this.DM=this.container.get(r),this.container.get(i).onRefresh.subscribe(this.update),this._debugPanel=document.createElement(`div`),this._debugPanel.className=`JCV-debug-panel JCV-border-shadow-bg`;let n=this.DM.data.container;t.applyStyles(n,a),n.appendChild(this._debugPanel),this.onDispose(this.dispose)}update=()=>{let e=t.round,n=this.DM.data;this.debugPanel.innerHTML=`<p>Scale: ${e(n.scale,3)}</p><p>Offset: ${e(n.offsetX,1)}, ${e(n.offsetY,1)}</p>`};dispose=()=>{this.debugPanel.remove(),this._debugPanel=null}};export{o as default};
+import{BaseModule as e}from"../../kernel/BaseModule.js";import{applyStyles as t,destroyError as n,round as r}from"../../kernel/utilities.js";import i from"../../kernel/DataManager.js";import a from"../../kernel/Controller.js";import o from"./styles.js";var s=class extends e{_debugPanel;DM;get debugPanel(){if(!this._debugPanel)throw n;return this._debugPanel}constructor(...e){super(...e),this.DM=this.container.get(i),this.container.get(a).onRefresh.subscribe(this.update),this._debugPanel=document.createElement(`div`),this._debugPanel.className=`JCV-debug-panel JCV-border-shadow-bg`;let n=this.DM.data.container;t(n,o),n.appendChild(this._debugPanel),this.onDispose(this.dispose)}update=()=>{let e=this.DM.data;this.debugPanel.innerHTML=`<p>Scale: ${r(e.scale,3)}</p><p>Offset: ${r(e.offsetX,1)}, ${r(e.offsetY,1)}</p>`};dispose=()=>{this.debugPanel.remove(),this._debugPanel=void 0}};export{s as default};
 //# sourceMappingURL=index.js.map

package/dist/modules/DebugPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["style","utilities"],"sources":["../../../src/modules/DebugPanel/index.ts"],"sourcesContent":["import { type BaseArgs, BaseModule } from '$/BaseModule';\nimport Controller from '$/Controller';\nimport DataManager from '$/DataManager';\nimport utilities, { destroyError } from '$/utilities';\nimport style from './styles.scss?inline';\n\nexport default class DebugPanel extends BaseModule {\n\tprivate _debugPanel: HTMLDivElement | null = null;\n\tprivate DM: DataManager;\n\n\tprivate get debugPanel() {\n\t\tif (!this._debugPanel) throw destroyError;\n\t\treturn this._debugPanel;\n\t}\n\n\tconstructor(...args: BaseArgs) {\n\t\tsuper(...args);\n\t\tthis.DM = this.container.get(DataManager);\n\t\tthis.container.get(Controller).onRefresh.subscribe(this.update);\n\t\tthis._debugPanel = document.createElement('div');\n\t\tthis._debugPanel.className = 'JCV-debug-panel JCV-border-shadow-bg';\n\t\tconst HTMLContainer = this.DM.data.container;\n\t\tutilities.applyStyles(HTMLContainer, style);\n\t\tHTMLContainer.appendChild(this._debugPanel);\n\t\tthis.onDispose(this.dispose);\n\t}\n\n\tprivate update = () => {\n\t\tconst round = utilities.round;\n\t\tconst data = this.DM.data;\n\t\tthis.debugPanel.innerHTML = `<p>Scale: ${round(data.scale, 3)}</p><p>Offset: ${round(data.offsetX, 1)}, ${round(data.offsetY, 1)}</p>`;\n\t};\n\n\tprivate dispose = () => {\n\t\tthis.debugPanel.remove();\n\t\tthis._debugPanel = null;\n\t};\n}\n"],"mappings":"oOAMA,IAAqB,EAArB,cAAwC,CAAW,CAClD,YAA6C,KAC7C,GAEA,IAAY,YAAa,CACxB,GAAI,CAAC,KAAK,YAAa,MAAM,EAC7B,OAAO,KAAK,YAGb,YAAY,GAAG,EAAgB,CAC9B,MAAM,GAAG,EAAK,CACd,KAAK,GAAK,KAAK,UAAU,IAAI,EAAY,CACzC,KAAK,UAAU,IAAI,EAAW,CAAC,UAAU,UAAU,KAAK,OAAO,CAC/D,KAAK,YAAc,SAAS,cAAc,MAAM,CAChD,KAAK,YAAY,UAAY,uCAC7B,IAAM,EAAgB,KAAK,GAAG,KAAK,UACnC,EAAU,YAAY,EAAeA,EAAM,CAC3C,EAAc,YAAY,KAAK,YAAY,CAC3C,KAAK,UAAU,KAAK,QAAQ,CAG7B,WAAuB,CACtB,IAAM,EAAQC,EAAU,MAClB,EAAO,KAAK,GAAG,KACrB,KAAK,WAAW,UAAY,aAAa,EAAM,EAAK,MAAO,EAAE,CAAC,iBAAiB,EAAM,EAAK,QAAS,EAAE,CAAC,IAAI,EAAM,EAAK,QAAS,EAAE,CAAC,OAGlI,YAAwB,CACvB,KAAK,WAAW,QAAQ,CACxB,KAAK,YAAc"}
+{"version":3,"file":"index.js","names":["style"],"sources":["../../../src/modules/DebugPanel/index.ts"],"sourcesContent":["import type { BaseArgs } from '$/BaseModule';\nimport { BaseModule } from '$/BaseModule';\nimport Controller from '$/Controller';\nimport DataManager from '$/DataManager';\nimport { applyStyles, destroyError, round } from '$/utilities';\nimport style from './styles.scss?inline';\n\nexport default class DebugPanel extends BaseModule {\n\tprivate _debugPanel?: HTMLDivElement;\n\tprivate readonly DM: DataManager;\n\n\tprivate get debugPanel() {\n\t\tif (!this._debugPanel) throw destroyError;\n\t\treturn this._debugPanel;\n\t}\n\n\tconstructor(...args: BaseArgs) {\n\t\tsuper(...args);\n\t\tthis.DM = this.container.get(DataManager);\n\t\tthis.container.get(Controller).onRefresh.subscribe(this.update);\n\t\tthis._debugPanel = document.createElement('div');\n\t\tthis._debugPanel.className = 'JCV-debug-panel JCV-border-shadow-bg';\n\t\tconst HTMLContainer = this.DM.data.container;\n\t\tapplyStyles(HTMLContainer, style);\n\t\tHTMLContainer.appendChild(this._debugPanel);\n\t\tthis.onDispose(this.dispose);\n\t}\n\n\tprivate readonly update = () => {\n\t\tconst data = this.DM.data;\n\t\tthis.debugPanel.innerHTML = `<p>Scale: ${round(data.scale, 3)}</p><p>Offset: ${round(data.offsetX, 1)}, ${round(data.offsetY, 1)}</p>`;\n\t};\n\n\tprivate readonly dispose = () => {\n\t\tthis.debugPanel.remove();\n\t\tthis._debugPanel = undefined;\n\t};\n}\n"],"mappings":"6PAOA,IAAqB,EAArB,cAAwC,CAAW,CAClD,YACA,GAEA,IAAY,YAAa,CACxB,GAAI,CAAC,KAAK,YAAa,MAAM,EAC7B,OAAO,KAAK,YAGb,YAAY,GAAG,EAAgB,CAC9B,MAAM,GAAG,EAAK,CACd,KAAK,GAAK,KAAK,UAAU,IAAI,EAAY,CACzC,KAAK,UAAU,IAAI,EAAW,CAAC,UAAU,UAAU,KAAK,OAAO,CAC/D,KAAK,YAAc,SAAS,cAAc,MAAM,CAChD,KAAK,YAAY,UAAY,uCAC7B,IAAM,EAAgB,KAAK,GAAG,KAAK,UACnC,EAAY,EAAeA,EAAM,CACjC,EAAc,YAAY,KAAK,YAAY,CAC3C,KAAK,UAAU,KAAK,QAAQ,CAG7B,WAAgC,CAC/B,IAAM,EAAO,KAAK,GAAG,KACrB,KAAK,WAAW,UAAY,aAAa,EAAM,EAAK,MAAO,EAAE,CAAC,iBAAiB,EAAM,EAAK,QAAS,EAAE,CAAC,IAAI,EAAM,EAAK,QAAS,EAAE,CAAC,OAGlI,YAAiC,CAChC,KAAK,WAAW,QAAQ,CACxB,KAAK,YAAc,IAAA"}

package/dist/modules/Minimap/index.d.ts

@@ -2,21 +2,21 @@ import { BaseArgs, BaseModule } from "../../kernel/BaseModule.js";
 import { BaseOptions } from "../../kernel/index.js";
 
 //#region src/modules/Minimap/index.d.ts
-interface Options extends BaseOptions {
+type Options = {
   minimapCollapsed?: boolean;
-}
-interface Augmentation {
+} & BaseOptions;
+type Augmentation = {
   toggleMinimapCollapse: Minimap['toggleCollapse'];
-}
+};
 declare class Minimap extends BaseModule<Options, Augmentation> {
-  private _minimapCtx;
-  private _viewportRectangle;
-  private _minimap;
-  private _minimapContainer;
-  private _toggleMinimapBtn;
-  private minimapCache;
-  private DM;
-  private SM;
+  private readonly _minimapCtx?;
+  private _viewportRectangle?;
+  private _minimap?;
+  private _minimapContainer?;
+  private _toggleMinimapBtn?;
+  private readonly minimapCache;
+  private readonly DM;
+  private readonly SM;
   private collapsed;
   private get minimap();
   private get minimapCtx();
@@ -25,11 +25,11 @@ declare class Minimap extends BaseModule<Options, Augmentation> {
   private get toggleMinimapBtn();
   constructor(...args: BaseArgs);
   toggleCollapse: () => void;
-  private start;
-  private drawMinimapNode;
-  private drawMinimapEdge;
-  private updateViewportRectangle;
-  private dispose;
+  private readonly start;
+  private readonly drawMinimapNode;
+  private readonly drawMinimapEdge;
+  private readonly updateViewportRectangle;
+  private readonly dispose;
 }
 //#endregion
 export { Minimap };

package/dist/modules/Minimap/index.js

@@ -1,2 +1,2 @@
-import{BaseModule as e}from"../../kernel/BaseModule.js";import t,{destroyError as n}from"../../kernel/utilities.js";import r from"../../kernel/DataManager.js";import i from"../../kernel/StyleManager.js";import a from"../../kernel/Controller.js";import o from"./styles.js";var s=class extends e{_minimapCtx=null;_viewportRectangle=null;_minimap=null;_minimapContainer=null;_toggleMinimapBtn=null;minimapCache={scale:1,centerX:0,centerY:0};DM;SM;collapsed;get minimap(){if(this._minimap===null)throw n;return this._minimap}get minimapCtx(){if(this._minimapCtx===null)throw n;return this._minimapCtx}get viewportRectangle(){if(this._viewportRectangle===null)throw n;return this._viewportRectangle}get minimapContainer(){if(this._minimapContainer===null)throw n;return this._minimapContainer}get toggleMinimapBtn(){if(this._toggleMinimapBtn===null)throw n;return this._toggleMinimapBtn}constructor(...e){super(...e),this.collapsed=this.options.minimapCollapsed??!1,this.container.get(a).onRefresh.subscribe(this.updateViewportRectangle),this.DM=this.container.get(r),this.SM=this.container.get(i),this._minimapContainer=document.createElement(`div`),this._minimapContainer.className=`JCV-minimap-container`,t.applyStyles(this._minimapContainer,o),this._toggleMinimapBtn=document.createElement(`button`),this._toggleMinimapBtn.className=`JCV-button JCV-toggle-minimap JCV-collapse-button JCV-border-shadow-bg`,this._toggleMinimapBtn.innerHTML=`<svg viewBox="-3.6 -3.6 31.2 31.2" stroke-width=".4"><path d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" /></svg>`,this._minimapContainer.appendChild(this._toggleMinimapBtn),this._minimap=document.createElement(`div`),this._minimap.className=`JCV-minimap JCV-border-shadow-bg`;let n=document.createElement(`canvas`);n.className=`JCV-minimap-canvas`,n.width=200,n.height=150,this._minimap.appendChild(n),this._minimapCtx=n.getContext(`2d`),this._viewportRectangle=document.createElement(`div`),this._viewportRectangle.className=`JCV-viewport-rectangle`,this._minimap.appendChild(this._viewportRectangle),this._minimapContainer.appendChild(this._minimap),this.DM.data.container.appendChild(this._minimapContainer),this._minimapContainer.classList.toggle(`JCV-collapsed`,this.collapsed),this._toggleMinimapBtn.addEventListener(`click`,this.toggleCollapse),t.resizeCanvasForDPR(n,n.width,n.height),this.augment({toggleMinimapCollapse:this.toggleCollapse}),this.onStart(this.start),this.onRestart(this.start),this.onDispose(this.dispose)}toggleCollapse=()=>{this.collapsed=!this.collapsed,this.minimapContainer.classList.toggle(`JCV-collapsed`,this.collapsed),this.collapsed||this.updateViewportRectangle()};start=()=>{let e=this.DM.data.nodeBounds;if(!e)return;let t=this.minimap.clientWidth,n=this.minimap.clientHeight,r=t/e.width,i=n/e.height;this.minimapCache.scale=Math.min(r,i)*.9,this.minimapCache.centerX=t/2,this.minimapCache.centerY=n/2,this.minimapCtx.clearRect(0,0,t,n),this.minimapCtx.save(),this.minimapCtx.translate(this.minimapCache.centerX,this.minimapCache.centerY),this.minimapCtx.scale(this.minimapCache.scale,this.minimapCache.scale),this.minimapCtx.translate(-e.centerX,-e.centerY);let a=this.DM.data.canvasData;for(let e of a.edges)this.drawMinimapEdge(e);for(let e of a.nodes)this.drawMinimapNode(e);this.minimapCtx.restore()};drawMinimapNode=e=>{let n=this.SM.getColor(e.color);this.minimapCtx.fillStyle=n.border,t.drawRoundRect(this.minimapCtx,e.x,e.y,e.width,e.height,25),this.minimapCtx.fill()};drawMinimapEdge=e=>{let n=this.DM.data.nodeMap,r=n[e.fromNode].ref,i=n[e.toNode].ref;if(!r||!i)return;let{x:a,y:o}=t.getAnchorCoord(r,e.fromSide),{x:s,y:c}=t.getAnchorCoord(i,e.toSide);this.minimapCtx.beginPath(),this.minimapCtx.moveTo(a,o),this.minimapCtx.lineTo(s,c),this.minimapCtx.strokeStyle=this.SM.getColor(e.color).active,this.minimapCtx.lineWidth=10,this.minimapCtx.stroke()};updateViewportRectangle=()=>{if(this.collapsed)return;let e=this.DM.data.nodeBounds,t=this.DM.data.container,n=this.DM.data.scale;if(!e)return;let r=t.clientWidth/n,i=t.clientHeight/n,a=-this.DM.data.offsetX/n+t.clientWidth/(2*n),o=-this.DM.data.offsetY/n+t.clientHeight/(2*n),s=this.minimapCache.centerX+(a-r/2-e.centerX)*this.minimapCache.scale,c=this.minimapCache.centerY+(o-i/2-e.centerY)*this.minimapCache.scale,l=r*this.minimapCache.scale,u=i*this.minimapCache.scale;this.viewportRectangle.style.left=`${s}px`,this.viewportRectangle.style.top=`${c}px`,this.viewportRectangle.style.width=`${l}px`,this.viewportRectangle.style.height=`${u}px`};dispose=()=>{this.toggleMinimapBtn.removeEventListener(`click`,this.toggleCollapse),this.minimapCtx.clearRect(0,0,this.minimap.clientWidth,this.minimap.clientHeight),this.minimapContainer.remove(),this._minimapContainer=null,this._toggleMinimapBtn=null,this._viewportRectangle=null,this._minimap=null}};export{s as default};
+import{BaseModule as e}from"../../kernel/BaseModule.js";import{applyStyles as t,destroyError as n,drawRoundRect as r,getAnchorCoord as i,resizeCanvasForDPR as a}from"../../kernel/utilities.js";import o from"../../kernel/DataManager.js";import s from"../../kernel/StyleManager.js";import c from"../../kernel/Controller.js";import l from"./styles.js";var u=class extends e{_minimapCtx;_viewportRectangle;_minimap;_minimapContainer;_toggleMinimapBtn;minimapCache={centerX:0,centerY:0,scale:1};DM;SM;collapsed;get minimap(){if(!this._minimap)throw n;return this._minimap}get minimapCtx(){if(!this._minimapCtx)throw n;return this._minimapCtx}get viewportRectangle(){if(!this._viewportRectangle)throw n;return this._viewportRectangle}get minimapContainer(){if(!this._minimapContainer)throw n;return this._minimapContainer}get toggleMinimapBtn(){if(!this._toggleMinimapBtn)throw n;return this._toggleMinimapBtn}constructor(...e){super(...e),this.collapsed=this.options.minimapCollapsed??!1,this.container.get(c).onRefresh.subscribe(this.updateViewportRectangle),this.DM=this.container.get(o),this.SM=this.container.get(s),this._minimapContainer=document.createElement(`div`),this._minimapContainer.className=`JCV-minimap-container`,t(this._minimapContainer,l),this._toggleMinimapBtn=document.createElement(`button`),this._toggleMinimapBtn.className=`JCV-button JCV-toggle-minimap JCV-collapse-button JCV-border-shadow-bg`,this._toggleMinimapBtn.innerHTML=`<svg viewBox="-3.6 -3.6 31.2 31.2" stroke-width=".4"><path d="M15.707 4.293a1 1 0 0 1 0 1.414L9.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" /></svg>`,this._minimapContainer.appendChild(this._toggleMinimapBtn),this._minimap=document.createElement(`div`),this._minimap.className=`JCV-minimap JCV-border-shadow-bg`;let n=document.createElement(`canvas`);n.className=`JCV-minimap-canvas`,n.width=200,n.height=150,this._minimap.appendChild(n),this._minimapCtx=n.getContext(`2d`),this._viewportRectangle=document.createElement(`div`),this._viewportRectangle.className=`JCV-viewport-rectangle`,this._minimap.appendChild(this._viewportRectangle),this._minimapContainer.appendChild(this._minimap),this.DM.data.container.appendChild(this._minimapContainer),this._minimapContainer.classList.toggle(`JCV-collapsed`,this.collapsed),this._toggleMinimapBtn.addEventListener(`click`,this.toggleCollapse),a(n,n.width,n.height),this.augment({toggleMinimapCollapse:this.toggleCollapse}),this.onStart(this.start),this.onRestart(this.start),this.onDispose(this.dispose)}toggleCollapse=()=>{this.collapsed=!this.collapsed,this.minimapContainer.classList.toggle(`JCV-collapsed`,this.collapsed),this.collapsed||this.updateViewportRectangle()};start=()=>{let e=this.DM.data.nodeBounds;if(!e)return;let t=this.minimap.clientWidth,n=this.minimap.clientHeight,r=t/e.width,i=n/e.height;this.minimapCache.scale=Math.min(r,i)*.9,this.minimapCache.centerX=t/2,this.minimapCache.centerY=n/2,this.minimapCtx.clearRect(0,0,t,n),this.minimapCtx.save(),this.minimapCtx.translate(this.minimapCache.centerX,this.minimapCache.centerY),this.minimapCtx.scale(this.minimapCache.scale,this.minimapCache.scale),this.minimapCtx.translate(-e.centerX,-e.centerY);let a=this.DM.data.canvasData;for(let e of a.edges)this.drawMinimapEdge(e);for(let e of a.nodes)this.drawMinimapNode(e);this.minimapCtx.restore()};drawMinimapNode=e=>{let t=this.SM.getColor(e.color);this.minimapCtx.fillStyle=t.border,r(this.minimapCtx,e.x,e.y,e.width,e.height,25),this.minimapCtx.fill()};drawMinimapEdge=e=>{let t=this.DM.data.nodeMap,n=t[e.fromNode].ref,r=t[e.toNode].ref;if(!n||!r)return;let{x:a,y:o}=i(n,e.fromSide),{x:s,y:c}=i(r,e.toSide);this.minimapCtx.beginPath(),this.minimapCtx.moveTo(a,o),this.minimapCtx.lineTo(s,c),this.minimapCtx.strokeStyle=this.SM.getColor(e.color).active,this.minimapCtx.lineWidth=10,this.minimapCtx.stroke()};updateViewportRectangle=()=>{if(this.collapsed)return;let e=this.DM.data.nodeBounds,t=this.DM.data.container,n=this.DM.data.scale;if(!e)return;let r=t.clientWidth/n,i=t.clientHeight/n,a=-this.DM.data.offsetX/n+t.clientWidth/(2*n),o=-this.DM.data.offsetY/n+t.clientHeight/(2*n),s=this.minimapCache.centerX+(a-r/2-e.centerX)*this.minimapCache.scale,c=this.minimapCache.centerY+(o-i/2-e.centerY)*this.minimapCache.scale,l=r*this.minimapCache.scale,u=i*this.minimapCache.scale;this.viewportRectangle.style.left=`${s}px`,this.viewportRectangle.style.top=`${c}px`,this.viewportRectangle.style.width=`${l}px`,this.viewportRectangle.style.height=`${u}px`};dispose=()=>{this.toggleMinimapBtn.removeEventListener(`click`,this.toggleCollapse),this.minimapCtx.clearRect(0,0,this.minimap.clientWidth,this.minimap.clientHeight),this.minimapContainer.remove(),this._minimapContainer=void 0,this._toggleMinimapBtn=void 0,this._viewportRectangle=void 0,this._minimap=void 0}};export{u as default};
 //# sourceMappingURL=index.js.map