@dxos/plugin-tldraw 0.10.0

package/dist/lib/hooks.mjs

@@ -0,0 +1,116 @@
+import { invariant } from "@dxos/invariant";
+import { Tldraw } from "#types";
+import { createTLStore, defaultShapeUtils } from "@tldraw/tldraw";
+import { useState } from "react";
+import { useAsyncEffect } from "@dxos/react-ui";
+import { AbstractStoreAdapter, Doc, Modified } from "@dxos/echo-doc";
+import { log } from "@dxos/log";
+import { transact } from "@tldraw/state";
+//#region src/hooks/adapter.ts
+var __dxlog_file$1 = "/Users/burdon/Code/dxos/dxos/.claude/worktrees/peaceful-allen-9b542f/packages/plugins/plugin-tldraw/src/hooks/adapter.ts";
+/**
+* Ref:
+* - https://tldraw.dev/docs/persistence#Listening-for-changes
+* - https://github.com/tldraw/tldraw-yjs-example/blob/main/src/useYjsStore.ts
+* - https://github.com/LiangrunDa/tldraw-with-automerge/blob/main/src/App.tsx
+*/
+var SAVE_DEBOUNCE = 250;
+var TLDrawStoreAdapter = class extends AbstractStoreAdapter {
+	_modified = new Modified();
+	_store;
+	_saveTimeout;
+	get store() {
+		return this._store;
+	}
+	getElements() {
+		invariant(this._store, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$1,
+			L: 30,
+			S: this,
+			A: ["this._store", ""]
+		});
+		return this._store.allRecords();
+	}
+	onUpdate({ added = [], updated = [], deleted = [] }) {
+		transact(() => {
+			invariant(this._store, void 0, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file$1,
+				L: 37,
+				S: this,
+				A: ["this._store", ""]
+			});
+			const elements = [...added, ...updated];
+			this._store.remove(deleted);
+			this._store.put(elements);
+		});
+	}
+	onOpen() {
+		this._store = createTLStore({ shapeUtils: defaultShapeUtils });
+		const subscription = this._store.listen(({ changes: { added, updated, removed } }) => {
+			Object.values(added).forEach((record) => this._modified.added.set(record.id, record));
+			Object.values(updated).forEach(([_, record]) => this._modified.updated.set(record.id, record));
+			Object.values(removed).forEach((record) => this._modified.deleted.add(record.id));
+			clearTimeout(this._saveTimeout);
+			this._saveTimeout = setTimeout(() => this.save(), SAVE_DEBOUNCE);
+		}, {
+			scope: "document",
+			source: "user"
+		});
+		return () => {
+			clearTimeout(this._saveTimeout);
+			subscription();
+		};
+	}
+	onClose() {
+		this._store = void 0;
+	}
+	save() {
+		if (!this.isOpen) return;
+		this.updateDatabase(this._modified.batch());
+		this._modified.clear();
+	}
+};
+//#endregion
+//#region src/hooks/useStoreAdapter.ts
+var __dxlog_file = "/Users/burdon/Code/dxos/dxos/.claude/worktrees/peaceful-allen-9b542f/packages/plugins/plugin-tldraw/src/hooks/useStoreAdapter.ts";
+/**
+* Hook that manages the TLDraw store adapter lifecycle for a canvas object.
+* Creates a doc accessor and opens the adapter.
+*
+* @param canvas - Optional canvas whose content will be synced.
+* @returns The TLDrawStoreAdapter instance managing the tldraw store.
+*/
+var useStoreAdapter = (canvas) => {
+	const [adapter] = useState(new TLDrawStoreAdapter());
+	const [_, forceUpdate] = useState({});
+	useAsyncEffect(async (controller) => {
+		if (!canvas) return;
+		if (canvas.schema !== Tldraw.TLDRAW_SCHEMA) {
+			log.warn("invalid schema", { schema: canvas.schema }, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 32,
+				S: void 0
+			});
+			return;
+		}
+		const accessor = Doc.createAccessor(canvas, ["content"]);
+		await adapter.open(accessor);
+		if (controller.signal.aborted) {
+			adapter.close();
+			return;
+		}
+		forceUpdate({});
+		return () => {
+			adapter.save();
+			adapter.close();
+		};
+	}, [canvas]);
+	return adapter;
+};
+//#endregion
+export { TLDrawStoreAdapter, useStoreAdapter };
+
+//# sourceMappingURL=hooks.mjs.map

package/dist/lib/hooks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.mjs","names":[],"sources":["../../src/hooks/adapter.ts","../../src/hooks/useStoreAdapter.ts"],"sourcesContent":["//\n// Copyright 2023 DXOS.org\n//\n\nimport { transact } from '@tldraw/state';\nimport { type TLRecord, createTLStore, defaultShapeUtils } from '@tldraw/tldraw';\nimport { type TLStore } from '@tldraw/tlschema';\n\nimport { AbstractStoreAdapter, type Batch, Modified } from '@dxos/echo-doc';\nimport { invariant } from '@dxos/invariant';\n\n/**\n * Ref:\n * - https://tldraw.dev/docs/persistence#Listening-for-changes\n * - https://github.com/tldraw/tldraw-yjs-example/blob/main/src/useYjsStore.ts\n * - https://github.com/LiangrunDa/tldraw-with-automerge/blob/main/src/App.tsx\n */\nconst SAVE_DEBOUNCE = 250;\n\nexport class TLDrawStoreAdapter extends AbstractStoreAdapter<TLRecord> {\n  private readonly _modified = new Modified<TLRecord>();\n  private _store?: TLStore;\n  private _saveTimeout?: ReturnType<typeof setTimeout>;\n\n  get store() {\n    return this._store;\n  }\n\n  override getElements(): TLRecord[] {\n    invariant(this._store);\n    return this._store.allRecords();\n  }\n\n  protected override onUpdate({ added = [], updated = [], deleted = [] }: Batch<TLRecord>): void {\n    // Replace the store records with the automerge doc records.\n    transact(() => {\n      invariant(this._store);\n      const elements = [...added, ...updated];\n      this._store.remove(deleted);\n      this._store.put(elements);\n    });\n  }\n\n  protected override onOpen(): () => void {\n    this._store = createTLStore({ shapeUtils: defaultShapeUtils });\n\n    // List for changes to the store.\n    // TODO(burdon): Upload images to WNFS.\n    const subscription = this._store.listen(\n      ({ changes: { added, updated, removed } }) => {\n        Object.values(added).forEach((record) => this._modified.added.set(record.id, record));\n        Object.values(updated).forEach(([_, record]) => this._modified.updated.set(record.id, record));\n        Object.values(removed).forEach((record) => this._modified.deleted.add(record.id));\n        // Debounced auto-save: tldraw batches listener notifications, so a save driven by\n        // pointer events can run before the final gesture is recorded and lose the last stroke.\n        clearTimeout(this._saveTimeout);\n        this._saveTimeout = setTimeout(() => this.save(), SAVE_DEBOUNCE);\n      },\n      // Only listen to local document changes.\n      {\n        scope: 'document',\n        source: 'user',\n      },\n    );\n\n    return () => {\n      clearTimeout(this._saveTimeout);\n      subscription();\n    };\n  }\n\n  protected override onClose(): void {\n    this._store = undefined;\n  }\n\n  save(): void {\n    if (!this.isOpen) {\n      return;\n    }\n    this.updateDatabase(this._modified.batch());\n    this._modified.clear();\n  }\n}\n","//\n// Copyright 2023 DXOS.org\n//\n\nimport { useState } from 'react';\n\nimport { Doc } from '@dxos/echo-doc';\nimport { log } from '@dxos/log';\nimport { useAsyncEffect } from '@dxos/react-ui';\n\nimport { Tldraw } from '#types';\n\nimport { TLDrawStoreAdapter } from './adapter';\n\n/**\n * Hook that manages the TLDraw store adapter lifecycle for a canvas object.\n * Creates a doc accessor and opens the adapter.\n *\n * @param canvas - Optional canvas whose content will be synced.\n * @returns The TLDrawStoreAdapter instance managing the tldraw store.\n */\nexport const useStoreAdapter = (canvas?: Tldraw.Canvas) => {\n  const [adapter] = useState(new TLDrawStoreAdapter());\n  const [_, forceUpdate] = useState({});\n  useAsyncEffect(\n    async (controller) => {\n      if (!canvas) {\n        return;\n      }\n\n      if (canvas.schema !== Tldraw.TLDRAW_SCHEMA) {\n        log.warn('invalid schema', { schema: canvas.schema });\n        return;\n      }\n\n      const accessor = Doc.createAccessor(canvas, ['content']);\n      await adapter.open(accessor);\n      if (controller.signal.aborted) {\n        void adapter.close();\n        return;\n      }\n\n      forceUpdate({});\n\n      return () => {\n        // Flush any gesture still pending from the deferred pointer_up save.\n        adapter.save();\n        void adapter.close();\n      };\n    },\n    [canvas],\n  );\n\n  return adapter;\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,IAAM,gBAAgB;AAEtB,IAAa,qBAAb,cAAwC,qBAA+B;CACrE,YAA6B,IAAI,SAAmB;CACpD;CACA;CAEA,IAAI,QAAQ;EACV,OAAO,KAAK;CACd;CAEA,cAAmC;EACjC,UAAU,KAAK,QAAK,KAAA,GAAA;GAAA,YAAA;GAAA,GAAA;GAAA,GAAA;GAAA,GAAA;GAAA,GAAA,CAAA,eAAA,EAAA;EAAA,CAAC;EACrB,OAAO,KAAK,OAAO,WAAW;CAChC;CAEA,SAA4B,EAAE,QAAQ,CAAC,GAAG,UAAU,CAAC,GAAG,UAAU,CAAC,KAA4B;EAE7F,eAAe;GACb,UAAU,KAAK,QAAK,KAAA,GAAA;IAAA,YAAA;IAAA,GAAA;IAAA,GAAA;IAAA,GAAA;IAAA,GAAA,CAAA,eAAA,EAAA;GAAA,CAAC;GACrB,MAAM,WAAW,CAAC,GAAG,OAAO,GAAG,OAAO;GACtC,KAAK,OAAO,OAAO,OAAO;GAC1B,KAAK,OAAO,IAAI,QAAQ;EAC1B,CAAC;CACH;CAEA,SAAwC;EACtC,KAAK,SAAS,cAAc,EAAE,YAAY,kBAAkB,CAAC;EAI7D,MAAM,eAAe,KAAK,OAAO,QAC9B,EAAE,SAAS,EAAE,OAAO,SAAS,gBAAgB;GAC5C,OAAO,OAAO,KAAK,CAAC,CAAC,SAAS,WAAW,KAAK,UAAU,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC;GACpF,OAAO,OAAO,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,YAAY,KAAK,UAAU,QAAQ,IAAI,OAAO,IAAI,MAAM,CAAC;GAC7F,OAAO,OAAO,OAAO,CAAC,CAAC,SAAS,WAAW,KAAK,UAAU,QAAQ,IAAI,OAAO,EAAE,CAAC;GAGhF,aAAa,KAAK,YAAY;GAC9B,KAAK,eAAe,iBAAiB,KAAK,KAAK,GAAG,aAAa;EACjE,GAEA;GACE,OAAO;GACP,QAAQ;EACV,CACF;EAEA,aAAa;GACX,aAAa,KAAK,YAAY;GAC9B,aAAa;EACf;CACF;CAEA,UAAmC;EACjC,KAAK,SAAS,KAAA;CAChB;CAEA,OAAa;EACX,IAAI,CAAC,KAAK,QACR;EAEF,KAAK,eAAe,KAAK,UAAU,MAAM,CAAC;EAC1C,KAAK,UAAU,MAAM;CACvB;AACF;;;;;;;;;;;AC7DA,IAAa,mBAAmB,WAA2B;CACzD,MAAM,CAAC,WAAW,SAAS,IAAI,mBAAmB,CAAC;CACnD,MAAM,CAAC,GAAG,eAAe,SAAS,CAAC,CAAC;CACpC,eACE,OAAO,eAAe;EACpB,IAAI,CAAC,QACH;EAGF,IAAI,OAAO,WAAW,OAAO,eAAe;GAC1C,IAAI,KAAK,kBAAkB,EAAE,QAAQ,OAAO,OAAO,GAAA;IAAA,YAAA;IAAA,GAAA;IAAA,GAAA;IAAA,GAAA,KAAA;GAAA,CAAC;GACpD;EACF;EAEA,MAAM,WAAW,IAAI,eAAe,QAAQ,CAAC,SAAS,CAAC;EACvD,MAAM,QAAQ,KAAK,QAAQ;EAC3B,IAAI,WAAW,OAAO,SAAS;GAC7B,QAAa,MAAM;GACnB;EACF;EAEA,YAAY,CAAC,CAAC;EAEd,aAAa;GAEX,QAAQ,KAAK;GACb,QAAa,MAAM;EACrB;CACF,GACA,CAAC,MAAM,CACT;CAEA,OAAO;AACT"}

package/dist/lib/index.mjs

@@ -0,0 +1,4 @@
+import { a as Settings_exports, r as Tldraw_exports, t as TldrawCapabilities_exports } from "./chunk-types.mjs";
+import { t as meta } from "./chunk-meta.mjs";
+import { t as model_exports } from "./model.mjs";
+export { Settings_exports as Settings, Tldraw_exports as Tldraw, TldrawCapabilities_exports as TldrawCapabilities, model_exports as TldrawModel, meta };

package/dist/lib/meta.mjs

@@ -0,0 +1,2 @@
+import { t as meta } from "./chunk-meta.mjs";
+export { meta };