@ue-too/board-vue-adapter 0.12.2 → 0.13.0

package/Test.vue.d.ts

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    test: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/board.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/index.js

@@ -1,90 +1,89 @@
-import { provide as d, inject as f, watch as p, shallowRef as _, onMounted as c, onUnmounted as v, computed as B, defineComponent as b, ref as h, createElementBlock as i, openBlock as s } from "vue";
-import { Board as u } from "@ue-too/board";
-const l = Symbol("BOARD");
-function y() {
-  d(l, new u());
+import { provide as p, inject as f, watch as _, shallowRef as v, onMounted as c, onUnmounted as B, computed as b, defineComponent as s, ref as h, createElementBlock as i, openBlock as u } from "vue";
+import { Board as l } from "@ue-too/board";
+const m = Symbol("BOARD");
+function F() {
+  p(m, new l());
 }
 function r() {
-  const o = f(l);
-  if (!o)
+  const n = f(m);
+  if (!n)
     throw new Error(
       "Board not found, are you using useBoard in a component that is not a child of a board provider?"
     );
-  return o;
+  return n;
 }
-function M(o) {
-  const n = r();
-  p(
-    () => o,
-    (e) => {
-      n.cameraMux = e;
+function S(n) {
+  const e = r();
+  _(
+    () => n,
+    (o) => {
+      e.cameraMux = o;
     },
     { immediate: !0 }
   );
 }
-function O(o) {
-  const n = r(), e = n.camera[o], t = _(e);
-  return n.camera.on(o === "position" ? "pan" : o === "zoomLevel" ? "zoom" : "rotate", (a, m) => {
-    t.value = m[o];
+function k(n) {
+  const e = r(), o = e.camera[n], t = v(o);
+  return e.camera.on(n === "position" ? "pan" : n === "zoomLevel" ? "zoom" : "rotate", (a, d) => {
+    t.value = d[n];
   }), t;
 }
-function w(o) {
-  let n = null;
-  const e = (t) => {
-    o?.(t), n = requestAnimationFrame(e);
+function w(n) {
+  let e = null;
+  const o = (t) => {
+    n?.(t), e = requestAnimationFrame(o);
   };
   c(() => {
-    n = requestAnimationFrame(e);
-  }), v(() => {
-    n !== null && cancelAnimationFrame(n);
+    e = requestAnimationFrame(o);
+  }), B(() => {
+    e !== null && cancelAnimationFrame(e);
   });
 }
-function x(o) {
-  const n = r(), e = B(() => (t) => {
-    n.step(t);
-    const a = n.context;
+function x(n) {
+  const e = r(), o = b(() => (t) => {
+    e.step(t);
+    const a = e.context;
     if (a == null) {
       console.warn("Canvas context not available");
       return;
     }
-    o?.(t, a);
+    n?.(t, a);
   });
   w((t) => {
-    e.value(t);
+    o.value(t);
   });
 }
-const R = /* @__PURE__ */ b({
+const y = /* @__PURE__ */ s({
   __name: "board",
-  setup(o) {
-    const n = h(null), e = new u();
+  setup(n) {
+    const e = h(null), o = new l();
     return c(() => {
-      n.value ? e.attach(n.value) : e.tearDown();
+      e.value ? o.attach(e.value) : o.tearDown();
     }), x((t, a) => {
-      e.step(t), a.fillStyle = "red", a.fillRect(0, 0, 100, 100);
-    }), (t, a) => (s(), i("canvas", {
+      o.step(t), a.fillStyle = "red", a.fillRect(0, 0, 100, 100);
+    }), (t, a) => (u(), i("canvas", {
       ref_key: "canvas",
-      ref: n
+      ref: e
     }, " Your browser does not support the canvas tag. ", 512));
   }
-}), A = (o, n) => {
-  const e = o.__vccOpts || o;
-  for (const [t, a] of n)
-    e[t] = a;
-  return e;
-}, C = {};
-function F(o, n) {
-  return s(), i("div", null, "Test");
-}
-const g = /* @__PURE__ */ A(C, [["render", F]]);
+}), M = /* @__PURE__ */ s({
+  __name: "Test",
+  props: {
+    test: {}
+  },
+  setup(n) {
+    return (e, o) => (u(), i("div", null, "Test 1"));
+  }
+});
 export {
-  l as BOARD_SYMBOL,
-  R as Board,
-  g as Test,
-  y as provideBoard,
+  m as BOARD_SYMBOL,
+  y as Board,
+  M as Test,
+  F as provideBoard,
   w as useAnimationFrame,
   x as useAnimationFrameWithBoard,
   r as useBoard,
-  O as useCameraState,
-  M as useCustomCameraMux
+  k as useCameraState,
+  S as useCustomCameraMux
 };
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/useBoard.ts","../src/board.vue","../src/Test.vue"],"sourcesContent":["import { provide, inject, watch, onMounted, onUnmounted, computed, type ShallowRef, shallowRef } from \"vue\";\nimport { Board, CameraMux, CameraState } from \"@ue-too/board\";\nimport { type Ref } from \"vue\";\n\nexport const BOARD_SYMBOL = Symbol(\"BOARD\");\n\nexport function provideBoard() {\n  provide(BOARD_SYMBOL, new Board());\n}\n\nexport function useBoard() {\n  const board = inject<Board>(BOARD_SYMBOL);\n  if (!board) {\n    throw new Error(\n      \"Board not found, are you using useBoard in a component that is not a child of a board provider?\"\n    );\n  }\n  return board;\n}\n\nexport function useCustomCameraMux(cameraMux: CameraMux) {\n  const board = useBoard();\n  watch(\n    () => cameraMux,\n    (newMux) => {\n      board.cameraMux = newMux;\n    },\n    { immediate: true }\n  );\n}\n\nexport function useCameraState<K extends keyof CameraState>(state: K): ShallowRef<CameraState[K]>{\n    const board = useBoard();\n    const initialState: CameraState[K] = board.camera[state];\n    const stateValue = shallowRef<CameraState[K]>(initialState);\n    board.camera.on(state === \"position\" ? \"pan\" : state === \"zoomLevel\" ? \"zoom\" : \"rotate\", (newState, cameraState) => {\n        stateValue.value = cameraState[state];\n    });\n    return stateValue as ShallowRef<CameraState[K]>;\n}\n\n\n/**\n * Hook to run a callback on every animation frame.\n * \n * @param callback - Function to call on each animation frame, receives the current timestamp\n */\nexport function useAnimationFrame(callback?: (timestamp: number) => void) {\n  let animationFrameId: number | null = null;\n\n  const step = (timestamp: number) => {\n    callback?.(timestamp);\n    animationFrameId = requestAnimationFrame(step);\n  };\n\n  onMounted(() => {\n    animationFrameId = requestAnimationFrame(step);\n  });\n\n  onUnmounted(() => {\n    if (animationFrameId !== null) {\n      cancelAnimationFrame(animationFrameId);\n    }\n  });\n}\n\n/**\n * Hook to run an animation loop integrated with the Board's step function.\n * \n * @param callback - Optional function to call after board.step(), receives timestamp and canvas context\n */\nexport function useAnimationFrameWithBoard(\n  callback?: (timestamp: number, ctx: CanvasRenderingContext2D) => void\n) {\n  const board = useBoard();\n\n  // Use computed to memoize the callback function (Vue's useCallback equivalent)\n  const animationCallback = computed(() => {\n    return (timestamp: number) => {\n      board.step(timestamp);\n      const ctx = board.context;\n      if (ctx == undefined) {\n        console.warn(\"Canvas context not available\");\n        return;\n      }\n      callback?.(timestamp, ctx);\n    };\n  });\n\n  useAnimationFrame((timestamp) => {\n    animationCallback.value(timestamp);\n  });\n}\n","<script setup lang=\"ts\">\nimport { ref, onMounted } from \"vue\";\nimport { useAnimationFrameWithBoard, useBoard } from \"./useBoard\";\nimport { Board } from \"@ue-too/board\";\n\nconst canvas = ref<HTMLCanvasElement | null>(null);\nconst board = new Board();\n\nonMounted(() => {\n  if (canvas.value) {\n    board.attach(canvas.value);\n  } else {\n    board.tearDown();\n  }\n});\n\nuseAnimationFrameWithBoard((timestamp, ctx) => {\n  board.step(timestamp);\n  ctx.fillStyle = \"red\";\n  ctx.fillRect(0, 0, 100, 100);\n});\n</script>\n\n<template>\n  <canvas ref=\"canvas\"> Your browser does not support the canvas tag. </canvas>\n</template>\n","<template>\n    <div>Test</div>\n</template>\n\n<script setup lang=\"ts\">\n</script>\n"],"names":["BOARD_SYMBOL","provideBoard","provide","Board","useBoard","board","inject","useCustomCameraMux","cameraMux","watch","newMux","useCameraState","state","initialState","stateValue","shallowRef","newState","cameraState","useAnimationFrame","callback","animationFrameId","step","timestamp","onMounted","onUnmounted","useAnimationFrameWithBoard","animationCallback","computed","ctx","canvas","ref","_createElementBlock","_openBlock"],"mappings":";;AAIO,MAAMA,IAAe,OAAO,OAAO;AAEnC,SAASC,IAAe;AAC7B,EAAAC,EAAQF,GAAc,IAAIG,GAAO;AACnC;AAEO,SAASC,IAAW;AACzB,QAAMC,IAAQC,EAAcN,CAAY;AACxC,MAAI,CAACK;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;AAEO,SAASE,EAAmBC,GAAsB;AACvD,QAAMH,IAAQD,EAAA;AACd,EAAAK;AAAA,IACE,MAAMD;AAAA,IACN,CAACE,MAAW;AACV,MAAAL,EAAM,YAAYK;AAAA,IACpB;AAAA,IACA,EAAE,WAAW,GAAA;AAAA,EAAK;AAEtB;AAEO,SAASC,EAA4CC,GAAqC;AAC7F,QAAMP,IAAQD,EAAA,GACRS,IAA+BR,EAAM,OAAOO,CAAK,GACjDE,IAAaC,EAA2BF,CAAY;AAC1D,SAAAR,EAAM,OAAO,GAAGO,MAAU,aAAa,QAAQA,MAAU,cAAc,SAAS,UAAU,CAACI,GAAUC,MAAgB;AACjH,IAAAH,EAAW,QAAQG,EAAYL,CAAK;AAAA,EACxC,CAAC,GACME;AACX;AAQO,SAASI,EAAkBC,GAAwC;AACxE,MAAIC,IAAkC;AAEtC,QAAMC,IAAO,CAACC,MAAsB;AAClC,IAAAH,IAAWG,CAAS,GACpBF,IAAmB,sBAAsBC,CAAI;AAAA,EAC/C;AAEA,EAAAE,EAAU,MAAM;AACd,IAAAH,IAAmB,sBAAsBC,CAAI;AAAA,EAC/C,CAAC,GAEDG,EAAY,MAAM;AAChB,IAAIJ,MAAqB,QACvB,qBAAqBA,CAAgB;AAAA,EAEzC,CAAC;AACH;AAOO,SAASK,EACdN,GACA;AACA,QAAMd,IAAQD,EAAA,GAGRsB,IAAoBC,EAAS,MAC1B,CAACL,MAAsB;AAC5B,IAAAjB,EAAM,KAAKiB,CAAS;AACpB,UAAMM,IAAMvB,EAAM;AAClB,QAAIuB,KAAO,MAAW;AACpB,cAAQ,KAAK,8BAA8B;AAC3C;AAAA,IACF;AACA,IAAAT,IAAWG,GAAWM,CAAG;AAAA,EAC3B,CACD;AAED,EAAAV,EAAkB,CAACI,MAAc;AAC/B,IAAAI,EAAkB,MAAMJ,CAAS;AAAA,EACnC,CAAC;AACH;;;;ACvFA,UAAMO,IAASC,EAA8B,IAAI,GAC3CzB,IAAQ,IAAIF,EAAA;AAElB,WAAAoB,EAAU,MAAM;AACd,MAAIM,EAAO,QACTxB,EAAM,OAAOwB,EAAO,KAAK,IAEzBxB,EAAM,SAAA;AAAA,IAEV,CAAC,GAEDoB,EAA2B,CAACH,GAAWM,MAAQ;AAC7C,MAAAvB,EAAM,KAAKiB,CAAS,GACpBM,EAAI,YAAY,OAChBA,EAAI,SAAS,GAAG,GAAG,KAAK,GAAG;AAAA,IAC7B,CAAC,mBAICG,EAA6E,UAAA;AAAA,eAAjE;AAAA,MAAJ,KAAIF;AAAA,IAAA,GAAS,mDAA+C,GAAA;AAAA;;;;;;;;ACvBlE,SAAAG,EAAA,GAAAD,EAAe,aAAV,MAAI;;;"}
+{"version":3,"file":"index.js","sources":["../src/useBoard.ts","../src/board.vue","../src/Test.vue"],"sourcesContent":["import { provide, inject, watch, onMounted, onUnmounted, computed, type ShallowRef, shallowRef } from \"vue\";\nimport { Board, CameraMux, CameraState } from \"@ue-too/board\";\nimport { type Ref } from \"vue\";\n\nexport const BOARD_SYMBOL = Symbol(\"BOARD\");\n\nexport function provideBoard() {\n  provide(BOARD_SYMBOL, new Board());\n}\n\nexport function useBoard() {\n  const board = inject<Board>(BOARD_SYMBOL);\n  if (!board) {\n    throw new Error(\n      \"Board not found, are you using useBoard in a component that is not a child of a board provider?\"\n    );\n  }\n  return board;\n}\n\nexport function useCustomCameraMux(cameraMux: CameraMux) {\n  const board = useBoard();\n  watch(\n    () => cameraMux,\n    (newMux) => {\n      board.cameraMux = newMux;\n    },\n    { immediate: true }\n  );\n}\n\nexport function useCameraState<K extends keyof CameraState>(state: K): ShallowRef<CameraState[K]>{\n    const board = useBoard();\n    const initialState: CameraState[K] = board.camera[state];\n    const stateValue = shallowRef<CameraState[K]>(initialState);\n    board.camera.on(state === \"position\" ? \"pan\" : state === \"zoomLevel\" ? \"zoom\" : \"rotate\", (newState, cameraState) => {\n        stateValue.value = cameraState[state];\n    });\n    return stateValue as ShallowRef<CameraState[K]>;\n}\n\n\n/**\n * Hook to run a callback on every animation frame.\n * \n * @param callback - Function to call on each animation frame, receives the current timestamp\n */\nexport function useAnimationFrame(callback?: (timestamp: number) => void) {\n  let animationFrameId: number | null = null;\n\n  const step = (timestamp: number) => {\n    callback?.(timestamp);\n    animationFrameId = requestAnimationFrame(step);\n  };\n\n  onMounted(() => {\n    animationFrameId = requestAnimationFrame(step);\n  });\n\n  onUnmounted(() => {\n    if (animationFrameId !== null) {\n      cancelAnimationFrame(animationFrameId);\n    }\n  });\n}\n\n/**\n * Hook to run an animation loop integrated with the Board's step function.\n * \n * @param callback - Optional function to call after board.step(), receives timestamp and canvas context\n */\nexport function useAnimationFrameWithBoard(\n  callback?: (timestamp: number, ctx: CanvasRenderingContext2D) => void\n) {\n  const board = useBoard();\n\n  // Use computed to memoize the callback function (Vue's useCallback equivalent)\n  const animationCallback = computed(() => {\n    return (timestamp: number) => {\n      board.step(timestamp);\n      const ctx = board.context;\n      if (ctx == undefined) {\n        console.warn(\"Canvas context not available\");\n        return;\n      }\n      callback?.(timestamp, ctx);\n    };\n  });\n\n  useAnimationFrame((timestamp) => {\n    animationCallback.value(timestamp);\n  });\n}\n","<script setup lang=\"ts\">\nimport { ref, onMounted } from \"vue\";\nimport { useAnimationFrameWithBoard, useBoard } from \"./useBoard\";\nimport { Board } from \"@ue-too/board\";\n\nconst canvas = ref<HTMLCanvasElement | null>(null);\nconst board = new Board();\n\nonMounted(() => {\n  if (canvas.value) {\n    board.attach(canvas.value);\n  } else {\n    board.tearDown();\n  }\n});\n\nuseAnimationFrameWithBoard((timestamp, ctx) => {\n  board.step(timestamp);\n  ctx.fillStyle = \"red\";\n  ctx.fillRect(0, 0, 100, 100);\n});\n</script>\n\n<template>\n  <canvas ref=\"canvas\"> Your browser does not support the canvas tag. </canvas>\n</template>\n","<template>\n    <div>Test 1</div>\n</template>\n\n<script setup lang=\"ts\">\n    defineProps<{\n        test: string;\n    }>();\n</script>\n"],"names":["BOARD_SYMBOL","provideBoard","provide","Board","useBoard","board","inject","useCustomCameraMux","cameraMux","watch","newMux","useCameraState","state","initialState","stateValue","shallowRef","newState","cameraState","useAnimationFrame","callback","animationFrameId","step","timestamp","onMounted","onUnmounted","useAnimationFrameWithBoard","animationCallback","computed","ctx","canvas","ref","_createElementBlock","_openBlock"],"mappings":";;AAIO,MAAMA,IAAe,OAAO,OAAO;AAEnC,SAASC,IAAe;AAC7B,EAAAC,EAAQF,GAAc,IAAIG,GAAO;AACnC;AAEO,SAASC,IAAW;AACzB,QAAMC,IAAQC,EAAcN,CAAY;AACxC,MAAI,CAACK;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;AAEO,SAASE,EAAmBC,GAAsB;AACvD,QAAMH,IAAQD,EAAA;AACd,EAAAK;AAAA,IACE,MAAMD;AAAA,IACN,CAACE,MAAW;AACV,MAAAL,EAAM,YAAYK;AAAA,IACpB;AAAA,IACA,EAAE,WAAW,GAAA;AAAA,EAAK;AAEtB;AAEO,SAASC,EAA4CC,GAAqC;AAC7F,QAAMP,IAAQD,EAAA,GACRS,IAA+BR,EAAM,OAAOO,CAAK,GACjDE,IAAaC,EAA2BF,CAAY;AAC1D,SAAAR,EAAM,OAAO,GAAGO,MAAU,aAAa,QAAQA,MAAU,cAAc,SAAS,UAAU,CAACI,GAAUC,MAAgB;AACjH,IAAAH,EAAW,QAAQG,EAAYL,CAAK;AAAA,EACxC,CAAC,GACME;AACX;AAQO,SAASI,EAAkBC,GAAwC;AACxE,MAAIC,IAAkC;AAEtC,QAAMC,IAAO,CAACC,MAAsB;AAClC,IAAAH,IAAWG,CAAS,GACpBF,IAAmB,sBAAsBC,CAAI;AAAA,EAC/C;AAEA,EAAAE,EAAU,MAAM;AACd,IAAAH,IAAmB,sBAAsBC,CAAI;AAAA,EAC/C,CAAC,GAEDG,EAAY,MAAM;AAChB,IAAIJ,MAAqB,QACvB,qBAAqBA,CAAgB;AAAA,EAEzC,CAAC;AACH;AAOO,SAASK,EACdN,GACA;AACA,QAAMd,IAAQD,EAAA,GAGRsB,IAAoBC,EAAS,MAC1B,CAACL,MAAsB;AAC5B,IAAAjB,EAAM,KAAKiB,CAAS;AACpB,UAAMM,IAAMvB,EAAM;AAClB,QAAIuB,KAAO,MAAW;AACpB,cAAQ,KAAK,8BAA8B;AAC3C;AAAA,IACF;AACA,IAAAT,IAAWG,GAAWM,CAAG;AAAA,EAC3B,CACD;AAED,EAAAV,EAAkB,CAACI,MAAc;AAC/B,IAAAI,EAAkB,MAAMJ,CAAS;AAAA,EACnC,CAAC;AACH;;;;ACvFA,UAAMO,IAASC,EAA8B,IAAI,GAC3CzB,IAAQ,IAAIF,EAAA;AAElB,WAAAoB,EAAU,MAAM;AACd,MAAIM,EAAO,QACTxB,EAAM,OAAOwB,EAAO,KAAK,IAEzBxB,EAAM,SAAA;AAAA,IAEV,CAAC,GAEDoB,EAA2B,CAACH,GAAWM,MAAQ;AAC7C,MAAAvB,EAAM,KAAKiB,CAAS,GACpBM,EAAI,YAAY,OAChBA,EAAI,SAAS,GAAG,GAAG,KAAK,GAAG;AAAA,IAC7B,CAAC,mBAICG,EAA6E,UAAA;AAAA,eAAjE;AAAA,MAAJ,KAAIF;AAAA,IAAA,GAAS,mDAA+C,GAAA;AAAA;;;;;;;sBCvBlEG,EAAA,GAAAD,EAAiB,aAAZ,QAAM;AAAA;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ue-too/board-vue-adapter",
   "type": "module",
-  "version": "0.12.2",
+  "version": "0.13.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,9 +26,9 @@
     "vue": "^3.5.25"
   },
   "dependencies": {
-    "@ue-too/board": "workspace:*"
+    "@ue-too/board": "^0.13.0"
   },
   "main": "./index.js",
   "types": "./index.d.ts",
   "module": "./index.js"
-}
+}