json-canvas-viewer 4.0.0 → 4.1.1

package/dist/kernel/index.js.map

@@ -0,0 +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"}

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: 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,39 @@
+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;
+  subs: Set<MatchingFunc<Args>>;
+  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 };
+//# sourceMappingURL=utilities.d.ts.map

package/dist/kernel/utilities.js

@@ -0,0 +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};
+//# sourceMappingURL=utilities.js.map

package/dist/kernel/utilities.js.map

@@ -0,0 +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"}

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
+interface Options extends BaseOptions {
+  controlsCollapsed?: boolean;
+}
+interface 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 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 zoomIn;
+  private zoomOut;
+  private slide;
+  private updateFullscreenBtn;
+  private toggleFullscreen;
+  private updateSlider;
+  private scaleToSlider;
+  private dispose;
+}
+//#endregion
+export { Controls };
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/Controls/index.js

@@ -0,0 +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};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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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"}

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"}

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

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

package/dist/modules/DebugPanel/index.js

@@ -0,0 +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};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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"}

package/dist/modules/DebugPanel/styles.js

@@ -0,0 +1,13 @@
+var e=`.JSON-Canvas-Viewer > .JCV-debug-panel {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+  border-radius: 12px;
+  padding: 12px;
+  color: var(--text);
+  font-size: calc(14px + 0.3vw);
+  line-height: calc(17px + 0.3vw);
+  pointer-events: none;
+}
+`;export{e as default};
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":[],"sources":["../../../src/modules/DebugPanel/styles.scss?inline"],"sourcesContent":[".JSON-Canvas-Viewer > .JCV-debug-panel {\n\tposition: absolute;\n\tbottom: 12px;\n\tleft: 12px;\n\tborder-radius: 12px;\n\tpadding: 12px;\n\tcolor: var(--text);\n\tfont-size: calc(14px + 0.3vw);\n\tline-height: calc(17px + 0.3vw);\n\tpointer-events: none;\n}\n"],"mappings":"AAAA,IAAA,EAAa"}

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

@@ -0,0 +1,36 @@
+import { BaseArgs, BaseModule } from "../../kernel/BaseModule.js";
+import { BaseOptions } from "../../kernel/index.js";
+
+//#region src/modules/Minimap/index.d.ts
+interface Options extends BaseOptions {
+  minimapCollapsed?: boolean;
+}
+interface 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 collapsed;
+  private get minimap();
+  private get minimapCtx();
+  private get viewportRectangle();
+  private get minimapContainer();
+  private get toggleMinimapBtn();
+  constructor(...args: BaseArgs);
+  toggleCollapse: () => void;
+  private start;
+  private drawMinimapNode;
+  private drawMinimapEdge;
+  private updateViewportRectangle;
+  private dispose;
+}
+//#endregion
+export { Minimap };
+//# sourceMappingURL=index.d.ts.map

package/dist/modules/Minimap/index.js

@@ -0,0 +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};
+//# sourceMappingURL=index.js.map