@things-factory/figure-ui 10.1.75 → 10.1.76

package/dist-client/modeller/figure-properties.js

@@ -0,0 +1,239 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { i18next, localize } from '@operato/i18n';
+import { FIGURE_FACES } from '@hatiolab/figure-model';
+import { occupancyFromParts } from './occupancy.js';
+import { tagsOf, figureFigureFacts } from './figure-facts.js';
+import { SidePanelStyles } from './side-panel-styles.js';
+import { ScrollbarStyles } from '@operato/styles';
+const PLACEMENTS = ['floor', 'ceiling', 'center', 'wall'];
+const FACES = Object.keys(FIGURE_FACES);
+/**
+ * 속성 — the modeller's figure properties.
+ *
+ * The tab opens with what the figure is: its name, the face it is placed by, the room it takes up, where the
+ * catalogue files it.
+ *
+ * Two kinds of change leave this tab, and it does neither itself:
+ *  - `command` carries an authoring command (rename, declare the room, the mounting face). The page runs it
+ *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.
+ *  - `catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them
+ *    to the saved row at once, so they need a saved figure.
+ *
+ * Not here yet, because has no place for them: editing the declared room by hand (declares it from the
+ * parts, as graph expressions), and the detail level. Both wait on a ruling.
+ */
+let FigureProperties = class FigureProperties extends localize(i18next)(LitElement) {
+    static { this.styles = [ScrollbarStyles, SidePanelStyles, css `
+    :host {
+      display: block;
+      /* It stands inside the properties tab's panel, which gives the margin; a second one indented it past the type. */
+      padding: 0;
+      overflow: auto;
+    }
+    div[row] {
+      display: flex;
+      gap: 6px;
+      align-items: center;
+    }
+    div[row] > select {
+      flex: 1;
+    }
+    div[row] > button[act] {
+      flex: 1;
+      width: auto;
+      margin-top: 0;
+    }
+    div[row] > span {
+      flex: 1;
+    }
+  `]; }
+    facts() {
+        try {
+            return this.source ? figureFigureFacts(this.source) : undefined;
+        }
+        catch {
+            /* A source the format refuses has no facts to show; the verdict tab says why. */
+            return undefined;
+        }
+    }
+    render() {
+        const facts = this.facts();
+        if (!facts)
+            return nothing;
+        /* The figure's type is the page's (it lives on the row); it is slotted into the first section. */
+        return html `<section>
+        <h3>${i18next.t('figure.label.group-figure')}</h3>
+        <slot name="type"></slot>
+        ${this.renderName(facts)} ${this.renderPlacement(facts)}
+      </section>
+      <section>
+        <h3>${i18next.t('figure.label.group-standing')}</h3>
+        ${this.renderSpace(facts)} ${this.renderMounting(facts)}
+      </section>
+      <section>
+        <h3>${i18next.t('figure.label.group-catalog')}</h3>
+        ${this.renderCatalog()}
+      </section>`;
+    }
+    renderName(facts) {
+        return html `
+      <div field>
+        <label>${i18next.t('figure.label.name')}</label>
+        <input
+          .value=${facts.name}
+          placeholder=${i18next.t('figure.text.figure-display-name')}
+          @change=${(event) => {
+            const input = event.target;
+            if (!input.value.trim()) {
+                /* The format refuses a blank name; put the old one back rather than send a command that fails. */
+                input.value = facts.name;
+                return;
+            }
+            if (input.value.trim() !== facts.name)
+                this.command({ kind: 'rename', name: input.value });
+        }}
+        />
+      </div>
+    `;
+    }
+    /**
+     * The face the figure is placed by. In it is part of the room declaration, so choosing one declares the room
+     * again from the parts — the only way declares it — with the new face. The hint says so.
+     */
+    renderPlacement(facts) {
+        const current = facts.placement ?? 'floor';
+        return html `
+      <div field>
+        <label>${i18next.t('figure.label.figure-placement')}</label>
+        <select
+          ?disabled=${!facts.parts.length}
+          .value=${live(current)}
+          @change=${(event) => {
+            const select = event.target;
+            this.declare(select.value);
+            /* Refused, the figure is placed as it was, and the list says so; taken, the figure drawn again says the new one. */
+            select.value = current;
+        }}
+        >
+          ${PLACEMENTS.map(one => html `<option value=${one} ?selected=${one === current}>${i18next.t('figure.label.placement-' + one)}</option>`)}
+        </select>
+        <small>${i18next.t(facts.parts.length ? 'figure.text.placement-redeclares' : 'figure.text.fit-needs-parts')}</small>
+      </div>
+    `;
+    }
+    renderSpace(facts) {
+        return html `
+      <div field>
+        <label>${i18next.t('figure.label.declared-space')}</label>
+        <div row>
+          <span>${i18next.t(facts.declared ? 'figure.text.declared-space-declared' : 'figure.text.declared-space-none')}</span>
+          <button act ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>
+            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    renderMounting(facts) {
+        const mounting = facts.mounting;
+        /* Chosen, or what is set, or where the figure meets its plane -- not the first part listed (walk 1). */
+        const part = [this.pickedPart, mounting?.part, facts.suggested?.part, facts.parts[0]].find(one => one && facts.parts.includes(one));
+        const face = this.pickedFace ?? mounting?.face ?? facts.suggested?.face ?? 'bottom';
+        return html `
+      <div field>
+        <label>${i18next.t('figure.label.mounting-face')}</label>
+        <div row>
+          <select ?disabled=${!facts.declared} @change=${(e) => (this.pickedPart = e.target.value)}>
+            ${facts.parts.map(one => html `<option value=${one} ?selected=${one === part}>${one}</option>`)}
+          </select>
+          <select ?disabled=${!facts.declared} @change=${(e) => (this.pickedFace = e.target.value)}>
+            ${FACES.map(one => html `<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}
+          </select>
+        </div>
+        <div row>
+          <button act ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part, face })}>
+            ${i18next.t('figure.button.set-mounting-face')}
+          </button>
+          <button act ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>
+            ${i18next.t('figure.button.clear-mounting-face')}
+          </button>
+        </div>
+        <small>
+          ${facts.declared
+            ? mounting
+                ? `${mounting.part} · ${i18next.t('figure.label.face-' + mounting.face)}`
+                : i18next.t('figure.label.mounting-face-none')
+            : i18next.t('figure.text.mounting-face-needs-space')}
+        </small>
+      </div>
+    `;
+    }
+    renderCatalog() {
+        const saved = !!this.figureId;
+        return html `
+      <div field>
+        <label>${i18next.t('figure.label.category')}</label>
+        <input
+          .value=${this.figureCategory ?? ''}
+          ?disabled=${!saved}
+          placeholder=${i18next.t('figure.text.category-placeholder')}
+          @change=${(e) => this.catalog({ category: e.target.value.trim() })}
+        />
+      </div>
+      <div field>
+        <label>${i18next.t('figure.label.tags')}</label>
+        <input
+          .value=${(this.figureTags ?? []).join(', ')}
+          ?disabled=${!saved}
+          placeholder=${i18next.t('figure.text.tags-placeholder')}
+          @change=${(e) => this.catalog({ tags: tagsOf(e.target.value) })}
+        />
+        ${saved ? nothing : html `<small>${i18next.t('figure.text.catalog-needs-a-save')}</small>`}
+      </div>
+    `;
+    }
+    declare(placement) {
+        if (!this.source)
+            return;
+        this.command(occupancyFromParts(this.source, placement));
+    }
+    command(action) {
+        this.dispatchEvent(new CustomEvent('command', { detail: { action }, bubbles: true, composed: true }));
+    }
+    catalog(patch) {
+        this.dispatchEvent(new CustomEvent('catalog', { detail: patch, bubbles: true, composed: true }));
+    }
+};
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureProperties.prototype, "source", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureProperties.prototype, "figureId", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], FigureProperties.prototype, "figureCategory", void 0);
+__decorate([
+    property({ type: Array }),
+    __metadata("design:type", Array)
+], FigureProperties.prototype, "figureTags", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureProperties.prototype, "pickedPart", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], FigureProperties.prototype, "pickedFace", void 0);
+FigureProperties = __decorate([
+    customElement('figure-properties')
+], FigureProperties);
+export { FigureProperties };
+//# sourceMappingURL=figure-properties.js.map

package/dist-client/modeller/figure-properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure-properties.js","sourceRoot":"","sources":["../../client/modeller/figure-properties.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { live } from 'lit/directives/live.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { FIGURE_FACES } from '@hatiolab/figure-model'\nimport type { FigureAuthoringAction, FigureFace } from '@hatiolab/figure-model'\n\nimport { occupancyFromParts } from './occupancy.js'\nimport { tagsOf, figureFigureFacts, type Placement, type FigureFigureFacts } from './figure-facts.js'\nimport { SidePanelStyles } from './side-panel-styles.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nconst PLACEMENTS: Placement[] = ['floor', 'ceiling', 'center', 'wall']\nconst FACES = Object.keys(FIGURE_FACES) as FigureFace[]\n\n/**\n * 속성 — the modeller's figure properties.\n *\n * The tab opens with what the figure is: its name, the face it is placed by, the room it takes up, where the\n * catalogue files it.\n *\n * Two kinds of change leave this tab, and it does neither itself:\n *  - `command` carries an authoring command (rename, declare the room, the mounting face). The page runs it\n *    through the session, so it is one step of the same undo history as every other edit, and is saved with it.\n *  - `catalog` carries a change to the row (category, tags). Those are not in the asset; the page writes them\n *    to the saved row at once, so they need a saved figure.\n *\n * Not here yet, because has no place for them: editing the declared room by hand (declares it from the\n * parts, as graph expressions), and the detail level. Both wait on a ruling.\n */\n@customElement('figure-properties')\nexport class FigureProperties extends localize(i18next)(LitElement) {\n  static styles = [ScrollbarStyles, SidePanelStyles, css`\n    :host {\n      display: block;\n      /* It stands inside the properties tab's panel, which gives the margin; a second one indented it past the type. */\n      padding: 0;\n      overflow: auto;\n    }\n    div[row] {\n      display: flex;\n      gap: 6px;\n      align-items: center;\n    }\n    div[row] > select {\n      flex: 1;\n    }\n    div[row] > button[act] {\n      flex: 1;\n      width: auto;\n      margin-top: 0;\n    }\n    div[row] > span {\n      flex: 1;\n    }\n  `]\n\n  /** The source being edited. */\n  @property({ type: String }) source?: string\n  /** The saved row, if any. Category and tags live on it. */\n  @property({ type: String }) figureId?: string\n  @property({ type: String }) figureCategory?: string\n  @property({ type: Array }) figureTags?: string[]\n  /** The part and face picked for the mounting face, before 「이 면으로」 is pressed. */\n  @state() private pickedPart?: string\n  @state() private pickedFace?: FigureFace\n\n  private facts(): FigureFigureFacts | undefined {\n    try {\n      return this.source ? figureFigureFacts(this.source) : undefined\n    } catch {\n      /* A source the format refuses has no facts to show; the verdict tab says why. */\n      return undefined\n    }\n  }\n\n  render() {\n    const facts = this.facts()\n    if (!facts) return nothing\n    /* The figure's type is the page's (it lives on the row); it is slotted into the first section. */\n    return html`<section>\n        <h3>${i18next.t('figure.label.group-figure')}</h3>\n        <slot name=\"type\"></slot>\n        ${this.renderName(facts)} ${this.renderPlacement(facts)}\n      </section>\n      <section>\n        <h3>${i18next.t('figure.label.group-standing')}</h3>\n        ${this.renderSpace(facts)} ${this.renderMounting(facts)}\n      </section>\n      <section>\n        <h3>${i18next.t('figure.label.group-catalog')}</h3>\n        ${this.renderCatalog()}\n      </section>`\n  }\n\n  private renderName(facts: FigureFigureFacts) {\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.name')}</label>\n        <input\n          .value=${facts.name}\n          placeholder=${i18next.t('figure.text.figure-display-name')}\n          @change=${(event: Event) => {\n            const input = event.target as HTMLInputElement\n            if (!input.value.trim()) {\n              /* The format refuses a blank name; put the old one back rather than send a command that fails. */\n              input.value = facts.name\n              return\n            }\n            if (input.value.trim() !== facts.name) this.command({ kind: 'rename', name: input.value })\n          }}\n        />\n      </div>\n    `\n  }\n\n  /**\n   * The face the figure is placed by. In it is part of the room declaration, so choosing one declares the room\n   * again from the parts — the only way declares it — with the new face. The hint says so.\n   */\n  private renderPlacement(facts: FigureFigureFacts) {\n    const current = facts.placement ?? 'floor'\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.figure-placement')}</label>\n        <select\n          ?disabled=${!facts.parts.length}\n          .value=${live(current)}\n          @change=${(event: Event) => {\n            const select = event.target as HTMLSelectElement\n            this.declare(select.value as Placement)\n            /* Refused, the figure is placed as it was, and the list says so; taken, the figure drawn again says the new one. */\n            select.value = current\n          }}\n        >\n          ${PLACEMENTS.map(\n            one => html`<option value=${one} ?selected=${one === current}>${i18next.t('figure.label.placement-' + one)}</option>`\n          )}\n        </select>\n        <small>${i18next.t(facts.parts.length ? 'figure.text.placement-redeclares' : 'figure.text.fit-needs-parts')}</small>\n      </div>\n    `\n  }\n\n  private renderSpace(facts: FigureFigureFacts) {\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.declared-space')}</label>\n        <div row>\n          <span>${i18next.t(facts.declared ? 'figure.text.declared-space-declared' : 'figure.text.declared-space-none')}</span>\n          <button act ?disabled=${!facts.parts.length} @click=${() => this.declare(facts.placement ?? 'floor')}>\n            <md-icon>fit_screen</md-icon>${i18next.t('figure.button.fit-base-to-parts')}\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private renderMounting(facts: FigureFigureFacts) {\n    const mounting = facts.mounting\n    /* Chosen, or what is set, or where the figure meets its plane -- not the first part listed (walk 1). */\n    const part = [this.pickedPart, mounting?.part, facts.suggested?.part, facts.parts[0]].find(one => one && facts.parts.includes(one))\n    const face: FigureFace = this.pickedFace ?? mounting?.face ?? facts.suggested?.face ?? 'bottom'\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.mounting-face')}</label>\n        <div row>\n          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedPart = (e.target as HTMLSelectElement).value)}>\n            ${facts.parts.map(one => html`<option value=${one} ?selected=${one === part}>${one}</option>`)}\n          </select>\n          <select ?disabled=${!facts.declared} @change=${(e: Event) => (this.pickedFace = (e.target as HTMLSelectElement).value as FigureFace)}>\n            ${FACES.map(one => html`<option value=${one} ?selected=${one === face}>${i18next.t('figure.label.face-' + one)}</option>`)}\n          </select>\n        </div>\n        <div row>\n          <button act ?disabled=${!facts.declared || !part} @click=${() => this.command({ kind: 'set-mounting-face', part: part!, face })}>\n            ${i18next.t('figure.button.set-mounting-face')}\n          </button>\n          <button act ?disabled=${!mounting} @click=${() => this.command({ kind: 'clear-mounting-face' })}>\n            ${i18next.t('figure.button.clear-mounting-face')}\n          </button>\n        </div>\n        <small>\n          ${facts.declared\n            ? mounting\n              ? `${mounting.part} · ${i18next.t('figure.label.face-' + mounting.face)}`\n              : i18next.t('figure.label.mounting-face-none')\n            : i18next.t('figure.text.mounting-face-needs-space')}\n        </small>\n      </div>\n    `\n  }\n\n  private renderCatalog() {\n    const saved = !!this.figureId\n    return html`\n      <div field>\n        <label>${i18next.t('figure.label.category')}</label>\n        <input\n          .value=${this.figureCategory ?? ''}\n          ?disabled=${!saved}\n          placeholder=${i18next.t('figure.text.category-placeholder')}\n          @change=${(e: Event) => this.catalog({ category: (e.target as HTMLInputElement).value.trim() })}\n        />\n      </div>\n      <div field>\n        <label>${i18next.t('figure.label.tags')}</label>\n        <input\n          .value=${(this.figureTags ?? []).join(', ')}\n          ?disabled=${!saved}\n          placeholder=${i18next.t('figure.text.tags-placeholder')}\n          @change=${(e: Event) => this.catalog({ tags: tagsOf((e.target as HTMLInputElement).value) })}\n        />\n        ${saved ? nothing : html`<small>${i18next.t('figure.text.catalog-needs-a-save')}</small>`}\n      </div>\n    `\n  }\n\n  private declare(placement: Placement) {\n    if (!this.source) return\n    this.command(occupancyFromParts(this.source, placement))\n  }\n\n  private command(action: FigureAuthoringAction) {\n    this.dispatchEvent(new CustomEvent('command', { detail: { action }, bubbles: true, composed: true }))\n  }\n\n  private catalog(patch: { category?: string; tags?: string[] }) {\n    this.dispatchEvent(new CustomEvent('catalog', { detail: patch, bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist-client/modeller/figure-recipe-catalog.d.ts

@@ -0,0 +1,38 @@
+import '@material/web/icon/icon.js';
+import '@operato/markdown';
+import { LitElement } from 'lit';
+import { type RecipeTemplate } from './recipes.js';
+declare const FigureRecipeCatalog_base: (new (...args: any[]) => LitElement) & typeof LitElement;
+/**
+ * The recipe catalog (ADR-0095): the templates the product ships, by category, found by words, each told in full --
+ * what it puts in, how many parts, how they move, what each value does, and how to use it -- and put onto the chosen
+ * part in one step. The numbers and the ways of moving are worked out from the recipe (`describeFigureRecipe`), so they say
+ * what it does; only the descriptions and the guide are written.
+ */
+export declare class FigureRecipeCatalog extends FigureRecipeCatalog_base {
+    static styles: import("lit").CSSResult[];
+    templates: RecipeTemplate[];
+    /** The part it would be put onto. */
+    selected: string;
+    locked: boolean;
+    /** Why the last one put in was refused, in the kernel's words. */
+    error: string;
+    /** Reads a template's guide; absent, no guide is shown. */
+    guideOf?: (name: string) => Promise<string>;
+    /** Where a template's thumbnail is read from; absent, cards show no picture. */
+    thumbnailOf?: (name: string) => string;
+    private category;
+    private query;
+    private chosen;
+    private values;
+    private guide;
+    private set guideText(value);
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private choose;
+    protected willUpdate(): void;
+    private renderDetail;
+    /** Each value: its name, what it does, and the field to set it -- a share typed as a percentage. */
+    private renderForm;
+}
+export {};