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

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

@@ -1 +1 @@
-{"version":3,"file":"damFilterUserAllowedUploadConfigs.js","names":["isDamUser","isObject","user","isArray","licenceJudgeOf","system","useCommonAdminCoreDamOptions","configName","defineAuth","useCurrentUser","currentUser","isUndefined","isSuperAdmin","filterAllowedImageWidgetSelectConfigs","cloneDeep","values","extSystems","assetLicences","assetLicenceValue","allowed","value","isImageWidgetUploadConfigAllowed"],"sources":["../../../../../src/domains/dam/config/utils/damFilterUserAllowedUploadConfigs.ts"],"sourcesContent":["import { cloneDeep, isArray, isObject, isUndefined } from '@/shared/utils/common'\nimport type { DamConfigLicenceExtSystemReturnType } from '@/domains/dam/types/DamConfig'\nimport { defineAuth } from '@/domains/auth/composables/defineAuth'\nimport type { AclValue } from '@/domains/auth/types/Permission'\nimport type { DamCurrentUserDto } from '@/domains/dam/types/DamCurrentUser'\nimport { SYSTEM_DAM } from '@/domains/dam/api/damConstants'\nimport { useCommonAdminCoreDamOptions } from '@/domains/dam/composables/commonAdminCoreDamOptions'\n\n/** A current user as DAM gives it: what its licences are decided by. */\nconst isDamUser = (user: unknown): user is DamCurrentUserDto =>\n  isObject(user) &&\n  isArray((user as Partial<DamCurrentUserDto>).adminToExtSystems) &&\n  isArray((user as Partial<DamCurrentUserDto>).userToExtSystems) &&\n  isArray((user as Partial<DamCurrentUserDto>).resolvedAssetLicences)\n\n/**\n * Who decides the licences under the configuration `configName`: `all` with `currentUser: false` or for an admin of\n * DAM, `none` while no user is loaded or when the loaded one is no user of DAM, else that user. The system is\n * `currentUser` of the configuration, `dam` by default. A user of another system is a configuration error: it is\n * written down, and no licence is allowed, before its roles are read (an admin of another system is no admin of DAM).\n */\nconst licenceJudgeOf = (configName: string): 'all' | 'none' | DamCurrentUserDto => {\n  const system = useCommonAdminCoreDamOptions(configName).currentUser ?? SYSTEM_DAM\n  if (system === false) return 'all'\n  const { useCurrentUser } = defineAuth<AclValue>(system)\n  const { currentUser, isSuperAdmin } = useCurrentUser<DamCurrentUserDto>(system)\n  const user = currentUser.value\n  if (isUndefined(user)) return 'none'\n  if (!isDamUser(user)) {\n    console.error(\n      `commonAdmin: the current user of the system \"${system}\", which \\`currentUser\\` of the DAM configuration ` +\n        `\"${configName}\" names, is no user of DAM: no licence is allowed.`\n    )\n    return 'none'\n  }\n  return isSuperAdmin.value ? 'all' : user\n}\n\n/** The licences the current user of the system `currentUser` of the configuration `configName` may pick from. */\nexport function filterAllowedImageWidgetSelectConfigs(\n  values: DamConfigLicenceExtSystemReturnType[],\n  configName: string\n) {\n  const currentUser = licenceJudgeOf(configName)\n  if (currentUser === 'all') return cloneDeep(values)\n  if (currentUser === 'none') return []\n\n  // As the backend's licence voter: an admin or a user of the ext. system may use any of its licences.\n  const extSystems = [...currentUser.adminToExtSystems, ...currentUser.userToExtSystems]\n  const assetLicences = currentUser.resolvedAssetLicences.map((assetLicenceValue) => assetLicenceValue.id)\n  const allowed: DamConfigLicenceExtSystemReturnType[] = []\n  values.forEach((value) => {\n    if (extSystems.includes(value.extSystem)) {\n      allowed.push(value)\n      return\n    }\n    if (assetLicences.includes(value.licence)) {\n      allowed.push(value)\n    }\n  })\n  return allowed\n}\n\n/** Whether the current user of the system `currentUser` of the configuration `configName` may upload into the licence. */\nexport function isImageWidgetUploadConfigAllowed(\n  value: DamConfigLicenceExtSystemReturnType,\n  configName: string\n): boolean {\n  const currentUser = licenceJudgeOf(configName)\n  if (currentUser === 'all') return true\n  if (currentUser === 'none') return false\n\n  // As the backend's licence voter: an admin or a user of the ext. system may use any of its licences.\n  if (\n    currentUser.adminToExtSystems.includes(value.extSystem) ||\n    currentUser.userToExtSystems.includes(value.extSystem)\n  ) {\n    return true\n  }\n\n  const assetLicences = currentUser.resolvedAssetLicences.map((assetLicenceValue) => assetLicenceValue.id)\n  if (assetLicences.includes(value.licence)) {\n    return true\n  }\n\n  return false\n}\n"],"mappings":";;;;AASA,IAAMA,KAAa,MACjBC,EAASC,CAAI,KACbC,EAASD,EAAoC,iBAAiB,KAC9DC,EAASD,EAAoC,gBAAgB,KAC7DC,EAASD,EAAoC,qBAAqB,GAQ9DE,KAAkB,MAA2D;CACjF,IAAMC,IAASC,EAA6BC,CAAU,CAAC,CAAC,eAAA;CACxD,IAAIF,MAAW,IAAO,OAAO;CAC7B,IAAM,EAAE,sBAAmBG,EAAqBH,CAAM,GAChD,EAAE,gBAAa,oBAAiBI,EAAkCJ,CAAM,GACxEH,IAAOQ,EAAY;CASzB,OARIC,EAAYT,CAAI,IAAU,SACzBF,EAAUE,CAAI,IAOZU,EAAa,QAAQ,QAAQV,KANlC,QAAQ,MACN,gDAAgDG,EAAO,qDACjDE,EAAW,mDACnB,GACO;AAGX;AAGA,SAAgBM,EACd,GACA,GACA;CACA,IAAMH,IAAcN,EAAeG,CAAU;CAC7C,IAAIG,MAAgB,OAAO,OAAOI,EAAUC,CAAM;CAClD,IAAIL,MAAgB,QAAQ,OAAO,CAAC;CAGpC,IAAMM,IAAa,CAAC,GAAGN,EAAY,mBAAmB,GAAGA,EAAY,gBAAgB,GAC/EO,IAAgBP,EAAY,sBAAsB,KAAK,MAAsBQ,EAAkB,EAAE,GACjGC,IAAiD,CAAC;CAUxD,OATAJ,EAAO,SAAS,MAAU;EACxB,CAAIC,EAAW,SAASI,EAAM,SAAS,KAInCH,EAAc,SAASG,EAAM,OAAO,MACtCD,EAAQ,KAAKC,CAAK;CAEtB,CAAC,GACMD;AACT;AAGA,SAAgBE,EACd,GACA,GACS;CACT,IAAMX,IAAcN,EAAeG,CAAU;CAiB7C,OAhBIG,MAAgB,SAChBA,MAAgB,UAWpB,GAPEA,EAAY,kBAAkB,SAASU,EAAM,SAAS,KACtDV,EAAY,iBAAiB,SAASU,EAAM,SAAS,KAKjCV,EAAY,sBAAsB,KAAK,MAAsBQ,EAAkB,EACjG,CAAA,CAAc,SAASE,EAAM,OAAO;AAK1C"}
+{"version":3,"file":"damFilterUserAllowedUploadConfigs.js","names":["isDamUser","isObject","user","isArray","licenceJudgeOf","system","useCommonAdminCoreDamOptions","configName","defineAuth","useCurrentUser","currentUser","isUndefined","isSuperAdmin","filterAllowedImageWidgetSelectConfigs","cloneDeep","values","extSystems","assetLicences","assetLicenceValue","allowed","value","isImageWidgetUploadConfigAllowed"],"sources":["../../../../../src/domains/dam/config/utils/damFilterUserAllowedUploadConfigs.ts"],"sourcesContent":["import { cloneDeep, isArray, isObject, isUndefined } from '@/shared/utils/common'\nimport type { DamConfigLicenceExtSystemReturnType } from '@/domains/dam/types/DamConfig'\nimport { defineAuth } from '@/domains/auth/composables/defineAuth'\nimport type { AclValue } from '@/domains/auth/types/Permission'\nimport type { DamCurrentUserDto } from '@/domains/dam/types/DamCurrentUser'\nimport { SYSTEM_DAM } from '@/domains/dam/api/damConstants'\nimport { useCommonAdminCoreDamOptions } from '@/domains/dam/composables/commonAdminCoreDamOptions'\n\n/** A current user as DAM returns it. Its licences are decided by it. */\nconst isDamUser = (user: unknown): user is DamCurrentUserDto =>\n  isObject(user) &&\n  isArray((user as Partial<DamCurrentUserDto>).adminToExtSystems) &&\n  isArray((user as Partial<DamCurrentUserDto>).userToExtSystems) &&\n  isArray((user as Partial<DamCurrentUserDto>).resolvedAssetLicences)\n\n/**\n * Who decides the licences under `configName`.\n * `all` when `currentUser` is false or the user is a DAM admin. `none` while\n * no user is loaded or the user is not a DAM user. Otherwise the loaded user.\n * The system is the config's `currentUser`, `dam` by default. A user of another system is a config\n * error: it is logged and no licence is allowed. An admin of another system is not a DAM admin.\n */\nconst licenceJudgeOf = (configName: string): 'all' | 'none' | DamCurrentUserDto => {\n  const system = useCommonAdminCoreDamOptions(configName).currentUser ?? SYSTEM_DAM\n  if (system === false) return 'all'\n  const { useCurrentUser } = defineAuth<AclValue>(system)\n  const { currentUser, isSuperAdmin } = useCurrentUser<DamCurrentUserDto>(system)\n  const user = currentUser.value\n  if (isUndefined(user)) return 'none'\n  if (!isDamUser(user)) {\n    console.error(\n      `commonAdmin: the current user of the system \"${system}\", which \\`currentUser\\` of the DAM configuration ` +\n        `\"${configName}\" names, is no user of DAM: no licence is allowed.`\n    )\n    return 'none'\n  }\n  return isSuperAdmin.value ? 'all' : user\n}\n\n/** The licences the current user of the system `currentUser` of the configuration `configName` may pick from. */\nexport function filterAllowedImageWidgetSelectConfigs(\n  values: DamConfigLicenceExtSystemReturnType[],\n  configName: string\n) {\n  const currentUser = licenceJudgeOf(configName)\n  if (currentUser === 'all') return cloneDeep(values)\n  if (currentUser === 'none') return []\n\n  // Matches the backend licence voter: an admin or user of the ext. system may use any of its licences.\n  const extSystems = [...currentUser.adminToExtSystems, ...currentUser.userToExtSystems]\n  const assetLicences = currentUser.resolvedAssetLicences.map((assetLicenceValue) => assetLicenceValue.id)\n  const allowed: DamConfigLicenceExtSystemReturnType[] = []\n  values.forEach((value) => {\n    if (extSystems.includes(value.extSystem)) {\n      allowed.push(value)\n      return\n    }\n    if (assetLicences.includes(value.licence)) {\n      allowed.push(value)\n    }\n  })\n  return allowed\n}\n\n/**\n * Whether the current user of the system `currentUser` of the configuration `configName` may upload into the licence.\n */\nexport function isImageWidgetUploadConfigAllowed(\n  value: DamConfigLicenceExtSystemReturnType,\n  configName: string\n): boolean {\n  const currentUser = licenceJudgeOf(configName)\n  if (currentUser === 'all') return true\n  if (currentUser === 'none') return false\n\n  // Matches the backend licence voter: an admin or user of the ext. system may use any of its licences.\n  if (\n    currentUser.adminToExtSystems.includes(value.extSystem) ||\n    currentUser.userToExtSystems.includes(value.extSystem)\n  ) {\n    return true\n  }\n\n  const assetLicences = currentUser.resolvedAssetLicences.map((assetLicenceValue) => assetLicenceValue.id)\n  if (assetLicences.includes(value.licence)) {\n    return true\n  }\n\n  return false\n}\n"],"mappings":";;;;AASA,IAAMA,KAAa,MACjBC,EAASC,CAAI,KACbC,EAASD,EAAoC,iBAAiB,KAC9DC,EAASD,EAAoC,gBAAgB,KAC7DC,EAASD,EAAoC,qBAAqB,GAS9DE,KAAkB,MAA2D;CACjF,IAAMC,IAASC,EAA6BC,CAAU,CAAC,CAAC,eAAA;CACxD,IAAIF,MAAW,IAAO,OAAO;CAC7B,IAAM,EAAE,sBAAmBG,EAAqBH,CAAM,GAChD,EAAE,gBAAa,oBAAiBI,EAAkCJ,CAAM,GACxEH,IAAOQ,EAAY;CASzB,OARIC,EAAYT,CAAI,IAAU,SACzBF,EAAUE,CAAI,IAOZU,EAAa,QAAQ,QAAQV,KANlC,QAAQ,MACN,gDAAgDG,EAAO,qDACjDE,EAAW,mDACnB,GACO;AAGX;AAGA,SAAgBM,EACd,GACA,GACA;CACA,IAAMH,IAAcN,EAAeG,CAAU;CAC7C,IAAIG,MAAgB,OAAO,OAAOI,EAAUC,CAAM;CAClD,IAAIL,MAAgB,QAAQ,OAAO,CAAC;CAGpC,IAAMM,IAAa,CAAC,GAAGN,EAAY,mBAAmB,GAAGA,EAAY,gBAAgB,GAC/EO,IAAgBP,EAAY,sBAAsB,KAAK,MAAsBQ,EAAkB,EAAE,GACjGC,IAAiD,CAAC;CAUxD,OATAJ,EAAO,SAAS,MAAU;EACxB,CAAIC,EAAW,SAASI,EAAM,SAAS,KAInCH,EAAc,SAASG,EAAM,OAAO,MACtCD,EAAQ,KAAKC,CAAK;CAEtB,CAAC,GACMD;AACT;AAKA,SAAgBE,EACd,GACA,GACS;CACT,IAAMX,IAAcN,EAAeG,CAAU;CAiB7C,OAhBIG,MAAgB,SAChBA,MAAgB,UAWpB,GAPEA,EAAY,kBAAkB,SAASU,EAAM,SAAS,KACtDV,EAAY,iBAAiB,SAASU,EAAM,SAAS,KAKjCV,EAAY,sBAAsB,KAAK,MAAsBQ,EAAkB,EACjG,CAAA,CAAc,SAASE,EAAM,OAAO;AAK1C"}

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 custom elements. Replaces the v1-based `ACropperjs`.\n * Not exported. Its only user is `DamAssetImageRoiSelect`, and it is shaped to that one need.\n * The crop is bound via `v-model` as fractions of the image.\n * `commit` signals that a gesture ended. There is no imperative API.\n * Elements are built in script, not the template. Consumers do not configure `isCustomElement`,\n * and setting properties avoids attribute coercion issues (`NaN`, booleans, fractions).\n */\n\nconst props = withDefaults(\n  defineProps<{\n    src?: string\n    /** The crop as fractions of the image. Null starts 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    /** Colour over everything outside the crop. Replaces 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 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 its entry module. Our `sideEffects`\n// setting lets the consumer's bundler drop that module, so register them here.\n// `$define` is a no-op for an already registered element.\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 only caller never varies. Each is behaviour: no checkerboard behind a photo, wheel left\n * to the page, pinch zoom kept for tablets, and the minimum canvas size from cropper.js' stylesheet.\n */\nconst AUTO_CROP_AREA = 0.8\nconst MIN_CONTAINER_WIDTH = 200\nconst MIN_CONTAINER_HEIGHT = 100\n\n// Matches cropper.js v1's stylesheet so both components look the same.\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 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/** Ignores 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 the last one observed. */\nlet laidOut: Size = { width: 0, height: 0 }\n/** The last emitted crop, so a model written straight back is not treated as new. */\nlet lastEmitted: CropRect | null = null\n/** Watches ancestors that clip the host. Their height limits the available room. */\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 are included. */\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 may be: the image, but never outside the visible canvas.\n * They differ only when the image is zoomed past its frame. Then the frame wins, as in cropper.js v1.\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.\n * `$center` only scales and moves an image marked scalable and translatable. cropper.js allows\n * this itself only while loading, so the flags are set for the call and restored 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 initial crop of a new picture. Not using cropper.js' `initialCoverage`,\n * because its deferred init runs after a `ready` handler has positioned the crop.\n * Measured against the image, not the canvas. They differ when the image is 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\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 the image moved. */\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 past the opposite edge. It records\n  // this on the canvas before emitting this event, one move ahead of the `action` event.\n  // Prefer that value, and fall back in case a future version stops setting 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 applying the clamped one keeps the crop sliding along the border instead of freezing.\n  // 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 new \"select\" drag into a corner resize once the direction is known.\n  // It reports the new action on the next move. Follow it so the anchor stays correct.\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 handler always calls\n * `preventDefault()`, which would block page scrolling over the picture.\n * Pinch zoom still works because it arrives as pointer events.\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 style.\n * Re-fitting at once would measure the old image. After a zoom out the crop would hang 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 only the one on `parts`. A superseded build still waiting\n  // on its image has already added one to the DOM, and nothing tracks it.\n  hostEl.value?.querySelectorAll(CropperCanvas.$name).forEach((canvas) => {\n    // Disconnecting a `cropper-image` drops its listeners but keeps its request running.\n    // The pending `$ready()` promise keeps this component alive 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 is actually shown.\n * Usually the host's own `max-height`, which `DamAssetImageRoiSelect` relies on. Ancestors\n * with `overflow: hidden` count too, because what they cut off cannot be scrolled into view.\n * Scrolling ancestors are ignored. There the rest is reachable by scrolling.\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 where the host becomes visible to where the ancestor stops showing content.\n    // The ancestor's top matters when the host starts above it.\n    // Content off the top is as unreachable as content 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 gives it, in two passes.\n * The picture's height follows from its width, but a frame with\n * `max-height` only shows how much it reveals once it has content.\n * This keeps a tall picture in a short frame scaled to fit, as in v1. A\n * part cut off by `overflow: hidden` could not be reached by the crop.\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 load. A visible spinner would make an empty cropper look stuck.\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  // Hidden 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 would drift the natural-pixel crop data that callers persist.\n  selection.precise = true\n  selection.aspectRatio = props.aspectRatio\n  buildSelectionChildren(selection)\n\n  // Listeners are added before anything is connected, so the current\n  // action is known before the elements' own handlers react.\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  // Attach the whole tree at once. Each element links to its\n  // siblings on connect, and the shade looks for the selection.\n  // Appending children one by one leaves the shade on an empty canvas, and it never follows the crop.\n  host.appendChild(canvas)\n  // Second pass, now that the host has content for its constraints to act on.\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  let loaded: HTMLImageElement\n  try {\n    // The element makes the only request. Its promise returns the loaded picture.\n    loaded = await image.$ready()\n  } catch {\n    // Matches cropper.js v1, which 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  // The natural size is known only now. Sizing here avoids a separate request just to measure the image.\n  natural = { width: loaded.naturalWidth, height: loaded.naturalHeight }\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  // A prop changed during loading found no elements for the watchers to\n  // update. Re-apply the two variable props. This 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\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/** Applies a crop given in fractions to 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 * Emits the crop. Also called after the component adjusts the crop itself. A stored region\n * rarely matches the configured ratio, and the binding should show the actual crop.\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 host's room: its width and the height that is actually shown. */\nconst hostBox = (host: HTMLElement): Size => ({ width: host.clientWidth, height: visibleHeightOf(host) })\n\n/** Re-fits the image to the new container and keeps the user's crop. */\nconst relayout = () => {\n  const host = hostEl.value\n  if (!parts || !host) return\n  // No crop means the last layout had no size. Fall back to the bound\n  // crop, which a cropper built inside a closed panel has held 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 too. A cropper can move between frames,\n  // and the current clipping ancestor is the one that 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  // Compare with the box the current layout was built for, so a\n  // size seen during loading is not treated as already laid out.\n  if (box.width === laidOut.width && box.height === laidOut.height) return\n  if (!parts) return\n  // Deferred a frame. Resizing the canvas inside the observer\n  // callback makes Chromium report an undelivered-notification loop.\n  requestAnimationFrame(() => relayout())\n}\n\n// Height matters as much as width. The DAM sizes the cropper with `calc(100vh\n// - 160px)`, so a shorter window shrinks the frame without changing its width.\nuseResizeObserver(hostEl, onHostBoxChanged)\n\n/** A clipping ancestor can change how much it shows without the host box changing. */\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 the crop just emitted. Otherwise parent and component would keep writing to each other.\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// Full width even as a flex item, such as in the asset detail dialog. The canvas is sized from the\n// host's width, and a shrink-wrapped root has none to give, so every picture got the 200px minimum.\n.a-cropper {\n  width: 100%;\n}\n\n// `cropper-crosshair` is sized in `em`. Without its own size the centre marker would scale with the admin's font.\n// 7px matches the plus sign of v1's `.cropper-center`.\n.a-cropper cropper-crosshair {\n  font-size: 7px;\n}\n\n// Recreates v1's `.cropper-line` on each crop edge: a 5px band of the selection colour at 10%\n// opacity, 3px outside and 2px inside the border. It makes the outline read as a grabbable edge.\n// Drawn as two shadows, so it does not depend on the v2 grip sizes.\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.d.ts

@@ -1,30 +1,22 @@
 import { CropRect } from '../utils/cropperTypes';
 /**
- * Image cropper built on cropper.js v2's custom elements, replacing the v1-based `ACropperjs`.
- *
- * It lives here, beside `DamAssetImageRoiSelect`, because that is the only thing that uses it and
- * nothing outside this library does. It is not exported: shaping it to one need rather than to a
- * general audience is what keeps it to its size.
- *
- * The crop is bound, not fetched: `v-model` carries it as fractions of the image, and `commit` says
- * the user has finished a gesture. There is no imperative surface — the one thing a host wants to do
- * with a cropper is know where the crop is, and a binding says that better than six methods did.
- *
- * The elements are assembled in script rather than in the template on purpose: a consumer of this
- * library does not configure `isCustomElement` in their own build, and setting element *properties*
- * instead of going through attribute strings avoids the coercion surprises (`NaN`, booleans,
- * fractional numbers) that come with the attribute round-trip.
+ * Image cropper built on cropper.js v2 custom elements. Replaces the v1-based `ACropperjs`.
+ * Not exported. Its only user is `DamAssetImageRoiSelect`, and it is shaped to that one need.
+ * The crop is bound via `v-model` as fractions of the image.
+ * `commit` signals that a gesture ended. There is no imperative API.
+ * Elements are built in script, not the template. Consumers do not configure `isCustomElement`,
+ * and setting properties avoids attribute coercion issues (`NaN`, booleans, fractions).
  */
 type __VLS_Props = {
     src?: string;
-    /** The crop, as fractions of the image. Leave it null to start from the default box. */
+    /** The crop as fractions of the image. Null starts from the default box. */
     modelValue?: CropRect | null;
     /** `NaN` (the default) leaves the crop free-form. */
     aspectRatio?: number;
     containerStyle?: {
         [key: string]: string;
     } | undefined;
-    /** Wash over everything outside the crop — the replacement for overriding `.cropper-modal`. */
+    /** Colour over everything outside the crop. Replaces overriding `.cropper-modal`. */
     shadeColor?: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {

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"
@@ -242,7 +242,7 @@ var ue = { class: "a-cropper d-flex flex-column" }, de = {
 			let e = S.value;
 			if (!w || !e) return;
 			let t = Se() ?? b.modelValue, n = J(w.canvas, e, e.clientWidth);
-			A = Q(e), $(e), R(), !(n.width <= 0 || n.height <= 0) && (t && t.width > 0 ? X(t) : z(), Z());
+			A = Q(e), $(e), R(), n.width <= 0 || n.height <= 0 || (t && t.width > 0 ? X(t) : z(), Z());
 		}, Te = () => {
 			let e = S.value;
 			if (!e) return;
@@ -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 custom elements. Replaces the v1-based `ACropperjs`.\n * Not exported. Its only user is `DamAssetImageRoiSelect`, and it is shaped to that one need.\n * The crop is bound via `v-model` as fractions of the image.\n * `commit` signals that a gesture ended. There is no imperative API.\n * Elements are built in script, not the template. Consumers do not configure `isCustomElement`,\n * and setting properties avoids attribute coercion issues (`NaN`, booleans, fractions).\n */\n\nconst props = withDefaults(\n  defineProps<{\n    src?: string\n    /** The crop as fractions of the image. Null starts 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    /** Colour over everything outside the crop. Replaces 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 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 its entry module. Our `sideEffects`\n// setting lets the consumer's bundler drop that module, so register them here.\n// `$define` is a no-op for an already registered element.\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 only caller never varies. Each is behaviour: no checkerboard behind a photo, wheel left\n * to the page, pinch zoom kept for tablets, and the minimum canvas size from cropper.js' stylesheet.\n */\nconst AUTO_CROP_AREA = 0.8\nconst MIN_CONTAINER_WIDTH = 200\nconst MIN_CONTAINER_HEIGHT = 100\n\n// Matches cropper.js v1's stylesheet so both components look the same.\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 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/** Ignores 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 the last one observed. */\nlet laidOut: Size = { width: 0, height: 0 }\n/** The last emitted crop, so a model written straight back is not treated as new. */\nlet lastEmitted: CropRect | null = null\n/** Watches ancestors that clip the host. Their height limits the available room. */\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 are included. */\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 may be: the image, but never outside the visible canvas.\n * They differ only when the image is zoomed past its frame. Then the frame wins, as in cropper.js v1.\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.\n * `$center` only scales and moves an image marked scalable and translatable. cropper.js allows\n * this itself only while loading, so the flags are set for the call and restored 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 initial crop of a new picture. Not using cropper.js' `initialCoverage`,\n * because its deferred init runs after a `ready` handler has positioned the crop.\n * Measured against the image, not the canvas. They differ when the image is 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\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 the image moved. */\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 past the opposite edge. It records\n  // this on the canvas before emitting this event, one move ahead of the `action` event.\n  // Prefer that value, and fall back in case a future version stops setting 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 applying the clamped one keeps the crop sliding along the border instead of freezing.\n  // 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 new \"select\" drag into a corner resize once the direction is known.\n  // It reports the new action on the next move. Follow it so the anchor stays correct.\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 handler always calls\n * `preventDefault()`, which would block page scrolling over the picture.\n * Pinch zoom still works because it arrives as pointer events.\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 style.\n * Re-fitting at once would measure the old image. After a zoom out the crop would hang 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 only the one on `parts`. A superseded build still waiting\n  // on its image has already added one to the DOM, and nothing tracks it.\n  hostEl.value?.querySelectorAll(CropperCanvas.$name).forEach((canvas) => {\n    // Disconnecting a `cropper-image` drops its listeners but keeps its request running.\n    // The pending `$ready()` promise keeps this component alive 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 is actually shown.\n * Usually the host's own `max-height`, which `DamAssetImageRoiSelect` relies on. Ancestors\n * with `overflow: hidden` count too, because what they cut off cannot be scrolled into view.\n * Scrolling ancestors are ignored. There the rest is reachable by scrolling.\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 where the host becomes visible to where the ancestor stops showing content.\n    // The ancestor's top matters when the host starts above it.\n    // Content off the top is as unreachable as content 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 gives it, in two passes.\n * The picture's height follows from its width, but a frame with\n * `max-height` only shows how much it reveals once it has content.\n * This keeps a tall picture in a short frame scaled to fit, as in v1. A\n * part cut off by `overflow: hidden` could not be reached by the crop.\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 load. A visible spinner would make an empty cropper look stuck.\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  // Hidden 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 would drift the natural-pixel crop data that callers persist.\n  selection.precise = true\n  selection.aspectRatio = props.aspectRatio\n  buildSelectionChildren(selection)\n\n  // Listeners are added before anything is connected, so the current\n  // action is known before the elements' own handlers react.\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  // Attach the whole tree at once. Each element links to its\n  // siblings on connect, and the shade looks for the selection.\n  // Appending children one by one leaves the shade on an empty canvas, and it never follows the crop.\n  host.appendChild(canvas)\n  // Second pass, now that the host has content for its constraints to act on.\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  let loaded: HTMLImageElement\n  try {\n    // The element makes the only request. Its promise returns the loaded picture.\n    loaded = await image.$ready()\n  } catch {\n    // Matches cropper.js v1, which 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  // The natural size is known only now. Sizing here avoids a separate request just to measure the image.\n  natural = { width: loaded.naturalWidth, height: loaded.naturalHeight }\n  sizeCanvas(canvas, host, host.clientWidth)\n\n  // A prop changed during loading found no elements for the watchers to\n  // update. Re-apply the two variable props. This 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\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/** Applies a crop given in fractions to 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 * Emits the crop. Also called after the component adjusts the crop itself. A stored region\n * rarely matches the configured ratio, and the binding should show the actual crop.\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 host's room: its width and the height that is actually shown. */\nconst hostBox = (host: HTMLElement): Size => ({ width: host.clientWidth, height: visibleHeightOf(host) })\n\n/** Re-fits the image to the new container and keeps the user's crop. */\nconst relayout = () => {\n  const host = hostEl.value\n  if (!parts || !host) return\n  // No crop means the last layout had no size. Fall back to the bound\n  // crop, which a cropper built inside a closed panel has held 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 too. A cropper can move between frames,\n  // and the current clipping ancestor is the one that 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  // Compare with the box the current layout was built for, so a\n  // size seen during loading is not treated as already laid out.\n  if (box.width === laidOut.width && box.height === laidOut.height) return\n  if (!parts) return\n  // Deferred a frame. Resizing the canvas inside the observer\n  // callback makes Chromium report an undelivered-notification loop.\n  requestAnimationFrame(() => relayout())\n}\n\n// Height matters as much as width. The DAM sizes the cropper with `calc(100vh\n// - 160px)`, so a shorter window shrinks the frame without changing its width.\nuseResizeObserver(hostEl, onHostBoxChanged)\n\n/** A clipping ancestor can change how much it shows without the host box changing. */\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 the crop just emitted. Otherwise parent and component would keep writing to each other.\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// Full width even as a flex item, such as in the asset detail dialog. The canvas is sized from the\n// host's width, and a shrink-wrapped root has none to give, so every picture got the 200px minimum.\n.a-cropper {\n  width: 100%;\n}\n\n// `cropper-crosshair` is sized in `em`. Without its own size the centre marker would scale with the admin's font.\n// 7px matches the plus sign of v1's `.cropper-center`.\n.a-cropper cropper-crosshair {\n  font-size: 7px;\n}\n\n// Recreates v1's `.cropper-line` on each crop edge: a 5px band of the selection colour at 10%\n// opacity, 3px outside and 2px inside the border. It makes the outline read as a grabbable edge.\n// Drawn as two shadows, so it does not depend on the v2 grip sizes.\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.js.map

@@ -1 +1 @@
-{"version":3,"file":"DamAssetImageRoiSelect.js","names":["_sfc_main","DamAssetImageRoiSelect_vue_vue_type_script_setup_true_lang_default","DamAssetImageRoiSelect_default"],"sources":["../../../../../src/domains/dam/cropper/components/DamAssetImageRoiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, watch } from 'vue'\nimport { useAlerts } from '@/domains/system/composables/alerts'\nimport { useImageRoiStore } from '@/domains/dam/cropper/store/imageRoiStore'\nimport { updateRoi } from '@/domains/dam/api/damImageRoiApi'\nimport { useCommonAdminCoreDamOptions } from '@/domains/dam/composables/commonAdminCoreDamOptions'\nimport { cropToRegion, regionToCrop } from '@/domains/dam/cropper/utils/cropperJsService'\nimport ACropper from '@/domains/dam/cropper/components/ACropper.vue'\nimport type { CropRect } from '@/domains/dam/cropper/utils/cropperTypes'\nimport { useDamConfigState } from '@/domains/dam/config/composables/damConfigState'\nimport type { DocId, IntegerId } from '@/shared/types/common'\nimport { isUndefined } from '@/shared/utils/common'\nimport { fetchImageFile } from '@/domains/dam/api/damImageApi'\nimport type { AssetFileImage } from '@/domains/dam/types/AssetFile'\nimport { useDamConfigName } from '@/domains/dam/composables/damConfigName'\n\nconst props = withDefaults(\n  defineProps<{\n    extSystem: IntegerId\n    configName?: string\n    readonly?: boolean\n  }>(),\n  {\n    configName: undefined,\n    readonly: false,\n  }\n)\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nconst damConfigName = useDamConfigName(props.configName)\n\nconst { showRecordWas, showErrorsDefault } = useAlerts()\n\nconst cropperContainerStyle = { overflow: 'hidden', maxHeight: 'calc(100vh - 160px)' }\n// What overriding `.cropper-modal` used to buy: the wash over everything outside the region is the\n// admin's own light grey rather than cropper.js' black. The v2 elements keep their styling inside a\n// shadow root, so it is passed in as a colour instead of reached for with a selector.\nconst cropperShadeColor = 'rgba(241, 244, 246, 0.5)'\n\nconst imageRoiStore = useImageRoiStore()\n\nconst { damClient, endPointImage, endPointRoi } = useCommonAdminCoreDamOptions(damConfigName)\nconst { getDamConfigExtSystem } = useDamConfigState(undefined, damConfigName)\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nconst configExtSystem = getDamConfigExtSystem(props.extSystem)\n\nif (isUndefined(configExtSystem)) {\n  throw new Error('DamAssetImageRoiSelect: Ext system must be initialised.')\n}\n\nconst imageUrl = computed(() => {\n  if (imageRoiStore.imageFile && imageRoiStore.imageFile.links?.image_detail) {\n    return imageRoiStore.imageFile.links.image_detail.url + '?manipulated=' + imageRoiStore.imageFile.manipulatedAt\n  }\n  return ''\n})\n\n/** The stored region as the cropper wants it: fractions of the picture. */\nconst crop = ref<CropRect | null>(null)\n\nconst readStoredRegion = () => {\n  const { roi, imageFile } = imageRoiStore\n  crop.value =\n    roi && imageFile ? regionToCrop(roi, imageFile.imageAttributes.width, imageFile.imageAttributes.height) : null\n}\nreadStoredRegion()\nwatch(() => imageRoiStore.roi, readStoredRegion)\n\n// Two seconds after a save the file of the region is read again, as the DAM has redrawn it. The read is for that\n// file and only while the store still holds what the save left: the very object of the file (a rotation, another\n// slot or another asset put another), the region saved (admin-dam's change of slot takes the region away at once,\n// before the file of the new slot is read) and the cropper. Otherwise it keeps what it has. It read the file shown when\n// the two seconds were up, and put its answer in the store whenever it came, over the file of another slot or a\n// rotated one. Of two saves only the read after the latest is put in the store: the read after the first, answering\n// last, brought the file as the DAM had drawn it before.\n// The save and the read after it show a loader of the cropper's own, with the store's: off whatever the read ends\n// with, and never one somebody else turned on in the store. The save turned on the store's, which stayed on over a\n// file shown by a way that does not hide it, and in the store when the cropper went before the read. Beside it the\n// cropper is busy in the store (`cropperBusy`), for the panel of the regions: it offers no refresh meanwhile. After the\n// read the previews of the regions are drawn anew. Gone before its save answered, the cropper waits for no redraw.\ninterface SavedRegion {\n  save: number\n  file: AssetFileImage\n  regionId: DocId\n}\nlet unmounted = false\nlet reloadTimer: ReturnType<typeof setTimeout> | undefined\nlet savedRegions = 0\nconst saving = ref(false)\nconst loaderShown = computed(() => imageRoiStore.loader || saving.value)\nconst busy = (on: boolean) => {\n  saving.value = on\n  imageRoiStore.setCropperBusy(on)\n}\n// Saves on their way, and whether the read after the latest answered save is still to come: the cropper is busy\n// till neither is left. Two commits before the cropper is hidden make two saves, and the end of the older one, its\n// failure or its read, turned the busy state off while the newer one still waited. A cropper that went cleared it\n// as it went: the store's flag may be another cropper's by now.\nlet savesPending = 0\nlet readPending = false\nconst settleBusy = () => {\n  if (!unmounted) busy(savesPending > 0 || readPending)\n}\nconst isStillShown = (saved: SavedRegion) =>\n  !unmounted &&\n  saved.save === savedRegions &&\n  imageRoiStore.imageFile === saved.file &&\n  imageRoiStore.roi?.id === saved.regionId\n\nconst reloadSavedFile = async (saved: SavedRegion) => {\n  try {\n    if (!isStillShown(saved)) return\n    try {\n      const file = await fetchImageFile(damClient, endPointImage, saved.file.id)\n      if (isStillShown(saved)) {\n        imageRoiStore.setImageFile(file)\n        imageRoiStore.forceReloadRoiPreviews()\n      }\n    } catch (error) {\n      if (isStillShown(saved)) showErrorsDefault(error)\n    }\n  } finally {\n    // A newer save waits for a read of its own.\n    if (saved.save === savedRegions) {\n      readPending = false\n      settleBusy()\n    }\n  }\n}\n\nconst saveRoi = async (committed: CropRect) => {\n  const { roi, imageFile } = imageRoiStore\n  if (!roi || !imageFile || props.readonly) return\n\n  const region = cropToRegion(committed, roi, imageFile.imageAttributes.width, imageFile.imageAttributes.height)\n  savesPending++\n  busy(true)\n  try {\n    await updateRoi(damClient, endPointRoi, region.id, region)\n    showRecordWas('updated')\n    if (unmounted) return\n    const saved: SavedRegion = { save: ++savedRegions, file: imageFile, regionId: region.id }\n    readPending = true\n    clearTimeout(reloadTimer)\n    reloadTimer = setTimeout(() => reloadSavedFile(saved), 2000)\n  } catch (error) {\n    showErrorsDefault(error)\n  } finally {\n    savesPending--\n    settleBusy()\n  }\n}\n\nconst showCropper = computed(() => {\n  if (imageRoiStore.imageFile && imageUrl.value.length > 0 && !loaderShown.value) {\n    return true\n  }\n  return false\n})\n\nonUnmounted(() => {\n  unmounted = true\n  clearTimeout(reloadTimer)\n  imageRoiStore.setCropperBusy(false)\n  crop.value = null\n})\n</script>\n\n<template>\n  <div\n    v-if=\"loaderShown\"\n    class=\"d-flex w-100 align-center justify-center\"\n  >\n    <VProgressCircular indeterminate />\n  </div>\n  <ACropper\n    v-if=\"showCropper && configExtSystem.image && !readonly\"\n    :key=\"imageRoiStore.imageFile?.manipulatedAt || 0\"\n    v-model=\"crop\"\n    :aspect-ratio=\"configExtSystem.image.roiWidth / configExtSystem.image.roiHeight\"\n    :container-style=\"cropperContainerStyle\"\n    :shade-color=\"cropperShadeColor\"\n    :src=\"imageUrl\"\n    @commit=\"saveRoi\"\n  />\n  <VImg\n    v-else-if=\"showCropper\"\n    :src=\"imageUrl\"\n    :max-height=\"cropperContainerStyle.maxHeight\"\n    data-cy=\"roi-readonly-image\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"DamAssetImageRoiSelect.js","names":["_sfc_main","DamAssetImageRoiSelect_vue_vue_type_script_setup_true_lang_default","DamAssetImageRoiSelect_default"],"sources":["../../../../../src/domains/dam/cropper/components/DamAssetImageRoiSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref, watch } from 'vue'\nimport { useAlerts } from '@/domains/system/composables/alerts'\nimport { useImageRoiStore } from '@/domains/dam/cropper/store/imageRoiStore'\nimport { updateRoi } from '@/domains/dam/api/damImageRoiApi'\nimport { useCommonAdminCoreDamOptions } from '@/domains/dam/composables/commonAdminCoreDamOptions'\nimport { cropToRegion, regionToCrop } from '@/domains/dam/cropper/utils/cropperJsService'\nimport ACropper from '@/domains/dam/cropper/components/ACropper.vue'\nimport type { CropRect } from '@/domains/dam/cropper/utils/cropperTypes'\nimport { useDamConfigState } from '@/domains/dam/config/composables/damConfigState'\nimport type { DocId, IntegerId } from '@/shared/types/common'\nimport { isUndefined } from '@/shared/utils/common'\nimport { fetchImageFile } from '@/domains/dam/api/damImageApi'\nimport type { AssetFileImage } from '@/domains/dam/types/AssetFile'\nimport { useDamConfigName } from '@/domains/dam/composables/damConfigName'\n\nconst props = withDefaults(\n  defineProps<{\n    extSystem: IntegerId\n    configName?: string\n    readonly?: boolean\n  }>(),\n  {\n    configName: undefined,\n    readonly: false,\n  }\n)\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nconst damConfigName = useDamConfigName(props.configName)\n\nconst { showRecordWas, showErrorsDefault } = useAlerts()\n\nconst cropperContainerStyle = { overflow: 'hidden', maxHeight: 'calc(100vh - 160px)' }\n// Shade outside the region uses the admin's light grey instead of cropper.js' black.\n// The v2 elements style inside a shadow root, so the colour is passed in rather than set with a selector.\nconst cropperShadeColor = 'rgba(241, 244, 246, 0.5)'\n\nconst imageRoiStore = useImageRoiStore()\n\nconst { damClient, endPointImage, endPointRoi } = useCommonAdminCoreDamOptions(damConfigName)\nconst { getDamConfigExtSystem } = useDamConfigState(undefined, damConfigName)\n// eslint-disable-next-line vue/no-setup-props-reactivity-loss\nconst configExtSystem = getDamConfigExtSystem(props.extSystem)\n\nif (isUndefined(configExtSystem)) {\n  throw new Error('DamAssetImageRoiSelect: Ext system must be initialised.')\n}\n\nconst imageUrl = computed(() => {\n  if (imageRoiStore.imageFile && imageRoiStore.imageFile.links?.image_detail) {\n    return imageRoiStore.imageFile.links.image_detail.url + '?manipulated=' + imageRoiStore.imageFile.manipulatedAt\n  }\n  return ''\n})\n\n/** The stored region in the cropper's format: fractions of the picture. */\nconst crop = ref<CropRect | null>(null)\n\nconst readStoredRegion = () => {\n  const { roi, imageFile } = imageRoiStore\n  crop.value =\n    roi && imageFile ? regionToCrop(roi, imageFile.imageAttributes.width, imageFile.imageAttributes.height) : null\n}\nreadStoredRegion()\nwatch(() => imageRoiStore.roi, readStoredRegion)\n\n// Two seconds after a save, the region file is read again because the DAM has redrawn it.\n// The read result is applied only if the store still holds the same file, the saved region and the cropper. A\n// rotation, another slot or another asset changes the file. admin-dam's slot change removes the region at once.\n// Only the read after the latest save is applied. An older read answering last would bring back the earlier drawing.\n// The save and read use the cropper's own loader, never one someone else turned on.\n// `cropperBusy` tells the region panel to offer no refresh meanwhile. After the read, region\n// previews are redrawn. A cropper gone before its save answered does not wait for a redraw.\ninterface SavedRegion {\n  save: number\n  file: AssetFileImage\n  regionId: DocId\n}\nlet unmounted = false\nlet reloadTimer: ReturnType<typeof setTimeout> | undefined\nlet savedRegions = 0\nconst saving = ref(false)\nconst loaderShown = computed(() => imageRoiStore.loader || saving.value)\nconst busy = (on: boolean) => {\n  saving.value = on\n  imageRoiStore.setCropperBusy(on)\n}\n// Pending saves and whether the read after the latest answered\n// save is still due. The cropper is busy until neither is left.\n// Two commits make two saves. The older one's end must not clear the busy state while the newer one waits.\n// A cropper that goes away clears the busy state, as the store flag may already belong to another cropper.\nlet savesPending = 0\nlet readPending = false\nconst settleBusy = () => {\n  if (!unmounted) busy(savesPending > 0 || readPending)\n}\nconst isStillShown = (saved: SavedRegion) =>\n  !unmounted &&\n  saved.save === savedRegions &&\n  imageRoiStore.imageFile === saved.file &&\n  imageRoiStore.roi?.id === saved.regionId\n\nconst reloadSavedFile = async (saved: SavedRegion) => {\n  try {\n    if (!isStillShown(saved)) return\n    try {\n      const file = await fetchImageFile(damClient, endPointImage, saved.file.id)\n      if (isStillShown(saved)) {\n        imageRoiStore.setImageFile(file)\n        imageRoiStore.forceReloadRoiPreviews()\n      }\n    } catch (error) {\n      if (isStillShown(saved)) showErrorsDefault(error)\n    }\n  } finally {\n    // A newer save waits for a read of its own.\n    if (saved.save === savedRegions) {\n      readPending = false\n      settleBusy()\n    }\n  }\n}\n\nconst saveRoi = async (committed: CropRect) => {\n  const { roi, imageFile } = imageRoiStore\n  if (!roi || !imageFile || props.readonly) return\n\n  const region = cropToRegion(committed, roi, imageFile.imageAttributes.width, imageFile.imageAttributes.height)\n  savesPending++\n  busy(true)\n  try {\n    await updateRoi(damClient, endPointRoi, region.id, region)\n    showRecordWas('updated')\n    if (unmounted) return\n    const saved: SavedRegion = { save: ++savedRegions, file: imageFile, regionId: region.id }\n    readPending = true\n    clearTimeout(reloadTimer)\n    reloadTimer = setTimeout(() => reloadSavedFile(saved), 2000)\n  } catch (error) {\n    showErrorsDefault(error)\n  } finally {\n    savesPending--\n    settleBusy()\n  }\n}\n\nconst showCropper = computed(() => {\n  if (imageRoiStore.imageFile && imageUrl.value.length > 0 && !loaderShown.value) {\n    return true\n  }\n  return false\n})\n\nonUnmounted(() => {\n  unmounted = true\n  clearTimeout(reloadTimer)\n  imageRoiStore.setCropperBusy(false)\n  crop.value = null\n})\n</script>\n\n<template>\n  <div\n    v-if=\"loaderShown\"\n    class=\"d-flex w-100 align-center justify-center\"\n  >\n    <VProgressCircular indeterminate />\n  </div>\n  <ACropper\n    v-if=\"showCropper && configExtSystem.image && !readonly\"\n    :key=\"imageRoiStore.imageFile?.manipulatedAt || 0\"\n    v-model=\"crop\"\n    :aspect-ratio=\"configExtSystem.image.roiWidth / configExtSystem.image.roiHeight\"\n    :container-style=\"cropperContainerStyle\"\n    :shade-color=\"cropperShadeColor\"\n    :src=\"imageUrl\"\n    @commit=\"saveRoi\"\n  />\n  <VImg\n    v-else-if=\"showCropper\"\n    :src=\"imageUrl\"\n    :max-height=\"cropperContainerStyle.maxHeight\"\n    data-cy=\"roi-readonly-image\"\n  />\n</template>\n"],"mappings":""}

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

@@ -1,17 +1,17 @@
-import { isUndefined as e } from "../../../../shared/utils/common.js";
-import { useAlerts as t } from "../../../system/composables/alerts.js";
-import { useCommonAdminCoreDamOptions as n } from "../../composables/commonAdminCoreDamOptions.js";
-import { useDamConfigName as r } from "../../composables/damConfigName.js";
-import { useDamConfigState as i } from "../../config/composables/damConfigState.js";
-import { fetchImageFile as a } from "../../api/damImageApi.js";
-import { useImageRoiStore as o } from "../store/imageRoiStore.js";
-import { updateRoi as s } from "../../api/damImageRoiApi.js";
-import { cropToRegion as c, regionToCrop as l } from "../utils/cropperJsService.js";
-import u from "./ACropper.js";
+import { useAlerts as e } from "../../../system/composables/alerts.js";
+import { useImageRoiStore as t } from "../store/imageRoiStore.js";
+import { updateRoi as n } from "../../api/damImageRoiApi.js";
+import { useCommonAdminCoreDamOptions as r } from "../../composables/commonAdminCoreDamOptions.js";
+import { cropToRegion as i, regionToCrop as a } from "../utils/cropperJsService.js";
+import o from "./ACropper.js";
+import { useDamConfigState as s } from "../../config/composables/damConfigState.js";
+import { isUndefined as c } from "../../../../shared/utils/common.js";
+import { fetchImageFile as l } from "../../api/damImageApi.js";
+import { useDamConfigName as u } from "../../composables/damConfigName.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"
@@ -26,14 +26,14 @@ var T = {
 		}
 	},
 	setup(_) {
-		let D = _, O = r(D.configName), { showRecordWas: k, showErrorsDefault: A } = t(), j = {
+		let D = _, O = u(D.configName), { showRecordWas: k, showErrorsDefault: A } = e(), j = {
 			overflow: "hidden",
 			maxHeight: "calc(100vh - 160px)"
-		}, M = o(), { damClient: N, endPointImage: P, endPointRoi: F } = n(O), { getDamConfigExtSystem: I } = i(void 0, O), L = I(D.extSystem);
-		if (e(L)) throw Error("DamAssetImageRoiSelect: Ext system must be initialised.");
+		}, M = t(), { damClient: N, endPointImage: P, endPointRoi: F } = r(O), { getDamConfigExtSystem: I } = s(void 0, O), L = I(D.extSystem);
+		if (c(L)) throw Error("DamAssetImageRoiSelect: Ext system must be initialised.");
 		let R = f(() => M.imageFile && M.imageFile.links?.image_detail ? M.imageFile.links.image_detail.url + "?manipulated=" + M.imageFile.manipulatedAt : ""), z = b(null), B = () => {
 			let { roi: e, imageFile: t } = M;
-			z.value = e && t ? l(e, t.imageAttributes.width, t.imageAttributes.height) : null;
+			z.value = e && t ? a(e, t.imageAttributes.width, t.imageAttributes.height) : null;
 		};
 		B(), S(() => M.roi, B);
 		let V = !1, H, U = 0, W = b(!1), G = f(() => M.loader || W.value), K = (e) => {
@@ -44,7 +44,7 @@ var T = {
 			try {
 				if (!X(e)) return;
 				try {
-					let t = await a(N, P, e.file.id);
+					let t = await l(N, P, e.file.id);
 					X(e) && (M.setImageFile(t), M.forceReloadRoiPreviews());
 				} catch (t) {
 					X(e) && A(t);
@@ -53,16 +53,16 @@ var T = {
 				e.save === U && (J = !1, Y());
 			}
 		}, Q = async (e) => {
-			let { roi: t, imageFile: n } = M;
-			if (!t || !n || D.readonly) return;
-			let r = c(e, t, n.imageAttributes.width, n.imageAttributes.height);
+			let { roi: t, imageFile: r } = M;
+			if (!t || !r || D.readonly) return;
+			let a = i(e, t, r.imageAttributes.width, r.imageAttributes.height);
 			q++, K(!0);
 			try {
-				if (await s(N, F, r.id, r), k("updated"), V) return;
+				if (await n(N, F, a.id, a), k("updated"), V) return;
 				let e = {
 					save: ++U,
-					file: n,
-					regionId: r.id
+					file: r,
+					regionId: a.id
 				};
 				J = !0, clearTimeout(H), H = setTimeout(() => Z(e), 2e3);
 			} catch (e) {
@@ -73,7 +73,7 @@ var T = {
 		}, $ = f(() => !!(M.imageFile && R.value.length > 0 && !G.value));
 		return v(() => {
 			V = !0, clearTimeout(H), M.setCropperBusy(!1), z.value = null;
-		}), (e, t) => (y(), h(d, null, [G.value ? (y(), h("div", T, [g(C, { indeterminate: "" })])) : m("", !0), $.value && x(L).image && !_.readonly ? (y(), p(u, {
+		}), (e, t) => (y(), h(d, null, [G.value ? (y(), h("div", T, [g(C, { indeterminate: "" })])) : m("", !0), $.value && x(L).image && !_.readonly ? (y(), p(o, {
 			key: x(M).imageFile?.manipulatedAt || 0,
 			modelValue: z.value,
 			"onUpdate:modelValue": t[0] ||= (e) => z.value = e,
@@ -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