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

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

@@ -0,0 +1 @@
+{"version":3,"file":"damConfigStore.js","names":["damPubConfigDefault","UserAuthType","damPrvConfigDefault","damConfigStoreSetup","initialized","reactive","damPubConfig","shallowRef","damPrvConfig","damConfigExtSystem","damConfigLicenceExtSystem","damConfigAssetCustomFormElements","damConfigDistributionCustomFormElements","reset","useDamConfigStore","defineStore","namedDefinitions","useDamConfigStoreOf","configName","pinia","definition"],"sources":["../../../../../src/domains/dam/config/store/damConfigStore.ts"],"sourcesContent":["import { acceptHMRUpdate, defineStore, type Pinia } from 'pinia'\nimport { reactive, shallowRef } from 'vue'\nimport {\n  type DamConfigLicenceExtSystem,\n  type DamExtSystemConfig,\n  type DamPrvConfig,\n  type DamPubConfig,\n  UserAuthType,\n} from '@/domains/dam/types/DamConfig'\nimport type { IntegerId } from '@/shared/types/common'\nimport { type DamAssetTypeType, type DamDistributionServiceName } from '@/domains/dam/types/Asset'\nimport type { CustomDataFormElement } from '@/domains/customDataForm/types/CustomDataForm'\n\nconst damPubConfigDefault = () => ({\n  userAuthType: UserAuthType.JsonCredentials,\n})\nconst damPrvConfigDefault = () => ({\n  colorSet: {},\n  assetExternalProviders: {},\n  distributionServices: {},\n  settings: {\n    aclCheckEnabled: true,\n    adminAllowListName: 'root',\n    allowSelectExtSystem: false,\n    allowSelectLicenceId: false,\n    defaultAssetLicenceId: 0,\n    defaultExtSystemId: 0,\n    imageChunkConfig: {\n      minSize: 0,\n      maxSize: 0,\n    },\n    maxBulkItemCount: 0,\n  },\n})\n\nconst damConfigStoreSetup = () => {\n  const initialized = reactive<{\n    damPubConfig: boolean\n    damPrvConfig: boolean\n  }>({\n    damPubConfig: false,\n    damPrvConfig: false,\n  })\n  const damPubConfig = shallowRef<DamPubConfig>(damPubConfigDefault())\n  const damPrvConfig = shallowRef<DamPrvConfig>(damPrvConfigDefault())\n  const damConfigExtSystem = shallowRef(new Map<IntegerId, DamExtSystemConfig>())\n  const damConfigLicenceExtSystem = shallowRef(new Map<IntegerId, DamConfigLicenceExtSystem>())\n  const damConfigAssetCustomFormElements = shallowRef(\n    new Map<IntegerId, { [key in DamAssetTypeType]: CustomDataFormElement[] }>()\n  )\n  const damConfigDistributionCustomFormElements = shallowRef(\n    new Map<DamDistributionServiceName, CustomDataFormElement[]>()\n  )\n\n  function reset() {\n    damPubConfig.value = damPubConfigDefault()\n    damPrvConfig.value = damPrvConfigDefault()\n    damConfigExtSystem.value.clear()\n    damConfigLicenceExtSystem.value.clear()\n    damConfigAssetCustomFormElements.value.clear()\n    damConfigDistributionCustomFormElements.value.clear()\n    initialized.damPrvConfig = false\n    initialized.damPubConfig = false\n  }\n\n  return {\n    initialized,\n    damPubConfig,\n    damPrvConfig,\n    damConfigExtSystem,\n    damConfigLicenceExtSystem,\n    damConfigAssetCustomFormElements,\n    damConfigDistributionCustomFormElements,\n    reset,\n  }\n}\n\n/** The DAM configuration store of the configuration `default`. */\nexport const useDamConfigStore = defineStore('commonAdminDamConfigStore', damConfigStoreSetup)\n\n/** A DAM configuration store of `default` or another name. Its `$id` is per name. */\nexport type DamConfigStore = Omit<ReturnType<typeof useDamConfigStore>, '$id'> & { readonly $id: string }\n\ninterface DamConfigStoreHotData {\n  namedDamConfigDefinitions?: Map<string, typeof useDamConfigStore>\n  damConfigStoreSetup?: typeof damConfigStoreSetup\n}\n// Kept across hot updates (development only). Each version writes its setup here and they\n// share the named store definitions, which importers of the first version keep creating.\n// @ts-ignore vue-tsc v3 --build mode bug: import.meta.hot type not resolved for this file\nconst hotData: DamConfigStoreHotData | undefined = import.meta.hot?.data\nif (hotData) hotData.damConfigStoreSetup = damConfigStoreSetup\n\n// One definition per configuration name, created on first use. Names never share a store.\nconst namedDefinitions = hotData?.namedDamConfigDefinitions ?? new Map<string, typeof useDamConfigStore>()\nif (hotData) hotData.namedDamConfigDefinitions = namedDefinitions\n\n/**\n * DAM configuration store of `configName`. For `default` the\n * `useDamConfigStore()` store, else a separate store with the same members.\n * A named configuration loads into it. An app whose named client\n * cannot load it fills this store before its components mount.\n */\nexport function useDamConfigStoreOf(configName = 'default', pinia?: Pinia): DamConfigStore {\n  if (configName === 'default') return useDamConfigStore(pinia)\n  let definition = namedDefinitions.get(configName)\n  if (!definition) {\n    // Uses the setup of the latest hot-updated version of this module.\n    definition = defineStore(\n      'commonAdminDamConfigStore:' + configName,\n      hotData?.damConfigStoreSetup ?? damConfigStoreSetup\n    ) as unknown as typeof useDamConfigStore\n    namedDefinitions.set(configName, definition)\n  }\n\n  return definition(pinia)\n}\n\n// @ts-ignore vue-tsc v3 --build mode bug: import.meta.hot type not resolved for this file\nif (import.meta.hot) {\n  // @ts-ignore see above\n  const hot = import.meta.hot\n  const acceptDefault = acceptHMRUpdate(useDamConfigStore, hot)\n  hot.accept((newModule: unknown) => {\n    // Named store definitions are created at runtime, not exported, so the new\n    // module cannot give them a new setup. Reload the page while any exists.\n    if (namedDefinitions.size > 0) {\n      window.location.reload()\n      return\n    }\n    acceptDefault(newModule)\n  })\n}\n"],"mappings":";;;;AAaA,IAAMA,WAA6B,EACjC,cAAcC,EAAa,gBAC7B,IACMC,WAA6B;CACjC,UAAU,CAAC;CACX,wBAAwB,CAAC;CACzB,sBAAsB,CAAC;CACvB,UAAU;EACR,iBAAiB;EACjB,oBAAoB;EACpB,sBAAsB;EACtB,sBAAsB;EACtB,uBAAuB;EACvB,oBAAoB;EACpB,kBAAkB;GAChB,SAAS;GACT,SAAS;EACX;EACA,kBAAkB;CACpB;AACF,IAEMC,UAA4B;CAChC,IAAMC,IAAcC,EAGjB;EACD,cAAc;EACd,cAAc;CAChB,CAAC,GACKC,IAAeC,EAAyBP,EAAoB,CAAC,GAC7DQ,IAAeD,EAAyBL,EAAoB,CAAC,GAC7DO,IAAqBF,kBAAW,IAAI,IAAmC,CAAC,GACxEG,IAA4BH,kBAAW,IAAI,IAA0C,CAAC,GACtFI,IAAmCJ,kBACvC,IAAI,IAAuE,CAC7E,GACMK,IAA0CL,kBAC9C,IAAI,IAAyD,CAC/D;CAEA,SAASM,IAAQ;EAQf,AAPA,EAAa,QAAQb,EAAoB,GACzC,EAAa,QAAQE,EAAoB,GACzCO,EAAmB,MAAM,MAAM,GAC/BC,EAA0B,MAAM,MAAM,GACtCC,EAAiC,MAAM,MAAM,GAC7CC,EAAwC,MAAM,MAAM,GACpD,EAAY,eAAe,IAC3B,EAAY,eAAe;CAC7B;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;AACF,GAGaE,IAAoBC,EAAY,6BAA6BZ,CAAmB,GAgBvFa,oBAAyD,IAAI,IAAsC;AASzG,SAAgBC,EAAoB,IAAa,WAAW,GAA+B;CACzF,IAAIC,MAAe,WAAW,OAAOJ,EAAkBK,CAAK;CAC5D,IAAIC,IAAaJ,EAAiB,IAAIE,CAAU;CAUhD,OATKE,MAEH,IAAaL,EACX,+BAA+BG,GACCf,CAClC,GACAa,EAAiB,IAAIE,GAAYE,CAAU,IAGtCA,EAAWD,CAAK;AACzB"}

package/dist/domains/dam/config/utils/damFilterUserAllowedUploadConfigs.d.ts

@@ -0,0 +1,7 @@
+import { DamConfigLicenceExtSystemReturnType } from '../../types/DamConfig';
+/** The licences the current user of the system `currentUser` of the configuration `configName` may pick from. */
+export declare function filterAllowedImageWidgetSelectConfigs(values: DamConfigLicenceExtSystemReturnType[], configName: string): DamConfigLicenceExtSystemReturnType[];
+/**
+ * Whether the current user of the system `currentUser` of the configuration `configName` may upload into the licence.
+ */
+export declare function isImageWidgetUploadConfigAllowed(value: DamConfigLicenceExtSystemReturnType, configName: string): boolean;

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

@@ -0,0 +1,26 @@
+import { cloneDeep as e, isArray as t, isObject as n, isUndefined as r } from "../../../../shared/utils/common.js";
+import { defineAuth as i } from "../../../auth/composables/defineAuth.js";
+import { useCommonAdminCoreDamOptions as a } from "../../composables/commonAdminCoreDamOptions.js";
+// src/domains/dam/config/utils/damFilterUserAllowedUploadConfigs.ts
+var o = (e) => n(e) && t(e.adminToExtSystems) && t(e.userToExtSystems) && t(e.resolvedAssetLicences), s = (e) => {
+	let t = a(e).currentUser ?? "dam";
+	if (t === !1) return "all";
+	let { useCurrentUser: n } = i(t), { currentUser: s, isSuperAdmin: c } = n(t), l = s.value;
+	return r(l) ? "none" : o(l) ? c.value ? "all" : l : (console.error(`commonAdmin: the current user of the system "${t}", which \`currentUser\` of the DAM configuration "${e}" names, is no user of DAM: no licence is allowed.`), "none");
+};
+function c(t, n) {
+	let r = s(n);
+	if (r === "all") return e(t);
+	if (r === "none") return [];
+	let i = [...r.adminToExtSystems, ...r.userToExtSystems], a = r.resolvedAssetLicences.map((e) => e.id), o = [];
+	return t.forEach((e) => {
+		(i.includes(e.extSystem) || a.includes(e.licence)) && o.push(e);
+	}), o;
+}
+function l(e, t) {
+	let n = s(t);
+	return n === "all" || n !== "none" && !!(n.adminToExtSystems.includes(e.extSystem) || n.userToExtSystems.includes(e.extSystem) || n.resolvedAssetLicences.map((e) => e.id).includes(e.licence));
+}
+export { c as filterAllowedImageWidgetSelectConfigs, l as isImageWidgetUploadConfigAllowed };
+
+//# sourceMappingURL=damFilterUserAllowedUploadConfigs.js.map

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

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

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

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

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

@@ -0,0 +1,40 @@
+import { CropRect } from '../utils/cropperTypes';
+/**
+ * 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. Null starts from the default box. */
+    modelValue?: CropRect | null;
+    /** `NaN` (the default) leaves the crop free-form. */
+    aspectRatio?: number;
+    containerStyle?: {
+        [key: string]: string;
+    } | undefined;
+    /** 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, {} & {
+    "update:modelValue": (crop: CropRect) => any;
+    ready: () => any;
+    commit: (crop: CropRect) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((crop: CropRect) => any) | undefined;
+    onReady?: (() => any) | undefined;
+    onCommit?: ((crop: CropRect) => any) | undefined;
+}>, {
+    modelValue: CropRect | null;
+    src: string;
+    aspectRatio: number;
+    containerStyle: {
+        [key: string]: string;
+    };
+    shadeColor: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,290 @@
+import e from "../../../../vendor/@cropper/element-canvas/dist/element-canvas.esm.raw.js";
+import t from "../../../../vendor/@cropper/element-image/dist/element-image.esm.raw.js";
+import n from "../../../../vendor/@cropper/element-shade/dist/element-shade.esm.raw.js";
+import r from "../../../../vendor/@cropper/element-handle/dist/element-handle.esm.raw.js";
+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/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";
+// 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"
+}, fe = .8, pe = 200, _ = 100, v = "rgba(51, 153, 255, 0.75)", me = "rgba(255, 255, 255, 0.1)", he = "rgba(238, 238, 238, 0.5)", ge = "rgba(238, 238, 238, 0.75)", y = /*@__PURE__*/ m({
+	__name: "ACropper",
+	props: {
+		src: { default: "" },
+		modelValue: { default: null },
+		aspectRatio: { default: NaN },
+		containerStyle: { default: void 0 },
+		shadeColor: { default: "rgba(0, 0, 0, 0.5)" }
+	},
+	emits: [
+		"update:modelValue",
+		"commit",
+		"ready"
+	],
+	setup(m, { emit: y }) {
+		let b = m, x = y;
+		for (let s of [
+			e,
+			o,
+			a,
+			r,
+			t,
+			i,
+			n
+		]) s.$define();
+		let _e = [
+			"n-resize",
+			"e-resize",
+			"s-resize",
+			"w-resize",
+			"ne-resize",
+			"nw-resize",
+			"se-resize",
+			"sw-resize"
+		], S = se("hostEl"), C = oe(!0), w = null, T = {
+			width: 0,
+			height: 0
+		}, E = null, D = !1, O = !1, k = 0, A = {
+			width: 0,
+			height: 0
+		}, j = null, M = null, N = (e) => document.createElement(e), P = () => {
+			if (!w) return {
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0
+			};
+			let e = w.canvas.getBoundingClientRect(), t = w.image.getBoundingClientRect();
+			return {
+				x: t.left - e.left,
+				y: t.top - e.top,
+				width: t.width,
+				height: t.height
+			};
+		}, F = () => {
+			if (!w) return {
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0
+			};
+			let e = P(), t = w.canvas.getBoundingClientRect(), n = Math.max(e.x, 0), r = Math.max(e.y, 0), i = Math.min(e.x + e.width, t.width), a = Math.min(e.y + e.height, t.height);
+			return {
+				x: n,
+				y: r,
+				width: Math.max(0, i - n),
+				height: Math.max(0, a - r)
+			};
+		}, I = () => {
+			if (!w) return {
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0
+			};
+			let { x: e, y: t, width: n, height: r } = w.selection;
+			return {
+				x: e,
+				y: t,
+				width: n,
+				height: r
+			};
+		}, L = (e) => {
+			w && (D = !0, w.selection.$change(e.x, e.y, e.width, e.height, b.aspectRatio, !0), D = !1);
+		}, R = () => {
+			if (!w) return;
+			let { image: e } = w, { scalable: t, translatable: n } = e;
+			O = !0, e.scalable = !0, e.translatable = !0, e.$center("contain"), e.scalable = t, e.translatable = n, O = !1;
+		}, ve = () => {
+			if (!w) return;
+			let e = P();
+			if (e.width <= 0 || e.height <= 0) return;
+			let t = u(e, b.aspectRatio, fe);
+			L({
+				...t,
+				x: t.x + e.x,
+				y: t.y + e.y
+			});
+		}, z = () => {
+			let e = b.modelValue;
+			e && e.width > 0 && e.height > 0 ? X(e) : ve(), Z();
+		}, ye = () => {
+			if (!w || O) return;
+			let e = I();
+			if (e.width <= 0 || e.height <= 0) return;
+			let t = l(e, F(), b.aspectRatio);
+			f(e, t) || L(t);
+		}, B = (e) => {
+			if (D || !w) return;
+			let t = e.detail;
+			if (!t) return;
+			let n = w.canvas.$action, r = typeof n == "string" && n ? n : E, i = r ? s[r] : void 0, a = l(t, F(), b.aspectRatio, i);
+			f(t, a) || (e.preventDefault(), L(a));
+		}, V = (e) => {
+			E = e.detail?.action ?? null;
+		}, H = (e) => {
+			let t = e.detail?.action;
+			t && (E = t);
+		}, U = () => {
+			E = null, Z(!0);
+		}, be = (e) => {
+			e.stopPropagation();
+		}, W = () => queueMicrotask(ye), G = () => {
+			if (w) {
+				let { canvas: e, image: t, selection: n } = w;
+				n.removeEventListener("change", B), e.removeEventListener("actionstart", V), e.removeEventListener("action", H), e.removeEventListener("actionend", U), t.removeEventListener("transform", W);
+			}
+			S.value?.querySelectorAll(e.$name).forEach((e) => {
+				e.querySelectorAll(t.$name).forEach((e) => {
+					e.$image && (e.$image.src = "");
+				}), e.remove();
+			}), M?.disconnect(), M = null, w = null, T = {
+				width: 0,
+				height: 0
+			}, A = {
+				width: 0,
+				height: 0
+			}, E = null;
+		}, K = (e) => {
+			let t = [], n = e.parentElement;
+			for (; n && n !== document.body && n !== document.documentElement;) {
+				let { overflowY: e } = window.getComputedStyle(n);
+				(e === "hidden" || e === "clip") && t.push(n), n = n.parentElement;
+			}
+			return t;
+		}, q = (e) => {
+			let t = e.clientHeight, n = e.getBoundingClientRect().top;
+			return K(e).forEach((e) => {
+				let r = e.getBoundingClientRect(), i = r.bottom - Math.max(r.top, n);
+				i > 0 && (t = Math.min(t, i));
+			}), t;
+		}, J = (e, t, n) => {
+			let r = c(T, n, pe, _);
+			e.style.width = `${r.width}px`, e.style.height = `${r.height}px`;
+			let i = q(t);
+			return i > 0 && i < r.height && (r.height = Math.max(i, _), e.style.height = `${r.height}px`), r;
+		}, xe = (e) => {
+			let t = N(a.$name);
+			t.rows = 3, t.columns = 3, t.covered = !0, t.themeColor = he, t.setAttribute("role", "grid"), e.appendChild(t);
+			let n = N(o.$name);
+			n.centered = !0, n.themeColor = ge, e.appendChild(n);
+			let i = N(r.$name);
+			i.action = "move", i.themeColor = me, e.appendChild(i), _e.forEach((t) => {
+				let n = N(r.$name);
+				n.action = t, n.themeColor = v, e.appendChild(n);
+			});
+		}, Y = async () => {
+			let a = ++k;
+			G(), C.value = !0;
+			let o = S.value;
+			if (!o || !b.src) {
+				C.value = !1;
+				return;
+			}
+			let s = N(e.$name);
+			s.background = !1, s.themeColor = v, s.style.display = "block", J(s, o, o.clientWidth);
+			let c = N(t.$name);
+			c.alt = "", c.initialFit = "contain", c.rotatable = !1, c.skewable = !1, c.translatable = !1, c.scalable = !0, c.src = b.src;
+			let l = N(n.$name);
+			l.themeColor = b.shadeColor, l.hidden = !0;
+			let u = N(r.$name);
+			u.action = "select", u.plain = !0;
+			let d = N(i.$name);
+			d.themeColor = v, d.movable = !0, d.resizable = !0, d.outlined = !0, d.precise = !0, d.aspectRatio = b.aspectRatio, xe(d), s.addEventListener("actionstart", V), s.addEventListener("action", H), s.addEventListener("actionend", U), c.addEventListener("transform", W), d.addEventListener("change", B), s.append(c, l, u, d), o.appendChild(s), J(s, o, o.clientWidth);
+			let f;
+			try {
+				f = await c.$ready();
+			} catch {
+				s.remove(), a === k && (C.value = !1);
+				return;
+			}
+			a === k ? (w = {
+				canvas: s,
+				image: c,
+				selection: d
+			}, T = {
+				width: f.naturalWidth,
+				height: f.naturalHeight
+			}, J(s, o, o.clientWidth), l.themeColor = b.shadeColor, d.aspectRatio = b.aspectRatio, R(), A = Q(o), $(o), z(), C.value = !1, x("ready")) : s.remove();
+		}, Se = () => {
+			if (!w) return null;
+			let e = P();
+			if (e.width <= 0 || e.height <= 0) return null;
+			let t = I();
+			return {
+				x: (t.x - e.x) / e.width,
+				y: (t.y - e.y) / e.height,
+				width: t.width / e.width,
+				height: t.height / e.height
+			};
+		}, X = (e) => {
+			let t = P();
+			!w || t.width <= 0 || t.height <= 0 || L(l({
+				x: t.x + e.x * t.width,
+				y: t.y + e.y * t.height,
+				width: e.width * t.width,
+				height: e.height * t.height
+			}, F(), b.aspectRatio));
+		}, Ce = (e, t) => e !== null && t !== null && Math.abs(e.x - t.x) < 5e-4 && Math.abs(e.y - t.y) < 5e-4 && Math.abs(e.width - t.width) < 5e-4 && Math.abs(e.height - t.height) < 5e-4, Z = (e = !1) => {
+			let t = Se();
+			t && ((e || !Ce(t, j)) && (j = t, x("update:modelValue", t)), e && x("commit", t));
+		}, Q = (e) => ({
+			width: e.clientWidth,
+			height: q(e)
+		}), we = () => {
+			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());
+		}, Te = () => {
+			let e = S.value;
+			if (!e) return;
+			let t = Q(e);
+			t.width <= 0 || t.height <= 0 || (t.width !== A.width || t.height !== A.height) && w && requestAnimationFrame(() => we());
+		};
+		ce(S, Te);
+		let $ = (e) => {
+			M?.disconnect();
+			let t = K(e);
+			t.length === 0 ? M = null : (M = new ResizeObserver(Te), t.forEach((e) => M?.observe(e)));
+		};
+		return g(() => b.src, () => {
+			Y();
+		}), g(() => b.modelValue, (e) => {
+			w && e && !Ce(e, j) && (X(e), Z());
+		}, { deep: !0 }), g(() => b.shadeColor, (e) => {
+			let t = w?.canvas.querySelector(n.$name);
+			t && (t.themeColor = e);
+		}), g(() => b.aspectRatio, (e) => {
+			if (!w || (w.selection.aspectRatio = e, !d(e))) return;
+			let t = I();
+			L(l({
+				...t,
+				height: t.width / e
+			}, F(), e));
+		}), ae(() => {
+			Y();
+		}), ie(() => {
+			k += 1, G();
+		}), (e, t) => (h(), p("div", ue, [C.value ? (h(), p("div", de, [ne(le, {
+			class: "position-absolute",
+			indeterminate: ""
+		})])) : ee("", !0), te("div", {
+			ref_key: "hostEl",
+			ref: S,
+			class: "a-cropper__container",
+			style: re(m.containerStyle),
+			onWheelCapture: be
+		}, null, 36)]));
+	}
+});
+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

@@ -0,0 +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 '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":";;;;;;;;;;;;;;;;A,GA+EMgB,KAAiB,IACjBC,KAAsB,KACtBC,IAAuB,KAGvBC,IAAkB,4BAClBC,KAAa,4BACbC,KAAa,4BACbC,KAAkB,6B;;;;;;;;;;;;;;;EAtDxB,IAAMG,IAAQC,GAoBRC,IAAOH;EAUb,KAAK,IAAMI,KAAW;GACpBrB;GACAM;GACAD;GACAF;GACAF;GACAG;GACAF;EACF,GACE,EAAQ,QAAQ;EAgBlB,IAAMoB,KAAiB;GACrB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,GAQMC,IAASC,GAA+B,QAAQ,GAChDC,IAAUC,GAAI,EAAI,GAEpBC,IAA6B,MAC7BC,IAAgB;GAAE,OAAO;GAAG,QAAQ;EAAE,GAEtCC,IAA+B,MAE/BC,IAAW,IAEXC,IAAW,IAEXC,IAAa,GAEbC,IAAgB;GAAE,OAAO;GAAG,QAAQ;EAAE,GAEtCC,IAA+B,MAE/BC,IAA0C,MAExCC,KAAiC,MAAoB,SAAS,cAAcC,CAAI,GAGhFC,UAA0B;GAC9B,IAAI,CAACX,GAAO,OAAO;IAAE,GAAG;IAAG,GAAG;IAAG,OAAO;IAAG,QAAQ;GAAE;GACrD,IAAMY,IAAaZ,EAAM,OAAO,sBAAsB,GAChDa,IAAYb,EAAM,MAAM,sBAAsB;GACpD,OAAO;IACL,GAAGa,EAAU,OAAOD,EAAW;IAC/B,GAAGC,EAAU,MAAMD,EAAW;IAC9B,OAAOC,EAAU;IACjB,QAAQA,EAAU;GACpB;EACF,GAMMC,UAA+B;GACnC,IAAI,CAACd,GAAO,OAAO;IAAE,GAAG;IAAG,GAAG;IAAG,OAAO;IAAG,QAAQ;GAAE;GACrD,IAAMe,IAAQJ,EAAY,GACpBK,IAAShB,EAAM,OAAO,sBAAsB,GAC5CiB,IAAO,KAAK,IAAIF,EAAM,GAAG,CAAC,GAC1BG,IAAM,KAAK,IAAIH,EAAM,GAAG,CAAC,GACzBI,IAAQ,KAAK,IAAIJ,EAAM,IAAIA,EAAM,OAAOC,EAAO,KAAK,GACpDI,IAAS,KAAK,IAAIL,EAAM,IAAIA,EAAM,QAAQC,EAAO,MAAM;GAC7D,OAAO;IAAE,GAAGC;IAAM,GAAGC;IAAK,OAAO,KAAK,IAAI,GAAGC,IAAQF,CAAI;IAAG,QAAQ,KAAK,IAAI,GAAGG,IAASF,CAAG;GAAE;EAChG,GAEMG,UAA4B;GAChC,IAAI,CAACrB,GAAO,OAAO;IAAE,GAAG;IAAG,GAAG;IAAG,OAAO;IAAG,QAAQ;GAAE;GACrD,IAAM,EAAE,MAAG,MAAG,UAAO,cAAWA,EAAM;GACtC,OAAO;IAAE;IAAG;IAAG;IAAO;GAAO;EAC/B,GAEMsB,KAAa,MAAe;GAChC,AAAKtB,MACL,IAAW,IACXA,EAAM,UAAU,QAAQuB,EAAK,GAAGA,EAAK,GAAGA,EAAK,OAAOA,EAAK,QAAQhC,EAAM,aAAa,EAAI,GACxF,IAAW;EACb,GAOMiC,UAAoB;GACxB,IAAI,CAACxB,GAAO;GACZ,IAAM,EAAE,aAAUA,GACZ,EAAE,aAAU,oBAAiBe;GAOnC,AANA,IAAW,IACX,EAAM,WAAW,IACjB,EAAM,eAAe,IACrBA,EAAM,QAAQ,SAAS,GACvB,EAAM,WAAWU,GACjB,EAAM,eAAeC,GACrB,IAAW;EACb,GAOMC,WAAwB;GAC5B,IAAI,CAAC3B,GAAO;GACZ,IAAM4B,IAASjB,EAAY;GAC3B,IAAIiB,EAAO,SAAS,KAAKA,EAAO,UAAU,GAAG;GAC7C,IAAMC,IAAUC,EAAqBF,GAAQrC,EAAM,aAAaT,EAAc;GAC9E,EAAU;IAAE,GAAG+C;IAAS,GAAGA,EAAQ,IAAID,EAAO;IAAG,GAAGC,EAAQ,IAAID,EAAO;GAAE,CAAC;EAC5E,GAEMG,UAAyB;GAC7B,IAAMC,IAAQzC,EAAM;GAGpB,AAFIyC,KAASA,EAAM,QAAQ,KAAKA,EAAM,SAAS,IAAGC,EAAUD,CAAK,IAC5DL,GAAgB,GACrBO,EAAS;EACX,GAGMC,WAAc;GAClB,IAAI,CAACnC,KAASI,GAAU;GACxB,IAAMgC,IAAUf,EAAc;GAC9B,IAAIe,EAAQ,SAAS,KAAKA,EAAQ,UAAU,GAAG;GAC/C,IAAMC,IAASC,EAAgBF,GAAStB,EAAiB,GAAGvB,EAAM,WAAW;GAC7E,AAAKgD,EAAcH,GAASC,CAAM,KAAGf,EAAUe,CAAM;EACvD,GAEMG,KAAqB,MAAiB;GAC1C,IAAIrC,KAAY,CAACH,GAAO;GACxB,IAAMyC,IAAUC,EAA4B;GAC5C,IAAI,CAACD,GAAQ;GAIb,IAAME,IAAc3C,EAAM,OAA4C,SAChE4C,IAAS,OAAOD,KAAe,YAAYA,IAAaA,IAAazC,GACrE2C,IAASD,IAASE,EAAeF,KAAU,KAAA,GAC3CG,IAAUT,EAAgBG,GAAQ3B,EAAiB,GAAGvB,EAAM,aAAasD,CAAM;GACrF,AAAIN,EAAcE,GAAQM,CAAO,MAGjCL,EAAM,eAAe,GACrBpB,EAAUyB,CAAO;EACnB,GAEMC,KAAiB,MAAiB;GACtC,IAAiBN,EAA2C,QAAQ,UAAU;EAChF,GAEMO,KAAY,MAAiB;GACjC,IAAML,IAAUF,EAA2C,QAAQ;GAGnE,AAAIE,MAAQ,IAAgBA;EAC9B,GAEMM,UAAoB;GAExB,AADA,IAAgB,MAChBhB,EAAS,EAAI;EACf,GAOMiB,MAAkB,MAAsB;GAC5C,EAAM,gBAAgB;EACxB,GAMMC,UAAyB,eAAejB,EAAK,GAE7CkB,UAAiB;GACrB,IAAIrD,GAAO;IACT,IAAM,EAAE,WAAQ,UAAO,iBAAcA;IAKrC,AAJAsD,EAAU,oBAAoB,UAAUd,CAAiB,GACzDxB,EAAO,oBAAoB,eAAegC,CAAa,GACvDhC,EAAO,oBAAoB,UAAUiC,CAAQ,GAC7CjC,EAAO,oBAAoB,aAAakC,CAAW,GACnDnC,EAAM,oBAAoB,aAAaqC,CAAgB;GACzD;GAgBA,AAbAxD,EAAO,OAAO,iBAAiBvB,EAAc,KAAK,CAAC,CAAC,SAAS,MAAW;IAMtE,AAHA2C,EAAO,iBAA+B1C,EAAa,KAAK,CAAC,CAAC,SAAS,MAAU;KAC3E,AAAIyC,EAAM,WAAQ,EAAM,OAAO,MAAM;IACvC,CAAC,GACDC,EAAO,OAAO;GAChB,CAAC,GACDR,GAAkB,WAAW,GAC7B,IAAmB,MACnB,IAAQ,MACR,IAAU;IAAE,OAAO;IAAG,QAAQ;GAAE,GAChC,IAAU;IAAE,OAAO;IAAG,QAAQ;GAAE,GAChC,IAAgB;EAClB,GAQM+C,KAAuB,MAAqC;GAChE,IAAMC,IAAuB,CAAC,GAC1BC,IAAWC,EAAK;GACpB,OAAOD,KAAYA,MAAa,SAAS,QAAQA,MAAa,SAAS,kBAAiB;IACtF,IAAM,EAAE,iBAAc,OAAO,iBAAiBA,CAAQ;IAEtD,CADIE,MAAc,YAAYA,MAAc,WAAQH,EAAM,KAAKC,CAAQ,GACvE,IAAWA,EAAS;GACtB;GACA,OAAOD;EACT,GAEMI,KAAmB,MAA8B;GACrD,IAAIC,IAAYH,EAAK,cACfI,IAAUJ,EAAK,sBAAsB,CAAC,CAAC;GAW7C,OATAH,EAAoBG,CAAI,CAAC,CAAC,SAAS,MAAa;IAC9C,IAAMnC,IAAOkC,EAAS,sBAAsB,GAItCM,IAAOxC,EAAK,SAAS,KAAK,IAAIA,EAAK,KAAKuC,CAAO;IACrD,AAAIC,IAAO,MAAG,IAAY,KAAK,IAAIF,GAAWE,CAAI;GACpD,CAAC,GAEMF;EACT,GASMG,KAAc,GAAuB,GAAmB,MAAiC;GAC7F,IAAMC,IAAOC,EAAcjE,GAASkE,GAAgBpF,IAAqBC,CAAoB;GAE7F,AADA,EAAO,MAAM,QAAQ,GAAGiF,EAAK,MAAM,KACnC,EAAO,MAAM,SAAS,GAAGA,EAAK,OAAO;GAErC,IAAMG,IAAgBR,EAAgBF,CAAI;GAK1C,OAJIU,IAAgB,KAAKA,IAAgBH,EAAK,WAC5C,EAAK,SAAS,KAAK,IAAIG,GAAepF,CAAoB,GAC1D,EAAO,MAAM,SAAS,GAAGiF,EAAK,OAAO,MAEhCA;EACT,GAEMI,MAA0B,MAAgC;GAC9D,IAAMC,IAAO7D,EAAoB/B,EAAY,KAAK;GAMlD,AALA,EAAK,OAAO,GACZ,EAAK,UAAU,GACf,EAAK,UAAU,IACf,EAAK,aAAaS,IAClBmF,EAAK,aAAa,QAAQ,MAAM,GAChChB,EAAU,YAAYgB,CAAI;GAE1B,IAAMC,IAAY9D,EAAyB9B,EAAiB,KAAK;GAGjE,AAFA,EAAU,WAAW,IACrB,EAAU,aAAaS,IACvBkE,EAAU,YAAYiB,CAAS;GAE/B,IAAMC,IAAO/D,EAAsBjC,EAAc,KAAK;GAKtD,AAJA,EAAK,SAAS,QACd,EAAK,aAAaU,IAClBoE,EAAU,YAAYkB,CAAI,GAE1B7E,GAAe,SAAS,MAAW;IACjC,IAAM8E,IAAShE,EAAsBjC,EAAc,KAAK;IAGxD,AAFA,EAAO,SAASoE,GAChB,EAAO,aAAa3D,GACpBqE,EAAU,YAAYmB,CAAM;GAC9B,CAAC;EACH,GAEMC,IAAQ,YAAY;GACxB,IAAMC,IAAQ,EAAEtE;GAEhB,AADAgD,EAAS,GACT,EAAQ,QAAQ;GAEhB,IAAMK,IAAO9D,EAAO;GACpB,IAAI,CAAC8D,KAAQ,CAACnE,EAAM,KAAK;IAEvB,EAAQ,QAAQ;IAChB;GACF;GAEA,IAAMyB,IAASP,EAAsBpC,EAAc,KAAK;GAIxD,AAHA,EAAO,aAAa,IACpB,EAAO,aAAaY,GACpB,EAAO,MAAM,UAAU,SACvB+E,EAAWhD,GAAQ0C,GAAMA,EAAK,WAAW;GAEzC,IAAM3C,IAAQN,EAAqBnC,EAAa,KAAK;GAOrD,AANA,EAAM,MAAM,IACZ,EAAM,aAAa,WACnB,EAAM,YAAY,IAClB,EAAM,WAAW,IACjB,EAAM,eAAe,IACrB,EAAM,WAAW,IACjB,EAAM,MAAMiB,EAAM;GAElB,IAAMqF,IAAQnE,EAAqBlC,EAAa,KAAK;GAGrD,AAFA,EAAM,aAAagB,EAAM,YAEzB,EAAM,SAAS;GAEf,IAAMsF,IAAepE,EAAsBjC,EAAc,KAAK;GAE9D,AADA,EAAa,SAAS,UACtB,EAAa,QAAQ;GAErB,IAAM8E,IAAY7C,EAAyBhC,EAAiB,KAAK;GAwBjE,AAvBA,EAAU,aAAaQ,GACvB,EAAU,UAAU,IACpB,EAAU,YAAY,IACtB,EAAU,WAAW,IAErB,EAAU,UAAU,IACpB,EAAU,cAAcM,EAAM,aAC9B8E,GAAuBf,CAAS,GAIhCtC,EAAO,iBAAiB,eAAegC,CAAa,GACpDhC,EAAO,iBAAiB,UAAUiC,CAAQ,GAC1CjC,EAAO,iBAAiB,aAAakC,CAAW,GAChDnC,EAAM,iBAAiB,aAAaqC,CAAgB,GACpDE,EAAU,iBAAiB,UAAUd,CAAiB,GAEtDxB,EAAO,OAAOD,GAAO6D,GAAOC,GAAcvB,CAAS,GAInDI,EAAK,YAAY1C,CAAM,GAEvBgD,EAAWhD,GAAQ0C,GAAMA,EAAK,WAAW;GAEzC,IAAIoB;GACJ,IAAI;IAEF,IAAS,MAAM/D,EAAM,OAAO;GAC9B,QAAQ;IAGN,AADAC,EAAO,OAAO,GACV2D,MAAUtE,MAAY,EAAQ,QAAQ;IAC1C;GACF;GACA,AAAIsE,MAAUtE,KAKd,IAAQ;IAAE;IAAQ;IAAO;GAAU,GAEnC,IAAU;IAAE,OAAOyE,EAAO;IAAc,QAAQA,EAAO;GAAc,GACrEd,EAAWhD,GAAQ0C,GAAMA,EAAK,WAAW,GAIzC,EAAM,aAAanE,EAAM,YACzB,EAAU,cAAcA,EAAM,aAE9BiC,EAAY,GAEZ,IAAUuD,EAAQrB,CAAI,GACtBsB,EAAiBtB,CAAI,GACrB3B,EAAiB,GAEjB,EAAQ,QAAQ,IAChBtC,EAAK,OAAO,KArBVuB,EAAO,OAAO;EAsBlB,GAEMiE,WAAqC;GACzC,IAAI,CAACjF,GAAO,OAAO;GACnB,IAAM4B,IAASjB,EAAY;GAC3B,IAAIiB,EAAO,SAAS,KAAKA,EAAO,UAAU,GAAG,OAAO;GACpD,IAAML,IAAOF,EAAc;GAC3B,OAAO;IACL,IAAIE,EAAK,IAAIK,EAAO,KAAKA,EAAO;IAChC,IAAIL,EAAK,IAAIK,EAAO,KAAKA,EAAO;IAChC,OAAOL,EAAK,QAAQK,EAAO;IAC3B,QAAQL,EAAK,SAASK,EAAO;GAC/B;EACF,GAGMK,KAAa,MAAmB;GACpC,IAAML,IAASjB,EAAY;GAC3B,AAAI,CAACX,KAAS4B,EAAO,SAAS,KAAKA,EAAO,UAAU,KACpDN,EACEgB,EACE;IACE,GAAGV,EAAO,IAAIsD,EAAK,IAAItD,EAAO;IAC9B,GAAGA,EAAO,IAAIsD,EAAK,IAAItD,EAAO;IAC9B,OAAOsD,EAAK,QAAQtD,EAAO;IAC3B,QAAQsD,EAAK,SAAStD,EAAO;GAC/B,GACAd,EAAiB,GACjBvB,EAAM,WACR,CACF;EACF,GAEM4F,MAAiB,GAAoB,MACzCC,MAAM,QACNC,MAAM,QACN,KAAK,IAAID,EAAE,IAAIC,EAAE,CAAC,IAAI,QACtB,KAAK,IAAID,EAAE,IAAIC,EAAE,CAAC,IAAI,QACtB,KAAK,IAAID,EAAE,QAAQC,EAAE,KAAK,IAAI,QAC9B,KAAK,IAAID,EAAE,SAASC,EAAE,MAAM,IAAI,MAM5BnD,KAAY,IAAa,OAAU;GACvC,IAAMgD,IAAOD,GAAY;GACzB,AAAKC,OACDI,KAAc,CAACH,GAAcD,GAAM3E,CAAW,OAChD,IAAc2E,GACdzF,EAAK,qBAAqByF,CAAI,IAE5BI,KAAY7F,EAAK,UAAUyF,CAAI;EACrC,GAGMH,KAAW,OAA6B;GAAE,OAAOrB,EAAK;GAAa,QAAQE,EAAgBF,CAAI;EAAE,IAGjG6B,WAAiB;GACrB,IAAM7B,IAAO9D,EAAO;GACpB,IAAI,CAACI,KAAS,CAAC0D,GAAM;GAGrB,IAAM8B,IAASP,GAAY,KAAK1F,EAAM,YAEhC0E,IAAOD,EAAWhE,EAAM,QAAQ0D,GAAMA,EAAK,WAAW;GAM5D,AALA,IAAUqB,EAAQrB,CAAI,GAGtBsB,EAAiBtB,CAAI,GACrBlC,EAAY,GACRyC,EAAK,SAAS,KAAKA,EAAK,UAAU,MAElCuB,KAAUA,EAAO,QAAQ,IAAGvD,EAAUuD,CAAM,IAC3CzD,EAAiB,GACtBG,EAAS;EACX,GAEMuD,WAAyB;GAC7B,IAAM/B,IAAO9D,EAAO;GACpB,IAAI,CAAC8D,GAAM;GACX,IAAMgC,IAAMX,EAAQrB,CAAI;GACxB,AAAIgC,EAAI,SAAS,KAAKA,EAAI,UAAU,MAGhCA,EAAI,UAAUpF,EAAQ,SAASoF,EAAI,WAAWpF,EAAQ,WACrDN,KAGL,4BAA4BuF,GAAS,CAAC;EACxC;EAIA,GAAkB3F,GAAQ6F,EAAgB;EAG1C,IAAMT,KAAoB,MAAsB;GAC9C,GAAkB,WAAW;GAC7B,IAAMW,IAAYpC,EAAoBG,CAAI;GAC1C,AAAIiC,EAAU,WAAW,IACvB,IAAmB,QAGrB,IAAmB,IAAI,eAAeF,EAAgB,GACtDE,EAAU,SAAS,MAAanF,GAAkB,QAAQiD,CAAQ,CAAC;EACrE;E,OAEAmC,QACQrG,EAAM,WACN;GACJ,EAAM;EACR,CACF,GAEAqG,QACQrG,EAAM,aACX,MAAU;GAET,AAAKS,KAAUgC,KAAS,IAAcA,GAAOzB,CAAW,MACxD0B,EAAUD,CAAK,GACfE,EAAS;EACX,GACA,EAAE,MAAM,GAAK,CACf,GAEA0D,QACQrG,EAAM,aACX,MAAe;GACd,IAAMqF,IAAQ5E,GAAO,OAAO,cAA4BzB,EAAa,KAAK;GAC1E,AAAIqG,MAAO,EAAM,aAAaiB;EAChC,CACF,GAEAD,QACQrG,EAAM,cACX,MAAgB;GAGf,IAFI,CAACS,MACL,EAAM,UAAU,cAAc8F,GAC1B,CAACC,EAAoBD,CAAW,IAAG;GACvC,IAAM1D,IAAUf,EAAc;GAC9B,EAAUiB,EAAgB;IAAE,GAAGF;IAAS,QAAQA,EAAQ,QAAQ0D;GAAY,GAAGhF,EAAiB,GAAGgF,CAAW,CAAC;EACjH,CACF,GAEAE,SAAgB;GACd,EAAM;EACR,CAAC,GAEDC,SAAsB;GAEpB,AADA,KAAc,GACd5C,EAAS;EACX,CAAC,I,UAICvF,EAAA,GAAAC,EAiBM,OAjBNa,IAiBM,CAfIkB,EAAA,SADRhC,EAAA,GAAAC,EAQM,OARNc,IAQM,CAJJb,GAGEC,IAAA;GAFA,OAAM;GACN,eAAA;E,oBAIJE,GAKE,OAAA;GAJI,SAAA;GAAJ,KAAIyB;GACJ,OAAM;GACL,OAAKxB,GAAEoB,EAAA,cAAc;GACN"}

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

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

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

@@ -0,0 +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// 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.d.ts

@@ -0,0 +1,12 @@
+import { IntegerId } from '../../../../shared/types/common';
+type __VLS_Props = {
+    extSystem: IntegerId;
+    configName?: string;
+    readonly?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    readonly: boolean;
+    configName: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;