@edv4h/usketch-plugin-deep-link (英语)

形状 URL( URL) QQ( URL)缩略语 ?node-id=...(選択ノードへのリンク)に相当する体験を提供する。。

URL( URL) QQ( URL)

?shape=<id>[,<id>...]   選択（複数対応・ライブ同期）
?x=<n>&y=<n>&zoom=<n>   厳密なカメラ位置（「この表示へのリンク」用）

• 選択はライブ同期: 形状qq history.replaceState で ?shape= が更新される(履歴は汚さない)。
• カメラは明示スナップショット翻译:encodeDeepLink で 現在の viewport [永久失效連結] [永久失效連結]。
• URL 形状 形状 CRDT 形状 届いていない場合は shape:added を購読して出現までリトライする(タイムアウトあり)。カメラ 指定があれば自動フレーミングより優先して厳密復元する。

使い方

import { createDeepLinkPlugin } from "@edv4h/usketch-plugin-deep-link";

// createApp は非同期。
const app = await createApp({ store, plugins: [createDeepLinkPlugin()] });

「この表示へのリンク」を作る側(共有ダイアログ等) encodeDeepLink を利用する:

import { encodeDeepLink } from "@edv4h/usketch-plugin-deep-link";

const search = encodeDeepLink(window.location.search, {
    shapeIds: [...store.getSelection()],
    camera: store.getViewport(),
});
const url = `${window.location.origin}${window.location.pathname}${search}`;

エクスポート

• createDeepLinkPlugin() . . . . . 。
• encodeDeepLink(search, state) 编号 : decodeDeepLink(search) —— URL ⇄。
• applyDeepLink(store, search, onDone?) - 。
• frameShapes(store, ids, opts?) - * * * * * * 形状 * * * * * * * 。