@things-factory/figure-ui 10.1.3 → 10.1.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"figure-thumbnail.js","sourceRoot":"","sources":["../../client/modeller/figure-thumbnail.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA;AAI3B;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,kBAAkB;AAClB,MAAM,KAAK,GAAG,GAAG,CAAA;AACjB,MAAM,MAAM,GAAG,GAAG,CAAA;AASlB,8DAA8D;AAC9D,SAAS,MAAM;IACb,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAC3B,qBAAqB,CAAC,GAAG,EAAE,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,CACnF,CAAA;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB,CACpC,KAA6B,EAC7B,KAAkB;IAElB,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;QAC5B,OAAO,SAAS,CAAA;IAClB,CAAC;IAED;;;MAGE;IACF,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAC1C,IAAI,CAAC,YAAY,CAAC,wBAAwB,EAAE,EAAE,CAAC,CAAA;IAC/C,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,mDAAmD,KAAK,eAAe,MAAM,2BAA2B,CAAA;IAC7H,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;IAE/B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAY,CAAA;IAClE,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAA;IACvB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;IACrB,OAAO,CAAC,KAAK,GAAG,KAAK,CAAA;IACrB,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,4CAA4C,CAAA;IAEpE,IAAI,CAAC;QACH,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QACzB,MAAM,MAAM,EAAE,CAAA;QAEd,OAAO,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,OAAO,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC7E,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CAAC,2BAA4B,CAAW,CAAC,OAAO,EAAE,CAAC,CAAA;QAC/D,OAAO,SAAS,CAAA;IAClB,CAAC;YAAS,CAAC;QACT,IAAI,CAAC,MAAM,EAAE,CAAA;IACf,CAAC;AACH,CAAC","sourcesContent":["import './figure-canvas.js'\n\nimport type { BoardModel, PartModel } from './figure-source.js'\n\n/**\n * 카드에 쓸 그림을 찍는다 — **숨은 자리에 저작 캔버스를 하나 더 세워서.**\n *\n * ## 왜 보이는 캔버스를 찍지 않나\n *\n * 저작면의 캔버스는 저작자가 돌려 둔 각도와 확대로 서 있고, 칸의 비율도 창 크기와 접힌 패널에 따라\n * 다르다. 그것을 찍으면 카드마다 프레임이 달라지고, 방금 확대해 보던 나사 하나가 그 자산의 얼굴이\n * 된다. 목록은 견주는 자리이므로 그림은 **정해진 크기와 정해진 카메라**로 찍는다.\n *\n * ## 왜 씬을 여기서 세우지 않고 부품을 세우나\n *\n * 씬 값(환경 · 하늘 · 조명 · 픽셀 비율 · 좌표 바탕)은 `figure-canvas` 가 든다. 여기서 다시 적으면\n * 두 벌이 되고, 그러면 **카드에 보이는 그림과 저작면에서 보던 것이 아무 오류 없이 갈린다.** 그래서\n * 같은 부품을 `viewOnly` 로 하나 더 세워 그 부품이 자기 씬을 세우게 하고, 찍은 뒤 버린다.\n *\n * ## 왜 서버가 아니라 브라우저인가\n *\n * 보드는 저장할 때 서버가 찍는데, 백엔드에 GPU 가 없는 배포가 많아 헤드리스로 3D 를 찍는 것이 자주\n * 실패한다. 도형을 그릴 GPU 는 이미 보는 사람 손에 있다.\n */\n\n/** 카드는 4:3 이다. */\nconst WIDTH = 480\nconst HEIGHT = 360\n\ninterface Shooter extends HTMLElement {\n  board?: BoardModel\n  parts?: PartModel[]\n  viewOnly?: boolean\n  snapshot?: (width?: number, height?: number) => Promise<string | undefined>\n}\n\n/** 프레임 두 장 뒤에 한 번 더 쉰다 — 씬이 서고 카메라가 자리를 잡을 틈. 씬에 그 신호가 없다. */\nfunction settle(): Promise<void> {\n  return new Promise(resolve =>\n    requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(resolve, 150)))\n  )\n}\n\nexport async function captureThumbnail(\n  board: BoardModel | undefined,\n  parts: PartModel[]\n): Promise<string | undefined> {\n  if (!board || !parts.length) {\n    return undefined\n  }\n\n  /*\n    화면 밖에 둔다. `display: none` 이면 캔버스가 크기를 못 얻어 아무것도 그리지 못한다.\n    WebGL context 는 브라우저가 8~16개에서 끊으므로 찍은 뒤 반드시 버린다(아래 finally).\n  */\n  const host = document.createElement('div')\n  host.setAttribute('figure-thumbnail-stage', '')\n  host.style.cssText = `position: fixed; left: -10000px; top: 0; width: ${WIDTH}px; height: ${HEIGHT}px; pointer-events: none;`\n  document.body.appendChild(host)\n\n  const shooter = document.createElement('figure-canvas') as Shooter\n  shooter.viewOnly = true\n  shooter.board = board\n  shooter.parts = parts\n  shooter.style.cssText = 'display: block; width: 100%; height: 100%;'\n\n  try {\n    host.appendChild(shooter)\n    await settle()\n\n    return shooter.snapshot ? await shooter.snapshot(WIDTH, HEIGHT) : undefined\n  } catch (e) {\n    console.warn(`[thumbnail] 세우지 못했습니다 — ${(e as Error).message}`)\n    return undefined\n  } finally {\n    host.remove()\n  }\n}\n"]}

package/dist-client/pages/figure-list-page.d.ts

@@ -1,38 +1,66 @@
+import '@operato/data-grist';
 import '@material/web/icon/icon.js';
-import '../viewparts/figure-card.js';
+import type { FetchOption } from '@operato/data-grist';
 import { PageView } from '@operato/shell';
-declare const FigureListPageBase: typeof PageView;
+import type { Figure } from '../types.js';
+declare const FigureListPageBase: (new (...args: any[]) => {
+    __preferenceProviders: {
+        [element: string]: import("@operato/p13n").PagePreferenceProvider;
+    };
+    getPagePreferenceProvider(element: string): import("@operato/p13n").PagePreferenceProvider | undefined;
+}) & (new (...args: any[]) => import("lit").LitElement) & typeof PageView;
 /**
- * Figure 목록.
+ * Figure 카탈로그.
+ *
+ * 이 화면은 저작면으로 가는 문이다. 여기서 오래 머물 화면이 아니므로 꾸미지 않는다. 카드에는
+ * **고를 때 쓰는 것만** 싣는다 — 그림과 이름, 그리고 아직 초안이라는 것. 배치 한도·성숙도·삼각형
+ * 수는 고른 뒤에 따지는 값이라 표 모드의 칸으로 남기고 저작면에서 본다.
+ *
+ * ## 왜 손으로 만든 카드가 아니라 격자인가
+ *
+ * 전에는 카드 격자와 걸러 보기 줄과 빈 화면을 이 파일이 직접 그렸다(200줄). 그 자리에서 빠져
+ * 있던 것들은 하나같이 `ox-grist` 가 이미 가진 것이다 — 쪽 나누기, 정렬, 컬럼 걸러 보기,
+ * 개인 설정(모드·정렬·쪽 크기를 사람마다 기억한다), 표 모드로 바꿔 보기, 내보내기.
+ * 손으로 만든 카드는 그 중 아무것도 없었고, 목록이 늘어나면 전부 한 번에 그렸다.
  *
- * 이 화면은 저작면으로 가는 문이다. 여기서 오래 머물 화면이 아니므로 꾸미지 않는다.
- * 대신 **저작자가 목록에서 판단할 수 있어야 하는 것**은 카드에 실는다 — 무게(삼각형
- * 수)와 재활용 점수다. 그것을 저작면에 들어가서야 알면 늦다.
+ * 카드에 실을 것은 `list` 가 정하고, 무엇을 어떻게 그릴지는 컬럼의 renderer 가 정한다. 같은
+ * 설정이 표 모드에서도 그대로 쓰이므로 **두 모드가 다른 말을 하지 않는다.**
  */
 export declare class FigureListPage extends FigureListPageBase {
     static styles: import("lit").CSSResult[];
-    private figures;
-    private total;
-    private search;
-    private stateFilter;
-    private loaded;
+    gristConfig: any;
+    private grist;
+    private listen?;
     get context(): {
         title: string;
+        search: {
+            handler: (search: string) => void;
+            value: string;
+            placeholder: string;
+        };
+        filter: {
+            handler: () => void;
+        };
         actions: {
             title: string;
             action: () => void;
         }[];
     };
     render(): import("lit-html").TemplateResult<1>;
+    pageInitialized(): Promise<void>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    pageUpdated(): Promise<void>;
     /**
-     * 빈 화면.
+     * 걸러 보기·정렬·쪽을 **격자가 만든 그대로** 서버에 넘긴다.
      *
-     * 걸러 보기 때문에 비었는지, 아직 만든 것이 없어서 비었는지를 **가른다.** 같은
-     * 문구를 쓰면 사용자가 검색어를 지워 볼 생각을 못 한다.
+     * 여기서 이름을 바꿔 담으면 격자가 아는 조건과 서버에 가는 조건이 어긋난다. 실패는 격자가
+     * 받아 화면에 낸다 — 목록이 비어 있는 것과 못 불러온 것은 다른 사실이다.
      */
-    private renderEmpty;
-    pageUpdated(changes: Record<string, unknown>, lifecycle: Record<string, unknown>): Promise<void>;
-    private reload;
+    fetchHandler({ page, limit, sortings, filters }: FetchOption): Promise<{
+        total: number;
+        records: Figure[];
+    }>;
     private openModeller;
     /** `remove` 는 HTMLElement 의 메서드다 — 가리면 조용한 결함이 된다. */
     private removeFigure;