@ue-too/board-vue-adapter 0.14.0 → 0.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/index.js +6 -3
- package/index.js.map +1 -1
- package/package.json +2 -2
- package/useBoard.d.ts +2 -2
package/README.md
CHANGED
package/index.js
CHANGED
|
@@ -24,9 +24,12 @@ function S(n) {
|
|
|
24
24
|
}
|
|
25
25
|
function k(n) {
|
|
26
26
|
const e = r(), o = e.camera[n], t = v(o);
|
|
27
|
-
return e.camera.on(
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
return e.camera.on(
|
|
28
|
+
n === "position" ? "pan" : n === "zoomLevel" ? "zoom" : "rotate",
|
|
29
|
+
(a, d) => {
|
|
30
|
+
t.value = d[n];
|
|
31
|
+
}
|
|
32
|
+
), t;
|
|
30
33
|
}
|
|
31
34
|
function w(n) {
|
|
32
35
|
let e = null;
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/useBoard.ts","../src/board.vue","../src/Test.vue"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/useBoard.ts","../src/board.vue","../src/Test.vue"],"sourcesContent":["import { Board, CameraMux, CameraState } from '@ue-too/board';\nimport {\n type ShallowRef,\n computed,\n inject,\n onMounted,\n onUnmounted,\n provide,\n shallowRef,\n watch,\n} from 'vue';\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>(\n state: K\n): 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(\n state === 'position'\n ? 'pan'\n : state === 'zoomLevel'\n ? 'zoom'\n : 'rotate',\n (newState, cameraState) => {\n stateValue.value = cameraState[state];\n }\n );\n return stateValue as ShallowRef<CameraState[K]>;\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 { Board } from '@ue-too/board';\nimport { onMounted, ref } from 'vue';\n\nimport { useAnimationFrameWithBoard, useBoard } from './useBoard';\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\">\n Your browser does not support the canvas tag.\n </canvas>\n</template>\n","<template>\n <div>Test 1</div>\n</template>\n\n<script setup lang=\"ts\">\ndefineProps<{\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":";;AAaO,MAAMA,IAAe,OAAO,OAAO;AAEnC,SAASC,IAAe;AAC3B,EAAAC,EAAQF,GAAc,IAAIG,GAAO;AACrC;AAEO,SAASC,IAAW;AACvB,QAAMC,IAAQC,EAAcN,CAAY;AACxC,MAAI,CAACK;AACD,UAAM,IAAI;AAAA,MACN;AAAA,IAAA;AAGR,SAAOA;AACX;AAEO,SAASE,EAAmBC,GAAsB;AACrD,QAAMH,IAAQD,EAAA;AACd,EAAAK;AAAA,IACI,MAAMD;AAAA,IACN,CAAAE,MAAU;AACN,MAAAL,EAAM,YAAYK;AAAA,IACtB;AAAA,IACA,EAAE,WAAW,GAAA;AAAA,EAAK;AAE1B;AAEO,SAASC,EACZC,GAC0B;AAC1B,QAAMP,IAAQD,EAAA,GACRS,IAA+BR,EAAM,OAAOO,CAAK,GACjDE,IAAaC,EAA2BF,CAAY;AAC1D,SAAAR,EAAM,OAAO;AAAA,IACTO,MAAU,aACJ,QACAA,MAAU,cACR,SACA;AAAA,IACR,CAACI,GAAUC,MAAgB;AACvB,MAAAH,EAAW,QAAQG,EAAYL,CAAK;AAAA,IACxC;AAAA,EAAA,GAEGE;AACX;AAOO,SAASI,EAAkBC,GAAwC;AACtE,MAAIC,IAAkC;AAEtC,QAAMC,IAAO,CAACC,MAAsB;AAChC,IAAAH,IAAWG,CAAS,GACpBF,IAAmB,sBAAsBC,CAAI;AAAA,EACjD;AAEA,EAAAE,EAAU,MAAM;AACZ,IAAAH,IAAmB,sBAAsBC,CAAI;AAAA,EACjD,CAAC,GAEDG,EAAY,MAAM;AACd,IAAIJ,MAAqB,QACrB,qBAAqBA,CAAgB;AAAA,EAE7C,CAAC;AACL;AAOO,SAASK,EACZN,GACF;AACE,QAAMd,IAAQD,EAAA,GAGRsB,IAAoBC,EAAS,MACxB,CAACL,MAAsB;AAC1B,IAAAjB,EAAM,KAAKiB,CAAS;AACpB,UAAMM,IAAMvB,EAAM;AAClB,QAAIuB,KAAO,MAAW;AAClB,cAAQ,KAAK,8BAA8B;AAC3C;AAAA,IACJ;AACA,IAAAT,IAAWG,GAAWM,CAAG;AAAA,EAC7B,CACH;AAED,EAAAV,EAAkB,CAAAI,MAAa;AAC3B,IAAAI,EAAkB,MAAMJ,CAAS;AAAA,EACrC,CAAC;AACL;;;;ACvGA,UAAMO,IAASC,EAA8B,IAAI,GAC3CzB,IAAQ,IAAIF,EAAA;AAElB,WAAAoB,EAAU,MAAM;AACZ,MAAIM,EAAO,QACPxB,EAAM,OAAOwB,EAAO,KAAK,IAEzBxB,EAAM,SAAA;AAAA,IAEd,CAAC,GAEDoB,EAA2B,CAACH,GAAWM,MAAQ;AAC3C,MAAAvB,EAAM,KAAKiB,CAAS,GACpBM,EAAI,YAAY,OAChBA,EAAI,SAAS,GAAG,GAAG,KAAK,GAAG;AAAA,IAC/B,CAAC,mBAIGG,EAES,UAAA;AAAA,eAFG;AAAA,MAAJ,KAAIF;AAAA,IAAA,GAAS,mDAErB,GAAA;AAAA;;;;;;;sBC1BAG,EAAA,GAAAD,EAAiB,aAAZ,QAAM;AAAA;;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ue-too/board-vue-adapter",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.15.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"vue": "^3.5.25"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@ue-too/board": "^0.
|
|
29
|
+
"@ue-too/board": "^0.15.0"
|
|
30
30
|
},
|
|
31
31
|
"main": "./index.js",
|
|
32
32
|
"types": "./index.d.ts",
|
package/useBoard.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { Board, CameraMux, CameraState } from '@ue-too/board';
|
|
2
|
+
import { type ShallowRef } from 'vue';
|
|
3
3
|
export declare const BOARD_SYMBOL: unique symbol;
|
|
4
4
|
export declare function provideBoard(): void;
|
|
5
5
|
export declare function useBoard(): Board;
|