@anzusystems/common-admin 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/domains/dam/composables/damConfigName.js

@@ -2,7 +2,7 @@ import { isUndefined as e } from "../../../shared/utils/common.js";
 import { coreDamOptions as t } from "../../../plugins/pluginOptions.js";
 import { useCommonAdminCoreDamOptions as n } from "./commonAdminCoreDamOptions.js";
 import { hasInjectionContext as r, inject as i, provide as a } from "vue";
-//#region src/domains/dam/composables/damConfigName.ts
+// src/domains/dam/composables/damConfigName.ts
 var o = Symbol("anzu:dam-config-name");
 function s(e) {
 	let t = e ?? i(o, void 0) ?? "default";
@@ -14,7 +14,6 @@ function c(e) {
 function l(r) {
 	r === "default" || e(t.value) || n(r);
 }
-//#endregion
 export { o as DamConfigNameKey, l as checkDamConfigName, c as inheritedDamConfigName, s as useDamConfigName };
 
 //# sourceMappingURL=damConfigName.js.map

package/dist/domains/dam/composables/damNotifications.js

@@ -5,7 +5,7 @@ import { useDamNotificationsEventBus as r } from "./damNotificationsEventBus.js"
 import { setDamNotificationsPushAlive as i } from "./damNotificationsConnection.js";
 import { effectScope as a, ref as o, watch as s } from "vue";
 import { useWebSocket as c } from "@vueuse/core";
-//#region src/domains/dam/composables/damNotifications.ts
+// src/domains/dam/composables/damNotifications.ts
 var l = e, u = o(!1), d = void 0, f = void 0, p = void 0;
 function m({ options: e, configNames: n }) {
 	let a = e.enabled, o = r(), u, d = () => {
@@ -106,7 +106,6 @@ function x() {
 	let e = r();
 	return { addDamNotificationListener: (t, n = {}) => e.on(b(t, n)) };
 }
-//#endregion
 export { v as destroyDamNotifications, g as initDamNotifications, x as useDamNotifications };
 
 //# sourceMappingURL=damNotifications.js.map

package/dist/domains/dam/composables/damNotificationsConnection.js

@@ -1,5 +1,5 @@
 import { effectScope as e, shallowRef as t, watch as n } from "vue";
-//#region src/domains/dam/composables/damNotificationsConnection.ts
+// src/domains/dam/composables/damNotificationsConnection.ts
 var r = t(/* @__PURE__ */ new Map()), i = (e, t) => {
 	if (t.every((t) => (r.value.get(t) ?? !1) === e)) return;
 	let n = new Map(r.value);
@@ -14,7 +14,6 @@ function a(t = "default") {
 		}
 	};
 }
-//#endregion
 export { i as setDamNotificationsPushAlive, a as useDamNotificationsConnection };
 
 //# sourceMappingURL=damNotificationsConnection.js.map

package/dist/domains/dam/composables/damNotificationsEventBus.js

@@ -1,5 +1,5 @@
 import { useEventBus as e } from "@vueuse/core";
-//#region src/domains/dam/composables/damNotificationsEventBus.ts
+// src/domains/dam/composables/damNotificationsEventBus.ts
 var t = Symbol("anzu:damNotificationsEventBusKey");
 function n() {
 	return e(t);
@@ -20,7 +20,6 @@ var r = {
 	UserUpdated: "user_updated",
 	AssetFileCopied: "asset_file_copied"
 };
-//#endregion
 export { r as DamNotificationName, t as damNotificationsEventBusKey, n as useDamNotificationsEventBus };
 
 //# sourceMappingURL=damNotificationsEventBus.js.map

package/dist/domains/dam/composables/extSystemIdForCached.js

@@ -1,12 +1,11 @@
 import { inheritedDamConfigName as e } from "./damConfigName.js";
 import { ref as t } from "vue";
-//#region src/domains/dam/composables/extSystemIdForCached.ts
+// src/domains/dam/composables/extSystemIdForCached.ts
 var n = /* @__PURE__ */ new Map([["default", t(0)]]);
 function r(r) {
 	let i = e(r), a = n.get(i);
 	return a || (a = t(0), n.set(i, a)), { cachedExtSystemId: a };
 }
-//#endregion
 export { r as useExtSystemIdForCached };
 
 //# sourceMappingURL=extSystemIdForCached.js.map

package/dist/domains/dam/composables/uploadValidations.js

@@ -3,7 +3,7 @@ import { useCommonAdminCoreDamOptions as t } from "./commonAdminCoreDamOptions.j
 import { isImageCreateUpdateAware as n } from "../imageWidget/store/imageMediaWidgetStore.js";
 import { computed as r } from "vue";
 import i from "@vuelidate/core";
-//#region src/domains/dam/composables/uploadValidations.ts
+// src/domains/dam/composables/uploadValidations.ts
 var a = Symbol.for("anzu:common:asset-metadata-validation-scope"), o = Symbol.for("anzu:common:image-validation-scope"), s = Symbol.for("anzu:common:author-create-validation-scope");
 function c(e, t, n) {
 	let r = {};
@@ -16,7 +16,6 @@ function l(a, s, l) {
 	} } } : {});
 	return { v$: i(p, { image: a }, { $scope: o }) };
 }
-//#endregion
 export { a as ADamAssetMetadataValidationScopeSymbol, s as ADamAuthorCreateValidationScopeSymbol, o as AImageMetadataValidationScopeSymbol, c as buildFieldRules, l as useImageValidation };
 
 //# sourceMappingURL=uploadValidations.js.map

package/dist/domains/dam/config/api/damAssetCustomFormApi.js

@@ -1,7 +1,7 @@
 import { SYSTEM_CORE_DAM as e } from "../../api/damConstants.js";
 import { DAM_END_POINT_ASSET_CUSTOM_FORM as t } from "../../api/damEndPoints.js";
 import { useApiFetchItems as n } from "../../../api/composables/useApiFetchItems.js";
-//#region src/domains/dam/config/api/damAssetCustomFormApi.ts
+// src/domains/dam/config/api/damAssetCustomFormApi.ts
 var r = "assetCustomForm", i = (i, a, o, s = t) => {
 	let { execute: c } = n({
 		client: i,
@@ -22,7 +22,6 @@ var r = "assetCustomForm", i = (i, a, o, s = t) => {
 	});
 	return s({ urlParams: { distributionService: a } });
 };
-//#endregion
 export { i as fetchAssetCustomFormElements, a as fetchDistributionCustomFormElements };
 
 //# sourceMappingURL=damAssetCustomFormApi.js.map

package/dist/domains/dam/config/api/damConfigApi.js

@@ -1,7 +1,7 @@
 import { useApiRequest as e } from "../../../api/composables/useApiRequest.js";
 import { SYSTEM_CORE_DAM as t } from "../../api/damConstants.js";
 import { DAM_END_POINT_CONFIGURATION as n, DAM_END_POINT_PUB_CONFIGURATION as r } from "../../api/damEndPoints.js";
-//#region src/domains/dam/config/api/damConfigApi.ts
+// src/domains/dam/config/api/damConfigApi.ts
 var i = "settings", a = (n, a = r) => {
 	let { execute: o } = e({
 		client: n,
@@ -30,7 +30,6 @@ var i = "settings", a = (n, a = r) => {
 	});
 	return s({ urlParams: { extSystem: r } });
 };
-//#endregion
 export { o as fetchConfiguration, s as fetchExtSystemConfiguration, a as fetchPubConfiguration };
 
 //# sourceMappingURL=damConfigApi.js.map

package/dist/domains/dam/config/composables/acceptTypeAndSizeHelper.js

@@ -1,6 +1,6 @@
 import { DamAssetType as e } from "../../types/Asset.js";
 import { computed as t } from "vue";
-//#region src/domains/dam/config/composables/acceptTypeAndSizeHelper.ts
+// src/domains/dam/config/composables/acceptTypeAndSizeHelper.ts
 function n(n = void 0, r) {
 	let i = (e) => {
 		let t = r[e];
@@ -19,7 +19,6 @@ function n(n = void 0, r) {
 		uploadAccept: t(() => Object.keys(a.value).join(","))
 	};
 }
-//#endregion
 export { n as useDamAcceptTypeAndSizeHelper };
 
 //# sourceMappingURL=acceptTypeAndSizeHelper.js.map

package/dist/domains/dam/config/composables/damConfigState.js

@@ -6,7 +6,7 @@ import { fetchConfiguration as s, fetchExtSystemConfiguration as c, fetchPubConf
 import { useDamConfigStoreOf as u } from "../store/damConfigStore.js";
 import { damEndPointsOf as d } from "../../composables/commonAdminCoreDamOptions.js";
 import { checkDamConfigName as f, inheritedDamConfigName as p } from "../../composables/damConfigName.js";
-//#region src/domains/dam/config/composables/damConfigState.ts
+// src/domains/dam/config/composables/damConfigState.ts
 var m = /* @__PURE__ */ new WeakMap();
 function h(h = void 0, g) {
 	let _ = p(g);
@@ -203,7 +203,6 @@ function h(h = void 0, g) {
 		getDamConfigAssetCustomFormElements: N
 	};
 }
-//#endregion
 export { h as useDamConfigState };
 
 //# sourceMappingURL=damConfigState.js.map

package/dist/domains/dam/config/store/damConfigStore.js

@@ -1,7 +1,7 @@
 import { UserAuthType as e } from "../../types/DamConfig.js";
 import { reactive as t, shallowRef as n } from "vue";
 import { defineStore as r } from "pinia";
-//#region src/domains/dam/config/store/damConfigStore.ts
+// src/domains/dam/config/store/damConfigStore.ts
 var i = () => ({ userAuthType: e.JsonCredentials }), a = () => ({
 	colorSet: {},
 	assetExternalProviders: {},
@@ -43,7 +43,6 @@ function l(e = "default", t) {
 	let n = c.get(e);
 	return n || (n = r("commonAdminDamConfigStore:" + e, o), c.set(e, n)), n(t);
 }
-//#endregion
 export { s as useDamConfigStore, l as useDamConfigStoreOf };
 
 //# sourceMappingURL=damConfigStore.js.map

package/dist/domains/dam/config/utils/damFilterUserAllowedUploadConfigs.js

@@ -1,7 +1,7 @@
 import { cloneDeep as e, isArray as t, isObject as n, isUndefined as r } from "../../../../shared/utils/common.js";
 import { defineAuth as i } from "../../../auth/composables/defineAuth.js";
 import { useCommonAdminCoreDamOptions as a } from "../../composables/commonAdminCoreDamOptions.js";
-//#region src/domains/dam/config/utils/damFilterUserAllowedUploadConfigs.ts
+// src/domains/dam/config/utils/damFilterUserAllowedUploadConfigs.ts
 var o = (e) => n(e) && t(e.adminToExtSystems) && t(e.userToExtSystems) && t(e.resolvedAssetLicences), s = (e) => {
 	let t = a(e).currentUser ?? "dam";
 	if (t === !1) return "all";
@@ -21,7 +21,6 @@ function l(e, t) {
 	let n = s(t);
 	return n === "all" || n !== "none" && !!(n.adminToExtSystems.includes(e.extSystem) || n.userToExtSystems.includes(e.extSystem) || n.resolvedAssetLicences.map((e) => e.id).includes(e.licence));
 }
-//#endregion
 export { c as filterAllowedImageWidgetSelectConfigs, l as isImageWidgetUploadConfigAllowed };
 
 //# sourceMappingURL=damFilterUserAllowedUploadConfigs.js.map

package/dist/domains/dam/cropper/components/ACropper.js

@@ -1,8 +1,7 @@
 import e from "./ACropper.vue_vue_type_script_setup_true_lang.js";
 /* empty css                                         */
-//#region src/domains/dam/cropper/components/ACropper.vue
+// src/domains/dam/cropper/components/ACropper.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=ACropper.js.map

package/dist/domains/dam/cropper/components/ACropper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ACropper.js","names":["_sfc_main","ACropper_vue_vue_type_script_setup_true_lang_default","ACropper_default"],"sources":["../../../../../src/domains/dam/cropper/components/ACropper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport {\n  CropperCanvas,\n  CropperCrosshair,\n  CropperGrid,\n  CropperHandle,\n  CropperImage,\n  CropperSelection,\n  CropperShade,\n} from 'cropperjs2'\nimport {\n  canvasSizeFor,\n  clampRectInside,\n  initialSelectionRect,\n  isUsableAspectRatio,\n  RESIZE_ANCHORS,\n  rectsAreClose,\n  type Rect,\n  type Size,\n} from '@/domains/dam/cropper/utils/cropperGeometry'\nimport type { CropRect } from '@/domains/dam/cropper/utils/cropperTypes'\n\n/**\n * Image cropper built on cropper.js v2's custom elements, replacing the v1-based `ACropperjs`.\n *\n * It lives here, beside `DamAssetImageRoiSelect`, because that is the only thing that uses it and\n * nothing outside this library does. It is not exported: shaping it to one need rather than to a\n * general audience is what keeps it to its size.\n *\n * The crop is bound, not fetched: `v-model` carries it as fractions of the image, and `commit` says\n * the user has finished a gesture. There is no imperative surface — the one thing a host wants to do\n * with a cropper is know where the crop is, and a binding says that better than six methods did.\n *\n * The elements are assembled in script rather than in the template on purpose: a consumer of this\n * library does not configure `isCustomElement` in their own build, and setting element *properties*\n * instead of going through attribute strings avoids the coercion surprises (`NaN`, booleans,\n * fractional numbers) that come with the attribute round-trip.\n */\n\nconst props = withDefaults(\n  defineProps<{\n    src?: string\n    /** The crop, as fractions of the image. Leave it null to start from the default box. */\n    modelValue?: CropRect | null\n    /** `NaN` (the default) leaves the crop free-form. */\n    aspectRatio?: number\n    containerStyle?: { [key: string]: string } | undefined\n    /** Wash over everything outside the crop — the replacement for overriding `.cropper-modal`. */\n    shadeColor?: string\n  }>(),\n  {\n    src: '',\n    modelValue: null,\n    aspectRatio: NaN,\n    containerStyle: undefined,\n    shadeColor: 'rgba(0, 0, 0, 0.5)',\n  }\n)\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', crop: CropRect): void\n  /** The user has finished a gesture; the crop is worth saving. */\n  (event: 'commit', crop: CropRect): void\n  (event: 'ready'): void\n}>()\n\n// cropper.js registers its elements as a side effect of loading its entry, and this package's\n// `sideEffects` lets the consumer's bundler drop that module once only the classes are used. `$define`\n// is a no-op for an element that is already registered.\nfor (const element of [\n  CropperCanvas,\n  CropperCrosshair,\n  CropperGrid,\n  CropperHandle,\n  CropperImage,\n  CropperSelection,\n  CropperShade,\n]) {\n  element.$define()\n}\n\n/**\n * Settings the one caller never varies, kept as constants rather than as props nobody passes.\n * Each of them is behaviour, not preference: no checkerboard behind a photograph, the wheel left to\n * the page, pinch zoom kept for tablets, and the minimum canvas cropper.js' own stylesheet declares.\n */\nconst AUTO_CROP_AREA = 0.8\nconst MIN_CONTAINER_WIDTH = 200\nconst MIN_CONTAINER_HEIGHT = 100\n\n// Matched to cropper.js v1's stylesheet so the two components are indistinguishable side by side.\nconst SELECTION_COLOR = 'rgba(51, 153, 255, 0.75)'\nconst FACE_COLOR = 'rgba(255, 255, 255, 0.1)'\nconst GRID_COLOR = 'rgba(238, 238, 238, 0.5)'\nconst CROSSHAIR_COLOR = 'rgba(238, 238, 238, 0.75)'\nconst RESIZE_ACTIONS = [\n  'n-resize',\n  'e-resize',\n  's-resize',\n  'w-resize',\n  'ne-resize',\n  'nw-resize',\n  'se-resize',\n  'sw-resize',\n]\n\ninterface CropperParts {\n  canvas: CropperCanvas\n  image: CropperImage\n  selection: CropperSelection\n}\n\nconst hostEl = useTemplateRef<HTMLDivElement>('hostEl')\nconst loading = ref(true)\n\nlet parts: CropperParts | null = null\nlet natural: Size = { width: 0, height: 0 }\n/** The action cropper.js is currently performing, so a clamp knows which edge to hold still. */\nlet currentAction: string | null = null\n/** Guards the re-entrant `$change` a clamp performs from being clamped again. */\nlet clamping = false\n/** Guards the half-applied transforms `$center` emits between its move and its scale. */\nlet centring = false\n/** Invalidates an in-flight build when `src` changes or the component goes away mid-load. */\nlet buildToken = 0\n/** The host box the current layout was computed for — not merely the last one observed. */\nlet laidOut: Size = { width: 0, height: 0 }\n/** The last crop handed out, so a model written straight back is not mistaken for a new one. */\nlet lastEmitted: CropRect | null = null\n/** Watches the ancestors that clip the host; their height is part of the room it has. */\nlet ancestorObserver: ResizeObserver | null = null\n\nconst create = <T extends HTMLElement>(name: string): T => document.createElement(name) as T\n\n/** The image box in canvas coordinates. Read from layout so panning and zooming stay accounted for. */\nconst imageBounds = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const canvasRect = parts.canvas.getBoundingClientRect()\n  const imageRect = parts.image.getBoundingClientRect()\n  return {\n    x: imageRect.left - canvasRect.left,\n    y: imageRect.top - canvasRect.top,\n    width: imageRect.width,\n    height: imageRect.height,\n  }\n}\n\n/**\n * Where the crop is allowed to be: the image, but never outside the visible canvas. The two are the\n * same box until the image is zoomed past its frame, and then it is the frame that wins — cropper.js\n * v1 limited its crop box to the canvas and the container both, so a zoomed-in image never let the\n * crop wander off the part of it you could actually see.\n */\nconst constraintBounds = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const image = imageBounds()\n  const canvas = parts.canvas.getBoundingClientRect()\n  const left = Math.max(image.x, 0)\n  const top = Math.max(image.y, 0)\n  const right = Math.min(image.x + image.width, canvas.width)\n  const bottom = Math.min(image.y + image.height, canvas.height)\n  return { x: left, y: top, width: Math.max(0, right - left), height: Math.max(0, bottom - top) }\n}\n\nconst selectionRect = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const { x, y, width, height } = parts.selection\n  return { x, y, width, height }\n}\n\nconst applyRect = (rect: Rect) => {\n  if (!parts) return\n  clamping = true\n  parts.selection.$change(rect.x, rect.y, rect.width, rect.height, props.aspectRatio, true)\n  clamping = false\n}\n\n/**\n * Re-fits the image to the canvas. cropper.js only lets `$center` scale and move an image that is\n * marked scalable and translatable — it grants itself that permission while the image is still\n * loading, but not afterwards — so the flags are lifted for the call and put back straight after.\n */\nconst centerImage = () => {\n  if (!parts) return\n  const { image } = parts\n  const { scalable, translatable } = image\n  centring = true\n  image.scalable = true\n  image.translatable = true\n  image.$center('contain')\n  image.scalable = scalable\n  image.translatable = translatable\n  centring = false\n}\n\n/**\n * The crop a fresh picture starts with. Computed here rather than handed to cropper.js'\n * `initialCoverage`, whose deferred initialisation would land *after* a `ready` handler had already\n * positioned the crop. It is measured against the image rather than the canvas, which are the same\n * box for a source wider than its container and are not once the image sits centred between margins.\n */\nconst seedInitialCrop = () => {\n  if (!parts) return\n  const bounds = imageBounds()\n  if (bounds.width <= 0 || bounds.height <= 0) return\n  const initial = initialSelectionRect(bounds, props.aspectRatio, AUTO_CROP_AREA)\n  applyRect({ ...initial, x: initial.x + bounds.x, y: initial.y + bounds.y })\n}\n\n/** Uses the bound crop if there is one, and the default box if there is not. */\nconst applyModelOrSeed = () => {\n  const model = props.modelValue\n  if (model && model.width > 0 && model.height > 0) applyCrop(model)\n  else seedInitialCrop()\n  emitCrop()\n}\n\n/** Pulls the selection back inside the image after something moved the image out from under it. */\nconst refit = () => {\n  if (!parts || centring) return\n  const current = selectionRect()\n  if (current.width <= 0 || current.height <= 0) return\n  const fitted = clampRectInside(current, constraintBounds(), props.aspectRatio)\n  if (!rectsAreClose(current, fitted)) applyRect(fitted)\n}\n\nconst onSelectionChange = (event: Event) => {\n  if (clamping || !parts) return\n  const detail = (event as CustomEvent<Rect>).detail\n  if (!detail) return\n  // cropper.js reverses the action when a grip is dragged through the opposite edge, and it records\n  // that on the canvas just before emitting this event — one move ahead of the `action` event the\n  // tracking below sees. Prefer its own answer, and fall back if a future version stops publishing it.\n  const liveAction = (parts.canvas as unknown as { $action?: unknown }).$action\n  const action = typeof liveAction === 'string' && liveAction ? liveAction : currentAction\n  const anchor = action ? RESIZE_ANCHORS[action] : undefined\n  const clamped = clampRectInside(detail, constraintBounds(), props.aspectRatio, anchor)\n  if (rectsAreClose(detail, clamped)) return\n  // Rejecting the change and re-issuing the clamped one is what keeps the crop sliding along the\n  // border instead of freezing there; the shade reads `defaultPrevented` and follows the new values.\n  event.preventDefault()\n  applyRect(clamped)\n}\n\nconst onActionStart = (event: Event) => {\n  currentAction = (event as CustomEvent<{ action?: string }>).detail?.action ?? null\n}\n\nconst onAction = (event: Event) => {\n  const action = (event as CustomEvent<{ action?: string }>).detail?.action\n  // cropper.js turns a fresh \"select\" drag into the matching corner resize once it knows the\n  // direction, and reports the new action on the next move — follow it so the anchor stays right.\n  if (action) currentAction = action\n}\n\nconst onActionEnd = () => {\n  currentAction = null\n  emitCrop(true)\n}\n\n/**\n * The canvas must never see a wheel event: its own handler calls `preventDefault()` unconditionally,\n * which would swallow page scrolling over the picture the way cropper.js v1 never did. Pinching is\n * unaffected — that arrives as pointer events, and the picture stays scalable for it.\n */\nconst onWheelCapture = (event: WheelEvent) => {\n  event.stopPropagation()\n}\n\n/**\n * cropper.js emits `transform` *before* it writes the new matrix to the element's style (it sets the\n * new transform to measure the result, puts the old one back, then emits and finally commits). Re-\n * fitting straight away would therefore measure the image as it was: after a zoom out the crop would\n * be judged against the larger, previous picture and left hanging over the edge of the new one.\n */\nconst onImageTransform = () => queueMicrotask(refit)\n\nconst teardown = () => {\n  if (parts) {\n    const { canvas, image, selection } = parts\n    selection.removeEventListener('change', onSelectionChange)\n    canvas.removeEventListener('actionstart', onActionStart)\n    canvas.removeEventListener('action', onAction)\n    canvas.removeEventListener('actionend', onActionEnd)\n    image.removeEventListener('transform', onImageTransform)\n  }\n  // Every canvas, not just the one on `parts`: a build that was superseded while still waiting on\n  // its image has already put one in the DOM and has nothing tracking it yet.\n  hostEl.value?.querySelectorAll(CropperCanvas.$name).forEach((canvas) => {\n    // Disconnecting a `cropper-image` drops its listeners but leaves its request running, and the\n    // `$ready()` promise waiting on it keeps this component reachable until the server answers.\n    canvas.querySelectorAll<CropperImage>(CropperImage.$name).forEach((image) => {\n      if (image.$image) image.$image.src = ''\n    })\n    canvas.remove()\n  })\n  ancestorObserver?.disconnect()\n  ancestorObserver = null\n  parts = null\n  natural = { width: 0, height: 0 }\n  laidOut = { width: 0, height: 0 }\n  currentAction = null\n}\n\n/**\n * How much of the host's height will actually be shown.\n *\n * The host's own `max-height` is the usual answer, and the one `DamAssetImageRoiSelect` relies on.\n * Ancestors count too when they clip with `overflow: hidden` — what they cut off cannot be scrolled\n * back into view, so it is no more reachable than the host's own overflow. An ancestor that\n * scrolls is left alone: there the rest of the picture is a scroll away, not gone.\n */\nconst clippingAncestorsOf = (host: HTMLElement): HTMLElement[] => {\n  const found: HTMLElement[] = []\n  let ancestor = host.parentElement\n  while (ancestor && ancestor !== document.body && ancestor !== document.documentElement) {\n    const { overflowY } = window.getComputedStyle(ancestor)\n    if (overflowY === 'hidden' || overflowY === 'clip') found.push(ancestor)\n    ancestor = ancestor.parentElement\n  }\n  return found\n}\n\nconst visibleHeightOf = (host: HTMLElement): number => {\n  let available = host.clientHeight\n  const hostTop = host.getBoundingClientRect().top\n\n  clippingAncestorsOf(host).forEach((ancestor) => {\n    const rect = ancestor.getBoundingClientRect()\n    // From wherever the host starts being visible down to where the ancestor stops showing anything.\n    // Taking the ancestor's own top into account matters when the host begins above it: what is\n    // scrolled or positioned off the top is just as unreachable as what falls off the bottom.\n    const room = rect.bottom - Math.max(rect.top, hostTop)\n    if (room > 0) available = Math.min(available, room)\n  })\n\n  return available\n}\n\n/**\n * Sizes the canvas to the room the host actually gives it, in two passes because the second answer\n * depends on the first: the height a picture wants follows from its width, but a frame with a\n * `max-height` only reveals how much of that it will show once something is in it.\n *\n * cropper.js v1 did the same dance with its `<img>`, and the point of it is that its cropper never\n * overflowed: a tall picture in a short frame was scaled down to fit rather than cut off at the\n * bottom, where the part of the crop hidden by `overflow: hidden` could not be reached again.\n */\nconst sizeCanvas = (canvas: CropperCanvas, host: HTMLElement, availableWidth: number): Size => {\n  const size = canvasSizeFor(natural, availableWidth, MIN_CONTAINER_WIDTH, MIN_CONTAINER_HEIGHT)\n  canvas.style.width = `${size.width}px`\n  canvas.style.height = `${size.height}px`\n\n  const visibleHeight = visibleHeightOf(host)\n  if (visibleHeight > 0 && visibleHeight < size.height) {\n    size.height = Math.max(visibleHeight, MIN_CONTAINER_HEIGHT)\n    canvas.style.height = `${size.height}px`\n  }\n  return size\n}\n\nconst buildSelectionChildren = (selection: CropperSelection) => {\n  const grid = create<CropperGrid>(CropperGrid.$name)\n  grid.rows = 3\n  grid.columns = 3\n  grid.covered = true\n  grid.themeColor = GRID_COLOR\n  grid.setAttribute('role', 'grid')\n  selection.appendChild(grid)\n\n  const crosshair = create<CropperCrosshair>(CropperCrosshair.$name)\n  crosshair.centered = true\n  crosshair.themeColor = CROSSHAIR_COLOR\n  selection.appendChild(crosshair)\n\n  const face = create<CropperHandle>(CropperHandle.$name)\n  face.action = 'move'\n  face.themeColor = FACE_COLOR\n  selection.appendChild(face)\n\n  RESIZE_ACTIONS.forEach((action) => {\n    const handle = create<CropperHandle>(CropperHandle.$name)\n    handle.action = action\n    handle.themeColor = SELECTION_COLOR\n    selection.appendChild(handle)\n  })\n}\n\nconst build = async () => {\n  const token = ++buildToken\n  teardown()\n  loading.value = true\n\n  const host = hostEl.value\n  if (!host || !props.src) {\n    // Nothing to wait for: leaving the spinner up would make an empty cropper look like a stuck one.\n    loading.value = false\n    return\n  }\n\n  const canvas = create<CropperCanvas>(CropperCanvas.$name)\n  canvas.background = false\n  canvas.themeColor = SELECTION_COLOR\n  canvas.style.display = 'block'\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  const image = create<CropperImage>(CropperImage.$name)\n  image.alt = ''\n  image.initialFit = 'contain'\n  image.rotatable = false\n  image.skewable = false\n  image.translatable = false\n  image.scalable = true\n  image.src = props.src\n\n  const shade = create<CropperShade>(CropperShade.$name)\n  shade.themeColor = props.shadeColor\n  // Kept out of the way until the first crop box exists, or it would flash across the whole canvas.\n  shade.hidden = true\n\n  const selectHandle = create<CropperHandle>(CropperHandle.$name)\n  selectHandle.action = 'select'\n  selectHandle.plain = true\n\n  const selection = create<CropperSelection>(CropperSelection.$name)\n  selection.themeColor = SELECTION_COLOR\n  selection.movable = true\n  selection.resizable = true\n  selection.outlined = true\n  // Keep sub-pixel values: rounding to whole canvas pixels would drift the natural-pixel crop data\n  // that callers persist, and cropper.js v1 did not round either.\n  selection.precise = true\n  selection.aspectRatio = props.aspectRatio\n  buildSelectionChildren(selection)\n\n  // Listeners go on before anything is connected, so the action in flight is already known by the\n  // time the elements' own handlers react to it.\n  canvas.addEventListener('actionstart', onActionStart)\n  canvas.addEventListener('action', onAction)\n  canvas.addEventListener('actionend', onActionEnd)\n  image.addEventListener('transform', onImageTransform)\n  selection.addEventListener('change', onSelectionChange)\n\n  canvas.append(image, shade, selectHandle, selection)\n  // The whole tree is attached in one move on purpose: each element wires itself up to its siblings\n  // when it connects, and the shade in particular goes looking for the selection. Appending the\n  // children one at a time leaves it looking at an empty canvas, and it never follows the crop.\n  host.appendChild(canvas)\n  // Second pass, now that there is something in the host for its own constraints to act on.\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  let loaded: HTMLImageElement\n  try {\n    // The element runs the one request there is; its promise carries the picture that arrived.\n    loaded = await image.$ready()\n  } catch {\n    // Mirrors cropper.js v1, which simply never became ready on a broken source.\n    canvas.remove()\n    if (token === buildToken) loading.value = false\n    return\n  }\n  if (token !== buildToken) {\n    canvas.remove()\n    return\n  }\n\n  parts = { canvas, image, selection }\n  // Only now is the picture's own size known, so the canvas gets its real dimensions here rather\n  // than from a second request made ahead of time purely to measure it.\n  natural = { width: loaded.naturalWidth, height: loaded.naturalHeight }\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  // A prop that changed while the picture was loading found the watchers with no elements to write\n  // to. Re-reading the two that can vary closes that window; it is idempotent otherwise.\n  shade.themeColor = props.shadeColor\n  selection.aspectRatio = props.aspectRatio\n\n  centerImage()\n\n  laidOut = hostBox(host)\n  observeAncestors(host)\n  applyModelOrSeed()\n\n  loading.value = false\n  emit('ready')\n}\n\n/** Where the crop sits, as fractions of the image. */\nconst currentCrop = (): CropRect | null => {\n  if (!parts) return null\n  const bounds = imageBounds()\n  if (bounds.width <= 0 || bounds.height <= 0) return null\n  const rect = selectionRect()\n  return {\n    x: (rect.x - bounds.x) / bounds.width,\n    y: (rect.y - bounds.y) / bounds.height,\n    width: rect.width / bounds.width,\n    height: rect.height / bounds.height,\n  }\n}\n\n/** Puts a crop given in fractions onto the canvas, clamped to the picture. */\nconst applyCrop = (crop: CropRect) => {\n  const bounds = imageBounds()\n  if (!parts || bounds.width <= 0 || bounds.height <= 0) return\n  applyRect(\n    clampRectInside(\n      {\n        x: bounds.x + crop.x * bounds.width,\n        y: bounds.y + crop.y * bounds.height,\n        width: crop.width * bounds.width,\n        height: crop.height * bounds.height,\n      },\n      constraintBounds(),\n      props.aspectRatio\n    )\n  )\n}\n\nconst cropsAreClose = (a: CropRect | null, b: CropRect | null): boolean =>\n  a !== null &&\n  b !== null &&\n  Math.abs(a.x - b.x) < 0.0005 &&\n  Math.abs(a.y - b.y) < 0.0005 &&\n  Math.abs(a.width - b.width) < 0.0005 &&\n  Math.abs(a.height - b.height) < 0.0005\n\n/**\n * Hands the crop back up. Also called after the component itself has adjusted one — a stored region\n * rarely matches the configured ratio, and the binding should say where the crop really is rather\n * than where it was asked to be.\n */\nconst emitCrop = (alsoCommit = false) => {\n  const crop = currentCrop()\n  if (!crop) return\n  if (alsoCommit || !cropsAreClose(crop, lastEmitted)) {\n    lastEmitted = crop\n    emit('update:modelValue', crop)\n  }\n  if (alsoCommit) emit('commit', crop)\n}\n\n/** The room the host has: its width, and the height that will actually be shown. */\nconst hostBox = (host: HTMLElement): Size => ({ width: host.clientWidth, height: visibleHeightOf(host) })\n\n/** Re-fit the image to the new container while keeping the crop the user already chose. */\nconst relayout = () => {\n  const host = hostEl.value\n  if (!parts || !host) return\n  // A crop of no size means the last layout had none either — fall back to the bound one, which is\n  // what a cropper built inside a closed panel has been holding all along.\n  const wanted = currentCrop() ?? props.modelValue\n\n  const size = sizeCanvas(parts.canvas, host, host.clientWidth)\n  laidOut = hostBox(host)\n  // Re-read the ancestors as well: a cropper can be moved between frames, and the one clipping it\n  // now is the one whose height matters.\n  observeAncestors(host)\n  centerImage()\n  if (size.width <= 0 || size.height <= 0) return\n\n  if (wanted && wanted.width > 0) applyCrop(wanted)\n  else applyModelOrSeed()\n  emitCrop()\n}\n\nconst onHostBoxChanged = () => {\n  const host = hostEl.value\n  if (!host) return\n  const box = hostBox(host)\n  if (box.width <= 0 || box.height <= 0) return\n  // Compared against the box the current layout was built for, so a size seen while the cropper was\n  // still loading cannot be mistaken for one that has already been laid out.\n  if (box.width === laidOut.width && box.height === laidOut.height) return\n  if (!parts) return\n  // Deferred a frame: resizing the canvas from inside the observer's own callback is what makes\n  // Chromium report an undelivered-notification loop.\n  requestAnimationFrame(() => relayout())\n}\n\n// Height counts as much as width: the DAM sizes the cropper with `calc(100vh - 160px)`, so a\n// shorter window shrinks the frame without touching its width.\nuseResizeObserver(hostEl, onHostBoxChanged)\n\n/** An ancestor that clips can change how much it shows without the host's own box moving at all. */\nconst observeAncestors = (host: HTMLElement) => {\n  ancestorObserver?.disconnect()\n  const ancestors = clippingAncestorsOf(host)\n  if (ancestors.length === 0) {\n    ancestorObserver = null\n    return\n  }\n  ancestorObserver = new ResizeObserver(onHostBoxChanged)\n  ancestors.forEach((ancestor) => ancestorObserver?.observe(ancestor))\n}\n\nwatch(\n  () => props.src,\n  () => {\n    build()\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (model) => {\n    // Ignore the echo of what this component just handed up, or the two would write to each other\n    // for as long as the parent keeps binding it back.\n    if (!parts || !model || cropsAreClose(model, lastEmitted)) return\n    applyCrop(model)\n    emitCrop()\n  },\n  { deep: true }\n)\n\nwatch(\n  () => props.shadeColor,\n  (shadeColor) => {\n    const shade = parts?.canvas.querySelector<CropperShade>(CropperShade.$name)\n    if (shade) shade.themeColor = shadeColor\n  }\n)\n\nwatch(\n  () => props.aspectRatio,\n  (aspectRatio) => {\n    if (!parts) return\n    parts.selection.aspectRatio = aspectRatio\n    if (!isUsableAspectRatio(aspectRatio)) return\n    const current = selectionRect()\n    applyRect(clampRectInside({ ...current, height: current.width / aspectRatio }, constraintBounds(), aspectRatio))\n  }\n)\n\nonMounted(() => {\n  build()\n})\n\nonBeforeUnmount(() => {\n  buildToken += 1\n  teardown()\n})\n</script>\n\n<template>\n  <div class=\"a-cropper d-flex flex-column\">\n    <div\n      v-if=\"loading\"\n      class=\"d-flex w-100 align-center justify-center\"\n    >\n      <VProgressCircular\n        class=\"position-absolute\"\n        indeterminate\n      />\n    </div>\n\n    <div\n      ref=\"hostEl\"\n      class=\"a-cropper__container\"\n      :style=\"containerStyle\"\n      @wheel.capture=\"onWheelCapture\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\">\n// `cropper-crosshair` sizes itself in `em`, so without a size of its own the centre marker would\n// grow and shrink with whatever font the surrounding admin happens to use. 7px is the plus sign\n// cropper.js v1 drew through `.cropper-center`.\n.a-cropper cropper-crosshair {\n  font-size: 7px;\n}\n\n// cropper.js v1 drew a `.cropper-line` along each edge of the crop box: a 5px band of the selection\n// colour at a tenth opacity, sitting 3px outside the border and 2px inside it. It is what made the\n// thin outline read as a grabbable edge, so it is drawn here too — as a pair of shadows rather than\n// four elements, which keeps it independent of how the v2 grips happen to be sized.\n.a-cropper cropper-selection[outlined] {\n  box-shadow:\n    inset 0 0 0 2px rgb(51 153 255 / 10%),\n    0 0 0 3px rgb(51 153 255 / 10%);\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ACropper.js","names":["_sfc_main","ACropper_vue_vue_type_script_setup_true_lang_default","ACropper_default"],"sources":["../../../../../src/domains/dam/cropper/components/ACropper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport {\n  CropperCanvas,\n  CropperCrosshair,\n  CropperGrid,\n  CropperHandle,\n  CropperImage,\n  CropperSelection,\n  CropperShade,\n} from 'cropperjs'\nimport {\n  canvasSizeFor,\n  clampRectInside,\n  initialSelectionRect,\n  isUsableAspectRatio,\n  RESIZE_ANCHORS,\n  rectsAreClose,\n  type Rect,\n  type Size,\n} from '@/domains/dam/cropper/utils/cropperGeometry'\nimport type { CropRect } from '@/domains/dam/cropper/utils/cropperTypes'\n\n/**\n * Image cropper built on cropper.js v2's custom elements, replacing the v1-based `ACropperjs`.\n *\n * It lives here, beside `DamAssetImageRoiSelect`, because that is the only thing that uses it and\n * nothing outside this library does. It is not exported: shaping it to one need rather than to a\n * general audience is what keeps it to its size.\n *\n * The crop is bound, not fetched: `v-model` carries it as fractions of the image, and `commit` says\n * the user has finished a gesture. There is no imperative surface — the one thing a host wants to do\n * with a cropper is know where the crop is, and a binding says that better than six methods did.\n *\n * The elements are assembled in script rather than in the template on purpose: a consumer of this\n * library does not configure `isCustomElement` in their own build, and setting element *properties*\n * instead of going through attribute strings avoids the coercion surprises (`NaN`, booleans,\n * fractional numbers) that come with the attribute round-trip.\n */\n\nconst props = withDefaults(\n  defineProps<{\n    src?: string\n    /** The crop, as fractions of the image. Leave it null to start from the default box. */\n    modelValue?: CropRect | null\n    /** `NaN` (the default) leaves the crop free-form. */\n    aspectRatio?: number\n    containerStyle?: { [key: string]: string } | undefined\n    /** Wash over everything outside the crop — the replacement for overriding `.cropper-modal`. */\n    shadeColor?: string\n  }>(),\n  {\n    src: '',\n    modelValue: null,\n    aspectRatio: NaN,\n    containerStyle: undefined,\n    shadeColor: 'rgba(0, 0, 0, 0.5)',\n  }\n)\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', crop: CropRect): void\n  /** The user has finished a gesture; the crop is worth saving. */\n  (event: 'commit', crop: CropRect): void\n  (event: 'ready'): void\n}>()\n\n// cropper.js registers its elements as a side effect of loading its entry, and this package's\n// `sideEffects` lets the consumer's bundler drop that module once only the classes are used. `$define`\n// is a no-op for an element that is already registered.\nfor (const element of [\n  CropperCanvas,\n  CropperCrosshair,\n  CropperGrid,\n  CropperHandle,\n  CropperImage,\n  CropperSelection,\n  CropperShade,\n]) {\n  element.$define()\n}\n\n/**\n * Settings the one caller never varies, kept as constants rather than as props nobody passes.\n * Each of them is behaviour, not preference: no checkerboard behind a photograph, the wheel left to\n * the page, pinch zoom kept for tablets, and the minimum canvas cropper.js' own stylesheet declares.\n */\nconst AUTO_CROP_AREA = 0.8\nconst MIN_CONTAINER_WIDTH = 200\nconst MIN_CONTAINER_HEIGHT = 100\n\n// Matched to cropper.js v1's stylesheet so the two components are indistinguishable side by side.\nconst SELECTION_COLOR = 'rgba(51, 153, 255, 0.75)'\nconst FACE_COLOR = 'rgba(255, 255, 255, 0.1)'\nconst GRID_COLOR = 'rgba(238, 238, 238, 0.5)'\nconst CROSSHAIR_COLOR = 'rgba(238, 238, 238, 0.75)'\nconst RESIZE_ACTIONS = [\n  'n-resize',\n  'e-resize',\n  's-resize',\n  'w-resize',\n  'ne-resize',\n  'nw-resize',\n  'se-resize',\n  'sw-resize',\n]\n\ninterface CropperParts {\n  canvas: CropperCanvas\n  image: CropperImage\n  selection: CropperSelection\n}\n\nconst hostEl = useTemplateRef<HTMLDivElement>('hostEl')\nconst loading = ref(true)\n\nlet parts: CropperParts | null = null\nlet natural: Size = { width: 0, height: 0 }\n/** The action cropper.js is currently performing, so a clamp knows which edge to hold still. */\nlet currentAction: string | null = null\n/** Guards the re-entrant `$change` a clamp performs from being clamped again. */\nlet clamping = false\n/** Guards the half-applied transforms `$center` emits between its move and its scale. */\nlet centring = false\n/** Invalidates an in-flight build when `src` changes or the component goes away mid-load. */\nlet buildToken = 0\n/** The host box the current layout was computed for — not merely the last one observed. */\nlet laidOut: Size = { width: 0, height: 0 }\n/** The last crop handed out, so a model written straight back is not mistaken for a new one. */\nlet lastEmitted: CropRect | null = null\n/** Watches the ancestors that clip the host; their height is part of the room it has. */\nlet ancestorObserver: ResizeObserver | null = null\n\nconst create = <T extends HTMLElement>(name: string): T => document.createElement(name) as T\n\n/** The image box in canvas coordinates. Read from layout so panning and zooming stay accounted for. */\nconst imageBounds = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const canvasRect = parts.canvas.getBoundingClientRect()\n  const imageRect = parts.image.getBoundingClientRect()\n  return {\n    x: imageRect.left - canvasRect.left,\n    y: imageRect.top - canvasRect.top,\n    width: imageRect.width,\n    height: imageRect.height,\n  }\n}\n\n/**\n * Where the crop is allowed to be: the image, but never outside the visible canvas. The two are the\n * same box until the image is zoomed past its frame, and then it is the frame that wins — cropper.js\n * v1 limited its crop box to the canvas and the container both, so a zoomed-in image never let the\n * crop wander off the part of it you could actually see.\n */\nconst constraintBounds = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const image = imageBounds()\n  const canvas = parts.canvas.getBoundingClientRect()\n  const left = Math.max(image.x, 0)\n  const top = Math.max(image.y, 0)\n  const right = Math.min(image.x + image.width, canvas.width)\n  const bottom = Math.min(image.y + image.height, canvas.height)\n  return { x: left, y: top, width: Math.max(0, right - left), height: Math.max(0, bottom - top) }\n}\n\nconst selectionRect = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const { x, y, width, height } = parts.selection\n  return { x, y, width, height }\n}\n\nconst applyRect = (rect: Rect) => {\n  if (!parts) return\n  clamping = true\n  parts.selection.$change(rect.x, rect.y, rect.width, rect.height, props.aspectRatio, true)\n  clamping = false\n}\n\n/**\n * Re-fits the image to the canvas. cropper.js only lets `$center` scale and move an image that is\n * marked scalable and translatable — it grants itself that permission while the image is still\n * loading, but not afterwards — so the flags are lifted for the call and put back straight after.\n */\nconst centerImage = () => {\n  if (!parts) return\n  const { image } = parts\n  const { scalable, translatable } = image\n  centring = true\n  image.scalable = true\n  image.translatable = true\n  image.$center('contain')\n  image.scalable = scalable\n  image.translatable = translatable\n  centring = false\n}\n\n/**\n * The crop a fresh picture starts with. Computed here rather than handed to cropper.js'\n * `initialCoverage`, whose deferred initialisation would land *after* a `ready` handler had already\n * positioned the crop. It is measured against the image rather than the canvas, which are the same\n * box for a source wider than its container and are not once the image sits centred between margins.\n */\nconst seedInitialCrop = () => {\n  if (!parts) return\n  const bounds = imageBounds()\n  if (bounds.width <= 0 || bounds.height <= 0) return\n  const initial = initialSelectionRect(bounds, props.aspectRatio, AUTO_CROP_AREA)\n  applyRect({ ...initial, x: initial.x + bounds.x, y: initial.y + bounds.y })\n}\n\n/** Uses the bound crop if there is one, and the default box if there is not. */\nconst applyModelOrSeed = () => {\n  const model = props.modelValue\n  if (model && model.width > 0 && model.height > 0) applyCrop(model)\n  else seedInitialCrop()\n  emitCrop()\n}\n\n/** Pulls the selection back inside the image after something moved the image out from under it. */\nconst refit = () => {\n  if (!parts || centring) return\n  const current = selectionRect()\n  if (current.width <= 0 || current.height <= 0) return\n  const fitted = clampRectInside(current, constraintBounds(), props.aspectRatio)\n  if (!rectsAreClose(current, fitted)) applyRect(fitted)\n}\n\nconst onSelectionChange = (event: Event) => {\n  if (clamping || !parts) return\n  const detail = (event as CustomEvent<Rect>).detail\n  if (!detail) return\n  // cropper.js reverses the action when a grip is dragged through the opposite edge, and it records\n  // that on the canvas just before emitting this event — one move ahead of the `action` event the\n  // tracking below sees. Prefer its own answer, and fall back if a future version stops publishing it.\n  const liveAction = (parts.canvas as unknown as { $action?: unknown }).$action\n  const action = typeof liveAction === 'string' && liveAction ? liveAction : currentAction\n  const anchor = action ? RESIZE_ANCHORS[action] : undefined\n  const clamped = clampRectInside(detail, constraintBounds(), props.aspectRatio, anchor)\n  if (rectsAreClose(detail, clamped)) return\n  // Rejecting the change and re-issuing the clamped one is what keeps the crop sliding along the\n  // border instead of freezing there; the shade reads `defaultPrevented` and follows the new values.\n  event.preventDefault()\n  applyRect(clamped)\n}\n\nconst onActionStart = (event: Event) => {\n  currentAction = (event as CustomEvent<{ action?: string }>).detail?.action ?? null\n}\n\nconst onAction = (event: Event) => {\n  const action = (event as CustomEvent<{ action?: string }>).detail?.action\n  // cropper.js turns a fresh \"select\" drag into the matching corner resize once it knows the\n  // direction, and reports the new action on the next move — follow it so the anchor stays right.\n  if (action) currentAction = action\n}\n\nconst onActionEnd = () => {\n  currentAction = null\n  emitCrop(true)\n}\n\n/**\n * The canvas must never see a wheel event: its own handler calls `preventDefault()` unconditionally,\n * which would swallow page scrolling over the picture the way cropper.js v1 never did. Pinching is\n * unaffected — that arrives as pointer events, and the picture stays scalable for it.\n */\nconst onWheelCapture = (event: WheelEvent) => {\n  event.stopPropagation()\n}\n\n/**\n * cropper.js emits `transform` *before* it writes the new matrix to the element's style (it sets the\n * new transform to measure the result, puts the old one back, then emits and finally commits). Re-\n * fitting straight away would therefore measure the image as it was: after a zoom out the crop would\n * be judged against the larger, previous picture and left hanging over the edge of the new one.\n */\nconst onImageTransform = () => queueMicrotask(refit)\n\nconst teardown = () => {\n  if (parts) {\n    const { canvas, image, selection } = parts\n    selection.removeEventListener('change', onSelectionChange)\n    canvas.removeEventListener('actionstart', onActionStart)\n    canvas.removeEventListener('action', onAction)\n    canvas.removeEventListener('actionend', onActionEnd)\n    image.removeEventListener('transform', onImageTransform)\n  }\n  // Every canvas, not just the one on `parts`: a build that was superseded while still waiting on\n  // its image has already put one in the DOM and has nothing tracking it yet.\n  hostEl.value?.querySelectorAll(CropperCanvas.$name).forEach((canvas) => {\n    // Disconnecting a `cropper-image` drops its listeners but leaves its request running, and the\n    // `$ready()` promise waiting on it keeps this component reachable until the server answers.\n    canvas.querySelectorAll<CropperImage>(CropperImage.$name).forEach((image) => {\n      if (image.$image) image.$image.src = ''\n    })\n    canvas.remove()\n  })\n  ancestorObserver?.disconnect()\n  ancestorObserver = null\n  parts = null\n  natural = { width: 0, height: 0 }\n  laidOut = { width: 0, height: 0 }\n  currentAction = null\n}\n\n/**\n * How much of the host's height will actually be shown.\n *\n * The host's own `max-height` is the usual answer, and the one `DamAssetImageRoiSelect` relies on.\n * Ancestors count too when they clip with `overflow: hidden` — what they cut off cannot be scrolled\n * back into view, so it is no more reachable than the host's own overflow. An ancestor that\n * scrolls is left alone: there the rest of the picture is a scroll away, not gone.\n */\nconst clippingAncestorsOf = (host: HTMLElement): HTMLElement[] => {\n  const found: HTMLElement[] = []\n  let ancestor = host.parentElement\n  while (ancestor && ancestor !== document.body && ancestor !== document.documentElement) {\n    const { overflowY } = window.getComputedStyle(ancestor)\n    if (overflowY === 'hidden' || overflowY === 'clip') found.push(ancestor)\n    ancestor = ancestor.parentElement\n  }\n  return found\n}\n\nconst visibleHeightOf = (host: HTMLElement): number => {\n  let available = host.clientHeight\n  const hostTop = host.getBoundingClientRect().top\n\n  clippingAncestorsOf(host).forEach((ancestor) => {\n    const rect = ancestor.getBoundingClientRect()\n    // From wherever the host starts being visible down to where the ancestor stops showing anything.\n    // Taking the ancestor's own top into account matters when the host begins above it: what is\n    // scrolled or positioned off the top is just as unreachable as what falls off the bottom.\n    const room = rect.bottom - Math.max(rect.top, hostTop)\n    if (room > 0) available = Math.min(available, room)\n  })\n\n  return available\n}\n\n/**\n * Sizes the canvas to the room the host actually gives it, in two passes because the second answer\n * depends on the first: the height a picture wants follows from its width, but a frame with a\n * `max-height` only reveals how much of that it will show once something is in it.\n *\n * cropper.js v1 did the same dance with its `<img>`, and the point of it is that its cropper never\n * overflowed: a tall picture in a short frame was scaled down to fit rather than cut off at the\n * bottom, where the part of the crop hidden by `overflow: hidden` could not be reached again.\n */\nconst sizeCanvas = (canvas: CropperCanvas, host: HTMLElement, availableWidth: number): Size => {\n  const size = canvasSizeFor(natural, availableWidth, MIN_CONTAINER_WIDTH, MIN_CONTAINER_HEIGHT)\n  canvas.style.width = `${size.width}px`\n  canvas.style.height = `${size.height}px`\n\n  const visibleHeight = visibleHeightOf(host)\n  if (visibleHeight > 0 && visibleHeight < size.height) {\n    size.height = Math.max(visibleHeight, MIN_CONTAINER_HEIGHT)\n    canvas.style.height = `${size.height}px`\n  }\n  return size\n}\n\nconst buildSelectionChildren = (selection: CropperSelection) => {\n  const grid = create<CropperGrid>(CropperGrid.$name)\n  grid.rows = 3\n  grid.columns = 3\n  grid.covered = true\n  grid.themeColor = GRID_COLOR\n  grid.setAttribute('role', 'grid')\n  selection.appendChild(grid)\n\n  const crosshair = create<CropperCrosshair>(CropperCrosshair.$name)\n  crosshair.centered = true\n  crosshair.themeColor = CROSSHAIR_COLOR\n  selection.appendChild(crosshair)\n\n  const face = create<CropperHandle>(CropperHandle.$name)\n  face.action = 'move'\n  face.themeColor = FACE_COLOR\n  selection.appendChild(face)\n\n  RESIZE_ACTIONS.forEach((action) => {\n    const handle = create<CropperHandle>(CropperHandle.$name)\n    handle.action = action\n    handle.themeColor = SELECTION_COLOR\n    selection.appendChild(handle)\n  })\n}\n\nconst build = async () => {\n  const token = ++buildToken\n  teardown()\n  loading.value = true\n\n  const host = hostEl.value\n  if (!host || !props.src) {\n    // Nothing to wait for: leaving the spinner up would make an empty cropper look like a stuck one.\n    loading.value = false\n    return\n  }\n\n  const canvas = create<CropperCanvas>(CropperCanvas.$name)\n  canvas.background = false\n  canvas.themeColor = SELECTION_COLOR\n  canvas.style.display = 'block'\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  const image = create<CropperImage>(CropperImage.$name)\n  image.alt = ''\n  image.initialFit = 'contain'\n  image.rotatable = false\n  image.skewable = false\n  image.translatable = false\n  image.scalable = true\n  image.src = props.src\n\n  const shade = create<CropperShade>(CropperShade.$name)\n  shade.themeColor = props.shadeColor\n  // Kept out of the way until the first crop box exists, or it would flash across the whole canvas.\n  shade.hidden = true\n\n  const selectHandle = create<CropperHandle>(CropperHandle.$name)\n  selectHandle.action = 'select'\n  selectHandle.plain = true\n\n  const selection = create<CropperSelection>(CropperSelection.$name)\n  selection.themeColor = SELECTION_COLOR\n  selection.movable = true\n  selection.resizable = true\n  selection.outlined = true\n  // Keep sub-pixel values: rounding to whole canvas pixels would drift the natural-pixel crop data\n  // that callers persist, and cropper.js v1 did not round either.\n  selection.precise = true\n  selection.aspectRatio = props.aspectRatio\n  buildSelectionChildren(selection)\n\n  // Listeners go on before anything is connected, so the action in flight is already known by the\n  // time the elements' own handlers react to it.\n  canvas.addEventListener('actionstart', onActionStart)\n  canvas.addEventListener('action', onAction)\n  canvas.addEventListener('actionend', onActionEnd)\n  image.addEventListener('transform', onImageTransform)\n  selection.addEventListener('change', onSelectionChange)\n\n  canvas.append(image, shade, selectHandle, selection)\n  // The whole tree is attached in one move on purpose: each element wires itself up to its siblings\n  // when it connects, and the shade in particular goes looking for the selection. Appending the\n  // children one at a time leaves it looking at an empty canvas, and it never follows the crop.\n  host.appendChild(canvas)\n  // Second pass, now that there is something in the host for its own constraints to act on.\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  let loaded: HTMLImageElement\n  try {\n    // The element runs the one request there is; its promise carries the picture that arrived.\n    loaded = await image.$ready()\n  } catch {\n    // Mirrors cropper.js v1, which simply never became ready on a broken source.\n    canvas.remove()\n    if (token === buildToken) loading.value = false\n    return\n  }\n  if (token !== buildToken) {\n    canvas.remove()\n    return\n  }\n\n  parts = { canvas, image, selection }\n  // Only now is the picture's own size known, so the canvas gets its real dimensions here rather\n  // than from a second request made ahead of time purely to measure it.\n  natural = { width: loaded.naturalWidth, height: loaded.naturalHeight }\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  // A prop that changed while the picture was loading found the watchers with no elements to write\n  // to. Re-reading the two that can vary closes that window; it is idempotent otherwise.\n  shade.themeColor = props.shadeColor\n  selection.aspectRatio = props.aspectRatio\n\n  centerImage()\n\n  laidOut = hostBox(host)\n  observeAncestors(host)\n  applyModelOrSeed()\n\n  loading.value = false\n  emit('ready')\n}\n\n/** Where the crop sits, as fractions of the image. */\nconst currentCrop = (): CropRect | null => {\n  if (!parts) return null\n  const bounds = imageBounds()\n  if (bounds.width <= 0 || bounds.height <= 0) return null\n  const rect = selectionRect()\n  return {\n    x: (rect.x - bounds.x) / bounds.width,\n    y: (rect.y - bounds.y) / bounds.height,\n    width: rect.width / bounds.width,\n    height: rect.height / bounds.height,\n  }\n}\n\n/** Puts a crop given in fractions onto the canvas, clamped to the picture. */\nconst applyCrop = (crop: CropRect) => {\n  const bounds = imageBounds()\n  if (!parts || bounds.width <= 0 || bounds.height <= 0) return\n  applyRect(\n    clampRectInside(\n      {\n        x: bounds.x + crop.x * bounds.width,\n        y: bounds.y + crop.y * bounds.height,\n        width: crop.width * bounds.width,\n        height: crop.height * bounds.height,\n      },\n      constraintBounds(),\n      props.aspectRatio\n    )\n  )\n}\n\nconst cropsAreClose = (a: CropRect | null, b: CropRect | null): boolean =>\n  a !== null &&\n  b !== null &&\n  Math.abs(a.x - b.x) < 0.0005 &&\n  Math.abs(a.y - b.y) < 0.0005 &&\n  Math.abs(a.width - b.width) < 0.0005 &&\n  Math.abs(a.height - b.height) < 0.0005\n\n/**\n * Hands the crop back up. Also called after the component itself has adjusted one — a stored region\n * rarely matches the configured ratio, and the binding should say where the crop really is rather\n * than where it was asked to be.\n */\nconst emitCrop = (alsoCommit = false) => {\n  const crop = currentCrop()\n  if (!crop) return\n  if (alsoCommit || !cropsAreClose(crop, lastEmitted)) {\n    lastEmitted = crop\n    emit('update:modelValue', crop)\n  }\n  if (alsoCommit) emit('commit', crop)\n}\n\n/** The room the host has: its width, and the height that will actually be shown. */\nconst hostBox = (host: HTMLElement): Size => ({ width: host.clientWidth, height: visibleHeightOf(host) })\n\n/** Re-fit the image to the new container while keeping the crop the user already chose. */\nconst relayout = () => {\n  const host = hostEl.value\n  if (!parts || !host) return\n  // A crop of no size means the last layout had none either — fall back to the bound one, which is\n  // what a cropper built inside a closed panel has been holding all along.\n  const wanted = currentCrop() ?? props.modelValue\n\n  const size = sizeCanvas(parts.canvas, host, host.clientWidth)\n  laidOut = hostBox(host)\n  // Re-read the ancestors as well: a cropper can be moved between frames, and the one clipping it\n  // now is the one whose height matters.\n  observeAncestors(host)\n  centerImage()\n  if (size.width <= 0 || size.height <= 0) return\n\n  if (wanted && wanted.width > 0) applyCrop(wanted)\n  else applyModelOrSeed()\n  emitCrop()\n}\n\nconst onHostBoxChanged = () => {\n  const host = hostEl.value\n  if (!host) return\n  const box = hostBox(host)\n  if (box.width <= 0 || box.height <= 0) return\n  // Compared against the box the current layout was built for, so a size seen while the cropper was\n  // still loading cannot be mistaken for one that has already been laid out.\n  if (box.width === laidOut.width && box.height === laidOut.height) return\n  if (!parts) return\n  // Deferred a frame: resizing the canvas from inside the observer's own callback is what makes\n  // Chromium report an undelivered-notification loop.\n  requestAnimationFrame(() => relayout())\n}\n\n// Height counts as much as width: the DAM sizes the cropper with `calc(100vh - 160px)`, so a\n// shorter window shrinks the frame without touching its width.\nuseResizeObserver(hostEl, onHostBoxChanged)\n\n/** An ancestor that clips can change how much it shows without the host's own box moving at all. */\nconst observeAncestors = (host: HTMLElement) => {\n  ancestorObserver?.disconnect()\n  const ancestors = clippingAncestorsOf(host)\n  if (ancestors.length === 0) {\n    ancestorObserver = null\n    return\n  }\n  ancestorObserver = new ResizeObserver(onHostBoxChanged)\n  ancestors.forEach((ancestor) => ancestorObserver?.observe(ancestor))\n}\n\nwatch(\n  () => props.src,\n  () => {\n    build()\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (model) => {\n    // Ignore the echo of what this component just handed up, or the two would write to each other\n    // for as long as the parent keeps binding it back.\n    if (!parts || !model || cropsAreClose(model, lastEmitted)) return\n    applyCrop(model)\n    emitCrop()\n  },\n  { deep: true }\n)\n\nwatch(\n  () => props.shadeColor,\n  (shadeColor) => {\n    const shade = parts?.canvas.querySelector<CropperShade>(CropperShade.$name)\n    if (shade) shade.themeColor = shadeColor\n  }\n)\n\nwatch(\n  () => props.aspectRatio,\n  (aspectRatio) => {\n    if (!parts) return\n    parts.selection.aspectRatio = aspectRatio\n    if (!isUsableAspectRatio(aspectRatio)) return\n    const current = selectionRect()\n    applyRect(clampRectInside({ ...current, height: current.width / aspectRatio }, constraintBounds(), aspectRatio))\n  }\n)\n\nonMounted(() => {\n  build()\n})\n\nonBeforeUnmount(() => {\n  buildToken += 1\n  teardown()\n})\n</script>\n\n<template>\n  <div class=\"a-cropper d-flex flex-column\">\n    <div\n      v-if=\"loading\"\n      class=\"d-flex w-100 align-center justify-center\"\n    >\n      <VProgressCircular\n        class=\"position-absolute\"\n        indeterminate\n      />\n    </div>\n\n    <div\n      ref=\"hostEl\"\n      class=\"a-cropper__container\"\n      :style=\"containerStyle\"\n      @wheel.capture=\"onWheelCapture\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\">\n// `cropper-crosshair` sizes itself in `em`, so without a size of its own the centre marker would\n// grow and shrink with whatever font the surrounding admin happens to use. 7px is the plus sign\n// cropper.js v1 drew through `.cropper-center`.\n.a-cropper cropper-crosshair {\n  font-size: 7px;\n}\n\n// cropper.js v1 drew a `.cropper-line` along each edge of the crop box: a 5px band of the selection\n// colour at a tenth opacity, sitting 3px outside the border and 2px inside it. It is what made the\n// thin outline read as a grabbable edge, so it is drawn here too — as a pair of shadows rather than\n// four elements, which keeps it independent of how the v2 grips happen to be sized.\n.a-cropper cropper-selection[outlined] {\n  box-shadow:\n    inset 0 0 0 2px rgb(51 153 255 / 10%),\n    0 0 0 3px rgb(51 153 255 / 10%);\n}\n</style>\n"],"mappings":""}

package/dist/domains/dam/cropper/components/ACropper.vue_vue_type_script_setup_true_lang.js

@@ -5,12 +5,12 @@ import r from "../../../../vendor/@cropper/element-handle/dist/element-handle.es
 import i from "../../../../vendor/@cropper/element-selection/dist/element-selection.esm.raw.js";
 import a from "../../../../vendor/@cropper/element-grid/dist/element-grid.esm.raw.js";
 import o from "../../../../vendor/@cropper/element-crosshair/dist/element-crosshair.esm.raw.js";
-import "../../../../vendor/cropperjs2/dist/cropper.esm.raw.js";
+import "../../../../vendor/cropperjs/dist/cropper.esm.raw.js";
 import { RESIZE_ANCHORS as s, canvasSizeFor as c, clampRectInside as l, initialSelectionRect as u, isUsableAspectRatio as d, rectsAreClose as f } from "../utils/cropperGeometry.js";
 import { createCommentVNode as ee, createElementBlock as p, createElementVNode as te, createVNode as ne, defineComponent as m, normalizeStyle as re, onBeforeUnmount as ie, onMounted as ae, openBlock as h, ref as oe, useTemplateRef as se, watch as g } from "vue";
 import { useResizeObserver as ce } from "@vueuse/core";
 import { VProgressCircular as le } from "vuetify/components/VProgressCircular";
-//#region src/domains/dam/cropper/components/ACropper.vue?vue&type=script&setup=true&lang.ts
+// src/domains/dam/cropper/components/ACropper.vue?vue&type=script&setup=true&lang.ts
 var ue = { class: "a-cropper d-flex flex-column" }, de = {
 	key: 0,
 	class: "d-flex w-100 align-center justify-center"
@@ -285,7 +285,6 @@ var ue = { class: "a-cropper d-flex flex-column" }, de = {
 		}, null, 36)]));
 	}
 });
-//#endregion
 export { y as default };
 
 //# sourceMappingURL=ACropper.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/dam/cropper/components/ACropper.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ACropper.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_component_VProgressCircular","_createCommentVNode","_createElementVNode","_normalizeStyle","CropperCanvas","CropperImage","CropperShade","CropperHandle","CropperSelection","CropperGrid","CropperCrosshair","_hoisted_1","_hoisted_2","AUTO_CROP_AREA","MIN_CONTAINER_WIDTH","MIN_CONTAINER_HEIGHT","SELECTION_COLOR","FACE_COLOR","GRID_COLOR","CROSSHAIR_COLOR","ACropper_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","element","RESIZE_ACTIONS","hostEl","useTemplateRef","loading","ref","parts","natural","currentAction","clamping","centring","buildToken","laidOut","lastEmitted","ancestorObserver","create","name","imageBounds","canvasRect","imageRect","constraintBounds","image","canvas","left","top","right","bottom","selectionRect","applyRect","rect","centerImage","scalable","translatable","seedInitialCrop","bounds","initial","initialSelectionRect","applyModelOrSeed","model","applyCrop","emitCrop","refit","current","fitted","clampRectInside","rectsAreClose","onSelectionChange","detail","event","liveAction","action","anchor","RESIZE_ANCHORS","clamped","onActionStart","onAction","onActionEnd","onWheelCapture","onImageTransform","teardown","selection","clippingAncestorsOf","found","ancestor","host","overflowY","visibleHeightOf","available","hostTop","room","sizeCanvas","size","canvasSizeFor","availableWidth","visibleHeight","buildSelectionChildren","grid","crosshair","face","handle","build","token","shade","selectHandle","loaded","hostBox","observeAncestors","currentCrop","crop","cropsAreClose","a","b","alsoCommit","relayout","wanted","onHostBoxChanged","box","ancestors","watch","shadeColor","aspectRatio","isUsableAspectRatio","onMounted","onBeforeUnmount","openBlock","createElementBlock","createVNode","VProgressCircular","createCommentVNode","createElementVNode","normalizeStyle"],"sources":["../../../../../src/domains/dam/cropper/components/ACropper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport {\n  CropperCanvas,\n  CropperCrosshair,\n  CropperGrid,\n  CropperHandle,\n  CropperImage,\n  CropperSelection,\n  CropperShade,\n} from 'cropperjs2'\nimport {\n  canvasSizeFor,\n  clampRectInside,\n  initialSelectionRect,\n  isUsableAspectRatio,\n  RESIZE_ANCHORS,\n  rectsAreClose,\n  type Rect,\n  type Size,\n} from '@/domains/dam/cropper/utils/cropperGeometry'\nimport type { CropRect } from '@/domains/dam/cropper/utils/cropperTypes'\n\n/**\n * Image cropper built on cropper.js v2's custom elements, replacing the v1-based `ACropperjs`.\n *\n * It lives here, beside `DamAssetImageRoiSelect`, because that is the only thing that uses it and\n * nothing outside this library does. It is not exported: shaping it to one need rather than to a\n * general audience is what keeps it to its size.\n *\n * The crop is bound, not fetched: `v-model` carries it as fractions of the image, and `commit` says\n * the user has finished a gesture. There is no imperative surface — the one thing a host wants to do\n * with a cropper is know where the crop is, and a binding says that better than six methods did.\n *\n * The elements are assembled in script rather than in the template on purpose: a consumer of this\n * library does not configure `isCustomElement` in their own build, and setting element *properties*\n * instead of going through attribute strings avoids the coercion surprises (`NaN`, booleans,\n * fractional numbers) that come with the attribute round-trip.\n */\n\nconst props = withDefaults(\n  defineProps<{\n    src?: string\n    /** The crop, as fractions of the image. Leave it null to start from the default box. */\n    modelValue?: CropRect | null\n    /** `NaN` (the default) leaves the crop free-form. */\n    aspectRatio?: number\n    containerStyle?: { [key: string]: string } | undefined\n    /** Wash over everything outside the crop — the replacement for overriding `.cropper-modal`. */\n    shadeColor?: string\n  }>(),\n  {\n    src: '',\n    modelValue: null,\n    aspectRatio: NaN,\n    containerStyle: undefined,\n    shadeColor: 'rgba(0, 0, 0, 0.5)',\n  }\n)\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', crop: CropRect): void\n  /** The user has finished a gesture; the crop is worth saving. */\n  (event: 'commit', crop: CropRect): void\n  (event: 'ready'): void\n}>()\n\n// cropper.js registers its elements as a side effect of loading its entry, and this package's\n// `sideEffects` lets the consumer's bundler drop that module once only the classes are used. `$define`\n// is a no-op for an element that is already registered.\nfor (const element of [\n  CropperCanvas,\n  CropperCrosshair,\n  CropperGrid,\n  CropperHandle,\n  CropperImage,\n  CropperSelection,\n  CropperShade,\n]) {\n  element.$define()\n}\n\n/**\n * Settings the one caller never varies, kept as constants rather than as props nobody passes.\n * Each of them is behaviour, not preference: no checkerboard behind a photograph, the wheel left to\n * the page, pinch zoom kept for tablets, and the minimum canvas cropper.js' own stylesheet declares.\n */\nconst AUTO_CROP_AREA = 0.8\nconst MIN_CONTAINER_WIDTH = 200\nconst MIN_CONTAINER_HEIGHT = 100\n\n// Matched to cropper.js v1's stylesheet so the two components are indistinguishable side by side.\nconst SELECTION_COLOR = 'rgba(51, 153, 255, 0.75)'\nconst FACE_COLOR = 'rgba(255, 255, 255, 0.1)'\nconst GRID_COLOR = 'rgba(238, 238, 238, 0.5)'\nconst CROSSHAIR_COLOR = 'rgba(238, 238, 238, 0.75)'\nconst RESIZE_ACTIONS = [\n  'n-resize',\n  'e-resize',\n  's-resize',\n  'w-resize',\n  'ne-resize',\n  'nw-resize',\n  'se-resize',\n  'sw-resize',\n]\n\ninterface CropperParts {\n  canvas: CropperCanvas\n  image: CropperImage\n  selection: CropperSelection\n}\n\nconst hostEl = useTemplateRef<HTMLDivElement>('hostEl')\nconst loading = ref(true)\n\nlet parts: CropperParts | null = null\nlet natural: Size = { width: 0, height: 0 }\n/** The action cropper.js is currently performing, so a clamp knows which edge to hold still. */\nlet currentAction: string | null = null\n/** Guards the re-entrant `$change` a clamp performs from being clamped again. */\nlet clamping = false\n/** Guards the half-applied transforms `$center` emits between its move and its scale. */\nlet centring = false\n/** Invalidates an in-flight build when `src` changes or the component goes away mid-load. */\nlet buildToken = 0\n/** The host box the current layout was computed for — not merely the last one observed. */\nlet laidOut: Size = { width: 0, height: 0 }\n/** The last crop handed out, so a model written straight back is not mistaken for a new one. */\nlet lastEmitted: CropRect | null = null\n/** Watches the ancestors that clip the host; their height is part of the room it has. */\nlet ancestorObserver: ResizeObserver | null = null\n\nconst create = <T extends HTMLElement>(name: string): T => document.createElement(name) as T\n\n/** The image box in canvas coordinates. Read from layout so panning and zooming stay accounted for. */\nconst imageBounds = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const canvasRect = parts.canvas.getBoundingClientRect()\n  const imageRect = parts.image.getBoundingClientRect()\n  return {\n    x: imageRect.left - canvasRect.left,\n    y: imageRect.top - canvasRect.top,\n    width: imageRect.width,\n    height: imageRect.height,\n  }\n}\n\n/**\n * Where the crop is allowed to be: the image, but never outside the visible canvas. The two are the\n * same box until the image is zoomed past its frame, and then it is the frame that wins — cropper.js\n * v1 limited its crop box to the canvas and the container both, so a zoomed-in image never let the\n * crop wander off the part of it you could actually see.\n */\nconst constraintBounds = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const image = imageBounds()\n  const canvas = parts.canvas.getBoundingClientRect()\n  const left = Math.max(image.x, 0)\n  const top = Math.max(image.y, 0)\n  const right = Math.min(image.x + image.width, canvas.width)\n  const bottom = Math.min(image.y + image.height, canvas.height)\n  return { x: left, y: top, width: Math.max(0, right - left), height: Math.max(0, bottom - top) }\n}\n\nconst selectionRect = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const { x, y, width, height } = parts.selection\n  return { x, y, width, height }\n}\n\nconst applyRect = (rect: Rect) => {\n  if (!parts) return\n  clamping = true\n  parts.selection.$change(rect.x, rect.y, rect.width, rect.height, props.aspectRatio, true)\n  clamping = false\n}\n\n/**\n * Re-fits the image to the canvas. cropper.js only lets `$center` scale and move an image that is\n * marked scalable and translatable — it grants itself that permission while the image is still\n * loading, but not afterwards — so the flags are lifted for the call and put back straight after.\n */\nconst centerImage = () => {\n  if (!parts) return\n  const { image } = parts\n  const { scalable, translatable } = image\n  centring = true\n  image.scalable = true\n  image.translatable = true\n  image.$center('contain')\n  image.scalable = scalable\n  image.translatable = translatable\n  centring = false\n}\n\n/**\n * The crop a fresh picture starts with. Computed here rather than handed to cropper.js'\n * `initialCoverage`, whose deferred initialisation would land *after* a `ready` handler had already\n * positioned the crop. It is measured against the image rather than the canvas, which are the same\n * box for a source wider than its container and are not once the image sits centred between margins.\n */\nconst seedInitialCrop = () => {\n  if (!parts) return\n  const bounds = imageBounds()\n  if (bounds.width <= 0 || bounds.height <= 0) return\n  const initial = initialSelectionRect(bounds, props.aspectRatio, AUTO_CROP_AREA)\n  applyRect({ ...initial, x: initial.x + bounds.x, y: initial.y + bounds.y })\n}\n\n/** Uses the bound crop if there is one, and the default box if there is not. */\nconst applyModelOrSeed = () => {\n  const model = props.modelValue\n  if (model && model.width > 0 && model.height > 0) applyCrop(model)\n  else seedInitialCrop()\n  emitCrop()\n}\n\n/** Pulls the selection back inside the image after something moved the image out from under it. */\nconst refit = () => {\n  if (!parts || centring) return\n  const current = selectionRect()\n  if (current.width <= 0 || current.height <= 0) return\n  const fitted = clampRectInside(current, constraintBounds(), props.aspectRatio)\n  if (!rectsAreClose(current, fitted)) applyRect(fitted)\n}\n\nconst onSelectionChange = (event: Event) => {\n  if (clamping || !parts) return\n  const detail = (event as CustomEvent<Rect>).detail\n  if (!detail) return\n  // cropper.js reverses the action when a grip is dragged through the opposite edge, and it records\n  // that on the canvas just before emitting this event — one move ahead of the `action` event the\n  // tracking below sees. Prefer its own answer, and fall back if a future version stops publishing it.\n  const liveAction = (parts.canvas as unknown as { $action?: unknown }).$action\n  const action = typeof liveAction === 'string' && liveAction ? liveAction : currentAction\n  const anchor = action ? RESIZE_ANCHORS[action] : undefined\n  const clamped = clampRectInside(detail, constraintBounds(), props.aspectRatio, anchor)\n  if (rectsAreClose(detail, clamped)) return\n  // Rejecting the change and re-issuing the clamped one is what keeps the crop sliding along the\n  // border instead of freezing there; the shade reads `defaultPrevented` and follows the new values.\n  event.preventDefault()\n  applyRect(clamped)\n}\n\nconst onActionStart = (event: Event) => {\n  currentAction = (event as CustomEvent<{ action?: string }>).detail?.action ?? null\n}\n\nconst onAction = (event: Event) => {\n  const action = (event as CustomEvent<{ action?: string }>).detail?.action\n  // cropper.js turns a fresh \"select\" drag into the matching corner resize once it knows the\n  // direction, and reports the new action on the next move — follow it so the anchor stays right.\n  if (action) currentAction = action\n}\n\nconst onActionEnd = () => {\n  currentAction = null\n  emitCrop(true)\n}\n\n/**\n * The canvas must never see a wheel event: its own handler calls `preventDefault()` unconditionally,\n * which would swallow page scrolling over the picture the way cropper.js v1 never did. Pinching is\n * unaffected — that arrives as pointer events, and the picture stays scalable for it.\n */\nconst onWheelCapture = (event: WheelEvent) => {\n  event.stopPropagation()\n}\n\n/**\n * cropper.js emits `transform` *before* it writes the new matrix to the element's style (it sets the\n * new transform to measure the result, puts the old one back, then emits and finally commits). Re-\n * fitting straight away would therefore measure the image as it was: after a zoom out the crop would\n * be judged against the larger, previous picture and left hanging over the edge of the new one.\n */\nconst onImageTransform = () => queueMicrotask(refit)\n\nconst teardown = () => {\n  if (parts) {\n    const { canvas, image, selection } = parts\n    selection.removeEventListener('change', onSelectionChange)\n    canvas.removeEventListener('actionstart', onActionStart)\n    canvas.removeEventListener('action', onAction)\n    canvas.removeEventListener('actionend', onActionEnd)\n    image.removeEventListener('transform', onImageTransform)\n  }\n  // Every canvas, not just the one on `parts`: a build that was superseded while still waiting on\n  // its image has already put one in the DOM and has nothing tracking it yet.\n  hostEl.value?.querySelectorAll(CropperCanvas.$name).forEach((canvas) => {\n    // Disconnecting a `cropper-image` drops its listeners but leaves its request running, and the\n    // `$ready()` promise waiting on it keeps this component reachable until the server answers.\n    canvas.querySelectorAll<CropperImage>(CropperImage.$name).forEach((image) => {\n      if (image.$image) image.$image.src = ''\n    })\n    canvas.remove()\n  })\n  ancestorObserver?.disconnect()\n  ancestorObserver = null\n  parts = null\n  natural = { width: 0, height: 0 }\n  laidOut = { width: 0, height: 0 }\n  currentAction = null\n}\n\n/**\n * How much of the host's height will actually be shown.\n *\n * The host's own `max-height` is the usual answer, and the one `DamAssetImageRoiSelect` relies on.\n * Ancestors count too when they clip with `overflow: hidden` — what they cut off cannot be scrolled\n * back into view, so it is no more reachable than the host's own overflow. An ancestor that\n * scrolls is left alone: there the rest of the picture is a scroll away, not gone.\n */\nconst clippingAncestorsOf = (host: HTMLElement): HTMLElement[] => {\n  const found: HTMLElement[] = []\n  let ancestor = host.parentElement\n  while (ancestor && ancestor !== document.body && ancestor !== document.documentElement) {\n    const { overflowY } = window.getComputedStyle(ancestor)\n    if (overflowY === 'hidden' || overflowY === 'clip') found.push(ancestor)\n    ancestor = ancestor.parentElement\n  }\n  return found\n}\n\nconst visibleHeightOf = (host: HTMLElement): number => {\n  let available = host.clientHeight\n  const hostTop = host.getBoundingClientRect().top\n\n  clippingAncestorsOf(host).forEach((ancestor) => {\n    const rect = ancestor.getBoundingClientRect()\n    // From wherever the host starts being visible down to where the ancestor stops showing anything.\n    // Taking the ancestor's own top into account matters when the host begins above it: what is\n    // scrolled or positioned off the top is just as unreachable as what falls off the bottom.\n    const room = rect.bottom - Math.max(rect.top, hostTop)\n    if (room > 0) available = Math.min(available, room)\n  })\n\n  return available\n}\n\n/**\n * Sizes the canvas to the room the host actually gives it, in two passes because the second answer\n * depends on the first: the height a picture wants follows from its width, but a frame with a\n * `max-height` only reveals how much of that it will show once something is in it.\n *\n * cropper.js v1 did the same dance with its `<img>`, and the point of it is that its cropper never\n * overflowed: a tall picture in a short frame was scaled down to fit rather than cut off at the\n * bottom, where the part of the crop hidden by `overflow: hidden` could not be reached again.\n */\nconst sizeCanvas = (canvas: CropperCanvas, host: HTMLElement, availableWidth: number): Size => {\n  const size = canvasSizeFor(natural, availableWidth, MIN_CONTAINER_WIDTH, MIN_CONTAINER_HEIGHT)\n  canvas.style.width = `${size.width}px`\n  canvas.style.height = `${size.height}px`\n\n  const visibleHeight = visibleHeightOf(host)\n  if (visibleHeight > 0 && visibleHeight < size.height) {\n    size.height = Math.max(visibleHeight, MIN_CONTAINER_HEIGHT)\n    canvas.style.height = `${size.height}px`\n  }\n  return size\n}\n\nconst buildSelectionChildren = (selection: CropperSelection) => {\n  const grid = create<CropperGrid>(CropperGrid.$name)\n  grid.rows = 3\n  grid.columns = 3\n  grid.covered = true\n  grid.themeColor = GRID_COLOR\n  grid.setAttribute('role', 'grid')\n  selection.appendChild(grid)\n\n  const crosshair = create<CropperCrosshair>(CropperCrosshair.$name)\n  crosshair.centered = true\n  crosshair.themeColor = CROSSHAIR_COLOR\n  selection.appendChild(crosshair)\n\n  const face = create<CropperHandle>(CropperHandle.$name)\n  face.action = 'move'\n  face.themeColor = FACE_COLOR\n  selection.appendChild(face)\n\n  RESIZE_ACTIONS.forEach((action) => {\n    const handle = create<CropperHandle>(CropperHandle.$name)\n    handle.action = action\n    handle.themeColor = SELECTION_COLOR\n    selection.appendChild(handle)\n  })\n}\n\nconst build = async () => {\n  const token = ++buildToken\n  teardown()\n  loading.value = true\n\n  const host = hostEl.value\n  if (!host || !props.src) {\n    // Nothing to wait for: leaving the spinner up would make an empty cropper look like a stuck one.\n    loading.value = false\n    return\n  }\n\n  const canvas = create<CropperCanvas>(CropperCanvas.$name)\n  canvas.background = false\n  canvas.themeColor = SELECTION_COLOR\n  canvas.style.display = 'block'\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  const image = create<CropperImage>(CropperImage.$name)\n  image.alt = ''\n  image.initialFit = 'contain'\n  image.rotatable = false\n  image.skewable = false\n  image.translatable = false\n  image.scalable = true\n  image.src = props.src\n\n  const shade = create<CropperShade>(CropperShade.$name)\n  shade.themeColor = props.shadeColor\n  // Kept out of the way until the first crop box exists, or it would flash across the whole canvas.\n  shade.hidden = true\n\n  const selectHandle = create<CropperHandle>(CropperHandle.$name)\n  selectHandle.action = 'select'\n  selectHandle.plain = true\n\n  const selection = create<CropperSelection>(CropperSelection.$name)\n  selection.themeColor = SELECTION_COLOR\n  selection.movable = true\n  selection.resizable = true\n  selection.outlined = true\n  // Keep sub-pixel values: rounding to whole canvas pixels would drift the natural-pixel crop data\n  // that callers persist, and cropper.js v1 did not round either.\n  selection.precise = true\n  selection.aspectRatio = props.aspectRatio\n  buildSelectionChildren(selection)\n\n  // Listeners go on before anything is connected, so the action in flight is already known by the\n  // time the elements' own handlers react to it.\n  canvas.addEventListener('actionstart', onActionStart)\n  canvas.addEventListener('action', onAction)\n  canvas.addEventListener('actionend', onActionEnd)\n  image.addEventListener('transform', onImageTransform)\n  selection.addEventListener('change', onSelectionChange)\n\n  canvas.append(image, shade, selectHandle, selection)\n  // The whole tree is attached in one move on purpose: each element wires itself up to its siblings\n  // when it connects, and the shade in particular goes looking for the selection. Appending the\n  // children one at a time leaves it looking at an empty canvas, and it never follows the crop.\n  host.appendChild(canvas)\n  // Second pass, now that there is something in the host for its own constraints to act on.\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  let loaded: HTMLImageElement\n  try {\n    // The element runs the one request there is; its promise carries the picture that arrived.\n    loaded = await image.$ready()\n  } catch {\n    // Mirrors cropper.js v1, which simply never became ready on a broken source.\n    canvas.remove()\n    if (token === buildToken) loading.value = false\n    return\n  }\n  if (token !== buildToken) {\n    canvas.remove()\n    return\n  }\n\n  parts = { canvas, image, selection }\n  // Only now is the picture's own size known, so the canvas gets its real dimensions here rather\n  // than from a second request made ahead of time purely to measure it.\n  natural = { width: loaded.naturalWidth, height: loaded.naturalHeight }\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  // A prop that changed while the picture was loading found the watchers with no elements to write\n  // to. Re-reading the two that can vary closes that window; it is idempotent otherwise.\n  shade.themeColor = props.shadeColor\n  selection.aspectRatio = props.aspectRatio\n\n  centerImage()\n\n  laidOut = hostBox(host)\n  observeAncestors(host)\n  applyModelOrSeed()\n\n  loading.value = false\n  emit('ready')\n}\n\n/** Where the crop sits, as fractions of the image. */\nconst currentCrop = (): CropRect | null => {\n  if (!parts) return null\n  const bounds = imageBounds()\n  if (bounds.width <= 0 || bounds.height <= 0) return null\n  const rect = selectionRect()\n  return {\n    x: (rect.x - bounds.x) / bounds.width,\n    y: (rect.y - bounds.y) / bounds.height,\n    width: rect.width / bounds.width,\n    height: rect.height / bounds.height,\n  }\n}\n\n/** Puts a crop given in fractions onto the canvas, clamped to the picture. */\nconst applyCrop = (crop: CropRect) => {\n  const bounds = imageBounds()\n  if (!parts || bounds.width <= 0 || bounds.height <= 0) return\n  applyRect(\n    clampRectInside(\n      {\n        x: bounds.x + crop.x * bounds.width,\n        y: bounds.y + crop.y * bounds.height,\n        width: crop.width * bounds.width,\n        height: crop.height * bounds.height,\n      },\n      constraintBounds(),\n      props.aspectRatio\n    )\n  )\n}\n\nconst cropsAreClose = (a: CropRect | null, b: CropRect | null): boolean =>\n  a !== null &&\n  b !== null &&\n  Math.abs(a.x - b.x) < 0.0005 &&\n  Math.abs(a.y - b.y) < 0.0005 &&\n  Math.abs(a.width - b.width) < 0.0005 &&\n  Math.abs(a.height - b.height) < 0.0005\n\n/**\n * Hands the crop back up. Also called after the component itself has adjusted one — a stored region\n * rarely matches the configured ratio, and the binding should say where the crop really is rather\n * than where it was asked to be.\n */\nconst emitCrop = (alsoCommit = false) => {\n  const crop = currentCrop()\n  if (!crop) return\n  if (alsoCommit || !cropsAreClose(crop, lastEmitted)) {\n    lastEmitted = crop\n    emit('update:modelValue', crop)\n  }\n  if (alsoCommit) emit('commit', crop)\n}\n\n/** The room the host has: its width, and the height that will actually be shown. */\nconst hostBox = (host: HTMLElement): Size => ({ width: host.clientWidth, height: visibleHeightOf(host) })\n\n/** Re-fit the image to the new container while keeping the crop the user already chose. */\nconst relayout = () => {\n  const host = hostEl.value\n  if (!parts || !host) return\n  // A crop of no size means the last layout had none either — fall back to the bound one, which is\n  // what a cropper built inside a closed panel has been holding all along.\n  const wanted = currentCrop() ?? props.modelValue\n\n  const size = sizeCanvas(parts.canvas, host, host.clientWidth)\n  laidOut = hostBox(host)\n  // Re-read the ancestors as well: a cropper can be moved between frames, and the one clipping it\n  // now is the one whose height matters.\n  observeAncestors(host)\n  centerImage()\n  if (size.width <= 0 || size.height <= 0) return\n\n  if (wanted && wanted.width > 0) applyCrop(wanted)\n  else applyModelOrSeed()\n  emitCrop()\n}\n\nconst onHostBoxChanged = () => {\n  const host = hostEl.value\n  if (!host) return\n  const box = hostBox(host)\n  if (box.width <= 0 || box.height <= 0) return\n  // Compared against the box the current layout was built for, so a size seen while the cropper was\n  // still loading cannot be mistaken for one that has already been laid out.\n  if (box.width === laidOut.width && box.height === laidOut.height) return\n  if (!parts) return\n  // Deferred a frame: resizing the canvas from inside the observer's own callback is what makes\n  // Chromium report an undelivered-notification loop.\n  requestAnimationFrame(() => relayout())\n}\n\n// Height counts as much as width: the DAM sizes the cropper with `calc(100vh - 160px)`, so a\n// shorter window shrinks the frame without touching its width.\nuseResizeObserver(hostEl, onHostBoxChanged)\n\n/** An ancestor that clips can change how much it shows without the host's own box moving at all. */\nconst observeAncestors = (host: HTMLElement) => {\n  ancestorObserver?.disconnect()\n  const ancestors = clippingAncestorsOf(host)\n  if (ancestors.length === 0) {\n    ancestorObserver = null\n    return\n  }\n  ancestorObserver = new ResizeObserver(onHostBoxChanged)\n  ancestors.forEach((ancestor) => ancestorObserver?.observe(ancestor))\n}\n\nwatch(\n  () => props.src,\n  () => {\n    build()\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (model) => {\n    // Ignore the echo of what this component just handed up, or the two would write to each other\n    // for as long as the parent keeps binding it back.\n    if (!parts || !model || cropsAreClose(model, lastEmitted)) return\n    applyCrop(model)\n    emitCrop()\n  },\n  { deep: true }\n)\n\nwatch(\n  () => props.shadeColor,\n  (shadeColor) => {\n    const shade = parts?.canvas.querySelector<CropperShade>(CropperShade.$name)\n    if (shade) shade.themeColor = shadeColor\n  }\n)\n\nwatch(\n  () => props.aspectRatio,\n  (aspectRatio) => {\n    if (!parts) return\n    parts.selection.aspectRatio = aspectRatio\n    if (!isUsableAspectRatio(aspectRatio)) return\n    const current = selectionRect()\n    applyRect(clampRectInside({ ...current, height: current.width / aspectRatio }, constraintBounds(), aspectRatio))\n  }\n)\n\nonMounted(() => {\n  build()\n})\n\nonBeforeUnmount(() => {\n  buildToken += 1\n  teardown()\n})\n</script>\n\n<template>\n  <div class=\"a-cropper d-flex flex-column\">\n    <div\n      v-if=\"loading\"\n      class=\"d-flex w-100 align-center justify-center\"\n    >\n      <VProgressCircular\n        class=\"position-absolute\"\n        indeterminate\n      />\n    </div>\n\n    <div\n      ref=\"hostEl\"\n      class=\"a-cropper__container\"\n      :style=\"containerStyle\"\n      @wheel.capture=\"onWheelCapture\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\">\n// `cropper-crosshair` sizes itself in `em`, so without a size of its own the centre marker would\n// grow and shrink with whatever font the surrounding admin happens to use. 7px is the plus sign\n// cropper.js v1 drew through `.cropper-center`.\n.a-cropper cropper-crosshair {\n  font-size: 7px;\n}\n\n// cropper.js v1 drew a `.cropper-line` along each edge of the crop box: a 5px band of the selection\n// colour at a tenth opacity, sitting 3px outside the border and 2px inside it. It is what made the\n// thin outline read as a grabbable edge, so it is drawn here too — as a pair of shadows rather than\n// four elements, which keeps it independent of how the v2 grips happen to be sized.\n.a-cropper cropper-selection[outlined] {\n  box-shadow:\n    inset 0 0 0 2px rgb(51 153 255 / 10%),\n    0 0 0 3px rgb(51 153 255 / 10%);\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"ACropper.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_createVNode","_component_VProgressCircular","_createCommentVNode","_createElementVNode","_normalizeStyle","CropperCanvas","CropperImage","CropperShade","CropperHandle","CropperSelection","CropperGrid","CropperCrosshair","_hoisted_1","_hoisted_2","AUTO_CROP_AREA","MIN_CONTAINER_WIDTH","MIN_CONTAINER_HEIGHT","SELECTION_COLOR","FACE_COLOR","GRID_COLOR","CROSSHAIR_COLOR","ACropper_vue_vue_type_script_setup_true_lang_default","__emit","props","__props","emit","element","RESIZE_ACTIONS","hostEl","useTemplateRef","loading","ref","parts","natural","currentAction","clamping","centring","buildToken","laidOut","lastEmitted","ancestorObserver","create","name","imageBounds","canvasRect","imageRect","constraintBounds","image","canvas","left","top","right","bottom","selectionRect","applyRect","rect","centerImage","scalable","translatable","seedInitialCrop","bounds","initial","initialSelectionRect","applyModelOrSeed","model","applyCrop","emitCrop","refit","current","fitted","clampRectInside","rectsAreClose","onSelectionChange","detail","event","liveAction","action","anchor","RESIZE_ANCHORS","clamped","onActionStart","onAction","onActionEnd","onWheelCapture","onImageTransform","teardown","selection","clippingAncestorsOf","found","ancestor","host","overflowY","visibleHeightOf","available","hostTop","room","sizeCanvas","size","canvasSizeFor","availableWidth","visibleHeight","buildSelectionChildren","grid","crosshair","face","handle","build","token","shade","selectHandle","loaded","hostBox","observeAncestors","currentCrop","crop","cropsAreClose","a","b","alsoCommit","relayout","wanted","onHostBoxChanged","box","ancestors","watch","shadeColor","aspectRatio","isUsableAspectRatio","onMounted","onBeforeUnmount","openBlock","createElementBlock","createVNode","VProgressCircular","createCommentVNode","createElementVNode","normalizeStyle"],"sources":["../../../../../src/domains/dam/cropper/components/ACropper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport {\n  CropperCanvas,\n  CropperCrosshair,\n  CropperGrid,\n  CropperHandle,\n  CropperImage,\n  CropperSelection,\n  CropperShade,\n} from 'cropperjs'\nimport {\n  canvasSizeFor,\n  clampRectInside,\n  initialSelectionRect,\n  isUsableAspectRatio,\n  RESIZE_ANCHORS,\n  rectsAreClose,\n  type Rect,\n  type Size,\n} from '@/domains/dam/cropper/utils/cropperGeometry'\nimport type { CropRect } from '@/domains/dam/cropper/utils/cropperTypes'\n\n/**\n * Image cropper built on cropper.js v2's custom elements, replacing the v1-based `ACropperjs`.\n *\n * It lives here, beside `DamAssetImageRoiSelect`, because that is the only thing that uses it and\n * nothing outside this library does. It is not exported: shaping it to one need rather than to a\n * general audience is what keeps it to its size.\n *\n * The crop is bound, not fetched: `v-model` carries it as fractions of the image, and `commit` says\n * the user has finished a gesture. There is no imperative surface — the one thing a host wants to do\n * with a cropper is know where the crop is, and a binding says that better than six methods did.\n *\n * The elements are assembled in script rather than in the template on purpose: a consumer of this\n * library does not configure `isCustomElement` in their own build, and setting element *properties*\n * instead of going through attribute strings avoids the coercion surprises (`NaN`, booleans,\n * fractional numbers) that come with the attribute round-trip.\n */\n\nconst props = withDefaults(\n  defineProps<{\n    src?: string\n    /** The crop, as fractions of the image. Leave it null to start from the default box. */\n    modelValue?: CropRect | null\n    /** `NaN` (the default) leaves the crop free-form. */\n    aspectRatio?: number\n    containerStyle?: { [key: string]: string } | undefined\n    /** Wash over everything outside the crop — the replacement for overriding `.cropper-modal`. */\n    shadeColor?: string\n  }>(),\n  {\n    src: '',\n    modelValue: null,\n    aspectRatio: NaN,\n    containerStyle: undefined,\n    shadeColor: 'rgba(0, 0, 0, 0.5)',\n  }\n)\n\nconst emit = defineEmits<{\n  (event: 'update:modelValue', crop: CropRect): void\n  /** The user has finished a gesture; the crop is worth saving. */\n  (event: 'commit', crop: CropRect): void\n  (event: 'ready'): void\n}>()\n\n// cropper.js registers its elements as a side effect of loading its entry, and this package's\n// `sideEffects` lets the consumer's bundler drop that module once only the classes are used. `$define`\n// is a no-op for an element that is already registered.\nfor (const element of [\n  CropperCanvas,\n  CropperCrosshair,\n  CropperGrid,\n  CropperHandle,\n  CropperImage,\n  CropperSelection,\n  CropperShade,\n]) {\n  element.$define()\n}\n\n/**\n * Settings the one caller never varies, kept as constants rather than as props nobody passes.\n * Each of them is behaviour, not preference: no checkerboard behind a photograph, the wheel left to\n * the page, pinch zoom kept for tablets, and the minimum canvas cropper.js' own stylesheet declares.\n */\nconst AUTO_CROP_AREA = 0.8\nconst MIN_CONTAINER_WIDTH = 200\nconst MIN_CONTAINER_HEIGHT = 100\n\n// Matched to cropper.js v1's stylesheet so the two components are indistinguishable side by side.\nconst SELECTION_COLOR = 'rgba(51, 153, 255, 0.75)'\nconst FACE_COLOR = 'rgba(255, 255, 255, 0.1)'\nconst GRID_COLOR = 'rgba(238, 238, 238, 0.5)'\nconst CROSSHAIR_COLOR = 'rgba(238, 238, 238, 0.75)'\nconst RESIZE_ACTIONS = [\n  'n-resize',\n  'e-resize',\n  's-resize',\n  'w-resize',\n  'ne-resize',\n  'nw-resize',\n  'se-resize',\n  'sw-resize',\n]\n\ninterface CropperParts {\n  canvas: CropperCanvas\n  image: CropperImage\n  selection: CropperSelection\n}\n\nconst hostEl = useTemplateRef<HTMLDivElement>('hostEl')\nconst loading = ref(true)\n\nlet parts: CropperParts | null = null\nlet natural: Size = { width: 0, height: 0 }\n/** The action cropper.js is currently performing, so a clamp knows which edge to hold still. */\nlet currentAction: string | null = null\n/** Guards the re-entrant `$change` a clamp performs from being clamped again. */\nlet clamping = false\n/** Guards the half-applied transforms `$center` emits between its move and its scale. */\nlet centring = false\n/** Invalidates an in-flight build when `src` changes or the component goes away mid-load. */\nlet buildToken = 0\n/** The host box the current layout was computed for — not merely the last one observed. */\nlet laidOut: Size = { width: 0, height: 0 }\n/** The last crop handed out, so a model written straight back is not mistaken for a new one. */\nlet lastEmitted: CropRect | null = null\n/** Watches the ancestors that clip the host; their height is part of the room it has. */\nlet ancestorObserver: ResizeObserver | null = null\n\nconst create = <T extends HTMLElement>(name: string): T => document.createElement(name) as T\n\n/** The image box in canvas coordinates. Read from layout so panning and zooming stay accounted for. */\nconst imageBounds = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const canvasRect = parts.canvas.getBoundingClientRect()\n  const imageRect = parts.image.getBoundingClientRect()\n  return {\n    x: imageRect.left - canvasRect.left,\n    y: imageRect.top - canvasRect.top,\n    width: imageRect.width,\n    height: imageRect.height,\n  }\n}\n\n/**\n * Where the crop is allowed to be: the image, but never outside the visible canvas. The two are the\n * same box until the image is zoomed past its frame, and then it is the frame that wins — cropper.js\n * v1 limited its crop box to the canvas and the container both, so a zoomed-in image never let the\n * crop wander off the part of it you could actually see.\n */\nconst constraintBounds = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const image = imageBounds()\n  const canvas = parts.canvas.getBoundingClientRect()\n  const left = Math.max(image.x, 0)\n  const top = Math.max(image.y, 0)\n  const right = Math.min(image.x + image.width, canvas.width)\n  const bottom = Math.min(image.y + image.height, canvas.height)\n  return { x: left, y: top, width: Math.max(0, right - left), height: Math.max(0, bottom - top) }\n}\n\nconst selectionRect = (): Rect => {\n  if (!parts) return { x: 0, y: 0, width: 0, height: 0 }\n  const { x, y, width, height } = parts.selection\n  return { x, y, width, height }\n}\n\nconst applyRect = (rect: Rect) => {\n  if (!parts) return\n  clamping = true\n  parts.selection.$change(rect.x, rect.y, rect.width, rect.height, props.aspectRatio, true)\n  clamping = false\n}\n\n/**\n * Re-fits the image to the canvas. cropper.js only lets `$center` scale and move an image that is\n * marked scalable and translatable — it grants itself that permission while the image is still\n * loading, but not afterwards — so the flags are lifted for the call and put back straight after.\n */\nconst centerImage = () => {\n  if (!parts) return\n  const { image } = parts\n  const { scalable, translatable } = image\n  centring = true\n  image.scalable = true\n  image.translatable = true\n  image.$center('contain')\n  image.scalable = scalable\n  image.translatable = translatable\n  centring = false\n}\n\n/**\n * The crop a fresh picture starts with. Computed here rather than handed to cropper.js'\n * `initialCoverage`, whose deferred initialisation would land *after* a `ready` handler had already\n * positioned the crop. It is measured against the image rather than the canvas, which are the same\n * box for a source wider than its container and are not once the image sits centred between margins.\n */\nconst seedInitialCrop = () => {\n  if (!parts) return\n  const bounds = imageBounds()\n  if (bounds.width <= 0 || bounds.height <= 0) return\n  const initial = initialSelectionRect(bounds, props.aspectRatio, AUTO_CROP_AREA)\n  applyRect({ ...initial, x: initial.x + bounds.x, y: initial.y + bounds.y })\n}\n\n/** Uses the bound crop if there is one, and the default box if there is not. */\nconst applyModelOrSeed = () => {\n  const model = props.modelValue\n  if (model && model.width > 0 && model.height > 0) applyCrop(model)\n  else seedInitialCrop()\n  emitCrop()\n}\n\n/** Pulls the selection back inside the image after something moved the image out from under it. */\nconst refit = () => {\n  if (!parts || centring) return\n  const current = selectionRect()\n  if (current.width <= 0 || current.height <= 0) return\n  const fitted = clampRectInside(current, constraintBounds(), props.aspectRatio)\n  if (!rectsAreClose(current, fitted)) applyRect(fitted)\n}\n\nconst onSelectionChange = (event: Event) => {\n  if (clamping || !parts) return\n  const detail = (event as CustomEvent<Rect>).detail\n  if (!detail) return\n  // cropper.js reverses the action when a grip is dragged through the opposite edge, and it records\n  // that on the canvas just before emitting this event — one move ahead of the `action` event the\n  // tracking below sees. Prefer its own answer, and fall back if a future version stops publishing it.\n  const liveAction = (parts.canvas as unknown as { $action?: unknown }).$action\n  const action = typeof liveAction === 'string' && liveAction ? liveAction : currentAction\n  const anchor = action ? RESIZE_ANCHORS[action] : undefined\n  const clamped = clampRectInside(detail, constraintBounds(), props.aspectRatio, anchor)\n  if (rectsAreClose(detail, clamped)) return\n  // Rejecting the change and re-issuing the clamped one is what keeps the crop sliding along the\n  // border instead of freezing there; the shade reads `defaultPrevented` and follows the new values.\n  event.preventDefault()\n  applyRect(clamped)\n}\n\nconst onActionStart = (event: Event) => {\n  currentAction = (event as CustomEvent<{ action?: string }>).detail?.action ?? null\n}\n\nconst onAction = (event: Event) => {\n  const action = (event as CustomEvent<{ action?: string }>).detail?.action\n  // cropper.js turns a fresh \"select\" drag into the matching corner resize once it knows the\n  // direction, and reports the new action on the next move — follow it so the anchor stays right.\n  if (action) currentAction = action\n}\n\nconst onActionEnd = () => {\n  currentAction = null\n  emitCrop(true)\n}\n\n/**\n * The canvas must never see a wheel event: its own handler calls `preventDefault()` unconditionally,\n * which would swallow page scrolling over the picture the way cropper.js v1 never did. Pinching is\n * unaffected — that arrives as pointer events, and the picture stays scalable for it.\n */\nconst onWheelCapture = (event: WheelEvent) => {\n  event.stopPropagation()\n}\n\n/**\n * cropper.js emits `transform` *before* it writes the new matrix to the element's style (it sets the\n * new transform to measure the result, puts the old one back, then emits and finally commits). Re-\n * fitting straight away would therefore measure the image as it was: after a zoom out the crop would\n * be judged against the larger, previous picture and left hanging over the edge of the new one.\n */\nconst onImageTransform = () => queueMicrotask(refit)\n\nconst teardown = () => {\n  if (parts) {\n    const { canvas, image, selection } = parts\n    selection.removeEventListener('change', onSelectionChange)\n    canvas.removeEventListener('actionstart', onActionStart)\n    canvas.removeEventListener('action', onAction)\n    canvas.removeEventListener('actionend', onActionEnd)\n    image.removeEventListener('transform', onImageTransform)\n  }\n  // Every canvas, not just the one on `parts`: a build that was superseded while still waiting on\n  // its image has already put one in the DOM and has nothing tracking it yet.\n  hostEl.value?.querySelectorAll(CropperCanvas.$name).forEach((canvas) => {\n    // Disconnecting a `cropper-image` drops its listeners but leaves its request running, and the\n    // `$ready()` promise waiting on it keeps this component reachable until the server answers.\n    canvas.querySelectorAll<CropperImage>(CropperImage.$name).forEach((image) => {\n      if (image.$image) image.$image.src = ''\n    })\n    canvas.remove()\n  })\n  ancestorObserver?.disconnect()\n  ancestorObserver = null\n  parts = null\n  natural = { width: 0, height: 0 }\n  laidOut = { width: 0, height: 0 }\n  currentAction = null\n}\n\n/**\n * How much of the host's height will actually be shown.\n *\n * The host's own `max-height` is the usual answer, and the one `DamAssetImageRoiSelect` relies on.\n * Ancestors count too when they clip with `overflow: hidden` — what they cut off cannot be scrolled\n * back into view, so it is no more reachable than the host's own overflow. An ancestor that\n * scrolls is left alone: there the rest of the picture is a scroll away, not gone.\n */\nconst clippingAncestorsOf = (host: HTMLElement): HTMLElement[] => {\n  const found: HTMLElement[] = []\n  let ancestor = host.parentElement\n  while (ancestor && ancestor !== document.body && ancestor !== document.documentElement) {\n    const { overflowY } = window.getComputedStyle(ancestor)\n    if (overflowY === 'hidden' || overflowY === 'clip') found.push(ancestor)\n    ancestor = ancestor.parentElement\n  }\n  return found\n}\n\nconst visibleHeightOf = (host: HTMLElement): number => {\n  let available = host.clientHeight\n  const hostTop = host.getBoundingClientRect().top\n\n  clippingAncestorsOf(host).forEach((ancestor) => {\n    const rect = ancestor.getBoundingClientRect()\n    // From wherever the host starts being visible down to where the ancestor stops showing anything.\n    // Taking the ancestor's own top into account matters when the host begins above it: what is\n    // scrolled or positioned off the top is just as unreachable as what falls off the bottom.\n    const room = rect.bottom - Math.max(rect.top, hostTop)\n    if (room > 0) available = Math.min(available, room)\n  })\n\n  return available\n}\n\n/**\n * Sizes the canvas to the room the host actually gives it, in two passes because the second answer\n * depends on the first: the height a picture wants follows from its width, but a frame with a\n * `max-height` only reveals how much of that it will show once something is in it.\n *\n * cropper.js v1 did the same dance with its `<img>`, and the point of it is that its cropper never\n * overflowed: a tall picture in a short frame was scaled down to fit rather than cut off at the\n * bottom, where the part of the crop hidden by `overflow: hidden` could not be reached again.\n */\nconst sizeCanvas = (canvas: CropperCanvas, host: HTMLElement, availableWidth: number): Size => {\n  const size = canvasSizeFor(natural, availableWidth, MIN_CONTAINER_WIDTH, MIN_CONTAINER_HEIGHT)\n  canvas.style.width = `${size.width}px`\n  canvas.style.height = `${size.height}px`\n\n  const visibleHeight = visibleHeightOf(host)\n  if (visibleHeight > 0 && visibleHeight < size.height) {\n    size.height = Math.max(visibleHeight, MIN_CONTAINER_HEIGHT)\n    canvas.style.height = `${size.height}px`\n  }\n  return size\n}\n\nconst buildSelectionChildren = (selection: CropperSelection) => {\n  const grid = create<CropperGrid>(CropperGrid.$name)\n  grid.rows = 3\n  grid.columns = 3\n  grid.covered = true\n  grid.themeColor = GRID_COLOR\n  grid.setAttribute('role', 'grid')\n  selection.appendChild(grid)\n\n  const crosshair = create<CropperCrosshair>(CropperCrosshair.$name)\n  crosshair.centered = true\n  crosshair.themeColor = CROSSHAIR_COLOR\n  selection.appendChild(crosshair)\n\n  const face = create<CropperHandle>(CropperHandle.$name)\n  face.action = 'move'\n  face.themeColor = FACE_COLOR\n  selection.appendChild(face)\n\n  RESIZE_ACTIONS.forEach((action) => {\n    const handle = create<CropperHandle>(CropperHandle.$name)\n    handle.action = action\n    handle.themeColor = SELECTION_COLOR\n    selection.appendChild(handle)\n  })\n}\n\nconst build = async () => {\n  const token = ++buildToken\n  teardown()\n  loading.value = true\n\n  const host = hostEl.value\n  if (!host || !props.src) {\n    // Nothing to wait for: leaving the spinner up would make an empty cropper look like a stuck one.\n    loading.value = false\n    return\n  }\n\n  const canvas = create<CropperCanvas>(CropperCanvas.$name)\n  canvas.background = false\n  canvas.themeColor = SELECTION_COLOR\n  canvas.style.display = 'block'\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  const image = create<CropperImage>(CropperImage.$name)\n  image.alt = ''\n  image.initialFit = 'contain'\n  image.rotatable = false\n  image.skewable = false\n  image.translatable = false\n  image.scalable = true\n  image.src = props.src\n\n  const shade = create<CropperShade>(CropperShade.$name)\n  shade.themeColor = props.shadeColor\n  // Kept out of the way until the first crop box exists, or it would flash across the whole canvas.\n  shade.hidden = true\n\n  const selectHandle = create<CropperHandle>(CropperHandle.$name)\n  selectHandle.action = 'select'\n  selectHandle.plain = true\n\n  const selection = create<CropperSelection>(CropperSelection.$name)\n  selection.themeColor = SELECTION_COLOR\n  selection.movable = true\n  selection.resizable = true\n  selection.outlined = true\n  // Keep sub-pixel values: rounding to whole canvas pixels would drift the natural-pixel crop data\n  // that callers persist, and cropper.js v1 did not round either.\n  selection.precise = true\n  selection.aspectRatio = props.aspectRatio\n  buildSelectionChildren(selection)\n\n  // Listeners go on before anything is connected, so the action in flight is already known by the\n  // time the elements' own handlers react to it.\n  canvas.addEventListener('actionstart', onActionStart)\n  canvas.addEventListener('action', onAction)\n  canvas.addEventListener('actionend', onActionEnd)\n  image.addEventListener('transform', onImageTransform)\n  selection.addEventListener('change', onSelectionChange)\n\n  canvas.append(image, shade, selectHandle, selection)\n  // The whole tree is attached in one move on purpose: each element wires itself up to its siblings\n  // when it connects, and the shade in particular goes looking for the selection. Appending the\n  // children one at a time leaves it looking at an empty canvas, and it never follows the crop.\n  host.appendChild(canvas)\n  // Second pass, now that there is something in the host for its own constraints to act on.\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  let loaded: HTMLImageElement\n  try {\n    // The element runs the one request there is; its promise carries the picture that arrived.\n    loaded = await image.$ready()\n  } catch {\n    // Mirrors cropper.js v1, which simply never became ready on a broken source.\n    canvas.remove()\n    if (token === buildToken) loading.value = false\n    return\n  }\n  if (token !== buildToken) {\n    canvas.remove()\n    return\n  }\n\n  parts = { canvas, image, selection }\n  // Only now is the picture's own size known, so the canvas gets its real dimensions here rather\n  // than from a second request made ahead of time purely to measure it.\n  natural = { width: loaded.naturalWidth, height: loaded.naturalHeight }\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  // A prop that changed while the picture was loading found the watchers with no elements to write\n  // to. Re-reading the two that can vary closes that window; it is idempotent otherwise.\n  shade.themeColor = props.shadeColor\n  selection.aspectRatio = props.aspectRatio\n\n  centerImage()\n\n  laidOut = hostBox(host)\n  observeAncestors(host)\n  applyModelOrSeed()\n\n  loading.value = false\n  emit('ready')\n}\n\n/** Where the crop sits, as fractions of the image. */\nconst currentCrop = (): CropRect | null => {\n  if (!parts) return null\n  const bounds = imageBounds()\n  if (bounds.width <= 0 || bounds.height <= 0) return null\n  const rect = selectionRect()\n  return {\n    x: (rect.x - bounds.x) / bounds.width,\n    y: (rect.y - bounds.y) / bounds.height,\n    width: rect.width / bounds.width,\n    height: rect.height / bounds.height,\n  }\n}\n\n/** Puts a crop given in fractions onto the canvas, clamped to the picture. */\nconst applyCrop = (crop: CropRect) => {\n  const bounds = imageBounds()\n  if (!parts || bounds.width <= 0 || bounds.height <= 0) return\n  applyRect(\n    clampRectInside(\n      {\n        x: bounds.x + crop.x * bounds.width,\n        y: bounds.y + crop.y * bounds.height,\n        width: crop.width * bounds.width,\n        height: crop.height * bounds.height,\n      },\n      constraintBounds(),\n      props.aspectRatio\n    )\n  )\n}\n\nconst cropsAreClose = (a: CropRect | null, b: CropRect | null): boolean =>\n  a !== null &&\n  b !== null &&\n  Math.abs(a.x - b.x) < 0.0005 &&\n  Math.abs(a.y - b.y) < 0.0005 &&\n  Math.abs(a.width - b.width) < 0.0005 &&\n  Math.abs(a.height - b.height) < 0.0005\n\n/**\n * Hands the crop back up. Also called after the component itself has adjusted one — a stored region\n * rarely matches the configured ratio, and the binding should say where the crop really is rather\n * than where it was asked to be.\n */\nconst emitCrop = (alsoCommit = false) => {\n  const crop = currentCrop()\n  if (!crop) return\n  if (alsoCommit || !cropsAreClose(crop, lastEmitted)) {\n    lastEmitted = crop\n    emit('update:modelValue', crop)\n  }\n  if (alsoCommit) emit('commit', crop)\n}\n\n/** The room the host has: its width, and the height that will actually be shown. */\nconst hostBox = (host: HTMLElement): Size => ({ width: host.clientWidth, height: visibleHeightOf(host) })\n\n/** Re-fit the image to the new container while keeping the crop the user already chose. */\nconst relayout = () => {\n  const host = hostEl.value\n  if (!parts || !host) return\n  // A crop of no size means the last layout had none either — fall back to the bound one, which is\n  // what a cropper built inside a closed panel has been holding all along.\n  const wanted = currentCrop() ?? props.modelValue\n\n  const size = sizeCanvas(parts.canvas, host, host.clientWidth)\n  laidOut = hostBox(host)\n  // Re-read the ancestors as well: a cropper can be moved between frames, and the one clipping it\n  // now is the one whose height matters.\n  observeAncestors(host)\n  centerImage()\n  if (size.width <= 0 || size.height <= 0) return\n\n  if (wanted && wanted.width > 0) applyCrop(wanted)\n  else applyModelOrSeed()\n  emitCrop()\n}\n\nconst onHostBoxChanged = () => {\n  const host = hostEl.value\n  if (!host) return\n  const box = hostBox(host)\n  if (box.width <= 0 || box.height <= 0) return\n  // Compared against the box the current layout was built for, so a size seen while the cropper was\n  // still loading cannot be mistaken for one that has already been laid out.\n  if (box.width === laidOut.width && box.height === laidOut.height) return\n  if (!parts) return\n  // Deferred a frame: resizing the canvas from inside the observer's own callback is what makes\n  // Chromium report an undelivered-notification loop.\n  requestAnimationFrame(() => relayout())\n}\n\n// Height counts as much as width: the DAM sizes the cropper with `calc(100vh - 160px)`, so a\n// shorter window shrinks the frame without touching its width.\nuseResizeObserver(hostEl, onHostBoxChanged)\n\n/** An ancestor that clips can change how much it shows without the host's own box moving at all. */\nconst observeAncestors = (host: HTMLElement) => {\n  ancestorObserver?.disconnect()\n  const ancestors = clippingAncestorsOf(host)\n  if (ancestors.length === 0) {\n    ancestorObserver = null\n    return\n  }\n  ancestorObserver = new ResizeObserver(onHostBoxChanged)\n  ancestors.forEach((ancestor) => ancestorObserver?.observe(ancestor))\n}\n\nwatch(\n  () => props.src,\n  () => {\n    build()\n  }\n)\n\nwatch(\n  () => props.modelValue,\n  (model) => {\n    // Ignore the echo of what this component just handed up, or the two would write to each other\n    // for as long as the parent keeps binding it back.\n    if (!parts || !model || cropsAreClose(model, lastEmitted)) return\n    applyCrop(model)\n    emitCrop()\n  },\n  { deep: true }\n)\n\nwatch(\n  () => props.shadeColor,\n  (shadeColor) => {\n    const shade = parts?.canvas.querySelector<CropperShade>(CropperShade.$name)\n    if (shade) shade.themeColor = shadeColor\n  }\n)\n\nwatch(\n  () => props.aspectRatio,\n  (aspectRatio) => {\n    if (!parts) return\n    parts.selection.aspectRatio = aspectRatio\n    if (!isUsableAspectRatio(aspectRatio)) return\n    const current = selectionRect()\n    applyRect(clampRectInside({ ...current, height: current.width / aspectRatio }, constraintBounds(), aspectRatio))\n  }\n)\n\nonMounted(() => {\n  build()\n})\n\nonBeforeUnmount(() => {\n  buildToken += 1\n  teardown()\n})\n</script>\n\n<template>\n  <div class=\"a-cropper d-flex flex-column\">\n    <div\n      v-if=\"loading\"\n      class=\"d-flex w-100 align-center justify-center\"\n    >\n      <VProgressCircular\n        class=\"position-absolute\"\n        indeterminate\n      />\n    </div>\n\n    <div\n      ref=\"hostEl\"\n      class=\"a-cropper__container\"\n      :style=\"containerStyle\"\n      @wheel.capture=\"onWheelCapture\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\">\n// `cropper-crosshair` sizes itself in `em`, so without a size of its own the centre marker would\n// grow and shrink with whatever font the surrounding admin happens to use. 7px is the plus sign\n// cropper.js v1 drew through `.cropper-center`.\n.a-cropper cropper-crosshair {\n  font-size: 7px;\n}\n\n// cropper.js v1 drew a `.cropper-line` along each edge of the crop box: a 5px band of the selection\n// colour at a tenth opacity, sitting 3px outside the border and 2px inside it. It is what made the\n// thin outline read as a grabbable edge, so it is drawn here too — as a pair of shadows rather than\n// four elements, which keeps it independent of how the v2 grips happen to be sized.\n.a-cropper cropper-selection[outlined] {\n  box-shadow:\n    inset 0 0 0 2px rgb(51 153 255 / 10%),\n    0 0 0 3px rgb(51 153 255 / 10%);\n}\n</style>\n"],"mappings":"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"}

package/dist/domains/dam/cropper/components/DamAssetImageRoiSelect.js

@@ -1,7 +1,6 @@
 import e from "./DamAssetImageRoiSelect.vue_vue_type_script_setup_true_lang.js";
-//#region src/domains/dam/cropper/components/DamAssetImageRoiSelect.vue
+// src/domains/dam/cropper/components/DamAssetImageRoiSelect.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=DamAssetImageRoiSelect.js.map

package/dist/domains/dam/cropper/components/DamAssetImageRoiSelect.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,7 @@ import u from "./ACropper.js";
 import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createVNode as g, defineComponent as _, onUnmounted as v, openBlock as y, ref as b, unref as x, watch as S } from "vue";
 import { VProgressCircular as C } from "vuetify/components/VProgressCircular";
 import { VImg as w } from "vuetify/components/VImg";
-//#region src/domains/dam/cropper/components/DamAssetImageRoiSelect.vue?vue&type=script&setup=true&lang.ts
+// src/domains/dam/cropper/components/DamAssetImageRoiSelect.vue?vue&type=script&setup=true&lang.ts
 var T = {
 	key: 0,
 	class: "d-flex w-100 align-center justify-center"
@@ -94,7 +94,6 @@ var T = {
 		}, null, 8, ["src", "max-height"])) : m("", !0)], 64));
 	}
 });
-//#endregion
 export { D as default };
 
 //# sourceMappingURL=DamAssetImageRoiSelect.vue_vue_type_script_setup_true_lang.js.map

package/dist/domains/dam/cropper/components/DamAssetImageRoiSelectLazy.js

@@ -1,7 +1,6 @@
 import e from "./DamAssetImageRoiSelectLazy.vue_vue_type_script_setup_true_lang.js";
-//#region src/domains/dam/cropper/components/DamAssetImageRoiSelectLazy.vue
+// src/domains/dam/cropper/components/DamAssetImageRoiSelectLazy.vue
 var t = e;
-//#endregion
 export { t as default };
 
 //# sourceMappingURL=DamAssetImageRoiSelectLazy.js.map