diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index c0602a3..f60019b 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -2,6 +2,8 @@
The basic idea of nodarium is to use the advantages of WebAssembly to create a performant, secure and extandable visual programming language.
+The visual programming language consists of so called `Nodes` which are stored and distributed as single `.wasm` files. Each `node` receives some arguments and generates some output.
+
## What is a node?
```typescript
diff --git a/app/package.json b/app/package.json
index 4e23e3d..d0e8204 100644
--- a/app/package.json
+++ b/app/package.json
@@ -13,9 +13,8 @@
"@nodes/ui": "link:../packages/ui",
"@nodes/utils": "link:../packages/utils",
"@sveltejs/kit": "^2.5.7",
- "@threlte/core": "^7.3.0",
- "@threlte/extras": "^8.11.2",
- "@threlte/flex": "^1.0.2",
+ "@threlte/core": "next",
+ "@threlte/extras": "next",
"@types/three": "^0.164.0",
"@unocss/reset": "^0.59.4",
"comlink": "^4.4.1",
@@ -26,14 +25,11 @@
"@iconify-json/tabler": "^1.1.110",
"@nodes/types": "link:../packages/types",
"@sveltejs/adapter-static": "^3.0.1",
- "@sveltejs/vite-plugin-svelte": "^3.1.0",
+ "@sveltejs/vite-plugin-svelte": "next",
"@tsconfig/svelte": "^5.0.4",
"@unocss/preset-icons": "^0.59.4",
- "@zerodevx/svelte-json-view": "^1.0.9",
- "internal-ip": "^8.0.0",
- "svelte": "^4.2.15",
+ "svelte": "5.0.0-next.118",
"svelte-check": "^3.7.0",
- "three-inspect": "^0.4.5",
"tslib": "^2.6.2",
"typescript": "^5.4.5",
"unocss": "^0.59.4",
@@ -41,6 +37,6 @@
"vite-plugin-comlink": "^4.0.3",
"vite-plugin-glsl": "^1.3.0",
"vite-plugin-wasm": "^3.3.0",
- "vitest": "^1.5.2"
+ "vitest": "^1.5.3"
}
}
diff --git a/app/src/lib/performance/PerformanceViewer.svelte b/app/src/lib/performance/PerformanceViewer.svelte
index e2248fb..53a4553 100644
--- a/app/src/lib/performance/PerformanceViewer.svelte
+++ b/app/src/lib/performance/PerformanceViewer.svelte
@@ -183,83 +183,101 @@
{#if data.length !== 0}
General
-
-
- {round(getTotalPerformance(!showAverage))}ms
- |
- ($activeType = "total")}
- >
- total({Math.floor(1000 / getTotalPerformance(showAverage))}fps)
- |
-
- {#each getPerformanceData(!showAverage) as [key, value]}
+
- {round(value)}ms
+ {round(getTotalPerformance(!showAverage))}ms
|
($activeType = key)}
+ class:active={$activeType === "total"}
+ on:click={() => ($activeType = "total")}
>
- {key}
+ total({Math.floor(
+ 1000 / getTotalPerformance(showAverage),
+ )}fps)
|
- {/each}
+ {#each getPerformanceData(!showAverage) as [key, value]}
+
+
+ {round(value)}ms
+ |
+ ($activeType = key)}
+ >
+ {key}
+ |
+
+ {/each}
-
- {data.length} |
- Samples |
-
-
- Nodes
-
- {getCacheRatio(!showAverage)}% |
- ($activeType = "cache-hit")}>cache hits |
-
- {#each getNodePerformanceData(!showAverage) as [key, value]}
+
+ {data.length} |
+ Samples |
+
+
+
- {round(value)}ms
- |
-
- ($activeType = key)}
- >
- {key.split("/").slice(-1).join("/")}
+ Nodes
|
- {/each}
+
+
+
+ {getCacheRatio(!showAverage)}% |
+ ($activeType = "cache-hit")}>cache hits |
+
+ {#each getNodePerformanceData(!showAverage) as [key, value]}
+
+
+ {round(value)}ms
+ |
- Viewer
-
- {humanizeNumber(getLast("total-vertices"))} |
- Vertices |
-
-
- {humanizeNumber(getLast("total-faces"))} |
- Faces |
-
- {#each getViewerPerformanceData(!showAverage) as [key, value]}
+ ($activeType = key)}
+ >
+ {key.split("/").slice(-1).join("/")}
+ |
+
+ {/each}
+
+
- {round(value)}ms
- |
- ($activeType = key)}
- >
- {key.split("/").slice(-1).join("/")}
+ Viewer
|
- {/each}
+
+
+
+ {humanizeNumber(getLast("total-vertices"))} |
+ Vertices |
+
+
+ {humanizeNumber(getLast("total-faces"))} |
+ Faces |
+
+ {#each getViewerPerformanceData(!showAverage) as [key, value]}
+
+
+ {round(value)}ms
+ |
+ ($activeType = key)}
+ >
+ {key.split("/").slice(-1).join("/")}
+ |
+
+ {/each}
+
{:else}
No runs available
diff --git a/packages/types/package.json b/packages/types/package.json
index 4b28588..2b81121 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -13,6 +13,6 @@
"author": "",
"license": "ISC",
"dependencies": {
- "zod": "^3.23.4"
+ "zod": "^3.23.5"
}
}
diff --git a/packages/ui/.eslintrc.cjs b/packages/ui/.eslintrc.cjs
index 419521f..0b75758 100644
--- a/packages/ui/.eslintrc.cjs
+++ b/packages/ui/.eslintrc.cjs
@@ -4,7 +4,8 @@ module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
- 'plugin:svelte/recommended'
+ 'plugin:svelte/recommended',
+ 'prettier'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
diff --git a/packages/ui/.histoire/dist/__sandbox.html b/packages/ui/.histoire/dist/__sandbox.html
deleted file mode 100644
index 765ca66..0000000
--- a/packages/ui/.histoire/dist/__sandbox.html
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
-
- Histoire
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/packages/ui/.histoire/dist/assets/BaseEmpty.vue-C0i8tRal.js b/packages/ui/.histoire/dist/assets/BaseEmpty.vue-C0i8tRal.js
deleted file mode 100644
index 2535880..0000000
--- a/packages/ui/.histoire/dist/assets/BaseEmpty.vue-C0i8tRal.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { _ as _export_sfc } from "./MobileOverlay.vue2-BRmV4xb2.js";
-import { o as openBlock, b as createElementBlock, aF as renderSlot } from "./vendor-BCKkA27H.js";
-const _sfc_main = {};
-const _hoisted_1 = { class: "histoire-base-empty htw-base-empty htw-flex htw-flex-col htw-items-center htw-justify-center htw-space-y-4 htw-py-12 htw-h-full htw-text-center htw-text-gray-400 htw-text-lg" };
-function _sfc_render(_ctx, _cache) {
- return openBlock(), createElementBlock("div", _hoisted_1, [
- renderSlot(_ctx.$slots, "default", {}, void 0, true)
- ]);
-}
-const BaseEmpty = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c5ecfead"]]);
-export {
- BaseEmpty as B
-};
diff --git a/packages/ui/.histoire/dist/assets/GenericMountStory.vue2-BX48YWx2.js b/packages/ui/.histoire/dist/assets/GenericMountStory.vue2-BX48YWx2.js
deleted file mode 100644
index 0060130..0000000
--- a/packages/ui/.histoire/dist/assets/GenericMountStory.vue2-BX48YWx2.js
+++ /dev/null
@@ -1,2580 +0,0 @@
-const __vite__fileDeps=["assets/HomeView.vue-CcWnFK65.js","assets/story--eZPzd9h.js","assets/vendor-BCKkA27H.js","assets/StoryView.vue-BFx-CBXY.js","assets/MobileOverlay.vue2-BRmV4xb2.js","assets/BaseEmpty.vue-C0i8tRal.js","assets/state-BFrY_pEm.js"],__vite__mapDeps=i=>i.map(i=>__vite__fileDeps[i]);
-import { S as SvelteComponentDev, Q as init, R as safe_not_equal, U as dispatch_dev, V as validate_slots, W as element, X as space, Y as svg_element, Z as claim_element, _ as claim_space, $ as children, a0 as claim_svg_element, a1 as detach_dev, a2 as attr_dev, a3 as add_location, a4 as insert_hydration_dev, a5 as append_hydration_dev, a6 as listen_dev, a7 as noop, a8 as create_component, a9 as claim_component, aa as mount_component, ab as transition_in, ac as transition_out, ad as destroy_component, ae as createEventDispatcher, af as toggle_class, ag as set_input_value, ah as to_number, ai as run_all, aj as binding_callbacks, ak as flush, al as get_svelte_dataset, am as ensure_array_like_dev, an as add_render_callback, ao as select_option, ap as destroy_each, aq as select_value, ar as text, as as claim_text, at as set_data_dev, au as Logo_square, av as Logo_dark, aw as createRouter, ax as createWebHistory, ay as createWebHashHistory, az as useDark, aA as useToggle, k as watch, aB as markRaw, E as reactive, d as defineComponent, r as ref, aC as watchEffect, o as openBlock, q as createBlock, aD as mergeProps, aE as resolveDynamicComponent, h as createCommentVNode } from "./vendor-BCKkA27H.js";
-const scriptRel = "modulepreload";
-const assetsURL = function(dep) {
- return "/" + dep;
-};
-const seen = {};
-const __vitePreload = function preload(baseModule, deps, importerUrl) {
- let promise = Promise.resolve();
- if (deps && deps.length > 0) {
- const links = document.getElementsByTagName("link");
- const cspNonceMeta = document.querySelector("meta[property=csp-nonce]");
- const cspNonce = (cspNonceMeta == null ? void 0 : cspNonceMeta.nonce) || (cspNonceMeta == null ? void 0 : cspNonceMeta.getAttribute("nonce"));
- promise = Promise.all(deps.map((dep) => {
- dep = assetsURL(dep);
- if (dep in seen)
- return;
- seen[dep] = true;
- const isCss = dep.endsWith(".css");
- const cssSelector = isCss ? '[rel="stylesheet"]' : "";
- const isBaseRelative = !!importerUrl;
- if (isBaseRelative) {
- for (let i = links.length - 1; i >= 0; i--) {
- const link2 = links[i];
- if (link2.href === dep && (!isCss || link2.rel === "stylesheet")) {
- return;
- }
- }
- } else if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
- return;
- }
- const link = document.createElement("link");
- link.rel = isCss ? "stylesheet" : scriptRel;
- if (!isCss) {
- link.as = "script";
- link.crossOrigin = "";
- }
- link.href = dep;
- if (cspNonce) {
- link.setAttribute("nonce", cspNonce);
- }
- document.head.appendChild(link);
- if (isCss) {
- return new Promise((res, rej) => {
- link.addEventListener("load", res);
- link.addEventListener("error", () => rej(new Error(`Unable to preload CSS for ${dep}`)));
- });
- }
- }));
- }
- return promise.then(() => baseModule()).catch((err) => {
- const e = new Event("vite:preloadError", { cancelable: true });
- e.payload = err;
- window.dispatchEvent(e);
- if (!e.defaultPrevented) {
- throw err;
- }
- });
-};
-const file$8 = "src/lib/elements/Checkbox.svelte";
-function create_fragment$8(ctx) {
- let input;
- let t;
- let label;
- let svg;
- let path;
- let mounted;
- let dispose;
- const block = {
- c: function create() {
- input = element("input");
- t = space();
- label = element("label");
- svg = svg_element("svg");
- path = svg_element("path");
- this.h();
- },
- l: function claim(nodes) {
- input = claim_element(nodes, "INPUT", { id: true, type: true, class: true });
- t = claim_space(nodes);
- label = claim_element(nodes, "LABEL", { for: true, class: true });
- var label_nodes = children(label);
- svg = claim_svg_element(label_nodes, "svg", {
- viewBox: true,
- fill: true,
- xmlns: true,
- class: true
- });
- var svg_nodes = children(svg);
- path = claim_svg_element(svg_nodes, "path", {
- d: true,
- stroke: true,
- "stroke-width": true,
- "stroke-linecap": true,
- "stroke-linejoin": true
- });
- children(path).forEach(detach_dev);
- svg_nodes.forEach(detach_dev);
- label_nodes.forEach(detach_dev);
- this.h();
- },
- h: function hydrate() {
- attr_dev(
- input,
- "id",
- /*id*/
- ctx[1]
- );
- attr_dev(input, "type", "checkbox");
- attr_dev(input, "class", "s-TUFw0ou_zJq2");
- add_location(input, file$8, 12, 0, 201);
- attr_dev(path, "d", "M2 7L7 12L17 2");
- attr_dev(path, "stroke", "currentColor");
- attr_dev(path, "stroke-width", "3");
- attr_dev(path, "stroke-linecap", "round");
- attr_dev(path, "stroke-linejoin", "round");
- add_location(path, file$8, 15, 4, 349);
- attr_dev(svg, "viewBox", "0 0 19 14");
- attr_dev(svg, "fill", "none");
- attr_dev(svg, "xmlns", "http://www.w3.org/2000/svg");
- attr_dev(svg, "class", "s-TUFw0ou_zJq2");
- add_location(svg, file$8, 14, 2, 272);
- attr_dev(
- label,
- "for",
- /*id*/
- ctx[1]
- );
- attr_dev(label, "class", "s-TUFw0ou_zJq2");
- add_location(label, file$8, 13, 0, 253);
- },
- m: function mount(target, anchor) {
- insert_hydration_dev(target, input, anchor);
- input.checked = /*value*/
- ctx[0];
- insert_hydration_dev(target, t, anchor);
- insert_hydration_dev(target, label, anchor);
- append_hydration_dev(label, svg);
- append_hydration_dev(svg, path);
- if (!mounted) {
- dispose = listen_dev(
- input,
- "change",
- /*input_change_handler*/
- ctx[2]
- );
- mounted = true;
- }
- },
- p: function update(ctx2, [dirty]) {
- if (dirty & /*id*/
- 2) {
- attr_dev(
- input,
- "id",
- /*id*/
- ctx2[1]
- );
- }
- if (dirty & /*value*/
- 1) {
- input.checked = /*value*/
- ctx2[0];
- }
- if (dirty & /*id*/
- 2) {
- attr_dev(
- label,
- "for",
- /*id*/
- ctx2[1]
- );
- }
- },
- i: noop,
- o: noop,
- d: function destroy(detaching) {
- if (detaching) {
- detach_dev(input);
- detach_dev(t);
- detach_dev(label);
- }
- mounted = false;
- dispose();
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_fragment$8.name,
- type: "component",
- source: "",
- ctx
- });
- return block;
-}
-function instance$8($$self, $$props, $$invalidate) {
- let { $$slots: slots = {}, $$scope } = $$props;
- validate_slots("Checkbox", slots, []);
- let { value } = $$props;
- let { id } = $$props;
- $$self.$$.on_mount.push(function() {
- if (value === void 0 && !("value" in $$props || $$self.$$.bound[$$self.$$.props["value"]])) {
- console.warn(" was created without expected prop 'value'");
- }
- if (id === void 0 && !("id" in $$props || $$self.$$.bound[$$self.$$.props["id"]])) {
- console.warn(" was created without expected prop 'id'");
- }
- });
- const writable_props = ["value", "id"];
- Object.keys($$props).forEach((key) => {
- if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot")
- console.warn(` was created with unknown prop '${key}'`);
- });
- function input_change_handler() {
- value = this.checked;
- $$invalidate(0, value);
- }
- $$self.$$set = ($$props2) => {
- if ("value" in $$props2)
- $$invalidate(0, value = $$props2.value);
- if ("id" in $$props2)
- $$invalidate(1, id = $$props2.id);
- };
- $$self.$capture_state = () => ({ value, id });
- $$self.$inject_state = ($$props2) => {
- if ("value" in $$props2)
- $$invalidate(0, value = $$props2.value);
- if ("id" in $$props2)
- $$invalidate(1, id = $$props2.id);
- };
- if ($$props && "$$inject" in $$props) {
- $$self.$inject_state($$props.$$inject);
- }
- $$self.$$.update = () => {
- if ($$self.$$.dirty & /*value*/
- 1) {
- if (typeof value === "string") {
- $$invalidate(0, value = value === "true");
- } else if (typeof value === "number") {
- $$invalidate(0, value = value === 1);
- }
- }
- };
- return [value, id, input_change_handler];
-}
-class Checkbox extends SvelteComponentDev {
- constructor(options) {
- super(options);
- init(this, options, instance$8, create_fragment$8, safe_not_equal, { value: 0, id: 1 });
- dispatch_dev("SvelteRegisterComponent", {
- component: this,
- tagName: "Checkbox",
- options,
- id: create_fragment$8.name
- });
- }
- get value() {
- throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
- }
- set value(value) {
- throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
- }
- get id() {
- throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
- }
- set id(value) {
- throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
- }
-}
-const file$7 = "src/lib/elements/Checkbox.story.svelte";
-function create_default_slot$3(ctx) {
- let div;
- let checkbox;
- let current;
- checkbox = new Checkbox({
- props: { checked: false },
- $$inline: true
- });
- const block = {
- c: function create() {
- div = element("div");
- create_component(checkbox.$$.fragment);
- this.h();
- },
- l: function claim(nodes) {
- div = claim_element(nodes, "DIV", { class: true });
- var div_nodes = children(div);
- claim_component(checkbox.$$.fragment, div_nodes);
- div_nodes.forEach(detach_dev);
- this.h();
- },
- h: function hydrate() {
- attr_dev(div, "class", "s-QRHVBdNdefmq");
- add_location(div, file$7, 7, 2, 101);
- },
- m: function mount(target, anchor) {
- insert_hydration_dev(target, div, anchor);
- mount_component(checkbox, div, null);
- current = true;
- },
- p: noop,
- i: function intro(local) {
- if (current)
- return;
- transition_in(checkbox.$$.fragment, local);
- current = true;
- },
- o: function outro(local) {
- transition_out(checkbox.$$.fragment, local);
- current = false;
- },
- d: function destroy(detaching) {
- if (detaching) {
- detach_dev(div);
- }
- destroy_component(checkbox);
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_default_slot$3.name,
- type: "slot",
- source: "(5:0) ",
- ctx
- });
- return block;
-}
-function create_fragment$7(ctx) {
- let hst_story;
- let current;
- hst_story = new /*Hst*/
- ctx[0].Story({
- props: {
- $$slots: { default: [create_default_slot$3] },
- $$scope: { ctx }
- },
- $$inline: true
- });
- const block = {
- c: function create() {
- create_component(hst_story.$$.fragment);
- },
- l: function claim(nodes) {
- claim_component(hst_story.$$.fragment, nodes);
- },
- m: function mount(target, anchor) {
- mount_component(hst_story, target, anchor);
- current = true;
- },
- p: function update(ctx2, [dirty]) {
- const hst_story_changes = {};
- if (dirty & /*$$scope*/
- 2) {
- hst_story_changes.$$scope = { dirty, ctx: ctx2 };
- }
- hst_story.$set(hst_story_changes);
- },
- i: function intro(local) {
- if (current)
- return;
- transition_in(hst_story.$$.fragment, local);
- current = true;
- },
- o: function outro(local) {
- transition_out(hst_story.$$.fragment, local);
- current = false;
- },
- d: function destroy(detaching) {
- destroy_component(hst_story, detaching);
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_fragment$7.name,
- type: "component",
- source: "",
- ctx
- });
- return block;
-}
-function instance$7($$self, $$props, $$invalidate) {
- let { $$slots: slots = {}, $$scope } = $$props;
- validate_slots("Checkbox_story", slots, []);
- let { Hst } = $$props;
- $$self.$$.on_mount.push(function() {
- if (Hst === void 0 && !("Hst" in $$props || $$self.$$.bound[$$self.$$.props["Hst"]])) {
- console.warn(" was created without expected prop 'Hst'");
- }
- });
- const writable_props = ["Hst"];
- Object.keys($$props).forEach((key) => {
- if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot")
- console.warn(` was created with unknown prop '${key}'`);
- });
- $$self.$$set = ($$props2) => {
- if ("Hst" in $$props2)
- $$invalidate(0, Hst = $$props2.Hst);
- };
- $$self.$capture_state = () => ({ Hst, Checkbox });
- $$self.$inject_state = ($$props2) => {
- if ("Hst" in $$props2)
- $$invalidate(0, Hst = $$props2.Hst);
- };
- if ($$props && "$$inject" in $$props) {
- $$self.$inject_state($$props.$$inject);
- }
- return [Hst];
-}
-class Checkbox_story extends SvelteComponentDev {
- constructor(options) {
- super(options);
- init(this, options, instance$7, create_fragment$7, safe_not_equal, { Hst: 0 });
- dispatch_dev("SvelteRegisterComponent", {
- component: this,
- tagName: "Checkbox_story",
- options,
- id: create_fragment$7.name
- });
- }
- get Hst() {
- throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
- }
- set Hst(value) {
- throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
- }
-}
-function getBoundingValue(_v) {
- const v = Math.abs(_v);
- let level = 1;
- const levels = [1, 2, 4, 10, 20, 50, 100, 200, 300, 400, 500, 1e3];
- for (const l of levels) {
- level = l;
- if (l >= v)
- break;
- }
- return _v >= 0 ? level : -level;
-}
-const file$6 = "src/lib/elements/Float.svelte";
-function create_fragment$6(ctx) {
- let div;
- let span;
- let span_style_value;
- let t;
- let input;
- let input_style_value;
- let mounted;
- let dispose;
- const block = {
- c: function create() {
- div = element("div");
- span = element("span");
- t = space();
- input = element("input");
- this.h();
- },
- l: function claim(nodes) {
- div = claim_element(nodes, "DIV", { class: true });
- var div_nodes = children(div);
- span = claim_element(div_nodes, "SPAN", { class: true, style: true });
- children(span).forEach(detach_dev);
- t = claim_space(div_nodes);
- input = claim_element(div_nodes, "INPUT", {
- id: true,
- step: true,
- max: true,
- min: true,
- type: true,
- style: true,
- class: true
- });
- div_nodes.forEach(detach_dev);
- this.h();
- },
- h: function hydrate() {
- attr_dev(span, "class", "overlay s-7bQ_kN4nOsTx");
- attr_dev(span, "style", span_style_value = `width: ${/*value*/
- (ctx[0] - /*min*/
- ctx[1]) / /*max*/
- (ctx[2] - /*min*/
- ctx[1]) * 100}%`);
- add_location(span, file$6, 102, 2, 2040);
- attr_dev(
- input,
- "id",
- /*id*/
- ctx[4]
- );
- attr_dev(
- input,
- "step",
- /*step*/
- ctx[3]
- );
- attr_dev(
- input,
- "max",
- /*max*/
- ctx[2]
- );
- attr_dev(
- input,
- "min",
- /*min*/
- ctx[1]
- );
- attr_dev(input, "type", "number");
- attr_dev(input, "style", input_style_value = `width:${/*width*/
- ctx[7]};`);
- attr_dev(input, "class", "s-7bQ_kN4nOsTx");
- add_location(input, file$6, 106, 2, 2134);
- attr_dev(div, "class", "component-wrapper s-7bQ_kN4nOsTx");
- toggle_class(
- div,
- "is-down",
- /*isMouseDown*/
- ctx[6]
- );
- add_location(div, file$6, 101, 0, 1978);
- },
- m: function mount(target, anchor) {
- insert_hydration_dev(target, div, anchor);
- append_hydration_dev(div, span);
- append_hydration_dev(div, t);
- append_hydration_dev(div, input);
- set_input_value(
- input,
- /*value*/
- ctx[0]
- );
- ctx[12](input);
- if (!mounted) {
- dispose = [
- listen_dev(
- input,
- "input",
- /*input_input_handler*/
- ctx[11]
- ),
- listen_dev(
- input,
- "keydown",
- /*handleKeyDown*/
- ctx[10],
- false,
- false,
- false,
- false
- ),
- listen_dev(
- input,
- "mousedown",
- /*handleMouseDown*/
- ctx[8],
- false,
- false,
- false,
- false
- ),
- listen_dev(
- input,
- "mouseup",
- /*handleMouseUp*/
- ctx[9],
- false,
- false,
- false,
- false
- )
- ];
- mounted = true;
- }
- },
- p: function update(ctx2, [dirty]) {
- if (dirty & /*value, min, max*/
- 7 && span_style_value !== (span_style_value = `width: ${/*value*/
- (ctx2[0] - /*min*/
- ctx2[1]) / /*max*/
- (ctx2[2] - /*min*/
- ctx2[1]) * 100}%`)) {
- attr_dev(span, "style", span_style_value);
- }
- if (dirty & /*id*/
- 16) {
- attr_dev(
- input,
- "id",
- /*id*/
- ctx2[4]
- );
- }
- if (dirty & /*step*/
- 8) {
- attr_dev(
- input,
- "step",
- /*step*/
- ctx2[3]
- );
- }
- if (dirty & /*max*/
- 4) {
- attr_dev(
- input,
- "max",
- /*max*/
- ctx2[2]
- );
- }
- if (dirty & /*min*/
- 2) {
- attr_dev(
- input,
- "min",
- /*min*/
- ctx2[1]
- );
- }
- if (dirty & /*width*/
- 128 && input_style_value !== (input_style_value = `width:${/*width*/
- ctx2[7]};`)) {
- attr_dev(input, "style", input_style_value);
- }
- if (dirty & /*value*/
- 1 && to_number(input.value) !== /*value*/
- ctx2[0]) {
- set_input_value(
- input,
- /*value*/
- ctx2[0]
- );
- }
- if (dirty & /*isMouseDown*/
- 64) {
- toggle_class(
- div,
- "is-down",
- /*isMouseDown*/
- ctx2[6]
- );
- }
- },
- i: noop,
- o: noop,
- d: function destroy(detaching) {
- if (detaching) {
- detach_dev(div);
- }
- ctx[12](null);
- mounted = false;
- run_all(dispose);
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_fragment$6.name,
- type: "component",
- source: "",
- ctx
- });
- return block;
-}
-function strip(input) {
- return +parseFloat(input + "").toPrecision(2);
-}
-function instance$6($$self, $$props, $$invalidate) {
- let width;
- let { $$slots: slots = {}, $$scope } = $$props;
- validate_slots("Float", slots, []);
- let { value = 0.5 } = $$props;
- let { step = 0.01 } = $$props;
- let { min = 0 } = $$props;
- let { max = 1 } = $$props;
- let { id = "" } = $$props;
- const dispatch = createEventDispatcher();
- let inputEl;
- let oldValue;
- function handleChange() {
- if (value === oldValue)
- return;
- oldValue = value;
- dispatch("change", parseFloat(value + ""));
- }
- let isMouseDown = false;
- let downV = 0;
- let vx = 0;
- let rect;
- function handleMouseDown(ev) {
- ev.preventDefault();
- inputEl.focus();
- $$invalidate(6, isMouseDown = true);
- downV = value;
- rect = inputEl.getBoundingClientRect();
- window.removeEventListener("mousemove", handleMouseMove);
- window.addEventListener("mousemove", handleMouseMove);
- window.addEventListener("mouseup", handleMouseUp);
- document.body.style.cursor = "ew-resize";
- }
- function handleMouseUp() {
- $$invalidate(6, isMouseDown = false);
- if (downV === value) {
- inputEl.focus();
- }
- setTimeout(
- () => {
- if (value >= 0) {
- $$invalidate(2, max = getBoundingValue(value));
- $$invalidate(1, min = 0);
- } else {
- $$invalidate(1, min = getBoundingValue(value));
- $$invalidate(2, max = 0);
- }
- },
- 500
- );
- document.body.style.cursor = "unset";
- window.removeEventListener("mouseup", handleMouseUp);
- window.removeEventListener("mousemove", handleMouseMove);
- }
- function handleKeyDown(ev) {
- if (ev.key === "Escape" || ev.key === "Enter") {
- handleMouseUp();
- inputEl.blur();
- }
- }
- function handleMouseMove(ev) {
- vx = (ev.clientX - rect.left) / rect.width;
- if (ev.ctrlKey) {
- let v = min + (max - min) * vx;
- $$invalidate(0, value = v);
- } else {
- $$invalidate(0, value = Math.max(Math.min(min + (max - min) * vx, max), min));
- }
- }
- const writable_props = ["value", "step", "min", "max", "id"];
- Object.keys($$props).forEach((key) => {
- if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot")
- console.warn(` was created with unknown prop '${key}'`);
- });
- function input_input_handler() {
- value = to_number(this.value);
- $$invalidate(0, value);
- }
- function input_binding($$value) {
- binding_callbacks[$$value ? "unshift" : "push"](() => {
- inputEl = $$value;
- $$invalidate(5, inputEl);
- });
- }
- $$self.$$set = ($$props2) => {
- if ("value" in $$props2)
- $$invalidate(0, value = $$props2.value);
- if ("step" in $$props2)
- $$invalidate(3, step = $$props2.step);
- if ("min" in $$props2)
- $$invalidate(1, min = $$props2.min);
- if ("max" in $$props2)
- $$invalidate(2, max = $$props2.max);
- if ("id" in $$props2)
- $$invalidate(4, id = $$props2.id);
- };
- $$self.$capture_state = () => ({
- createEventDispatcher,
- getBoundingValue,
- value,
- step,
- min,
- max,
- id,
- strip,
- dispatch,
- inputEl,
- oldValue,
- handleChange,
- isMouseDown,
- downV,
- vx,
- rect,
- handleMouseDown,
- handleMouseUp,
- handleKeyDown,
- handleMouseMove,
- width
- });
- $$self.$inject_state = ($$props2) => {
- if ("value" in $$props2)
- $$invalidate(0, value = $$props2.value);
- if ("step" in $$props2)
- $$invalidate(3, step = $$props2.step);
- if ("min" in $$props2)
- $$invalidate(1, min = $$props2.min);
- if ("max" in $$props2)
- $$invalidate(2, max = $$props2.max);
- if ("id" in $$props2)
- $$invalidate(4, id = $$props2.id);
- if ("inputEl" in $$props2)
- $$invalidate(5, inputEl = $$props2.inputEl);
- if ("oldValue" in $$props2)
- oldValue = $$props2.oldValue;
- if ("isMouseDown" in $$props2)
- $$invalidate(6, isMouseDown = $$props2.isMouseDown);
- if ("downV" in $$props2)
- downV = $$props2.downV;
- if ("vx" in $$props2)
- vx = $$props2.vx;
- if ("rect" in $$props2)
- rect = $$props2.rect;
- if ("width" in $$props2)
- $$invalidate(7, width = $$props2.width);
- };
- if ($$props && "$$inject" in $$props) {
- $$self.$inject_state($$props.$$inject);
- }
- $$self.$$.update = () => {
- if ($$self.$$.dirty & /*value*/
- 1) {
- if ((value || 0).toString().length > 5) {
- $$invalidate(0, value = strip(value || 0));
- }
- }
- if ($$self.$$.dirty & /*value*/
- 1) {
- value !== void 0 && handleChange();
- }
- if ($$self.$$.dirty & /*value*/
- 1) {
- $$invalidate(7, width = Number.isFinite(value) ? Math.max(((value == null ? void 0 : value.toString().length) ?? 1) * 8, 50) + "px" : "20px");
- }
- };
- return [
- value,
- min,
- max,
- step,
- id,
- inputEl,
- isMouseDown,
- width,
- handleMouseDown,
- handleMouseUp,
- handleKeyDown,
- input_input_handler,
- input_binding
- ];
-}
-class Float extends SvelteComponentDev {
- constructor(options) {
- super(options);
- init(this, options, instance$6, create_fragment$6, safe_not_equal, { value: 0, step: 3, min: 1, max: 2, id: 4 });
- dispatch_dev("SvelteRegisterComponent", {
- component: this,
- tagName: "Float",
- options,
- id: create_fragment$6.name
- });
- }
- get value() {
- throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
- }
- set value(value) {
- throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
- }
- get step() {
- throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
- }
- set step(value) {
- throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
- }
- get min() {
- throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
- }
- set min(value) {
- throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
- }
- get max() {
- throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
- }
- set max(value) {
- throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
- }
- get id() {
- throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
- }
- set id(value) {
- throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
- }
-}
-const file$5 = "src/lib/elements/Float.story.svelte";
-function create_default_slot$2(ctx) {
- let div;
- let float;
- let current;
- float = new Float({
- props: { value: 0, min: 0, max: 6.9 },
- $$inline: true
- });
- const block = {
- c: function create() {
- div = element("div");
- create_component(float.$$.fragment);
- this.h();
- },
- l: function claim(nodes) {
- div = claim_element(nodes, "DIV", { class: true });
- var div_nodes = children(div);
- claim_component(float.$$.fragment, div_nodes);
- div_nodes.forEach(detach_dev);
- this.h();
- },
- h: function hydrate() {
- attr_dev(div, "class", "s-ixAoiIy-gyh_");
- add_location(div, file$5, 7, 2, 95);
- },
- m: function mount(target, anchor) {
- insert_hydration_dev(target, div, anchor);
- mount_component(float, div, null);
- current = true;
- },
- p: noop,
- i: function intro(local) {
- if (current)
- return;
- transition_in(float.$$.fragment, local);
- current = true;
- },
- o: function outro(local) {
- transition_out(float.$$.fragment, local);
- current = false;
- },
- d: function destroy(detaching) {
- if (detaching) {
- detach_dev(div);
- }
- destroy_component(float);
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_default_slot$2.name,
- type: "slot",
- source: "(5:0) ",
- ctx
- });
- return block;
-}
-function create_fragment$5(ctx) {
- let hst_story;
- let current;
- hst_story = new /*Hst*/
- ctx[0].Story({
- props: {
- $$slots: { default: [create_default_slot$2] },
- $$scope: { ctx }
- },
- $$inline: true
- });
- const block = {
- c: function create() {
- create_component(hst_story.$$.fragment);
- },
- l: function claim(nodes) {
- claim_component(hst_story.$$.fragment, nodes);
- },
- m: function mount(target, anchor) {
- mount_component(hst_story, target, anchor);
- current = true;
- },
- p: function update(ctx2, [dirty]) {
- const hst_story_changes = {};
- if (dirty & /*$$scope*/
- 2) {
- hst_story_changes.$$scope = { dirty, ctx: ctx2 };
- }
- hst_story.$set(hst_story_changes);
- },
- i: function intro(local) {
- if (current)
- return;
- transition_in(hst_story.$$.fragment, local);
- current = true;
- },
- o: function outro(local) {
- transition_out(hst_story.$$.fragment, local);
- current = false;
- },
- d: function destroy(detaching) {
- destroy_component(hst_story, detaching);
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_fragment$5.name,
- type: "component",
- source: "",
- ctx
- });
- return block;
-}
-function instance$5($$self, $$props, $$invalidate) {
- let { $$slots: slots = {}, $$scope } = $$props;
- validate_slots("Float_story", slots, []);
- let { Hst } = $$props;
- $$self.$$.on_mount.push(function() {
- if (Hst === void 0 && !("Hst" in $$props || $$self.$$.bound[$$self.$$.props["Hst"]])) {
- console.warn(" was created without expected prop 'Hst'");
- }
- });
- const writable_props = ["Hst"];
- Object.keys($$props).forEach((key) => {
- if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot")
- console.warn(` was created with unknown prop '${key}'`);
- });
- $$self.$$set = ($$props2) => {
- if ("Hst" in $$props2)
- $$invalidate(0, Hst = $$props2.Hst);
- };
- $$self.$capture_state = () => ({ Hst, Float });
- $$self.$inject_state = ($$props2) => {
- if ("Hst" in $$props2)
- $$invalidate(0, Hst = $$props2.Hst);
- };
- if ($$props && "$$inject" in $$props) {
- $$self.$inject_state($$props.$$inject);
- }
- return [Hst];
-}
-class Float_story extends SvelteComponentDev {
- constructor(options) {
- super(options);
- init(this, options, instance$5, create_fragment$5, safe_not_equal, { Hst: 0 });
- dispatch_dev("SvelteRegisterComponent", {
- component: this,
- tagName: "Float_story",
- options,
- id: create_fragment$5.name
- });
- }
- get Hst() {
- throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
- }
- set Hst(value) {
- throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
- }
-}
-const file$4 = "src/lib/elements/Integer.svelte";
-function create_if_block(ctx) {
- let span;
- let span_style_value;
- const block = {
- c: function create() {
- span = element("span");
- this.h();
- },
- l: function claim(nodes) {
- span = claim_element(nodes, "SPAN", { class: true, style: true });
- children(span).forEach(detach_dev);
- this.h();
- },
- h: function hydrate() {
- attr_dev(span, "class", "overlay s-mdEAMJCfSFSg");
- attr_dev(span, "style", span_style_value = `width: ${Math.min(
- /*value*/
- (ctx[0] - /*min*/
- ctx[1]) / /*max*/
- (ctx[2] - /*min*/
- ctx[1]),
- 1
- ) * 100}%`);
- add_location(span, file$4, 89, 4, 1949);
- },
- m: function mount(target, anchor) {
- insert_hydration_dev(target, span, anchor);
- },
- p: function update(ctx2, dirty) {
- if (dirty & /*value, min, max*/
- 7 && span_style_value !== (span_style_value = `width: ${Math.min(
- /*value*/
- (ctx2[0] - /*min*/
- ctx2[1]) / /*max*/
- (ctx2[2] - /*min*/
- ctx2[1]),
- 1
- ) * 100}%`)) {
- attr_dev(span, "style", span_style_value);
- }
- },
- d: function destroy(detaching) {
- if (detaching) {
- detach_dev(span);
- }
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_if_block.name,
- type: "if",
- source: '(75:2) {#if typeof min !== \\"undefined\\" && typeof max !== \\"undefined\\"}',
- ctx
- });
- return block;
-}
-function create_fragment$4(ctx) {
- let div;
- let t0;
- let button0;
- let textContent = "-";
- let t2;
- let input;
- let input_style_value;
- let t3;
- let button1;
- let textContent_1 = "+";
- let mounted;
- let dispose;
- let if_block = typeof /*min*/
- ctx[1] !== "undefined" && typeof /*max*/
- ctx[2] !== "undefined" && create_if_block(ctx);
- const block = {
- c: function create() {
- div = element("div");
- if (if_block)
- if_block.c();
- t0 = space();
- button0 = element("button");
- button0.textContent = textContent;
- t2 = space();
- input = element("input");
- t3 = space();
- button1 = element("button");
- button1.textContent = textContent_1;
- this.h();
- },
- l: function claim(nodes) {
- div = claim_element(nodes, "DIV", {
- class: true,
- role: true,
- tabindex: true,
- "aria-valuenow": true
- });
- var div_nodes = children(div);
- if (if_block)
- if_block.l(div_nodes);
- t0 = claim_space(div_nodes);
- button0 = claim_element(div_nodes, "BUTTON", { class: true, ["data-svelte-h"]: true });
- if (get_svelte_dataset(button0) !== "svelte-1bw2b1l")
- button0.textContent = textContent;
- t2 = claim_space(div_nodes);
- input = claim_element(div_nodes, "INPUT", {
- step: true,
- max: true,
- min: true,
- type: true,
- style: true,
- class: true
- });
- t3 = claim_space(div_nodes);
- button1 = claim_element(div_nodes, "BUTTON", { class: true, ["data-svelte-h"]: true });
- if (get_svelte_dataset(button1) !== "svelte-4ac98d")
- button1.textContent = textContent_1;
- div_nodes.forEach(detach_dev);
- this.h();
- },
- h: function hydrate() {
- attr_dev(button0, "class", "s-mdEAMJCfSFSg");
- add_location(button0, file$4, 94, 2, 2068);
- attr_dev(
- input,
- "step",
- /*step*/
- ctx[3]
- );
- attr_dev(
- input,
- "max",
- /*max*/
- ctx[2]
- );
- attr_dev(
- input,
- "min",
- /*min*/
- ctx[1]
- );
- attr_dev(input, "type", "number");
- attr_dev(input, "style", input_style_value = `width:${/*width*/
- ctx[6]};`);
- attr_dev(input, "class", "s-mdEAMJCfSFSg");
- add_location(input, file$4, 95, 2, 2126);
- attr_dev(button1, "class", "s-mdEAMJCfSFSg");
- add_location(button1, file$4, 105, 2, 2259);
- attr_dev(div, "class", "component-wrapper s-mdEAMJCfSFSg");
- attr_dev(div, "role", "slider");
- attr_dev(div, "tabindex", "0");
- attr_dev(
- div,
- "aria-valuenow",
- /*value*/
- ctx[0]
- );
- add_location(div, file$4, 79, 0, 1706);
- },
- m: function mount(target, anchor) {
- insert_hydration_dev(target, div, anchor);
- if (if_block)
- if_block.m(div, null);
- append_hydration_dev(div, t0);
- append_hydration_dev(div, button0);
- append_hydration_dev(div, t2);
- append_hydration_dev(div, input);
- set_input_value(
- input,
- /*value*/
- ctx[0]
- );
- ctx[13](input);
- append_hydration_dev(div, t3);
- append_hydration_dev(div, button1);
- ctx[15](div);
- if (!mounted) {
- dispose = [
- listen_dev(
- button0,
- "click",
- /*click_handler*/
- ctx[11],
- false,
- false,
- false,
- false
- ),
- listen_dev(
- input,
- "input",
- /*input_input_handler*/
- ctx[12]
- ),
- listen_dev(
- button1,
- "click",
- /*click_handler_1*/
- ctx[14],
- false,
- false,
- false,
- false
- ),
- listen_dev(
- div,
- "mousedown",
- /*handleMouseDown*/
- ctx[8],
- false,
- false,
- false,
- false
- ),
- listen_dev(
- div,
- "mouseup",
- /*handleMouseUp*/
- ctx[9],
- false,
- false,
- false,
- false
- )
- ];
- mounted = true;
- }
- },
- p: function update(ctx2, [dirty]) {
- if (typeof /*min*/
- ctx2[1] !== "undefined" && typeof /*max*/
- ctx2[2] !== "undefined") {
- if (if_block) {
- if_block.p(ctx2, dirty);
- } else {
- if_block = create_if_block(ctx2);
- if_block.c();
- if_block.m(div, t0);
- }
- } else if (if_block) {
- if_block.d(1);
- if_block = null;
- }
- if (dirty & /*step*/
- 8) {
- attr_dev(
- input,
- "step",
- /*step*/
- ctx2[3]
- );
- }
- if (dirty & /*max*/
- 4) {
- attr_dev(
- input,
- "max",
- /*max*/
- ctx2[2]
- );
- }
- if (dirty & /*min*/
- 2) {
- attr_dev(
- input,
- "min",
- /*min*/
- ctx2[1]
- );
- }
- if (dirty & /*width*/
- 64 && input_style_value !== (input_style_value = `width:${/*width*/
- ctx2[6]};`)) {
- attr_dev(input, "style", input_style_value);
- }
- if (dirty & /*value*/
- 1 && to_number(input.value) !== /*value*/
- ctx2[0]) {
- set_input_value(
- input,
- /*value*/
- ctx2[0]
- );
- }
- if (dirty & /*value*/
- 1) {
- attr_dev(
- div,
- "aria-valuenow",
- /*value*/
- ctx2[0]
- );
- }
- },
- i: noop,
- o: noop,
- d: function destroy(detaching) {
- if (detaching) {
- detach_dev(div);
- }
- if (if_block)
- if_block.d();
- ctx[13](null);
- ctx[15](null);
- mounted = false;
- run_all(dispose);
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_fragment$4.name,
- type: "component",
- source: "",
- ctx
- });
- return block;
-}
-function instance$4($$self, $$props, $$invalidate) {
- let width;
- let { $$slots: slots = {}, $$scope } = $$props;
- validate_slots("Integer", slots, []);
- const dispatch = createEventDispatcher();
- let { min = void 0 } = $$props;
- let { max = void 0 } = $$props;
- let { step = 1 } = $$props;
- let { value = 0 } = $$props;
- let { id = "" } = $$props;
- if (!value) {
- value = 0;
- }
- let inputEl;
- let wrapper;
- let prev = -1;
- function update() {
- if (prev === value)
- return;
- prev = value;
- dispatch("change", parseFloat(value + ""));
- }
- function handleChange(change) {
- $$invalidate(0, value = Math.max(min ?? -Infinity, Math.min(+value + change, max ?? Infinity)));
- }
- let downX = 0;
- let downV = 0;
- let rect;
- function handleMouseDown(ev) {
- ev.preventDefault();
- downV = value;
- downX = ev.clientX;
- rect = wrapper.getBoundingClientRect();
- window.removeEventListener("mousemove", handleMouseMove);
- window.addEventListener("mousemove", handleMouseMove);
- window.addEventListener("mouseup", handleMouseUp);
- document.body.style.cursor = "ew-resize";
- }
- function handleMouseUp() {
- if (downV === value) {
- inputEl.focus();
- } else {
- inputEl.blur();
- }
- document.body.style.cursor = "unset";
- window.removeEventListener("mouseup", handleMouseUp);
- window.removeEventListener("mousemove", handleMouseMove);
- }
- function handleMouseMove(ev) {
- if (!ev.ctrlKey && typeof min === "number" && typeof max === "number") {
- const vx = (ev.clientX - rect.left) / rect.width;
- $$invalidate(0, value = Math.max(Math.min(Math.floor(min + (max - min) * vx), max), min));
- } else {
- const vx = ev.clientX - downX;
- $$invalidate(0, value = downV + Math.floor(vx / 10));
- }
- }
- const writable_props = ["min", "max", "step", "value", "id"];
- Object.keys($$props).forEach((key) => {
- if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot")
- console.warn(` was created with unknown prop '${key}'`);
- });
- const click_handler = () => handleChange(-step);
- function input_input_handler() {
- value = to_number(this.value);
- $$invalidate(0, value);
- }
- function input_binding($$value) {
- binding_callbacks[$$value ? "unshift" : "push"](() => {
- inputEl = $$value;
- $$invalidate(4, inputEl);
- });
- }
- const click_handler_1 = () => handleChange(+step);
- function div_binding($$value) {
- binding_callbacks[$$value ? "unshift" : "push"](() => {
- wrapper = $$value;
- $$invalidate(5, wrapper);
- });
- }
- $$self.$$set = ($$props2) => {
- if ("min" in $$props2)
- $$invalidate(1, min = $$props2.min);
- if ("max" in $$props2)
- $$invalidate(2, max = $$props2.max);
- if ("step" in $$props2)
- $$invalidate(3, step = $$props2.step);
- if ("value" in $$props2)
- $$invalidate(0, value = $$props2.value);
- if ("id" in $$props2)
- $$invalidate(10, id = $$props2.id);
- };
- $$self.$capture_state = () => ({
- createEventDispatcher,
- dispatch,
- min,
- max,
- step,
- value,
- id,
- inputEl,
- wrapper,
- prev,
- update,
- handleChange,
- downX,
- downV,
- rect,
- handleMouseDown,
- handleMouseUp,
- handleMouseMove,
- width
- });
- $$self.$inject_state = ($$props2) => {
- if ("min" in $$props2)
- $$invalidate(1, min = $$props2.min);
- if ("max" in $$props2)
- $$invalidate(2, max = $$props2.max);
- if ("step" in $$props2)
- $$invalidate(3, step = $$props2.step);
- if ("value" in $$props2)
- $$invalidate(0, value = $$props2.value);
- if ("id" in $$props2)
- $$invalidate(10, id = $$props2.id);
- if ("inputEl" in $$props2)
- $$invalidate(4, inputEl = $$props2.inputEl);
- if ("wrapper" in $$props2)
- $$invalidate(5, wrapper = $$props2.wrapper);
- if ("prev" in $$props2)
- prev = $$props2.prev;
- if ("downX" in $$props2)
- downX = $$props2.downX;
- if ("downV" in $$props2)
- downV = $$props2.downV;
- if ("rect" in $$props2)
- rect = $$props2.rect;
- if ("width" in $$props2)
- $$invalidate(6, width = $$props2.width);
- };
- if ($$props && "$$inject" in $$props) {
- $$self.$inject_state($$props.$$inject);
- }
- $$self.$$.update = () => {
- if ($$self.$$.dirty & /*value*/
- 1) {
- value !== void 0 && update();
- }
- if ($$self.$$.dirty & /*value*/
- 1) {
- $$invalidate(6, width = Number.isFinite(value) ? Math.max(((value == null ? void 0 : value.toString().length) ?? 1) * 8, 30) + "px" : "20px");
- }
- };
- return [
- value,
- min,
- max,
- step,
- inputEl,
- wrapper,
- width,
- handleChange,
- handleMouseDown,
- handleMouseUp,
- id,
- click_handler,
- input_input_handler,
- input_binding,
- click_handler_1,
- div_binding
- ];
-}
-class Integer extends SvelteComponentDev {
- constructor(options) {
- super(options);
- init(this, options, instance$4, create_fragment$4, safe_not_equal, {
- min: 1,
- max: 2,
- step: 3,
- value: 0,
- id: 10
- });
- dispatch_dev("SvelteRegisterComponent", {
- component: this,
- tagName: "Integer",
- options,
- id: create_fragment$4.name
- });
- }
- get min() {
- return this.$$.ctx[1];
- }
- set min(min) {
- this.$$set({ min });
- flush();
- }
- get max() {
- return this.$$.ctx[2];
- }
- set max(max) {
- this.$$set({ max });
- flush();
- }
- get step() {
- return this.$$.ctx[3];
- }
- set step(step) {
- this.$$set({ step });
- flush();
- }
- get value() {
- return this.$$.ctx[0];
- }
- set value(value) {
- this.$$set({ value });
- flush();
- }
- get id() {
- return this.$$.ctx[10];
- }
- set id(id) {
- this.$$set({ id });
- flush();
- }
-}
-const file$3 = "src/lib/helpers/StorySettings.svelte";
-function get_each_context$1(ctx, list, i) {
- const child_ctx = ctx.slice();
- child_ctx[0] = list[i];
- return child_ctx;
-}
-function create_each_block$1(ctx) {
- let option;
- const block = {
- c: function create() {
- option = element("option");
- this.h();
- },
- l: function claim(nodes) {
- option = claim_element(nodes, "OPTION", {});
- var option_nodes = children(option);
- option_nodes.forEach(detach_dev);
- this.h();
- },
- h: function hydrate() {
- option.__value = /*theme*/
- ctx[0];
- set_input_value(option, option.__value);
- add_location(option, file$3, 27, 4, 542);
- },
- m: function mount(target, anchor) {
- insert_hydration_dev(target, option, anchor);
- },
- p: noop,
- d: function destroy(detaching) {
- if (detaching) {
- detach_dev(option);
- }
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_each_block$1.name,
- type: "each",
- source: "(25:2) {#each themes as theme}",
- ctx
- });
- return block;
-}
-function create_fragment$3(ctx) {
- let select;
- let mounted;
- let dispose;
- let each_value = ensure_array_like_dev(
- /*themes*/
- ctx[1]
- );
- let each_blocks = [];
- for (let i = 0; i < each_value.length; i += 1) {
- each_blocks[i] = create_each_block$1(get_each_context$1(ctx, each_value, i));
- }
- const block = {
- c: function create() {
- select = element("select");
- for (let i = 0; i < each_blocks.length; i += 1) {
- each_blocks[i].c();
- }
- this.h();
- },
- l: function claim(nodes) {
- select = claim_element(nodes, "SELECT", {});
- var select_nodes = children(select);
- for (let i = 0; i < each_blocks.length; i += 1) {
- each_blocks[i].l(select_nodes);
- }
- select_nodes.forEach(detach_dev);
- this.h();
- },
- h: function hydrate() {
- if (
- /*theme*/
- ctx[0] === void 0
- )
- add_render_callback(() => (
- /*select_change_handler*/
- ctx[2].call(select)
- ));
- add_location(select, file$3, 25, 0, 484);
- },
- m: function mount(target, anchor) {
- insert_hydration_dev(target, select, anchor);
- for (let i = 0; i < each_blocks.length; i += 1) {
- if (each_blocks[i]) {
- each_blocks[i].m(select, null);
- }
- }
- select_option(
- select,
- /*theme*/
- ctx[0],
- true
- );
- if (!mounted) {
- dispose = listen_dev(
- select,
- "change",
- /*select_change_handler*/
- ctx[2]
- );
- mounted = true;
- }
- },
- p: function update(ctx2, [dirty]) {
- if (dirty & /*themes*/
- 2) {
- each_value = ensure_array_like_dev(
- /*themes*/
- ctx2[1]
- );
- let i;
- for (i = 0; i < each_value.length; i += 1) {
- const child_ctx = get_each_context$1(ctx2, each_value, i);
- if (each_blocks[i]) {
- each_blocks[i].p(child_ctx, dirty);
- } else {
- each_blocks[i] = create_each_block$1(child_ctx);
- each_blocks[i].c();
- each_blocks[i].m(select, null);
- }
- }
- for (; i < each_blocks.length; i += 1) {
- each_blocks[i].d(1);
- }
- each_blocks.length = each_value.length;
- }
- if (dirty & /*theme, themes*/
- 3) {
- select_option(
- select,
- /*theme*/
- ctx2[0]
- );
- }
- },
- i: noop,
- o: noop,
- d: function destroy(detaching) {
- if (detaching) {
- detach_dev(select);
- }
- destroy_each(each_blocks, detaching);
- mounted = false;
- dispose();
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_fragment$3.name,
- type: "component",
- source: "",
- ctx
- });
- return block;
-}
-function instance$3($$self, $$props, $$invalidate) {
- let { $$slots: slots = {}, $$scope } = $$props;
- validate_slots("StorySettings", slots, []);
- const themes = ["dark", "light", "catppuccin", "solarized", "high-contrast", "nord", "dracula"];
- let theme = themes[0];
- const writable_props = [];
- Object.keys($$props).forEach((key) => {
- if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot")
- console.warn(` was created with unknown prop '${key}'`);
- });
- function select_change_handler() {
- theme = select_value(this);
- $$invalidate(0, theme);
- $$invalidate(1, themes);
- }
- $$self.$capture_state = () => ({ themes, theme });
- $$self.$inject_state = ($$props2) => {
- if ("theme" in $$props2)
- $$invalidate(0, theme = $$props2.theme);
- };
- if ($$props && "$$inject" in $$props) {
- $$self.$inject_state($$props.$$inject);
- }
- $$self.$$.update = () => {
- if ($$self.$$.dirty & /*theme*/
- 1) {
- if (theme) {
- const classes = document.body.classList;
- const newClassName = `theme-${theme}`;
- for (const className of classes) {
- if (className.startsWith("theme-") && className !== newClassName) {
- classes.remove(className);
- }
- }
- document.body.classList.add(newClassName);
- }
- }
- };
- return [theme, themes, select_change_handler];
-}
-class StorySettings extends SvelteComponentDev {
- constructor(options) {
- super(options);
- init(this, options, instance$3, create_fragment$3, safe_not_equal, {});
- dispatch_dev("SvelteRegisterComponent", {
- component: this,
- tagName: "StorySettings",
- options,
- id: create_fragment$3.name
- });
- }
-}
-const file$2 = "src/lib/elements/Integer.story.svelte";
-function create_default_slot$1(ctx) {
- let div;
- let integer;
- let current;
- integer = new Integer({
- props: { value: 5, min: 0, max: 42 },
- $$inline: true
- });
- const block = {
- c: function create() {
- div = element("div");
- create_component(integer.$$.fragment);
- this.h();
- },
- l: function claim(nodes) {
- div = claim_element(nodes, "DIV", { class: true });
- var div_nodes = children(div);
- claim_component(integer.$$.fragment, div_nodes);
- div_nodes.forEach(detach_dev);
- this.h();
- },
- h: function hydrate() {
- attr_dev(div, "class", "s-c5uIg08NK9i-");
- add_location(div, file$2, 8, 2, 160);
- },
- m: function mount(target, anchor) {
- insert_hydration_dev(target, div, anchor);
- mount_component(integer, div, null);
- current = true;
- },
- p: noop,
- i: function intro(local) {
- if (current)
- return;
- transition_in(integer.$$.fragment, local);
- current = true;
- },
- o: function outro(local) {
- transition_out(integer.$$.fragment, local);
- current = false;
- },
- d: function destroy(detaching) {
- if (detaching) {
- detach_dev(div);
- }
- destroy_component(integer);
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_default_slot$1.name,
- type: "slot",
- source: "(6:0) ",
- ctx
- });
- return block;
-}
-function create_controls_slot(ctx) {
- let storysettings;
- let current;
- storysettings = new StorySettings({ $$inline: true });
- const block = {
- c: function create() {
- create_component(storysettings.$$.fragment);
- },
- l: function claim(nodes) {
- claim_component(storysettings.$$.fragment, nodes);
- },
- m: function mount(target, anchor) {
- mount_component(storysettings, target, anchor);
- current = true;
- },
- i: function intro(local) {
- if (current)
- return;
- transition_in(storysettings.$$.fragment, local);
- current = true;
- },
- o: function outro(local) {
- transition_out(storysettings.$$.fragment, local);
- current = false;
- },
- d: function destroy(detaching) {
- destroy_component(storysettings, detaching);
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_controls_slot.name,
- type: "slot",
- source: '(10:3) ',
- ctx
- });
- return block;
-}
-function create_fragment$2(ctx) {
- let hst_story;
- let current;
- hst_story = new /*Hst*/
- ctx[0].Story({
- props: {
- $$slots: {
- controls: [create_controls_slot],
- default: [create_default_slot$1]
- },
- $$scope: { ctx }
- },
- $$inline: true
- });
- const block = {
- c: function create() {
- create_component(hst_story.$$.fragment);
- },
- l: function claim(nodes) {
- claim_component(hst_story.$$.fragment, nodes);
- },
- m: function mount(target, anchor) {
- mount_component(hst_story, target, anchor);
- current = true;
- },
- p: function update(ctx2, [dirty]) {
- const hst_story_changes = {};
- if (dirty & /*$$scope*/
- 2) {
- hst_story_changes.$$scope = { dirty, ctx: ctx2 };
- }
- hst_story.$set(hst_story_changes);
- },
- i: function intro(local) {
- if (current)
- return;
- transition_in(hst_story.$$.fragment, local);
- current = true;
- },
- o: function outro(local) {
- transition_out(hst_story.$$.fragment, local);
- current = false;
- },
- d: function destroy(detaching) {
- destroy_component(hst_story, detaching);
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_fragment$2.name,
- type: "component",
- source: "",
- ctx
- });
- return block;
-}
-function instance$2($$self, $$props, $$invalidate) {
- let { $$slots: slots = {}, $$scope } = $$props;
- validate_slots("Integer_story", slots, []);
- let { Hst } = $$props;
- $$self.$$.on_mount.push(function() {
- if (Hst === void 0 && !("Hst" in $$props || $$self.$$.bound[$$self.$$.props["Hst"]])) {
- console.warn(" was created without expected prop 'Hst'");
- }
- });
- const writable_props = ["Hst"];
- Object.keys($$props).forEach((key) => {
- if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$" && key !== "slot")
- console.warn(` was created with unknown prop '${key}'`);
- });
- $$self.$$set = ($$props2) => {
- if ("Hst" in $$props2)
- $$invalidate(0, Hst = $$props2.Hst);
- };
- $$self.$capture_state = () => ({ Hst, Integer, StorySettings });
- $$self.$inject_state = ($$props2) => {
- if ("Hst" in $$props2)
- $$invalidate(0, Hst = $$props2.Hst);
- };
- if ($$props && "$$inject" in $$props) {
- $$self.$inject_state($$props.$$inject);
- }
- return [Hst];
-}
-class Integer_story extends SvelteComponentDev {
- constructor(options) {
- super(options);
- init(this, options, instance$2, create_fragment$2, safe_not_equal, { Hst: 0 });
- dispatch_dev("SvelteRegisterComponent", {
- component: this,
- tagName: "Integer_story",
- options,
- id: create_fragment$2.name
- });
- }
- get Hst() {
- throw new Error(": Props cannot be read directly from the component instance unless compiling with 'accessors: true' or ''");
- }
- set Hst(value) {
- throw new Error(": Props cannot be set directly on the component instance unless compiling with 'accessors: true' or ''");
- }
-}
-const file$1 = "src/lib/elements/Select.svelte";
-function get_each_context(ctx, list, i) {
- const child_ctx = ctx.slice();
- child_ctx[4] = list[i];
- child_ctx[6] = i;
- return child_ctx;
-}
-function create_each_block(ctx) {
- let option;
- let t_value = (
- /*label*/
- ctx[4] + ""
- );
- let t;
- const block = {
- c: function create() {
- option = element("option");
- t = text(t_value);
- this.h();
- },
- l: function claim(nodes) {
- option = claim_element(nodes, "OPTION", {});
- var option_nodes = children(option);
- t = claim_text(option_nodes, t_value);
- option_nodes.forEach(detach_dev);
- this.h();
- },
- h: function hydrate() {
- option.__value = /*i*/
- ctx[6];
- set_input_value(option, option.__value);
- add_location(option, file$1, 8, 4, 150);
- },
- m: function mount(target, anchor) {
- insert_hydration_dev(target, option, anchor);
- append_hydration_dev(option, t);
- },
- p: function update(ctx2, dirty) {
- if (dirty & /*options*/
- 2 && t_value !== (t_value = /*label*/
- ctx2[4] + ""))
- set_data_dev(t, t_value);
- },
- d: function destroy(detaching) {
- if (detaching) {
- detach_dev(option);
- }
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_each_block.name,
- type: "each",
- source: "(7:2) {#each options as label, i}",
- ctx
- });
- return block;
-}
-function create_fragment$1(ctx) {
- let select;
- let mounted;
- let dispose;
- let each_value = ensure_array_like_dev(
- /*options*/
- ctx[1]
- );
- let each_blocks = [];
- for (let i = 0; i < each_value.length; i += 1) {
- each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
- }
- const block = {
- c: function create() {
- select = element("select");
- for (let i = 0; i < each_blocks.length; i += 1) {
- each_blocks[i].c();
- }
- this.h();
- },
- l: function claim(nodes) {
- select = claim_element(nodes, "SELECT", { id: true, class: true });
- var select_nodes = children(select);
- for (let i = 0; i < each_blocks.length; i += 1) {
- each_blocks[i].l(select_nodes);
- }
- select_nodes.forEach(detach_dev);
- this.h();
- },
- h: function hydrate() {
- attr_dev(
- select,
- "id",
- /*id*/
- ctx[2]
- );
- attr_dev(select, "class", "s-NKPjzx4oHzNZ");
- if (
- /*value*/
- ctx[0] === void 0
- )
- add_render_callback(() => (
- /*select_change_handler*/
- ctx[3].call(select)
- ));
- add_location(select, file$1, 6, 0, 91);
- },
- m: function mount(target, anchor) {
- insert_hydration_dev(target, select, anchor);
- for (let i = 0; i < each_blocks.length; i += 1) {
- if (each_blocks[i]) {
- each_blocks[i].m(select, null);
- }
- }
- select_option(
- select,
- /*value*/
- ctx[0],
- true
- );
- if (!mounted) {
- dispose = listen_dev(
- select,
- "change",
- /*select_change_handler*/
- ctx[3]
- );
- mounted = true;
- }
- },
- p: function update(ctx2, [dirty]) {
- if (dirty & /*options*/
- 2) {
- each_value = ensure_array_like_dev(
- /*options*/
- ctx2[1]
- );
- let i;
- for (i = 0; i < each_value.length; i += 1) {
- const child_ctx = get_each_context(ctx2, each_value, i);
- if (each_blocks[i]) {
- each_blocks[i].p(child_ctx, dirty);
- } else {
- each_blocks[i] = create_each_block(child_ctx);
- each_blocks[i].c();
- each_blocks[i].m(select, null);
- }
- }
- for (; i < each_blocks.length; i += 1) {
- each_blocks[i].d(1);
- }
- each_blocks.length = each_value.length;
- }
- if (dirty & /*id*/
- 4) {
- attr_dev(
- select,
- "id",
- /*id*/
- ctx2[2]
- );
- }
- if (dirty & /*value*/
- 1) {
- select_option(
- select,
- /*value*/
- ctx2[0]
- );
- }
- },
- i: noop,
- o: noop,
- d: function destroy(detaching) {
- if (detaching) {
- detach_dev(select);
- }
- destroy_each(each_blocks, detaching);
- mounted = false;
- dispose();
- }
- };
- dispatch_dev("SvelteRegisterBlock", {
- block,
- id: create_fragment$1.name,
- type: "component",
- source: "",
- ctx
- });
- return block;
-}
-function instance$1($$self, $$props, $$invalidate) {
- let { $$slots: slots = {}, $$scope } = $$props;
- validate_slots("Select", slots, []);
- let { options = [] } = $$props;
- let { value = 0 } = $$props;
- let { id } = $$props;
- $$self.$$.on_mount.push(function() {
- if (id === void 0 && !("id" in $$props || $$self.$$.bound[$$self.$$.props["id"]])) {
- console.warn("