@nil-/doc 1.0.0 → 2.0.0

package/src/lib/components/block/context.ts

@@ -0,0 +1,43 @@
+import { getContext, setContext } from "svelte";
+import { writable } from "svelte/store";
+import type { Writable } from "svelte/store";
+
+import type { Prop, SpecialProp, Event } from "./controls/types";
+import type { ValueType } from "./types";
+
+export type Params = {
+    id: number;
+    tag: string;
+    values: Record<string, ValueType>;
+};
+
+const create = <T>(defaulter: () => T) => {
+    const symbol = Symbol();
+    return {
+        init: () => setContext<Writable<T>>(symbol, writable(defaulter())),
+        get: () => getContext<Writable<T>>(symbol)
+    };
+};
+
+export const { init: initParams, get: getParams } = create<Params[]>(() => []);
+
+export type Controls = {
+    props: (Prop | SpecialProp)[];
+    events: Event[];
+};
+export type ControlValue = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    props: Record<string, any>;
+    events: { name: string; detail: string; count: number }[];
+};
+
+// prettier-ignore
+export const { init: initControls, get: getControls } = create<Controls>(() => ({ props: [], events: [] }));
+// prettier-ignore
+export const { init: initDefaults, get: getDefaults } = create<Record<string, ValueType>>(() => ({}));
+// prettier-ignore
+export const { init: initOrientation, get: getOrientation } = create<boolean>(() => false);
+// prettier-ignore
+export const { init: initControlInfo, get: getControlInfo } = create<Writable<Controls> | null>(() => null);
+// prettier-ignore
+export const { init: initControlValue, get: getControlValue } = create<Writable<ControlValue> | null>(() => null);

package/src/lib/components/block/controls/Controls.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    import Styler from "./Styler.svelte";
+    import Props from "./props/Props.svelte";
+    import Events from "./events/Events.svelte";
+    import { getControlInfo, getControlValue } from "../context";
+    import Button from "../icons/Button.svelte";
+    import ControlView from "../icons/ControlView.svelte";
+    import Position from "../icons/Position.svelte";
+    import { onDestroy } from "svelte";
+
+    const controls = getControlInfo();
+    const values = getControlValue();
+
+    let cc = $state($controls);
+    let vv = $state($values);
+
+    const unsubs: (() => void)[] = [];
+
+    unsubs.push(controls.subscribe(v => cc = v));
+    unsubs.push(values.subscribe(v => vv = v));
+
+    let {
+        mode = $bindable("props"),
+        position = $bindable("bottom")
+    }: {
+        mode: "props" | "events";
+        position: "bottom" | "right";
+    } = $props();
+
+    const cyclePosition = () => {
+        switch (position) {
+            case "bottom":
+                position = "right";
+                break;
+            case "right":
+                position = "bottom";
+                break;
+        }
+    };
+
+    const cycleMode = () => {
+        switch (mode) {
+            case "events":
+                mode = "props";
+                break;
+            case "props":
+                mode = "events";
+                break;
+        }
+    };
+    
+    onDestroy(() => unsubs.forEach(v => v()));
+</script>
+
+<Styler type={mode}>
+    <div class="header">
+        <div class="buttons">
+            <Button scale onclick={cyclePosition} title={position}>
+                <Position {position} />
+            </Button>
+            <Button scale onclick={cycleMode} title={mode}>
+                <ControlView {mode} />
+            </Button>
+        </div>
+        {#if "props" === mode}
+            <div>Name</div>
+            <div>Value</div>
+            <div>Use</div>
+        {:else if "events" === mode}
+            <div>Events</div>
+            <div>Detail</div>
+        {/if}
+    </div>
+    {#key $values && $controls}
+        {#if cc != null && $cc != null && vv != null && $vv != null}
+            <Props values={vv} infos={$cc.props} visible={"props" === mode} />
+            <Events events={$vv.events} visible={"events" === mode} />
+        {/if}
+    {/key}
+</Styler>
+
+<style>
+    .header {
+        position: relative;
+    }
+
+    .buttons {
+        position: absolute;
+        width: 3.5rem;
+        height: 1.75rem;
+        left: 0.3rem;
+        top: 0.15rem;
+        display: flex;
+        cursor: pointer;
+    }
+</style>

package/src/lib/components/block/controls/Styler.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    let {
+        type,
+        children
+    }: {
+        type: "props" | "events";
+        children?: Snippet
+    } = $props();
+</script>
+
+<div class:props={"props" === type} class:events={"events" === type}>
+    {@render children?.()}
+</div>
+
+<style>
+    div {
+        display: grid;
+        min-width: 31.25rem;
+        height: 100%;
+        grid-auto-rows: 2rem;
+        box-sizing: border-box;
+        user-select: none;
+    }
+
+    div > :global(div) {
+        display: grid;
+    }
+
+    div.props > :global(div) {
+        grid-template-columns: minmax(15rem, 1fr) 12.5rem 2.5rem;
+    }
+
+    div.events > :global(div) {
+        grid-template-columns: 2fr 3fr;
+        align-items: center;
+    }
+
+    div > :global(div:first-child) {
+        font-weight: bold;
+        place-items: center;
+    }
+
+    div.props > :global(div > div:nth-child(2)) {
+        display: grid;
+        place-items: center;
+    }
+
+    div.props > :global(div > div:nth-child(3)) {
+        margin: auto;
+    }
+
+    div > :global(div > div > .control) {
+        width: 100%;
+        height: 80%;
+        box-sizing: border-box;
+    }
+
+    div > :global(div > div > .control[disabled]) {
+        cursor: not-allowed;
+        filter: opacity(0.5);
+    }
+
+    /* colors */
+    div {
+        transition: background-color var(--i-nil-doc-transition-time);
+        background-repeat: repeat;
+        background-size: 100% 4rem;
+        background-image: linear-gradient(
+            to bottom,
+            var(--i-nil-doc-controls-p) 2rem,
+            var(--i-nil-doc-controls-s) 2rem
+        );
+    }
+
+    div > :global(div:nth-child(n + 2):hover) {
+        background-color: var(--i-nil-doc-controls-hover);
+    }
+
+    div > :global(div:hover .tooltip) {
+        background-color: var(--i-nil-doc-controls-p);
+        outline: 1px solid var(--i-nil-doc-block-outline-color);
+    }
+</style>

package/src/lib/components/block/controls/events/Events.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    let {
+        visible,
+        events = []
+    }: {
+        visible: boolean;
+        events?: { name: string; detail: string; count: number }[];
+    } = $props()
+</script>
+
+{#if visible}
+    {#each events as { count, detail, name }, i (i)}
+        <div>
+            <div class="name">
+                <div>{name}</div>
+                {#if count > 1}
+                    <div class="count">
+                        [{count.toString().padStart(2, "0")}]
+                    </div>
+                {/if}
+            </div>
+            <div>{detail}</div>
+        </div>
+    {/each}
+{/if}
+
+<style>
+    .name {
+        padding: 0rem 0.5rem;
+        display: grid;
+        place-content: center;
+        grid-auto-flow: column;
+        grid-auto-columns: 1.875rem;
+        grid-template-columns: 1fr;
+    }
+
+    .count {
+        display: grid;
+        place-items: center;
+        text-align: center;
+        font-size: 0.8rem;
+    }
+</style>

package/src/lib/components/block/controls/props/Button.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { getClick, getName } from "./misc/utils";
+    import type { Unionized, PropType } from "../types";
+
+    let {
+        info,
+        visible = false
+    }: {
+        info: Unionized<PropType<"button">>;
+        visible?: boolean;
+    } = $props();
+
+    let click = $derived(getClick(info)());
+</script>
+
+{#if visible}
+    <div><button onclick={click}>{getName(info)}</button></div>
+{/if}
+
+<style>
+    button {
+        grid-column: 1 / 4;
+        box-sizing: border-box;
+        margin: 0.15rem 0.3rem;
+    }
+</style>

package/src/lib/components/block/controls/props/Color.svelte

@@ -0,0 +1,140 @@
+<script lang="ts" module>
+    import type Picker from "vanilla-picker";
+    import type { Unionized, PropType, Detailed } from "../types";
+
+    const colorSetter = (
+        format: Detailed<PropType<"color">>["format"],
+        color: Parameters<Picker["onChange"]>[0]
+    ) => {
+        switch (format) {
+            case "hex":
+                return color.hex.substring(0, 7);
+            case "hexa":
+                return color.hex.substring(0, 9);
+            case "hsl":
+                return color.hslString;
+            case "hsla":
+                return color.hslaString;
+            case "rgb":
+                return color.rgbString;
+            case "rgba":
+            default:
+                return color.rgbaString;
+        }
+    };
+</script>
+
+<script lang="ts">
+    import { getName, getFormat } from "./misc/utils";
+    import { defaulter } from "./misc/defaulter";
+    import NameHeader from "./misc/Name.svelte";
+
+    import Toggle from "./misc/Toggle.svelte";
+
+    let {
+        value = $bindable(),
+        info,
+        depth,
+        disabled = false,
+        visible = false
+    }: {
+        value: string | undefined,
+        info: Unionized<PropType<"color">>,
+        depth: number,
+        disabled?: boolean,
+        visible?: boolean
+    } = $props();
+
+    let ivalue = $state(value ?? defaulter(info));
+    let enabled = $state(value !== undefined);
+
+    type Format = Detailed<PropType<"color">>["format"];
+    type EditorFormat = "hex" | "rgb" | "hsl";
+
+    const action = (d: HTMLElement, { format, P }: { format: Format; P: typeof Picker }) => {
+        d.style.borderColor = ivalue;
+        const picker = new P({
+            parent: d,
+            popup: "left",
+            editorFormat: format.substring(0, 3) as EditorFormat,
+            editor: true,
+            alpha: 4 === format.length,
+            onChange: (color) => {
+                ivalue = colorSetter(getFormat(info), color);
+                d.style.borderColor = ivalue;
+            },
+            color: ivalue
+        });
+        return {
+            update: (format: Format) => {
+                picker.setOptions({
+                    alpha: 4 === format.length,
+                    editorFormat: format.substring(0, 3) as EditorFormat
+                });
+            },
+            destroy: () => picker.destroy()
+        };
+    };
+
+    const set_value = (v?: string) => { value = v; };
+    $effect(() => set_value(enabled && !disabled ? ivalue : undefined) );
+</script>
+
+{#if visible}
+    <div>
+        <NameHeader name={getName(info)} {depth} />
+        <div>
+            {#await import("vanilla-picker")}
+                <button>
+                    {ivalue}
+                </button>
+            {:then { default: P }}
+                <button
+                    style:height="1.5rem"
+                    style:width="12.5rem"
+                    use:action={{ format: getFormat(info), P }}
+                    disabled={!enabled || disabled}
+                >
+                    {ivalue}
+                </button>
+            {/await}
+        </div>
+        <div><Toggle bind:toggled={enabled} {disabled} /></div>
+    </div>
+{/if}
+
+<style>
+    button {
+        font-size: 0.7rem;
+        border-top-width: 1px;
+        border-bottom-width: 1px;
+        border-left-width: 10px;
+        border-right-width: 10px;
+        border-style: solid;
+        background-color: var(--i-nil-doc-bg-color);
+        color: var(--i-nil-doc-color);
+        outline: 1px solid gray;
+    }
+
+    button[disabled] {
+        border-color: gray !important;
+    }
+
+    button :global(.popup.popup_top) {
+        left: -1.3rem !important;
+        color: var(--i-nil-doc-color) !important;
+        box-shadow: currentColor 0px 0px 10px 0px !important;
+    }
+
+    button :global(.picker_wrapper),
+    button :global(.picker_arrow),
+    button :global(.picker_arrow::before),
+    button :global(.picker_arrow::after) {
+        background-color: var(--i-nil-doc-bg-color) !important;
+    }
+
+    button :global(.picker_done > button) {
+        background: var(--i-nil-doc-bg-color) !important;
+        color: var(--i-nil-doc-color) !important;
+    }
+</style>

package/src/lib/components/block/controls/props/Component.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    import Text from "./Text.svelte";
+    import Number from "./Number.svelte";
+    import Range from "./Range.svelte";
+    import Toggle from "./Toggle.svelte";
+    import Select from "./Select.svelte";
+    import Tuple from "./Tuple.svelte";
+    import Table from "./Table.svelte";
+    import Color from "./Color.svelte";
+    import Button from "./Button.svelte";
+
+    import type { SpecialProp, Prop } from "../types";
+
+    // by use, info type is mapped to the value type
+    // unfortunately i can't use typescript in the markup part of svelte
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let {
+        value = $bindable(),
+        info,
+        depth,
+        disabled = false,
+        visible = false
+    }: {
+        value: any;
+        info: Prop | SpecialProp;
+        depth: number;
+        disabled?: boolean;
+        visible?: boolean;
+    } = $props();
+</script>
+
+{#if info instanceof Array}
+    {#if "table" === info[1]}
+        <Table {info} bind:value {depth} {disabled} {visible} />
+    {:else if "tuple" === info[1]}
+        <Tuple {info} bind:value {depth} {disabled} {visible} />
+    {:else if "text" === info[1]}
+        <Text {info} bind:value {depth} {disabled} {visible} />
+    {:else if "color" === info[1]}
+        <Color {info} bind:value {depth} {disabled} {visible} />
+    {:else if "number" === info[1]}
+        <Number {info} bind:value {depth} {disabled} {visible} />
+    {:else if "range" === info[1]}
+        <Range {info} bind:value {depth} {disabled} {visible} />
+    {:else if "select" === info[1]}
+        <Select {info} bind:value {depth} {disabled} {visible} />
+    {:else if "toggle" === info[1]}
+        <Toggle {info} bind:value {depth} {disabled} {visible} />
+    {:else if "button" === info[1]}
+        <Button {info} {visible} />
+    {/if}
+{:else if "table" === info.type}
+    <Table {info} bind:value {depth} {disabled} {visible} />
+{:else if "tuple" === info.type}
+    <Tuple {info} bind:value {depth} {disabled} {visible} />
+{:else if "text" === info.type}
+    <Text {info} bind:value {depth} {disabled} {visible} />
+{:else if "color" === info.type}
+    <Color {info} bind:value {depth} {disabled} {visible} />
+{:else if "number" === info.type}
+    <Number {info} bind:value {depth} {disabled} {visible} />
+{:else if "range" === info.type}
+    <Range {info} bind:value {depth} {disabled} {visible} />
+{:else if "select" === info.type}
+    <Select {info} bind:value {depth} {disabled} {visible} />
+{:else if "toggle" === info.type}
+    <Toggle {info} bind:value {depth} {disabled} {visible} />
+{:else if "button" === info.type}
+    <Button {info} {visible} />
+{/if}

package/src/lib/components/block/controls/props/Number.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { getName } from "./misc/utils";
+    import { defaulter } from "./misc/defaulter";
+    import NameHeader from "./misc/Name.svelte";
+
+    import Toggle from "./misc/Toggle.svelte";
+
+    import type { Unionized, PropType } from "../types";
+
+    let {
+        value = $bindable(),
+        info,
+        depth,
+        disabled = false,
+        visible = false
+    }: {
+        value: number | undefined;
+        info: Unionized<PropType<"number">>;
+        depth: number;
+        disabled?: boolean;
+        visible?: boolean;
+    } = $props();
+
+    let ivalue = $state(value ?? defaulter(info));
+    let enabled = $state(value !== undefined);
+
+    const set_value = (v?: number) => { value = v; };
+    $effect(() => set_value(enabled && !disabled ? ivalue : undefined) );
+</script>
+
+{#if visible}
+    <div>
+        <NameHeader name={getName(info)} {depth} />
+        <div>
+            <input
+                class="control"
+                type="number"
+                bind:value={ivalue}
+                disabled={!enabled || disabled}
+            />
+        </div>
+        <div><Toggle bind:toggled={enabled} {disabled} /></div>
+    </div>
+{/if}

package/src/lib/components/block/controls/props/Props.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import Component from "./Component.svelte";
+    import { getName } from "./misc/utils";
+
+    import type { SpecialProp, Prop } from "../types";
+    import type { ControlValue } from "../../context";
+    import type { Writable } from "svelte/store";
+
+    let {
+        infos,
+        values,
+        visible,
+    }: {
+        infos: (SpecialProp | Prop)[];
+        values: Writable<ControlValue>;
+        visible: boolean;
+    } = $props();
+
+</script>
+
+{#each infos as info}
+    <Component
+        {info}
+        depth={1}
+        {visible} 
+        bind:value={$values.props[getName(info)]}
+    />
+{/each}

package/src/lib/components/block/controls/props/Range.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+    import { defaulter } from "./misc/defaulter";
+    import NameHeader from "./misc/Name.svelte";
+    import { nformat } from "./misc/nformat";
+    import { getName } from "./misc/utils";
+
+    import Toggle from "./misc/Toggle.svelte";
+
+    import type { Unionized, PropType } from "../types";
+
+    let {
+        value = $bindable(),
+        info,
+        depth,
+        disabled = false,
+        visible = false
+    } = $props<{
+        value: number | undefined;
+        info: Unionized<PropType<"range">>;
+        depth: number;
+        disabled?: boolean;
+        visible?: boolean;
+    }>();
+
+    let ivalue = $state(value ?? defaulter(info));
+    let enabled = $state(value !== undefined);
+
+    const set_value = (v: boolean) => { value = v; };
+    $effect(() => set_value(enabled && !disabled ? ivalue : undefined) );
+
+    let i =
+        $derived(info instanceof Array
+            ? {
+                  min: info[2],
+                  max: info[3],
+                  step: info[4]
+              }
+            : {
+                  min: info.min,
+                  max: info.max,
+                  step: info.step
+              });
+</script>
+
+{#if visible}
+    <div>
+        <NameHeader name={getName(info)} {depth} />
+        <div class="input" class:disabled={!enabled || disabled}>
+            <div class="tooltip">Value: {nformat(ivalue, 6, 11)}</div>
+            <div>{nformat(ivalue, 3, 5)}</div>
+            <input type="range" bind:value={ivalue} {...i} disabled={!enabled || disabled} />
+        </div>
+        <div><Toggle bind:toggled={enabled} {disabled} /></div>
+    </div>
+{/if}
+
+<style>
+    .input {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 4rem 1fr;
+        gap: 0.25rem;
+        position: relative;
+        box-sizing: border-box;
+    }
+
+    .input > div {
+        width: 100%;
+        height: 80%;
+        display: grid;
+        font-size: 0.8rem;
+        place-items: center;
+    }
+
+    input {
+        width: 100%;
+    }
+
+    .tooltip {
+        left: -110%;
+        visibility: hidden;
+        position: absolute;
+    }
+
+    .input.disabled {
+        cursor: not-allowed;
+        filter: opacity(0.5);
+    }
+
+    .input:hover > .tooltip {
+        visibility: visible;
+    }
+
+    .input.disabled:hover > .tooltip {
+        visibility: hidden;
+    }
+</style>