@fitin/vue 0.1.0

package/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).

package/dist/index.es.js

@@ -0,0 +1,151 @@
+import { computed as e, createElementBlock as t, defineComponent as n, inject as r, normalizeClass as i, normalizeStyle as a, openBlock as o, provide as s, reactive as c, ref as l, renderSlot as u, watchEffect as d } from "vue";
+import { BehaviorSubject as f } from "rxjs";
+import { Fitin as p } from "@fitin/core";
+//#region src/components/keys.ts
+var m = Symbol("fitin-canvas"), h = Symbol("fitin-container");
+//#endregion
+//#region src/components/logging.ts
+function g(e) {
+	console.error("[@fitin/vue]", e);
+}
+function _(e) {
+	console.warn("[@fitin/vue]", e);
+}
+//#endregion
+//#region src/components/fitin-canvas.vue
+var v = /* @__PURE__ */ n({
+	inheritAttrs: !1,
+	__name: "fitin-canvas",
+	props: {
+		designWidth: {},
+		designHeight: {},
+		mode: {},
+		minDesignWidth: {},
+		minDesignHeight: {},
+		wait: {},
+		computeScaleXY: { type: Function },
+		viewport: {},
+		center: { type: Boolean }
+	},
+	setup(n) {
+		let i = n, c = l(), h = e(() => i.center ? {
+			position: "absolute",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			overflow: "hidden"
+		} : {
+			position: "relative",
+			overflow: "hidden"
+		}), _, v = new f(void 0);
+		s(m, v.asObservable());
+		let y = r(m);
+		return d((e) => {
+			if (y) {
+				g("Nested fitin-canvas is forbidden");
+				return;
+			}
+			_ = new p(i);
+			let t = (e) => {
+				e && c.value && (c.value.style.width = `${e.effectiveWidth}px`, c.value.style.height = `${e.effectiveHeight}px`), v.next(e);
+			}, n = i.viewport === "parent" ? c.value?.parentElement : i.viewport;
+			n ? _.subscribe(n, t) : _.subscribe(t), e(() => {
+				_.dispose();
+			});
+		}), (e, n) => (o(), t("section", {
+			ref_key: "canvasRef",
+			ref: c,
+			role: "fitin-canvas",
+			style: a(h.value)
+		}, [u(e.$slots, "default")], 4));
+	}
+});
+//#endregion
+//#region src/components/hooks.ts
+function y(e) {
+	let t = r(h) || [];
+	t.push(e), s(h, t);
+}
+function b(e) {
+	let t = r(m);
+	return t ? ((r(h) || []).find((e) => e === "affect-descendant") && _("There's an ancestor fitin-container resizing all descendants"), d((n) => {
+		let r = t.subscribe(e);
+		n(() => r.unsubscribe());
+	})) : g("A fitin-container must be used within a fitin-canvas context"), t;
+}
+function x() {
+	let e = c({
+		scaleX: 1,
+		scaleY: 1,
+		scaleXY: 1,
+		effectiveWidth: void 0,
+		effectiveHeight: void 0
+	});
+	return b((t) => {
+		t && (e.scaleX = t.scaleX, e.scaleY = t.scaleY, e.scaleXY = t.scaleXY, e.effectiveWidth = t.effectiveWidth, e.effectiveHeight = t.effectiveHeight);
+	}), e;
+}
+//#endregion
+//#region src/components/fitin-container.vue?vue&type=script&setup=true&lang.ts
+var S = ["data-scope"], C = /* @__PURE__ */ n({
+	inheritAttrs: !1,
+	__name: "fitin-container",
+	props: {
+		designWidth: {},
+		designHeight: {},
+		transformOriginX: {},
+		transformOriginY: {},
+		style: {},
+		class: {}
+	},
+	setup(n) {
+		let r = n, s = e(() => r.transformOriginX || r.transformOriginY ? "affect-descendant" : "affect-self");
+		y(s.value);
+		let c = l({});
+		function f(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;
+				}
+				c.value = {
+					position: "absolute",
+					width: `${t.designWidth}px`,
+					height: `${t.designHeight}px`,
+					transform: n,
+					transformOrigin: r
+				};
+			} else c.value = {
+				width: `${e.scaleX * t.designWidth}px`,
+				height: `${e.scaleY * t.designHeight}px`
+			};
+		}
+		let p = b();
+		return d((e) => {
+			if (p) {
+				let t = p.subscribe((e) => {
+					e && f(e, r);
+				});
+				e(() => t.unsubscribe());
+			}
+		}), (e, n) => (o(), t("section", {
+			role: "fitin-container",
+			"data-scope": s.value,
+			style: a([r.style, c.value]),
+			class: i(r.class)
+		}, [u(e.$slots, "default")], 14, S));
+	}
+}), w = { install(e) {
+	e.component("FitinCanvas", v), e.component("FitinContainer", C);
+} };
+//#endregion
+export { v as FitinCanvas, C as FitinContainer, w as plugin, b as useFitin, x as useFitinState };
+
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +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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"}

package/dist/index.umd.js

@@ -0,0 +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});
+//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -0,0 +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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"}

package/dist/types/components/fitin-canvas.vue.d.ts

@@ -0,0 +1,31 @@
+import { type Mode } from "@fitin/core";
+/**
+ * Vue SFC does not support TypeScript advanced types(e.g., Omit, Pick and Partial).
+ * However, these are exactly the types that `FitinOptions` depends on.
+ * Solution: declare the type from scratch (i.e. rewrite it explicitly without relying on utility types).
+ */
+type FitinCanvasProps = {
+    designWidth: number;
+    designHeight: number;
+    mode?: Mode;
+    minDesignWidth?: number;
+    minDesignHeight?: number;
+    wait?: number;
+    computeScaleXY?: (designWidth: number, designHeight: number, scaleX: number, scaleY: number) => number;
+    viewport?: HTMLElement | "parent";
+    center?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FitinCanvasProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FitinCanvasProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=fitin-canvas.vue.d.ts.map

package/dist/types/components/fitin-canvas.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fitin-canvas.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fitin-canvas.vue"],"names":[],"mappings":"AAoHA,OAAO,EAAS,KAAK,IAAI,EAAqB,MAAM,aAAa,CAAC;AAIlE;;;;GAIG;AACH,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,CACf,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,KACX,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAsFF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAO/C,QAAA,MAAM,UAAU,4SAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/types/components/fitin-container.vue.d.ts

@@ -0,0 +1,23 @@
+import { type CSSProperties } from "vue";
+type FitinContainerProps = {
+    designWidth: number;
+    designHeight: number;
+    transformOriginX?: "left" | "center" | "right";
+    transformOriginY?: "top" | "center" | "bottom";
+    style?: CSSProperties;
+    class?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<FitinContainerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FitinContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=fitin-container.vue.d.ts.map

package/dist/types/components/fitin-container.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fitin-container.vue.d.ts","sourceRoot":"","sources":["../../../src/components/fitin-container.vue"],"names":[],"mappings":"AAAA,OA6FO,EAA8B,KAAK,aAAa,EAAE,MAAM,KAAK,CAAC;AAIrE,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC/C,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC/C,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA+FF,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAK/C,QAAA,MAAM,UAAU,kTAEd,CAAC;AACH,QAAA,MAAM,YAAY,EAAS,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;wBACtD,OAAO,YAAY;AAAxC,wBAAyC;AACzC,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

package/dist/types/components/hooks.d.ts

@@ -0,0 +1,12 @@
+import type { IResizeEvent } from "@fitin/core";
+import type { Observable } from "rxjs";
+export declare function provideFitinContainer(value: "affect-self" | "affect-descendant"): void;
+export declare function useFitin(resizeHandler?: (event: undefined | IResizeEvent) => void): undefined | Observable<undefined | IResizeEvent>;
+export declare function useFitinState(): {
+    scaleX: number;
+    scaleY: number;
+    scaleXY: number;
+    effectiveWidth: undefined | number;
+    effectiveHeight: undefined | number;
+};
+//# sourceMappingURL=hooks.d.ts.map

package/dist/types/components/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../src/components/hooks.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAGhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAEvC,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,aAAa,GAAG,mBAAmB,QAK3C;AAED,wBAAgB,QAAQ,CACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,KAAK,IAAI,GACxD,SAAS,GAAG,UAAU,CAAC,SAAS,GAAG,YAAY,CAAC,CAiBlD;AAED,wBAAgB,aAAa;YAEjB,MAAM;YACN,MAAM;aACL,MAAM;oBACC,SAAS,GAAG,MAAM;qBACjB,SAAS,GAAG,MAAM;EAmBtC"}

package/dist/types/components/keys.d.ts

@@ -0,0 +1,6 @@
+import { type InjectionKey } from "vue";
+import type { Observable } from "rxjs";
+import type { IResizeEvent } from "@fitin/core";
+export declare const FitinCanvasKey: InjectionKey<Observable<IResizeEvent | undefined>>;
+export declare const FitinContainerKey: InjectionKey<("affect-self" | "affect-descendant")[]>;
+//# sourceMappingURL=keys.d.ts.map

package/dist/types/components/keys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../../../src/components/keys.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,KAAK,CAAC;AACxC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,eAAO,MAAM,cAAc,EAAE,YAAY,CACvC,UAAU,CAAC,YAAY,GAAG,SAAS,CAAC,CACZ,CAAC;AAE3B,eAAO,MAAM,iBAAiB,EAAE,YAAY,CAC1C,CAAC,aAAa,GAAG,mBAAmB,CAAC,EAAE,CACZ,CAAC"}

package/dist/types/components/logging.d.ts

@@ -0,0 +1,3 @@
+export declare function logE(message: string): void;
+export declare function logW(message: string): void;
+//# sourceMappingURL=logging.d.ts.map

package/dist/types/components/logging.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logging.d.ts","sourceRoot":"","sources":["../../../src/components/logging.ts"],"names":[],"mappings":"AAAA,wBAAgB,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAE1C;AACD,wBAAgB,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAE1C"}

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin } from "vue";
+import FitinCanvas from "./components/fitin-canvas.vue";
+import FitinContainer from "./components/fitin-container.vue";
+export { useFitin, useFitinState } from "./components/hooks";
+export { FitinCanvas, FitinContainer };
+export declare const plugin: Plugin;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vue</title>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@fitin/vue",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "@fitin/core": "0.1.0",
+    "rxjs": "^7.8.2",
+    "vue": "^3.5.41"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2",
+    "vue-tsc": "^3.3.11"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b --noEmit && vite build && vue-tsc -b",
+    "preview": "vite preview"
+  }
+}

package/src/App.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import FitinCanvas from "./components/fitin-canvas.vue";
+import FitinContainer from "./components/fitin-container.vue";
+</script>
+
+<template>
+  <FitinCanvas :design-width="920" :design-height="680">
+    <FitinContainer :design-width="200" :design-height="300">
+      <div
+        style="
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          background: red;
+        "
+      ></div>
+    </FitinContainer>
+  </FitinCanvas>
+</template>

package/src/components/fitin-canvas.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import {
+  computed,
+  inject,
+  provide,
+  ref,
+  watchEffect,
+  type CSSProperties,
+} from "vue";
+import { BehaviorSubject } from "rxjs";
+import { Fitin, type Mode, type IResizeEvent } from "@fitin/core";
+import { FitinCanvasKey } from "./keys";
+import { logE } from "./logging";
+
+/**
+ * Vue SFC does not support TypeScript advanced types(e.g., Omit, Pick and Partial).
+ * However, these are exactly the types that `FitinOptions` depends on.
+ * Solution: declare the type from scratch (i.e. rewrite it explicitly without relying on utility types).
+ */
+type FitinCanvasProps = {
+  designWidth: number; // physical design width of container
+  designHeight: number; // physical design height of container
+  mode?: Mode;
+  minDesignWidth?: number; // minimum physical design width of container
+  minDesignHeight?: number; // minimum physical design height of container
+  wait?: number; // in ms
+  computeScaleXY?: (
+    designWidth: number,
+    designHeight: number,
+    scaleX: number,
+    scaleY: number,
+  ) => number;
+  viewport?: HTMLElement | "parent";
+  center?: boolean;
+};
+
+defineOptions({
+  inheritAttrs: false,
+});
+const props = defineProps<FitinCanvasProps>();
+
+const canvasRef = ref<HTMLElement>();
+
+const canvasStyle = computed<CSSProperties>(() =>
+  props.center
+    ? {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        overflow: "hidden"
+      }
+    : {
+        position: "relative",
+        overflow: "hidden"
+    },
+);
+
+let fitin: Fitin;
+let subject = new BehaviorSubject<IResizeEvent | undefined>(undefined);
+provide(FitinCanvasKey, subject.asObservable());
+const resizeObservable = inject(FitinCanvasKey);
+
+watchEffect((onCleanup) => {
+  if (resizeObservable) {
+    logE("Nested fitin-canvas is forbidden");
+    return;
+  }
+
+  fitin = new Fitin(props);
+
+  const handleResize = (event: IResizeEvent) => {
+    if (event && canvasRef.value) {
+      canvasRef.value.style.width = `${event.effectiveWidth}px`;
+      canvasRef.value.style.height = `${event.effectiveHeight}px`;
+    }
+    subject.next(event);
+  };
+
+  const viewport =
+    props.viewport === "parent"
+      ? canvasRef.value?.parentElement
+      : props.viewport;
+  if (viewport) {
+    fitin.subscribe(viewport, handleResize);
+  } else {
+    fitin.subscribe(handleResize);
+  }
+
+  onCleanup(() => {
+    fitin.dispose();
+  });
+});
+</script>
+
+<template>
+  <section
+    ref="canvasRef"
+    role="fitin-canvas"
+    :style="canvasStyle"
+  >
+    <slot />
+  </section>
+</template>

package/src/components/fitin-container.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref, watchEffect, computed, type CSSProperties } from "vue";
+import type { IResizeEvent } from "@fitin/core";
+import { provideFitinContainer, useFitin } from "./hooks";
+
+type FitinContainerProps = {
+  designWidth: number;
+  designHeight: number;
+  transformOriginX?: "left" | "center" | "right";
+  transformOriginY?: "top" | "center" | "bottom";
+  style?: CSSProperties;
+  class?: string;
+};
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<FitinContainerProps>();
+
+const affectScope = computed(() =>
+  props.transformOriginX || props.transformOriginY
+    ? "affect-descendant"
+    : "affect-self",
+);
+
+provideFitinContainer(affectScope.value);
+
+const fitinStyle = ref<CSSProperties>({});
+
+function adjustContainer(event: IResizeEvent, props: FitinContainerProps) {
+  if (props.transformOriginX || props.transformOriginY) {
+    let transform: string;
+    let transformOrigin: string;
+    if (props.transformOriginX && props.transformOriginY) {
+      const res = event.transformXY(
+        props.transformOriginX,
+        props.transformOriginY,
+      );
+      transform = res.transform;
+      transformOrigin = res.transformOrigin;
+    } else if (props.transformOriginX) {
+      const res = event.transformX(props.transformOriginX);
+      transform = res.transform;
+      transformOrigin = res.transformOrigin;
+    } else {
+      const res = event.transformY(props.transformOriginY!);
+      transform = res.transform;
+      transformOrigin = res.transformOrigin;
+    }
+    fitinStyle.value = {
+      position: "absolute",
+      width: `${props.designWidth}px`,
+      height: `${props.designHeight}px`,
+      transform: transform,
+      transformOrigin: transformOrigin,
+    };
+  } else {
+    fitinStyle.value = {
+      width: `${event.scaleX * props.designWidth}px`,
+      height: `${event.scaleY * props.designHeight}px`,
+    };
+  }
+}
+
+const resizeObservable = useFitin();
+watchEffect((onCleanup) => {
+  if (resizeObservable) {
+    const subscription = resizeObservable.subscribe(
+      (event: IResizeEvent | undefined) => {
+        if (event) {
+          adjustContainer(event, props);
+        }
+      },
+    );
+    onCleanup(() => subscription.unsubscribe());
+  }
+});
+</script>
+
+<template>
+  <section
+    role="fitin-container"
+    :data-scope="affectScope"
+    :style="[props.style, fitinStyle]"
+    :class="props.class"
+  >
+    <slot />
+  </section>
+</template>

package/src/components/hooks.ts

@@ -0,0 +1,61 @@
+import { inject, provide, reactive, watchEffect } from "vue";
+import type { IResizeEvent } from "@fitin/core";
+import { FitinCanvasKey, FitinContainerKey } from "./keys";
+import { logE, logW } from "./logging";
+import type { Observable } from "rxjs";
+
+export function provideFitinContainer(
+  value: "affect-self" | "affect-descendant",
+) {
+  const paths = inject(FitinContainerKey) || [];
+  paths.push(value);
+  provide(FitinContainerKey, paths);
+}
+
+export function useFitin(
+  resizeHandler?: (event: undefined | IResizeEvent) => void,
+): undefined | Observable<undefined | IResizeEvent> {
+  const resizeObservable = inject(FitinCanvasKey);
+  if (resizeObservable) {
+    const paths = inject(FitinContainerKey) || [];
+    if (paths.find((path) => path === "affect-descendant")) {
+      logW("There's an ancestor fitin-container resizing all descendants");
+    }
+
+    watchEffect((onCleanup) => {
+      const subscription = resizeObservable.subscribe(resizeHandler);
+      onCleanup(() => subscription.unsubscribe());
+    });
+  } else {
+    logE("A fitin-container must be used within a fitin-canvas context");
+  }
+
+  return resizeObservable;
+}
+
+export function useFitinState() {
+  const state = reactive<{
+    scaleX: number;
+    scaleY: number;
+    scaleXY: number;
+    effectiveWidth: undefined | number;
+    effectiveHeight: undefined | number;
+  }>({
+    scaleX: 1,
+    scaleY: 1,
+    scaleXY: 1,
+    effectiveWidth: undefined,
+    effectiveHeight: undefined,
+  });
+  useFitin((event) => {
+    if (event) {
+      state.scaleX = event.scaleX;
+      state.scaleY = event.scaleY;
+      state.scaleXY = event.scaleXY;
+      state.effectiveWidth = event.effectiveWidth;
+      state.effectiveHeight = event.effectiveHeight;
+    }
+  });
+
+  return state;
+}

package/src/components/keys.ts

@@ -0,0 +1,11 @@
+import { type InjectionKey } from "vue";
+import type { Observable } from "rxjs";
+import type { IResizeEvent } from "@fitin/core";
+
+export const FitinCanvasKey: InjectionKey<
+  Observable<IResizeEvent | undefined>
+> = Symbol("fitin-canvas");
+
+export const FitinContainerKey: InjectionKey<
+  ("affect-self" | "affect-descendant")[]
+> = Symbol("fitin-container");

package/src/components/logging.ts

@@ -0,0 +1,6 @@
+export function logE(message: string): void {
+  console.error("[@fitin/vue]", message);
+}
+export function logW(message: string): void {
+  console.warn("[@fitin/vue]", message);
+}

package/src/index.ts

@@ -0,0 +1,12 @@
+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";
+
+export { FitinCanvas, FitinContainer };
+export const plugin: Plugin = {
+  install(app: App) {
+    app.component("FitinCanvas", FitinCanvas);
+    app.component("FitinContainer", FitinContainer);
+  },
+};

package/src/main.ts

@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");

package/tsconfig.app.json

@@ -0,0 +1,30 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+    "allowArbitraryExtensions": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "erasableSyntaxOnly": true,
+
+    /* Bundler */
+    "noEmit": false,
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "dist/types",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "exclude": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/__tests__/**",
+    "src/main.ts",
+    "src/App.vue"
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "es2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "module": "nodenext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,26 @@
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    sourcemap: true,
+    lib: {
+      entry: "src/index.ts",
+      name: "Fitin",
+      fileName: (format) => `index.${format}.js`,
+      formats: ["es", "umd"],
+    },
+    rolldownOptions: {
+      external: ["vue", "rxjs", "@fitin/core"],
+      output: {
+        format: "umd",
+        globals: {
+          vue: "Vue",
+          rxjs: "rxjs",
+          "@fitin/core": "FitinCore",
+        },
+      },
+    },
+  },
+});