@edifice.io/react 1.7.4-develop-pedago.20241211160712

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

@@ -0,0 +1,157 @@
+import * as PIXI from "pixi.js";
+const POINT_RADIUS = 20, CONTROL_NAME = "CONTROL_NAME";
+function getCornerName(index) {
+  return "RESIZE_CORNER_" + index;
+}
+function computeCornerPosition(position, sprite) {
+  const left = sprite.x, top = sprite.y;
+  switch (position) {
+    case "TOP_LEFT":
+      return {
+        x: left,
+        y: top,
+        start: 0,
+        end: Math.PI / 2
+      };
+    case "TOP_RIGHT":
+      return {
+        x: left + sprite.width,
+        y: top,
+        start: Math.PI / 2,
+        end: Math.PI
+      };
+    case "BOTTOM_LEFT":
+      return {
+        x: left,
+        y: top + sprite.height,
+        start: 3 * Math.PI / 2,
+        end: 2 * Math.PI
+      };
+    case "BOTTOM_RIGHT":
+      return {
+        x: left + sprite.width,
+        y: top + sprite.height,
+        start: Math.PI,
+        end: 3 * Math.PI / 2
+      };
+  }
+}
+function resizeContainer(application, {
+  container,
+  cornerType,
+  position,
+  spriteName
+}) {
+  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": {
+      container.position = new PIXI.Point(position.x, position.y), container.width = spriteWidth - 2 * position.x, container.height = spriteHeight - 2 * position.y;
+      break;
+    }
+    case "TOP_RIGHT": {
+      const newX = spriteWidth - position.x;
+      container.position = new PIXI.Point(newX, position.y), container.width = spriteWidth - 2 * newX, container.height = spriteHeight - 2 * position.y;
+      break;
+    }
+    case "BOTTOM_LEFT": {
+      const newY = spriteHeight - position.y;
+      container.position = new PIXI.Point(position.x, newY), container.width = spriteWidth - 2 * position.x, container.height = spriteHeight - 2 * newY;
+      break;
+    }
+    case "BOTTOM_RIGHT": {
+      const newY = spriteHeight - position.y, newX = spriteWidth - position.x;
+      container.position = new PIXI.Point(newX, newY), container.width = spriteWidth - 2 * newX, container.height = spriteHeight - 2 * newY;
+      break;
+    }
+  }
+}
+function removeCorner(application, cornerType) {
+  const previous = application.stage.getChildByName(getCornerName(cornerType), !0);
+  previous == null || previous.removeFromParent();
+}
+function drawCorner(application, cornerType, {
+  spriteName
+}) {
+  removeCorner(application, cornerType);
+  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.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;
+  application.stage.on("pointermove", (event) => {
+    if (enable === !1) return;
+    const localPosition = application.stage.toLocal(event.global);
+    resizeContainer(application, {
+      cornerType,
+      position: localPosition,
+      container,
+      spriteName
+    });
+  });
+  const handlePointerUp = () => {
+    enable = !1;
+  };
+  globalThis.addEventListener("pointerup", handlePointerUp), corner.once("destroyed", () => {
+    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.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.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.getChildByName(CONTROL_NAME, !0);
+  container == null || container.removeFromParent(), application.stage.children.forEach((child) => {
+    child.alpha = 1;
+  });
+}
+function drawControl(application, spriteName) {
+  drawContainer(application, spriteName), drawCorner(application, "BOTTOM_LEFT", {
+    spriteName
+  }), drawCorner(application, "BOTTOM_RIGHT", {
+    spriteName
+  }), drawCorner(application, "TOP_LEFT", {
+    spriteName
+  }), drawCorner(application, "TOP_RIGHT", {
+    spriteName
+  });
+}
+function removeControl(application) {
+  removeContainer(application), removeCorner(application, "BOTTOM_LEFT"), removeCorner(application, "BOTTOM_RIGHT"), removeCorner(application, "TOP_LEFT"), removeCorner(application, "TOP_RIGHT"), application.stage.off("pointermove");
+}
+function start(application, spriteName) {
+  drawControl(application, spriteName);
+}
+function stop(application) {
+  removeControl(application), application.stage.off("pointermove"), application.render();
+}
+function save(application) {
+  var _a;
+  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).clone(), clonedStage = new PIXI.Sprite(stageTexture);
+    return clonedStage.width = size.width, clonedStage.height = size.height, clonedStage;
+  } else
+    return;
+}
+export {
+  save,
+  start,
+  stop
+};

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

@@ -0,0 +1,8 @@
+import * as PIXI from 'pixi.js';
+/**
+ * This function rotate the sprite by adding PI/2
+ *
+ * @param application The PIXI.Application context
+ * @param spriteName The name of the sprite representing the image
+ */
+export declare function rotate(application: PIXI.Application, spriteName: string): Promise<void>;

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

@@ -0,0 +1,33 @@
+import { toBlob, updateImageFromBlob, createImageSettings, resizeStage } from "./misc.js";
+async function rotate(application, spriteName) {
+  const sprite = application == null ? void 0 : application.stage.getChildByName(spriteName, !0);
+  if (application && sprite) {
+    if (!application) return;
+    const blobBefore = await toBlob(application), mergedSprite = await updateImageFromBlob(application, {
+      imgDatasource: blobBefore,
+      spriteName,
+      settings: createImageSettings({
+        application,
+        sprite
+      })
+    });
+    if (!mergedSprite)
+      return;
+    let backupOldMaxHeight, backupOldVisibility;
+    const canvas = application.view;
+    canvas.style && (backupOldMaxHeight = canvas.style.maxHeight ?? "", backupOldVisibility = canvas.style.visibility ?? "", canvas.style.maxHeight = `${canvas.clientHeight}px`, canvas.style.visibility = "hidden"), mergedSprite.rotation += Math.PI / 2, resizeStage({
+      application,
+      sprite: mergedSprite,
+      newHeight: mergedSprite.width,
+      newWidth: mergedSprite.height
+    }), application.render();
+    const blobAfter = await toBlob(application);
+    backupOldMaxHeight !== void 0 && (canvas.style.maxHeight = backupOldMaxHeight), backupOldVisibility !== void 0 && (canvas.style.visibility = backupOldVisibility), await updateImageFromBlob(application, {
+      imgDatasource: blobAfter,
+      spriteName
+    });
+  }
+}
+export {
+  rotate
+};

package/dist/modules/multimedia/ImageEditor/hooks/useHistoryTool.d.ts

@@ -0,0 +1,32 @@
+import { ImageSettings } from '../effects/misc';
+import * as PIXI from 'pixi.js';
+/**
+ * Defined the structure of the backup in history
+ */
+export interface HistoryState extends ImageSettings {
+    backup: Promise<Blob>;
+}
+export interface UseHistoryToolsProps {
+    maxSize?: number;
+    application?: PIXI.Application;
+    spriteName: string;
+    onRestore: (img: Blob, state: HistoryState) => void;
+}
+/**
+ * This hook expose all the functions needed for historizing actions:
+ * - historize: Create a backup
+ * - restore: Restore a backup
+ * - historyCount: How much states stored in history
+ *
+ * @param param.maxSize the maximum size of the history
+ * @param param.application the PIXI.Application context
+ * @param param.spriteName the sprite name of the edited image
+ * @param param.onRestore a callback called when a backup is restored
+ * @returns all functions needed for managing history
+ */
+declare const useHistoryTool: ({ maxSize, application, spriteName, onRestore, }: UseHistoryToolsProps) => {
+    historyCount: number;
+    restore: () => Promise<void>;
+    historize: <T extends (...args: any[]) => any>(callback: T) => Promise<any>;
+};
+export default useHistoryTool;

package/dist/modules/multimedia/ImageEditor/hooks/useHistoryTool.js

@@ -0,0 +1,66 @@
+import { useState, useEffect } from "react";
+import { toBlob } from "../effects/misc.js";
+const DEFAULT_MAX_HISTORY = 20, useHistoryTool = ({
+  maxSize = DEFAULT_MAX_HISTORY,
+  application,
+  spriteName,
+  onRestore
+}) => {
+  const [history, setHistory] = useState([]);
+  useEffect(() => {
+    setHistory([]);
+  }, [application]);
+  const restore = async () => {
+    const imgData = history.pop();
+    imgData && (onRestore(await imgData.backup, imgData), setHistory(history.filter((current) => current !== imgData)));
+  }, listSize = (arr) => (arr.length > maxSize && arr.splice(0, arr.length - maxSize), arr), historize = async (callback) => {
+    {
+      if (!application)
+        return;
+      const sprite = application.stage.getChildByName(spriteName, !0);
+      if (sprite == null)
+        return;
+      const promise = toBlob(application), state = {
+        backup: promise,
+        sprite: {
+          rotation: sprite.rotation,
+          size: {
+            width: sprite.width,
+            height: sprite.height
+          },
+          position: {
+            x: sprite.position.x,
+            y: sprite.position.y
+          },
+          scale: {
+            x: sprite.scale.x,
+            y: sprite.scale.y
+          },
+          anchor: {
+            x: sprite.anchor.x,
+            y: sprite.anchor.y
+          }
+        },
+        stage: {
+          size: {
+            width: application.stage.width,
+            height: application.stage.height
+          },
+          scale: {
+            x: application.stage.scale.x,
+            y: application.stage.scale.y
+          }
+        }
+      };
+      return setHistory([...listSize(history), state]), await promise, callback.call(callback);
+    }
+  };
+  return {
+    historyCount: history.length,
+    restore,
+    historize
+  };
+};
+export {
+  useHistoryTool as default
+};

package/dist/modules/multimedia/ImageEditor/hooks/useImageEditor.d.ts

@@ -0,0 +1,29 @@
+import * as PIXI from 'pixi.js';
+/**
+ * This hook expose all the functions available for the pixi editor:
+ * - all the effects (crop, resize, rotate, blur)
+ * - historize every action
+ * - backup functions
+ *
+ * @param args.spriteName The spriteName of the original image
+ * @param args.imageSrc The URL of the image to edit
+ * @returns all the action available for the image editor
+ */
+export default function useImageEditor({ imageSrc, spriteName, }: {
+    imageSrc: string;
+    spriteName?: string;
+}): {
+    historyCount: number;
+    setApplication: import('react').Dispatch<import('react').SetStateAction<PIXI.Application<PIXI.ICanvas> | undefined>>;
+    restore: () => Promise<void>;
+    stopCrop: (save: boolean) => void;
+    stopBlur: () => void;
+    stopResize: (save: boolean) => void;
+    startResize: () => Promise<void>;
+    startCrop: () => Promise<void>;
+    startBlur: () => Promise<void>;
+    rotate: () => Promise<void>;
+    toBlob: () => Promise<Blob | undefined>;
+    toDataURL: () => string | undefined;
+    loading: boolean;
+};

package/dist/modules/multimedia/ImageEditor/hooks/useImageEditor.js

@@ -0,0 +1,76 @@
+import { useState, useEffect } from "react";
+import "@pixi/mixin-get-child-by-name";
+import useHistoryTool from "./useHistoryTool.js";
+import useImageEffects from "./useImageEffects.js";
+import { updateImage, DEFAULT_SPRITE_NAME, saveAsBlob, saveAsDataURL, updateImageFromBlob } from "../effects/misc.js";
+function useImageEditor({
+  imageSrc,
+  spriteName = DEFAULT_SPRITE_NAME
+}) {
+  const [application, setApplication] = useState(void 0), [loading, setLoading] = useState(!0), {
+    rotate,
+    startBlur,
+    startCrop,
+    startResize,
+    stopBlur,
+    stopCrop,
+    stopResize
+  } = useImageEffects({
+    spriteName,
+    application,
+    onSave(sprite) {
+      application && updateImage(application, {
+        imgDatasource: sprite,
+        spriteName
+      });
+    }
+  }), toBlob = () => application ? saveAsBlob(application) : Promise.resolve(void 0), toDataURL = () => {
+    if (application)
+      return saveAsDataURL(application);
+  }, {
+    restore,
+    historize,
+    historyCount
+  } = useHistoryTool({
+    application,
+    spriteName,
+    onRestore(imgDatasource, state) {
+      application && updateImageFromBlob(application, {
+        imgDatasource,
+        spriteName,
+        settings: state
+      });
+    }
+  });
+  return useEffect(() => {
+    application && (setLoading(!0), updateImage(application, {
+      spriteName,
+      imgDatasource: imageSrc
+    }).finally(() => setLoading(!1)));
+  }, [application, imageSrc, spriteName]), {
+    historyCount,
+    setApplication,
+    restore,
+    stopCrop,
+    stopBlur,
+    stopResize,
+    startResize: async () => {
+      setLoading(!0), await historize(startResize), setLoading(!1);
+    },
+    startCrop: async () => {
+      setLoading(!0), await historize(startCrop), setLoading(!1);
+    },
+    startBlur: async () => {
+      setLoading(!0), await historize(startBlur), setLoading(!1);
+    },
+    rotate: async () => {
+      setLoading(!0), await historize(rotate), setLoading(!1);
+    },
+    toBlob,
+    toDataURL,
+    loading
+  };
+}
+export {
+  useImageEditor as default
+};

package/dist/modules/multimedia/ImageEditor/hooks/useImageEffects.d.ts

@@ -0,0 +1,23 @@
+import * as PIXI from 'pixi.js';
+export interface UseImageEffectsProps {
+    spriteName: string;
+    application?: PIXI.Application;
+    onSave(sprite: PIXI.Sprite): void;
+}
+/**
+ * This hook expose all effects of the pixi editor
+ *
+ * @param args.spriteName The spriteName of the original image
+ * @param args.application The PIXI.Application context
+ * @param args.onSave A callback called when the sprite changes
+ * @returns all the action available for the image editor
+ */
+export default function useImageEffects({ application, spriteName, onSave, }: UseImageEffectsProps): {
+    rotate: () => Promise<void>;
+    startCrop: () => void;
+    stopCrop: (save: boolean) => void;
+    startBlur: () => void;
+    stopBlur: () => void;
+    startResize: () => void;
+    stopResize: (save: boolean) => void;
+};

package/dist/modules/multimedia/ImageEditor/hooks/useImageEffects.js

@@ -0,0 +1,52 @@
+import { start as start$1, stop as stop$1 } from "../effects/blur.js";
+import { start, save, stop } from "../effects/crop.js";
+import { save as save$1, stop as stop$2, start as start$2 } from "../effects/resize.js";
+import { rotate } from "../effects/rotate.js";
+function useImageEffects({
+  application,
+  spriteName,
+  onSave
+}) {
+  return {
+    rotate: async () => {
+      application && await rotate(application, spriteName);
+    },
+    startCrop: () => {
+      application && start(application, {
+        spriteName
+      });
+    },
+    stopCrop: (save$12) => {
+      if (application) {
+        if (save$12) {
+          const result = save(application);
+          result && onSave(result);
+        }
+        stop(application);
+      }
+    },
+    startBlur: () => {
+      application && start$1(application, {
+        spriteName
+      });
+    },
+    stopBlur: () => {
+      application && stop$1(application);
+    },
+    startResize: () => {
+      application && start$2(application, spriteName);
+    },
+    stopResize: (save2) => {
+      if (application) {
+        if (save2) {
+          const result = save$1(application);
+          result && onSave(result);
+        }
+        stop$2(application);
+      }
+    }
+  };
+}
+export {
+  useImageEffects as default
+};

package/dist/modules/multimedia/ImageEditor/index.d.ts

@@ -0,0 +1 @@
+export { default as ImageEditor } from './components/ImageEditor';

package/dist/modules/multimedia/ImageEditor/utilities/aggregate.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This function aggregate events and call the callback with aggregated events every {delay}
+ *
+ * @param delay delay between each call
+ * @param map a function to transform event from {INPUT} to {OUTPUT}
+ * @param callback a callback called with aggregated events every x ms
+ * @returns a function that take as argument (INPUT)=>void
+ */
+export declare function aggregate<INPUT, OUTPUT>(delay: number, map: (input: INPUT) => OUTPUT, callback: (aggregated: OUTPUT[]) => void): (arg: INPUT) => void;

package/dist/modules/multimedia/ImageEditor/utilities/aggregate.js

@@ -0,0 +1,13 @@
+function aggregate(delay, map, callback) {
+  let timerId;
+  const pending = [];
+  return function(arg) {
+    pending.push(map(arg)), !timerId && (timerId = setTimeout(() => {
+      const copy = [...pending];
+      pending.splice(0, pending.length), callback(copy), timerId = void 0;
+    }, delay));
+  };
+}
+export {
+  aggregate
+};

package/dist/modules/multimedia/ImageEditor/utilities/debounceAggregate.d.ts

@@ -0,0 +1,10 @@
+/**
+ * This function aggregate events and call the callback with aggregated events every {delay}
+ * But this function apply a debounce, thats means that the timer is reseted every time the function is called
+ *
+ * @param delay delay between each call
+ * @param map a function to transform event from {INPUT} to {OUTPUT}
+ * @param callback a callback called with aggregated events every x ms
+ * @returns a function that take as argument (INPUT)=>void
+ */
+export declare function debounceAggregate<INPUT, OUTPUT>(delay: number, map: (input: INPUT) => OUTPUT, callback: (aggregated: OUTPUT[]) => void): (arg: INPUT) => void;

package/dist/modules/multimedia/ImagePicker/ImagePicker.d.ts

@@ -0,0 +1,46 @@
+import { ComponentPropsWithRef } from 'react';
+import { IWebApp } from '@edifice.io/client';
+export interface ImagePickerProps extends ComponentPropsWithRef<'input'> {
+    /**
+     * Accessible description of the add button
+     */
+    addButtonLabel: string;
+    /**
+     * Accessible description of the delete button
+     */
+    deleteButtonLabel: string;
+    /**
+     * Provide a default image as placeholder
+     */
+    src?: string;
+    /**
+     * Pathe element select in WorkSpace
+     */
+    libraryMedia: string;
+    /**
+     * Element select in WorkSpace
+     */
+    mediaLibraryRef: any;
+    /**
+     * To show the icon of an application
+     */
+    app?: IWebApp | undefined;
+    appCode?: string;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+    /**
+     * Callback when uploading image
+     */
+    onUploadImage: (file: File | string) => void;
+    /**
+     * Callback when deleting image
+     */
+    onDeleteImage: () => void;
+}
+declare const ImagePicker: {
+    ({ addButtonLabel, deleteButtonLabel, src, className, mediaLibraryRef, libraryMedia, app, onUploadImage, onDeleteImage, }: ImagePickerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ImagePicker;

package/dist/modules/multimedia/ImagePicker/ImagePicker.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import clsx from "clsx";
+import SvgIconDelete from "../../icons/components/IconDelete.js";
+import SvgIconEdit from "../../icons/components/IconEdit.js";
+import IconButton from "../../../components/Button/IconButton.js";
+import Avatar from "../../../components/Avatar/Avatar.js";
+import AppIcon from "../../../components/AppIcon/AppIcon.js";
+const ImagePicker = ({
+  addButtonLabel = "Add image",
+  deleteButtonLabel = "Delete image",
+  src,
+  className,
+  mediaLibraryRef,
+  libraryMedia,
+  app,
+  onUploadImage,
+  onDeleteImage
+}) => {
+  const [preview, setPreview] = useState(src || "");
+  useEffect(() => {
+    libraryMedia && (setPreview(libraryMedia), onUploadImage(libraryMedia));
+  }, [libraryMedia]);
+  const handleClick = () => {
+    var _a;
+    (_a = mediaLibraryRef.current) == null || _a.show("image");
+  }, handleClean = () => {
+    setPreview(""), onDeleteImage();
+  }, classes = clsx("image-input", className);
+  return /* @__PURE__ */ jsxs("div", { id: "image-input", className: classes, children: [
+    /* @__PURE__ */ jsxs("div", { className: "image-input-actions gap-8", children: [
+      /* @__PURE__ */ jsx(IconButton, { "aria-label": addButtonLabel, color: "tertiary", icon: /* @__PURE__ */ jsx(SvgIconEdit, {}), onClick: handleClick, type: "button", variant: "ghost" }),
+      /* @__PURE__ */ jsx(IconButton, { "aria-label": deleteButtonLabel, color: "danger", disabled: !preview, icon: /* @__PURE__ */ jsx(SvgIconDelete, {}), onClick: handleClean, type: "button", variant: "ghost" })
+    ] }),
+    preview ? /* @__PURE__ */ jsx(Avatar, { alt: "", src: preview, size: "xl" }) : /* @__PURE__ */ jsx(AppIcon, { app, iconFit: "ratio", size: "160", variant: "rounded" })
+  ] });
+};
+export {
+  ImagePicker as default
+};

package/dist/modules/multimedia/ImagePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ImagePicker';
+export { default as ImagePickerWorkspace } from './ImagePicker';

package/dist/modules/multimedia/Linker/ExternalLinker/ExternalLinker.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Properties for the ExternalLink.
+ */
+export interface IExternalLink {
+    /** Link Url */
+    url: string;
+    /** Link text for the llink display */
+    text?: string;
+    /** Link target (default: _blank) */
+    target?: '_blank';
+}
+/**
+ * Properties for the ExternalLinker react component.
+ */
+export type ExternalLinkerProps = {
+    /** Default link to update. */
+    link?: Partial<IExternalLink>;
+    /**
+     * Set true if the user select multiple nodes. (note simple text selection)
+     */
+    multiNodeSelected?: boolean;
+    /** Target */
+    target?: '_blank';
+    /** Notify when the user change any link information */
+    onChange?: (link?: IExternalLink) => void;
+};
+declare const ExternalLinker: ({ link, onChange, multiNodeSelected, }: ExternalLinkerProps) => import("react/jsx-runtime").JSX.Element;
+export default ExternalLinker;