@operato/board 10.17.0 → 10.20.0

package/dist/src/board-provider.js

@@ -1,5 +1,6 @@
 import gql from 'graphql-tag';
-import { create, error, ReferenceMap } from '@hatiolab/things-scene';
+import { error, ReferenceMap } from '@hatiolab/things-scene';
+import { createResolvedScene } from './resolved-scene.js';
 import { BoardDataStorage } from './data-storage/data-storage.js';
 import { BoardModelCache } from './data-storage/board-model-cache.js';
 import { client, gqlContext, subscribe } from '@operato/graphql';
@@ -41,7 +42,12 @@ export function createBoardProvider() {
                 scene = await provider.get(boardId);
             }
             catch (e) {
-                scene = create({
+                /*
+                  No staleness check here: what this scene is for is the boardId, and the ReferenceMap
+                  owns that key — a second request for the same board waits on this one instead of
+                  starting another.
+                */
+                scene = (await createResolvedScene({
                     model,
                     mode: 0,
                     refProvider: provider,
@@ -72,7 +78,7 @@ export function createBoardProvider() {
                         },
                         dispose() { }
                     }
-                });
+                }));
                 // s.app.baseUrl = undefined;
             }
             resolve(scene);

package/dist/src/board-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"board-provider.js","sourceRoot":"","sources":["../../src/board-provider.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,EAAS,MAAM,wBAAwB,CAAA;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gCAAgC,CAAA;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AACrE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEhE,MAAM,UAAU,mBAAmB;IACjC,MAAM,SAAS,GAAG,IAAI,YAAY,CAChC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAgB,EAAE;;QAC/C,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE,CAAA;QACnC,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YAEjD,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;gBAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;WAOT;gBACD,SAAS,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,SAAS,EAAE;gBAC9D,OAAO,EAAE,UAAU,EAAE;aACtB,CAAC,CAAA;YAEF,MAAM,KAAK,GAAG,MAAA,QAAQ,CAAC,IAAI,0CAAE,KAAK,CAAA;YAElC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,MAAM,CAAC,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC,CAAA;gBACvD,OAAM;YACR,CAAC;YAED,IAAI,KAAU,CAAA;YACd,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,IAAI,MAAM,EAAE,CAAC;gBACnC,QAAQ;gBACR,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;YACtB,CAAC;iBAAM,CAAC;gBACN,OAAO;gBACP,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;gBAC/B,MAAM,eAAe,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;YACtE,CAAC;YAED,IAAI,KAAY,CAAA;YAEhB,IAAI,CAAC;gBACH,KAAK,GAAG,MAAM,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;YACrC,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,KAAK,GAAG,MAAM,CAAC;oBACb,KAAK;oBACL,IAAI,EAAE,CAAC;oBACP,WAAW,EAAE,QAAe;oBAC5B,WAAW,EAAE,IAAI,gBAAgB,CAAC,OAAO,CAAC;oBAC1C,OAAO,EAAE,EAAE,SAAS,EAAE;oBACtB,wBAAwB,EAAE;wBACxB,SAAS,EAAE,KAAK,EAAE,GAAW,EAAE,SAAc,EAAE,EAAE;4BAC/C,OAAO,MAAM,SAAS,CACpB;gCACE,KAAK,EAAE,GAAG,CAAA;;6CAEe,GAAG;;;;;;6BAMnB;6BACV,EACD;gCACE,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAO,EAAE,EAAE;;oCAC5B,IAAI,IAAI,EAAE,CAAC;wCACT,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAExB;wCAAA,MAAA,MAAA,MAAC,SAAiB,CAAC,GAAG,0CAAE,UAAU,0CAAE,MAAM,mDAAG,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,CAAC,CAAA;wCACtE,SAAS,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAA;oCAC/B,CAAC;gCACH,CAAC;6BACF,CACF,CAAA;wBACH,CAAC;wBAED,OAAO,KAAI,CAAC;qBACb;iBACK,CAAC,CAAA;gBAET,6BAA6B;YAC/B,CAAC;YAED,OAAO,CAAC,KAAK,CAAC,CAAA;QAChB,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,KAAK,CAAC,CAAC,CAAC,CAAA;YACR,MAAM,CAAC,CAAC,CAAC,CAAA;QACX,CAAC;IACH,CAAC,EACD,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE;QAChB,GAAG,CAAC,OAAO,EAAE,CAAA;IACf,CAAC,CACF,CAAA;IAED,OAAO,SAAS,CAAA;AAClB,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,mBAAmB,EAAE,CAAA","sourcesContent":["import gql from 'graphql-tag'\n\nimport { create, error, ReferenceMap, Scene } from '@hatiolab/things-scene'\nimport { BoardDataStorage } from './data-storage/data-storage.js'\nimport { BoardModelCache } from './data-storage/board-model-cache.js'\nimport { client, gqlContext, subscribe } from '@operato/graphql'\n\nexport function createBoardProvider() {\n  const _provider = new ReferenceMap(\n    async (boardId, resolve, reject): Promise<any> => {\n      const startTime = performance.now()\n      try {\n        const cached = await BoardModelCache.get(boardId)\n\n        const response = await client.query({\n          query: gql`\n            query FetchBoardById($id: String!, $cachedUpdatedAt: String) {\n              board(id: $id, cachedUpdatedAt: $cachedUpdatedAt) {\n                model\n                updatedAt\n              }\n            }\n          `,\n          variables: { id: boardId, cachedUpdatedAt: cached?.updatedAt },\n          context: gqlContext()\n        })\n\n        const board = response.data?.board\n\n        if (!board) {\n          reject(new Error('Failed to get the requested board.'))\n          return\n        }\n\n        let model: any\n        if (board.model === null && cached) {\n          // 캐시 유효\n          model = cached.model\n        } else {\n          // 새 모델\n          model = JSON.parse(board.model)\n          await BoardModelCache.put(boardId, '', board.model, board.updatedAt)\n        }\n\n        let scene: Scene\n\n        try {\n          scene = await provider.get(boardId)\n        } catch (e) {\n          scene = create({\n            model,\n            mode: 0,\n            refProvider: provider as any,\n            dataStorage: new BoardDataStorage(boardId),\n            loading: { startTime },\n            dataSubscriptionProvider: {\n              subscribe: async (tag: string, component: any) => {\n                return await subscribe(\n                  {\n                    query: gql`\n                              subscription {\n                                data(tag: \"${tag}\") {\n                                  tag\n                                  data\n                                  ts\n                                }\n                              }\n                            `\n                  },\n                  {\n                    next: async ({ data }: any) => {\n                      if (data) {\n                        const payload = data.data\n                        // 전달 지연 기록 (scene/app 레벨 트래커) — ts 는 component.data 에 넣지 않음.\n                        ;(component as any).app?.lagTracker?.record?.(payload.tag, payload.ts)\n                        component.data = payload.data\n                      }\n                    }\n                  }\n                )\n              },\n\n              dispose() {}\n            }\n          } as any)\n\n          // s.app.baseUrl = undefined;\n        }\n\n        resolve(scene)\n      } catch (e) {\n        error(e)\n        reject(e)\n      }\n    },\n    async (id, ref) => {\n      ref.dispose()\n    }\n  )\n\n  return _provider\n}\n\nexport const provider = createBoardProvider()\n"]}
+{"version":3,"file":"board-provider.js","sourceRoot":"","sources":["../../src/board-provider.ts"],"names":[],"mappings":"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","sourcesContent":["import gql from 'graphql-tag'\n\nimport { error, ReferenceMap, Scene } from '@hatiolab/things-scene'\nimport { createResolvedScene } from './resolved-scene.js'\nimport { BoardDataStorage } from './data-storage/data-storage.js'\nimport { BoardModelCache } from './data-storage/board-model-cache.js'\nimport { client, gqlContext, subscribe } from '@operato/graphql'\n\nexport function createBoardProvider() {\n  const _provider = new ReferenceMap(\n    async (boardId, resolve, reject): Promise<any> => {\n      const startTime = performance.now()\n      try {\n        const cached = await BoardModelCache.get(boardId)\n\n        const response = await client.query({\n          query: gql`\n            query FetchBoardById($id: String!, $cachedUpdatedAt: String) {\n              board(id: $id, cachedUpdatedAt: $cachedUpdatedAt) {\n                model\n                updatedAt\n              }\n            }\n          `,\n          variables: { id: boardId, cachedUpdatedAt: cached?.updatedAt },\n          context: gqlContext()\n        })\n\n        const board = response.data?.board\n\n        if (!board) {\n          reject(new Error('Failed to get the requested board.'))\n          return\n        }\n\n        let model: any\n        if (board.model === null && cached) {\n          // 캐시 유효\n          model = cached.model\n        } else {\n          // 새 모델\n          model = JSON.parse(board.model)\n          await BoardModelCache.put(boardId, '', board.model, board.updatedAt)\n        }\n\n        let scene: Scene\n\n        try {\n          scene = await provider.get(boardId)\n        } catch (e) {\n          /*\n            No staleness check here: what this scene is for is the boardId, and the ReferenceMap\n            owns that key — a second request for the same board waits on this one instead of\n            starting another.\n          */\n          scene = (await createResolvedScene({\n            model,\n            mode: 0,\n            refProvider: provider as any,\n            dataStorage: new BoardDataStorage(boardId),\n            loading: { startTime },\n            dataSubscriptionProvider: {\n              subscribe: async (tag: string, component: any) => {\n                return await subscribe(\n                  {\n                    query: gql`\n                              subscription {\n                                data(tag: \"${tag}\") {\n                                  tag\n                                  data\n                                  ts\n                                }\n                              }\n                            `\n                  },\n                  {\n                    next: async ({ data }: any) => {\n                      if (data) {\n                        const payload = data.data\n                        // 전달 지연 기록 (scene/app 레벨 트래커) — ts 는 component.data 에 넣지 않음.\n                        ;(component as any).app?.lagTracker?.record?.(payload.tag, payload.ts)\n                        component.data = payload.data\n                      }\n                    }\n                  }\n                )\n              },\n\n              dispose() {}\n            }\n          } as any))!\n\n          // s.app.baseUrl = undefined;\n        }\n\n        resolve(scene)\n      } catch (e) {\n        error(e)\n        reject(e)\n      }\n    },\n    async (id, ref) => {\n      ref.dispose()\n    }\n  )\n\n  return _provider\n}\n\nexport const provider = createBoardProvider()\n"]}

package/dist/src/figure-provider.d.ts

@@ -0,0 +1,15 @@
+/** Asks for one type's blueprint. Null when no released figure carries that name. */
+export type BlueprintFetch = (type: string) => Promise<any | null>;
+export declare const fetchFigureBlueprint: BlueprintFetch;
+/**
+ * Builds the resolver that fills things-scene's seat.
+ *
+ * `fetch` is a seam for tests — the default one talks to the server.
+ */
+export declare function createFigureResolver(fetch?: BlueprintFetch): (types: readonly string[]) => Promise<void>;
+/**
+ * Takes the seat. The package entry (`index.ts`) calls this, so an app that has `@operato/board`
+ * gets published figures on its boards without registering anything itself. Returns the function
+ * that takes the seat back.
+ */
+export declare function installFigureResolver(fetch?: BlueprintFetch): () => void;

package/dist/src/figure-provider.js

@@ -0,0 +1,98 @@
+/*
+ * Copyright © HatioLab Inc. All rights reserved.
+ */
+import gql from 'graphql-tag';
+import { Component, registerFigure, registerTypeResolver } from '@hatiolab/things-scene';
+import { client, gqlContext } from '@operato/graphql';
+/*
+ * Where a board gets the figures somebody authored.
+ *
+ * ── Why the seat is filled here ─────────────────────────────────────────────
+ * things-scene keeps the seat (`registerTypeResolver`) and knows nothing about figures, GraphQL or
+ * who published what. The board package is where a saved model already gets its values from the
+ * server — `board-provider.ts` reads a board by id the same way — so this is where the types a
+ * model names, and nobody has registered, get fetched. Putting it in the authoring package would
+ * make every consumer drag the modeller along, and putting it in each app would make every app
+ * build the same thing (ADR-0063 결정 2 · ADR-0045).
+ *
+ * ── What it asks for, and what it does not ──────────────────────────────────
+ * Uppercase names are the figure namespace, so those are the only ones asked about: a model that
+ * names `rect` or a mistyped `Conveyor` never reaches the server. A type that is already
+ * registered is left alone — a figure never replaces a component that is already drawing.
+ *
+ * ── An answer of "nobody published this" is not a failure ───────────────────
+ * `figureBlueprint` returns null for a type that has no released figure, and that type stays
+ * unregistered on purpose: the scene draws it as a stand-in and saves it back untouched
+ * (ADR-0063 결정 1). Being unable to ask at all is a different fact, so a transport or server
+ * error rejects — `resolveUnknownTypes` reports those in `failed` and the board still opens.
+ */
+/** The figure namespace: `EQ_MIXER`, `CONVEYOR`, `VEH_AGV_01`. */
+const FIGURE_TYPE = /^[A-Z][A-Z0-9]*(_[A-Z0-9]+)*$/;
+const FETCH_FIGURE_BLUEPRINT = gql `
+  query FetchFigureBlueprint($type: String!) {
+    figureBlueprint(type: $type)
+  }
+`;
+export const fetchFigureBlueprint = async (type) => {
+    var _a, _b;
+    const response = await client.query({
+        query: FETCH_FIGURE_BLUEPRINT,
+        variables: { type },
+        context: gqlContext()
+    });
+    /*
+      The client runs with errorPolicy 'all', so a rejected query comes back as a resolved response
+      carrying `errors` and a null field. Without this the caller cannot tell "no such figure" from
+      "the door said no".
+    */
+    const errors = response.errors;
+    if (errors === null || errors === void 0 ? void 0 : errors.length) {
+        throw new Error(errors.map(e => { var _a; return (_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : String(e); }).join('\n'));
+    }
+    return (_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.figureBlueprint) !== null && _b !== void 0 ? _b : null;
+};
+/**
+ * Builds the resolver that fills things-scene's seat.
+ *
+ * `fetch` is a seam for tests — the default one talks to the server.
+ */
+export function createFigureResolver(fetch = fetchFigureBlueprint) {
+    return async function resolveFigureTypes(types) {
+        const asking = types.filter(type => FIGURE_TYPE.test(type) && !Component.register(type));
+        if (asking.length === 0) {
+            return;
+        }
+        const failures = [];
+        await Promise.all(asking.map(async (type) => {
+            try {
+                const blueprint = await fetch(type);
+                if (!blueprint) {
+                    /* Nobody published this type. It stays a stand-in. */
+                    return;
+                }
+                registerFigure(blueprint);
+            }
+            catch (error) {
+                failures.push({ type, error });
+            }
+        }));
+        if (failures.length > 0) {
+            /*
+              What did register stays registered — the seat reads the registry back, not what this says.
+              The throw is how "could not ask" reaches `TypeResolution.failed`.
+            */
+            throw new Error(`Figure 청사진을 가져오지 못했다:\n${failures
+                .map(({ type, error }) => `  - ${type}: ${error instanceof Error ? error.message : String(error)}`)
+                .join('\n')}`);
+        }
+    };
+}
+/**
+ * Takes the seat. The package entry (`index.ts`) calls this, so an app that has `@operato/board`
+ * gets published figures on its boards without registering anything itself. Returns the function
+ * that takes the seat back.
+ */
+export function installFigureResolver(fetch = fetchFigureBlueprint) {
+    return registerTypeResolver(createFigureResolver(fetch));
+}
+//# sourceMappingURL=figure-provider.js.map

package/dist/src/figure-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure-provider.js","sourceRoot":"","sources":["../../src/figure-provider.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n * Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport gql from 'graphql-tag'\n\nimport { Component, registerFigure, registerTypeResolver } from '@hatiolab/things-scene'\nimport { client, gqlContext } from '@operato/graphql'\n\n/*\n * Where a board gets the figures somebody authored.\n *\n * ── Why the seat is filled here ─────────────────────────────────────────────\n * things-scene keeps the seat (`registerTypeResolver`) and knows nothing about figures, GraphQL or\n * who published what. The board package is where a saved model already gets its values from the\n * server — `board-provider.ts` reads a board by id the same way — so this is where the types a\n * model names, and nobody has registered, get fetched. Putting it in the authoring package would\n * make every consumer drag the modeller along, and putting it in each app would make every app\n * build the same thing (ADR-0063 결정 2 · ADR-0045).\n *\n * ── What it asks for, and what it does not ──────────────────────────────────\n * Uppercase names are the figure namespace, so those are the only ones asked about: a model that\n * names `rect` or a mistyped `Conveyor` never reaches the server. A type that is already\n * registered is left alone — a figure never replaces a component that is already drawing.\n *\n * ── An answer of \"nobody published this\" is not a failure ───────────────────\n * `figureBlueprint` returns null for a type that has no released figure, and that type stays\n * unregistered on purpose: the scene draws it as a stand-in and saves it back untouched\n * (ADR-0063 결정 1). Being unable to ask at all is a different fact, so a transport or server\n * error rejects — `resolveUnknownTypes` reports those in `failed` and the board still opens.\n */\n\n/** The figure namespace: `EQ_MIXER`, `CONVEYOR`, `VEH_AGV_01`. */\nconst FIGURE_TYPE = /^[A-Z][A-Z0-9]*(_[A-Z0-9]+)*$/\n\n/** Asks for one type's blueprint. Null when no released figure carries that name. */\nexport type BlueprintFetch = (type: string) => Promise<any | null>\n\nconst FETCH_FIGURE_BLUEPRINT = gql`\n  query FetchFigureBlueprint($type: String!) {\n    figureBlueprint(type: $type)\n  }\n`\n\nexport const fetchFigureBlueprint: BlueprintFetch = async (type: string) => {\n  const response = await client.query({\n    query: FETCH_FIGURE_BLUEPRINT,\n    variables: { type },\n    context: gqlContext()\n  })\n\n  /*\n    The client runs with errorPolicy 'all', so a rejected query comes back as a resolved response\n    carrying `errors` and a null field. Without this the caller cannot tell \"no such figure\" from\n    \"the door said no\".\n  */\n  const errors = (response as { errors?: readonly { message?: string }[] }).errors\n  if (errors?.length) {\n    throw new Error(errors.map(e => e?.message ?? String(e)).join('\\n'))\n  }\n\n  return response.data?.figureBlueprint ?? null\n}\n\n/**\n * Builds the resolver that fills things-scene's seat.\n *\n * `fetch` is a seam for tests — the default one talks to the server.\n */\nexport function createFigureResolver(fetch: BlueprintFetch = fetchFigureBlueprint) {\n  return async function resolveFigureTypes(types: readonly string[]): Promise<void> {\n    const asking = types.filter(type => FIGURE_TYPE.test(type) && !Component.register(type))\n    if (asking.length === 0) {\n      return\n    }\n\n    const failures: { type: string; error: unknown }[] = []\n\n    await Promise.all(\n      asking.map(async type => {\n        try {\n          const blueprint = await fetch(type)\n          if (!blueprint) {\n            /* Nobody published this type. It stays a stand-in. */\n            return\n          }\n\n          registerFigure(blueprint)\n        } catch (error) {\n          failures.push({ type, error })\n        }\n      })\n    )\n\n    if (failures.length > 0) {\n      /*\n        What did register stays registered — the seat reads the registry back, not what this says.\n        The throw is how \"could not ask\" reaches `TypeResolution.failed`.\n      */\n      throw new Error(\n        `Figure 청사진을 가져오지 못했다:\\n${failures\n          .map(({ type, error }) => `  - ${type}: ${error instanceof Error ? error.message : String(error)}`)\n          .join('\\n')}`\n      )\n    }\n  }\n}\n\n/**\n * Takes the seat. The package entry (`index.ts`) calls this, so an app that has `@operato/board`\n * gets published figures on its boards without registering anything itself. Returns the function\n * that takes the seat back.\n */\nexport function installFigureResolver(fetch: BlueprintFetch = fetchFigureBlueprint): () => void {\n  return registerTypeResolver(createFigureResolver(fetch))\n}\n"]}

package/dist/src/index.d.ts

@@ -4,6 +4,8 @@ export { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.j
 export { BoardModelCache } from './data-storage/board-model-cache.js';
 export type { CachedBoard } from './data-storage/board-model-cache.js';
 export * from './board-provider.js';
+export * from './resolved-scene.js';
+export * from './figure-provider.js';
 export * from './board-placement-palette.js';
 export * from './ox-board-viewer.js';
 export * from './ox-board-preview.js';
@@ -11,3 +13,4 @@ export * from './ox-board-player.js';
 export * from './ox-board-modeller.js';
 export * from './ox-board-list.js';
 export * from './ox-board-template-viewer.js';
+export declare const uninstallFigureResolver: () => void;

package/dist/src/index.js

@@ -4,6 +4,10 @@ export { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.j
 export { BoardModelCache } from './data-storage/board-model-cache.js';
 /* Loading a saved board by id, and keeping its data bindings live. */
 export * from './board-provider.js';
+/* The one way to turn a model into a scene — it resolves the types the model names first. */
+export * from './resolved-scene.js';
+/* Published figures a board model names — the package takes things-scene's resolver seat on load. */
+export * from './figure-provider.js';
 /* The modeller tray asks a host app what it has to place; this is where the host registers. */
 export * from './board-placement-palette.js';
 export * from './ox-board-viewer.js';
@@ -12,4 +16,10 @@ export * from './ox-board-player.js';
 export * from './ox-board-modeller.js';
 export * from './ox-board-list.js';
 export * from './ox-board-template-viewer.js';
+import { installFigureResolver } from './figure-provider.js';
+/*
+  Having this package IS the declaration that figure types resolve. An app that must not reach the
+  figure door takes the seat back with the returned function (ADR-0063 결정 2 — 앱이 채우지 않는다).
+*/
+export const uninstallFigureResolver = installFigureResolver();
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAC9E,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAGrE,sEAAsE;AACtE,cAAc,qBAAqB,CAAA;AACnC,+FAA+F;AAC/F,cAAc,8BAA8B,CAAA;AAE5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA","sourcesContent":["export * from './types.js'\n\nexport { registerDefaultGroups } from './component/register-default-groups.js'\nexport { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.js'\nexport { BoardModelCache } from './data-storage/board-model-cache.js'\nexport type { CachedBoard } from './data-storage/board-model-cache.js'\n\n/* Loading a saved board by id, and keeping its data bindings live. */\nexport * from './board-provider.js'\n/* The modeller tray asks a host app what it has to place; this is where the host registers. */\nexport * from './board-placement-palette.js'\n\nexport * from './ox-board-viewer.js'\nexport * from './ox-board-preview.js'\nexport * from './ox-board-player.js'\nexport * from './ox-board-modeller.js'\nexport * from './ox-board-list.js'\nexport * from './ox-board-template-viewer.js'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAA;AAC9E,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAClF,OAAO,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAGrE,sEAAsE;AACtE,cAAc,qBAAqB,CAAA;AACnC,6FAA6F;AAC7F,cAAc,qBAAqB,CAAA;AACnC,qGAAqG;AACrG,cAAc,sBAAsB,CAAA;AACpC,+FAA+F;AAC/F,cAAc,8BAA8B,CAAA;AAE5C,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,wBAAwB,CAAA;AACtC,cAAc,oBAAoB,CAAA;AAClC,cAAc,+BAA+B,CAAA;AAE7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAA;AAE5D;;;EAGE;AACF,MAAM,CAAC,MAAM,uBAAuB,GAAG,qBAAqB,EAAE,CAAA","sourcesContent":["export * from './types.js'\n\nexport { registerDefaultGroups } from './component/register-default-groups.js'\nexport { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.js'\nexport { BoardModelCache } from './data-storage/board-model-cache.js'\nexport type { CachedBoard } from './data-storage/board-model-cache.js'\n\n/* Loading a saved board by id, and keeping its data bindings live. */\nexport * from './board-provider.js'\n/* The one way to turn a model into a scene — it resolves the types the model names first. */\nexport * from './resolved-scene.js'\n/* Published figures a board model names — the package takes things-scene's resolver seat on load. */\nexport * from './figure-provider.js'\n/* The modeller tray asks a host app what it has to place; this is where the host registers. */\nexport * from './board-placement-palette.js'\n\nexport * from './ox-board-viewer.js'\nexport * from './ox-board-preview.js'\nexport * from './ox-board-player.js'\nexport * from './ox-board-modeller.js'\nexport * from './ox-board-list.js'\nexport * from './ox-board-template-viewer.js'\n\nimport { installFigureResolver } from './figure-provider.js'\n\n/*\n  Having this package IS the declaration that figure types resolve. An app that must not reach the\n  figure door takes the seat back with the returned function (ADR-0063 결정 2 — 앱이 채우지 않는다).\n*/\nexport const uninstallFigureResolver = installFigureResolver()\n"]}

package/dist/src/modeller/scene-viewer/ox-scene-viewer.d.ts

@@ -30,7 +30,7 @@ export default class OxSceneViewer extends LitElement {
     _setSelected(selected: Component[]): void;
     _disposeScene(): void;
     resize(force: boolean): void;
-    _onModelChanged(model?: Model): void;
+    _onModelChanged(model?: Model): Promise<void>;
     _onDisplayChanged(screenSize: string | number): void;
     _onModeChanged(mode: SceneMode): void;
     _onDataChanged(data: any): void;

package/dist/src/modeller/scene-viewer/ox-scene-viewer.js

@@ -4,7 +4,8 @@ import './ox-scene-layer.js';
 import './ox-scene-handler.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { create as createScene, SCENE_MODE } from '@hatiolab/things-scene';
+import { SCENE_MODE } from '@hatiolab/things-scene';
+import { createResolvedScene } from '../../resolved-scene.js';
 let OxSceneViewer = class OxSceneViewer extends LitElement {
     constructor() {
         super(...arguments);
@@ -106,7 +107,7 @@ let OxSceneViewer = class OxSceneViewer extends LitElement {
             this.lastOffsetWidth = this.offsetWidth;
         }
     }
-    _onModelChanged(model) {
+    async _onModelChanged(model) {
         this._disposeScene();
         if (!model) {
             return;
@@ -114,7 +115,8 @@ let OxSceneViewer = class OxSceneViewer extends LitElement {
         const layers = Array.from(this.querySelectorAll('ox-scene-layer')).map(layer => layer.getModel());
         const handlers = Array.from(this.querySelectorAll('ox-scene-handler')).map(handler => handler.getAttribute('type'));
         // tracker: 외부에서 전달받았으면 재사용, 없으면 자동 생성
-        this._setScene(createScene({
+        /* Resolving the model's types is a wait; the modeller can be handed another model meanwhile. */
+        const scene = await createResolvedScene({
             target: this,
             model: JSON.parse(JSON.stringify(model)),
             layers,
@@ -122,7 +124,11 @@ let OxSceneViewer = class OxSceneViewer extends LitElement {
             mode: this.mode,
             refProvider: this.provider,
             loading: this.loadTracker ? { tracker: this.loadTracker } : undefined
-        }));
+        }, () => this.model === model && this.isConnected);
+        if (!scene) {
+            return;
+        }
+        this._setScene(scene);
         if (this.provider) {
             this.provider.add(this.name, this.scene);
         }

package/dist/src/modeller/scene-viewer/ox-scene-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-scene-viewer.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/ox-scene-viewer.ts"],"names":[],"mappings":";AAAA,OAAO,2BAA2B,CAAA;AAClC,OAAO,qBAAqB,CAAA;AAC5B,OAAO,uBAAuB,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAa,MAAM,IAAI,WAAW,EAAkE,UAAU,EAAa,MAAM,wBAAwB,CAAA;AAKjJ,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAOb,UAAK,GAAiB,IAAI,CAAA;QAE1B,8EAA8E;QAClD,SAAI,GAAc,UAAU,CAAC,IAAI,CAAA;QACjC,eAAU,GAAW,IAAI,CAAA;QACrD,cAAS,GAAe,EAAE,CAAA;QAE1B;;;;;;;;;WASG;QACyB,QAAG,GAAY,MAAM,CAAA;QACjD,aAAQ,GAAgB,EAAE,CAAA;QACG,wBAAmB,GAAY,KAAK,CAAA;QACrC,YAAO,GAAW,EAAE,CAAA;QAGpB,SAAI,GAAW,QAAQ,CAAA;QACtB,oBAAe,GAAY,IAAI,CAAA;QAC/B,kBAAa,GAAY,KAAK,CAAA;IA6N7D,CAAC;IAzNC,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;YAC3C,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,iBAAiB,CAAA;IAC9B,CAAC;IAED,OAAO,CAAC,MAA4B;QAClC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvD,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACpD,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACnE,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACpD,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAC/D,CAAC;IAED,SAAS,CAAC,KAAmB;QAC3B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;SACzB,CAAC,CACH,CAAA;IACH,CAAC;IAED,QAAQ,CAAC,IAAe;QACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAChB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,cAAc,EAAE;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE;SACxB,CAAC,CACH,CAAA;IACH,CAAC;IAED,aAAa,CAAC,SAAqB;QACjC,IAAI,CAAC,SAAS,GAAG,SAAS,CAAA;QAC1B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,mBAAmB,EAAE;YACnC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;SAC7B,CAAC,CACH,CAAA;IACH,CAAC;IAED,YAAY,CAAC,QAAqB;QAChC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;QACxB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE;SAC5B,CAAC,CACH,CAAA;IACH,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAA;YACzD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAA;YAEtD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;YAC5C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAA;YACtB,CAAC;YAED,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;YACpB,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;QACvB,CAAC;IACH,CAAC;IAED,MAAM,CAAC,KAAc;QACnB,IAAI,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,EAAE,CAAC;YAClC,IAAI,KAAK,IAAI,IAAI,CAAC,GAAG,KAAK,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;gBAClG,qBAAqB,CAAC,GAAG,EAAE;oBACzB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;wBACf,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;wBACnB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;oBAC1B,CAAC;gBACH,CAAC,CAAC,CAAA;YACJ,CAAC;YAED,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,CAAA;QACzC,CAAC;IACH,CAAC;IAED,eAAe,CAAC,KAAa;QAC3B,IAAI,CAAC,aAAa,EAAE,CAAA;QAEpB,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAM;QACR,CAAC;QAED,MAAM,MAAM,GAAU,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAE,KAAsB,CAAC,QAAQ,EAAE,CAAC,CAAA;QAE1H,MAAM,QAAQ,GAAU,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAA;QAE1H,sCAAsC;QACtC,IAAI,CAAC,SAAS,CACZ,WAAW,CAAC;YACV,MAAM,EAAE,IAAI;YACZ,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACxC,MAAM;YACN,QAAQ;YACR,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,WAAW,EAAE,IAAI,CAAC,QAAQ;YAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS;SACtE,CAAC,CACH,CAAA;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;QAC1C,CAAC;QAED,IAAI,CAAC,KAAM,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,CAAA;QAEpC;;;WAGG;QACH,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QAEjB,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,SAAS,IAAK,IAAI,CAAC,KAAc,CAAC,SAAS,CAAC,CAAA;QAErE,IAAI,CAAC,KAAM,CAAC,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAA;QACzD,IAAI,CAAC,KAAM,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAA;QAEtD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;QACvC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAEpC,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED,iBAAiB,CAAC,UAA2B;QAC3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAM;QACR,CAAC;QAED,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAA;QACpD,CAAC;IACH,CAAC;IAED,cAAc,CAAC,IAAe;QAC5B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAM;QACR,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IAChC,CAAC;IAED,cAAc,CAAC,IAAS;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;YACzB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAA;IACxB,CAAC;IAED,kBAAkB,CAAC,KAAkB;QACnC;;;;;;;WAOG;QACH,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAA;QAC1B,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,mBAAmB,CAAC,KAAgB;QAClC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAM;QACR,CAAC;QAED,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;YACxB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;QAED,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,CAAC;gBACJ,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,CAAA;gBAC7B,MAAK;YACP,KAAK,CAAC;gBACJ,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;gBAC1B,MAAK;YACP,KAAK,CAAC;gBACJ,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,WAAW,CAAA;gBAC/B,MAAK;YACP,KAAK,CAAC;gBACJ,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;gBAC1B,MAAK;YACP,KAAK,CAAC;gBACJ,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,cAAc,CAAA;gBAClC,MAAK;QACT,CAAC;IACH,CAAC;IAED,iBAAiB,CAAC,KAAa;QAC7B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAM;QACR,CAAC;QAED,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,KAAK,CAAA;IAC5B,CAAC;;AA3PM,oBAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIZ;AAG2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAc;AAEb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAA0B;AAEzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAU;AAWT;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAsB;AAEpB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DAAqC;AACrC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAwB;AACtB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDAAgC;AAC/B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oDAA+B;AAhCxC,aAAa;IADjC,aAAa,CAAC,iBAAiB,CAAC;GACZ,aAAa,CA6PjC;eA7PoB,aAAa","sourcesContent":["import './confidential-overlay.js'\nimport './ox-scene-layer.js'\nimport './ox-scene-handler.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Component, create as createScene, FITMODE, LoadTracker, LoadingOverlay, Model, Properties, Scene, SCENE_MODE, SceneMode } from '@hatiolab/things-scene'\n\nimport OxSceneLayer from './ox-scene-layer.js'\n\n@customElement('ox-scene-viewer')\nexport default class OxSceneViewer extends LitElement {\n  static styles = css`\n    :host {\n      outline: none;\n    }\n  `\n\n  scene: Scene | null = null\n  @property({ type: Object }) model?: Model\n  /* Scene Mode - mode 0 : view mode, mode 1 : edit mode, mode 2 : shift mode */\n  @property({ type: Number }) mode: SceneMode = SCENE_MODE.VIEW\n  @property({ type: Number }) screenSize: number = 13.3\n  variables: Properties = {}\n  @property({ type: Object }) data: any\n  /*\n   * 캔바스에 모델을 어떻게 적절하게 보여줄 것인지를 설정한다.\n   *\n   * @none 가로, 세로 스케일을 1로 고정하고, {0, 0}좌표로 translate시킨다.\n   * @both 캔바스에 모델을 꼭 채우도록 가로, 세로 스케일을 조정하고, {0, 0}좌표로 translate시킨다.\n   * @width 캔바스의 폭에 모델의 폭을 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.\n   * @height 캔바스의 높이에 모델의 높이를 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.\n   * @center 가로, 세로 스케일을 1로 고정하고 모델이 화면의 중앙에 위치하도록 translate시킨다.\n   * @ratio 모델의 모든 부분이 캔바스에 최대 크기로 표현될 수 있도록 가로, 세로 동일한 스케일로 조정하고, {0, 0}좌표로 translate시킨다.\n   */\n  @property({ type: String }) fit: FITMODE = 'none'\n  selected: Component[] = []\n  @property({ type: Boolean }) disposeWhenDetached: boolean = false\n  @property({ type: String }) baseUrl: string = ''\n  @property({ type: Object }) provider: any\n  @property({ type: Object }) loadTracker?: LoadTracker\n  @property({ type: String }) name: string = 'noname'\n  @property({ type: Boolean }) enableInspector: boolean = true\n  @property({ type: Boolean }) showInspector: boolean = false\n\n  private lastOffsetWidth?: number\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    if (this.scene && this.disposeWhenDetached) {\n      this._disposeScene()\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `\n  }\n\n  updated(change: PropertyValues<this>) {\n    change.has('model') && this._onModelChanged(this.model)\n    change.has('mode') && this._onModeChanged(this.mode)\n    change.has('screenSize') && this._onDisplayChanged(this.screenSize)\n    change.has('data') && this._onDataChanged(this.data)\n    change.has('baseUrl') && this._onBaseUrlChanged(this.baseUrl)\n  }\n\n  _setScene(scene: Scene | null) {\n    this.scene = scene\n    this.dispatchEvent(\n      new CustomEvent('scene-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: scene }\n      })\n    )\n  }\n\n  _setMode(mode: SceneMode) {\n    this.mode = mode\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: mode }\n      })\n    )\n  }\n\n  _setVariables(variables: Properties) {\n    this.variables = variables\n    this.dispatchEvent(\n      new CustomEvent('variables-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: variables }\n      })\n    )\n  }\n\n  _setSelected(selected: Component[]) {\n    this.selected = selected\n    this.dispatchEvent(\n      new CustomEvent('selected-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: selected }\n      })\n    )\n  }\n\n  _disposeScene() {\n    if (this.scene) {\n      this.scene.off('selected', this._onSelectedChanged, this)\n      this.scene.off('mode', this._onSceneModeChanged, this)\n\n      if (this.provider) {\n        this.scene.release && this.scene.release()\n      } else {\n        this.scene.dispose()\n      }\n\n      this._setScene(null)\n      this._setSelected([])\n    }\n  }\n\n  resize(force: boolean) {\n    if (typeof this.scene == 'object') {\n      if (force || this.fit === 'both' || Math.abs(this.offsetWidth - (this.lastOffsetWidth || 0)) >= 1) {\n        requestAnimationFrame(() => {\n          if (this.scene) {\n            this.scene.resize()\n            this.scene.fit(this.fit)\n          }\n        })\n      }\n\n      this.lastOffsetWidth = this.offsetWidth\n    }\n  }\n\n  _onModelChanged(model?: Model) {\n    this._disposeScene()\n\n    if (!model) {\n      return\n    }\n\n    const layers: any[] = Array.from(this.querySelectorAll('ox-scene-layer')).map(layer => (layer as OxSceneLayer).getModel())\n\n    const handlers: any[] = Array.from(this.querySelectorAll('ox-scene-handler')).map(handler => handler.getAttribute('type'))\n\n    // tracker: 외부에서 전달받았으면 재사용, 없으면 자동 생성\n    this._setScene(\n      createScene({\n        target: this,\n        model: JSON.parse(JSON.stringify(model)),\n        layers,\n        handlers,\n        mode: this.mode,\n        refProvider: this.provider,\n        loading: this.loadTracker ? { tracker: this.loadTracker } : undefined\n      })\n    )\n\n    if (this.provider) {\n      this.provider.add(this.name, this.scene)\n    }\n\n    this.scene!.screen = this.screenSize\n\n    /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.\n     * 이 때는 정상적으로 그려주고,\n     * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.\n     */\n    this.resize(true)\n\n    this._setVariables(model.variables || (this.scene! as any).variables)\n\n    this.scene!.on('selected', this._onSelectedChanged, this)\n    this.scene!.on('mode', this._onSceneModeChanged, this)\n\n    this._onModeChanged(this.mode)\n    this._onDisplayChanged(this.screenSize)\n    this._onBaseUrlChanged(this.baseUrl)\n\n    this.focus()\n  }\n\n  _onDisplayChanged(screenSize: string | number) {\n    if (!this.scene) {\n      return\n    }\n\n    if (screenSize) {\n      this.scene.screen = parseFloat(String(screenSize))\n    }\n  }\n\n  _onModeChanged(mode: SceneMode) {\n    if (!this.scene) {\n      return\n    }\n    this.scene.mode = Number(mode)\n  }\n\n  _onDataChanged(data: any) {\n    if (!this.scene || !data) {\n      return\n    }\n\n    this.scene.data = data\n  }\n\n  _onSelectedChanged(after: Component[]) {\n    /*\n     scene 컴포넌트의 속성을 속성 에디터(input box등)에서 변경하다가,\n     scene의 다른 컴포넌트를 클릭해서 포커스(선택) 컴포넌트를 변경하게되면,\n     속성 에디터(input box등)의 value change 이벤트의 처리와 충돌(레이스)하게된다.\n     \n     기대하는 순서는 먼저 속성 에디터의 value change 이벤트를 처리한 후에,\n     selected 이벤트를 처리할 수 있도록 requestAnimationFrame으로 한 프레임을 지연하도록 하였다.\n     */\n    requestAnimationFrame(() => {\n      this._setSelected(after)\n    })\n  }\n\n  _onSceneModeChanged(after: SceneMode) {\n    if (!this.scene) {\n      return\n    }\n\n    if (this.mode !== after) {\n      this._setMode(after)\n    }\n\n    switch (after) {\n      case 1:\n        this.style.cursor = 'default'\n        break\n      case 2:\n        this.style.cursor = 'grab'\n        break\n      case 3:\n        this.style.cursor = 'crosshair'\n        break\n      case 4:\n        this.style.cursor = 'copy'\n        break\n      case 5:\n        this.style.cursor = 'context-menu'\n        break\n    }\n  }\n\n  _onBaseUrlChanged(after: string) {\n    if (!this.scene) {\n      return\n    }\n\n    this.scene.baseUrl = after\n  }\n}\n"]}
+{"version":3,"file":"ox-scene-viewer.js","sourceRoot":"","sources":["../../../../src/modeller/scene-viewer/ox-scene-viewer.ts"],"names":[],"mappings":"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","sourcesContent":["import './confidential-overlay.js'\nimport './ox-scene-layer.js'\nimport './ox-scene-handler.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { Component, FITMODE, LoadTracker, LoadingOverlay, Model, Properties, Scene, SCENE_MODE, SceneMode } from '@hatiolab/things-scene'\n\nimport { createResolvedScene } from '../../resolved-scene.js'\n\nimport OxSceneLayer from './ox-scene-layer.js'\n\n@customElement('ox-scene-viewer')\nexport default class OxSceneViewer extends LitElement {\n  static styles = css`\n    :host {\n      outline: none;\n    }\n  `\n\n  scene: Scene | null = null\n  @property({ type: Object }) model?: Model\n  /* Scene Mode - mode 0 : view mode, mode 1 : edit mode, mode 2 : shift mode */\n  @property({ type: Number }) mode: SceneMode = SCENE_MODE.VIEW\n  @property({ type: Number }) screenSize: number = 13.3\n  variables: Properties = {}\n  @property({ type: Object }) data: any\n  /*\n   * 캔바스에 모델을 어떻게 적절하게 보여줄 것인지를 설정한다.\n   *\n   * @none 가로, 세로 스케일을 1로 고정하고, {0, 0}좌표로 translate시킨다.\n   * @both 캔바스에 모델을 꼭 채우도록 가로, 세로 스케일을 조정하고, {0, 0}좌표로 translate시킨다.\n   * @width 캔바스의 폭에 모델의 폭을 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.\n   * @height 캔바스의 높이에 모델의 높이를 일치하도록 가로, 세로 스케일을 동일하게 조정하고, {0, 0}좌표로 translate시킨다.\n   * @center 가로, 세로 스케일을 1로 고정하고 모델이 화면의 중앙에 위치하도록 translate시킨다.\n   * @ratio 모델의 모든 부분이 캔바스에 최대 크기로 표현될 수 있도록 가로, 세로 동일한 스케일로 조정하고, {0, 0}좌표로 translate시킨다.\n   */\n  @property({ type: String }) fit: FITMODE = 'none'\n  selected: Component[] = []\n  @property({ type: Boolean }) disposeWhenDetached: boolean = false\n  @property({ type: String }) baseUrl: string = ''\n  @property({ type: Object }) provider: any\n  @property({ type: Object }) loadTracker?: LoadTracker\n  @property({ type: String }) name: string = 'noname'\n  @property({ type: Boolean }) enableInspector: boolean = true\n  @property({ type: Boolean }) showInspector: boolean = false\n\n  private lastOffsetWidth?: number\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    if (this.scene && this.disposeWhenDetached) {\n      this._disposeScene()\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `\n  }\n\n  updated(change: PropertyValues<this>) {\n    change.has('model') && this._onModelChanged(this.model)\n    change.has('mode') && this._onModeChanged(this.mode)\n    change.has('screenSize') && this._onDisplayChanged(this.screenSize)\n    change.has('data') && this._onDataChanged(this.data)\n    change.has('baseUrl') && this._onBaseUrlChanged(this.baseUrl)\n  }\n\n  _setScene(scene: Scene | null) {\n    this.scene = scene\n    this.dispatchEvent(\n      new CustomEvent('scene-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: scene }\n      })\n    )\n  }\n\n  _setMode(mode: SceneMode) {\n    this.mode = mode\n    this.dispatchEvent(\n      new CustomEvent('mode-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: mode }\n      })\n    )\n  }\n\n  _setVariables(variables: Properties) {\n    this.variables = variables\n    this.dispatchEvent(\n      new CustomEvent('variables-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: variables }\n      })\n    )\n  }\n\n  _setSelected(selected: Component[]) {\n    this.selected = selected\n    this.dispatchEvent(\n      new CustomEvent('selected-changed', {\n        bubbles: true,\n        composed: true,\n        detail: { value: selected }\n      })\n    )\n  }\n\n  _disposeScene() {\n    if (this.scene) {\n      this.scene.off('selected', this._onSelectedChanged, this)\n      this.scene.off('mode', this._onSceneModeChanged, this)\n\n      if (this.provider) {\n        this.scene.release && this.scene.release()\n      } else {\n        this.scene.dispose()\n      }\n\n      this._setScene(null)\n      this._setSelected([])\n    }\n  }\n\n  resize(force: boolean) {\n    if (typeof this.scene == 'object') {\n      if (force || this.fit === 'both' || Math.abs(this.offsetWidth - (this.lastOffsetWidth || 0)) >= 1) {\n        requestAnimationFrame(() => {\n          if (this.scene) {\n            this.scene.resize()\n            this.scene.fit(this.fit)\n          }\n        })\n      }\n\n      this.lastOffsetWidth = this.offsetWidth\n    }\n  }\n\n  async _onModelChanged(model?: Model) {\n    this._disposeScene()\n\n    if (!model) {\n      return\n    }\n\n    const layers: any[] = Array.from(this.querySelectorAll('ox-scene-layer')).map(layer => (layer as OxSceneLayer).getModel())\n\n    const handlers: any[] = Array.from(this.querySelectorAll('ox-scene-handler')).map(handler => handler.getAttribute('type'))\n\n    // tracker: 외부에서 전달받았으면 재사용, 없으면 자동 생성\n    /* Resolving the model's types is a wait; the modeller can be handed another model meanwhile. */\n    const scene = await createResolvedScene(\n      {\n        target: this,\n        model: JSON.parse(JSON.stringify(model)),\n        layers,\n        handlers,\n        mode: this.mode,\n        refProvider: this.provider,\n        loading: this.loadTracker ? { tracker: this.loadTracker } : undefined\n      },\n      () => this.model === model && this.isConnected\n    )\n\n    if (!scene) {\n      return\n    }\n\n    this._setScene(scene)\n\n    if (this.provider) {\n      this.provider.add(this.name, this.scene)\n    }\n\n    this.scene!.screen = this.screenSize\n\n    /* 이 컴포넌트의 폭이 값을 가지고 있으면 - 화면상에 자리를 잡고 보여지고 있음을 의미한다.\n     * 이 때는 정상적으로 그려주고,\n     * 그렇지 않으면, 다음 Resize Handling시에 처리하도록 한다.\n     */\n    this.resize(true)\n\n    this._setVariables(model.variables || (this.scene! as any).variables)\n\n    this.scene!.on('selected', this._onSelectedChanged, this)\n    this.scene!.on('mode', this._onSceneModeChanged, this)\n\n    this._onModeChanged(this.mode)\n    this._onDisplayChanged(this.screenSize)\n    this._onBaseUrlChanged(this.baseUrl)\n\n    this.focus()\n  }\n\n  _onDisplayChanged(screenSize: string | number) {\n    if (!this.scene) {\n      return\n    }\n\n    if (screenSize) {\n      this.scene.screen = parseFloat(String(screenSize))\n    }\n  }\n\n  _onModeChanged(mode: SceneMode) {\n    if (!this.scene) {\n      return\n    }\n    this.scene.mode = Number(mode)\n  }\n\n  _onDataChanged(data: any) {\n    if (!this.scene || !data) {\n      return\n    }\n\n    this.scene.data = data\n  }\n\n  _onSelectedChanged(after: Component[]) {\n    /*\n     scene 컴포넌트의 속성을 속성 에디터(input box등)에서 변경하다가,\n     scene의 다른 컴포넌트를 클릭해서 포커스(선택) 컴포넌트를 변경하게되면,\n     속성 에디터(input box등)의 value change 이벤트의 처리와 충돌(레이스)하게된다.\n     \n     기대하는 순서는 먼저 속성 에디터의 value change 이벤트를 처리한 후에,\n     selected 이벤트를 처리할 수 있도록 requestAnimationFrame으로 한 프레임을 지연하도록 하였다.\n     */\n    requestAnimationFrame(() => {\n      this._setSelected(after)\n    })\n  }\n\n  _onSceneModeChanged(after: SceneMode) {\n    if (!this.scene) {\n      return\n    }\n\n    if (this.mode !== after) {\n      this._setMode(after)\n    }\n\n    switch (after) {\n      case 1:\n        this.style.cursor = 'default'\n        break\n      case 2:\n        this.style.cursor = 'grab'\n        break\n      case 3:\n        this.style.cursor = 'crosshair'\n        break\n      case 4:\n        this.style.cursor = 'copy'\n        break\n      case 5:\n        this.style.cursor = 'context-menu'\n        break\n    }\n  }\n\n  _onBaseUrlChanged(after: string) {\n    if (!this.scene) {\n      return\n    }\n\n    this.scene.baseUrl = after\n  }\n}\n"]}

package/dist/src/ox-board-preview.js

@@ -16,7 +16,8 @@ import { __decorate } from "tslib";
  */
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { create, SCENE_MODE } from '@hatiolab/things-scene';
+import { SCENE_MODE } from '@hatiolab/things-scene';
+import { createResolvedScene } from './resolved-scene.js';
 let BoardPreview = class BoardPreview extends LitElement {
     constructor() {
         super(...arguments);
@@ -48,20 +49,26 @@ let BoardPreview = class BoardPreview extends LitElement {
         super.disconnectedCallback();
     }
     /** Scene 새로 만들고 target 에 부착. 기존 Scene 은 dispose. */
-    _rebuild() {
+    async _rebuild() {
         var _a, _b;
         this._dispose();
         if (!this.boardModel || !this._target)
             return;
+        /* Resolving the model's types is a wait; this preview may be handed another model meanwhile. */
+        const boardModel = this.boardModel;
+        const target = this._target;
         try {
-            this._scene = create({
-                model: { ...this.boardModel },
+            const scene = await createResolvedScene({
+                model: { ...boardModel },
                 mode: SCENE_MODE.VIEW,
                 handlers: []
-            });
+            }, () => this.boardModel === boardModel && this._target === target && this.isConnected);
+            if (!scene)
+                return;
+            this._scene = scene;
             // 컴포넌트 모두 보이도록 fit
             (_b = (_a = this._scene).fit) === null || _b === void 0 ? void 0 : _b.call(_a, this._scene.fitMode);
-            this._scene.target = this._target;
+            this._scene.target = target;
         }
         catch (e) {
             console.warn('[ox-board-preview] failed to render boardModel:', e);

package/dist/src/ox-board-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-board-preview.js","sourceRoot":"","sources":["../../src/ox-board-preview.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAuB,MAAM,KAAK,CAAA;AAChE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAGpD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAkBL;;;WAGG;QACyB,eAAU,GAAQ,IAAI,CAAA;QAElD,sCAAsC;QACT,gBAAW,GAAY,KAAK,CAAA;QAGjD,WAAM,GAAQ,IAAI,CAAA;IAqD5B,CAAC;IAnDC,MAAM;QACJ,OAAO,IAAI,CAAA;;cAED,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB;YACjD,CAAA;IACV,CAAC;IAED,YAAY;QACV,IAAI,CAAC,QAAQ,EAAE,CAAA;IACjB,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YAC9C,IAAI,CAAC,QAAQ,EAAE,CAAA;QACjB,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,EAAE,CAAA;QACf,KAAK,CAAC,oBAAoB,EAAE,CAAA;IAC9B,CAAC;IAED,oDAAoD;IAC5C,QAAQ;;QACd,IAAI,CAAC,QAAQ,EAAE,CAAA;QACf,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAM;QAC7C,IAAI,CAAC;YACH,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;gBACnB,KAAK,EAAE,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE;gBAC7B,IAAI,EAAE,UAAU,CAAC,IAAI;gBACrB,QAAQ,EAAE,EAAE;aACN,CAAC,CAAA;YACT,mBAAmB;YACnB,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,GAAG,mDAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;YACtC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAA;QACnC,CAAC;QAAC,OAAO,CAAC,EAAE,CAAC;YACX,OAAO,CAAC,IAAI,CAAC,iDAAiD,EAAE,CAAC,CAAC,CAAA;QACpE,CAAC;IACH,CAAC;IAED,iCAAiC;IACzB,QAAQ;;QACd,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAM;QACxB,IAAI,CAAC;YACH,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAA;YACzB,MAAA,MAAA,IAAI,CAAC,MAAM,EAAC,OAAO,kDAAI,CAAA;QACzB,CAAC;QAAC,WAAM,CAAC;YACP,uCAAuC;QACzC,CAAC;QACD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;IACpB,CAAC;;AA/EM,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;KAaF;CACF,AAfY,CAeZ;AAM2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAuB;AAGrB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDAA6B;AAE/B;IAAzB,KAAK,CAAC,SAAS,CAAC;6CAA8B;AA3BpC,YAAY;IADxB,aAAa,CAAC,kBAAkB,CAAC;GACrB,YAAY,CAiFxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n *\n * `<ox-board-preview>` — boardModel JSON 을 read-only 시각으로 띄우는 lightweight 컴포넌트.\n *\n * 용도:\n *   - board-import wizard 의 review 단계에서 시안 (variant) 별 썸네일 + 큰 미리보기\n *   - 그 외 인터랙션 없이 보드를 살짝 보여주는 경우 (board card hover preview 등)\n *\n * 차이 (`<ox-board-viewer>` 대비):\n *   - 데이터 바인딩 / playback / fullscreen / 검색 / popup / scenario 모두 X\n *   - boardModel prop 직접 받음 (Board entity 가 필요 없음 — 미저장 model 도 지원)\n *   - dataSubscription 미연결 — 정적 시각만\n *   - 사용자 입력 미수용 (selectable, dragable 모두 비활성)\n */\nimport { css, html, LitElement, type PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { create, SCENE_MODE } from '@hatiolab/things-scene'\n\n@customElement('ox-board-preview')\nexport class BoardPreview extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n      #target {\n        position: absolute;\n        inset: 0;\n        outline: 0;\n      }\n    `\n  ]\n\n  /**\n   * 보드 모델 JSON. 변경 시 Scene 재생성 (cheap operation).\n   * Object reference 가 같아도 deep 변경은 감지 못 하므로, 호출자가 새 객체로 갱신.\n   */\n  @property({ type: Object }) boardModel: any = null\n\n  /** 사용자 클릭 / 휠 등 인터랙션 차단 (썸네일 모드용). */\n  @property({ type: Boolean }) interactive: boolean = false\n\n  @query('#target') private _target!: HTMLElement\n  private _scene: any = null\n\n  render() {\n    return html`<div\n      id=\"target\"\n      style=${this.interactive ? '' : 'pointer-events: none;'}\n    ></div>`\n  }\n\n  firstUpdated() {\n    this._rebuild()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('boardModel') && this._target) {\n      this._rebuild()\n    }\n  }\n\n  disconnectedCallback() {\n    this._dispose()\n    super.disconnectedCallback()\n  }\n\n  /** Scene 새로 만들고 target 에 부착. 기존 Scene 은 dispose. */\n  private _rebuild() {\n    this._dispose()\n    if (!this.boardModel || !this._target) return\n    try {\n      this._scene = create({\n        model: { ...this.boardModel },\n        mode: SCENE_MODE.VIEW,\n        handlers: []\n      } as any)\n      // 컴포넌트 모두 보이도록 fit\n      this._scene.fit?.(this._scene.fitMode)\n      this._scene.target = this._target\n    } catch (e) {\n      console.warn('[ox-board-preview] failed to render boardModel:', e)\n    }\n  }\n\n  /** Scene release + target 분리. */\n  private _dispose() {\n    if (!this._scene) return\n    try {\n      this._scene.target = null\n      this._scene.release?.()\n    } catch {\n      /* swallow — preview 정리는 best effort */\n    }\n    this._scene = null\n  }\n}\n"]}
+{"version":3,"file":"ox-board-preview.js","sourceRoot":"","sources":["../../src/ox-board-preview.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n *\n * `<ox-board-preview>` — boardModel JSON 을 read-only 시각으로 띄우는 lightweight 컴포넌트.\n *\n * 용도:\n *   - board-import wizard 의 review 단계에서 시안 (variant) 별 썸네일 + 큰 미리보기\n *   - 그 외 인터랙션 없이 보드를 살짝 보여주는 경우 (board card hover preview 등)\n *\n * 차이 (`<ox-board-viewer>` 대비):\n *   - 데이터 바인딩 / playback / fullscreen / 검색 / popup / scenario 모두 X\n *   - boardModel prop 직접 받음 (Board entity 가 필요 없음 — 미저장 model 도 지원)\n *   - dataSubscription 미연결 — 정적 시각만\n *   - 사용자 입력 미수용 (selectable, dragable 모두 비활성)\n */\nimport { css, html, LitElement, type PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { SCENE_MODE } from '@hatiolab/things-scene'\n\nimport { createResolvedScene } from './resolved-scene.js'\n\n@customElement('ox-board-preview')\nexport class BoardPreview extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n      }\n      #target {\n        position: absolute;\n        inset: 0;\n        outline: 0;\n      }\n    `\n  ]\n\n  /**\n   * 보드 모델 JSON. 변경 시 Scene 재생성 (cheap operation).\n   * Object reference 가 같아도 deep 변경은 감지 못 하므로, 호출자가 새 객체로 갱신.\n   */\n  @property({ type: Object }) boardModel: any = null\n\n  /** 사용자 클릭 / 휠 등 인터랙션 차단 (썸네일 모드용). */\n  @property({ type: Boolean }) interactive: boolean = false\n\n  @query('#target') private _target!: HTMLElement\n  private _scene: any = null\n\n  render() {\n    return html`<div\n      id=\"target\"\n      style=${this.interactive ? '' : 'pointer-events: none;'}\n    ></div>`\n  }\n\n  firstUpdated() {\n    this._rebuild()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('boardModel') && this._target) {\n      this._rebuild()\n    }\n  }\n\n  disconnectedCallback() {\n    this._dispose()\n    super.disconnectedCallback()\n  }\n\n  /** Scene 새로 만들고 target 에 부착. 기존 Scene 은 dispose. */\n  private async _rebuild() {\n    this._dispose()\n    if (!this.boardModel || !this._target) return\n\n    /* Resolving the model's types is a wait; this preview may be handed another model meanwhile. */\n    const boardModel = this.boardModel\n    const target = this._target\n\n    try {\n      const scene = await createResolvedScene(\n        {\n          model: { ...boardModel },\n          mode: SCENE_MODE.VIEW,\n          handlers: []\n        } as any,\n        () => this.boardModel === boardModel && this._target === target && this.isConnected\n      )\n\n      if (!scene) return\n\n      this._scene = scene\n      // 컴포넌트 모두 보이도록 fit\n      this._scene.fit?.(this._scene.fitMode)\n      this._scene.target = target\n    } catch (e) {\n      console.warn('[ox-board-preview] failed to render boardModel:', e)\n    }\n  }\n\n  /** Scene release + target 분리. */\n  private _dispose() {\n    if (!this._scene) return\n    try {\n      this._scene.target = null\n      this._scene.release?.()\n    } catch {\n      /* swallow — preview 정리는 best effort */\n    }\n    this._scene = null\n  }\n}\n"]}

package/dist/src/ox-board-template-viewer.d.ts

@@ -11,7 +11,7 @@ export declare class BoardTemplateViewer extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changes: PropertyValues<this>): void;
-    initScene(): void;
+    initScene(): Promise<void>;
     closeScene(): void;
     releaseScene(): void;
     setupScene({ id, scene }: {

package/dist/src/ox-board-template-viewer.js

@@ -3,7 +3,8 @@ import '@material/web/icon/icon.js';
 import '@material/web/fab/fab.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
-import { create, SCENE_MODE } from '@hatiolab/things-scene';
+import { SCENE_MODE } from '@hatiolab/things-scene';
+import { createResolvedScene } from './resolved-scene.js';
 import { ScrollbarStyles } from '@operato/styles';
 let BoardTemplateViewer = class BoardTemplateViewer extends LitElement {
     constructor() {
@@ -36,16 +37,21 @@ let BoardTemplateViewer = class BoardTemplateViewer extends LitElement {
             }
         }
     }
-    initScene() {
+    async initScene() {
         if (!this.boardTemplate || !this.boardTemplate.id)
             return;
-        this._scene = create({
+        /* Resolving the model's types is a wait, and `boardTemplate` can be replaced while it runs. */
+        const boardTemplate = this.boardTemplate;
+        const scene = await createResolvedScene({
             model: {
-                ...this.boardTemplate.model
+                ...boardTemplate.model
             },
             mode: SCENE_MODE.VIEW
-        });
-        this.setupScene({ id: this.boardTemplate.id, scene: this._scene });
+        }, () => this.boardTemplate === boardTemplate && this.isConnected);
+        if (!scene)
+            return;
+        this._scene = scene;
+        this.setupScene({ id: boardTemplate.id, scene: this._scene });
     }
     closeScene() {
         if (this._scene) {

package/dist/src/ox-board-template-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-board-template-viewer.js","sourceRoot":"","sources":["../../src/ox-board-template-viewer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/fab/fab.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { create, SCENE_MODE } from '@hatiolab/things-scene'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-board-template-viewer')\nexport class BoardTemplateViewer extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        position: relative;\n\n        width: 100%; /* 전체화면보기를 위해서 필요함. */\n        overflow: hidden;\n      }\n\n      #target {\n        flex: 1;\n\n        width: 100%; /* 전체화면보기를 위해서 필요함. */\n        height: 100%;\n\n        outline: 0;\n      }\n\n      @media print {\n        md-icon {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) boardTemplate: any = {}\n\n  @state() _scene: any = null\n\n  @query('#target') _target!: HTMLElement\n\n  render() {\n    return html` <div id=\"target\"></div> `\n  }\n\n  private resizeHandler = () => {\n    this._scene && this._scene.fit()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    window.addEventListener('resize', this.resizeHandler)\n\n    window.addEventListener('orientationchange', this.resizeHandler)\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.resizeHandler)\n    window.removeEventListener('orientationchange', this.resizeHandler)\n\n    super.disconnectedCallback()\n\n    this.closeScene()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('boardTemplate')) {\n      this.closeScene()\n\n      if (this.boardTemplate && this.boardTemplate.id) {\n        this.initScene()\n      }\n    }\n  }\n\n  initScene() {\n    if (!this.boardTemplate || !this.boardTemplate.id) return\n\n    this._scene = create({\n      model: {\n        ...this.boardTemplate.model\n      },\n      mode: SCENE_MODE.VIEW\n    })\n\n    this.setupScene({ id: this.boardTemplate.id, scene: this._scene })\n  }\n\n  closeScene() {\n    if (this._scene) {\n      this._scene.target = null\n      this._scene.release && this._scene.release()\n\n      this._scene = null\n    }\n  }\n\n  releaseScene() {\n    this.closeScene()\n  }\n\n  setupScene({ id, scene }: { id: string; scene: any }) {\n    this._scene = scene\n\n    const backgroundColor = this._scene?.root.state.fillStyle\n    if (typeof backgroundColor === 'string') {\n      this.style.backgroundColor = backgroundColor\n    } else {\n      this.style.backgroundColor = 'initial'\n    }\n\n    /* scene의 기존 target을 보관한다. */\n\n    this._scene.fit(this._scene.fitMode)\n    this._scene.target = this._target\n  }\n\n  /* event handlers */\n  async getSceneImageData(base64 = false) {\n    if (!this._scene) {\n      return\n    }\n\n    var { width, height } = this._scene.model\n    var pixelRatio = window.devicePixelRatio\n\n    // 1. Scene의 바운드에 근거하여, 오프스크린 캔바스를 만든다.\n    var canvas = document.createElement('canvas')\n    canvas.width = Number(width)\n    canvas.height = Number(height)\n\n    var root = this._scene.root\n    // 2. 모델레이어의 원래 위치와 스케일을 저장한다.\n    var translate = root.get('translate')\n    var scale = root.get('scale')\n\n    // 3. 위치와 스케일 기본 설정.\n    root.set('translate', { x: 0, y: 0 })\n    root.set('scale', { x: 1 / pixelRatio, y: 1 / pixelRatio })\n\n    // 4. 오프스크린 캔바스의 Context2D를 구한뒤, 모델레이어를 그 위에 그린다.\n    var context = canvas.getContext('2d')\n\n    root.draw(context)\n\n    root.set('translate', translate)\n    root.set('scale', scale)\n\n    var data = base64 ? canvas.toDataURL() : context!.getImageData(0, 0, width, height).data\n\n    return {\n      width,\n      height,\n      data\n    }\n  }\n\n  async printTrick(image: string) {\n    var viewTarget: HTMLElement | null = null\n    var printTarget: HTMLImageElement | null = null\n\n    if (!image) {\n      image = (await this.getSceneImageData(true))?.data as string\n    }\n\n    printTarget = document.createElement('img')\n    printTarget.id = 'target'\n    printTarget.src = image\n    printTarget.style.width = '100%'\n    printTarget.style.height = '100%'\n\n    const x = (mql: MediaQueryListEvent) => {\n      if (mql.matches) {\n        if (!viewTarget) {\n          viewTarget = (this.renderRoot as ShadowRoot)!.getElementById('target')\n          this.renderRoot.replaceChild(printTarget!, viewTarget!)\n        }\n      } else {\n        this.renderRoot.replaceChild(viewTarget!, printTarget!)\n        printTarget!.remove()\n        mediaQueryList.removeEventListener('change', x)\n      }\n    }\n\n    if (window.matchMedia) {\n      var mediaQueryList = window.matchMedia('print')\n      mediaQueryList.addEventListener('change', x)\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-board-template-viewer.js","sourceRoot":"","sources":["../../src/ox-board-template-viewer.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/fab/fab.js'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { SCENE_MODE } from '@hatiolab/things-scene'\n\nimport { createResolvedScene } from './resolved-scene.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-board-template-viewer')\nexport class BoardTemplateViewer extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n\n        position: relative;\n\n        width: 100%; /* 전체화면보기를 위해서 필요함. */\n        overflow: hidden;\n      }\n\n      #target {\n        flex: 1;\n\n        width: 100%; /* 전체화면보기를 위해서 필요함. */\n        height: 100%;\n\n        outline: 0;\n      }\n\n      @media print {\n        md-icon {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) boardTemplate: any = {}\n\n  @state() _scene: any = null\n\n  @query('#target') _target!: HTMLElement\n\n  render() {\n    return html` <div id=\"target\"></div> `\n  }\n\n  private resizeHandler = () => {\n    this._scene && this._scene.fit()\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    window.addEventListener('resize', this.resizeHandler)\n\n    window.addEventListener('orientationchange', this.resizeHandler)\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.resizeHandler)\n    window.removeEventListener('orientationchange', this.resizeHandler)\n\n    super.disconnectedCallback()\n\n    this.closeScene()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('boardTemplate')) {\n      this.closeScene()\n\n      if (this.boardTemplate && this.boardTemplate.id) {\n        this.initScene()\n      }\n    }\n  }\n\n  async initScene() {\n    if (!this.boardTemplate || !this.boardTemplate.id) return\n\n    /* Resolving the model's types is a wait, and `boardTemplate` can be replaced while it runs. */\n    const boardTemplate = this.boardTemplate\n\n    const scene = await createResolvedScene(\n      {\n        model: {\n          ...boardTemplate.model\n        },\n        mode: SCENE_MODE.VIEW\n      },\n      () => this.boardTemplate === boardTemplate && this.isConnected\n    )\n\n    if (!scene) return\n\n    this._scene = scene\n\n    this.setupScene({ id: boardTemplate.id, scene: this._scene })\n  }\n\n  closeScene() {\n    if (this._scene) {\n      this._scene.target = null\n      this._scene.release && this._scene.release()\n\n      this._scene = null\n    }\n  }\n\n  releaseScene() {\n    this.closeScene()\n  }\n\n  setupScene({ id, scene }: { id: string; scene: any }) {\n    this._scene = scene\n\n    const backgroundColor = this._scene?.root.state.fillStyle\n    if (typeof backgroundColor === 'string') {\n      this.style.backgroundColor = backgroundColor\n    } else {\n      this.style.backgroundColor = 'initial'\n    }\n\n    /* scene의 기존 target을 보관한다. */\n\n    this._scene.fit(this._scene.fitMode)\n    this._scene.target = this._target\n  }\n\n  /* event handlers */\n  async getSceneImageData(base64 = false) {\n    if (!this._scene) {\n      return\n    }\n\n    var { width, height } = this._scene.model\n    var pixelRatio = window.devicePixelRatio\n\n    // 1. Scene의 바운드에 근거하여, 오프스크린 캔바스를 만든다.\n    var canvas = document.createElement('canvas')\n    canvas.width = Number(width)\n    canvas.height = Number(height)\n\n    var root = this._scene.root\n    // 2. 모델레이어의 원래 위치와 스케일을 저장한다.\n    var translate = root.get('translate')\n    var scale = root.get('scale')\n\n    // 3. 위치와 스케일 기본 설정.\n    root.set('translate', { x: 0, y: 0 })\n    root.set('scale', { x: 1 / pixelRatio, y: 1 / pixelRatio })\n\n    // 4. 오프스크린 캔바스의 Context2D를 구한뒤, 모델레이어를 그 위에 그린다.\n    var context = canvas.getContext('2d')\n\n    root.draw(context)\n\n    root.set('translate', translate)\n    root.set('scale', scale)\n\n    var data = base64 ? canvas.toDataURL() : context!.getImageData(0, 0, width, height).data\n\n    return {\n      width,\n      height,\n      data\n    }\n  }\n\n  async printTrick(image: string) {\n    var viewTarget: HTMLElement | null = null\n    var printTarget: HTMLImageElement | null = null\n\n    if (!image) {\n      image = (await this.getSceneImageData(true))?.data as string\n    }\n\n    printTarget = document.createElement('img')\n    printTarget.id = 'target'\n    printTarget.src = image\n    printTarget.style.width = '100%'\n    printTarget.style.height = '100%'\n\n    const x = (mql: MediaQueryListEvent) => {\n      if (mql.matches) {\n        if (!viewTarget) {\n          viewTarget = (this.renderRoot as ShadowRoot)!.getElementById('target')\n          this.renderRoot.replaceChild(printTarget!, viewTarget!)\n        }\n      } else {\n        this.renderRoot.replaceChild(viewTarget!, printTarget!)\n        printTarget!.remove()\n        mediaQueryList.removeEventListener('change', x)\n      }\n    }\n\n    if (window.matchMedia) {\n      var mediaQueryList = window.matchMedia('print')\n      mediaQueryList.addEventListener('change', x)\n    }\n  }\n}\n"]}

package/dist/src/ox-board-viewer.d.ts

@@ -53,7 +53,7 @@ export declare class BoardViewer extends LitElement {
     disconnectedCallback(): void;
     updated(changes: PropertyValues<this>): void;
     initSceneAsync(): Promise<void>;
-    initScene(): void;
+    initScene(): Promise<void>;
     private _ensureOverlay;
     closeScene(): void;
     releaseScene(): void;

package/dist/src/ox-board-viewer.js

@@ -4,9 +4,10 @@ import '@material/web/fab/fab.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import * as XLSX from 'xlsx';
-import { create, LoadTracker, LoadingOverlay, SCENE_MODE } from '@hatiolab/things-scene';
+import { LoadTracker, LoadingOverlay, SCENE_MODE } from '@hatiolab/things-scene';
 import { isIOS, togglefullscreen } from '@operato/utils';
 import { ScrollbarStyles } from '@operato/styles';
+import { createResolvedScene } from './resolved-scene.js';
 import { BoardDataStorage } from './data-storage/data-storage.js';
 import { DataSubscriptionProviderImpl } from './graphql/data-subscription.js';
 import { PlaybackProvider } from './graphql/playback-subscription.js';
@@ -199,25 +200,30 @@ let BoardViewer = class BoardViewer extends LitElement {
         this._scene = await this.provider.create(this.board.id);
         this.setupScene({ id: this.board.id, scene: this._scene });
     }
-    initScene() {
+    async initScene() {
         if (!this.board || !this.board.id)
             return;
-        this._scene = create({
+        /* Resolving the model's types is a wait, and `board` can be replaced while it runs. */
+        const board = this.board;
+        const scene = await createResolvedScene({
             model: {
-                ...this.board.model
+                ...board.model
             },
             mode: SCENE_MODE.VIEW,
             refProvider: this.provider,
-            dataStorage: this.board.id !== 'preview' ? new BoardDataStorage(this.board.id) : undefined,
+            dataStorage: board.id !== 'preview' ? new BoardDataStorage(board.id) : undefined,
             dataSubscriptionProvider: new DataSubscriptionProviderImpl(),
             handlers: ['waypoint-handler'],
             loading: { tracker: this.loadTracker }
-        });
+        }, () => this.board === board && this.isConnected);
+        if (!scene)
+            return;
+        this._scene = scene;
         if (this.baseUrl) {
             this._scene.baseUrl = this.baseUrl;
         }
         // this.provider!.add(this.board.id, this._scene)
-        this.setupScene({ id: this.board.id, scene: this._scene });
+        this.setupScene({ id: board.id, scene: this._scene });
     }
     _ensureOverlay(tracker) {
         if (!this._loadingOverlay) {