@edifice.io/react 2.5.15-develop-enabling.20260326100838 → 2.5.15-develop-pedago.20260327124327

package/dist/modules/modals/ShareModal/hooks/useShareMutation.d.ts

@@ -1,5 +1,5 @@
 import { PutShareResponse, ShareRight } from '@edifice.io/client';
-import { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { UseMutationOptions, UseMutationResult } from '../../../../../node_modules/@tanstack/react-query';
 declare const useShareMutation: ({ application, options, }: {
     application: string;
     options?: UseMutationOptions<PutShareResponse, Error, {

package/dist/modules/multimedia/FileCard/FileCard._.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { default as FileCard } from './FileCard';
+declare const meta: Meta<typeof FileCard>;
+export default meta;
+type Story = StoryObj<typeof FileCard>;
+export declare const Base: Story;
+export declare const AudioFile: Story;
+export declare const ImageFile: Story;
+export declare const VideoFile: Story;
+export declare const TextFile: Story;
+export declare const DocFile: Story;
+export declare const PptFile: Story;
+export declare const PdfFile: Story;
+export declare const ZipFile: Story;
+export declare const CsvFile: Story;
+export declare const XlsFile: Story;
+export declare const MdFile: Story;

package/dist/modules/multimedia/ImageEditor/components/ImageEditor.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useCallback } from "react";
-import * as PIXI from "pixi.js";
+import { useState } from "react";
+import { Stage } from "@pixi/react";
 import { useTranslation } from "react-i18next";
 import useImageEditor from "../hooks/useImageEditor.js";
 import ImageEditorToolbar from "./ImageEditorToolbar.js";
@@ -21,11 +21,7 @@ const ImageEditor = ({
 }) => {
   const {
     t
-  } = useTranslation(), [currentOperation, setCurrentOperation] = useState(void 0), [isSaving, setSaving] = useState(!1), [altText, setAltText] = useState(altTextParam ?? ""), [legend, setLegend] = useState(legendParam ?? ""), [dirty, setDirty] = useState(!1);
-  useEffect(() => {
-    setAltText(altTextParam ?? ""), setLegend(legendParam ?? ""), setDirty(!1);
-  }, [altTextParam, legendParam]);
-  const {
+  } = useTranslation(), [currentOperation, setCurrentOperation] = useState(void 0), [isSaving, setSaving] = useState(!1), [altText, setAltText] = useState(altTextParam ?? ""), [legend, setLegend] = useState(legendParam ?? ""), [dirty, setDirty] = useState(!1), {
     toBlob,
     setApplication,
     startBlur,
@@ -40,21 +36,7 @@ const ImageEditor = ({
     loading
   } = useImageEditor({
     imageSrc
-  }), appRef = useRef(null), containerRef = useCallback((node) => {
-    if (node && !appRef.current) {
-      const app = new PIXI.Application();
-      appRef.current = app, app.init({
-        backgroundAlpha: 0,
-        resolution: 1,
-        preserveDrawingBuffer: !0
-      }).then(() => {
-        appRef.current === app && (node.appendChild(app.canvas), setApplication(app));
-      }).catch(() => {
-        appRef.current === app && (appRef.current = null);
-      });
-    }
-    !node && appRef.current && (appRef.current.destroy(!0), appRef.current = null);
-  }, [setApplication]), stopAll = () => {
+  }), stopAll = () => {
     stopBlur(), stopCrop(currentOperation === "CROP"), stopResize(currentOperation === "RESIZE");
   }, handleSave = async () => {
     try {
@@ -101,8 +83,12 @@ const ImageEditor = ({
     /* @__PURE__ */ jsx(Modal.Body, { className: "d-flex flex-column align-items-center", children: /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column gap-12 w-100 flex-grow-1", children: [
       /* @__PURE__ */ jsx(ImageEditorToolbar, { handle: handleOperation, historyCount }),
       /* @__PURE__ */ jsxs("div", { className: "position-relative d-flex flex-column align-items-center justify-content-center flex-grow-1 w-100 image-editor", children: [
-        /* @__PURE__ */ jsx("div", { ref: containerRef, className: "d-flex justify-content-center w-100" }),
-        loading && /* @__PURE__ */ jsx("div", { className: "position-absolute top-0 start-0 bottom-0 end-0 m-10 d-flex align-items-center justify-content-center bg-black opacity-25", children: /* @__PURE__ */ jsx(LoadingScreen, {}) })
+        /* @__PURE__ */ jsx(Stage, { onMount: (app) => setApplication(app), options: {
+          preserveDrawingBuffer: !0,
+          backgroundAlpha: 0,
+          resolution: 1
+        } }),
+        !!loading && /* @__PURE__ */ jsx("div", { className: "position-absolute top-0 start-0 bottom-0 end-0 m-10 d-flex align-items-center justify-content-center bg-black opacity-25", children: /* @__PURE__ */ jsx(LoadingScreen, {}) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-md-row m-10 gap-12 w-100", children: [
         /* @__PURE__ */ jsxs(FormControl, { id: "alt", className: "flex-grow-1", children: [

package/dist/modules/multimedia/ImageEditor/effects/blur.d.ts

@@ -1,20 +1,18 @@
 import * as PIXI from 'pixi.js';
 /**
- * This function starts the blur controller:
+ * This function start the blur controler
  * - drawing cursor
  * - listening mouse move to move cursor
- * - listening pointer events to apply blur
+ * - listening
  *
- * @param application The PIXI.Application context
- * @param spriteName The name of the sprite identifying the original image
+ * @param application
+ * @param param1
  */
 export declare function start(application: PIXI.Application, { spriteName }: {
     spriteName: string;
 }): void;
 /**
- * This function removes cursor and all mouse event listeners.
- * The blur layer is kept on stage so it gets captured by toBlob/generateTexture
- * when the image is saved or another operation is applied.
+ * This function remove cursor and all mouse event listeners
  *
  * @param application the PIXI.Application context
  */

package/dist/modules/multimedia/ImageEditor/effects/blur.js

@@ -1,53 +1,45 @@
 import * as PIXI from "pixi.js";
 import { aggregate } from "../utilities/aggregate.js";
-import { BLUR_LAYER_NAME } from "./constants.js";
 import { getApplicationScale } from "./misc.js";
 const BRUSH_SIZE = 20, DEBOUNCE = 50, CURSOR_NAME = "BRUSH_CURSOR";
-function getOrCreateBlurLayer(application) {
-  let layer = application.stage.getChildByLabel(BLUR_LAYER_NAME);
-  return layer || (layer = new PIXI.Container(), layer.label = BLUR_LAYER_NAME, application.stage.addChild(layer)), layer;
-}
 function drawBrush(points, scale) {
   const container = new PIXI.Graphics();
   for (const point of points)
-    point && (container.circle(point.x, point.y, BRUSH_SIZE / scale), container.fill({
-      color: 16777215,
-      alpha: 1
-    }));
+    point && (container.beginFill(16777215, 1), container.drawCircle(point.x, point.y, BRUSH_SIZE / scale), container.lineStyle(0), container.endFill());
   return container;
 }
 function drawBlurListener(application, {
   spriteName
 }) {
   return aggregate(DEBOUNCE, (event) => application.stage.toLocal(event.global), (points) => {
-    const child = application.stage.getChildByLabel(spriteName), scale = getApplicationScale(application);
-    if (!child) return;
-    const sprite = child, newSprite = new PIXI.Sprite(sprite.texture);
-    newSprite.filters = [new PIXI.BlurFilter({
-      strength: 8,
-      quality: Math.min(Math.round(4 * scale), 4),
-      resolution: Math.min(scale, 1)
-    })], newSprite.width = sprite.width, newSprite.height = sprite.height, newSprite.scale = new PIXI.Point(1, 1), newSprite.anchor = sprite.anchor;
-    const blurLayer = getOrCreateBlurLayer(application), brushMask = drawBrush(points, scale);
-    blurLayer.addChild(brushMask), newSprite.mask = brushMask, blurLayer.addChild(newSprite);
+    const child = application.stage.getChildByName(spriteName), scale = getApplicationScale(application);
+    if (child == null) return;
+    const newSprite = new PIXI.Sprite(child.texture);
+    newSprite.filters = [
+      new PIXI.BlurFilter(
+        8,
+        // PIXI Default value for strength of the blur effect
+        4,
+        // Quality of the blur effect depending on the scale (4 is the PIXI default value)
+        Math.min(scale, 1)
+      )
+      // Resolution of the blur effect depending on the scale
+    ], newSprite.width = child.width, newSprite.height = child.height, newSprite.scale = new PIXI.Point(1, 1), newSprite.anchor = child.anchor, newSprite.mask = drawBrush(points, scale), child.addChild(newSprite);
   });
 }
 function drawCursor(application) {
   removeCursor(application);
   const scale = getApplicationScale(application), circle = new PIXI.Graphics();
-  return circle.circle(0, 0, BRUSH_SIZE / scale), circle.stroke({
-    width: Math.max(1, 1 / scale),
-    color: 16711680
-  }), circle.label = CURSOR_NAME, application.stage.addChild(circle), circle;
+  return circle.lineStyle(Math.max(1, 1 / scale), 16711680), circle.drawCircle(0, 0, BRUSH_SIZE / scale), circle.endFill(), circle.name = CURSOR_NAME, application.stage.addChild(circle), circle;
 }
 function removeCursor(application) {
-  const child = application.stage.getChildByLabel(CURSOR_NAME);
+  const child = application.stage.getChildByName(CURSOR_NAME);
   child && child.removeFromParent();
 }
 function moveCursorListener(application) {
   return (event) => {
     if (!application) return;
-    const point = application.stage.toLocal(event.global), child = application.stage.getChildByLabel(CURSOR_NAME, !0);
+    const point = application.stage.toLocal(event.global), child = application.stage.getChildByName(CURSOR_NAME, !0);
     child && (child.position.x = point.x, child.position.y = point.y);
   };
 }
@@ -61,7 +53,7 @@ function start(application, {
     spriteName
   });
   application.stage.on("pointerdown", () => {
-    application.stage.off("pointermove", blurListener), application.stage.on("pointermove", blurListener);
+    application.stage.on("pointermove", blurListener);
   });
   const stopListening = () => {
     var _a;

package/dist/modules/multimedia/ImageEditor/effects/crop.d.ts

@@ -7,7 +7,7 @@ export type CornerType = 'TOP_LEFT' | 'TOP_RIGHT' | 'BOTTOM_LEFT' | 'BOTTOM_RIGH
  * - A mask applied to the original image
  *
  * @param application The PIXI.Application context
- * @param spriteName The sprite name identifying the original image
+ * @param {spriteName:string} {spriteName} The sprite name identifying the original image
  */
 export declare function start(application: PIXI.Application, { spriteName }: {
     spriteName: string;
@@ -19,9 +19,10 @@ export declare function start(application: PIXI.Application, { spriteName }: {
  */
 export declare function stop(application: PIXI.Application): void;
 /**
- * This function applies a crop and returns the result as a PIXI.Sprite object
+ * This function apply a crop to the imageSrc and return the result as a PIXI.Sprite object
  *
- * @param application The PIXI.Application context
- * @returns a PIXI.Sprite with the cropped image or undefined if no crop area was defined
+ * @param application
+ * @param imageSrc a string URI of the image to crop
+ * @returns a PIXI.Sprite with a imageSrc cropped or undefined if the image has not been cropped
  */
 export declare function save(application: PIXI.Application): PIXI.Sprite | undefined;

package/dist/modules/multimedia/ImageEditor/effects/crop.js

@@ -8,25 +8,17 @@ function drawBackground(application, {
   spriteName
 }) {
   removeBackground(application);
-  const sprite = application.stage.getChildByLabel(spriteName);
-  if (!sprite) return;
-  const spriteBounds = sprite.getBounds(), stageTexture = application.renderer.generateTexture(application.stage), clonedStage = new PIXI.Sprite(stageTexture);
+  const sprite = application.stage.getChildByName(spriteName);
+  if (sprite == null) return;
+  const spriteBounds = sprite.getBounds(), stageTexture = application.renderer.generateTexture(application.stage).clone(), clonedStage = new PIXI.Sprite(stageTexture);
   clonedStage.height = spriteBounds.height, clonedStage.width = spriteBounds.width, clonedStage.position = new PIXI.Point(0, 0);
-  const background = new PIXI.Container();
-  background.label = CROP_BACKGROUND_NAME, background.position = new PIXI.Point(spriteBounds.x, spriteBounds.y);
-  const backdrop = new PIXI.Graphics();
-  backdrop.rect(0, 0, spriteBounds.width, spriteBounds.height), backdrop.fill({
-    color: 16777215,
-    alpha: 0.5
-  });
+  const background = new PIXI.Graphics();
+  background.beginFill(16777215, 0.5), background.drawRect(0, 0, spriteBounds.width, spriteBounds.height), background.endFill(), background.name = CROP_BACKGROUND_NAME, background.position = new PIXI.Point(spriteBounds.x, spriteBounds.y);
   const rectMask = new PIXI.Graphics();
-  rectMask.rect(0, 0, spriteBounds.width - 2 * PADDING, spriteBounds.height - 2 * PADDING), rectMask.fill({
-    color: 0,
-    alpha: 1
-  }), rectMask.position = new PIXI.Point(PADDING, PADDING), rectMask.label = CROP_MASK_NAME, clonedStage.mask = rectMask, application.stage.addChild(background), background.addChild(backdrop), background.addChild(rectMask), background.addChild(clonedStage);
+  rectMask.beginFill(0, 1), rectMask.drawRect(0, 0, spriteBounds.width - 2 * PADDING, spriteBounds.height - 2 * PADDING), rectMask.endFill(), rectMask.position = new PIXI.Point(PADDING, PADDING), rectMask.name = CROP_MASK_NAME, clonedStage.mask = rectMask, application.stage.addChild(background), background.addChild(rectMask), background.addChild(clonedStage);
 }
 function removeBackground(application) {
-  const child = application.stage.getChildByLabel(CROP_BACKGROUND_NAME, !0);
+  const child = application.stage.getChildByName(CROP_BACKGROUND_NAME, !0);
   child == null || child.removeFromParent();
 }
 function computeCornerPosition(cornerType, bounds) {
@@ -62,10 +54,10 @@ function computeCornerPosition(cornerType, bounds) {
   }
 }
 function refreshCorners(application) {
-  const mask = application.stage.getChildByLabel(CROP_MASK_NAME, !0);
-  mask && CORNERS.forEach((cornerType) => {
-    const corner = application.stage.getChildByLabel(getCornerName(cornerType), !0);
-    if (!corner) return;
+  const mask = application.stage.getChildByName(CROP_MASK_NAME, !0);
+  mask != null && CORNERS.forEach((cornerType) => {
+    const corner = application.stage.getChildByName(getCornerName(cornerType), !0);
+    if (corner == null) return;
     const position = computeCornerPosition(cornerType, {
       height: mask.height,
       width: mask.width,
@@ -78,10 +70,10 @@ function refreshCorners(application) {
 function drawCorner(application, cornerType, {
   spriteName
 }) {
-  const previous = application.stage.getChildByLabel(getCornerName(cornerType), !0), scale = getApplicationScale(application);
+  const previous = application.stage.getChildByName(getCornerName(cornerType), !0), scale = getApplicationScale(application);
   previous == null || previous.removeFromParent();
-  const background = application.stage.getChildByLabel(CROP_BACKGROUND_NAME, !0), mask = application.stage.getChildByLabel(CROP_MASK_NAME, !0);
-  if (!application.stage.getChildByLabel(spriteName) || !background || !mask)
+  const background = application.stage.getChildByName(CROP_BACKGROUND_NAME, !0), mask = application.stage.getChildByName(CROP_MASK_NAME, !0), sprite = application.stage.getChildByName(spriteName);
+  if (sprite == null || background === null || background === void 0 || mask === void 0 || mask === null)
     return;
   const position = computeCornerPosition(cornerType, {
     height: mask.height,
@@ -89,17 +81,13 @@ function drawCorner(application, cornerType, {
     x: mask.x,
     y: mask.y
   }), corner = new PIXI.Graphics();
-  corner.arc(0, 0, POINT_RADIUS / scale, position.start, position.end), corner.lineTo(0, 0), corner.fill({
-    color: 4960213,
-    alpha: 1
-  }), corner.position = new PIXI.Point(position.x, position.y), corner.label = getCornerName(cornerType), corner.interactive = !0;
+  corner.beginFill(4960213, 1), corner.arc(0, 0, POINT_RADIUS / scale, position.start, position.end), corner.lineTo(0, 0), corner.endFill(), corner.position = new PIXI.Point(position.x, position.y), corner.name = getCornerName(cornerType), corner.interactive = !0;
   let enable = !1;
-  const handlePointerMove = (event) => {
-    if (!enable) return;
+  application.stage.on("pointermove", (event) => {
+    if (enable === !1) return;
     const localPosition = background.toLocal(event.global);
     corner.position.x = localPosition.x, corner.position.y = localPosition.y, moveMask(application, cornerType, localPosition);
-  };
-  application.stage.on("pointermove", handlePointerMove);
+  });
   const handlePointerDown = () => {
     enable = !0;
   };
@@ -108,12 +96,12 @@ function drawCorner(application, cornerType, {
     enable = !1;
   };
   globalThis.addEventListener("pointerup", handlePointerUp), corner.once("destroyed", () => {
-    corner.off("pointerdown"), application.stage.off("pointermove", handlePointerMove), globalThis.removeEventListener("pointerup", handlePointerUp);
+    corner.off("pointerdown"), globalThis.removeEventListener("pointerup", handlePointerUp);
   }), background.addChild(corner);
 }
 function moveMask(application, cornerType, position) {
-  const mask = application.stage.getChildByLabel(CROP_MASK_NAME, !0);
-  if (!mask) return;
+  const mask = application.stage.getChildByName(CROP_MASK_NAME, !0);
+  if (mask == null) return;
   const right = mask.position.x + mask.width, bottom = mask.position.y + mask.height;
   switch (cornerType) {
     case "TOP_LEFT": {
@@ -154,15 +142,11 @@ function stop(application) {
   removeBackground(application), application.stage.off("pointermove"), application.render();
 }
 function save(application) {
-  const mask = application.stage.getChildByLabel(CROP_MASK_NAME, !0);
-  if (!mask) return;
-  const background = application.stage.getChildByLabel(CROP_BACKGROUND_NAME, !0), offsetX = (background == null ? void 0 : background.x) ?? 0, offsetY = (background == null ? void 0 : background.y) ?? 0, frame = new PIXI.Rectangle(Math.floor(offsetX + mask.x), Math.floor(offsetY + mask.y), Math.floor(mask.width), Math.floor(mask.height));
-  background && (background.visible = !1);
-  const croppedTexture = application.renderer.generateTexture({
-    target: application.stage,
-    frame
-  });
-  return removeBackground(application), application.stage.off("pointermove"), new PIXI.Sprite(croppedTexture);
+  const mask = application.stage.getChildByName(CROP_MASK_NAME, !0);
+  if (mask == null) return;
+  stop(application);
+  const stageTexture = application.renderer.generateTexture(application.stage).clone(), clonedStage = new PIXI.Sprite(stageTexture), maskBounds = mask.getBounds(), bounds = new PIXI.Rectangle(Math.floor(maskBounds.x), Math.floor(maskBounds.y), Math.floor(maskBounds.width), Math.floor(maskBounds.height)), cropped = new PIXI.Texture(clonedStage.texture.baseTexture, bounds);
+  return new PIXI.Sprite(cropped);
 }
 export {
   save,

package/dist/modules/multimedia/ImageEditor/effects/misc.d.ts

@@ -1,8 +1,11 @@
 import * as PIXI from 'pixi.js';
 export declare const DEFAULT_SPRITE_NAME = "image";
 /**
- * A structure that defines all settings of an image:
- * position, scale, size, and size of the stage
+ * A structure that define all setting of an image
+ * - positon
+ * - scale
+ * - size
+ * - size of the stage
  */
 export interface ImageSettings {
     stage: {
@@ -36,12 +39,13 @@ export interface ImageSettings {
     };
 }
 /**
- * Update the image content using a Blob datasource
+ *  This function update the image content using Blob datasource
  *
  * @param application the PIXI.Application context
  * @param param.spriteName the name of the sprite in the context
- * @param param.imgDatasource the Blob data to load as image
- * @param param.settings optional image settings to restore position/scale/rotation
+ * @param param.imgDatasource the img data could be one of: string url, HTMLImageElement, PIXI.Sprite
+ * @param param.stageSize?: { width: number; height: number };
+ * @param param.spriteSize?: { width: number; height: number };
  */
 export declare function updateImageFromBlob(application: PIXI.Application, { spriteName, imgDatasource, settings, }: {
     spriteName: string;
@@ -49,12 +53,13 @@ export declare function updateImageFromBlob(application: PIXI.Application, { spr
     settings?: ImageSettings;
 }): Promise<PIXI.Sprite | null>;
 /**
- * Update the image content for the sprite in the PIXI.Application context
+ *  This function update the image content for the sprite in the PIXI.Application context
  *
  * @param application the PIXI.Application context
  * @param param.spriteName the name of the sprite in the context
- * @param param.imgDatasource the image source: a URL string, HTMLImageElement, or PIXI.Sprite
- * @param param.settings optional image settings to restore position/scale/rotation
+ * @param param.imgDatasource the img data could be one of: string url, HTMLImageElement, PIXI.Sprite
+ * @param param.spriteSize
+ * @param param.stageSize
  */
 export declare function updateImage(application: PIXI.Application, { spriteName, imgDatasource, settings, }: {
     spriteName: string;
@@ -99,9 +104,10 @@ export declare function saveAsBlob(application: PIXI.Application): Promise<Blob>
  */
 export declare function saveAsDataURL(application: PIXI.Application): string | undefined;
 /**
- * Calculates the scale ratio between the CSS display size and the actual canvas size.
+ * Calculates the scale percentage for a PIXI.Sprite or the application view based on the parent container's dimensions.
  * @param application - The PIXI.Application instance.
- * @returns The scale ratio (CSS width / canvas width).
+ * @param sprite - The PIXI.Sprite instance (optional).
+ * @returns The scale percentage.
  */
 export declare function getApplicationScale(application: PIXI.Application): number;
 export declare function toBlob(application: PIXI.Application): Promise<Blob>;

package/dist/modules/multimedia/ImageEditor/effects/misc.js

@@ -1,5 +1,4 @@
 import * as PIXI from "pixi.js";
-import { BLUR_LAYER_NAME } from "./constants.js";
 const MIN_HEIGHT = 100, MIN_WIDTH = 100, MODAL_VERTICAL_PADDING = 450, MODAL_HORIZONTAL_PADDING = 64, DEFAULT_QUALITY = 0.5, DEFAULT_SPRITE_NAME = "image";
 function updateImageFromBlob(application, {
   spriteName,
@@ -7,17 +6,15 @@ function updateImageFromBlob(application, {
   settings
 }) {
   const imageUrl = URL.createObjectURL(imgDatasource), image = new Image();
-  return image.src = imageUrl, new Promise((resolve, reject) => {
+  return image.src = imageUrl, new Promise((resolve) => {
     image.onload = async () => {
-      URL.revokeObjectURL(imageUrl), await updateImage(application, {
+      await updateImage(application, {
         spriteName,
         imgDatasource: image,
         settings
       });
-      const newSprite = application == null ? void 0 : application.stage.getChildByLabel(spriteName, !0);
+      const newSprite = application == null ? void 0 : application.stage.getChildByName(spriteName, !0);
       resolve(newSprite);
-    }, image.onerror = () => {
-      URL.revokeObjectURL(imageUrl), reject(new Error("Failed to load image from Blob"));
     };
   });
 }
@@ -28,22 +25,10 @@ async function updateImage(application, {
 }) {
   if (application === void 0 || application.stage === null)
     return;
-  const previous = application.stage.getChildByLabel(spriteName, !0);
+  const previous = application.stage.getChildByName(spriteName, !0);
   previous == null || previous.removeFromParent();
-  const blurLayer = application.stage.getChildByLabel(BLUR_LAYER_NAME);
-  blurLayer == null || blurLayer.removeFromParent();
-  let sprite;
-  if (imgDatasource instanceof PIXI.Sprite)
-    sprite = imgDatasource;
-  else if (imgDatasource instanceof HTMLImageElement)
-    sprite = new PIXI.Sprite(PIXI.Texture.from(imgDatasource));
-  else {
-    const img = new Image();
-    img.crossOrigin = "anonymous", img.src = imgDatasource, await new Promise((resolve, reject) => {
-      img.complete ? resolve() : (img.onload = () => resolve(), img.onerror = reject);
-    }), sprite = new PIXI.Sprite(PIXI.Texture.from(img));
-  }
-  if (sprite.interactive = !0, sprite.label = spriteName, settings) {
+  const texture = imgDatasource instanceof HTMLImageElement ? PIXI.Texture.from(imgDatasource) : imgDatasource instanceof PIXI.Sprite ? imgDatasource : await PIXI.Texture.fromURL(imgDatasource), sprite = texture instanceof PIXI.Sprite ? texture : PIXI.Sprite.from(texture, {});
+  if (sprite.interactive = !0, sprite.name = spriteName, settings) {
     const {
       sprite: {
         anchor,
@@ -63,7 +48,7 @@ async function updateImage(application, {
 }
 function autoResize(application, sprite) {
   var _a;
-  const parent = application.canvas.parentNode, maxMobileWidth = window.innerWidth - MODAL_HORIZONTAL_PADDING, parentWidth = Math.max((parent == null ? void 0 : parent.offsetWidth) ?? 0, MIN_WIDTH), newSize = constraintSize({
+  const parent = application.view.parentNode, maxMobileWidth = window.innerWidth - MODAL_HORIZONTAL_PADDING, parentWidth = Math.max((parent == null ? void 0 : parent.offsetWidth) ?? 0, MIN_WIDTH), newSize = constraintSize({
     width: sprite.width,
     height: sprite.height
   }, {
@@ -79,7 +64,7 @@ function autoResize(application, sprite) {
     height: newHeight,
     width: newWidth
   } = newSize;
-  (_a = application.canvas) != null && _a.style && (application.canvas.style.width = `${newWidth}px`, application.canvas.style.height = `${newHeight}px`);
+  (_a = application.view) != null && _a.style && (application.view.style.width = `${newWidth}px`, application.view.style.height = `${newHeight}px`);
 }
 function constraintSize(size, constraints) {
   const {
@@ -98,22 +83,22 @@ function constraintSize(size, constraints) {
 function saveAsBlob(application) {
   return new Promise((resolve, reject) => {
     var _a;
-    (_a = application == null ? void 0 : application.canvas) != null && _a.toBlob ? application.canvas.toBlob((blob) => {
+    (_a = application == null ? void 0 : application.view) != null && _a.toBlob ? application.view.toBlob((blob) => {
       blob ? resolve(blob) : reject("EXTRACT_FAILED");
     }, "image/jpeg", DEFAULT_QUALITY) : reject("EXTRACT_FAILED");
   });
 }
 function saveAsDataURL(application) {
   var _a, _b;
-  return (_b = (_a = application.canvas).toDataURL) == null ? void 0 : _b.call(_a);
+  return (_b = (_a = application.view).toDataURL) == null ? void 0 : _b.call(_a);
 }
 function getApplicationScale(application) {
-  return application.canvas.getBoundingClientRect ? application.canvas.getBoundingClientRect().width / application.canvas.width : 1;
+  return application.view.getBoundingClientRect ? application.view.getBoundingClientRect().width / application.view.width : 1;
 }
 function toBlob(application) {
   return new Promise((resolve, reject) => {
     var _a, _b;
-    (_b = (_a = application.canvas).toBlob) == null || _b.call(_a, (blob) => {
+    (_b = (_a = application.view).toBlob) == null || _b.call(_a, (blob) => {
       blob ? resolve(blob) : reject("EXTRACT_FAIL");
     }, "image/png", 1);
   });

package/dist/modules/multimedia/ImageEditor/effects/resize.d.ts

@@ -7,15 +7,19 @@ import * as PIXI from 'pixi.js';
  */
 export declare function start(application: PIXI.Application, spriteName: string): void;
 /**
- * Remove all graphical controls and mouse event listeners
+ * If {saveChanges} is true remove all graphical controls then resize the sprite
+ * If {saveChanges} is false remove all graphical controls and keep original size
  *
  * @param application the PIXI.Application context
+ * @param param.saveChanges true if we should save the resize
+ * @param param.spriteName the name of the sprite representing the original image
  */
 export declare function stop(application: PIXI.Application): void;
 /**
- * Apply the resize and return the result as a PIXI.Sprite
  *
  * @param application the PIXI.Application context
- * @returns a PIXI.Sprite with the resized image or undefined if no resize was applied
+ * @param spriteName  the name of the sprite representing the image
+ * @param size the target size of the image {width, height}
+ * @returns a PIXI.Sprite with a image resized or undefined if not found
  */
 export declare function save(application: PIXI.Application): PIXI.Sprite | undefined;

package/dist/modules/multimedia/ImageEditor/effects/resize.js

@@ -42,8 +42,8 @@ function resizeContainer(application, {
   position,
   spriteName
 }) {
-  const sprite = application.stage.getChildByLabel(spriteName, !0);
-  if (!sprite) return;
+  const sprite = application.stage.getChildByName(spriteName, !0);
+  if (sprite == null) return;
   const isRotated = sprite.rotation % Math.PI !== 0, spriteWidth = isRotated ? sprite.height : sprite.width, spriteHeight = isRotated ? sprite.width : sprite.height;
   switch (cornerType) {
     case "TOP_LEFT": {
@@ -68,23 +68,20 @@ function resizeContainer(application, {
   }
 }
 function removeCorner(application, cornerType) {
-  const previous = application.stage.getChildByLabel(getCornerName(cornerType), !0);
+  const previous = application.stage.getChildByName(getCornerName(cornerType), !0);
   previous == null || previous.removeFromParent();
 }
 function drawCorner(application, cornerType, {
   spriteName
 }) {
   removeCorner(application, cornerType);
-  const sprite = application.stage.getChildByLabel(spriteName, !0), container = application.stage.getChildByLabel(CONTROL_NAME, !0);
-  if (!sprite || !container) return;
+  const sprite = application.stage.getChildByName(spriteName, !0), container = application.stage.getChildByName(CONTROL_NAME, !0);
+  if (sprite == null || container === null || container === void 0) return;
   const position = computeCornerPosition(cornerType, container), corner = new PIXI.Graphics();
-  corner.arc(0, 0, POINT_RADIUS, position.start, position.end), corner.lineTo(0, 0), corner.fill({
-    color: 4960213,
-    alpha: 1
-  }), corner.position = new PIXI.Point(position.x, position.y), corner.label = getCornerName(cornerType), corner.interactive = !0;
+  corner.beginFill(4960213, 1), corner.arc(0, 0, POINT_RADIUS, position.start, position.end), corner.lineTo(0, 0), corner.endFill(), corner.position = new PIXI.Point(position.x, position.y), corner.name = getCornerName(cornerType), corner.interactive = !0;
   let enable = !1;
-  const handlePointerMove = (event) => {
-    if (!enable) return;
+  application.stage.on("pointermove", (event) => {
+    if (enable === !1) return;
     const localPosition = application.stage.toLocal(event.global);
     resizeContainer(application, {
       cornerType,
@@ -92,37 +89,31 @@ function drawCorner(application, cornerType, {
       container,
       spriteName
     });
-  };
-  application.stage.on("pointermove", handlePointerMove);
-  const handlePointerDown = () => {
-    enable = !0;
-  };
-  corner.on("pointerdown", handlePointerDown);
+  });
   const handlePointerUp = () => {
     enable = !1;
   };
   globalThis.addEventListener("pointerup", handlePointerUp), corner.once("destroyed", () => {
-    corner.off("pointerdown"), application.stage.off("pointermove", handlePointerMove), globalThis.removeEventListener("pointerup", handlePointerUp);
-  }), container.addChild(corner);
+    corner.off("pointerdown"), globalThis.removeEventListener("pointerup", handlePointerUp);
+  });
+  const handlePointerDown = () => {
+    enable = !0;
+  };
+  corner.on("pointerdown", handlePointerDown), container.addChild(corner);
 }
 function drawContainer(application, spriteName) {
   removeContainer(application);
-  const sprite = application.stage.getChildByLabel(spriteName, !0);
-  if (!sprite) return;
+  const sprite = application.stage.getChildByName(spriteName, !0);
+  if (sprite == null) return;
   const stageTexture = application.renderer.generateTexture(application.stage), clonedStage = new PIXI.Sprite(stageTexture);
   application.stage.children.forEach((child) => {
     child.alpha = 0;
   });
-  const container = new PIXI.Container();
-  container.label = CONTROL_NAME, container.interactive = !0, container.interactiveChildren = !0;
-  const bounds = new PIXI.Graphics();
-  bounds.rect(0, 0, sprite.width, sprite.height), bounds.fill({
-    color: 0,
-    alpha: 0
-  }), application.stage.interactive = !0, application.stage.interactiveChildren = !0, application.stage.addChild(container), container.addChild(bounds), container.addChild(clonedStage);
+  const container = new PIXI.Graphics();
+  container.drawRect(0, 0, sprite.width, sprite.height), container.name = CONTROL_NAME, container.interactive = !0, container.interactiveChildren = !0, application.stage.interactive = !0, application.stage.interactiveChildren = !0, application.stage.addChild(container), container.addChild(clonedStage);
 }
 function removeContainer(application) {
-  const container = application.stage.getChildByLabel(CONTROL_NAME, !0);
+  const container = application.stage.getChildByName(CONTROL_NAME, !0);
   container == null || container.removeFromParent(), application.stage.children.forEach((child) => {
     child.alpha = 1;
   });
@@ -149,12 +140,12 @@ function stop(application) {
 }
 function save(application) {
   var _a;
-  const container = (_a = application == null ? void 0 : application.stage) == null ? void 0 : _a.getChildByLabel(CONTROL_NAME, !0), size = container ? {
+  const container = (_a = application == null ? void 0 : application.stage) == null ? void 0 : _a.getChildByName(CONTROL_NAME, !0), size = container ? {
     height: container.height,
     width: container.width
   } : void 0;
   if (removeControl(application), size) {
-    const stageTexture = application.renderer.generateTexture(application.stage), clonedStage = new PIXI.Sprite(stageTexture);
+    const stageTexture = application.renderer.generateTexture(application.stage).clone(), clonedStage = new PIXI.Sprite(stageTexture);
     return clonedStage.width = size.width, clonedStage.height = size.height, clonedStage;
   } else
     return;