@edifice.io/react 2.6.9-develop-enabling.20261013152718 → 2.6.9-develop-integration.20261014191834

package/dist/modules/multimedia/FileCard/NextcloudFileCard.js

@@ -0,0 +1,102 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { DocumentHelper, odeServices } from "@edifice.io/client";
+import clsx from "clsx";
+import SvgIconLandscape from "../../icons/components/IconLandscape.js";
+import SvgIconMic from "../../icons/components/IconMic.js";
+import SvgIconTextPage from "../../icons/components/IconTextPage.js";
+import SvgIconVideo from "../../icons/components/IconVideo.js";
+import FileIcon from "./FileIcon.js";
+import useThumbnail from "../../../hooks/useThumbnail/useThumbnail.js";
+import Card from "../../../components/Card/Card.js";
+const roleMappings = {
+  csv: {
+    icon: ".CSV",
+    color: "bg-orange-200"
+  },
+  xls: {
+    icon: ".XLS",
+    color: "bg-green-200"
+  },
+  doc: {
+    icon: ".DOC",
+    color: "bg-blue-200"
+  },
+  txt: {
+    icon: ".TXT",
+    color: "bg-blue-200"
+  },
+  pdf: {
+    icon: ".PDF",
+    color: "bg-red-200"
+  },
+  audio: {
+    icon: /* @__PURE__ */ jsx(SvgIconMic, { width: 22, height: 22 }),
+    color: "bg-red-200"
+  },
+  ppt: {
+    icon: ".PPT",
+    color: "bg-red-200"
+  },
+  img: {
+    icon: /* @__PURE__ */ jsx(SvgIconLandscape, { width: 22, height: 22 }),
+    color: "bg-green-200"
+  },
+  video: {
+    icon: /* @__PURE__ */ jsx(SvgIconVideo, { width: 22, height: 22 }),
+    color: "bg-purple-200"
+  },
+  zip: {
+    icon: ".ZIP",
+    color: "bg-gray-300"
+  },
+  md: {
+    icon: ".MD",
+    color: "bg-blue-200"
+  },
+  unknown: {
+    icon: /* @__PURE__ */ jsx(SvgIconTextPage, { width: 22, height: 22 }),
+    color: "bg-gray-300"
+  }
+};
+function getRoleMap(type, customIcon, customColor) {
+  return customIcon !== void 0 || customColor !== void 0 ? {
+    icon: customIcon || /* @__PURE__ */ jsx(SvgIconTextPage, { width: 22, height: 22 }),
+    color: customColor || "bg-gray-300",
+    hasShadow: !1
+  } : roleMappings[type] ?? roleMappings.unknown;
+}
+const NextcloudFileCard = ({
+  doc,
+  userId,
+  isClickable = !0,
+  isSelectable = !1,
+  isSelected = !1,
+  onClick,
+  className,
+  onSelect,
+  isFocused,
+  app,
+  customIcon,
+  customColor
+}) => {
+  const ref = useRef(null), type = DocumentHelper.role(doc.contentType, !1), roleMap = getRoleMap(type ?? "unknown", customIcon, customColor), file = clsx("file position-relative rounded", (roleMap == null ? void 0 : roleMap.color) ?? "bg-yellow-200"), mediaSrc = type === "img" ? odeServices.nextcloud().getFileUrl(userId, doc) : null, hasThumbnail = useThumbnail(mediaSrc, {
+    ref
+  }), imageStyles = hasThumbnail && {
+    backgroundImage: `url(${mediaSrc})`,
+    backgroundSize: "cover"
+  };
+  return /* @__PURE__ */ jsx(Card, { className: clsx("card-file", className), isClickable, isSelectable, isSelected, onClick, app, isFocused, onSelect, children: /* @__PURE__ */ jsxs(Card.Body, { space: "8", children: [
+    /* @__PURE__ */ jsx("div", { ref, className: file, style: {
+      aspectRatio: "16/10",
+      ...imageStyles
+    }, children: type !== "img" || !hasThumbnail ? /* @__PURE__ */ jsx(FileIcon, { type, roleMap }) : null }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx(Card.Text, { children: doc.name }),
+      /* @__PURE__ */ jsx(Card.Text, { className: "text-black-50", children: doc == null ? void 0 : doc.ownerDisplayName })
+    ] })
+  ] }) });
+};
+export {
+  NextcloudFileCard as default
+};

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

@@ -1,2 +1,6 @@
 export { default as FileCard } from './FileCard';
 export * from './FileCard';
+export { default as GoogleDriveFileCard } from './GoogleDriveFileCard';
+export * from './GoogleDriveFileCard';
+export { default as NextcloudFileCard } from './NextcloudFileCard';
+export * from './NextcloudFileCard';

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

@@ -0,0 +1,24 @@
+import { GoogleDriveDocument, Role } from '@edifice.io/client';
+/**
+ * GoogleDrive component properties
+ */
+export interface GoogleDriveProps {
+    /**
+     * Notify parent when media elements are successfully selected.
+     */
+    onSelect: (result: GoogleDriveDocument[]) => void;
+    /**
+     * Boolean to know if we can select 1 or many files.
+     */
+    multiple?: boolean | undefined;
+    /**
+     * Document roles to filter files by; null (default) shows all roles.
+     */
+    roles?: Role | Role[] | null;
+    /**
+     * Optional class for styling purpose
+     */
+    className?: string;
+}
+declare const GoogleDrive: ({ onSelect, multiple, roles, className, }: GoogleDriveProps) => import("react/jsx-runtime").JSX.Element;
+export default GoogleDrive;

package/dist/modules/multimedia/GoogleDrive/GoogleDrive.js

@@ -0,0 +1,100 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { DocumentHelper } from "@edifice.io/client";
+import clsx from "clsx";
+import { useTranslation } from "react-i18next";
+import { findNodeById } from "../../../components/Tree/utilities/tree.js";
+import SvgIconSortAscendingLetters from "../../icons/components/IconSortAscendingLetters.js";
+import SvgIconSortDescendingLetters from "../../icons/components/IconSortDescendingLetters.js";
+import SvgIconSortTime from "../../icons/components/IconSortTime.js";
+import illuError from "@edifice.io/bootstrap/dist/images/emptyscreen/illu-error.svg";
+import illuTrash from "@edifice.io/bootstrap/dist/images/emptyscreen/illu-trash.svg";
+import useUser from "../../../hooks/useUser/useUser.js";
+import useGoogleDriveSearch from "../../../hooks/useGoogleDriveSearch/useGoogleDriveSearch.js";
+import { Grid } from "../../../components/Grid/Grid.js";
+import Tree from "../../../components/Tree/components/Tree.js";
+import SearchBar from "../../../components/SearchBar/SearchBar.js";
+import Flex from "../../../components/Flex/Flex.js";
+import Dropdown from "../../../components/Dropdown/Dropdown.js";
+import EmptyScreen from "../../../components/EmptyScreen/EmptyScreen.js";
+import Button from "../../../components/Button/Button.js";
+import LoadingScreen from "../../../components/LoadingScreen/LoadingScreen.js";
+import GoogleDriveFileCard from "../FileCard/GoogleDriveFileCard.js";
+const ROOT_ID = "root";
+function compare(a, b) {
+  return a === b ? 0 : a === void 0 ? -1 : b === void 0 ? 1 : a.localeCompare(b);
+}
+const GoogleDrive = ({
+  onSelect,
+  multiple = !0,
+  roles,
+  className
+}) => {
+  const {
+    t
+  } = useTranslation(), {
+    user
+  } = useUser(), {
+    root,
+    loadContent,
+    loadError
+  } = useGoogleDriveSearch(ROOT_ID, t("google-drive.mydrive"), user == null ? void 0 : user.userId), [currentNodeId, setCurrentNodeId] = useState(ROOT_ID), currentNode = findNodeById(root, currentNodeId) ?? root, [searchTerm, setSearchTerm] = useState(void 0), [sortOrder, setSortOrder] = useState(["modified", "desc"]), [selectedDocuments, setSelectedDocuments] = useState([]), handleTreeItemChange = useCallback((nodeId) => {
+    setCurrentNodeId(nodeId), loadContent(nodeId);
+  }, [loadContent]);
+  useEffect(() => {
+    loadContent(ROOT_ID);
+  }, [loadContent]);
+  const documents = useMemo(() => {
+    if (!currentNode.files) return;
+    const matchesRole = (doc) => {
+      if (!roles) return !0;
+      const role = DocumentHelper.role(doc.contentType, !1);
+      return Array.isArray(roles) ? roles.includes(role) : roles === role;
+    }, normalizedSearchTerm = searchTerm == null ? void 0 : searchTerm.toLowerCase(), list = currentNode.files.filter((f) => (!normalizedSearchTerm || f.name.toLowerCase().includes(normalizedSearchTerm)) && matchesRole(f));
+    let sortFunction;
+    return sortOrder[0] === "name" ? sortFunction = sortOrder[1] === "asc" ? (a, b) => compare(a.name, b.name) : (a, b) => compare(b.name, a.name) : sortFunction = (a, b) => compare(b.lastModified, a.lastModified), list.sort(sortFunction);
+  }, [currentNode, searchTerm, sortOrder, roles]), selectedIds = useMemo(() => new Set(selectedDocuments.map((d) => d.id)), [selectedDocuments]), handleSearchChange = useCallback((e) => {
+    setSearchTerm(e.target.value);
+  }, [setSearchTerm]);
+  function getSortOrderLabel() {
+    return sortOrder[0] === "name" ? sortOrder[1] === "asc" ? t("sort.order.alpha.asc") : t("sort.order.alpha.desc") : t("sort.order.modify.desc");
+  }
+  function handleSelectDoc(doc) {
+    let currentDocuments = [...selectedDocuments];
+    multiple ? currentDocuments.some((selectedDocument) => selectedDocument.id === doc.id) ? currentDocuments = currentDocuments.filter((selectedDocument) => selectedDocument.id !== doc.id) : currentDocuments = [...currentDocuments, doc] : currentDocuments = [doc], setSelectedDocuments(currentDocuments), onSelect(currentDocuments);
+  }
+  const googleDrive = clsx("workspace flex-grow-1 gap-0", className);
+  return /* @__PURE__ */ jsxs(Grid, { className: googleDrive, children: [
+    /* @__PURE__ */ jsx(Grid.Col, { sm: "12", md: "3", xl: "4", className: "workspace-folders p-12 pt-0 gap-12", children: /* @__PURE__ */ jsx("div", { style: {
+      position: "sticky",
+      top: 0,
+      paddingTop: "1.2rem"
+    }, children: /* @__PURE__ */ jsx(Tree, { nodes: root, selectedNodeId: currentNodeId, showIcon: !0, onTreeItemClick: handleTreeItemChange, onTreeItemUnfold: handleTreeItemChange }) }) }),
+    /* @__PURE__ */ jsx(Grid.Col, { sm: "12", md: "5", xl: "8", children: /* @__PURE__ */ jsxs(Grid, { className: "flex-grow-1 gap-0", children: [
+      /* @__PURE__ */ jsxs(Grid.Col, { sm: "4", md: "8", xl: "12", children: [
+        /* @__PURE__ */ jsx("div", { className: "workspace-search px-16 py-8 ", children: /* @__PURE__ */ jsx(SearchBar, { isVariant: !0, className: "gap-16", onChange: handleSearchChange }) }),
+        /* @__PURE__ */ jsxs(Flex, { className: "px-8 py-4", align: "center", justify: "end", children: [
+          /* @__PURE__ */ jsx("small", { className: "text-muted", children: t("workspace.search.order") }),
+          /* @__PURE__ */ jsxs(Dropdown, { children: [
+            /* @__PURE__ */ jsx(Dropdown.Trigger, { size: "sm", label: getSortOrderLabel(), variant: "ghost" }),
+            /* @__PURE__ */ jsxs(Dropdown.Menu, { children: [
+              /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(SvgIconSortTime, {}), onClick: () => setSortOrder(["modified", "desc"]), children: t("sort.order.modify.desc") }),
+              /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(SvgIconSortAscendingLetters, {}), onClick: () => setSortOrder(["name", "asc"]), children: t("sort.order.alpha.asc") }),
+              /* @__PURE__ */ jsx(Dropdown.Item, { icon: /* @__PURE__ */ jsx(SvgIconSortDescendingLetters, {}), onClick: () => setSortOrder(["name", "desc"]), children: t("sort.order.alpha.desc") })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Grid.Col, { sm: "4", md: "8", xl: "12", className: "p-8 gap-8", children: loadError ? /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "12", className: "h-full w-100", justify: "center", align: "center", children: [
+        /* @__PURE__ */ jsx(EmptyScreen, { imageSrc: illuError, title: t("google-drive.error.title"), text: t("google-drive.error.description") }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => loadContent(currentNodeId), children: t("retry") })
+      ] }) : documents ? documents.length !== 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-workspace", children: documents.map((doc) => {
+        const isSelected = selectedIds.has(doc.id);
+        return /* @__PURE__ */ jsx(GoogleDriveFileCard, { doc, userId: user.userId, isSelected, onClick: () => handleSelectDoc(doc) }, doc.id);
+      }) }) : /* @__PURE__ */ jsx(EmptyScreen, { imageSrc: illuTrash, text: t("workspace.empty.docSpace"), title: t("explorer.emptyScreen.trash.title") }) : /* @__PURE__ */ jsx(LoadingScreen, {}) })
+    ] }) })
+  ] });
+};
+export {
+  GoogleDrive as default
+};

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

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

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

@@ -1 +1,130 @@
-import Button from"../../../../components/Button/Button.js";import useImageEditor from"../hooks/useImageEditor.js";import ImageEditorToolbar from"./ImageEditorToolbar.js";import Modal from"../../../../components/Modal/Modal.js";import Input from"../../../../components/Input/Input.js";import Label from"../../../../components/Label/Label.js";import FormControl from"../../../../components/Form/FormControl.js";import LoadingScreen from"../../../../components/LoadingScreen/LoadingScreen.js";import{useCallback,useEffect,useRef,useState}from"react";import{jsx,jsxs}from"react/jsx-runtime";import{useTranslation}from"react-i18next";import*as PIXI from"pixi.js";var ImageEditor=({altText:altTextParam,legend:legendParam,image:imageSrc,isOpen,onCancel,onError,onSave})=>{let{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]);let{toBlob,setApplication,startBlur,stopBlur,restore,rotate,startCrop,stopCrop,startResize,stopResize,historyCount,loading}=useImageEditor({imageSrc}),appRef=useRef(null),containerRef=useCallback(node=>{if(node&&!appRef.current){let 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=()=>{stopBlur(),stopCrop(currentOperation===`CROP`),stopResize(currentOperation===`RESIZE`)},handleSave=async()=>{try{setSaving(!0),stopAll();let blob=await toBlob();blob&&await onSave({blob,legend,altText})}catch(e){onError?.(`${e}`)}finally{setSaving(!1)}},handleCancel=()=>{onCancel()};return jsxs(Modal,{id:`image-editor`,isOpen,onModalClose:handleCancel,size:`lg`,children:[jsx(Modal.Header,{onModalClose:handleCancel,children:jsx(`span`,{className:`h2`,children:t(`imageeditor.title`)})}),jsx(Modal.Body,{className:`d-flex flex-column align-items-center`,children:jsxs(`div`,{className:`d-flex flex-column gap-12 w-100 flex-grow-1`,children:[jsx(ImageEditorToolbar,{handle:async operation=>{switch(stopAll(),setCurrentOperation(operation),setDirty(!0),operation){case`ROTATE`:await rotate();break;case`UNDO`:await restore();break;case`CROP`:startCrop();break;case`RESIZE`:await startResize();break;case`BLUR`:await startBlur();break}},historyCount}),jsxs(`div`,{className:`position-relative d-flex flex-column align-items-center justify-content-center flex-grow-1 w-100 image-editor`,children:[jsx(`div`,{ref:containerRef,className:`d-flex justify-content-center w-100`}),loading&&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:jsx(LoadingScreen,{})})]}),jsxs(`div`,{className:`d-flex flex-column flex-md-row m-10 gap-12 w-100`,children:[jsxs(FormControl,{id:`alt`,className:`flex-grow-1`,children:[jsx(Label,{children:t(`alttext`)}),jsx(Input,{value:altText,onChange:e=>{setDirty(!0),setAltText(e.target.value)},placeholder:t(`alttext.help`),size:`md`,type:`text`})]}),jsxs(FormControl,{id:`legend`,className:`flex-grow-1`,children:[jsx(Label,{children:t(`legend`)}),jsx(Input,{value:legend,onChange:e=>{setDirty(!0),setLegend(e.target.value)},placeholder:t(`legend.help`),size:`md`,type:`text`})]})]})]})}),jsxs(Modal.Footer,{children:[jsx(Button,{color:`tertiary`,onClick:handleCancel,type:`button`,variant:`ghost`,children:t(`imageeditor.cancel`)}),jsx(Button,{color:`primary`,onClick:handleSave,type:`button`,variant:`filled`,isLoading:isSaving,disabled:isSaving||!dirty,children:t(`imageeditor.save`)})]})]})};export{ImageEditor as default};
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useCallback } from "react";
+import * as PIXI from "pixi.js";
+import { useTranslation } from "react-i18next";
+import useImageEditor from "../hooks/useImageEditor.js";
+import ImageEditorToolbar from "./ImageEditorToolbar.js";
+import Modal from "../../../../components/Modal/Modal.js";
+import LoadingScreen from "../../../../components/LoadingScreen/LoadingScreen.js";
+import FormControl from "../../../../components/Form/FormControl.js";
+import Label from "../../../../components/Label/Label.js";
+import Input from "../../../../components/Input/Input.js";
+import Button from "../../../../components/Button/Button.js";
+const ImageEditor = ({
+  altText: altTextParam,
+  legend: legendParam,
+  image: imageSrc,
+  isOpen,
+  onCancel,
+  onError,
+  onSave
+}) => {
+  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 {
+    toBlob,
+    setApplication,
+    startBlur,
+    stopBlur,
+    restore,
+    rotate,
+    startCrop,
+    stopCrop,
+    startResize,
+    stopResize,
+    historyCount,
+    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 = () => {
+    stopBlur(), stopCrop(currentOperation === "CROP"), stopResize(currentOperation === "RESIZE");
+  }, handleSave = async () => {
+    try {
+      setSaving(!0), stopAll();
+      const blob = await toBlob();
+      blob && await onSave({
+        blob,
+        legend,
+        altText
+      });
+    } catch (e) {
+      onError == null || onError(`${e}`);
+    } finally {
+      setSaving(!1);
+    }
+  }, handleCancel = () => {
+    onCancel();
+  }, handleOperation = async (operation) => {
+    switch (stopAll(), setCurrentOperation(operation), setDirty(!0), operation) {
+      case "ROTATE": {
+        await rotate();
+        break;
+      }
+      case "UNDO": {
+        await restore();
+        break;
+      }
+      case "CROP": {
+        startCrop();
+        break;
+      }
+      case "RESIZE": {
+        await startResize();
+        break;
+      }
+      case "BLUR": {
+        await startBlur();
+        break;
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Modal, { id: "image-editor", isOpen, onModalClose: handleCancel, size: "lg", children: [
+    /* @__PURE__ */ jsx(Modal.Header, { onModalClose: handleCancel, children: /* @__PURE__ */ jsx("span", { className: "h2", children: t("imageeditor.title") }) }),
+    /* @__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__ */ 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: [
+          /* @__PURE__ */ jsx(Label, { children: t("alttext") }),
+          /* @__PURE__ */ jsx(Input, { value: altText, onChange: (e) => {
+            setDirty(!0), setAltText(e.target.value);
+          }, placeholder: t("alttext.help"), size: "md", type: "text" })
+        ] }),
+        /* @__PURE__ */ jsxs(FormControl, { id: "legend", className: "flex-grow-1", children: [
+          /* @__PURE__ */ jsx(Label, { children: t("legend") }),
+          /* @__PURE__ */ jsx(Input, { value: legend, onChange: (e) => {
+            setDirty(!0), setLegend(e.target.value);
+          }, placeholder: t("legend.help"), size: "md", type: "text" })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { color: "tertiary", onClick: handleCancel, type: "button", variant: "ghost", children: t("imageeditor.cancel") }),
+      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: handleSave, type: "button", variant: "filled", isLoading: isSaving, disabled: isSaving || !dirty, children: t("imageeditor.save") })
+    ] })
+  ] });
+};
+export {
+  ImageEditor as default
+};

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

@@ -1 +1,72 @@
-import SvgIconBlur from"../../../icons/components/IconBlur.js";import SvgIconCrop from"../../../icons/components/IconCrop.js";import SvgIconReset from"../../../icons/components/IconReset.js";import SvgIconUndo from"../../../icons/components/IconUndo.js";import Toolbar from"../../../../components/Toolbar/Toolbar.js";import{useState}from"react";import{jsx}from"react/jsx-runtime";import{useTranslation}from"react-i18next";var ImageEditorToolbar=({historyCount,handle})=>{let{t}=useTranslation(),[action,setAction]=useState(void 0),handleAndSave=action=>{setAction(action),handle(action)};return jsx(Toolbar,{variant:`no-shadow`,align:`left`,isBlock:!0,items:[{type:`button`,name:`undo`,props:{color:`tertiary`,leftIcon:jsx(SvgIconUndo,{}),"aria-label":t(`cancel`),children:t(`cancel`),onClick:()=>handleAndSave(`UNDO`),disabled:historyCount===0},tooltip:t(`cancel`)},{type:`divider`,name:`div-1`},{type:`button`,name:`reset`,props:{color:`tertiary`,leftIcon:jsx(SvgIconReset,{}),"aria-label":t(`rotate`),children:t(`rotate`),onClick:()=>handleAndSave(`ROTATE`)},tooltip:t(`rotate`)},{type:`button`,name:`crop`,props:{color:`tertiary`,leftIcon:jsx(SvgIconCrop,{}),"aria-label":t(`crop`),children:t(`crop`),className:action===`CROP`?`is-selected`:``,onClick:()=>handleAndSave(`CROP`)},tooltip:t(`crop`)},{type:`button`,name:`blur`,props:{color:`tertiary`,leftIcon:jsx(SvgIconBlur,{}),"aria-label":t(`blur`),children:t(`blur`),className:action===`BLUR`?`is-selected`:``,onClick:()=>handleAndSave(`BLUR`)},tooltip:t(`blur`)}]})};export{ImageEditorToolbar as default};
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import SvgIconBlur from "../../../icons/components/IconBlur.js";
+import SvgIconCrop from "../../../icons/components/IconCrop.js";
+import SvgIconReset from "../../../icons/components/IconReset.js";
+import SvgIconUndo from "../../../icons/components/IconUndo.js";
+import { Toolbar } from "../../../../components/Toolbar/Toolbar.js";
+const ImageEditorToolbar = ({
+  historyCount,
+  handle
+}) => {
+  const {
+    t
+  } = useTranslation(), [action, setAction] = useState(void 0), handleAndSave = (action2) => {
+    setAction(action2), handle(action2);
+  }, ImageEditorItems = [{
+    type: "button",
+    name: "undo",
+    props: {
+      color: "tertiary",
+      leftIcon: /* @__PURE__ */ jsx(SvgIconUndo, {}),
+      "aria-label": t("cancel"),
+      children: t("cancel"),
+      onClick: () => handleAndSave("UNDO"),
+      disabled: historyCount === 0
+    },
+    tooltip: t("cancel")
+  }, {
+    type: "divider",
+    name: "div-1"
+  }, {
+    type: "button",
+    name: "reset",
+    props: {
+      color: "tertiary",
+      leftIcon: /* @__PURE__ */ jsx(SvgIconReset, {}),
+      "aria-label": t("rotate"),
+      children: t("rotate"),
+      onClick: () => handleAndSave("ROTATE")
+    },
+    tooltip: t("rotate")
+  }, {
+    type: "button",
+    name: "crop",
+    props: {
+      color: "tertiary",
+      leftIcon: /* @__PURE__ */ jsx(SvgIconCrop, {}),
+      "aria-label": t("crop"),
+      children: t("crop"),
+      className: action === "CROP" ? "is-selected" : "",
+      onClick: () => handleAndSave("CROP")
+    },
+    tooltip: t("crop")
+  }, {
+    type: "button",
+    name: "blur",
+    props: {
+      color: "tertiary",
+      leftIcon: /* @__PURE__ */ jsx(SvgIconBlur, {}),
+      "aria-label": t("blur"),
+      children: t("blur"),
+      className: action === "BLUR" ? "is-selected" : "",
+      onClick: () => handleAndSave("BLUR")
+    },
+    tooltip: t("blur")
+  }];
+  return /* @__PURE__ */ jsx(Toolbar, { variant: "no-shadow", align: "left", isBlock: !0, items: ImageEditorItems });
+};
+export {
+  ImageEditorToolbar as default
+};

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

@@ -1 +1,80 @@
-import{BLUR_LAYER_NAME}from"./constants.js";import{getApplicationScale}from"./misc.js";import{aggregate}from"../utilities/aggregate.js";import*as PIXI from"pixi.js";var 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){let container=new PIXI.Graphics;for(let point of points)point&&(container.circle(point.x,point.y,BRUSH_SIZE/scale),container.fill({color:16777215,alpha:1}));return container}function drawBlurListener(application,{spriteName}){return aggregate(DEBOUNCE,event=>application.stage.toLocal(event.global),points=>{let child=application.stage.getChildByLabel(spriteName),scale=getApplicationScale(application);if(!child)return;let 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;let blurLayer=getOrCreateBlurLayer(application),brushMask=drawBrush(points,scale);blurLayer.addChild(brushMask),newSprite.mask=brushMask,blurLayer.addChild(newSprite)})}function drawCursor(application){removeCursor(application);let 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}function removeCursor(application){let child=application.stage.getChildByLabel(CURSOR_NAME);child&&child.removeFromParent()}function moveCursorListener(application){return event=>{if(!application)return;let point=application.stage.toLocal(event.global),child=application.stage.getChildByLabel(CURSOR_NAME,!0);child&&(child.position.x=point.x,child.position.y=point.y)}}function start(application,{spriteName}){application.stage.interactive=!0;let cursor=drawCursor(application),cursorListener=moveCursorListener(application);application.stage.on(`pointermove`,cursorListener);let blurListener=drawBlurListener(application,{spriteName});application.stage.on(`pointerdown`,()=>{application.stage.off(`pointermove`,blurListener),application.stage.on(`pointermove`,blurListener)});let stopListening=()=>{application?.stage?.off(`pointermove`,blurListener)};globalThis.addEventListener(`pointerup`,stopListening),cursor.once(`destroyed`,()=>{globalThis.removeEventListener(`pointerup`,stopListening)})}function stop(application){removeCursor(application),application.stage.off(`pointerdown`),application.stage.off(`pointermove`)}export{start,stop};
+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
+    }));
+  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);
+  });
+}
+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;
+}
+function removeCursor(application) {
+  const child = application.stage.getChildByLabel(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);
+    child && (child.position.x = point.x, child.position.y = point.y);
+  };
+}
+function start(application, {
+  spriteName
+}) {
+  application.stage.interactive = !0;
+  const cursor = drawCursor(application), cursorListener = moveCursorListener(application);
+  application.stage.on("pointermove", cursorListener);
+  const blurListener = drawBlurListener(application, {
+    spriteName
+  });
+  application.stage.on("pointerdown", () => {
+    application.stage.off("pointermove", blurListener), application.stage.on("pointermove", blurListener);
+  });
+  const stopListening = () => {
+    var _a;
+    (_a = application == null ? void 0 : application.stage) == null || _a.off("pointermove", blurListener);
+  };
+  globalThis.addEventListener("pointerup", stopListening), cursor.once("destroyed", () => {
+    globalThis.removeEventListener("pointerup", stopListening);
+  });
+}
+function stop(application) {
+  removeCursor(application), application.stage.off("pointerdown"), application.stage.off("pointermove");
+}
+export {
+  start,
+  stop
+};

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

@@ -1 +1,4 @@
-var BLUR_LAYER_NAME=`BLUR_LAYER`;export{BLUR_LAYER_NAME};
+const BLUR_LAYER_NAME = "BLUR_LAYER";
+export {
+  BLUR_LAYER_NAME
+};