npm - @fitin/vue - Versions diffs - 0.1.0 → 0.1.1 - Mend

@fitin/vue 0.1.0 → 0.1.1

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.

Files changed (12) hide show

package/dist/index.es.js CHANGED Viewed

@@ -142,10 +142,14 @@ var S = ["data-scope"], C = /* @__PURE__ */ n({
 			class: i(r.class)
 		}, [u(e.$slots, "default")], 14, S));
 	}
-}), w = { install(e) {
+});
+//#endregion
+//#region src/index.ts
+function w(e) {
 	e.component("FitinCanvas", v), e.component("FitinContainer", C);
-} };
+}
+var T = { install: w };
 //#endregion
-export { v as FitinCanvas, C as FitinContainer, w as plugin, b as useFitin, x as useFitinState };
+export { v as FitinCanvas, C as FitinContainer, T as default, w as install, b as useFitin, x as useFitinState };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.es.js","names":[],"sources":["../src/components/keys.ts","../src/components/logging.ts","../src/components/fitin-canvas.vue","../src/components/fitin-canvas.vue","../src/components/hooks.ts","../src/components/fitin-container.vue","../src/components/fitin-container.vue","../src/index.ts"],"sourcesContent":["import { type InjectionKey } from \"vue\";\r\nimport type { Observable } from \"rxjs\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\n\r\nexport const FitinCanvasKey: InjectionKey<\r\n Observable<IResizeEvent \| undefined>\r\n> = Symbol(\"fitin-canvas\");\r\n\r\nexport const FitinContainerKey: InjectionKey<\r\n (\"affect-self\" \| \"affect-descendant\")[]\r\n> = Symbol(\"fitin-container\");\r\n","export function logE(message: string): void {\r\n console.error(\"[@fitin/vue]\", message);\r\n}\r\nexport function logW(message: string): void {\r\n console.warn(\"[@fitin/vue]\", message);\r\n}\r\n","<script setup lang=\"ts\">\r\nimport {\r\n computed,\r\n inject,\r\n provide,\r\n ref,\r\n watchEffect,\r\n type CSSProperties,\r\n} from \"vue\";\r\nimport { BehaviorSubject } from \"rxjs\";\r\nimport { Fitin, type Mode, type IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey } from \"./keys\";\r\nimport { logE } from \"./logging\";\r\n\r\n/*\r\n Vue SFC does not support TypeScript advanced types(e.g., Omit, Pick and Partial).\r\n * However, these are exactly the types that `FitinOptions` depends on.\r\n * Solution: declare the type from scratch (i.e. rewrite it explicitly without relying on utility types).\r\n /\r\ntype FitinCanvasProps = {\r\n designWidth: number; // physical design width of container\r\n designHeight: number; // physical design height of container\r\n mode?: Mode;\r\n minDesignWidth?: number; // minimum physical design width of container\r\n minDesignHeight?: number; // minimum physical design height of container\r\n wait?: number; // in ms\r\n computeScaleXY?: (\r\n designWidth: number,\r\n designHeight: number,\r\n scaleX: number,\r\n scaleY: number,\r\n ) => number;\r\n viewport?: HTMLElement \| \"parent\";\r\n center?: boolean;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\nconst props = defineProps<FitinCanvasProps>();\r\n\r\nconst canvasRef = ref<HTMLElement>();\r\n\r\nconst canvasStyle = computed<CSSProperties>(() =>\r\n props.center\r\n ? {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n transform: \"translate(-50%, -50%)\",\r\n overflow: \"hidden\"\r\n }\r\n : {\r\n position: \"relative\",\r\n overflow: \"hidden\"\r\n },\r\n);\r\n\r\nlet fitin: Fitin;\r\nlet subject = new BehaviorSubject<IResizeEvent \| undefined>(undefined);\r\nprovide(FitinCanvasKey, subject.asObservable());\r\nconst resizeObservable = inject(FitinCanvasKey);\r\n\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n logE(\"Nested fitin-canvas is forbidden\");\r\n return;\r\n }\r\n\r\n fitin = new Fitin(props);\r\n\r\n const handleResize = (event: IResizeEvent) => {\r\n if (event && canvasRef.value) {\r\n canvasRef.value.style.width = `${event.effectiveWidth}px`;\r\n canvasRef.value.style.height = `${event.effectiveHeight}px`;\r\n }\r\n subject.next(event);\r\n };\r\n\r\n const viewport =\r\n props.viewport === \"parent\"\r\n ? canvasRef.value?.parentElement\r\n : props.viewport;\r\n if (viewport) {\r\n fitin.subscribe(viewport, handleResize);\r\n } else {\r\n fitin.subscribe(handleResize);\r\n }\r\n\r\n onCleanup(() => {\r\n fitin.dispose();\r\n });\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n ref=\"canvasRef\"\r\n role=\"fitin-canvas\"\r\n :style=\"canvasStyle\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","<script setup lang=\"ts\">\r\nimport {\r\n computed,\r\n inject,\r\n provide,\r\n ref,\r\n watchEffect,\r\n type CSSProperties,\r\n} from \"vue\";\r\nimport { BehaviorSubject } from \"rxjs\";\r\nimport { Fitin, type Mode, type IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey } from \"./keys\";\r\nimport { logE } from \"./logging\";\r\n\r\n/\r\n Vue SFC does not support TypeScript advanced types(e.g., Omit, Pick and Partial).\r\n * However, these are exactly the types that `FitinOptions` depends on.\r\n * Solution: declare the type from scratch (i.e. rewrite it explicitly without relying on utility types).\r\n /\r\ntype FitinCanvasProps = {\r\n designWidth: number; // physical design width of container\r\n designHeight: number; // physical design height of container\r\n mode?: Mode;\r\n minDesignWidth?: number; // minimum physical design width of container\r\n minDesignHeight?: number; // minimum physical design height of container\r\n wait?: number; // in ms\r\n computeScaleXY?: (\r\n designWidth: number,\r\n designHeight: number,\r\n scaleX: number,\r\n scaleY: number,\r\n ) => number;\r\n viewport?: HTMLElement \| \"parent\";\r\n center?: boolean;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\nconst props = defineProps<FitinCanvasProps>();\r\n\r\nconst canvasRef = ref<HTMLElement>();\r\n\r\nconst canvasStyle = computed<CSSProperties>(() =>\r\n props.center\r\n ? {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n transform: \"translate(-50%, -50%)\",\r\n overflow: \"hidden\"\r\n }\r\n : {\r\n position: \"relative\",\r\n overflow: \"hidden\"\r\n },\r\n);\r\n\r\nlet fitin: Fitin;\r\nlet subject = new BehaviorSubject<IResizeEvent \| undefined>(undefined);\r\nprovide(FitinCanvasKey, subject.asObservable());\r\nconst resizeObservable = inject(FitinCanvasKey);\r\n\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n logE(\"Nested fitin-canvas is forbidden\");\r\n return;\r\n }\r\n\r\n fitin = new Fitin(props);\r\n\r\n const handleResize = (event: IResizeEvent) => {\r\n if (event && canvasRef.value) {\r\n canvasRef.value.style.width = `${event.effectiveWidth}px`;\r\n canvasRef.value.style.height = `${event.effectiveHeight}px`;\r\n }\r\n subject.next(event);\r\n };\r\n\r\n const viewport =\r\n props.viewport === \"parent\"\r\n ? canvasRef.value?.parentElement\r\n : props.viewport;\r\n if (viewport) {\r\n fitin.subscribe(viewport, handleResize);\r\n } else {\r\n fitin.subscribe(handleResize);\r\n }\r\n\r\n onCleanup(() => {\r\n fitin.dispose();\r\n });\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n ref=\"canvasRef\"\r\n role=\"fitin-canvas\"\r\n :style=\"canvasStyle\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","import { inject, provide, reactive, watchEffect } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey, FitinContainerKey } from \"./keys\";\r\nimport { logE, logW } from \"./logging\";\r\nimport type { Observable } from \"rxjs\";\r\n\r\nexport function provideFitinContainer(\r\n value: \"affect-self\" \| \"affect-descendant\",\r\n) {\r\n const paths = inject(FitinContainerKey) \|\| [];\r\n paths.push(value);\r\n provide(FitinContainerKey, paths);\r\n}\r\n\r\nexport function useFitin(\r\n resizeHandler?: (event: undefined \| IResizeEvent) => void,\r\n): undefined \| Observable<undefined \| IResizeEvent> {\r\n const resizeObservable = inject(FitinCanvasKey);\r\n if (resizeObservable) {\r\n const paths = inject(FitinContainerKey) \|\| [];\r\n if (paths.find((path) => path === \"affect-descendant\")) {\r\n logW(\"There's an ancestor fitin-container resizing all descendants\");\r\n }\r\n\r\n watchEffect((onCleanup) => {\r\n const subscription = resizeObservable.subscribe(resizeHandler);\r\n onCleanup(() => subscription.unsubscribe());\r\n });\r\n } else {\r\n logE(\"A fitin-container must be used within a fitin-canvas context\");\r\n }\r\n\r\n return resizeObservable;\r\n}\r\n\r\nexport function useFitinState() {\r\n const state = reactive<{\r\n scaleX: number;\r\n scaleY: number;\r\n scaleXY: number;\r\n effectiveWidth: undefined \| number;\r\n effectiveHeight: undefined \| number;\r\n }>({\r\n scaleX: 1,\r\n scaleY: 1,\r\n scaleXY: 1,\r\n effectiveWidth: undefined,\r\n effectiveHeight: undefined,\r\n });\r\n useFitin((event) => {\r\n if (event) {\r\n state.scaleX = event.scaleX;\r\n state.scaleY = event.scaleY;\r\n state.scaleXY = event.scaleXY;\r\n state.effectiveWidth = event.effectiveWidth;\r\n state.effectiveHeight = event.effectiveHeight;\r\n }\r\n });\r\n\r\n return state;\r\n}\r\n","<script setup lang=\"ts\">\r\nimport { ref, watchEffect, computed, type CSSProperties } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { provideFitinContainer, useFitin } from \"./hooks\";\r\n\r\ntype FitinContainerProps = {\r\n designWidth: number;\r\n designHeight: number;\r\n transformOriginX?: \"left\" \| \"center\" \| \"right\";\r\n transformOriginY?: \"top\" \| \"center\" \| \"bottom\";\r\n style?: CSSProperties;\r\n class?: string;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\n\r\nconst props = defineProps<FitinContainerProps>();\r\n\r\nconst affectScope = computed(() =>\r\n props.transformOriginX \|\| props.transformOriginY\r\n ? \"affect-descendant\"\r\n : \"affect-self\",\r\n);\r\n\r\nprovideFitinContainer(affectScope.value);\r\n\r\nconst fitinStyle = ref<CSSProperties>({});\r\n\r\nfunction adjustContainer(event: IResizeEvent, props: FitinContainerProps) {\r\n if (props.transformOriginX \|\| props.transformOriginY) {\r\n let transform: string;\r\n let transformOrigin: string;\r\n if (props.transformOriginX && props.transformOriginY) {\r\n const res = event.transformXY(\r\n props.transformOriginX,\r\n props.transformOriginY,\r\n );\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else if (props.transformOriginX) {\r\n const res = event.transformX(props.transformOriginX);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else {\r\n const res = event.transformY(props.transformOriginY!);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n }\r\n fitinStyle.value = {\r\n position: \"absolute\",\r\n width: `${props.designWidth}px`,\r\n height: `${props.designHeight}px`,\r\n transform: transform,\r\n transformOrigin: transformOrigin,\r\n };\r\n } else {\r\n fitinStyle.value = {\r\n width: `${event.scaleX props.designWidth}px`,\r\n height: `${event.scaleY * props.designHeight}px`,\r\n };\r\n }\r\n}\r\n\r\nconst resizeObservable = useFitin();\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n const subscription = resizeObservable.subscribe(\r\n (event: IResizeEvent \| undefined) => {\r\n if (event) {\r\n adjustContainer(event, props);\r\n }\r\n },\r\n );\r\n onCleanup(() => subscription.unsubscribe());\r\n }\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n role=\"fitin-container\"\r\n :data-scope=\"affectScope\"\r\n :style=\"[props.style, fitinStyle]\"\r\n :class=\"props.class\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","<script setup lang=\"ts\">\r\nimport { ref, watchEffect, computed, type CSSProperties } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { provideFitinContainer, useFitin } from \"./hooks\";\r\n\r\ntype FitinContainerProps = {\r\n designWidth: number;\r\n designHeight: number;\r\n transformOriginX?: \"left\" \| \"center\" \| \"right\";\r\n transformOriginY?: \"top\" \| \"center\" \| \"bottom\";\r\n style?: CSSProperties;\r\n class?: string;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\n\r\nconst props = defineProps<FitinContainerProps>();\r\n\r\nconst affectScope = computed(() =>\r\n props.transformOriginX \|\| props.transformOriginY\r\n ? \"affect-descendant\"\r\n : \"affect-self\",\r\n);\r\n\r\nprovideFitinContainer(affectScope.value);\r\n\r\nconst fitinStyle = ref<CSSProperties>({});\r\n\r\nfunction adjustContainer(event: IResizeEvent, props: FitinContainerProps) {\r\n if (props.transformOriginX \|\| props.transformOriginY) {\r\n let transform: string;\r\n let transformOrigin: string;\r\n if (props.transformOriginX && props.transformOriginY) {\r\n const res = event.transformXY(\r\n props.transformOriginX,\r\n props.transformOriginY,\r\n );\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else if (props.transformOriginX) {\r\n const res = event.transformX(props.transformOriginX);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else {\r\n const res = event.transformY(props.transformOriginY!);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n }\r\n fitinStyle.value = {\r\n position: \"absolute\",\r\n width: `${props.designWidth}px`,\r\n height: `${props.designHeight}px`,\r\n transform: transform,\r\n transformOrigin: transformOrigin,\r\n };\r\n } else {\r\n fitinStyle.value = {\r\n width: `${event.scaleX * props.designWidth}px`,\r\n height: `${event.scaleY * props.designHeight}px`,\r\n };\r\n }\r\n}\r\n\r\nconst resizeObservable = useFitin();\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n const subscription = resizeObservable.subscribe(\r\n (event: IResizeEvent \| undefined) => {\r\n if (event) {\r\n adjustContainer(event, props);\r\n }\r\n },\r\n );\r\n onCleanup(() => subscription.unsubscribe());\r\n }\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n role=\"fitin-container\"\r\n :data-scope=\"affectScope\"\r\n :style=\"[props.style, fitinStyle]\"\r\n :class=\"props.class\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","import type { App, Plugin } from \"vue\";\r\nimport FitinCanvas from \"./components/fitin-canvas.vue\";\r\nimport FitinContainer from \"./components/fitin-container.vue\";\r\nexport { useFitin, useFitinState } from \"./components/hooks\";\r\n\r\nexport { FitinCanvas, FitinContainer };\r\nexport const plugin: Plugin = {\r\n install(app: App) {\r\n app.component(\"FitinCanvas\", FitinCanvas);\r\n app.component(\"FitinContainer\", FitinContainer);\r\n },\r\n};\r\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.es.js","names":[],"sources":["../src/components/keys.ts","../src/components/logging.ts","../src/components/fitin-canvas.vue","../src/components/fitin-canvas.vue","../src/components/hooks.ts","../src/components/fitin-container.vue","../src/components/fitin-container.vue","../src/index.ts"],"sourcesContent":["import { type InjectionKey } from \"vue\";\r\nimport type { Observable } from \"rxjs\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\n\r\nexport const FitinCanvasKey: InjectionKey<\r\n Observable<IResizeEvent \| undefined>\r\n> = Symbol(\"fitin-canvas\");\r\n\r\nexport const FitinContainerKey: InjectionKey<\r\n (\"affect-self\" \| \"affect-descendant\")[]\r\n> = Symbol(\"fitin-container\");\r\n","export function logE(message: string): void {\r\n console.error(\"[@fitin/vue]\", message);\r\n}\r\nexport function logW(message: string): void {\r\n console.warn(\"[@fitin/vue]\", message);\r\n}\r\n","<script setup lang=\"ts\">\r\nimport {\r\n computed,\r\n inject,\r\n provide,\r\n ref,\r\n watchEffect,\r\n type CSSProperties,\r\n} from \"vue\";\r\nimport { BehaviorSubject } from \"rxjs\";\r\nimport { Fitin, type Mode, type IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey } from \"./keys\";\r\nimport { logE } from \"./logging\";\r\n\r\n/*\r\n Vue SFC does not support TypeScript advanced types(e.g., Omit, Pick and Partial).\r\n * However, these are exactly the types that `FitinOptions` depends on.\r\n * Solution: declare the type from scratch (i.e. rewrite it explicitly without relying on utility types).\r\n /\r\ntype FitinCanvasProps = {\r\n designWidth: number; // physical design width of container\r\n designHeight: number; // physical design height of container\r\n mode?: Mode;\r\n minDesignWidth?: number; // minimum physical design width of container\r\n minDesignHeight?: number; // minimum physical design height of container\r\n wait?: number; // in ms\r\n computeScaleXY?: (\r\n designWidth: number,\r\n designHeight: number,\r\n scaleX: number,\r\n scaleY: number,\r\n ) => number;\r\n viewport?: HTMLElement \| \"parent\";\r\n center?: boolean;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\nconst props = defineProps<FitinCanvasProps>();\r\n\r\nconst canvasRef = ref<HTMLElement>();\r\n\r\nconst canvasStyle = computed<CSSProperties>(() =>\r\n props.center\r\n ? {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n transform: \"translate(-50%, -50%)\",\r\n overflow: \"hidden\"\r\n }\r\n : {\r\n position: \"relative\",\r\n overflow: \"hidden\"\r\n },\r\n);\r\n\r\nlet fitin: Fitin;\r\nlet subject = new BehaviorSubject<IResizeEvent \| undefined>(undefined);\r\nprovide(FitinCanvasKey, subject.asObservable());\r\nconst resizeObservable = inject(FitinCanvasKey);\r\n\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n logE(\"Nested fitin-canvas is forbidden\");\r\n return;\r\n }\r\n\r\n fitin = new Fitin(props);\r\n\r\n const handleResize = (event: IResizeEvent) => {\r\n if (event && canvasRef.value) {\r\n canvasRef.value.style.width = `${event.effectiveWidth}px`;\r\n canvasRef.value.style.height = `${event.effectiveHeight}px`;\r\n }\r\n subject.next(event);\r\n };\r\n\r\n const viewport =\r\n props.viewport === \"parent\"\r\n ? canvasRef.value?.parentElement\r\n : props.viewport;\r\n if (viewport) {\r\n fitin.subscribe(viewport, handleResize);\r\n } else {\r\n fitin.subscribe(handleResize);\r\n }\r\n\r\n onCleanup(() => {\r\n fitin.dispose();\r\n });\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n ref=\"canvasRef\"\r\n role=\"fitin-canvas\"\r\n :style=\"canvasStyle\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","<script setup lang=\"ts\">\r\nimport {\r\n computed,\r\n inject,\r\n provide,\r\n ref,\r\n watchEffect,\r\n type CSSProperties,\r\n} from \"vue\";\r\nimport { BehaviorSubject } from \"rxjs\";\r\nimport { Fitin, type Mode, type IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey } from \"./keys\";\r\nimport { logE } from \"./logging\";\r\n\r\n/\r\n Vue SFC does not support TypeScript advanced types(e.g., Omit, Pick and Partial).\r\n * However, these are exactly the types that `FitinOptions` depends on.\r\n * Solution: declare the type from scratch (i.e. rewrite it explicitly without relying on utility types).\r\n /\r\ntype FitinCanvasProps = {\r\n designWidth: number; // physical design width of container\r\n designHeight: number; // physical design height of container\r\n mode?: Mode;\r\n minDesignWidth?: number; // minimum physical design width of container\r\n minDesignHeight?: number; // minimum physical design height of container\r\n wait?: number; // in ms\r\n computeScaleXY?: (\r\n designWidth: number,\r\n designHeight: number,\r\n scaleX: number,\r\n scaleY: number,\r\n ) => number;\r\n viewport?: HTMLElement \| \"parent\";\r\n center?: boolean;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\nconst props = defineProps<FitinCanvasProps>();\r\n\r\nconst canvasRef = ref<HTMLElement>();\r\n\r\nconst canvasStyle = computed<CSSProperties>(() =>\r\n props.center\r\n ? {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n transform: \"translate(-50%, -50%)\",\r\n overflow: \"hidden\"\r\n }\r\n : {\r\n position: \"relative\",\r\n overflow: \"hidden\"\r\n },\r\n);\r\n\r\nlet fitin: Fitin;\r\nlet subject = new BehaviorSubject<IResizeEvent \| undefined>(undefined);\r\nprovide(FitinCanvasKey, subject.asObservable());\r\nconst resizeObservable = inject(FitinCanvasKey);\r\n\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n logE(\"Nested fitin-canvas is forbidden\");\r\n return;\r\n }\r\n\r\n fitin = new Fitin(props);\r\n\r\n const handleResize = (event: IResizeEvent) => {\r\n if (event && canvasRef.value) {\r\n canvasRef.value.style.width = `${event.effectiveWidth}px`;\r\n canvasRef.value.style.height = `${event.effectiveHeight}px`;\r\n }\r\n subject.next(event);\r\n };\r\n\r\n const viewport =\r\n props.viewport === \"parent\"\r\n ? canvasRef.value?.parentElement\r\n : props.viewport;\r\n if (viewport) {\r\n fitin.subscribe(viewport, handleResize);\r\n } else {\r\n fitin.subscribe(handleResize);\r\n }\r\n\r\n onCleanup(() => {\r\n fitin.dispose();\r\n });\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n ref=\"canvasRef\"\r\n role=\"fitin-canvas\"\r\n :style=\"canvasStyle\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","import { inject, provide, reactive, watchEffect } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey, FitinContainerKey } from \"./keys\";\r\nimport { logE, logW } from \"./logging\";\r\nimport type { Observable } from \"rxjs\";\r\n\r\nexport function provideFitinContainer(\r\n value: \"affect-self\" \| \"affect-descendant\",\r\n) {\r\n const paths = inject(FitinContainerKey) \|\| [];\r\n paths.push(value);\r\n provide(FitinContainerKey, paths);\r\n}\r\n\r\nexport function useFitin(\r\n resizeHandler?: (event: undefined \| IResizeEvent) => void,\r\n): undefined \| Observable<undefined \| IResizeEvent> {\r\n const resizeObservable = inject(FitinCanvasKey);\r\n if (resizeObservable) {\r\n const paths = inject(FitinContainerKey) \|\| [];\r\n if (paths.find((path) => path === \"affect-descendant\")) {\r\n logW(\"There's an ancestor fitin-container resizing all descendants\");\r\n }\r\n\r\n watchEffect((onCleanup) => {\r\n const subscription = resizeObservable.subscribe(resizeHandler);\r\n onCleanup(() => subscription.unsubscribe());\r\n });\r\n } else {\r\n logE(\"A fitin-container must be used within a fitin-canvas context\");\r\n }\r\n\r\n return resizeObservable;\r\n}\r\n\r\nexport function useFitinState() {\r\n const state = reactive<{\r\n scaleX: number;\r\n scaleY: number;\r\n scaleXY: number;\r\n effectiveWidth: undefined \| number;\r\n effectiveHeight: undefined \| number;\r\n }>({\r\n scaleX: 1,\r\n scaleY: 1,\r\n scaleXY: 1,\r\n effectiveWidth: undefined,\r\n effectiveHeight: undefined,\r\n });\r\n useFitin((event) => {\r\n if (event) {\r\n state.scaleX = event.scaleX;\r\n state.scaleY = event.scaleY;\r\n state.scaleXY = event.scaleXY;\r\n state.effectiveWidth = event.effectiveWidth;\r\n state.effectiveHeight = event.effectiveHeight;\r\n }\r\n });\r\n\r\n return state;\r\n}\r\n","<script setup lang=\"ts\">\r\nimport { ref, watchEffect, computed, type CSSProperties } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { provideFitinContainer, useFitin } from \"./hooks\";\r\n\r\ntype FitinContainerProps = {\r\n designWidth: number;\r\n designHeight: number;\r\n transformOriginX?: \"left\" \| \"center\" \| \"right\";\r\n transformOriginY?: \"top\" \| \"center\" \| \"bottom\";\r\n style?: CSSProperties;\r\n class?: string;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\n\r\nconst props = defineProps<FitinContainerProps>();\r\n\r\nconst affectScope = computed(() =>\r\n props.transformOriginX \|\| props.transformOriginY\r\n ? \"affect-descendant\"\r\n : \"affect-self\",\r\n);\r\n\r\nprovideFitinContainer(affectScope.value);\r\n\r\nconst fitinStyle = ref<CSSProperties>({});\r\n\r\nfunction adjustContainer(event: IResizeEvent, props: FitinContainerProps) {\r\n if (props.transformOriginX \|\| props.transformOriginY) {\r\n let transform: string;\r\n let transformOrigin: string;\r\n if (props.transformOriginX && props.transformOriginY) {\r\n const res = event.transformXY(\r\n props.transformOriginX,\r\n props.transformOriginY,\r\n );\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else if (props.transformOriginX) {\r\n const res = event.transformX(props.transformOriginX);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else {\r\n const res = event.transformY(props.transformOriginY!);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n }\r\n fitinStyle.value = {\r\n position: \"absolute\",\r\n width: `${props.designWidth}px`,\r\n height: `${props.designHeight}px`,\r\n transform: transform,\r\n transformOrigin: transformOrigin,\r\n };\r\n } else {\r\n fitinStyle.value = {\r\n width: `${event.scaleX props.designWidth}px`,\r\n height: `${event.scaleY * props.designHeight}px`,\r\n };\r\n }\r\n}\r\n\r\nconst resizeObservable = useFitin();\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n const subscription = resizeObservable.subscribe(\r\n (event: IResizeEvent \| undefined) => {\r\n if (event) {\r\n adjustContainer(event, props);\r\n }\r\n },\r\n );\r\n onCleanup(() => subscription.unsubscribe());\r\n }\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n role=\"fitin-container\"\r\n :data-scope=\"affectScope\"\r\n :style=\"[props.style, fitinStyle]\"\r\n :class=\"props.class\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","<script setup lang=\"ts\">\r\nimport { ref, watchEffect, computed, type CSSProperties } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { provideFitinContainer, useFitin } from \"./hooks\";\r\n\r\ntype FitinContainerProps = {\r\n designWidth: number;\r\n designHeight: number;\r\n transformOriginX?: \"left\" \| \"center\" \| \"right\";\r\n transformOriginY?: \"top\" \| \"center\" \| \"bottom\";\r\n style?: CSSProperties;\r\n class?: string;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\n\r\nconst props = defineProps<FitinContainerProps>();\r\n\r\nconst affectScope = computed(() =>\r\n props.transformOriginX \|\| props.transformOriginY\r\n ? \"affect-descendant\"\r\n : \"affect-self\",\r\n);\r\n\r\nprovideFitinContainer(affectScope.value);\r\n\r\nconst fitinStyle = ref<CSSProperties>({});\r\n\r\nfunction adjustContainer(event: IResizeEvent, props: FitinContainerProps) {\r\n if (props.transformOriginX \|\| props.transformOriginY) {\r\n let transform: string;\r\n let transformOrigin: string;\r\n if (props.transformOriginX && props.transformOriginY) {\r\n const res = event.transformXY(\r\n props.transformOriginX,\r\n props.transformOriginY,\r\n );\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else if (props.transformOriginX) {\r\n const res = event.transformX(props.transformOriginX);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else {\r\n const res = event.transformY(props.transformOriginY!);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n }\r\n fitinStyle.value = {\r\n position: \"absolute\",\r\n width: `${props.designWidth}px`,\r\n height: `${props.designHeight}px`,\r\n transform: transform,\r\n transformOrigin: transformOrigin,\r\n };\r\n } else {\r\n fitinStyle.value = {\r\n width: `${event.scaleX * props.designWidth}px`,\r\n height: `${event.scaleY * props.designHeight}px`,\r\n };\r\n }\r\n}\r\n\r\nconst resizeObservable = useFitin();\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n const subscription = resizeObservable.subscribe(\r\n (event: IResizeEvent \| undefined) => {\r\n if (event) {\r\n adjustContainer(event, props);\r\n }\r\n },\r\n );\r\n onCleanup(() => subscription.unsubscribe());\r\n }\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n role=\"fitin-container\"\r\n :data-scope=\"affectScope\"\r\n :style=\"[props.style, fitinStyle]\"\r\n :class=\"props.class\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","import type { App, Plugin } from \"vue\";\r\nimport FitinCanvas from \"./components/fitin-canvas.vue\";\r\nimport FitinContainer from \"./components/fitin-container.vue\";\r\nexport { useFitin, useFitinState } from \"./components/hooks\";\r\nimport \"./types.ts\";\r\n\r\nexport { FitinCanvas, FitinContainer };\r\nexport function install(app: App) {\r\n app.component(\"FitinCanvas\", FitinCanvas);\r\n app.component(\"FitinContainer\", FitinContainer);\r\n}\r\nexport default { install } as Plugin;\r\n"],"mappings":"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"}

package/dist/index.umd.js CHANGED Viewed

@@ -1,2 +1,2 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("rxjs"),require("@fitin/core")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`rxjs`,`@fitin/core`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Fitin={},e.Vue,e.rxjs,e.FitinCore))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=Symbol(`fitin-canvas`),a=Symbol(`fitin-container`);function o(e){console.error(`[@fitin/vue]`,e)}function s(e){console.warn(`[@fitin/vue]`,e)}var c=(0,t.defineComponent)({inheritAttrs:!1,__name:`fitin-canvas`,props:{designWidth:{},designHeight:{},mode:{},minDesignWidth:{},minDesignHeight:{},wait:{},computeScaleXY:{type:Function},viewport:{},center:{type:Boolean}},setup(e){let a=e,s=(0,t.ref)(),c=(0,t.computed)(()=>a.center?{position:`absolute`,top:`50%`,left:`50%`,transform:`translate(-50%, -50%)`,overflow:`hidden`}:{position:`relative`,overflow:`hidden`}),l,u=new n.BehaviorSubject(void 0);(0,t.provide)(i,u.asObservable());let d=(0,t.inject)(i);return(0,t.watchEffect)(e=>{if(d){o(`Nested fitin-canvas is forbidden`);return}l=new r.Fitin(a);let t=e=>{e&&s.value&&(s.value.style.width=`${e.effectiveWidth}px`,s.value.style.height=`${e.effectiveHeight}px`),u.next(e)},n=a.viewport===`parent`?s.value?.parentElement:a.viewport;n?l.subscribe(n,t):l.subscribe(t),e(()=>{l.dispose()})}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`section`,{ref_key:`canvasRef`,ref:s,role:`fitin-canvas`,style:(0,t.normalizeStyle)(c.value)},[(0,t.renderSlot)(e.$slots,`default`)],4))}});function l(e){let n=(0,t.inject)(a)||[];n.push(e),(0,t.provide)(a,n)}function u(e){let n=(0,t.inject)(i);return n?(((0,t.inject)(a)||[]).find(e=>e===`affect-descendant`)&&s(`There's an ancestor fitin-container resizing all descendants`),(0,t.watchEffect)(t=>{let r=n.subscribe(e);t(()=>r.unsubscribe())})):o(`A fitin-container must be used within a fitin-canvas context`),n}function d(){let e=(0,t.reactive)({scaleX:1,scaleY:1,scaleXY:1,effectiveWidth:void 0,effectiveHeight:void 0});return u(t=>{t&&(e.scaleX=t.scaleX,e.scaleY=t.scaleY,e.scaleXY=t.scaleXY,e.effectiveWidth=t.effectiveWidth,e.effectiveHeight=t.effectiveHeight)}),e}var f=[`data-scope`],p=(0,t.defineComponent)({inheritAttrs:!1,__name:`fitin-container`,props:{designWidth:{},designHeight:{},transformOriginX:{},transformOriginY:{},style:{},class:{}},setup(e){let n=e,r=(0,t.computed)(()=>n.transformOriginX||n.transformOriginY?`affect-descendant`:`affect-self`);l(r.value);let i=(0,t.ref)({});function a(e,t){if(t.transformOriginX||t.transformOriginY){let n,r;if(t.transformOriginX&&t.transformOriginY){let i=e.transformXY(t.transformOriginX,t.transformOriginY);n=i.transform,r=i.transformOrigin}else if(t.transformOriginX){let i=e.transformX(t.transformOriginX);n=i.transform,r=i.transformOrigin}else{let i=e.transformY(t.transformOriginY);n=i.transform,r=i.transformOrigin}i.value={position:`absolute`,width:`${t.designWidth}px`,height:`${t.designHeight}px`,transform:n,transformOrigin:r}}else i.value={width:`${e.scaleX*t.designWidth}px`,height:`${e.scaleY*t.designHeight}px`}}let o=u();return(0,t.watchEffect)(e=>{if(o){let t=o.subscribe(e=>{e&&a(e,n)});e(()=>t.unsubscribe())}}),(e,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`section`,{role:`fitin-container`,"data-scope":r.value,style:(0,t.normalizeStyle)([n.style,i.value]),class:(0,t.normalizeClass)(n.class)},[(0,t.renderSlot)(e.$slots,`default`)],14,f))}});e.FitinCanvas=c,e.FitinContainer=p,e.plugin={install(e){e.component(`FitinCanvas`,c),e.component(`FitinContainer`,p)}},e.useFitin=u,e.useFitinState=d});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("rxjs"),require("@fitin/core")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`rxjs`,`@fitin/core`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Fitin={},e.Vue,e.rxjs,e.FitinCore))})(this,function(e,t,n,r){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var i=Symbol(`fitin-canvas`),a=Symbol(`fitin-container`);function o(e){console.error(`[@fitin/vue]`,e)}function s(e){console.warn(`[@fitin/vue]`,e)}var c=(0,t.defineComponent)({inheritAttrs:!1,__name:`fitin-canvas`,props:{designWidth:{},designHeight:{},mode:{},minDesignWidth:{},minDesignHeight:{},wait:{},computeScaleXY:{type:Function},viewport:{},center:{type:Boolean}},setup(e){let a=e,s=(0,t.ref)(),c=(0,t.computed)(()=>a.center?{position:`absolute`,top:`50%`,left:`50%`,transform:`translate(-50%, -50%)`,overflow:`hidden`}:{position:`relative`,overflow:`hidden`}),l,u=new n.BehaviorSubject(void 0);(0,t.provide)(i,u.asObservable());let d=(0,t.inject)(i);return(0,t.watchEffect)(e=>{if(d){o(`Nested fitin-canvas is forbidden`);return}l=new r.Fitin(a);let t=e=>{e&&s.value&&(s.value.style.width=`${e.effectiveWidth}px`,s.value.style.height=`${e.effectiveHeight}px`),u.next(e)},n=a.viewport===`parent`?s.value?.parentElement:a.viewport;n?l.subscribe(n,t):l.subscribe(t),e(()=>{l.dispose()})}),(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(`section`,{ref_key:`canvasRef`,ref:s,role:`fitin-canvas`,style:(0,t.normalizeStyle)(c.value)},[(0,t.renderSlot)(e.$slots,`default`)],4))}});function l(e){let n=(0,t.inject)(a)||[];n.push(e),(0,t.provide)(a,n)}function u(e){let n=(0,t.inject)(i);return n?(((0,t.inject)(a)||[]).find(e=>e===`affect-descendant`)&&s(`There's an ancestor fitin-container resizing all descendants`),(0,t.watchEffect)(t=>{let r=n.subscribe(e);t(()=>r.unsubscribe())})):o(`A fitin-container must be used within a fitin-canvas context`),n}function d(){let e=(0,t.reactive)({scaleX:1,scaleY:1,scaleXY:1,effectiveWidth:void 0,effectiveHeight:void 0});return u(t=>{t&&(e.scaleX=t.scaleX,e.scaleY=t.scaleY,e.scaleXY=t.scaleXY,e.effectiveWidth=t.effectiveWidth,e.effectiveHeight=t.effectiveHeight)}),e}var f=[`data-scope`],p=(0,t.defineComponent)({inheritAttrs:!1,__name:`fitin-container`,props:{designWidth:{},designHeight:{},transformOriginX:{},transformOriginY:{},style:{},class:{}},setup(e){let n=e,r=(0,t.computed)(()=>n.transformOriginX||n.transformOriginY?`affect-descendant`:`affect-self`);l(r.value);let i=(0,t.ref)({});function a(e,t){if(t.transformOriginX||t.transformOriginY){let n,r;if(t.transformOriginX&&t.transformOriginY){let i=e.transformXY(t.transformOriginX,t.transformOriginY);n=i.transform,r=i.transformOrigin}else if(t.transformOriginX){let i=e.transformX(t.transformOriginX);n=i.transform,r=i.transformOrigin}else{let i=e.transformY(t.transformOriginY);n=i.transform,r=i.transformOrigin}i.value={position:`absolute`,width:`${t.designWidth}px`,height:`${t.designHeight}px`,transform:n,transformOrigin:r}}else i.value={width:`${e.scaleX*t.designWidth}px`,height:`${e.scaleY*t.designHeight}px`}}let o=u();return(0,t.watchEffect)(e=>{if(o){let t=o.subscribe(e=>{e&&a(e,n)});e(()=>t.unsubscribe())}}),(e,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`section`,{role:`fitin-container`,"data-scope":r.value,style:(0,t.normalizeStyle)([n.style,i.value]),class:(0,t.normalizeClass)(n.class)},[(0,t.renderSlot)(e.$slots,`default`)],14,f))}});function m(e){e.component(`FitinCanvas`,c),e.component(`FitinContainer`,p)}var h={install:m};e.FitinCanvas=c,e.FitinContainer=p,e.default=h,e.install=m,e.useFitin=u,e.useFitinState=d});
 //# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.umd.js","names":[],"sources":["../src/components/keys.ts","../src/components/logging.ts","../src/components/fitin-canvas.vue","../src/components/fitin-canvas.vue","../src/components/hooks.ts","../src/components/fitin-container.vue","../src/components/fitin-container.vue","../src/index.ts"],"sourcesContent":["import { type InjectionKey } from \"vue\";\r\nimport type { Observable } from \"rxjs\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\n\r\nexport const FitinCanvasKey: InjectionKey<\r\n Observable<IResizeEvent \| undefined>\r\n> = Symbol(\"fitin-canvas\");\r\n\r\nexport const FitinContainerKey: InjectionKey<\r\n (\"affect-self\" \| \"affect-descendant\")[]\r\n> = Symbol(\"fitin-container\");\r\n","export function logE(message: string): void {\r\n console.error(\"[@fitin/vue]\", message);\r\n}\r\nexport function logW(message: string): void {\r\n console.warn(\"[@fitin/vue]\", message);\r\n}\r\n","<script setup lang=\"ts\">\r\nimport {\r\n computed,\r\n inject,\r\n provide,\r\n ref,\r\n watchEffect,\r\n type CSSProperties,\r\n} from \"vue\";\r\nimport { BehaviorSubject } from \"rxjs\";\r\nimport { Fitin, type Mode, type IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey } from \"./keys\";\r\nimport { logE } from \"./logging\";\r\n\r\n/*\r\n Vue SFC does not support TypeScript advanced types(e.g., Omit, Pick and Partial).\r\n * However, these are exactly the types that `FitinOptions` depends on.\r\n * Solution: declare the type from scratch (i.e. rewrite it explicitly without relying on utility types).\r\n /\r\ntype FitinCanvasProps = {\r\n designWidth: number; // physical design width of container\r\n designHeight: number; // physical design height of container\r\n mode?: Mode;\r\n minDesignWidth?: number; // minimum physical design width of container\r\n minDesignHeight?: number; // minimum physical design height of container\r\n wait?: number; // in ms\r\n computeScaleXY?: (\r\n designWidth: number,\r\n designHeight: number,\r\n scaleX: number,\r\n scaleY: number,\r\n ) => number;\r\n viewport?: HTMLElement \| \"parent\";\r\n center?: boolean;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\nconst props = defineProps<FitinCanvasProps>();\r\n\r\nconst canvasRef = ref<HTMLElement>();\r\n\r\nconst canvasStyle = computed<CSSProperties>(() =>\r\n props.center\r\n ? {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n transform: \"translate(-50%, -50%)\",\r\n overflow: \"hidden\"\r\n }\r\n : {\r\n position: \"relative\",\r\n overflow: \"hidden\"\r\n },\r\n);\r\n\r\nlet fitin: Fitin;\r\nlet subject = new BehaviorSubject<IResizeEvent \| undefined>(undefined);\r\nprovide(FitinCanvasKey, subject.asObservable());\r\nconst resizeObservable = inject(FitinCanvasKey);\r\n\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n logE(\"Nested fitin-canvas is forbidden\");\r\n return;\r\n }\r\n\r\n fitin = new Fitin(props);\r\n\r\n const handleResize = (event: IResizeEvent) => {\r\n if (event && canvasRef.value) {\r\n canvasRef.value.style.width = `${event.effectiveWidth}px`;\r\n canvasRef.value.style.height = `${event.effectiveHeight}px`;\r\n }\r\n subject.next(event);\r\n };\r\n\r\n const viewport =\r\n props.viewport === \"parent\"\r\n ? canvasRef.value?.parentElement\r\n : props.viewport;\r\n if (viewport) {\r\n fitin.subscribe(viewport, handleResize);\r\n } else {\r\n fitin.subscribe(handleResize);\r\n }\r\n\r\n onCleanup(() => {\r\n fitin.dispose();\r\n });\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n ref=\"canvasRef\"\r\n role=\"fitin-canvas\"\r\n :style=\"canvasStyle\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","<script setup lang=\"ts\">\r\nimport {\r\n computed,\r\n inject,\r\n provide,\r\n ref,\r\n watchEffect,\r\n type CSSProperties,\r\n} from \"vue\";\r\nimport { BehaviorSubject } from \"rxjs\";\r\nimport { Fitin, type Mode, type IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey } from \"./keys\";\r\nimport { logE } from \"./logging\";\r\n\r\n/\r\n Vue SFC does not support TypeScript advanced types(e.g., Omit, Pick and Partial).\r\n * However, these are exactly the types that `FitinOptions` depends on.\r\n * Solution: declare the type from scratch (i.e. rewrite it explicitly without relying on utility types).\r\n /\r\ntype FitinCanvasProps = {\r\n designWidth: number; // physical design width of container\r\n designHeight: number; // physical design height of container\r\n mode?: Mode;\r\n minDesignWidth?: number; // minimum physical design width of container\r\n minDesignHeight?: number; // minimum physical design height of container\r\n wait?: number; // in ms\r\n computeScaleXY?: (\r\n designWidth: number,\r\n designHeight: number,\r\n scaleX: number,\r\n scaleY: number,\r\n ) => number;\r\n viewport?: HTMLElement \| \"parent\";\r\n center?: boolean;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\nconst props = defineProps<FitinCanvasProps>();\r\n\r\nconst canvasRef = ref<HTMLElement>();\r\n\r\nconst canvasStyle = computed<CSSProperties>(() =>\r\n props.center\r\n ? {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n transform: \"translate(-50%, -50%)\",\r\n overflow: \"hidden\"\r\n }\r\n : {\r\n position: \"relative\",\r\n overflow: \"hidden\"\r\n },\r\n);\r\n\r\nlet fitin: Fitin;\r\nlet subject = new BehaviorSubject<IResizeEvent \| undefined>(undefined);\r\nprovide(FitinCanvasKey, subject.asObservable());\r\nconst resizeObservable = inject(FitinCanvasKey);\r\n\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n logE(\"Nested fitin-canvas is forbidden\");\r\n return;\r\n }\r\n\r\n fitin = new Fitin(props);\r\n\r\n const handleResize = (event: IResizeEvent) => {\r\n if (event && canvasRef.value) {\r\n canvasRef.value.style.width = `${event.effectiveWidth}px`;\r\n canvasRef.value.style.height = `${event.effectiveHeight}px`;\r\n }\r\n subject.next(event);\r\n };\r\n\r\n const viewport =\r\n props.viewport === \"parent\"\r\n ? canvasRef.value?.parentElement\r\n : props.viewport;\r\n if (viewport) {\r\n fitin.subscribe(viewport, handleResize);\r\n } else {\r\n fitin.subscribe(handleResize);\r\n }\r\n\r\n onCleanup(() => {\r\n fitin.dispose();\r\n });\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n ref=\"canvasRef\"\r\n role=\"fitin-canvas\"\r\n :style=\"canvasStyle\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","import { inject, provide, reactive, watchEffect } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey, FitinContainerKey } from \"./keys\";\r\nimport { logE, logW } from \"./logging\";\r\nimport type { Observable } from \"rxjs\";\r\n\r\nexport function provideFitinContainer(\r\n value: \"affect-self\" \| \"affect-descendant\",\r\n) {\r\n const paths = inject(FitinContainerKey) \|\| [];\r\n paths.push(value);\r\n provide(FitinContainerKey, paths);\r\n}\r\n\r\nexport function useFitin(\r\n resizeHandler?: (event: undefined \| IResizeEvent) => void,\r\n): undefined \| Observable<undefined \| IResizeEvent> {\r\n const resizeObservable = inject(FitinCanvasKey);\r\n if (resizeObservable) {\r\n const paths = inject(FitinContainerKey) \|\| [];\r\n if (paths.find((path) => path === \"affect-descendant\")) {\r\n logW(\"There's an ancestor fitin-container resizing all descendants\");\r\n }\r\n\r\n watchEffect((onCleanup) => {\r\n const subscription = resizeObservable.subscribe(resizeHandler);\r\n onCleanup(() => subscription.unsubscribe());\r\n });\r\n } else {\r\n logE(\"A fitin-container must be used within a fitin-canvas context\");\r\n }\r\n\r\n return resizeObservable;\r\n}\r\n\r\nexport function useFitinState() {\r\n const state = reactive<{\r\n scaleX: number;\r\n scaleY: number;\r\n scaleXY: number;\r\n effectiveWidth: undefined \| number;\r\n effectiveHeight: undefined \| number;\r\n }>({\r\n scaleX: 1,\r\n scaleY: 1,\r\n scaleXY: 1,\r\n effectiveWidth: undefined,\r\n effectiveHeight: undefined,\r\n });\r\n useFitin((event) => {\r\n if (event) {\r\n state.scaleX = event.scaleX;\r\n state.scaleY = event.scaleY;\r\n state.scaleXY = event.scaleXY;\r\n state.effectiveWidth = event.effectiveWidth;\r\n state.effectiveHeight = event.effectiveHeight;\r\n }\r\n });\r\n\r\n return state;\r\n}\r\n","<script setup lang=\"ts\">\r\nimport { ref, watchEffect, computed, type CSSProperties } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { provideFitinContainer, useFitin } from \"./hooks\";\r\n\r\ntype FitinContainerProps = {\r\n designWidth: number;\r\n designHeight: number;\r\n transformOriginX?: \"left\" \| \"center\" \| \"right\";\r\n transformOriginY?: \"top\" \| \"center\" \| \"bottom\";\r\n style?: CSSProperties;\r\n class?: string;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\n\r\nconst props = defineProps<FitinContainerProps>();\r\n\r\nconst affectScope = computed(() =>\r\n props.transformOriginX \|\| props.transformOriginY\r\n ? \"affect-descendant\"\r\n : \"affect-self\",\r\n);\r\n\r\nprovideFitinContainer(affectScope.value);\r\n\r\nconst fitinStyle = ref<CSSProperties>({});\r\n\r\nfunction adjustContainer(event: IResizeEvent, props: FitinContainerProps) {\r\n if (props.transformOriginX \|\| props.transformOriginY) {\r\n let transform: string;\r\n let transformOrigin: string;\r\n if (props.transformOriginX && props.transformOriginY) {\r\n const res = event.transformXY(\r\n props.transformOriginX,\r\n props.transformOriginY,\r\n );\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else if (props.transformOriginX) {\r\n const res = event.transformX(props.transformOriginX);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else {\r\n const res = event.transformY(props.transformOriginY!);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n }\r\n fitinStyle.value = {\r\n position: \"absolute\",\r\n width: `${props.designWidth}px`,\r\n height: `${props.designHeight}px`,\r\n transform: transform,\r\n transformOrigin: transformOrigin,\r\n };\r\n } else {\r\n fitinStyle.value = {\r\n width: `${event.scaleX props.designWidth}px`,\r\n height: `${event.scaleY * props.designHeight}px`,\r\n };\r\n }\r\n}\r\n\r\nconst resizeObservable = useFitin();\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n const subscription = resizeObservable.subscribe(\r\n (event: IResizeEvent \| undefined) => {\r\n if (event) {\r\n adjustContainer(event, props);\r\n }\r\n },\r\n );\r\n onCleanup(() => subscription.unsubscribe());\r\n }\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n role=\"fitin-container\"\r\n :data-scope=\"affectScope\"\r\n :style=\"[props.style, fitinStyle]\"\r\n :class=\"props.class\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","<script setup lang=\"ts\">\r\nimport { ref, watchEffect, computed, type CSSProperties } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { provideFitinContainer, useFitin } from \"./hooks\";\r\n\r\ntype FitinContainerProps = {\r\n designWidth: number;\r\n designHeight: number;\r\n transformOriginX?: \"left\" \| \"center\" \| \"right\";\r\n transformOriginY?: \"top\" \| \"center\" \| \"bottom\";\r\n style?: CSSProperties;\r\n class?: string;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\n\r\nconst props = defineProps<FitinContainerProps>();\r\n\r\nconst affectScope = computed(() =>\r\n props.transformOriginX \|\| props.transformOriginY\r\n ? \"affect-descendant\"\r\n : \"affect-self\",\r\n);\r\n\r\nprovideFitinContainer(affectScope.value);\r\n\r\nconst fitinStyle = ref<CSSProperties>({});\r\n\r\nfunction adjustContainer(event: IResizeEvent, props: FitinContainerProps) {\r\n if (props.transformOriginX \|\| props.transformOriginY) {\r\n let transform: string;\r\n let transformOrigin: string;\r\n if (props.transformOriginX && props.transformOriginY) {\r\n const res = event.transformXY(\r\n props.transformOriginX,\r\n props.transformOriginY,\r\n );\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else if (props.transformOriginX) {\r\n const res = event.transformX(props.transformOriginX);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else {\r\n const res = event.transformY(props.transformOriginY!);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n }\r\n fitinStyle.value = {\r\n position: \"absolute\",\r\n width: `${props.designWidth}px`,\r\n height: `${props.designHeight}px`,\r\n transform: transform,\r\n transformOrigin: transformOrigin,\r\n };\r\n } else {\r\n fitinStyle.value = {\r\n width: `${event.scaleX * props.designWidth}px`,\r\n height: `${event.scaleY * props.designHeight}px`,\r\n };\r\n }\r\n}\r\n\r\nconst resizeObservable = useFitin();\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n const subscription = resizeObservable.subscribe(\r\n (event: IResizeEvent \| undefined) => {\r\n if (event) {\r\n adjustContainer(event, props);\r\n }\r\n },\r\n );\r\n onCleanup(() => subscription.unsubscribe());\r\n }\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n role=\"fitin-container\"\r\n :data-scope=\"affectScope\"\r\n :style=\"[props.style, fitinStyle]\"\r\n :class=\"props.class\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","import type { App, Plugin } from \"vue\";\r\nimport FitinCanvas from \"./components/fitin-canvas.vue\";\r\nimport FitinContainer from \"./components/fitin-container.vue\";\r\nexport { useFitin, useFitinState } from \"./components/hooks\";\r\n\r\nexport { FitinCanvas, FitinContainer };\r\nexport const plugin: Plugin = {\r\n install(app: App) {\r\n app.component(\"FitinCanvas\", FitinCanvas);\r\n app.component(\"FitinContainer\", FitinContainer);\r\n },\r\n};\r\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.umd.js","names":[],"sources":["../src/components/keys.ts","../src/components/logging.ts","../src/components/fitin-canvas.vue","../src/components/fitin-canvas.vue","../src/components/hooks.ts","../src/components/fitin-container.vue","../src/components/fitin-container.vue","../src/index.ts"],"sourcesContent":["import { type InjectionKey } from \"vue\";\r\nimport type { Observable } from \"rxjs\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\n\r\nexport const FitinCanvasKey: InjectionKey<\r\n Observable<IResizeEvent \| undefined>\r\n> = Symbol(\"fitin-canvas\");\r\n\r\nexport const FitinContainerKey: InjectionKey<\r\n (\"affect-self\" \| \"affect-descendant\")[]\r\n> = Symbol(\"fitin-container\");\r\n","export function logE(message: string): void {\r\n console.error(\"[@fitin/vue]\", message);\r\n}\r\nexport function logW(message: string): void {\r\n console.warn(\"[@fitin/vue]\", message);\r\n}\r\n","<script setup lang=\"ts\">\r\nimport {\r\n computed,\r\n inject,\r\n provide,\r\n ref,\r\n watchEffect,\r\n type CSSProperties,\r\n} from \"vue\";\r\nimport { BehaviorSubject } from \"rxjs\";\r\nimport { Fitin, type Mode, type IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey } from \"./keys\";\r\nimport { logE } from \"./logging\";\r\n\r\n/*\r\n Vue SFC does not support TypeScript advanced types(e.g., Omit, Pick and Partial).\r\n * However, these are exactly the types that `FitinOptions` depends on.\r\n * Solution: declare the type from scratch (i.e. rewrite it explicitly without relying on utility types).\r\n /\r\ntype FitinCanvasProps = {\r\n designWidth: number; // physical design width of container\r\n designHeight: number; // physical design height of container\r\n mode?: Mode;\r\n minDesignWidth?: number; // minimum physical design width of container\r\n minDesignHeight?: number; // minimum physical design height of container\r\n wait?: number; // in ms\r\n computeScaleXY?: (\r\n designWidth: number,\r\n designHeight: number,\r\n scaleX: number,\r\n scaleY: number,\r\n ) => number;\r\n viewport?: HTMLElement \| \"parent\";\r\n center?: boolean;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\nconst props = defineProps<FitinCanvasProps>();\r\n\r\nconst canvasRef = ref<HTMLElement>();\r\n\r\nconst canvasStyle = computed<CSSProperties>(() =>\r\n props.center\r\n ? {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n transform: \"translate(-50%, -50%)\",\r\n overflow: \"hidden\"\r\n }\r\n : {\r\n position: \"relative\",\r\n overflow: \"hidden\"\r\n },\r\n);\r\n\r\nlet fitin: Fitin;\r\nlet subject = new BehaviorSubject<IResizeEvent \| undefined>(undefined);\r\nprovide(FitinCanvasKey, subject.asObservable());\r\nconst resizeObservable = inject(FitinCanvasKey);\r\n\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n logE(\"Nested fitin-canvas is forbidden\");\r\n return;\r\n }\r\n\r\n fitin = new Fitin(props);\r\n\r\n const handleResize = (event: IResizeEvent) => {\r\n if (event && canvasRef.value) {\r\n canvasRef.value.style.width = `${event.effectiveWidth}px`;\r\n canvasRef.value.style.height = `${event.effectiveHeight}px`;\r\n }\r\n subject.next(event);\r\n };\r\n\r\n const viewport =\r\n props.viewport === \"parent\"\r\n ? canvasRef.value?.parentElement\r\n : props.viewport;\r\n if (viewport) {\r\n fitin.subscribe(viewport, handleResize);\r\n } else {\r\n fitin.subscribe(handleResize);\r\n }\r\n\r\n onCleanup(() => {\r\n fitin.dispose();\r\n });\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n ref=\"canvasRef\"\r\n role=\"fitin-canvas\"\r\n :style=\"canvasStyle\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","<script setup lang=\"ts\">\r\nimport {\r\n computed,\r\n inject,\r\n provide,\r\n ref,\r\n watchEffect,\r\n type CSSProperties,\r\n} from \"vue\";\r\nimport { BehaviorSubject } from \"rxjs\";\r\nimport { Fitin, type Mode, type IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey } from \"./keys\";\r\nimport { logE } from \"./logging\";\r\n\r\n/\r\n Vue SFC does not support TypeScript advanced types(e.g., Omit, Pick and Partial).\r\n * However, these are exactly the types that `FitinOptions` depends on.\r\n * Solution: declare the type from scratch (i.e. rewrite it explicitly without relying on utility types).\r\n /\r\ntype FitinCanvasProps = {\r\n designWidth: number; // physical design width of container\r\n designHeight: number; // physical design height of container\r\n mode?: Mode;\r\n minDesignWidth?: number; // minimum physical design width of container\r\n minDesignHeight?: number; // minimum physical design height of container\r\n wait?: number; // in ms\r\n computeScaleXY?: (\r\n designWidth: number,\r\n designHeight: number,\r\n scaleX: number,\r\n scaleY: number,\r\n ) => number;\r\n viewport?: HTMLElement \| \"parent\";\r\n center?: boolean;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\nconst props = defineProps<FitinCanvasProps>();\r\n\r\nconst canvasRef = ref<HTMLElement>();\r\n\r\nconst canvasStyle = computed<CSSProperties>(() =>\r\n props.center\r\n ? {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n transform: \"translate(-50%, -50%)\",\r\n overflow: \"hidden\"\r\n }\r\n : {\r\n position: \"relative\",\r\n overflow: \"hidden\"\r\n },\r\n);\r\n\r\nlet fitin: Fitin;\r\nlet subject = new BehaviorSubject<IResizeEvent \| undefined>(undefined);\r\nprovide(FitinCanvasKey, subject.asObservable());\r\nconst resizeObservable = inject(FitinCanvasKey);\r\n\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n logE(\"Nested fitin-canvas is forbidden\");\r\n return;\r\n }\r\n\r\n fitin = new Fitin(props);\r\n\r\n const handleResize = (event: IResizeEvent) => {\r\n if (event && canvasRef.value) {\r\n canvasRef.value.style.width = `${event.effectiveWidth}px`;\r\n canvasRef.value.style.height = `${event.effectiveHeight}px`;\r\n }\r\n subject.next(event);\r\n };\r\n\r\n const viewport =\r\n props.viewport === \"parent\"\r\n ? canvasRef.value?.parentElement\r\n : props.viewport;\r\n if (viewport) {\r\n fitin.subscribe(viewport, handleResize);\r\n } else {\r\n fitin.subscribe(handleResize);\r\n }\r\n\r\n onCleanup(() => {\r\n fitin.dispose();\r\n });\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n ref=\"canvasRef\"\r\n role=\"fitin-canvas\"\r\n :style=\"canvasStyle\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","import { inject, provide, reactive, watchEffect } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { FitinCanvasKey, FitinContainerKey } from \"./keys\";\r\nimport { logE, logW } from \"./logging\";\r\nimport type { Observable } from \"rxjs\";\r\n\r\nexport function provideFitinContainer(\r\n value: \"affect-self\" \| \"affect-descendant\",\r\n) {\r\n const paths = inject(FitinContainerKey) \|\| [];\r\n paths.push(value);\r\n provide(FitinContainerKey, paths);\r\n}\r\n\r\nexport function useFitin(\r\n resizeHandler?: (event: undefined \| IResizeEvent) => void,\r\n): undefined \| Observable<undefined \| IResizeEvent> {\r\n const resizeObservable = inject(FitinCanvasKey);\r\n if (resizeObservable) {\r\n const paths = inject(FitinContainerKey) \|\| [];\r\n if (paths.find((path) => path === \"affect-descendant\")) {\r\n logW(\"There's an ancestor fitin-container resizing all descendants\");\r\n }\r\n\r\n watchEffect((onCleanup) => {\r\n const subscription = resizeObservable.subscribe(resizeHandler);\r\n onCleanup(() => subscription.unsubscribe());\r\n });\r\n } else {\r\n logE(\"A fitin-container must be used within a fitin-canvas context\");\r\n }\r\n\r\n return resizeObservable;\r\n}\r\n\r\nexport function useFitinState() {\r\n const state = reactive<{\r\n scaleX: number;\r\n scaleY: number;\r\n scaleXY: number;\r\n effectiveWidth: undefined \| number;\r\n effectiveHeight: undefined \| number;\r\n }>({\r\n scaleX: 1,\r\n scaleY: 1,\r\n scaleXY: 1,\r\n effectiveWidth: undefined,\r\n effectiveHeight: undefined,\r\n });\r\n useFitin((event) => {\r\n if (event) {\r\n state.scaleX = event.scaleX;\r\n state.scaleY = event.scaleY;\r\n state.scaleXY = event.scaleXY;\r\n state.effectiveWidth = event.effectiveWidth;\r\n state.effectiveHeight = event.effectiveHeight;\r\n }\r\n });\r\n\r\n return state;\r\n}\r\n","<script setup lang=\"ts\">\r\nimport { ref, watchEffect, computed, type CSSProperties } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { provideFitinContainer, useFitin } from \"./hooks\";\r\n\r\ntype FitinContainerProps = {\r\n designWidth: number;\r\n designHeight: number;\r\n transformOriginX?: \"left\" \| \"center\" \| \"right\";\r\n transformOriginY?: \"top\" \| \"center\" \| \"bottom\";\r\n style?: CSSProperties;\r\n class?: string;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\n\r\nconst props = defineProps<FitinContainerProps>();\r\n\r\nconst affectScope = computed(() =>\r\n props.transformOriginX \|\| props.transformOriginY\r\n ? \"affect-descendant\"\r\n : \"affect-self\",\r\n);\r\n\r\nprovideFitinContainer(affectScope.value);\r\n\r\nconst fitinStyle = ref<CSSProperties>({});\r\n\r\nfunction adjustContainer(event: IResizeEvent, props: FitinContainerProps) {\r\n if (props.transformOriginX \|\| props.transformOriginY) {\r\n let transform: string;\r\n let transformOrigin: string;\r\n if (props.transformOriginX && props.transformOriginY) {\r\n const res = event.transformXY(\r\n props.transformOriginX,\r\n props.transformOriginY,\r\n );\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else if (props.transformOriginX) {\r\n const res = event.transformX(props.transformOriginX);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else {\r\n const res = event.transformY(props.transformOriginY!);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n }\r\n fitinStyle.value = {\r\n position: \"absolute\",\r\n width: `${props.designWidth}px`,\r\n height: `${props.designHeight}px`,\r\n transform: transform,\r\n transformOrigin: transformOrigin,\r\n };\r\n } else {\r\n fitinStyle.value = {\r\n width: `${event.scaleX props.designWidth}px`,\r\n height: `${event.scaleY * props.designHeight}px`,\r\n };\r\n }\r\n}\r\n\r\nconst resizeObservable = useFitin();\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n const subscription = resizeObservable.subscribe(\r\n (event: IResizeEvent \| undefined) => {\r\n if (event) {\r\n adjustContainer(event, props);\r\n }\r\n },\r\n );\r\n onCleanup(() => subscription.unsubscribe());\r\n }\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n role=\"fitin-container\"\r\n :data-scope=\"affectScope\"\r\n :style=\"[props.style, fitinStyle]\"\r\n :class=\"props.class\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","<script setup lang=\"ts\">\r\nimport { ref, watchEffect, computed, type CSSProperties } from \"vue\";\r\nimport type { IResizeEvent } from \"@fitin/core\";\r\nimport { provideFitinContainer, useFitin } from \"./hooks\";\r\n\r\ntype FitinContainerProps = {\r\n designWidth: number;\r\n designHeight: number;\r\n transformOriginX?: \"left\" \| \"center\" \| \"right\";\r\n transformOriginY?: \"top\" \| \"center\" \| \"bottom\";\r\n style?: CSSProperties;\r\n class?: string;\r\n};\r\n\r\ndefineOptions({\r\n inheritAttrs: false,\r\n});\r\n\r\nconst props = defineProps<FitinContainerProps>();\r\n\r\nconst affectScope = computed(() =>\r\n props.transformOriginX \|\| props.transformOriginY\r\n ? \"affect-descendant\"\r\n : \"affect-self\",\r\n);\r\n\r\nprovideFitinContainer(affectScope.value);\r\n\r\nconst fitinStyle = ref<CSSProperties>({});\r\n\r\nfunction adjustContainer(event: IResizeEvent, props: FitinContainerProps) {\r\n if (props.transformOriginX \|\| props.transformOriginY) {\r\n let transform: string;\r\n let transformOrigin: string;\r\n if (props.transformOriginX && props.transformOriginY) {\r\n const res = event.transformXY(\r\n props.transformOriginX,\r\n props.transformOriginY,\r\n );\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else if (props.transformOriginX) {\r\n const res = event.transformX(props.transformOriginX);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n } else {\r\n const res = event.transformY(props.transformOriginY!);\r\n transform = res.transform;\r\n transformOrigin = res.transformOrigin;\r\n }\r\n fitinStyle.value = {\r\n position: \"absolute\",\r\n width: `${props.designWidth}px`,\r\n height: `${props.designHeight}px`,\r\n transform: transform,\r\n transformOrigin: transformOrigin,\r\n };\r\n } else {\r\n fitinStyle.value = {\r\n width: `${event.scaleX * props.designWidth}px`,\r\n height: `${event.scaleY * props.designHeight}px`,\r\n };\r\n }\r\n}\r\n\r\nconst resizeObservable = useFitin();\r\nwatchEffect((onCleanup) => {\r\n if (resizeObservable) {\r\n const subscription = resizeObservable.subscribe(\r\n (event: IResizeEvent \| undefined) => {\r\n if (event) {\r\n adjustContainer(event, props);\r\n }\r\n },\r\n );\r\n onCleanup(() => subscription.unsubscribe());\r\n }\r\n});\r\n</script>\r\n\r\n<template>\r\n <section\r\n role=\"fitin-container\"\r\n :data-scope=\"affectScope\"\r\n :style=\"[props.style, fitinStyle]\"\r\n :class=\"props.class\"\r\n >\r\n <slot />\r\n </section>\r\n</template>\r\n","import type { App, Plugin } from \"vue\";\r\nimport FitinCanvas from \"./components/fitin-canvas.vue\";\r\nimport FitinContainer from \"./components/fitin-container.vue\";\r\nexport { useFitin, useFitinState } from \"./components/hooks\";\r\nimport \"./types.ts\";\r\n\r\nexport { FitinCanvas, FitinContainer };\r\nexport function install(app: App) {\r\n app.component(\"FitinCanvas\", FitinCanvas);\r\n app.component(\"FitinContainer\", FitinContainer);\r\n}\r\nexport default { install } as Plugin;\r\n"],"mappings":"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"}

package/dist/types/index.d.ts CHANGED Viewed

@@ -1,7 +1,10 @@
-import type { Plugin } from "vue";
+import type { App, Plugin } from "vue";
 import FitinCanvas from "./components/fitin-canvas.vue";
 import FitinContainer from "./components/fitin-container.vue";
 export { useFitin, useFitinState } from "./components/hooks";
+import "./types.ts";
 export { FitinCanvas, FitinContainer };
-export declare const plugin: Plugin;
+export declare function install(app: App): void;
+declare const _default: Plugin;
+export default _default;
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,~~EAAO~~,MAAM,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;~~AAE7D~~,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AACvC,~~eAAO~~,~~MAAM~~,~~MAAM~~,EAAE,~~MAKpB~~,~~CAAC~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AACvC,wBAAgB,OAAO,CAAC,GAAG,EAAE,GAAG,QAG/B;wBAC6B,MAAM;AAApC,wBAAqC"}

package/dist/types/types.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * Vue's TypeScript global component type augmentation.
+ * When registering components via `app.use(Fitin)` and use components globally,
+ * TS doesn't know Fitin global components exist, and no autocomplete for component name/props/emits,
+ * if this type augmentation is missing.
+ */
+import FitinCanvas from "./components/fitin-canvas.vue";
+import FitinContainer from "./components/fitin-container.vue";
+declare module "vue" {
+    interface GlobalComponents {
+        FitinCanvas: typeof FitinCanvas;
+        FitinContainer: typeof FitinContainer;
+    }
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types/types.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAE9D,OAAO,QAAQ,KAAK,CAAC;IACnB,UAAiB,gBAAgB;QAC/B,WAAW,EAAE,OAAO,WAAW,CAAC;QAChC,cAAc,EAAE,OAAO,cAAc,CAAC;KACvC;CACF;AAED,OAAO,EAAE,CAAC"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@fitin/vue",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",

package/src/index.ts CHANGED Viewed

@@ -2,11 +2,11 @@ import type { App, Plugin } from "vue";
 import FitinCanvas from "./components/fitin-canvas.vue";
 import FitinContainer from "./components/fitin-container.vue";
 export { useFitin, useFitinState } from "./components/hooks";
+import "./types.ts";
 export { FitinCanvas, FitinContainer };
-export const plugin: Plugin = {
-  install(app: App) {
-    app.component("FitinCanvas", FitinCanvas);
-    app.component("FitinContainer", FitinContainer);
-  },
-};
+export function install(app: App) {
+  app.component("FitinCanvas", FitinCanvas);
+  app.component("FitinContainer", FitinContainer);
+}
+export default { install } as Plugin;

package/src/types.ts ADDED Viewed

@@ -0,0 +1,17 @@
+/**
+ * Vue's TypeScript global component type augmentation.
+ * When registering components via `app.use(Fitin)` and use components globally,
+ * TS doesn't know Fitin global components exist, and no autocomplete for component name/props/emits,
+ * if this type augmentation is missing.
+ */
+import FitinCanvas from "./components/fitin-canvas.vue";
+import FitinContainer from "./components/fitin-container.vue";
+declare module "vue" {
+  export interface GlobalComponents {
+    FitinCanvas: typeof FitinCanvas;
+    FitinContainer: typeof FitinContainer;
+  }
+}
+export {};

package/vite.config.ts CHANGED Viewed

@@ -15,6 +15,7 @@ export default defineConfig({
       external: ["vue", "rxjs", "@fitin/core"],
       output: {
         format: "umd",
+        exports: "named",
         globals: {
           vue: "Vue",
           rxjs: "rxjs",