json-canvas-viewer 4.1.0 → 4.2.0

package/dist/kernel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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"],"names":["internalModules","DataManager","StyleManager","Controller","OverlayManager","InteractionHandler","Renderer","JSONCanvasViewer","allModules","IO","started","disposed","options","container","onDispose","utilities","makeHook","onStart","onRestart","constructor","modules","this","Container","forEach","Class","bind","provide","useFactory","augment","Module","get","loading","load","IntersectionObserver","onVisibilityCheck","root","rootMargin","threshold","observe","entries","entry","isIntersecting","disconnect","aug","descriptors","Object","getOwnPropertyDescriptors","defineProperties","assign","dispose","firstChild","remove","unbindAll"],"mappings":"iRAuBA,MAAMA,EAAkB,CACvBC,EACAC,EACAC,EACAC,EACAC,EACAC,GAQD,MAAMC,EACGC,WACAC,GAAkC,KAClCC,SAAU,EACVC,UAAW,EACnBC,QACAC,UACAC,UAAYC,EAAUC,UAAS,GAC/BC,QAAUF,EAAUC,WACpBE,UAAYH,EAAUC,WAEtB,WAAAG,CAAYP,EAAwBQ,GACnCC,KAAKR,UAAY,IAAIS,EACrBD,KAAKT,QAAUA,EAefS,KAAKb,WAAa,IAAIR,KAAqBoB,GAAW,IACtDC,KAAKb,WAAWe,QAfFC,IACbH,KAAKR,UAAUY,KAAK,CACnBC,QAASF,EACTG,WAAY,IACX,IAAIH,EACHH,KAAKR,UACLQ,KAAKT,QACLS,KAAKJ,QACLI,KAAKP,UACLO,KAAKH,UACLG,KAAKO,aAMTP,KAAKb,WAAWe,QAASM,IACxBR,KAAKR,UAAUiB,IAAID,KAGpB,MAAME,EAAUV,KAAKT,QAAQmB,SAAW,SACxB,WAAZA,EAAsBV,KAAKW,OACV,SAAZD,IACRV,KAAKZ,GAAK,IAAIwB,qBAAqBZ,KAAKa,kBAAmB,CAC1DC,KAAM,KACNC,WAAY,OACZC,UAAW,IAEZhB,KAAKZ,GAAG6B,QAAQjB,KAAKT,QAAQC,WAE/B,CAEQqB,kBAAqBK,IAC5BA,EAAQhB,QAASiB,IAChB,GAAIA,EAAMC,eAIT,OAHApB,KAAKW,OACLX,KAAKZ,IAAIiC,kBACTrB,KAAKZ,GAAK,SAMLmB,QAAWe,IAClB,MAAMC,EAAcC,OAAOC,0BAA0BH,GACrDE,OAAOE,iBAAiB1B,KAAMuB,IAG/BZ,KAAQpB,IAKHS,KAAKV,WACLC,GAASiC,OAAOG,OAAO3B,KAAKT,QAASA,GACrCS,KAAKX,QAASW,KAAKH,aAEtBG,KAAKJ,UACLI,KAAKX,SAAU,KAIjBuC,QAAU,KACT,IAAK5B,KAAKX,SAAWW,KAAKV,SAAU,OACpCU,KAAKZ,IAAIiC,aACTrB,KAAKZ,GAAK,KACV,MAAMI,EAAYQ,KAAKT,QAAQC,UAC/B,KAAOA,EAAUqC,YAAYrC,EAAUqC,WAAWC,SAClD9B,KAAKP,YACLO,KAAKR,UAAUuC,YACf/B,KAAKV,UAAW"}
+{"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 | undefined;\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/styles.js

@@ -0,0 +1,285 @@
+var e=`.JSON-Canvas-Viewer {
+  --contentTransition: color 200ms, opacity 200ms, text-shadow 200ms, fill 200ms;
+  --containerTransition:
+  	background 200ms, opacity 200ms, box-shadow 200ms, border 200ms, filter 200ms,
+  	backdrop-filter 200ms;
+  color: var(--text);
+  fill: var(--text);
+  stroke: var(--text);
+  background-color: var(--background);
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.JSON-Canvas-Viewer.JCV-numb, .JSON-Canvas-Viewer.JCV-numb * {
+  pointer-events: none !important;
+}
+.JSON-Canvas-Viewer .JCV-full, .JSON-Canvas-Viewer .JCV-overlay-container .JCV-click-layer, .JSON-Canvas-Viewer .JCV-overlay-container .JCV-link-iframe,
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-audio,
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-video, .JSON-Canvas-Viewer .JCV-overlay-container .JCV-content {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+.JSON-Canvas-Viewer .JCV-flex-center, .JSON-Canvas-Viewer .JCV-overlay-container .JCV-content.JCV-markdown-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.JSON-Canvas-Viewer .JCV-border-shadow-bg {
+  background: var(--background-secondary);
+  border: 1px solid var(--border) !important;
+  box-shadow: var(--shadow);
+}
+.JSON-Canvas-Viewer .JCV-button {
+  cursor: pointer;
+  font-size: 18px;
+  height: 32px;
+  border: none;
+  transition: var(--containerTransition);
+  background-color: var(--background-secondary);
+  text-align: center;
+  width: 32px;
+  padding: 5px 0px;
+}
+.JSON-Canvas-Viewer .JCV-button svg {
+  width: 100%;
+  height: 100%;
+}
+.JSON-Canvas-Viewer .JCV-button:hover {
+  background-color: var(--border);
+}
+.JSON-Canvas-Viewer .JCV-button.JCV-collapse-button {
+  border-radius: 8px;
+  transition: transform 200ms, background-color 200ms;
+}
+.JSON-Canvas-Viewer .JCV-collapsed .JCV-collapse-button {
+  transform: rotate(180deg);
+}
+.JSON-Canvas-Viewer .JCV-main-canvas {
+  width: 100%;
+  height: 100%;
+  transform-origin: top left;
+}
+.JSON-Canvas-Viewer .JCV-overlays {
+  position: absolute;
+  transform-origin: top left;
+  will-change: transform;
+}
+.JSON-Canvas-Viewer .JCV-overlay-container {
+  position: absolute;
+  box-sizing: border-box;
+  border-radius: 12px;
+  user-select: none;
+  contain: strict;
+  content-visibility: auto;
+  background-color: var(--overlay-card);
+  transition: var(--containerTransition);
+}
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-overlay-border {
+  box-sizing: border-box;
+  pointer-events: none;
+  position: absolute;
+  color: var(--overlay-border);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-width: var(--overlay-border-width);
+  border-style: solid;
+  border-radius: 12px;
+  transition: var(--containerTransition);
+}
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-content {
+  overflow: hidden;
+}
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-content.JCV-markdown-content {
+  position: absolute;
+  padding: 0 7px;
+}
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-content.JCV-markdown-content.rtl {
+  direction: rtl;
+  text-align: right;
+}
+.JSON-Canvas-Viewer .JCV-overlay-container.JCV-active {
+  user-select: auto;
+  pointer-events: auto;
+}
+.JSON-Canvas-Viewer .JCV-overlay-container.JCV-active .JCV-overlay-border {
+  border: 4px solid var(--overlay-active);
+}
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-link-iframe,
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-audio,
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-video {
+  border: none;
+  background: transparent;
+}
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-click-layer {
+  background: transparent;
+  pointer-events: auto;
+}
+.JSON-Canvas-Viewer .JCV-overlay-container.JCV-active .JCV-click-layer {
+  pointer-events: none;
+}
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  pointer-events: none;
+}
+.JSON-Canvas-Viewer .JCV-overlay-container.JCV-active .JCV-img {
+  pointer-events: auto;
+}
+.JSON-Canvas-Viewer .JCV-overlay-container .JCV-parsed-content-wrapper {
+  font-family: sans-serif;
+  box-sizing: border-box;
+  max-width: 100%;
+  max-height: 100%;
+  padding: 10px 6px;
+  pointer-events: none;
+  overflow: hidden;
+  scrollbar-gutter: stable both-edges;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+@supports not (scrollbar-gutter: stable both-edges) {
+  .JSON-Canvas-Viewer .JCV-overlay-container .JCV-parsed-content-wrapper {
+    padding: 10px;
+  }
+}
+.JSON-Canvas-Viewer .JCV-overlay-container.JCV-active .JCV-parsed-content-wrapper {
+  overflow: auto;
+  pointer-events: auto;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content ::-webkit-scrollbar {
+  width: 4px;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content ::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content ::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.25);
+}
+.JSON-Canvas-Viewer .JCV-markdown-content ::-webkit-scrollbar-thumb:hover {
+  background: rgba(30, 30, 30, 0.75);
+}
+.JSON-Canvas-Viewer .JCV-markdown-content p {
+  font-size: 16px;
+  line-height: 21px;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content img {
+  width: 100%;
+  border-radius: 8px;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content h1 {
+  font-size: 25px;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content h2 {
+  font-size: 23px;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content h3 {
+  font-size: 22px;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content h4 {
+  font-size: 20px;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content h5 {
+  font-size: 19px;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content h6 {
+  font-size: 17px;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content p,
+.JSON-Canvas-Viewer .JCV-markdown-content h1,
+.JSON-Canvas-Viewer .JCV-markdown-content h2,
+.JSON-Canvas-Viewer .JCV-markdown-content h3,
+.JSON-Canvas-Viewer .JCV-markdown-content h4,
+.JSON-Canvas-Viewer .JCV-markdown-content h5,
+.JSON-Canvas-Viewer .JCV-markdown-content h6,
+.JSON-Canvas-Viewer .JCV-markdown-content ol,
+.JSON-Canvas-Viewer .JCV-markdown-content ul {
+  margin: 0;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content h1,
+.JSON-Canvas-Viewer .JCV-markdown-content h2 {
+  font-weight: 800;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content h3,
+.JSON-Canvas-Viewer .JCV-markdown-content h4 {
+  font-weight: 700;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content h5,
+.JSON-Canvas-Viewer .JCV-markdown-content h6 {
+  font-weight: 600;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content code {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 2px 4px;
+  border-radius: 8px;
+}
+pre .JSON-Canvas-Viewer .JCV-markdown-content code {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content pre:has(code),
+.JSON-Canvas-Viewer .JCV-markdown-content table {
+  margin: 6px 0;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content strong {
+  color: rgb(254, 142, 124);
+}
+.JSON-Canvas-Viewer .JCV-markdown-content em {
+  color: rgb(90, 255, 178);
+}
+.JSON-Canvas-Viewer .JCV-markdown-content a {
+  text-decoration: none;
+  color: rgb(109, 173, 208);
+  font-weight: 800;
+  font-style: italic;
+  cursor: pointer;
+  transition: var(--contentTransition);
+}
+.JSON-Canvas-Viewer .JCV-markdown-content a:hover {
+  color: rgb(134, 211, 253);
+}
+.JSON-Canvas-Viewer .JCV-markdown-content hr {
+  height: 1px;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.2);
+  border: none;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content li {
+  margin: 5px 0;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content ul {
+  padding-left: 16px;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content ol {
+  padding-left: 15px;
+  padding-right: 7.5px;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content table {
+  border-collapse: collapse;
+  border-radius: 8px;
+  overflow: hidden;
+  width: 100%;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content table th,
+.JSON-Canvas-Viewer .JCV-markdown-content table td {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 6px 10px;
+  background: rgba(255, 255, 255, 0.06);
+  text-align: left;
+}
+.JSON-Canvas-Viewer .JCV-markdown-content table th {
+  background: rgba(255, 255, 255, 0.12);
+  font-weight: bold;
+}
+`;export{e as default};
+//# sourceMappingURL=styles.js.map

package/dist/kernel/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../src/kernel/styles.scss?inline"],"sourcesContent":[".JSON-Canvas-Viewer {\n\t--contentTransition: color 200ms, opacity 200ms, text-shadow 200ms, fill 200ms;\n\t--containerTransition:\n\t\tbackground 200ms, opacity 200ms, box-shadow 200ms, border 200ms, filter 200ms,\n\t\tbackdrop-filter 200ms;\n\tcolor: var(--text);\n\tfill: var(--text);\n\tstroke: var(--text);\n\tbackground-color: var(--background);\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\t&.JCV-numb,\n\t&.JCV-numb * {\n\t\tpointer-events: none !important;\n\t}\n\n\t.JCV-full {\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n\n\t.JCV-flex-center {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.JCV-border-shadow-bg {\n\t\tbackground: var(--background-secondary);\n\t\tborder: 1px solid var(--border) !important;\n\t\tbox-shadow: var(--shadow);\n\t}\n\n\t.JCV-button {\n\t\tcursor: pointer;\n\t\tfont-size: 18px;\n\t\theight: 32px;\n\t\tborder: none;\n\t\ttransition: var(--containerTransition);\n\t\tbackground-color: var(--background-secondary);\n\t\ttext-align: center;\n\t\twidth: 32px;\n\t\tpadding: 5px 0px;\n\t\tsvg {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t}\n\t\t&:hover {\n\t\t\tbackground-color: var(--border);\n\t\t}\n\t\t&.JCV-collapse-button {\n\t\t\tborder-radius: 8px;\n\t\t\ttransition:\n\t\t\t\ttransform 200ms,\n\t\t\t\tbackground-color 200ms;\n\t\t}\n\t}\n\t.JCV-collapsed .JCV-collapse-button {\n\t\ttransform: rotate(180deg);\n\t}\n\n\t.JCV-main-canvas {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\ttransform-origin: top left;\n\t}\n\n\t.JCV-overlays {\n\t\tposition: absolute;\n\t\ttransform-origin: top left;\n\t\twill-change: transform;\n\t}\n\n\t.JCV-overlay-container {\n\t\tposition: absolute;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 12px;\n\t\tuser-select: none;\n\t\tcontain: strict;\n\t\tcontent-visibility: auto;\n\t\tbackground-color: var(--overlay-card);\n\t\ttransition: var(--containerTransition);\n\t\t.JCV-overlay-border {\n\t\t\tbox-sizing: border-box;\n\t\t\tpointer-events: none;\n\t\t\tposition: absolute;\n\t\t\tcolor: var(--overlay-border);\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tborder-width: var(--overlay-border-width);\n\t\t\tborder-style: solid;\n\t\t\tborder-radius: 12px;\n\t\t\ttransition: var(--containerTransition);\n\t\t}\n\t\t.JCV-content {\n\t\t\t@extend .JCV-full;\n\t\t\toverflow: hidden;\n\t\t\t&.JCV-markdown-content {\n\t\t\t\t@extend .JCV-flex-center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0 7px;\n\t\t\t\t&.rtl {\n\t\t\t\t\tdirection: rtl;\n\t\t\t\t\ttext-align: right;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&.JCV-active {\n\t\t\tuser-select: auto;\n\t\t\tpointer-events: auto;\n\t\t\t.JCV-overlay-border {\n\t\t\t\tborder: 4px solid var(--overlay-active);\n\t\t\t}\n\t\t}\n\n\t\t// #region Embedded Content\n\t\t.JCV-link-iframe,\n\t\t.JCV-audio,\n\t\t.JCV-video {\n\t\t\t@extend .JCV-full;\n\t\t\tborder: none;\n\t\t\tbackground: transparent;\n\t\t}\n\t\t.JCV-click-layer {\n\t\t\t@extend .JCV-full;\n\t\t\tbackground: transparent;\n\t\t\tpointer-events: auto;\n\t\t}\n\t\t&.JCV-active .JCV-click-layer {\n\t\t\tpointer-events: none;\n\t\t}\n\t\t// #endregion -----------------------------------------------------------------\n\n\t\t// #region Image\n\t\t.JCV-img {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tobject-fit: cover;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t&.JCV-active .JCV-img {\n\t\t\tpointer-events: auto;\n\t\t}\n\t\t// #endregion -----------------------------------------------------------------\n\n\t\t// #region Markdown\n\t\t.JCV-parsed-content-wrapper {\n\t\t\tfont-family: sans-serif;\n\t\t\tbox-sizing: border-box;\n\t\t\tmax-width: 100%;\n\t\t\tmax-height: 100%;\n\t\t\tpadding: 10px 6px;\n\t\t\tpointer-events: none;\n\t\t\toverflow: hidden;\n\t\t\tscrollbar-gutter: stable both-edges;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 12px;\n\t\t\t@supports not (scrollbar-gutter: stable both-edges) {\n\t\t\t\tpadding: 10px;\n\t\t\t}\n\t\t}\n\t\t&.JCV-active .JCV-parsed-content-wrapper {\n\t\t\toverflow: auto;\n\t\t\tpointer-events: auto;\n\t\t}\n\t\t// #endregion -----------------------------------------------------------------\n\t}\n\n\t.JCV-markdown-content {\n\t\t::-webkit-scrollbar {\n\t\t\twidth: 4px;\n\t\t}\n\n\t\t::-webkit-scrollbar-track {\n\t\t\tbackground-color: transparent;\n\t\t}\n\n\t\t::-webkit-scrollbar-thumb {\n\t\t\tborder-radius: 2px;\n\t\t\tbackground: rgba(255, 255, 255, 0.25);\n\t\t\t&:hover {\n\t\t\t\tbackground: rgba(30, 30, 30, 0.75);\n\t\t\t}\n\t\t}\n\n\t\t// basic HTML styles\n\t\tp {\n\t\t\tfont-size: 16px;\n\t\t\tline-height: 21px;\n\t\t}\n\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\tborder-radius: 8px;\n\t\t}\n\n\t\th1 {\n\t\t\tfont-size: 25px;\n\t\t}\n\t\th2 {\n\t\t\tfont-size: 23px;\n\t\t}\n\t\th3 {\n\t\t\tfont-size: 22px;\n\t\t}\n\t\th4 {\n\t\t\tfont-size: 20px;\n\t\t}\n\t\th5 {\n\t\t\tfont-size: 19px;\n\t\t}\n\t\th6 {\n\t\t\tfont-size: 17px;\n\t\t}\n\n\t\tp,\n\t\th1,\n\t\th2,\n\t\th3,\n\t\th4,\n\t\th5,\n\t\th6,\n\t\tol,\n\t\tul {\n\t\t\tmargin: 0;\n\t\t}\n\n\t\th1,\n\t\th2 {\n\t\t\tfont-weight: 800;\n\t\t}\n\n\t\th3,\n\t\th4 {\n\t\t\tfont-weight: 700;\n\t\t}\n\n\t\th5,\n\t\th6 {\n\t\t\tfont-weight: 600;\n\t\t}\n\n\t\tcode {\n\t\t\tbackground: rgba(255, 255, 255, 0.1);\n\t\t\tpadding: 2px 4px;\n\t\t\tborder-radius: 8px;\n\t\t\tpre & {\n\t\t\t\tdisplay: block;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\n\t\tpre:has(code),\n\t\ttable {\n\t\t\tmargin: 6px 0;\n\t\t}\n\n\t\tstrong {\n\t\t\tcolor: rgb(254, 142, 124);\n\t\t}\n\n\t\tem {\n\t\t\tcolor: rgb(90, 255, 178);\n\t\t}\n\n\t\ta {\n\t\t\ttext-decoration: none;\n\t\t\tcolor: rgb(109, 173, 208);\n\t\t\tfont-weight: 800;\n\t\t\tfont-style: italic;\n\t\t\tcursor: pointer;\n\t\t\ttransition: var(--contentTransition);\n\t\t\t&:hover {\n\t\t\t\tcolor: rgb(134, 211, 253);\n\t\t\t}\n\t\t}\n\n\t\thr {\n\t\t\theight: 1px;\n\t\t\twidth: 100%;\n\t\t\tbackground-color: rgba(255, 255, 255, 0.2);\n\t\t\tborder: none;\n\t\t}\n\n\t\tli {\n\t\t\tmargin: 5px 0;\n\t\t}\n\n\t\tul {\n\t\t\tpadding-left: 16px;\n\t\t}\n\n\t\tol {\n\t\t\tpadding-left: 15px;\n\t\t\tpadding-right: 7.5px;\n\t\t}\n\n\t\ttable {\n\t\t\tborder-collapse: collapse;\n\t\t\tborder-radius: 8px;\n\t\t\toverflow: hidden;\n\t\t\twidth: 100%;\n\t\t\tth,\n\t\t\ttd {\n\t\t\t\tborder: 1px solid rgba(255, 255, 255, 0.2);\n\t\t\t\tpadding: 6px 10px;\n\t\t\t\tbackground: rgba(255, 255, 255, 0.06);\n\t\t\t\ttext-align: left;\n\t\t\t}\n\t\t\tth {\n\t\t\t\tbackground: rgba(255, 255, 255, 0.12);\n\t\t\t\tfont-weight: bold;\n\t\t\t}\n\t\t}\n\t}\n}\n"],"mappings":"AAAA,IAAA,EAAa"}

package/dist/kernel/types.d.ts

@@ -0,0 +1,33 @@
+//#region src/kernel/types.d.ts
+type Coordinates = {
+  x: number;
+  y: number;
+};
+type NodeBounds = {
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+  width: number;
+  height: number;
+  centerX: number;
+  centerY: number;
+};
+type Box = {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+};
+type General = any;
+type GeneralArray = ReadonlyArray<General>;
+type GeneralObject = object;
+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>>;
+type Instances<T extends GeneralModuleInput> = T extends ReadonlyArray<GeneralConstructor> ? InstanceType<T[number]> : T[number];
+type Orchestratable<T extends GeneralModuleInput, K extends keyof Instances<T>> = UnionToIntersection<Instances<T>[K]>;
+//#endregion
+export { Box, Coordinates, General, GeneralArray, GeneralObject, ModuleInput, NodeBounds, Orchestratable };
+//# sourceMappingURL=types.d.ts.map

package/dist/kernel/utilities.d.ts

@@ -0,0 +1,13 @@
+import { GeneralArray } from "./types.js";
+
+//#region src/kernel/utilities.d.ts
+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;
+  subs: Set<MatchingFunc<Args>>;
+  subscribe(callback: MatchingFunc<Args>): void;
+  unsubscribe(callback: MatchingFunc<Args>): void;
+};
+//#endregion
+export { Hook };
+//# sourceMappingURL=utilities.d.ts.map

package/dist/kernel/utilities.js

@@ -1,2 +1,2 @@
-const e={round:function(e,o){const r=10**o;return Math.round(e*r)/r},resizeCanvasForDPR:function(e,o,r){const t=window.devicePixelRatio??1,n=e.getContext("2d");if(!n)throw new Error("[JSONCanvasViewer] This error is unexpected, probably caused uncontrollable runtime errors. Please contact the developer and show how to reproduce.");e.width=Math.round(o*t),e.height=Math.round(r*t),n.setTransform(1,0,0,1,0,0),n.scale(t,t)},applyStyles:function(e,o){const r=document.createElement("style");r.innerHTML=o,e.appendChild(r)},drawRoundRect:function(e,o,r,t,n,s){e.beginPath(),e.moveTo(o+s,r),e.lineTo(o+t-s,r),e.quadraticCurveTo(o+t,r,o+t,r+s),e.lineTo(o+t,r+n-s),e.quadraticCurveTo(o+t,r+n,o+t-s,r+n),e.lineTo(o+s,r+n),e.quadraticCurveTo(o,r+n,o,r+n-s),e.lineTo(o,r+s),e.quadraticCurveTo(o,r,o+s,r),e.closePath()},getAnchorCoord:function(e,o){const r=e.x+e.width/2,t=e.y+e.height/2;switch(o){case"top":return{x:r,y:e.y};case"bottom":return{x:r,y:e.y+e.height};case"left":return{x:e.x,y:t};case"right":return{x:e.x+e.width,y:t};default:return{x:r,y:t}}},makeHook:r},o=new Error("[JSONCanvasViewer] Resource hasn't been set up or has been disposed.");function r(e=!1,o=!1){const r=o?async(...o)=>{if(e){const e=Array.from(r.subs).reverse();for(const r of e)await r(...o)}else for(const e of r.subs)await e(...o)}:(...o)=>{if(e){const e=Array.from(r.subs).reverse();for(const r of e)r(...o)}else for(const e of r.subs)e(...o)};return r.subs=/* @__PURE__ */new Set,r.subscribe=e=>{r.subs.add(e)},r.unsubscribe=e=>{r.subs.delete(e)},r}export{e as default,o as destroyError,r as makeHook};
-//# sourceMappingURL=utilities.js.map
+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","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"],"names":["utilities","round","roundedNum","digits","factor","Math","resizeCanvasForDPR","canvas","width","height","dpr","window","devicePixelRatio","ctx","getContext","Error","setTransform","scale","applyStyles","container","styleString","style","document","createElement","innerHTML","appendChild","drawRoundRect","x","y","radius","beginPath","moveTo","lineTo","quadraticCurveTo","closePath","getAnchorCoord","node","side","midX","midY","makeHook","destroyError","reverse","async","result","args","items","Array","from","subs","callback","Set","subscribe","add","unsubscribe","delete"],"mappings":"AAGA,MAAAA,EAAe,CACdC,MAqED,SAAeC,EAAoBC,GAClC,MAAMC,EAAS,IAAMD,EACrB,OAAOE,KAAKJ,MAAMC,EAAaE,GAAUA,CAC1C,EAvECE,mBAuDD,SAA4BC,EAA2BC,EAAeC,GACrE,MAAMC,EAAMC,OAAOC,kBAAoB,EACjCC,EAAMN,EAAOO,WAAW,MAC9B,IAAKD,EACJ,MAAM,IAAIE,MACT,uJAEFR,EAAOC,MAAQH,KAAKJ,MAAMO,EAAQE,GAClCH,EAAOE,OAASJ,KAAKJ,MAAMQ,EAASC,GACpCG,EAAIG,aAAa,EAAG,EAAG,EAAG,EAAG,EAAG,GAChCH,EAAII,MAAMP,EAAKA,EAChB,EAjECQ,YAUD,SAAqBC,EAAqCC,GACzD,MAAMC,EAAQC,SAASC,cAAc,SACrCF,EAAMG,UAAYJ,EAClBD,EAAUM,YAAYJ,EACvB,EAbCK,cAeD,SACCb,EACAc,EACAC,EACApB,EACAC,EACAoB,GAEAhB,EAAIiB,YACJjB,EAAIkB,OAAOJ,EAAIE,EAAQD,GACvBf,EAAImB,OAAOL,EAAInB,EAAQqB,EAAQD,GAC/Bf,EAAIoB,iBAAiBN,EAAInB,EAAOoB,EAAGD,EAAInB,EAAOoB,EAAIC,GAClDhB,EAAImB,OAAOL,EAAInB,EAAOoB,EAAInB,EAASoB,GACnChB,EAAIoB,iBAAiBN,EAAInB,EAAOoB,EAAInB,EAAQkB,EAAInB,EAAQqB,EAAQD,EAAInB,GACpEI,EAAImB,OAAOL,EAAIE,EAAQD,EAAInB,GAC3BI,EAAIoB,iBAAiBN,EAAGC,EAAInB,EAAQkB,EAAGC,EAAInB,EAASoB,GACpDhB,EAAImB,OAAOL,EAAGC,EAAIC,GAClBhB,EAAIoB,iBAAiBN,EAAGC,EAAGD,EAAIE,EAAQD,GACvCf,EAAIqB,WACL,EAjCCC,eAmCD,SAAwBC,EAAsBC,GAC7C,MAAMC,EAAOF,EAAKT,EAAIS,EAAK5B,MAAQ,EAC7B+B,EAAOH,EAAKR,EAAIQ,EAAK3B,OAAS,EACpC,OAAQ4B,GACP,IAAK,MACJ,MAAO,CAAEV,EAAGW,EAAMV,EAAGQ,EAAKR,GAC3B,IAAK,SACJ,MAAO,CAAED,EAAGW,EAAMV,EAAGQ,EAAKR,EAAIQ,EAAK3B,QACpC,IAAK,OACJ,MAAO,CAAEkB,EAAGS,EAAKT,EAAGC,EAAGW,GACxB,IAAK,QACJ,MAAO,CAAEZ,EAAGS,EAAKT,EAAIS,EAAK5B,MAAOoB,EAAGW,GACrC,QACC,MAAO,CAAEZ,EAAGW,EAAMV,EAAGW,GAExB,EAjDCC,YAGYC,EAAe,IAAI1B,MAC/B,wEAiFM,SAASyB,EACfE,GAAmB,EACnBC,GAAe,GAEf,MAAMC,EACLD,EACGA,SAAUE,KACV,GAAIH,EAAS,CACZ,MAAMI,EAAQC,MAAMC,KAAKJ,EAAOK,MAAMP,UACtC,IAAA,MAAWQ,KAAYJ,QAAaI,KAAYL,EACjD,gBAAkBK,KAAYN,EAAOK,WAAYC,KAAYL,IAE7D,IAAIA,KACJ,GAAIH,EAAS,CACZ,MAAMI,EAAQC,MAAMC,KAAKJ,EAAOK,MAAMP,UACtC,IAAA,MAAWQ,KAAYJ,EAAYI,KAAYL,EAChD,gBAAkBK,KAAYN,EAAOK,KAAWC,KAAYL,IAUhE,OAPAD,EAAOK,wBAAWE,IAClBP,EAAOQ,UAAaF,IACnBN,EAAOK,KAAKI,IAAIH,IAEjBN,EAAOU,YAAeJ,IACrBN,EAAOK,KAAKM,OAAOL,IAEbN,CACR"}
+{"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

@@ -0,0 +1,42 @@
+import { BaseArgs, BaseModule } from "../../kernel/BaseModule.js";
+import { BaseOptions } from "../../kernel/index.js";
+
+//#region src/modules/Controls/index.d.ts
+type Options = {
+  controlsCollapsed?: boolean;
+} & 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 readonly DM;
+  private readonly IH;
+  private collapsed;
+  private get controlsPanel();
+  private get toggleCollapseBtn();
+  private get toggleFullscreenBtn();
+  private get zoomOutBtn();
+  private get zoomSlider();
+  private get zoomInBtn();
+  private get resetViewBtn();
+  constructor(...args: BaseArgs);
+  toggleCollapse: () => void;
+  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 };
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/Controls/index.js

@@ -1,2 +1,2 @@
-import{BaseModule as t}from"../../kernel/BaseModule.js";import e from"../../kernel/Controller.js";import l from"../../kernel/DataManager.js";import s from"../../kernel/InteractionHandler.js";import o,{destroyError as n}from"../../kernel/utilities.js";import i from"./styles.scss.js";const r='<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>';class a extends t{_controlsPanel=null;_toggleCollapseBtn=null;_toggleFullscreenBtn=null;_zoomOutBtn=null;_zoomSlider=null;_zoomInBtn=null;_resetViewBtn=null;DM;IH;collapsed;get controlsPanel(){if(null===this._controlsPanel)throw n;return this._controlsPanel}get toggleCollapseBtn(){if(null===this._toggleCollapseBtn)throw n;return this._toggleCollapseBtn}get toggleFullscreenBtn(){if(null===this._toggleFullscreenBtn)throw n;return this._toggleFullscreenBtn}get zoomOutBtn(){if(null===this._zoomOutBtn)throw n;return this._zoomOutBtn}get zoomSlider(){if(null===this._zoomSlider)throw n;return this._zoomSlider}get zoomInBtn(){if(null===this._zoomInBtn)throw n;return this._zoomInBtn}get resetViewBtn(){if(null===this._resetViewBtn)throw n;return this._resetViewBtn}constructor(...t){super(...t),this.collapsed=this.options.controlsCollapsed??!1,this.DM=this.container.get(l),this.IH=this.container.get(s),this.DM.onToggleFullscreen.subscribe(this.updateFullscreenBtn),this.container.get(e).onRefresh.subscribe(this.updateSlider),this._controlsPanel=document.createElement("div"),this._controlsPanel.className="JCV-controls",this._controlsPanel.classList.toggle("JCV-collapsed",this.collapsed),o.applyStyles(this._controlsPanel,i),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);const n=document.createElement("div");n.className="JCV-controls-content",this._toggleFullscreenBtn=document.createElement("button"),this._toggleFullscreenBtn.className="JCV-button",this._toggleFullscreenBtn.innerHTML=r,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=t=>{this.toggleFullscreenBtn.innerHTML="enter"===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>':r};toggleFullscreen=()=>this.DM.toggleFullscreen();updateSlider=()=>{this.collapsed||(this.zoomSlider.value=String(this.scaleToSlider(this.DM.data.scale)))};scaleToSlider=t=>Math.log(t)/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{a as default};
-//# sourceMappingURL=index.js.map
+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","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"],"names":["enterFullscreenIcon","Controls","BaseModule","_controlsPanel","_toggleCollapseBtn","_toggleFullscreenBtn","_zoomOutBtn","_zoomSlider","_zoomInBtn","_resetViewBtn","DM","IH","collapsed","controlsPanel","this","destroyError","toggleCollapseBtn","toggleFullscreenBtn","zoomOutBtn","zoomSlider","zoomInBtn","resetViewBtn","constructor","args","super","options","controlsCollapsed","container","get","DataManager","InteractionHandler","onToggleFullscreen","subscribe","updateFullscreenBtn","Controller","onRefresh","updateSlider","document","createElement","className","classList","toggle","utilities","applyStyles","style","innerHTML","appendChild","controlsContent","type","min","max","value","data","addEventListener","toggleCollapse","zoomIn","zoomOut","slide","resetView","toggleFullscreen","augment","toggleControlsCollapse","onDispose","dispose","zoom","middleViewer","trueZoom","Number","scale","enter","String","scaleToSlider","Math","log","removeEventListener","remove"],"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 | undefined;\n\tprivate _toggleCollapseBtn: HTMLButtonElement | undefined;\n\tprivate _toggleFullscreenBtn: HTMLButtonElement | undefined;\n\tprivate _zoomOutBtn: HTMLButtonElement | undefined;\n\tprivate _zoomSlider: HTMLInputElement | undefined;\n\tprivate _zoomInBtn: HTMLButtonElement | undefined;\n\tprivate _resetViewBtn: HTMLButtonElement | undefined;\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/Controls/styles.js

@@ -0,0 +1,29 @@
+var e=`.JSON-Canvas-Viewer > .JCV-controls {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  transition: transform 200ms;
+  border-radius: 8px;
+  gap: 10px;
+}
+.JSON-Canvas-Viewer > .JCV-controls.JCV-collapsed {
+  transform: translateX(calc(100% - 30px));
+}
+.JSON-Canvas-Viewer > .JCV-controls .JCV-controls-content {
+  display: flex;
+  gap: 1px;
+  align-items: center;
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--border);
+  box-shadow: var(--shadow);
+  outline: 1px solid var(--border);
+}
+.JSON-Canvas-Viewer > .JCV-controls .JCV-zoom-slider {
+  width: 100px;
+  margin: 0 10px;
+}
+`;export{e as default};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../../src/modules/Controls/styles.scss?inline"],"sourcesContent":[".JSON-Canvas-Viewer > .JCV-controls {\n\tposition: absolute;\n\ttop: 10px;\n\tright: 10px;\n\tdisplay: flex;\n\talign-items: center;\n\ttransition: transform 200ms;\n\tborder-radius: 8px;\n\tgap: 10px;\n\t&.JCV-collapsed {\n\t\ttransform: translateX(calc(100% - 30px));\n\t}\n\t.JCV-controls-content {\n\t\tdisplay: flex;\n\t\tgap: 1px;\n\t\talign-items: center;\n\t\tborder-radius: 8px;\n\t\toverflow: hidden;\n\t\tbackground: var(--border);\n\t\tbox-shadow: var(--shadow);\n\t\toutline: 1px solid var(--border);\n\t}\n\t.JCV-zoom-slider {\n\t\twidth: 100px;\n\t\tmargin: 0 10px;\n\t}\n}\n"],"mappings":"AAAA,IAAA,EAAa"}