polotno 2.36.2 → 2.36.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/canvas/element.js +1 -1
  2. package/canvas/figure-element.js +1 -1
  3. package/canvas/hotkeys.js +1 -1
  4. package/canvas/html-element.js +1 -1
  5. package/canvas/image-element.d.ts +5 -1
  6. package/canvas/image-element.js +1 -1
  7. package/canvas/page.js +1 -1
  8. package/canvas/text-element.js +1 -1
  9. package/canvas/use-color.d.ts +12 -5
  10. package/canvas/use-color.js +1 -1
  11. package/canvas/use-transformer-snap.js +1 -1
  12. package/canvas/video-element.js +1 -1
  13. package/canvas/workspace-canvas.js +1 -1
  14. package/model/figure-model.d.ts +1 -1
  15. package/model/gif-model.d.ts +1 -1
  16. package/model/group-model.d.ts +7 -7
  17. package/model/image-model.d.ts +1 -1
  18. package/model/line-model.d.ts +1 -1
  19. package/model/shape-model.d.ts +10 -1
  20. package/model/shape-model.js +1 -1
  21. package/model/store.d.ts +3 -3
  22. package/model/svg-model.d.ts +1 -1
  23. package/model/text-model.d.ts +1 -1
  24. package/model/video-model.d.ts +1 -1
  25. package/package.json +1 -1
  26. package/polotno-app.js +1 -1
  27. package/polotno.bundle.d.ts +8 -0
  28. package/polotno.bundle.js +86 -86
  29. package/side-panel/ai-images-panel.d.ts +6 -1
  30. package/side-panel/animations-panel.js +2 -2
  31. package/side-panel/effect-card.js +1 -1
  32. package/side-panel/effects-panel.js +1 -1
  33. package/side-panel/elements-panel.js +10 -10
  34. package/side-panel/images-grid.js +1 -1
  35. package/side-panel/layers-panel.js +1 -1
  36. package/side-panel/select-image.d.ts +2 -2
  37. package/side-panel/select-svg.d.ts +2 -2
  38. package/side-panel/select-video.d.ts +6 -6
  39. package/side-panel/text-panel.js +3 -3
  40. package/side-panel/upload-panel.js +1 -1
  41. package/side-panel/videos-grid.js +3 -3
  42. package/toolbar/animations-picker.d.ts +6 -1
  43. package/toolbar/animations-picker.js +1 -1
  44. package/toolbar/color-picker.js +1 -1
  45. package/toolbar/element-container.d.ts +2 -2
  46. package/toolbar/element-container.js +1 -1
  47. package/toolbar/figure-toolbar.js +1 -1
  48. package/toolbar/filters-picker.d.ts +6 -1
  49. package/toolbar/filters-picker.js +1 -1
  50. package/toolbar/html-toolbar.d.ts +5 -0
  51. package/toolbar/html-toolbar.js +1 -1
  52. package/toolbar/image-toolbar.d.ts +21 -4
  53. package/toolbar/sketch.js +1 -1
  54. package/toolbar/text-toolbar.js +2 -2
  55. package/utils/figure-to-svg.d.ts +12 -1
  56. package/utils/figure-to-svg.js +1 -1
  57. package/utils/html2canvas.d.ts +1 -0
  58. package/utils/use-api.d.ts +1 -1
  59. package/utils/use-api.js +1 -1
  60. package/utils/validate-key.js +1 -1
  61. package/canvas/html-element/quill-paste-smart.d.ts +0 -1
  62. package/canvas/html-element/quill-paste-smart.js +0 -1
package/side-panel/ai-images-panel.d.ts CHANGED
@@ -1,2 +1,7 @@
1
1
  import React from 'react';
2
- export declare const AiImagesPanel: React.FunctionComponent<object>;
2
+ import { StoreType } from '../model/store.js';
3
+ export declare const AiImagesPanel: (({ store }: {
4
+ store: StoreType;
5
+ }) => React.JSX.Element) & {
6
+ displayName: string;
7
+ };
package/side-panel/animations-panel.js CHANGED
@@ -1,8 +1,8 @@
1
- var e=this&&this.__rest||function(e,t){var n={};for(var l in e){Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(n[l]=e[l])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(l=Object.getOwnPropertySymbols(e);i<l.length;i++){t.indexOf(l[i])<0&&Object.prototype.propertyIsEnumerable.call(e,l[i])&&(n[l[i]]=e[l[i]])}}return n};import t from"react";import{Button as n,NumericInput as l,MenuItem as i,Slider as a}from"@blueprintjs/core";import{Select as o}from"@blueprintjs/select";import{Cross as r}from"@blueprintjs/icons";import{observer as m}from"mobx-react-lite";import{t as s}from"../utils/l10n.js";import d from"../utils/styled.js";const c=d("div")`
1
+ var e=this&&this.__rest||function(e,t){var n={};for(var l in e){Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(n[l]=e[l])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(l=Object.getOwnPropertySymbols(e);i<l.length;i++){t.indexOf(l[i])<0&&Object.prototype.propertyIsEnumerable.call(e,l[i])&&(n[l[i]]=e[l[i]])}}return n};import t from"react";import{Button as n,NumericInput as l,MenuItem as i,Slider as a}from"@blueprintjs/core";import{Select as o}from"@blueprintjs/select";import{Cross as r}from"@blueprintjs/icons";import{observer as m}from"mobx-react-lite";import{ArrowRight as s,ArrowLeft as c,ArrowUp as d,ArrowDown as C,ArrowBottomRight as p,ArrowBottomLeft as u,ArrowTopRight as g,ArrowTopLeft as v}from"@blueprintjs/icons";import{t as x}from"../utils/l10n.js";import E from"../utils/styled.js";const f=E("div")`
2
2
  padding: 10px;
3
3
  background-color: rgba(0, 0, 0, 0.05);
4
4
 
5
5
  .bp5-dark & {
6
6
  background-color: rgba(255, 255, 255, 0.05);
7
7
  }
8
- `;export const NumberInput=n=>{var{value:i,onValueChange:a}=n,o=e(n,["value","onValueChange"]);const[r,m]=t.useState(i.toString());return t.useEffect(()=>{m(i.toString())},[i]),t.createElement(l,Object.assign({value:r,onValueChange:(e,t)=>{m(t),Number.isNaN(e)||a(e)}},o))};const C=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("path",{d:"M9.88114 6.74408C9.79978 6.66282 9.73524 6.56631 9.69121 6.46009C9.64718 6.35387 9.62451 6.24001 9.62451 6.12502C9.62451 6.01003 9.64718 5.89617 9.69121 5.78994C9.73524 5.68372 9.79978 5.58722 9.88114 5.50595L13.3811 2.00595C13.4624 1.9246 13.5589 1.86006 13.6651 1.81603C13.7714 1.77199 13.8852 1.74933 14.0002 1.74933C14.1152 1.74933 14.229 1.77199 14.3353 1.81603C14.4415 1.86006 14.538 1.9246 14.6193 2.00595L18.1193 5.50595C18.2834 5.67014 18.3757 5.89282 18.3757 6.12502C18.3757 6.35721 18.2834 6.57989 18.1193 6.74408C17.9551 6.90827 17.7324 7.0005 17.5002 7.0005C17.268 7.0005 17.0453 6.90827 16.8811 6.74408L14.8752 4.73705V10.5C14.8752 10.7321 14.783 10.9546 14.6189 11.1187C14.4548 11.2828 14.2323 11.375 14.0002 11.375C13.7681 11.375 13.5456 11.2828 13.3815 11.1187C13.2174 10.9546 13.1252 10.7321 13.1252 10.5V4.73705L11.1193 6.74408C11.038 6.82543 10.9415 6.88997 10.8353 6.93401C10.729 6.97804 10.6152 7.00071 10.5002 7.00071C10.3852 7.00071 10.2714 6.97804 10.1651 6.93401C10.0589 6.88997 9.9624 6.82543 9.88114 6.74408ZM16.8811 21.256L14.8752 23.263V17.5C14.8752 17.268 14.783 17.0454 14.6189 16.8813C14.4548 16.7172 14.2323 16.625 14.0002 16.625C13.7681 16.625 13.5456 16.7172 13.3815 16.8813C13.2174 17.0454 13.1252 17.268 13.1252 17.5V23.263L11.1193 21.256C10.9551 21.0918 10.7324 20.9995 10.5002 20.9995C10.268 20.9995 10.0453 21.0918 9.88114 21.256C9.71695 21.4201 9.62471 21.6428 9.62471 21.875C9.62471 22.1072 9.71695 22.3299 9.88114 22.4941L13.3811 25.9941C13.4624 26.0754 13.5589 26.14 13.6651 26.184C13.7714 26.228 13.8852 26.2507 14.0002 26.2507C14.1152 26.2507 14.229 26.228 14.3353 26.184C14.4415 26.14 14.538 26.0754 14.6193 25.9941L18.1193 22.4941C18.2834 22.3299 18.3757 22.1072 18.3757 21.875C18.3757 21.6428 18.2834 21.4201 18.1193 21.256C17.9551 21.0918 17.7324 20.9995 17.5002 20.9995C17.268 20.9995 17.0453 21.0918 16.8811 21.256ZM25.9943 13.381L22.4943 9.88095C22.3301 9.71677 22.1074 9.62453 21.8752 9.62453C21.643 9.62453 21.4203 9.71677 21.2561 9.88095C21.092 10.0451 20.9997 10.2678 20.9997 10.5C20.9997 10.7322 21.092 10.9549 21.2561 11.1191L23.2632 13.125H17.5002C17.2681 13.125 17.0456 13.2172 16.8815 13.3813C16.7174 13.5454 16.6252 13.768 16.6252 14C16.6252 14.2321 16.7174 14.4546 16.8815 14.6187C17.0456 14.7828 17.2681 14.875 17.5002 14.875H23.2632L21.2561 16.881C21.092 17.0451 20.9997 17.2678 20.9997 17.5C20.9997 17.7322 21.092 17.9549 21.2561 18.1191C21.4203 18.2833 21.643 18.3755 21.8752 18.3755C22.1074 18.3755 22.3301 18.2833 22.4943 18.1191L25.9943 14.6191C26.0756 14.5378 26.1402 14.4413 26.1842 14.3351C26.2282 14.2289 26.2509 14.115 26.2509 14C26.2509 13.885 26.2282 13.7712 26.1842 13.6649C26.1402 13.5587 26.0756 13.4622 25.9943 13.381ZM4.73723 14.875H10.5002C10.7323 14.875 10.9548 14.7828 11.1189 14.6187C11.283 14.4546 11.3752 14.2321 11.3752 14C11.3752 13.768 11.283 13.5454 11.1189 13.3813C10.9548 13.2172 10.7323 13.125 10.5002 13.125H4.73723L6.74426 11.1191C6.90845 10.9549 7.00069 10.7322 7.00069 10.5C7.00069 10.2678 6.90845 10.0451 6.74426 9.88095C6.58008 9.71677 6.35739 9.62453 6.1252 9.62453C5.89301 9.62453 5.67032 9.71677 5.50614 9.88095L2.00614 13.381C1.92478 13.4622 1.86024 13.5587 1.81621 13.6649C1.77218 13.7712 1.74951 13.885 1.74951 14C1.74951 14.115 1.77218 14.2289 1.81621 14.3351C1.86024 14.4413 1.92478 14.5378 2.00614 14.6191L5.50614 18.1191C5.67032 18.2833 5.89301 18.3755 6.1252 18.3755C6.35739 18.3755 6.58008 18.2833 6.74426 18.1191C6.90845 17.9549 7.00069 17.7322 7.00069 17.5C7.00069 17.2678 6.90845 17.0451 6.74426 16.881L4.73723 14.875Z",fill:"currentColor"})),p=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("circle",{cx:"7",cy:"14",r:"5",fill:"currentColor",fillOpacity:"0.2",stroke:"currentColor",strokeWidth:"2",strokeOpacity:"0.3"}),t.createElement("circle",{cx:"14",cy:"14",r:"5",fill:"currentColor",fillOpacity:"0.5",stroke:"currentColor",strokeWidth:"2",strokeOpacity:"0.6"}),t.createElement("circle",{cx:"21",cy:"14",r:"5",fill:"currentColor",fillOpacity:"0.9",stroke:"currentColor",strokeWidth:"2",strokeOpacity:"1"})),u=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("path",{d:"M15.75 11.375V7C15.75 6.76793 15.8422 6.54537 16.0063 6.38128C16.1704 6.21719 16.3929 6.125 16.625 6.125C16.8571 6.125 17.0796 6.21719 17.2437 6.38128C17.4078 6.54537 17.5 6.76793 17.5 7V9.26297L22.1309 4.63094C22.2951 4.46675 22.5178 4.37451 22.75 4.37451C22.9822 4.37451 23.2049 4.46675 23.3691 4.63094C23.5332 4.79512 23.6255 5.0178 23.6255 5.25C23.6255 5.48219 23.5332 5.70488 23.3691 5.86906L18.737 10.5H21C21.2321 10.5 21.4546 10.5922 21.6187 10.7563C21.7828 10.9204 21.875 11.1429 21.875 11.375C21.875 11.6071 21.7828 11.8296 21.6187 11.9937C21.4546 12.1578 21.2321 12.25 21 12.25H16.625C16.3929 12.25 16.1704 12.1578 16.0063 11.9937C15.8422 11.8296 15.75 11.6071 15.75 11.375ZM11.375 15.75H7C6.76793 15.75 6.54537 15.8422 6.38128 16.0063C6.21719 16.1704 6.125 16.3929 6.125 16.625C6.125 16.8571 6.21719 17.0796 6.38128 17.2437C6.54537 17.4078 6.76793 17.5 7 17.5H9.26297L4.63094 22.1309C4.46675 22.2951 4.37451 22.5178 4.37451 22.75C4.37451 22.9822 4.46675 23.2049 4.63094 23.3691C4.79512 23.5332 5.0178 23.6255 5.25 23.6255C5.48219 23.6255 5.70488 23.5332 5.86906 23.3691L10.5 18.737V21C10.5 21.2321 10.5922 21.4546 10.7563 21.6187C10.9204 21.7828 11.1429 21.875 11.375 21.875C11.6071 21.875 11.8296 21.7828 11.9937 21.6187C12.1578 21.4546 12.25 21.2321 12.25 21V16.625C12.25 16.3929 12.1578 16.1704 11.9937 16.0063C11.8296 15.8422 11.6071 15.75 11.375 15.75ZM18.737 17.5H21C21.2321 17.5 21.4546 17.4078 21.6187 17.2437C21.7828 17.0796 21.875 16.8571 21.875 16.625C21.875 16.3929 21.7828 16.1704 21.6187 16.0063C21.4546 15.8422 21.2321 15.75 21 15.75H16.625C16.3929 15.75 16.1704 15.8422 16.0063 16.0063C15.8422 16.1704 15.75 16.3929 15.75 16.625V21C15.75 21.2321 15.8422 21.4546 16.0063 21.6187C16.1704 21.7828 16.3929 21.875 16.625 21.875C16.8571 21.875 17.0796 21.7828 17.2437 21.6187C17.4078 21.4546 17.5 21.2321 17.5 21V18.737L22.1309 23.3691C22.2122 23.4504 22.3087 23.5148 22.415 23.5588C22.5212 23.6028 22.635 23.6255 22.75 23.6255C22.865 23.6255 22.9788 23.6028 23.085 23.5588C23.1913 23.5148 23.2878 23.4504 23.3691 23.3691C23.4504 23.2878 23.5148 23.1913 23.5588 23.085C23.6028 22.9788 23.6255 22.865 23.6255 22.75C23.6255 22.635 23.6028 22.5212 23.5588 22.415C23.5148 22.3087 23.4504 22.2122 23.3691 22.1309L18.737 17.5ZM11.375 6.125C11.1429 6.125 10.9204 6.21719 10.7563 6.38128C10.5922 6.54537 10.5 6.76793 10.5 7V9.26297L5.86906 4.63094C5.70488 4.46675 5.48219 4.37451 5.25 4.37451C5.0178 4.37451 4.79512 4.46675 4.63094 4.63094C4.46675 4.79512 4.37451 5.0178 4.37451 5.25C4.37451 5.48219 4.46675 5.70488 4.63094 5.86906L9.26297 10.5H7C6.76793 10.5 6.54537 10.5922 6.38128 10.7563C6.21719 10.9204 6.125 11.1429 6.125 11.375C6.125 11.6071 6.21719 11.8296 6.38128 11.9937C6.54537 12.1578 6.76793 12.25 7 12.25H11.375C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375V7C12.25 6.76793 12.1578 6.54537 11.9937 6.38128C11.8296 6.21719 11.6071 6.125 11.375 6.125Z",fill:"currentColor"})),g=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("path",{d:"M9.625 11.375H4.375C4.14294 11.375 3.92038 11.2828 3.75628 11.1187C3.59219 10.9546 3.5 10.7321 3.5 10.5V5.25001C3.5 5.01794 3.59219 4.79538 3.75628 4.63129C3.92038 4.46719 4.14294 4.37501 4.375 4.37501C4.60706 4.37501 4.82962 4.46719 4.99372 4.63129C5.15781 4.79538 5.25 5.01794 5.25 5.25001V8.38797L6.85016 6.78782C8.80164 4.82651 11.452 3.72026 14.2188 3.71219H14.2767C17.0199 3.70513 19.6555 4.77908 21.6125 6.70141C21.7723 6.86488 21.8618 7.0844 21.8618 7.313C21.8618 7.5416 21.7723 7.76112 21.6126 7.92461C21.4528 8.0881 21.2354 8.18257 21.0068 8.18781C20.7783 8.19306 20.5568 8.10865 20.3897 7.95266C18.7584 6.3515 16.5625 5.45684 14.2767 5.46219H14.2275C11.9221 5.46929 9.71368 6.39096 8.08719 8.02485L6.48703 9.62501H9.625C9.85706 9.62501 10.0796 9.71719 10.2437 9.88129C10.4078 10.0454 10.5 10.2679 10.5 10.5C10.5 10.7321 10.4078 10.9546 10.2437 11.1187C10.0796 11.2828 9.85706 11.375 9.625 11.375ZM23.625 16.625H18.375C18.1429 16.625 17.9204 16.7172 17.7563 16.8813C17.5922 17.0454 17.5 17.2679 17.5 17.5C17.5 17.7321 17.5922 17.9546 17.7563 18.1187C17.9204 18.2828 18.1429 18.375 18.375 18.375H21.513L19.9128 19.9752C18.2866 21.6088 16.0786 22.5304 13.7736 22.5378H13.7244C11.4386 22.5432 9.24264 21.6485 7.61141 20.0473C7.52991 19.964 7.43257 19.8977 7.32511 19.8525C7.21764 19.8073 7.10223 19.784 6.98564 19.784C6.86904 19.784 6.75363 19.8073 6.64617 19.8525C6.53872 19.8978 6.44138 19.964 6.35989 20.0474C6.2784 20.1308 6.2144 20.2296 6.17164 20.3381C6.12889 20.4466 6.10824 20.5625 6.11091 20.679C6.11359 20.7956 6.13953 20.9105 6.18721 21.0169C6.2349 21.1232 6.30337 21.219 6.38859 21.2986C8.3456 23.2209 10.9812 24.2949 13.7244 24.2878H13.7812C16.5476 24.2795 19.1975 23.1732 21.1488 21.2122L22.75 19.612V22.75C22.75 22.9821 22.8422 23.2046 23.0063 23.3687C23.1704 23.5328 23.3929 23.625 23.625 23.625C23.8571 23.625 24.0796 23.5328 24.2437 23.3687C24.4078 23.2046 24.5 22.9821 24.5 22.75V17.5C24.5 17.2679 24.4078 17.0454 24.2437 16.8813C24.0796 16.7172 23.8571 16.625 23.625 16.625Z",fill:"currentColor"})),v=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("path",{d:"M24.9374 19.1406C24.8375 19.1976 24.7273 19.2343 24.6132 19.2487C24.499 19.263 24.3831 19.2547 24.2722 19.2243C24.1613 19.1938 24.0574 19.1417 23.9666 19.0711C23.8758 19.0004 23.7999 18.9126 23.7431 18.8125L21.6649 15.1813C20.4568 15.9982 19.124 16.6136 17.7187 17.0034L18.3607 20.8556C18.3797 20.969 18.3761 21.0851 18.3502 21.1971C18.3242 21.3091 18.2765 21.4149 18.2096 21.5085C18.1428 21.602 18.0582 21.6815 17.9606 21.7423C17.8631 21.8031 17.7545 21.8441 17.641 21.863C17.5944 21.8706 17.5472 21.8746 17.4999 21.875C17.2929 21.8747 17.0928 21.801 16.935 21.667C16.7772 21.5331 16.672 21.3475 16.6381 21.1433L16.007 17.3611C14.6761 17.5463 13.326 17.5463 11.9951 17.3611L11.364 21.1433C11.33 21.3479 11.2245 21.5337 11.0663 21.6677C10.908 21.8018 10.7073 21.8752 10.4999 21.875C10.4516 21.8748 10.4033 21.8708 10.3556 21.863C10.2421 21.8441 10.1335 21.8031 10.036 21.7423C9.93842 21.6815 9.8538 21.602 9.78696 21.5085C9.72012 21.4149 9.67238 21.3091 9.64645 21.1971C9.62053 21.0851 9.61694 20.969 9.63588 20.8556L10.2812 17.0034C8.87641 16.6123 7.54441 15.9958 6.33713 15.178L4.26557 18.8125C4.14954 19.0147 3.95794 19.1625 3.73292 19.2234C3.50791 19.2843 3.26791 19.2534 3.06573 19.1374C2.86354 19.0213 2.71573 18.8297 2.65481 18.6047C2.59389 18.3797 2.62485 18.1397 2.74088 17.9375L4.92838 14.1094C4.16002 13.4456 3.45348 12.7134 2.81744 11.9219C2.73812 11.8333 2.67768 11.7295 2.63981 11.6168C2.60194 11.5041 2.58744 11.3849 2.59718 11.2664C2.60693 11.1479 2.64071 11.0327 2.69649 10.9277C2.75226 10.8227 2.82884 10.7301 2.92156 10.6557C3.01428 10.5813 3.1212 10.5266 3.23578 10.4948C3.35036 10.4631 3.4702 10.4551 3.58799 10.4712C3.70578 10.4873 3.81905 10.5273 3.92088 10.5887C4.02271 10.65 4.11096 10.7315 4.18026 10.8281C5.99588 13.0747 9.17213 15.75 13.9999 15.75C18.8278 15.75 22.004 13.0714 23.8196 10.8281C23.8881 10.7295 23.9762 10.6461 24.0783 10.583C24.1805 10.5199 24.2945 10.4785 24.4133 10.4614C24.5321 10.4442 24.6532 10.4517 24.769 10.4834C24.8848 10.5151 24.9928 10.5702 25.0864 10.6454C25.18 10.7207 25.2571 10.8143 25.3129 10.9206C25.3687 11.0269 25.402 11.1435 25.4108 11.2633C25.4196 11.383 25.4037 11.5032 25.364 11.6166C25.3244 11.7299 25.2618 11.8338 25.1803 11.9219C24.5442 12.7134 23.8377 13.4456 23.0693 14.1094L25.2568 17.9375C25.3155 18.0373 25.3539 18.1477 25.3696 18.2625C25.3853 18.3772 25.3781 18.4939 25.3484 18.6058C25.3187 18.7177 25.2671 18.8226 25.1965 18.9144C25.126 19.0062 25.0379 19.0831 24.9374 19.1406Z",fill:"currentColor"})),x=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("path",{d:"M14 3.5C18.6944 3.5 22.5 7.30558 22.5 12C22.5 16.6944 18.6944 20.5 14 20.5C9.30558 20.5 5.5 16.6944 5.5 12C5.5 7.30558 9.30558 3.5 14 3.5ZM14 5.25C10.2721 5.25 7.25 8.27208 7.25 12C7.25 15.7279 10.2721 18.75 14 18.75C17.7279 18.75 20.75 15.7279 20.75 12C20.75 8.27208 17.7279 5.25 14 5.25ZM14 7C16.7614 7 19 9.23858 19 12C19 14.7614 16.7614 17 14 17C11.2386 17 9 14.7614 9 12C9 9.23858 11.2386 7 14 7ZM14 8.75C12.2051 8.75 10.75 10.2051 10.75 12C10.75 13.7949 12.2051 15.25 14 15.25C15.7949 15.25 17.25 13.7949 17.25 12C17.25 10.2051 15.7949 8.75 14 8.75ZM14 10.5C14.8284 10.5 15.5 11.1716 15.5 12C15.5 12.8284 14.8284 13.5 14 13.5C13.1716 13.5 12.5 12.8284 12.5 12C12.5 11.1716 13.1716 10.5 14 10.5Z",fill:"currentColor"})),y=m(({element:e,store:l,enabled:i})=>{const a=e.animations.find(e=>"enter"===e.type),o=e.animations.find(e=>"exit"===e.type);return i?t.createElement("div",null,t.createElement("div",{style:{padding:"10px 0px"}},"Animate"),t.createElement("div",{style:{display:"flex",gap:10}},t.createElement(n,{fill:!0,active:(null==a?void 0:a.enabled)&&!(null==o?void 0:o.enabled),onClick:()=>{l.history.transaction(()=>{e.setAnimation("enter",{enabled:!0}),e.setAnimation("exit",{enabled:!1})})}},"Enter"),t.createElement(n,{fill:!0,active:(null==a?void 0:a.enabled)&&(null==o?void 0:o.enabled),onClick:()=>{l.history.transaction(()=>{e.setAnimation("enter",{enabled:!0}),e.setAnimation("exit",{enabled:!0})})}},"Both"),t.createElement(n,{fill:!0,active:(null==o?void 0:o.enabled)&&!(null==a?void 0:a.enabled),onClick:()=>{l.history.transaction(()=>{e.setAnimation("enter",{enabled:!1}),e.setAnimation("exit",{enabled:!0})})}},"Exit"))):null}),f=(e,{handleClick:n,handleFocus:l,modifiers:a,query:o})=>a.matchesPredicate?t.createElement(i,{active:a.active,disabled:a.disabled,key:e,onClick:n,icon:"arrow-"+e,onFocus:l,roleStructure:"listoption",text:e,shouldDismissPopover:!1}):null,E=["right","left","up","down","bottom-right","bottom-left","top-right","top-left"],b=m(({value:e,onChange:l})=>t.createElement("div",{style:{paddingTop:"10px"}},t.createElement("div",{style:{paddingBottom:"10px"}},"Direction"),t.createElement(o,{items:E,itemRenderer:f,filterable:!1,activeItem:e,onItemSelect:e=>{l(e)}},t.createElement(n,{text:e,icon:"arrow-"+e,fill:!0})))),h=m(({value:e,onChange:l})=>t.createElement("div",{style:{paddingTop:"10px"}},t.createElement("div",{style:{paddingBottom:"10px"}},"Direction"),t.createElement(o,{items:["in","out"],itemRenderer:(e,{handleClick:n,handleFocus:l,modifiers:a,query:o})=>a.matchesPredicate?t.createElement(i,{active:a.active,disabled:a.disabled,key:e,onClick:n,onFocus:l,roleStructure:"listoption",text:"out"===e?"Zoom Out":"Zoom In",shouldDismissPopover:!1}):null,filterable:!1,activeItem:e,onItemSelect:e=>{l(e)}},t.createElement(n,{text:"out"===e?"Zoom Out":"Zoom In",fill:!0})))),w=m(({element:e,store:n})=>{const l=e.animations.find(e=>"enter"===e.type);if(!l){return null}const i=e.page.duration;return t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"Delay"),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat((l.delay/1e3).toFixed(2)),onValueChange:t=>{e.setAnimation("enter",{delay:1e3*t})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:0,max:i/1e3,buttonPosition:"none"}))),t.createElement(a,{min:0,max:i,value:l.delay,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("enter",{delay:t})}}))}),k=m(({element:e,store:n})=>{const l=e.animations.find(e=>"loop"===e.type&&e.enabled);if(!l){return null}const i=500/l.duration;return t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"Speed"),t.createElement("div",null,t.createElement(NumberInput,{value:i,onValueChange:t=>{const n=Math.min(Math.max(.1,t),3);e.setAnimation("loop",{duration:500/n})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:.1,max:3,buttonPosition:"none"}))),t.createElement(a,{min:.1,max:3,stepSize:.01,value:i,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("loop",{duration:500/t})},onRelease:()=>{const t=n.activePage;n.play({animatedElementsIds:[e.id],currentTime:e.page.startTime}),setTimeout(()=>{n.stop(),n.selectPage(null==t?void 0:t.id)},1e3)}}))}),L=m(({element:e,store:n})=>{const l=e.animations.find(e=>"enter"===e.type);if(!l){return null}const i=e.page.duration;return t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"Duration"),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat((l.duration/1e3).toFixed(2)),onValueChange:t=>{e.setAnimation("enter",{duration:1e3*t}),e.setAnimation("exit",{duration:1e3*t})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:0,max:i/1e3,buttonPosition:"none"}))),t.createElement(a,{min:0,max:i,value:l.duration,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("enter",{duration:t}),e.setAnimation("exit",{duration:t})}}))}),T=m(({element:e,store:n,animationName:l})=>{var i,o;const r=e.animations.find(e=>e.name===l&&e.enabled);if(!r){return null}const m=null!==(o=null===(i=r.data)||void 0===i?void 0:i.strength)&&void 0!==o?o:1;let d=2;"bounce"===l||"zoom"===l?d=2:"move"===l&&(d=3);const c=t=>{n.history.transaction(()=>{e.animations.forEach(n=>{if(n.name===l){const l=n.data||{};e.setAnimation(n.type,{data:Object.assign(Object.assign({},l),{strength:t})})}})});const i=n.activePage;(()=>{let t;return(...l)=>{t&&clearTimeout(t),t=setTimeout(()=>{(()=>{n.isPlaying||(n.play({animatedElementsIds:[e.id],currentTime:e.page.startTime}),setTimeout(()=>{n.stop(),i&&n.selectPage(i.id)},1e3))})(...l)},300)}})()()},C=Math.max(3,m);return t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,s("toolbar.strength")),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat(m.toFixed(2)),onValueChange:e=>{c(Math.max(.1,e))},style:{width:"50px"},minorStepSize:.05,stepSize:.1,min:.1,buttonPosition:"none"}))),t.createElement(a,{min:.1,max:C,stepSize:.05,value:m,showTrackFill:!1,labelRenderer:!1,onChange:e=>{c(e)}}))}),S=m(({element:e,store:n})=>{const l=e.animations.find(e=>"exit"===e.type);if(!l){return null}const i=e.page.duration;return t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"End Delay"),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat((l.delay/1e3).toFixed(2)),onValueChange:t=>{e.setAnimation("exit",{delay:1e3*t})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:0,max:i/1e3,buttonPosition:"none"}))),t.createElement(a,{min:0,max:i,value:l.delay,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("exit",{delay:t})}}))});export const AnimationsPanel=m(({store:e})=>{var l,i,a,o;const m=e.selectedElements,d=m[0],f=d,E=()=>e.selectedElements.map(e=>e.id).join(","),I=t.useMemo(E,[]),P=E();if(t.useEffect(()=>{I!==P&&e.openSidePanel(e.previousOpenedSidePanel)},[I,P]),!d||!d.animations){return null}const O=(t,n)=>{if(e.history.transaction(()=>{m.forEach(e=>{e.setAnimation("enter",Object.assign({name:t},n)),e.setAnimation("exit",Object.assign(Object.assign({name:t},n),{from:n.to,to:n.from}))})}),n.enabled){const t=e.activePage;e.play({animatedElementsIds:m.map(e=>e.id),currentTime:d.page.startTime}),setTimeout(()=>{e.stop(),e.selectPage(null==t?void 0:t.id)},1e3)}},A=(t,n)=>{if(e.history.transaction(()=>{m.forEach(e=>{e.setAnimation("loop",Object.assign({name:t},n))})}),n.enabled){const t=e.activePage;e.play({animatedElementsIds:m.map(e=>e.id),currentTime:d.page.startTime}),setTimeout(()=>{e.stop(),e.selectPage(null==t?void 0:t.id)},1e3)}},V=e=>{var t;return!!((e?null===(t=d.animations)||void 0===t?void 0:t.filter(t=>t.name===e||t.type===e):d.animations)||[]).find(e=>e.enabled)},j=V("move")||V("fade")||V("zoom"),z=V("rotate")||V("blink")||V("bounce");return t.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"}},t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingBottom:"10px"}},t.createElement("h3",{style:{margin:0,lineHeight:"30px"}},s("sidePanel.animate")),t.createElement(n,{minimal:!0,icon:t.createElement(r,null),onClick:()=>e.openSidePanel(e.previousOpenedSidePanel)})),t.createElement("div",{style:{paddingTop:"10px",lineHeight:"35px"}},"Animations"," ",t.createElement(n,{outlined:!0,style:{marginLeft:"10px",display:j?"inline-flex":"none"},onClick:()=>{f.set({animations:[]})}},"Remove All")),t.createElement("div",{style:{paddingTop:"25px"}},t.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(100px, 1fr))",gap:"5px",paddingBottom:"10px"}},t.createElement("div",null,t.createElement(n,{outlined:!0,large:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},icon:t.createElement(C,null),active:V("move"),fill:!0,onClick:()=>{O("move",{enabled:!V("move")})}},s("toolbar.move"))),t.createElement("div",null,t.createElement(n,{outlined:!0,large:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},icon:t.createElement(p,null),fill:!0,active:V("fade"),onClick:()=>{O("fade",{enabled:!V("fade")})}},s("toolbar.fade"))),t.createElement("div",null,t.createElement(n,{outlined:!0,large:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},icon:t.createElement(u,null),fill:!0,active:V("zoom"),onClick:()=>{O("zoom",{enabled:!V("zoom")})}},s("toolbar.zoom")))),t.createElement(c,{style:{display:j?"block":"none"}},t.createElement(y,{element:d,store:e,name:"move",enabled:V("enter")||V("exit")}),V("move")&&t.createElement(b,{value:(null===(i=null===(l=d.animations.find(e=>"move"===e.name))||void 0===l?void 0:l.data)||void 0===i?void 0:i.direction)||"right",onChange:e=>{O("move",{data:{direction:e},enabled:!0})}}),V("move")&&t.createElement(T,{store:e,element:f,animationName:"move"}),V("zoom")&&t.createElement(h,{value:(null===(o=null===(a=d.animations.find(e=>"zoom"===e.name))||void 0===a?void 0:a.data)||void 0===o?void 0:o.direction)||"in",onChange:e=>{O("zoom",{data:{direction:e},enabled:!0})}}),V("zoom")&&t.createElement(T,{store:e,element:f,animationName:"zoom"}),V("enter")&&t.createElement(w,{store:e,element:f}),V("enter")&&t.createElement(L,{store:e,element:f}),V("exit")&&t.createElement(S,{store:e,element:f})),t.createElement("div",{style:{paddingTop:"10px",lineHeight:"35px"}},"Effects"," ",t.createElement(n,{outlined:!0,style:{marginLeft:"10px",display:z?"inline-flex":"none"},onClick:()=>{f.set({animations:[]})}},"Remove All")),t.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(100px, 1fr))",gap:"5px",paddingTop:"10px"}},t.createElement("div",null,t.createElement(n,{minimal:!0,outlined:!0,large:!0,fill:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},icon:t.createElement(g,null),active:V("rotate"),onClick:()=>{A("rotate",{enabled:!V("rotate")})}},s("toolbar.rotate"))),t.createElement("div",null,t.createElement(n,{outlined:!0,large:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},fill:!0,icon:t.createElement(v,null),active:V("blink"),onClick:()=>{A("blink",{enabled:!V("blink")})}},s("toolbar.blink"))),t.createElement("div",null,t.createElement(n,{minimal:!0,outlined:!0,large:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},icon:t.createElement(x,null),fill:!0,active:V("bounce"),onClick:()=>{A("bounce",{enabled:!V("bounce")})}},s("toolbar.bounce")))),z&&t.createElement(k,{store:e,element:f}),V("bounce")&&t.createElement(T,{store:e,element:f,animationName:"bounce"})))});
8
+ `;export const NumberInput=n=>{var{value:i,onValueChange:a}=n,o=e(n,["value","onValueChange"]);const[r,m]=t.useState(i.toString());return t.useEffect(()=>{m(i.toString())},[i]),t.createElement(l,Object.assign({value:r,onValueChange:(e,t)=>{m(t),Number.isNaN(e)||a(e)}},o))};const y=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("path",{d:"M9.88114 6.74408C9.79978 6.66282 9.73524 6.56631 9.69121 6.46009C9.64718 6.35387 9.62451 6.24001 9.62451 6.12502C9.62451 6.01003 9.64718 5.89617 9.69121 5.78994C9.73524 5.68372 9.79978 5.58722 9.88114 5.50595L13.3811 2.00595C13.4624 1.9246 13.5589 1.86006 13.6651 1.81603C13.7714 1.77199 13.8852 1.74933 14.0002 1.74933C14.1152 1.74933 14.229 1.77199 14.3353 1.81603C14.4415 1.86006 14.538 1.9246 14.6193 2.00595L18.1193 5.50595C18.2834 5.67014 18.3757 5.89282 18.3757 6.12502C18.3757 6.35721 18.2834 6.57989 18.1193 6.74408C17.9551 6.90827 17.7324 7.0005 17.5002 7.0005C17.268 7.0005 17.0453 6.90827 16.8811 6.74408L14.8752 4.73705V10.5C14.8752 10.7321 14.783 10.9546 14.6189 11.1187C14.4548 11.2828 14.2323 11.375 14.0002 11.375C13.7681 11.375 13.5456 11.2828 13.3815 11.1187C13.2174 10.9546 13.1252 10.7321 13.1252 10.5V4.73705L11.1193 6.74408C11.038 6.82543 10.9415 6.88997 10.8353 6.93401C10.729 6.97804 10.6152 7.00071 10.5002 7.00071C10.3852 7.00071 10.2714 6.97804 10.1651 6.93401C10.0589 6.88997 9.9624 6.82543 9.88114 6.74408ZM16.8811 21.256L14.8752 23.263V17.5C14.8752 17.268 14.783 17.0454 14.6189 16.8813C14.4548 16.7172 14.2323 16.625 14.0002 16.625C13.7681 16.625 13.5456 16.7172 13.3815 16.8813C13.2174 17.0454 13.1252 17.268 13.1252 17.5V23.263L11.1193 21.256C10.9551 21.0918 10.7324 20.9995 10.5002 20.9995C10.268 20.9995 10.0453 21.0918 9.88114 21.256C9.71695 21.4201 9.62471 21.6428 9.62471 21.875C9.62471 22.1072 9.71695 22.3299 9.88114 22.4941L13.3811 25.9941C13.4624 26.0754 13.5589 26.14 13.6651 26.184C13.7714 26.228 13.8852 26.2507 14.0002 26.2507C14.1152 26.2507 14.229 26.228 14.3353 26.184C14.4415 26.14 14.538 26.0754 14.6193 25.9941L18.1193 22.4941C18.2834 22.3299 18.3757 22.1072 18.3757 21.875C18.3757 21.6428 18.2834 21.4201 18.1193 21.256C17.9551 21.0918 17.7324 20.9995 17.5002 20.9995C17.268 20.9995 17.0453 21.0918 16.8811 21.256ZM25.9943 13.381L22.4943 9.88095C22.3301 9.71677 22.1074 9.62453 21.8752 9.62453C21.643 9.62453 21.4203 9.71677 21.2561 9.88095C21.092 10.0451 20.9997 10.2678 20.9997 10.5C20.9997 10.7322 21.092 10.9549 21.2561 11.1191L23.2632 13.125H17.5002C17.2681 13.125 17.0456 13.2172 16.8815 13.3813C16.7174 13.5454 16.6252 13.768 16.6252 14C16.6252 14.2321 16.7174 14.4546 16.8815 14.6187C17.0456 14.7828 17.2681 14.875 17.5002 14.875H23.2632L21.2561 16.881C21.092 17.0451 20.9997 17.2678 20.9997 17.5C20.9997 17.7322 21.092 17.9549 21.2561 18.1191C21.4203 18.2833 21.643 18.3755 21.8752 18.3755C22.1074 18.3755 22.3301 18.2833 22.4943 18.1191L25.9943 14.6191C26.0756 14.5378 26.1402 14.4413 26.1842 14.3351C26.2282 14.2289 26.2509 14.115 26.2509 14C26.2509 13.885 26.2282 13.7712 26.1842 13.6649C26.1402 13.5587 26.0756 13.4622 25.9943 13.381ZM4.73723 14.875H10.5002C10.7323 14.875 10.9548 14.7828 11.1189 14.6187C11.283 14.4546 11.3752 14.2321 11.3752 14C11.3752 13.768 11.283 13.5454 11.1189 13.3813C10.9548 13.2172 10.7323 13.125 10.5002 13.125H4.73723L6.74426 11.1191C6.90845 10.9549 7.00069 10.7322 7.00069 10.5C7.00069 10.2678 6.90845 10.0451 6.74426 9.88095C6.58008 9.71677 6.35739 9.62453 6.1252 9.62453C5.89301 9.62453 5.67032 9.71677 5.50614 9.88095L2.00614 13.381C1.92478 13.4622 1.86024 13.5587 1.81621 13.6649C1.77218 13.7712 1.74951 13.885 1.74951 14C1.74951 14.115 1.77218 14.2289 1.81621 14.3351C1.86024 14.4413 1.92478 14.5378 2.00614 14.6191L5.50614 18.1191C5.67032 18.2833 5.89301 18.3755 6.1252 18.3755C6.35739 18.3755 6.58008 18.2833 6.74426 18.1191C6.90845 17.9549 7.00069 17.7322 7.00069 17.5C7.00069 17.2678 6.90845 17.0451 6.74426 16.881L4.73723 14.875Z",fill:"currentColor"})),b=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("circle",{cx:"7",cy:"14",r:"5",fill:"currentColor",fillOpacity:"0.2",stroke:"currentColor",strokeWidth:"2",strokeOpacity:"0.3"}),t.createElement("circle",{cx:"14",cy:"14",r:"5",fill:"currentColor",fillOpacity:"0.5",stroke:"currentColor",strokeWidth:"2",strokeOpacity:"0.6"}),t.createElement("circle",{cx:"21",cy:"14",r:"5",fill:"currentColor",fillOpacity:"0.9",stroke:"currentColor",strokeWidth:"2",strokeOpacity:"1"})),h=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("path",{d:"M15.75 11.375V7C15.75 6.76793 15.8422 6.54537 16.0063 6.38128C16.1704 6.21719 16.3929 6.125 16.625 6.125C16.8571 6.125 17.0796 6.21719 17.2437 6.38128C17.4078 6.54537 17.5 6.76793 17.5 7V9.26297L22.1309 4.63094C22.2951 4.46675 22.5178 4.37451 22.75 4.37451C22.9822 4.37451 23.2049 4.46675 23.3691 4.63094C23.5332 4.79512 23.6255 5.0178 23.6255 5.25C23.6255 5.48219 23.5332 5.70488 23.3691 5.86906L18.737 10.5H21C21.2321 10.5 21.4546 10.5922 21.6187 10.7563C21.7828 10.9204 21.875 11.1429 21.875 11.375C21.875 11.6071 21.7828 11.8296 21.6187 11.9937C21.4546 12.1578 21.2321 12.25 21 12.25H16.625C16.3929 12.25 16.1704 12.1578 16.0063 11.9937C15.8422 11.8296 15.75 11.6071 15.75 11.375ZM11.375 15.75H7C6.76793 15.75 6.54537 15.8422 6.38128 16.0063C6.21719 16.1704 6.125 16.3929 6.125 16.625C6.125 16.8571 6.21719 17.0796 6.38128 17.2437C6.54537 17.4078 6.76793 17.5 7 17.5H9.26297L4.63094 22.1309C4.46675 22.2951 4.37451 22.5178 4.37451 22.75C4.37451 22.9822 4.46675 23.2049 4.63094 23.3691C4.79512 23.5332 5.0178 23.6255 5.25 23.6255C5.48219 23.6255 5.70488 23.5332 5.86906 23.3691L10.5 18.737V21C10.5 21.2321 10.5922 21.4546 10.7563 21.6187C10.9204 21.7828 11.1429 21.875 11.375 21.875C11.6071 21.875 11.8296 21.7828 11.9937 21.6187C12.1578 21.4546 12.25 21.2321 12.25 21V16.625C12.25 16.3929 12.1578 16.1704 11.9937 16.0063C11.8296 15.8422 11.6071 15.75 11.375 15.75ZM18.737 17.5H21C21.2321 17.5 21.4546 17.4078 21.6187 17.2437C21.7828 17.0796 21.875 16.8571 21.875 16.625C21.875 16.3929 21.7828 16.1704 21.6187 16.0063C21.4546 15.8422 21.2321 15.75 21 15.75H16.625C16.3929 15.75 16.1704 15.8422 16.0063 16.0063C15.8422 16.1704 15.75 16.3929 15.75 16.625V21C15.75 21.2321 15.8422 21.4546 16.0063 21.6187C16.1704 21.7828 16.3929 21.875 16.625 21.875C16.8571 21.875 17.0796 21.7828 17.2437 21.6187C17.4078 21.4546 17.5 21.2321 17.5 21V18.737L22.1309 23.3691C22.2122 23.4504 22.3087 23.5148 22.415 23.5588C22.5212 23.6028 22.635 23.6255 22.75 23.6255C22.865 23.6255 22.9788 23.6028 23.085 23.5588C23.1913 23.5148 23.2878 23.4504 23.3691 23.3691C23.4504 23.2878 23.5148 23.1913 23.5588 23.085C23.6028 22.9788 23.6255 22.865 23.6255 22.75C23.6255 22.635 23.6028 22.5212 23.5588 22.415C23.5148 22.3087 23.4504 22.2122 23.3691 22.1309L18.737 17.5ZM11.375 6.125C11.1429 6.125 10.9204 6.21719 10.7563 6.38128C10.5922 6.54537 10.5 6.76793 10.5 7V9.26297L5.86906 4.63094C5.70488 4.46675 5.48219 4.37451 5.25 4.37451C5.0178 4.37451 4.79512 4.46675 4.63094 4.63094C4.46675 4.79512 4.37451 5.0178 4.37451 5.25C4.37451 5.48219 4.46675 5.70488 4.63094 5.86906L9.26297 10.5H7C6.76793 10.5 6.54537 10.5922 6.38128 10.7563C6.21719 10.9204 6.125 11.1429 6.125 11.375C6.125 11.6071 6.21719 11.8296 6.38128 11.9937C6.54537 12.1578 6.76793 12.25 7 12.25H11.375C11.6071 12.25 11.8296 12.1578 11.9937 11.9937C12.1578 11.8296 12.25 11.6071 12.25 11.375V7C12.25 6.76793 12.1578 6.54537 11.9937 6.38128C11.8296 6.21719 11.6071 6.125 11.375 6.125Z",fill:"currentColor"})),w=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("path",{d:"M9.625 11.375H4.375C4.14294 11.375 3.92038 11.2828 3.75628 11.1187C3.59219 10.9546 3.5 10.7321 3.5 10.5V5.25001C3.5 5.01794 3.59219 4.79538 3.75628 4.63129C3.92038 4.46719 4.14294 4.37501 4.375 4.37501C4.60706 4.37501 4.82962 4.46719 4.99372 4.63129C5.15781 4.79538 5.25 5.01794 5.25 5.25001V8.38797L6.85016 6.78782C8.80164 4.82651 11.452 3.72026 14.2188 3.71219H14.2767C17.0199 3.70513 19.6555 4.77908 21.6125 6.70141C21.7723 6.86488 21.8618 7.0844 21.8618 7.313C21.8618 7.5416 21.7723 7.76112 21.6126 7.92461C21.4528 8.0881 21.2354 8.18257 21.0068 8.18781C20.7783 8.19306 20.5568 8.10865 20.3897 7.95266C18.7584 6.3515 16.5625 5.45684 14.2767 5.46219H14.2275C11.9221 5.46929 9.71368 6.39096 8.08719 8.02485L6.48703 9.62501H9.625C9.85706 9.62501 10.0796 9.71719 10.2437 9.88129C10.4078 10.0454 10.5 10.2679 10.5 10.5C10.5 10.7321 10.4078 10.9546 10.2437 11.1187C10.0796 11.2828 9.85706 11.375 9.625 11.375ZM23.625 16.625H18.375C18.1429 16.625 17.9204 16.7172 17.7563 16.8813C17.5922 17.0454 17.5 17.2679 17.5 17.5C17.5 17.7321 17.5922 17.9546 17.7563 18.1187C17.9204 18.2828 18.1429 18.375 18.375 18.375H21.513L19.9128 19.9752C18.2866 21.6088 16.0786 22.5304 13.7736 22.5378H13.7244C11.4386 22.5432 9.24264 21.6485 7.61141 20.0473C7.52991 19.964 7.43257 19.8977 7.32511 19.8525C7.21764 19.8073 7.10223 19.784 6.98564 19.784C6.86904 19.784 6.75363 19.8073 6.64617 19.8525C6.53872 19.8978 6.44138 19.964 6.35989 20.0474C6.2784 20.1308 6.2144 20.2296 6.17164 20.3381C6.12889 20.4466 6.10824 20.5625 6.11091 20.679C6.11359 20.7956 6.13953 20.9105 6.18721 21.0169C6.2349 21.1232 6.30337 21.219 6.38859 21.2986C8.3456 23.2209 10.9812 24.2949 13.7244 24.2878H13.7812C16.5476 24.2795 19.1975 23.1732 21.1488 21.2122L22.75 19.612V22.75C22.75 22.9821 22.8422 23.2046 23.0063 23.3687C23.1704 23.5328 23.3929 23.625 23.625 23.625C23.8571 23.625 24.0796 23.5328 24.2437 23.3687C24.4078 23.2046 24.5 22.9821 24.5 22.75V17.5C24.5 17.2679 24.4078 17.0454 24.2437 16.8813C24.0796 16.7172 23.8571 16.625 23.625 16.625Z",fill:"currentColor"})),k=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("path",{d:"M24.9374 19.1406C24.8375 19.1976 24.7273 19.2343 24.6132 19.2487C24.499 19.263 24.3831 19.2547 24.2722 19.2243C24.1613 19.1938 24.0574 19.1417 23.9666 19.0711C23.8758 19.0004 23.7999 18.9126 23.7431 18.8125L21.6649 15.1813C20.4568 15.9982 19.124 16.6136 17.7187 17.0034L18.3607 20.8556C18.3797 20.969 18.3761 21.0851 18.3502 21.1971C18.3242 21.3091 18.2765 21.4149 18.2096 21.5085C18.1428 21.602 18.0582 21.6815 17.9606 21.7423C17.8631 21.8031 17.7545 21.8441 17.641 21.863C17.5944 21.8706 17.5472 21.8746 17.4999 21.875C17.2929 21.8747 17.0928 21.801 16.935 21.667C16.7772 21.5331 16.672 21.3475 16.6381 21.1433L16.007 17.3611C14.6761 17.5463 13.326 17.5463 11.9951 17.3611L11.364 21.1433C11.33 21.3479 11.2245 21.5337 11.0663 21.6677C10.908 21.8018 10.7073 21.8752 10.4999 21.875C10.4516 21.8748 10.4033 21.8708 10.3556 21.863C10.2421 21.8441 10.1335 21.8031 10.036 21.7423C9.93842 21.6815 9.8538 21.602 9.78696 21.5085C9.72012 21.4149 9.67238 21.3091 9.64645 21.1971C9.62053 21.0851 9.61694 20.969 9.63588 20.8556L10.2812 17.0034C8.87641 16.6123 7.54441 15.9958 6.33713 15.178L4.26557 18.8125C4.14954 19.0147 3.95794 19.1625 3.73292 19.2234C3.50791 19.2843 3.26791 19.2534 3.06573 19.1374C2.86354 19.0213 2.71573 18.8297 2.65481 18.6047C2.59389 18.3797 2.62485 18.1397 2.74088 17.9375L4.92838 14.1094C4.16002 13.4456 3.45348 12.7134 2.81744 11.9219C2.73812 11.8333 2.67768 11.7295 2.63981 11.6168C2.60194 11.5041 2.58744 11.3849 2.59718 11.2664C2.60693 11.1479 2.64071 11.0327 2.69649 10.9277C2.75226 10.8227 2.82884 10.7301 2.92156 10.6557C3.01428 10.5813 3.1212 10.5266 3.23578 10.4948C3.35036 10.4631 3.4702 10.4551 3.58799 10.4712C3.70578 10.4873 3.81905 10.5273 3.92088 10.5887C4.02271 10.65 4.11096 10.7315 4.18026 10.8281C5.99588 13.0747 9.17213 15.75 13.9999 15.75C18.8278 15.75 22.004 13.0714 23.8196 10.8281C23.8881 10.7295 23.9762 10.6461 24.0783 10.583C24.1805 10.5199 24.2945 10.4785 24.4133 10.4614C24.5321 10.4442 24.6532 10.4517 24.769 10.4834C24.8848 10.5151 24.9928 10.5702 25.0864 10.6454C25.18 10.7207 25.2571 10.8143 25.3129 10.9206C25.3687 11.0269 25.402 11.1435 25.4108 11.2633C25.4196 11.383 25.4037 11.5032 25.364 11.6166C25.3244 11.7299 25.2618 11.8338 25.1803 11.9219C24.5442 12.7134 23.8377 13.4456 23.0693 14.1094L25.2568 17.9375C25.3155 18.0373 25.3539 18.1477 25.3696 18.2625C25.3853 18.3772 25.3781 18.4939 25.3484 18.6058C25.3187 18.7177 25.2671 18.8226 25.1965 18.9144C25.126 19.0062 25.0379 19.0831 24.9374 19.1406Z",fill:"currentColor"})),L=()=>t.createElement("svg",{width:"28",height:"28",viewBox:"0 0 28 28",xmlns:"http://www.w3.org/2000/svg",style:{margin:0}},t.createElement("path",{d:"M14 3.5C18.6944 3.5 22.5 7.30558 22.5 12C22.5 16.6944 18.6944 20.5 14 20.5C9.30558 20.5 5.5 16.6944 5.5 12C5.5 7.30558 9.30558 3.5 14 3.5ZM14 5.25C10.2721 5.25 7.25 8.27208 7.25 12C7.25 15.7279 10.2721 18.75 14 18.75C17.7279 18.75 20.75 15.7279 20.75 12C20.75 8.27208 17.7279 5.25 14 5.25ZM14 7C16.7614 7 19 9.23858 19 12C19 14.7614 16.7614 17 14 17C11.2386 17 9 14.7614 9 12C9 9.23858 11.2386 7 14 7ZM14 8.75C12.2051 8.75 10.75 10.2051 10.75 12C10.75 13.7949 12.2051 15.25 14 15.25C15.7949 15.25 17.25 13.7949 17.25 12C17.25 10.2051 15.7949 8.75 14 8.75ZM14 10.5C14.8284 10.5 15.5 11.1716 15.5 12C15.5 12.8284 14.8284 13.5 14 13.5C13.1716 13.5 12.5 12.8284 12.5 12C12.5 11.1716 13.1716 10.5 14 10.5Z",fill:"currentColor"})),T=m(({element:e,store:l,enabled:i})=>{const a=e.animations.find(e=>"enter"===e.type),o=e.animations.find(e=>"exit"===e.type);return i?t.createElement("div",null,t.createElement("div",{style:{padding:"10px 0px"}},"Animate"),t.createElement("div",{style:{display:"flex",gap:10}},t.createElement(n,{fill:!0,active:(null==a?void 0:a.enabled)&&!(null==o?void 0:o.enabled),onClick:()=>{l.history.transaction(()=>{e.setAnimation("enter",{enabled:!0}),e.setAnimation("exit",{enabled:!1})})}},"Enter"),t.createElement(n,{fill:!0,active:(null==a?void 0:a.enabled)&&(null==o?void 0:o.enabled),onClick:()=>{l.history.transaction(()=>{e.setAnimation("enter",{enabled:!0}),e.setAnimation("exit",{enabled:!0})})}},"Both"),t.createElement(n,{fill:!0,active:(null==o?void 0:o.enabled)&&!(null==a?void 0:a.enabled),onClick:()=>{l.history.transaction(()=>{e.setAnimation("enter",{enabled:!1}),e.setAnimation("exit",{enabled:!0})})}},"Exit"))):null}),S=(e,{handleClick:n,handleFocus:l,modifiers:a})=>a.matchesPredicate?t.createElement(i,{active:a.active,disabled:a.disabled,key:e,onClick:n,icon:P[e],onFocus:l,roleStructure:"listoption",text:e,shouldDismissPopover:!1}):null,I=["right","left","up","down","bottom-right","bottom-left","top-right","top-left"],P={right:t.createElement(s,null),left:t.createElement(c,null),up:t.createElement(d,null),down:t.createElement(C,null),"bottom-right":t.createElement(p,null),"bottom-left":t.createElement(u,null),"top-right":t.createElement(g,null),"top-left":t.createElement(v,null)},O=m(({value:e,onChange:l})=>t.createElement("div",{style:{paddingTop:"10px"}},t.createElement("div",{style:{paddingBottom:"10px"}},"Direction"),t.createElement(o,{items:I,itemRenderer:S,filterable:!1,activeItem:e,onItemSelect:e=>{l(e)}},t.createElement(n,{text:e,icon:P[e],fill:!0})))),A=m(({value:e,onChange:l})=>t.createElement("div",{style:{paddingTop:"10px"}},t.createElement("div",{style:{paddingBottom:"10px"}},"Direction"),t.createElement(o,{items:["in","out"],itemRenderer:(e,{handleClick:n,handleFocus:l,modifiers:a,query:o})=>a.matchesPredicate?t.createElement(i,{active:a.active,disabled:a.disabled,key:e,onClick:n,onFocus:l,roleStructure:"listoption",text:"out"===e?"Zoom Out":"Zoom In",shouldDismissPopover:!1}):null,filterable:!1,activeItem:e,onItemSelect:e=>{l(e)}},t.createElement(n,{text:"out"===e?"Zoom Out":"Zoom In",fill:!0})))),j=m(({element:e,store:n})=>{const l=e.animations.find(e=>"enter"===e.type);if(!l){return null}const i=e.page.duration;return t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"Delay"),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat((l.delay/1e3).toFixed(2)),onValueChange:t=>{e.setAnimation("enter",{delay:1e3*t})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:0,max:i/1e3,buttonPosition:"none"}))),t.createElement(a,{min:0,max:i,value:l.delay,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("enter",{delay:t})}}))}),V=m(({element:e,store:n})=>{const l=e.animations.find(e=>"loop"===e.type&&e.enabled);if(!l){return null}const i=500/l.duration;return t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"Speed"),t.createElement("div",null,t.createElement(NumberInput,{value:i,onValueChange:t=>{const n=Math.min(Math.max(.1,t),3);e.setAnimation("loop",{duration:500/n})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:.1,max:3,buttonPosition:"none"}))),t.createElement(a,{min:.1,max:3,stepSize:.01,value:i,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("loop",{duration:500/t})},onRelease:()=>{const t=n.activePage;n.play({animatedElementsIds:[e.id],currentTime:e.page.startTime}),setTimeout(()=>{n.stop(),t&&n.selectPage(t.id)},1e3)}}))}),z=m(({element:e,store:n})=>{const l=e.animations.find(e=>"enter"===e.type);if(!l){return null}const i=e.page.duration;return t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"Duration"),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat((l.duration/1e3).toFixed(2)),onValueChange:t=>{e.setAnimation("enter",{duration:1e3*t}),e.setAnimation("exit",{duration:1e3*t})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:0,max:i/1e3,buttonPosition:"none"}))),t.createElement(a,{min:0,max:i,value:l.duration,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("enter",{duration:t}),e.setAnimation("exit",{duration:t})}}))}),H=m(({element:e,store:n,animationName:l})=>{var i,o;const r=e.animations.find(e=>e.name===l&&e.enabled);if(!r){return null}const m=null!==(o=null===(i=r.data)||void 0===i?void 0:i.strength)&&void 0!==o?o:1;let s=2;"bounce"===l||"zoom"===l?s=2:"move"===l&&(s=3);const c=t=>{n.history.transaction(()=>{e.animations.forEach(n=>{if(n.name===l){const l=n.data||{};e.setAnimation(n.type,{data:Object.assign(Object.assign({},l),{strength:t})})}})});const i=n.activePage;(()=>{let t;return(...l)=>{t&&clearTimeout(t),t=setTimeout(()=>{(()=>{n.isPlaying||(n.play({animatedElementsIds:[e.id],currentTime:e.page.startTime}),setTimeout(()=>{n.stop(),i&&n.selectPage(i.id)},1e3))})(...l)},300)}})()()},d=Math.max(3,m);return t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,x("toolbar.strength")),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat(m.toFixed(2)),onValueChange:e=>{c(Math.max(.1,e))},style:{width:"50px"},minorStepSize:.05,stepSize:.1,min:.1,buttonPosition:"none"}))),t.createElement(a,{min:.1,max:d,stepSize:.05,value:m,showTrackFill:!1,labelRenderer:!1,onChange:e=>{c(e)}}))}),M=m(({element:e,store:n})=>{const l=e.animations.find(e=>"exit"===e.type);if(!l){return null}const i=e.page.duration;return t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"End Delay"),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat((l.delay/1e3).toFixed(2)),onValueChange:t=>{e.setAnimation("exit",{delay:1e3*t})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:0,max:i/1e3,buttonPosition:"none"}))),t.createElement(a,{min:0,max:i,value:l.delay,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("exit",{delay:t})}}))});export const AnimationsPanel=m(({store:e})=>{var l,i,a,o;const m=e.selectedElements,s=m[0],c=s,d=()=>e.selectedElements.map(e=>e.id).join(","),C=t.useMemo(d,[]),p=d();if(t.useEffect(()=>{C!==p&&e.openSidePanel(e.previousOpenedSidePanel)},[C,p]),!s||!s.animations){return null}const u=(t,n)=>{if(e.history.transaction(()=>{m.forEach(e=>{e.setAnimation("enter",Object.assign({name:t},n)),e.setAnimation("exit",Object.assign(Object.assign({name:t},n),{from:n.to,to:n.from}))})}),n.enabled){const t=e.activePage;e.play({animatedElementsIds:m.map(e=>e.id),currentTime:s.page.startTime}),setTimeout(()=>{e.stop(),t&&e.selectPage(t.id)},1e3)}},g=(t,n)=>{if(e.history.transaction(()=>{m.forEach(e=>{e.setAnimation("loop",Object.assign({name:t},n))})}),n.enabled){const t=e.activePage;e.play({animatedElementsIds:m.map(e=>e.id),currentTime:s.page.startTime}),setTimeout(()=>{e.stop(),t&&e.selectPage(t.id)},1e3)}},v=e=>{var t;return!!((e?null===(t=s.animations)||void 0===t?void 0:t.filter(t=>t.name===e||t.type===e):s.animations)||[]).find(e=>e.enabled)},E=v("move")||v("fade")||v("zoom"),S=v("rotate")||v("blink")||v("bounce");return t.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"}},t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingBottom:"10px"}},t.createElement("h3",{style:{margin:0,lineHeight:"30px"}},x("sidePanel.animate")),t.createElement(n,{minimal:!0,icon:t.createElement(r,null),onClick:()=>e.openSidePanel(e.previousOpenedSidePanel)})),t.createElement("div",{style:{paddingTop:"10px",lineHeight:"35px"}},"Animations"," ",t.createElement(n,{outlined:!0,style:{marginLeft:"10px",display:E?"inline-flex":"none"},onClick:()=>{c.set({animations:[]})}},"Remove All")),t.createElement("div",{style:{paddingTop:"25px"}},t.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(100px, 1fr))",gap:"5px",paddingBottom:"10px"}},t.createElement("div",null,t.createElement(n,{outlined:!0,large:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},icon:t.createElement(y,null),active:v("move"),fill:!0,onClick:()=>{u("move",{enabled:!v("move")})}},x("toolbar.move"))),t.createElement("div",null,t.createElement(n,{outlined:!0,large:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},icon:t.createElement(b,null),fill:!0,active:v("fade"),onClick:()=>{u("fade",{enabled:!v("fade")})}},x("toolbar.fade"))),t.createElement("div",null,t.createElement(n,{outlined:!0,large:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},icon:t.createElement(h,null),fill:!0,active:v("zoom"),onClick:()=>{u("zoom",{enabled:!v("zoom")})}},x("toolbar.zoom")))),t.createElement(f,{style:{display:E?"block":"none"}},t.createElement(T,{element:s,store:e,enabled:v("enter")||v("exit")}),v("move")&&t.createElement(O,{value:(null===(i=null===(l=s.animations.find(e=>"move"===e.name))||void 0===l?void 0:l.data)||void 0===i?void 0:i.direction)||"right",onChange:e=>{u("move",{data:{direction:e},enabled:!0})}}),v("move")&&t.createElement(H,{store:e,element:c,animationName:"move"}),v("zoom")&&t.createElement(A,{value:(null===(o=null===(a=s.animations.find(e=>"zoom"===e.name))||void 0===a?void 0:a.data)||void 0===o?void 0:o.direction)||"in",onChange:e=>{u("zoom",{data:{direction:e},enabled:!0})}}),v("zoom")&&t.createElement(H,{store:e,element:c,animationName:"zoom"}),v("enter")&&t.createElement(j,{store:e,element:c}),v("enter")&&t.createElement(z,{store:e,element:c}),v("exit")&&t.createElement(M,{store:e,element:c})),t.createElement("div",{style:{paddingTop:"10px",lineHeight:"35px"}},"Effects"," ",t.createElement(n,{outlined:!0,style:{marginLeft:"10px",display:S?"inline-flex":"none"},onClick:()=>{c.set({animations:[]})}},"Remove All")),t.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(100px, 1fr))",gap:"5px",paddingTop:"10px"}},t.createElement("div",null,t.createElement(n,{minimal:!0,outlined:!0,large:!0,fill:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},icon:t.createElement(w,null),active:v("rotate"),onClick:()=>{g("rotate",{enabled:!v("rotate")})}},x("toolbar.rotate"))),t.createElement("div",null,t.createElement(n,{outlined:!0,large:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},fill:!0,icon:t.createElement(k,null),active:v("blink"),onClick:()=>{g("blink",{enabled:!v("blink")})}},x("toolbar.blink"))),t.createElement("div",null,t.createElement(n,{minimal:!0,outlined:!0,large:!0,style:{padding:"20px",display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},icon:t.createElement(L,null),fill:!0,active:v("bounce"),onClick:()=>{g("bounce",{enabled:!v("bounce")})}},x("toolbar.bounce")))),S&&t.createElement(V,{store:e,element:c}),v("bounce")&&t.createElement(H,{store:e,element:c,animationName:"bounce"})))});
package/side-panel/effect-card.js CHANGED
@@ -34,6 +34,6 @@ var e,t;import r from"react";import i from"../utils/styled.js";import{Effects as
34
34
  filter: grayscale(1);
35
35
  `,f=i(c)`
36
36
  filter: ${null===(e=a(l.warm))||void 0===e?void 0:e.filter};
37
- `,m=e=>{const{html:t,filter:i}=a(l.cold);return r.createElement(r.Fragment,null,r.createElement("div",{style:{display:"none"},dangerouslySetInnerHTML:{__html:t}}),r.createElement(c,Object.assign({style:{filter:i}},e)))},x=i(c)`
37
+ `,m=e=>{const{html:t,filter:i}=a(l.cold);return r.createElement(r.Fragment,null,r.createElement("div",{style:{display:"none"},dangerouslySetInnerHTML:{__html:t||""}}),r.createElement(c,Object.assign({style:{filter:i}},e)))},x=i(c)`
38
38
  filter: ${null===(t=a(l.natural))||void 0===t?void 0:t.filter};
39
39
  `,g=e=>{switch(e){case l.sepia:return p;case l.grayscale:return u;case l.warm:return f;case l.cold:return m;case l.natural:return x;default:return c}};
package/side-panel/effects-panel.js CHANGED
@@ -1 +1 @@
1
- var e=this&&this.__rest||function(e,t){var a={};for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(a[n]=e[n])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(n=Object.getOwnPropertySymbols(e);l<n.length;l++){t.indexOf(n[l])<0&&Object.prototype.propertyIsEnumerable.call(e,n[l])&&(a[n[l]]=e[n[l]])}}return a};import t from"react";import{Alignment as a,Button as n,NumericInput as l,Slider as r,Switch as o}from"@blueprintjs/core";import{observer as i}from"mobx-react-lite";import{INDEPENDENT_FILTERS as d}from"../model/shape-model.js";import s from"../toolbar/color-picker.js";import{t as c}from"../utils/l10n.js";import{Cross as u}from"@blueprintjs/icons";import{EffectCard as m}from"./effect-card.js";import{Effects as b}from"../utils/filters.js";const h=(e,t,a)=>Math.max(t,Math.min(a,e));export const NumberInput=a=>{var{value:n,onValueChange:r}=a,o=e(a,["value","onValueChange"]);const[i,d]=t.useState(n.toString());return t.useEffect(()=>{d(n.toString())},[n]),t.createElement(l,Object.assign({value:i,onValueChange:(e,t)=>{d(t),Number.isNaN(e)||r(e)}},o))};const p=({label:e,enabled:n,visible:i=!0,onEnabledChange:d,numberValue:s,onNumberValueChange:c,min:u,max:m})=>i?t.createElement(t.Fragment,null,t.createElement(o,{checked:n,label:e,onChange:e=>{d(e.target.checked)},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),n&&t.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},t.createElement("div",{style:{paddingTop:"7px",paddingLeft:"10px",width:"calc(100% - 80px)"}},t.createElement(r,{value:s,onChange:e=>{c(e)},min:u,max:m,labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),t.createElement(l,{value:s,onValueChange:e=>{c(h(e,u,m))},buttonPosition:"none",style:{width:"50px",padding:"0 5px",marginLeft:"10px"},min:u,max:m}))):null;export const EffectsPanel=i(({store:e})=>{var i,g,E,v,f,x,y,C,w,k,V,I,T,O;const P=e.selectedElements,j=P[0],M=()=>e.selectedElements.map(e=>e.id).join(","),R=t.useMemo(M,[]),S=M();if(t.useEffect(()=>{R!==S&&e.openSidePanel(e.previousOpenedSidePanel)},[R,S]),!j||!j.filters){return null}const N=(e=>"text"===e.type)(j),B=((e=>{e.type})(j),(e=>"image"===e.type)(j)),z=(e=>"svg"===e.type)(j),F=B||z,H=t=>{e.history.transaction(()=>{P.forEach(e=>{e.set(t)})})},G=(t,a)=>{e.history.transaction(()=>{P.forEach(e=>{let n=+a;return 0==a||a||(n=e.filters.has(t)?null:1),d.includes(t)||e.set({grayscaleEnabled:"grayscale"===t&&a,sepiaEnabled:"sepia"===t&&a}),e.setFilter(t,n)})})};return t.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"}},t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement("h3",{style:{margin:0,lineHeight:"30px"}},c("sidePanel.effects")),t.createElement(n,{minimal:!0,icon:t.createElement(u,null),onClick:()=>e.openSidePanel(e.previousOpenedSidePanel)})),F&&t.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"16px",marginTop:"16px"}},t.createElement("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"}},t.createElement(m,{active:j.grayscaleEnabled,onClick:()=>{G("grayscale",!j.grayscaleEnabled)},title:c("toolbar.grayscale"),imageSrc:j.src,effect:b.grayscale}),t.createElement(m,{active:j.sepiaEnabled,onClick:()=>{G("sepia",!j.sepiaEnabled)},title:c("toolbar.sepia"),imageSrc:j.src,effect:b.sepia}),t.createElement(m,{active:j.filters.has("cold"),onClick:()=>{G("cold",j.filters.has("cold")?null:1)},title:c("toolbar.cold"),imageSrc:j.src,effect:b.cold}),t.createElement(m,{active:j.filters.has("natural"),onClick:()=>{G("natural",j.filters.has("natural")?null:1)},title:c("toolbar.natural"),imageSrc:j.src,effect:b.natural}),t.createElement(m,{active:j.filters.has("warm"),onClick:()=>{G("warm",j.filters.has("warm")?null:1)},title:c("toolbar.warm"),imageSrc:j.src,effect:b.warm}))),t.createElement(p,{label:c("toolbar.blur"),enabled:j.blurEnabled,visible:F||N,onEnabledChange:e=>{H({blurEnabled:e})},numberValue:j.blurRadius,onNumberValueChange:e=>{H({blurRadius:e})},min:0,max:100}),t.createElement(p,{label:c("toolbar.brightness"),visible:F,enabled:j.brightnessEnabled,onEnabledChange:e=>{H({brightnessEnabled:e})},numberValue:Math.round(100*j.brightness),onNumberValueChange:e=>{H({brightness:e/100})},min:-100,max:100}),t.createElement(p,{label:c("toolbar.temperature"),visible:F,enabled:j.filters.has("temperature"),onEnabledChange:e=>{G("temperature",e?0:null)},numberValue:Math.round(100*(null!==(g=null===(i=j.filters.get("temperature"))||void 0===i?void 0:i.intensity)&&void 0!==g?g:0)),onNumberValueChange:e=>{G("temperature",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.contrast"),visible:F,enabled:j.filters.has("contrast"),onEnabledChange:e=>{G("contrast",e?0:null)},numberValue:Math.round(100*(null!==(v=null===(E=j.filters.get("contrast"))||void 0===E?void 0:E.intensity)&&void 0!==v?v:0)),onNumberValueChange:e=>{G("contrast",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.shadows"),visible:F,enabled:j.filters.has("shadows"),onEnabledChange:e=>{G("shadows",e?0:null)},numberValue:Math.round(100*(null!==(x=null===(f=j.filters.get("shadows"))||void 0===f?void 0:f.intensity)&&void 0!==x?x:0)),onNumberValueChange:e=>{G("shadows",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.white"),visible:F,enabled:j.filters.has("white"),onEnabledChange:e=>{G("white",e?0:null)},numberValue:Math.round(100*(null!==(C=null===(y=j.filters.get("white"))||void 0===y?void 0:y.intensity)&&void 0!==C?C:0)),onNumberValueChange:e=>{G("white",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.black"),visible:F,enabled:j.filters.has("black"),onEnabledChange:e=>{G("black",e?0:null)},numberValue:Math.round(100*(null!==(k=null===(w=j.filters.get("black"))||void 0===w?void 0:w.intensity)&&void 0!==k?k:0)),onNumberValueChange:e=>{G("black",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.vibrance"),visible:F,enabled:j.filters.has("vibrance"),onEnabledChange:e=>{G("vibrance",e?0:null)},numberValue:Math.round(100*(null!==(I=null===(V=j.filters.get("vibrance"))||void 0===V?void 0:V.intensity)&&void 0!==I?I:0)),onNumberValueChange:e=>{G("vibrance",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.saturation"),visible:F,enabled:j.filters.has("saturation"),onEnabledChange:e=>{G("saturation",e?0:null)},numberValue:Math.round(100*(null!==(O=null===(T=j.filters.get("saturation"))||void 0===T?void 0:T.intensity)&&void 0!==O?O:0)),onNumberValueChange:e=>{G("saturation",e/100)},min:-100,max:100}),N&&t.createElement(o,{checked:!!j.curveEnabled,label:c("toolbar.curvedText")||"Curved text",onChange:e=>{H({curveEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),N&&j.curveEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.curvePower")||"Curve"),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*j.curvePower),onValueChange:e=>{H({curvePower:h(e,-100,100)/100})},style:{width:"50px"},min:-100,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:Math.round(100*j.curvePower),onChange:e=>{H({curvePower:h(e,-100,100)/100})},min:-100,max:100,labelStepSize:50,labelRenderer:e=>0===e?"0":e.toString()}))),N&&t.createElement(o,{checked:!!j.strokeWidth,label:c("toolbar.textStroke"),onChange:e=>{H({strokeWidth:e.target.checked?2:0})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),N&&!!j.strokeWidth&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(s,{value:j.stroke,size:30,gradientEnabled:!0,onChange:e=>{H({stroke:e})},store:e}),t.createElement(l,{defaultValue:j.strokeWidth,onValueChange:e=>{H({strokeWidth:h(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(j.fontSize/2)}))),N&&t.createElement(o,{checked:!!j.backgroundEnabled,label:c("toolbar.textBackground"),onChange:e=>{H({backgroundEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),N&&!!j.backgroundEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.backgroundCornerRadius")),t.createElement("div",null,t.createElement(NumberInput,{value:100*j.backgroundCornerRadius,onValueChange:e=>{H({backgroundCornerRadius:h(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*j.backgroundCornerRadius,onChange:e=>{H({backgroundCornerRadius:h(e,0,100)/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.backgroundPadding")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*j.backgroundPadding),onValueChange:e=>{H({backgroundPadding:h(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:Math.round(100*j.backgroundPadding),onChange:e=>{H({backgroundPadding:h(e,0,100)/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*j.backgroundOpacity),onValueChange:e=>{H({backgroundOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*j.backgroundOpacity,onChange:e=>{H({backgroundOpacity:e/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},c("toolbar.color")),t.createElement(s,{value:j.backgroundColor,size:30,onChange:e=>{H({backgroundColor:e})},store:e}))),F&&t.createElement(o,{checked:!!j.borderSize,label:c("toolbar.border"),onChange:e=>{H({borderSize:e.target.checked?2:0})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),F&&!!j.borderSize&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(s,{value:j.borderColor,size:30,gradientEnabled:!0,onChange:e=>{H({borderColor:e})},store:e}),t.createElement(l,{defaultValue:j.borderSize,onValueChange:e=>{H({borderSize:h(e,1,Math.min(j.width,j.height)/2)})},style:{width:"80px"},min:1,max:Math.max(1,Math.min(j.width,j.height)/2)}))),F&&t.createElement(p,{label:c("toolbar.cornerRadius"),visible:F,enabled:0!==j.cornerRadius,onEnabledChange:e=>{H({cornerRadius:e?Math.min(j.width/4,j.height/4):0})},numberValue:Math.min(j.cornerRadius,Math.round(Math.min(j.width/2,j.height/2))),onNumberValueChange:e=>{H({cornerRadius:e})},min:1,max:Math.round(Math.min(j.width/2,j.height/2))}),t.createElement(o,{checked:j.shadowEnabled,label:c("toolbar.shadow"),onChange:e=>{H({shadowEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),j.shadowEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.blur")),t.createElement("div",null,t.createElement(NumberInput,{value:j.shadowBlur,onValueChange:e=>{H({shadowBlur:h(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:j.shadowBlur,onChange:e=>{H({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.offsetX")),t.createElement("div",null,t.createElement(NumberInput,{value:j.shadowOffsetX,onValueChange:e=>{H({shadowOffsetX:h(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:j.shadowOffsetX,onChange:e=>{H({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.offsetY")),t.createElement("div",null,t.createElement(NumberInput,{value:j.shadowOffsetY,onValueChange:e=>{H({shadowOffsetY:h(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:j.shadowOffsetY,onChange:e=>{H({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*j.shadowOpacity),onValueChange:e=>{H({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*j.shadowOpacity,onChange:e=>{H({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},c("toolbar.color")),t.createElement(s,{value:j.shadowColor,size:30,onChange:e=>{H({shadowColor:e})},store:e}))))});
1
+ var e=this&&this.__rest||function(e,t){var a={};for(var n in e){Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(a[n]=e[n])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(n=Object.getOwnPropertySymbols(e);l<n.length;l++){t.indexOf(n[l])<0&&Object.prototype.propertyIsEnumerable.call(e,n[l])&&(a[n[l]]=e[n[l]])}}return a};import t from"react";import{Alignment as a,Button as n,NumericInput as l,Slider as r,Switch as o}from"@blueprintjs/core";import{observer as i}from"mobx-react-lite";import{INDEPENDENT_FILTERS as d}from"../model/shape-model.js";import s from"../toolbar/color-picker.js";import{t as c}from"../utils/l10n.js";import{Cross as u}from"@blueprintjs/icons";import{EffectCard as m}from"./effect-card.js";import{Effects as b}from"../utils/filters.js";const h=(e,t,a)=>Math.max(t,Math.min(a,e));export const NumberInput=a=>{var{value:n,onValueChange:r}=a,o=e(a,["value","onValueChange"]);const[i,d]=t.useState(n.toString());return t.useEffect(()=>{d(n.toString())},[n]),t.createElement(l,Object.assign({value:i,onValueChange:(e,t)=>{d(t),Number.isNaN(e)||r(e)}},o))};const p=({label:e,enabled:n,visible:i=!0,onEnabledChange:d,numberValue:s,onNumberValueChange:c,min:u,max:m})=>i?t.createElement(t.Fragment,null,t.createElement(o,{checked:n,label:e,onChange:e=>{d(e.target.checked)},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),n&&t.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},t.createElement("div",{style:{paddingTop:"7px",paddingLeft:"10px",width:"calc(100% - 80px)"}},t.createElement(r,{value:s,onChange:e=>{c(e)},min:u,max:m,labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),t.createElement(l,{value:s,onValueChange:e=>{c(h(e,u,m))},buttonPosition:"none",style:{width:"50px",padding:"0 5px",marginLeft:"10px"},min:u,max:m}))):null;export const EffectsPanel=i(({store:e})=>{var i,g,E,v,f,x,y,C,w,k,V,I,T,O;const P=e.selectedElements,j=P[0],M=()=>e.selectedElements.map(e=>e.id).join(","),R=t.useMemo(M,[]),S=M();if(t.useEffect(()=>{R!==S&&e.openSidePanel(e.previousOpenedSidePanel)},[R,S]),!j||!j.filters){return null}const N=(e=>"text"===e.type)(j),B=((e=>{e.type})(j),(e=>"image"===e.type)(j)),z=(e=>"svg"===e.type)(j),F=B||z,H=t=>{e.history.transaction(()=>{P.forEach(e=>{e.set(t)})})},G=(t,a)=>{e.history.transaction(()=>{P.forEach(e=>{let n=Number(a);return 0==a||a||(n=e.filters.has(t)?null:1),d.includes(t)||e.set({grayscaleEnabled:"grayscale"===t&&!!a,sepiaEnabled:"sepia"===t&&!!a}),e.setFilter(t,n)})})};return t.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto",padding:"0 10px"}},t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement("h3",{style:{margin:0,lineHeight:"30px"}},c("sidePanel.effects")),t.createElement(n,{minimal:!0,icon:t.createElement(u,null),onClick:()=>e.openSidePanel(e.previousOpenedSidePanel)})),F&&t.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"16px",marginTop:"16px"}},t.createElement("div",{style:{display:"flex",gap:"16px",flexWrap:"wrap"}},t.createElement(m,{active:j.grayscaleEnabled,onClick:()=>{G("grayscale",!j.grayscaleEnabled)},title:c("toolbar.grayscale"),imageSrc:j.src,effect:b.grayscale}),t.createElement(m,{active:j.sepiaEnabled,onClick:()=>{G("sepia",!j.sepiaEnabled)},title:c("toolbar.sepia"),imageSrc:j.src,effect:b.sepia}),t.createElement(m,{active:j.filters.has("cold"),onClick:()=>{G("cold",j.filters.has("cold")?null:1)},title:c("toolbar.cold"),imageSrc:j.src,effect:b.cold}),t.createElement(m,{active:j.filters.has("natural"),onClick:()=>{G("natural",j.filters.has("natural")?null:1)},title:c("toolbar.natural"),imageSrc:j.src,effect:b.natural}),t.createElement(m,{active:j.filters.has("warm"),onClick:()=>{G("warm",j.filters.has("warm")?null:1)},title:c("toolbar.warm"),imageSrc:j.src,effect:b.warm}))),t.createElement(p,{label:c("toolbar.blur"),enabled:j.blurEnabled,visible:F||N,onEnabledChange:e=>{H({blurEnabled:e})},numberValue:j.blurRadius,onNumberValueChange:e=>{H({blurRadius:e})},min:0,max:100}),t.createElement(p,{label:c("toolbar.brightness"),visible:F,enabled:j.brightnessEnabled,onEnabledChange:e=>{H({brightnessEnabled:e})},numberValue:Math.round(100*j.brightness),onNumberValueChange:e=>{H({brightness:e/100})},min:-100,max:100}),t.createElement(p,{label:c("toolbar.temperature"),visible:F,enabled:j.filters.has("temperature"),onEnabledChange:e=>{G("temperature",e?0:null)},numberValue:Math.round(100*(null!==(g=null===(i=j.filters.get("temperature"))||void 0===i?void 0:i.intensity)&&void 0!==g?g:0)),onNumberValueChange:e=>{G("temperature",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.contrast"),visible:F,enabled:j.filters.has("contrast"),onEnabledChange:e=>{G("contrast",e?0:null)},numberValue:Math.round(100*(null!==(v=null===(E=j.filters.get("contrast"))||void 0===E?void 0:E.intensity)&&void 0!==v?v:0)),onNumberValueChange:e=>{G("contrast",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.shadows"),visible:F,enabled:j.filters.has("shadows"),onEnabledChange:e=>{G("shadows",e?0:null)},numberValue:Math.round(100*(null!==(x=null===(f=j.filters.get("shadows"))||void 0===f?void 0:f.intensity)&&void 0!==x?x:0)),onNumberValueChange:e=>{G("shadows",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.white"),visible:F,enabled:j.filters.has("white"),onEnabledChange:e=>{G("white",e?0:null)},numberValue:Math.round(100*(null!==(C=null===(y=j.filters.get("white"))||void 0===y?void 0:y.intensity)&&void 0!==C?C:0)),onNumberValueChange:e=>{G("white",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.black"),visible:F,enabled:j.filters.has("black"),onEnabledChange:e=>{G("black",e?0:null)},numberValue:Math.round(100*(null!==(k=null===(w=j.filters.get("black"))||void 0===w?void 0:w.intensity)&&void 0!==k?k:0)),onNumberValueChange:e=>{G("black",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.vibrance"),visible:F,enabled:j.filters.has("vibrance"),onEnabledChange:e=>{G("vibrance",e?0:null)},numberValue:Math.round(100*(null!==(I=null===(V=j.filters.get("vibrance"))||void 0===V?void 0:V.intensity)&&void 0!==I?I:0)),onNumberValueChange:e=>{G("vibrance",e/100)},min:-100,max:100}),t.createElement(p,{label:c("toolbar.saturation"),visible:F,enabled:j.filters.has("saturation"),onEnabledChange:e=>{G("saturation",e?0:null)},numberValue:Math.round(100*(null!==(O=null===(T=j.filters.get("saturation"))||void 0===T?void 0:T.intensity)&&void 0!==O?O:0)),onNumberValueChange:e=>{G("saturation",e/100)},min:-100,max:100}),N&&t.createElement(o,{checked:!!j.curveEnabled,label:c("toolbar.curvedText")||"Curved text",onChange:e=>{H({curveEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),N&&j.curveEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.curvePower")||"Curve"),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*j.curvePower),onValueChange:e=>{H({curvePower:h(e,-100,100)/100})},style:{width:"50px"},min:-100,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:Math.round(100*j.curvePower),onChange:e=>{H({curvePower:h(e,-100,100)/100})},min:-100,max:100,labelStepSize:50,labelRenderer:e=>0===e?"0":e.toString()}))),N&&t.createElement(o,{checked:!!j.strokeWidth,label:c("toolbar.textStroke"),onChange:e=>{H({strokeWidth:e.target.checked?2:0})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),N&&!!j.strokeWidth&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(s,{value:j.stroke,size:30,gradientEnabled:!0,onChange:e=>{H({stroke:e})},store:e}),t.createElement(l,{defaultValue:j.strokeWidth,onValueChange:e=>{H({strokeWidth:h(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(j.fontSize/2)}))),N&&t.createElement(o,{checked:!!j.backgroundEnabled,label:c("toolbar.textBackground"),onChange:e=>{H({backgroundEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),N&&!!j.backgroundEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.backgroundCornerRadius")),t.createElement("div",null,t.createElement(NumberInput,{value:100*j.backgroundCornerRadius,onValueChange:e=>{H({backgroundCornerRadius:h(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*j.backgroundCornerRadius,onChange:e=>{H({backgroundCornerRadius:h(e,0,100)/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.backgroundPadding")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*j.backgroundPadding),onValueChange:e=>{H({backgroundPadding:h(e,0,100)/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:Math.round(100*j.backgroundPadding),onChange:e=>{H({backgroundPadding:h(e,0,100)/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*j.backgroundOpacity),onValueChange:e=>{H({backgroundOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*j.backgroundOpacity,onChange:e=>{H({backgroundOpacity:e/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},c("toolbar.color")),t.createElement(s,{value:j.backgroundColor,size:30,onChange:e=>{H({backgroundColor:e})},store:e}))),F&&t.createElement(o,{checked:!!j.borderSize,label:c("toolbar.border"),onChange:e=>{H({borderSize:e.target.checked?2:0})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),F&&!!j.borderSize&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},t.createElement(s,{value:j.borderColor,size:30,gradientEnabled:!0,onChange:e=>{H({borderColor:e})},store:e}),t.createElement(l,{defaultValue:j.borderSize,onValueChange:e=>{H({borderSize:h(e,1,Math.min(j.width,j.height)/2)})},style:{width:"80px"},min:1,max:Math.max(1,Math.min(j.width,j.height)/2)}))),F&&t.createElement(p,{label:c("toolbar.cornerRadius"),visible:F,enabled:0!==j.cornerRadius,onEnabledChange:e=>{H({cornerRadius:e?Math.min(j.width/4,j.height/4):0})},numberValue:Math.min(j.cornerRadius,Math.round(Math.min(j.width/2,j.height/2))),onNumberValueChange:e=>{H({cornerRadius:e})},min:1,max:Math.round(Math.min(j.width/2,j.height/2))}),t.createElement(o,{checked:j.shadowEnabled,label:c("toolbar.shadow"),onChange:e=>{H({shadowEnabled:e.target.checked})},alignIndicator:a.RIGHT,style:{marginTop:"20px"}}),j.shadowEnabled&&t.createElement(t.Fragment,null,t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.blur")),t.createElement("div",null,t.createElement(NumberInput,{value:j.shadowBlur,onValueChange:e=>{H({shadowBlur:h(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:j.shadowBlur,onChange:e=>{H({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.offsetX")),t.createElement("div",null,t.createElement(NumberInput,{value:j.shadowOffsetX,onValueChange:e=>{H({shadowOffsetX:h(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:j.shadowOffsetX,onChange:e=>{H({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.offsetY")),t.createElement("div",null,t.createElement(NumberInput,{value:j.shadowOffsetY,onValueChange:e=>{H({shadowOffsetY:h(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:j.shadowOffsetY,onChange:e=>{H({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,c("toolbar.opacity")),t.createElement("div",null,t.createElement(NumberInput,{value:Math.round(100*j.shadowOpacity),onValueChange:e=>{H({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),t.createElement("div",null,t.createElement(r,{value:100*j.shadowOpacity,onChange:e=>{H({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1})),t.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",{style:{lineHeight:"30px"}},c("toolbar.color")),t.createElement(s,{value:j.shadowColor,size:30,onChange:e=>{H({shadowColor:e})},store:e}))))});
package/side-panel/elements-panel.js CHANGED
@@ -1,23 +1,23 @@
1
- import e from"react";import{isAlive as t}from"mobx-state-tree";import{InputGroup as r}from"@blueprintjs/core";import{Search as i}from"@blueprintjs/icons";import{ImagesGrid as o}from"./images-grid.js";import{svgToURL as a}from"../utils/svg.js";import{figureToSvg as s,TYPES as n}from"../utils/figure-to-svg.js";import d from"../utils/styled.js";import{t as l}from"../utils/l10n.js";import{useInfiniteAPI as c}from"../utils/use-api.js";import{URLS as h}from"../utils/api.js";const p=async e=>{const t=await fetch(h.nounProjectDownload(e)),r=await t.text();return await a(r)},g=d("div")`
1
+ import e from"react";import{isAlive as t}from"mobx-state-tree";import{InputGroup as r}from"@blueprintjs/core";import{Search as i}from"@blueprintjs/icons";import{ImagesGrid as o}from"./images-grid.js";import{svgToURL as s}from"../utils/svg.js";import{figureToSvg as a,TYPES as n}from"../utils/figure-to-svg.js";import d from"../utils/styled.js";import{t as l}from"../utils/l10n.js";import{useInfiniteAPI as c}from"../utils/use-api.js";import{URLS as h}from"../utils/api.js";const p=async e=>{const t=await fetch(h.nounProjectDownload(e)),r=await t.text();return await s(r)},u=d("div")`
2
2
  height: 100%;
3
3
  overflow: hidden;
4
4
 
5
5
  .bp5-dark & img {
6
6
  filter: invert(1);
7
7
  }
8
- `;export const NounprojectPanel=({store:r,query:i})=>{const{data:a,isLoading:s,loadMore:n,setQuery:d,hasMore:l}=c({defaultQuery:i,getAPI:({page:e,query:t})=>h.nounProjectList({query:t,page:e,limit:50}),getSize:e=>e.pagesNumber});return e.useEffect(()=>{d(i)},[i]),e.createElement(g,null,e.createElement(o,{shadowEnabled:!1,images:null==a?void 0:a.map(e=>e.icons).flat(),getPreview:e=>e.preview_url_84,isLoading:s,onSelect:async(e,i,o)=>{if(o&&"image"===o.type&&o.contentEditable){const t=await p(e.id);return void o.set({clipSrc:t})}if(o&&"video"===o.type&&o.contentEditable){const t=await p(e.id);return void o.set({clipSrc:t})}r.history.transaction(async()=>{var o;const a=((null==i?void 0:i.x)||r.width/2)-100,s=((null==i?void 0:i.y)||r.height/2)-100,n=null===(o=r.activePage)||void 0===o?void 0:o.addElement({type:"svg",width:200,height:200,x:a,y:s}),d=await p(e.id);t(n)&&await n.set({src:d})})},rowsNumber:4,loadMore:l&&n}))};const u=[{preview:a`
8
+ `;export const NounprojectPanel=({store:r,query:i})=>{const{data:s,isLoading:a,loadMore:n,setQuery:d,hasMore:l}=c({defaultQuery:i,getAPI:({page:e,query:t})=>h.nounProjectList({query:t,page:e}),getSize:e=>e.pagesNumber});return e.useEffect(()=>{d(i)},[i]),e.createElement(u,null,e.createElement(o,{shadowEnabled:!1,images:null==s?void 0:s.map(e=>e.icons).flat(),getPreview:e=>e.preview_url_84,isLoading:a,onSelect:async(e,i,o)=>{if(o&&"image"===o.type&&o.contentEditable){const t=await p(e.id);return void o.set({clipSrc:t})}if(o&&"video"===o.type&&o.contentEditable){const t=await p(e.id);return void o.set({clipSrc:t})}r.history.transaction(async()=>{var o;const s=((null==i?void 0:i.x)||r.width/2)-100,a=((null==i?void 0:i.y)||r.height/2)-100,n=null===(o=r.activePage)||void 0===o?void 0:o.addElement({type:"svg",width:200,height:200,x:s,y:a}),d=await p(e.id);t(n)&&await n.set({src:d})})},rowsNumber:4,loadMore:l&&n}))};const g=[{preview:s`
9
9
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="16">
10
10
  <path stroke="#C0BFBF" strokeWidth="4" d="M 1 8 L 30 8"></path>
11
11
  </svg>
12
- `,data:{}},{preview:a`
12
+ `,data:{}},{preview:s`
13
13
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="16">
14
14
  <path stroke="#C0BFBF" strokeWidth="4" stroke-dasharray="4 2" d="M 1 8 L 30 8"></path>
15
15
  </svg>
16
- `,data:{dash:[4,2]}},{preview:a`
16
+ `,data:{dash:[4,2]}},{preview:s`
17
17
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="16">
18
18
  <path stroke="#C0BFBF" strokeWidth="4" stroke-dasharray="1 1" d="M 1 8 L 30 8"></path>
19
19
  </svg>
20
- `,data:{dash:[1,1]}},{preview:a`
20
+ `,data:{dash:[1,1]}},{preview:s`
21
21
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="16">
22
22
  <path
23
23
  stroke="#C0BFBF"
@@ -34,7 +34,7 @@ import e from"react";import{isAlive as t}from"mobx-state-tree";import{InputGroup
34
34
  strokeLinecap="round"
35
35
  ></path>
36
36
  </svg>
37
- `,data:{endHead:"arrow"}},{preview:a`
37
+ `,data:{endHead:"arrow"}},{preview:s`
38
38
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="16">
39
39
  <path
40
40
  stroke="#C0BFBF"
@@ -52,7 +52,7 @@ import e from"react";import{isAlive as t}from"mobx-state-tree";import{InputGroup
52
52
  ></path>
53
53
  <circle cx="3" cy="8" r="2" fill="#C0BFBF"></circle>
54
54
  </svg>
55
- `,data:{startHead:"circle",endHead:"triangle"}},{preview:a`
55
+ `,data:{startHead:"circle",endHead:"triangle"}},{preview:s`
56
56
  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="16">
57
57
  <path
58
58
  stroke="#C0BFBF"
@@ -76,8 +76,8 @@ import e from"react";import{isAlive as t}from"mobx-state-tree";import{InputGroup
76
76
  strokeLinecap="round"
77
77
  ></path>
78
78
  </svg>
79
- `,data:{startHead:"square",endHead:"bar",dash:[2,1]}}];let m="rgba(191, 191, 191, 100)";export const setDefaultColor=e=>{m=e};const v=({store:t})=>e.createElement(o,{shadowEnabled:!1,rowsNumber:3,images:u,getPreview:e=>e.preview,itemHeight:50,isLoading:!1,onSelect:async(e,r,i)=>{const o=t.activePage.computedWidth/3;t.activePage.addElement(Object.assign({type:"line",x:r?r.x:t.activePage.computedWidth/2-o/2,y:r?r.y:t.activePage.computedHeight/2,color:m,width:o},e.data))}}),w=Object.keys(n),f=[{width:300,height:300,fill:"rgba(191, 191, 191, 100)",stroke:"#0c0c0c",strokeWidth:0,url:""}],k=[];w.forEach(e=>{f.forEach(t=>{k.push(Object.assign({subType:e},t))})}),k.forEach(e=>{e.url=a(s(e))});const y=d("div")`
79
+ `,data:{startHead:"square",endHead:"bar",dash:[2,1]}}];let m="rgba(191, 191, 191, 100)";export const setDefaultColor=e=>{m=e};const w=({store:t})=>e.createElement(o,{shadowEnabled:!1,rowsNumber:3,images:g,getPreview:e=>e.preview,itemHeight:50,isLoading:!1,onSelect:async(e,r,i)=>{const o=t.activePage.computedWidth/3;t.activePage.addElement(Object.assign({type:"line",x:r?r.x:t.activePage.computedWidth/2-o/2,y:r?r.y:t.activePage.computedHeight/2,color:m,width:o},e.data))}}),v=Object.keys(n),f=[{width:300,height:300,fill:"rgba(191, 191, 191, 100)",stroke:"#0c0c0c",strokeWidth:0,url:""}],k=[];v.forEach(e=>{f.forEach(t=>{k.push(Object.assign({subType:e},t))})}),k.forEach(e=>{e.url=s(a(e))});const y=d("div")`
80
80
  height: 220px;
81
- `,L=({store:t})=>{const r=Math.ceil(k.length/4)||1;return e.createElement(y,{style:{height:110*r+"px"}},e.createElement(o,{shadowEnabled:!1,rowsNumber:4,images:k,getPreview:e=>e.url,isLoading:!1,itemHeight:100,onSelect:async(e,r,i)=>{var o;if(i&&"image"===i.type&&i.contentEditable){return void i.set({clipSrc:e.url})}if(i&&"video"===i.type&&i.contentEditable){return void i.set({clipSrc:e.url})}const a=(t.activePage.computedWidth+t.activePage.computedHeight)/2160,s=e.width*a,n=e.height*a,d=((null==r?void 0:r.x)||t.activePage.computedWidth/2)-s/2,l=((null==r?void 0:r.y)||t.activePage.computedHeight/2)-n/2;null===(o=t.activePage)||void 0===o||o.addElement(Object.assign(Object.assign({type:"figure"},e),{x:d,y:l,width:s,height:n,fill:m}))}}))},E=d("div")`
81
+ `,L=({store:t})=>{const r=Math.ceil(k.length/4)||1;return e.createElement(y,{style:{height:110*r+"px"}},e.createElement(o,{shadowEnabled:!1,rowsNumber:4,images:k,getPreview:e=>e.url,isLoading:!1,itemHeight:100,onSelect:async(e,r,i)=>{if(i&&"image"===i.type&&i.contentEditable){return void i.set({clipSrc:e.url})}if(i&&"video"===i.type&&i.contentEditable){return void i.set({clipSrc:e.url})}const o=t.activePage;if(!o){return}const s=(o.computedWidth+o.computedHeight)/2160,a=e.width*s,n=e.height*s,d=((null==r?void 0:r.x)||o.computedWidth/2)-a/2,l=((null==r?void 0:r.y)||o.computedHeight/2)-n/2;o.addElement(Object.assign(Object.assign({type:"figure"},e),{x:d,y:l,width:a,height:n,fill:m}))}}))},E=d("div")`
82
82
  height: 220px;
83
- `;export const Shapes=({store:t})=>e.createElement("div",{style:{display:"flex",flexDirection:"column",height:"100%",overflow:"auto"}},e.createElement("p",null,l("sidePanel.lines")),e.createElement(E,null,e.createElement(v,{store:t})),e.createElement("p",null,l("sidePanel.shapes")),e.createElement(L,{store:t}));export const ElementsPanel=({store:t})=>{const o=e.useRef(),[a,s]=e.useState(""),[n,d]=e.useState(a);e.useEffect(()=>(o.current=setTimeout(()=>{d(a)},500),()=>{clearTimeout(o.current)}),[a]);const c=!!n;return e.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},e.createElement(r,{leftIcon:e.createElement(i,null),placeholder:l("sidePanel.searchPlaceholder"),onChange:e=>{s(e.target.value)},style:{marginBottom:"20px"},type:"search"}),c&&e.createElement(NounprojectPanel,{query:n,store:t}),!c&&e.createElement(Shapes,{store:t}))};
83
+ `;export const Shapes=({store:t})=>e.createElement("div",{style:{display:"flex",flexDirection:"column",height:"100%",overflow:"auto"}},e.createElement("p",null,l("sidePanel.lines")),e.createElement(E,null,e.createElement(w,{store:t})),e.createElement("p",null,l("sidePanel.shapes")),e.createElement(L,{store:t}));export const ElementsPanel=({store:t})=>{const o=e.useRef(),[s,a]=e.useState(""),[n,d]=e.useState(s);e.useEffect(()=>(o.current=setTimeout(()=>{d(s)},500),()=>{clearTimeout(o.current)}),[s]);const c=!!n;return e.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},e.createElement(r,{leftIcon:e.createElement(i,null),placeholder:l("sidePanel.searchPlaceholder"),onChange:e=>{a(e.target.value)},style:{marginBottom:"20px"},type:"search"}),c&&e.createElement(NounprojectPanel,{query:n,store:t}),!c&&e.createElement(Shapes,{store:t}))};
package/side-panel/images-grid.js CHANGED
@@ -47,4 +47,4 @@ import e from"react";import t from"../utils/styled.js";import{Spinner as r}from"
47
47
  `,m=t("p")`
48
48
  text-align: center;
49
49
  padding: 30px;
50
- `,u=({url:t,credit:r,onSelect:o,crossOrigin:a,shadowEnabled:n,itemHeight:i,className:m,onLoad:u,alt:p})=>{const h=null==n||n;return e.createElement(s,{onClick:()=>{o()},className:"polotno-close-panel"},e.createElement(d,{"data-shadowenabled":h},e.createElement(c,{className:m,style:{height:null!=i?i:"auto"},src:t,draggable:!0,loading:"lazy",crossOrigin:a,alt:p,onDragStart:()=>{l(({x:e,y:t},r,l)=>{o({x:e,y:t},r,l)})},onDragEnd:()=>{l(null)},onLoad:u}),r&&e.createElement(g,{className:"credit"},r)))};export const ImagesGrid=({images:t,onSelect:l,isLoading:a,getPreview:s,loadMore:d,getCredit:c,getAlt:g,getImageClassName:p,rowsNumber:h,crossOrigin:f="anonymous",shadowEnabled:b,itemHeight:w,error:x,hideNoResults:v=!1})=>{const y=h||2,E=e.useRef(null),N=[];for(var H=0;H<y;H++){N.push((t||[]).filter((e,t)=>t%y===H))}const j=e.useRef(null),k=()=>{var e,r,o;const l=(null===(e=E.current)||void 0===e?void 0:e.scrollHeight)>(null===(r=E.current)||void 0===r?void 0:r.offsetHeight)+5,n=t&&t.length,i=Array.from(null===(o=E.current)||void 0===o?void 0:o.querySelectorAll("img")).every(e=>e.complete);!l&&d&&!a&&n&&i&&(j.current||(j.current=window.setTimeout(()=>{j.current=null,d&&d()},100)))},S=()=>{k()};return e.useEffect(()=>(k(),()=>{window.clearTimeout(j.current),j.current=null}),[t&&t.length,a]),e.createElement(n,{onScroll:e=>{const t=e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight;d&&!a&&t<200&&d()},ref:E},N.map((t,o)=>e.createElement(i,{key:o,style:{width:100/y+"%"}},t.map((t,r)=>e.createElement(u,{url:s(t),onSelect:(e,r,o)=>l(t,e,r,o),key:r,credit:c&&c(t),crossOrigin:f,shadowEnabled:b,itemHeight:w,className:p&&p(t),onLoad:S,alt:g&&g(t)||""})),a&&e.createElement("div",{style:{padding:"30px"}},e.createElement(r,null)))),!a&&(!t||!t.length)&&!x&&!v&&e.createElement(m,null,o("sidePanel.noResults")),x&&e.createElement(m,null,o("sidePanel.error")))};
50
+ `,p=({url:t,credit:r,onSelect:o,crossOrigin:a,shadowEnabled:n,itemHeight:i,className:m,onLoad:p,alt:u})=>{const h=null==n||n;return e.createElement(s,{onClick:()=>{o()},className:"polotno-close-panel"},e.createElement(d,{"data-shadowenabled":h},e.createElement(c,{className:m,style:{height:null!=i?i:"auto"},src:t,draggable:!0,loading:"lazy",crossOrigin:a,alt:u,onDragStart:()=>{l(({x:e,y:t},r,l)=>{o({x:e,y:t},r,l)})},onDragEnd:()=>{l(null)},onLoad:p}),r&&e.createElement(g,{className:"credit"},r)))};export const ImagesGrid=({images:t,onSelect:l,isLoading:a,getPreview:s,loadMore:d,getCredit:c,getAlt:g,getImageClassName:u,rowsNumber:h,crossOrigin:f="anonymous",shadowEnabled:b,itemHeight:w,error:x,hideNoResults:v=!1})=>{const y=h||2,E=e.useRef(null),N=[];for(var H=0;H<y;H++){N.push((t||[]).filter((e,t)=>t%y===H))}const j=e.useRef(null),k=()=>{var e;const r=E.current,o=!!r&&r.scrollHeight>r.offsetHeight+5,l=t&&t.length,n=Array.from(null!==(e=null==r?void 0:r.querySelectorAll("img"))&&void 0!==e?e:[]).every(e=>e.complete);!o&&d&&!a&&l&&n&&(j.current||(j.current=window.setTimeout(()=>{j.current=null,d&&d()},100)))},S=()=>{k()};return e.useEffect(()=>(k(),()=>{null!==j.current&&window.clearTimeout(j.current),j.current=null}),[t&&t.length,a]),e.createElement(n,{onScroll:e=>{const t=e.target.scrollHeight-e.target.scrollTop-e.target.offsetHeight;d&&!a&&t<200&&d()},ref:E},N.map((t,o)=>e.createElement(i,{key:o,style:{width:100/y+"%"}},t.map((t,r)=>e.createElement(p,{url:s(t),onSelect:(e,r,o)=>l(t,e,r,o),key:r,credit:c&&c(t),crossOrigin:f,shadowEnabled:b,itemHeight:w,className:u&&u(t),onLoad:S,alt:g&&g(t)||""})),a&&e.createElement("div",{style:{padding:"30px"}},e.createElement(r,null)))),!a&&(!t||!t.length)&&!x&&!v&&e.createElement(m,null,o("sidePanel.noResults")),x&&e.createElement(m,null,o("sidePanel.error")))};
package/side-panel/layers-panel.js CHANGED
@@ -1 +1 @@
1
- import e from"react";import{observer as t}from"mobx-react-lite";import{Button as l,EditableText as n,Card as i}from"@blueprintjs/core";import{t as a}from"../utils/l10n.js";import{isMobile as r}from"../utils/screen.js";import{ReactSortable as o}from"react-sortablejs";import{removeTags as s}from"../utils/text.js";import{DragHandleVertical as d,Trash as m,Lock as c,Unlock as p,EyeOpen as u,EyeOff as E}from"@blueprintjs/icons";const v=t(({element:t,store:r})=>{const o=r.selectedElements.indexOf(t)>=0,[v,y]=e.useState(!1),x=()=>y(!1),g=v?t.name:t.name||s(t.text)||`#${t.id}`;return e.createElement(i,{onMouseDown:e=>{const l=e.ctrlKey||e.metaKey||e.shiftKey?[...r.selectedElementsIds]:[];l.indexOf(t.id)<0&&l.push(t.id),r.selectElements(l)},className:o?"selected":"",style:{padding:"5px",margin:"0px 1px 5px 1px",backgroundColor:o?"rgb(0, 161, 255, 0.2)":"",display:t.selectable||"admin"===r.role?"auto":"none"}},e.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},e.createElement("div",{style:{lineHeight:"30px",display:"flex"}},e.createElement("div",{className:"drag-handle",style:{display:"flex",justifyContent:"center",alignItems:"center",cursor:"move",height:"30px"}},e.createElement(d,null)),e.createElement("div",{style:{padding:"0 7px",opacity:.5,width:"60px"}},a("sidePanel.layerTypes."+t.type)),e.createElement("div",{style:{maxWidth:"142px"}},e.createElement(n,{minWidth:130,placeholder:a("sidePanel.namePlaceholder"),value:g,maxLines:1,onEdit:()=>y(!0),onCancel:x,onConfirm:x,onChange:e=>{t.set({name:e})}}))),e.createElement("div",null,e.createElement(l,{minimal:!0,icon:(null==t?void 0:t.visible)?e.createElement(u,null):e.createElement(E,null),onClick:()=>{t.set({visible:!t.visible})}}),e.createElement(l,{minimal:!0,icon:(null==t?void 0:t.locked)?e.createElement(c,null):e.createElement(p,null),onClick:()=>{t.set({draggable:t.locked,contentEditable:t.locked,styleEditable:t.locked,resizable:t.locked,removable:t.locked})}}),e.createElement(l,{icon:e.createElement(m,null),minimal:!0,disabled:!t.removable,onClick:()=>{r.deleteElements([t.id])},style:{marginLeft:"auto"}}))))});export const LayersPanel=t(({store:t})=>{var l;const n=(null===(l=t.activePage)||void 0===l?void 0:l.children.map(e=>({id:e.id})))||[];n.reverse();const i=r();return e.createElement("div",{style:{height:"100%",overflow:"auto"}},e.createElement("div",{style:{height:"40px",paddingTop:"5px"}},a("sidePanel.layersTip")),e.createElement("div",null,0===n.length?e.createElement("div",null,a("sidePanel.noLayers")):null,e.createElement(o,{list:n,setList:e=>{e.forEach(({id:l},n)=>{var i,a;const r=e.length-n-1,o=t.getElementById(l);(null===(i=t.activePage)||void 0===i?void 0:i.children.indexOf(o))!==r&&(null===(a=t.activePage)||void 0===a||a.setElementZIndex(o.id,r))})},direction:"horizontal",handle:i?".drag-handle":void 0},n.map(({id:l})=>{const n=t.getElementById(l);return e.createElement(v,{element:n,store:t,key:l})}))))});
1
+ import e from"react";import{observer as t}from"mobx-react-lite";import{Button as l,EditableText as n,Card as i}from"@blueprintjs/core";import{t as a}from"../utils/l10n.js";import{isMobile as r}from"../utils/screen.js";import{ReactSortable as o}from"react-sortablejs";import{removeTags as s}from"../utils/text.js";import{DragHandleVertical as d,Trash as m,Lock as c,Unlock as p,EyeOpen as u,EyeOff as E}from"@blueprintjs/icons";const v=t(({element:t,store:r})=>{const o=r.selectedElements.indexOf(t)>=0,[v,y]=e.useState(!1),x=()=>y(!1),g=v?t.name:t.name||s(t.text)||`#${t.id}`;return e.createElement(i,{onMouseDown:e=>{const l=e.ctrlKey||e.metaKey||e.shiftKey?[...r.selectedElementsIds]:[];l.indexOf(t.id)<0&&l.push(t.id),r.selectElements(l)},className:o?"selected":"",style:{padding:"5px",margin:"0px 1px 5px 1px",backgroundColor:o?"rgb(0, 161, 255, 0.2)":"",display:t.selectable||"admin"===r.role?"auto":"none"}},e.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},e.createElement("div",{style:{lineHeight:"30px",display:"flex"}},e.createElement("div",{className:"drag-handle",style:{display:"flex",justifyContent:"center",alignItems:"center",cursor:"move",height:"30px"}},e.createElement(d,null)),e.createElement("div",{style:{padding:"0 7px",opacity:.5,width:"60px"}},a("sidePanel.layerTypes."+t.type)),e.createElement("div",{style:{maxWidth:"142px"}},e.createElement(n,{minWidth:130,placeholder:a("sidePanel.namePlaceholder"),value:g,maxLines:1,onEdit:()=>y(!0),onCancel:x,onConfirm:x,onChange:e=>{t.set({name:e})}}))),e.createElement("div",null,e.createElement(l,{minimal:!0,icon:(null==t?void 0:t.visible)?e.createElement(u,null):e.createElement(E,null),onClick:()=>{t.set({visible:!t.visible})}}),e.createElement(l,{minimal:!0,icon:(null==t?void 0:t.locked)?e.createElement(c,null):e.createElement(p,null),onClick:()=>{t.set({draggable:t.locked,contentEditable:t.locked,styleEditable:t.locked,resizable:t.locked,removable:t.locked})}}),e.createElement(l,{icon:e.createElement(m,null),minimal:!0,disabled:!t.removable,onClick:()=>{r.deleteElements([t.id])},style:{marginLeft:"auto"}}))))});export const LayersPanel=t(({store:t})=>{var l;const n=(null===(l=t.activePage)||void 0===l?void 0:l.children.map(e=>({id:e.id})))||[];n.reverse();const i=r();return e.createElement("div",{style:{height:"100%",overflow:"auto"}},e.createElement("div",{style:{height:"40px",paddingTop:"5px"}},a("sidePanel.layersTip")),e.createElement("div",null,0===n.length?e.createElement("div",null,a("sidePanel.noLayers")):null,e.createElement(o,{list:n,setList:e=>{e.forEach(({id:l},n)=>{var i,a;const r=e.length-n-1,o=t.getElementById(l),s=null===(i=t.activePage)||void 0===i?void 0:i.children.indexOf(o);o&&s!==r&&(null===(a=t.activePage)||void 0===a||a.setElementZIndex(o.id,r))})},direction:"horizontal",handle:i?".drag-handle":void 0},n.map(({id:l})=>{const n=t.getElementById(l);return e.createElement(v,{element:n,store:t,key:l})}))))});
package/side-panel/select-image.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { StoreType } from '../model/store.js';
2
- import { NodeType } from '../model/node-model.js';
2
+ import { ShapeType } from '../model/shape-model.js';
3
3
  type Props = {
4
4
  store: StoreType;
5
5
  src: string;
@@ -7,7 +7,7 @@ type Props = {
7
7
  x: number;
8
8
  y: number;
9
9
  };
10
- targetElement?: NodeType;
10
+ targetElement?: ShapeType;
11
11
  };
12
12
  export declare const selectImage: ({ src, droppedPos, targetElement, store, }: Props) => Promise<void>;
13
13
  export {};
package/side-panel/select-svg.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { StoreType } from '../model/store.js';
2
- import { NodeType } from '../model/node-model.js';
2
+ import { ShapeType } from '../model/shape-model.js';
3
3
  type Props = {
4
4
  store: StoreType;
5
5
  src: string;
@@ -7,7 +7,7 @@ type Props = {
7
7
  x: number;
8
8
  y: number;
9
9
  };
10
- targetElement?: NodeType;
10
+ targetElement?: ShapeType;
11
11
  };
12
12
  export declare const selectSvg: ({ src, droppedPos, targetElement, store, }: Props) => Promise<void>;
13
13
  export {};
package/side-panel/select-video.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { StoreType } from '../model/store.js';
2
- import { NodeType } from '../model/node-model.js';
2
+ import { ShapeType } from '../model/shape-model.js';
3
3
  type Props = {
4
4
  store: StoreType;
5
5
  src: string;
@@ -7,7 +7,7 @@ type Props = {
7
7
  x: number;
8
8
  y: number;
9
9
  };
10
- targetElement?: NodeType;
10
+ targetElement?: ShapeType;
11
11
  attrs?: any;
12
12
  };
13
13
  export declare const selectVideo: ({ src, droppedPos, targetElement, store, attrs, }: Props) => Promise<(import("mobx-state-tree").ModelInstanceTypeProps<{
@@ -148,7 +148,7 @@ export declare const selectVideo: ({ src, droppedPos, targetElement, store, attr
148
148
  } & {
149
149
  clone(attrs?: any, { skipSelect }?: {
150
150
  skipSelect?: boolean | undefined;
151
- }): NodeType;
151
+ }): import("../model/node-model.js").NodeType;
152
152
  set(attrs: any): void;
153
153
  moveUp(): void;
154
154
  moveTop(): void;
@@ -158,7 +158,7 @@ export declare const selectVideo: ({ src, droppedPos, targetElement, store, attr
158
158
  beforeDestroy(): void;
159
159
  } & {
160
160
  readonly locked: boolean;
161
- readonly a: Record<string, any>;
161
+ readonly a: import("../model/shape-model.js").AnimatedAttrs;
162
162
  animated(attr: any): any;
163
163
  } & {
164
164
  setAnimation(type: any, attrs: any): void;
@@ -306,7 +306,7 @@ export declare const selectVideo: ({ src, droppedPos, targetElement, store, attr
306
306
  } & {
307
307
  clone(attrs?: any, { skipSelect }?: {
308
308
  skipSelect?: boolean | undefined;
309
- }): NodeType;
309
+ }): import("../model/node-model.js").NodeType;
310
310
  set(attrs: any): void;
311
311
  moveUp(): void;
312
312
  moveTop(): void;
@@ -316,7 +316,7 @@ export declare const selectVideo: ({ src, droppedPos, targetElement, store, attr
316
316
  beforeDestroy(): void;
317
317
  } & {
318
318
  readonly locked: boolean;
319
- readonly a: Record<string, any>;
319
+ readonly a: import("../model/shape-model.js").AnimatedAttrs;
320
320
  animated(attr: any): any;
321
321
  } & {
322
322
  setAnimation(type: any, attrs: any): void;
package/side-panel/text-panel.js CHANGED
@@ -1,4 +1,4 @@
1
- var t=this&&this.__rest||function(t,e){var o={};for(var n in t){Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(t);i<n.length;i++){e.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(t,n[i])&&(o[n[i]]=t[n[i]])}}return o};import e from"react";import{observer as o}from"mobx-react-lite";import{Button as n,Tab as i,Tabs as l}from"@blueprintjs/core";import a from"swr";import{Upload as r,Trash as s}from"@blueprintjs/icons";import{t as c}from"../utils/l10n.js";import m from"../utils/styled.js";import{isMobile as f}from"../utils/screen.js";import{ImagesGrid as d}from"./images-grid.js";import{textTemplateList as p}from"../utils/api.js";import{fetcher as y}from"../utils/use-api.js";import{localFileToURL as g}from"../utils/file.js";import{registerNextDomDrop as h}from"../canvas/page.js";const u=m("div")`
1
+ var t=this&&this.__rest||function(t,e){var o={};for(var n in t){Object.prototype.hasOwnProperty.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n])}if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(n=Object.getOwnPropertySymbols(t);i<n.length;i++){e.indexOf(n[i])<0&&Object.prototype.propertyIsEnumerable.call(t,n[i])&&(o[n[i]]=t[n[i]])}}return o};import e from"react";import{observer as o}from"mobx-react-lite";import{Button as n,Tab as i,Tabs as l}from"@blueprintjs/core";import a from"swr";import{Upload as r,Trash as s}from"@blueprintjs/icons";import{t as c}from"../utils/l10n.js";import m from"../utils/styled.js";import{isMobile as f}from"../utils/screen.js";import{ImagesGrid as d}from"./images-grid.js";import{textTemplateList as p}from"../utils/api.js";import{fetcher as g}from"../utils/use-api.js";import{localFileToURL as y}from"../utils/file.js";import{registerNextDomDrop as h}from"../canvas/page.js";const x=m("div")`
2
2
  height: calc(100% - 40px);
3
3
  display: flex;
4
4
  flex-direction: column;
@@ -6,7 +6,7 @@ var t=this&&this.__rest||function(t,e){var o={};for(var n in t){Object.prototype
6
6
  .bp5-dark & .polotno-text-preview-plain {
7
7
  filter: invert(1);
8
8
  }
9
- `,x=m("div")`
9
+ `,u=m("div")`
10
10
  height: 100px;
11
11
  cursor: pointer;
12
12
  box-shadow: 0 0 5px rgba(16, 22, 26, 0.3);
@@ -21,4 +21,4 @@ var t=this&&this.__rest||function(t,e){var o={};for(var n in t){Object.prototype
21
21
  text-align: center;
22
22
  color: white;
23
23
  margin-bottom: 10px;
24
- `;let b=async t=>g(t);export function setFontUploadFunc(t){b=t}const v=o(({onSelect:t,onRemove:o,font:i})=>e.createElement(x,{style:{fontFamily:i.fontFamily},className:"polotno-font-item",onClick:t},i.fontFamily," text",e.createElement(n,{style:{position:"absolute",right:0,bottom:0},minimal:!0,icon:e.createElement(s,null),onClick:t=>{t.stopPropagation(),o()}}))),w=o=>{var{onSelect:i}=o,l=t(o,["onSelect"]);return e.createElement(n,Object.assign({},l,{draggable:!0,className:"polotno-close-panel",onClick:()=>i(),onDragStart:()=>{h(({x:t,y:e})=>{i({x:t,y:e})})},onDragEnd:t=>{h(null)}}))};export const TextPanel=o(({store:t})=>{e.useEffect(()=>{t.loadFont("Roboto")},[]);const o=e=>{var o;const n=e.width||t.width/2,i=((null==e?void 0:e.x)||t.width/2)-n/2,l=((null==e?void 0:e.y)||t.height/2)-e.fontSize/2,a=(t.width+t.height)/2160,r=null===(o=t.activePage)||void 0===o?void 0:o.addElement(Object.assign(Object.assign({type:"text",fontFamily:"Roboto"},e),{x:i,y:l,width:n,fontSize:e.fontSize*a}));f()||null==r||r.toggleEditMode(!0)};e.useEffect(()=>{t.fonts.forEach(e=>t.loadFont(e.fontFamily))},[t.fonts]);const{data:s,error:m}=a(p(),y),[g,h]=e.useState("text");return e.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},e.createElement(l,{id:"text-panel-tabs",large:!0,onChange:t=>h(t)},e.createElement(i,{id:"text"},c("sidePanel.text")),e.createElement(i,{id:"font"},c("sidePanel.myFonts"))),"text"===g&&e.createElement(u,null,e.createElement(w,{style:{marginBottom:"5px",width:"100%",fontSize:"25px",fontFamily:"Roboto"},minimal:!0,onSelect:t=>{o(Object.assign(Object.assign({},t),{fontSize:76,text:c("sidePanel.headerText"),fontFamily:"Roboto"}))}},c("sidePanel.createHeader")),e.createElement(w,{style:{marginBottom:"5px",width:"100%",fontSize:"18px",fontFamily:"Roboto"},minimal:!0,onSelect:t=>{o(Object.assign(Object.assign({},t),{fontSize:44,text:c("sidePanel.subHeaderText"),fontFamily:"Roboto"}))}},c("sidePanel.createSubHeader")),e.createElement(w,{style:{marginBottom:"5px",width:"100%",fontSize:"14px",fontFamily:"Roboto"},minimal:!0,onSelect:t=>{o(Object.assign(Object.assign({},t),{fontSize:30,text:c("sidePanel.bodyText"),fontFamily:"Roboto"}))}},c("sidePanel.createBody")),e.createElement(d,{shadowEnabled:!1,images:null==s?void 0:s.items,getPreview:t=>t.preview,getImageClassName:t=>t.json.indexOf("plain")>=0?"polotno-text-preview-plain":"",isLoading:!s,error:m,onSelect:async(e,o)=>{const n=await fetch(e.json),i=await n.json();if(!t.activePage){return}const l=(t.width+t.height)/2160,a=o?o.x-i.width/2*l:t.width/2-i.width/2*l,r=o?o.y-i.height/2*l:t.height/2-i.height/2*l;t.history.transaction(()=>{const e=i.pages[0].children,o=[];e.forEach(e=>{var n;delete e.id;const{id:i}=null===(n=t.activePage)||void 0===n?void 0:n.addElement(Object.assign(Object.assign({},e),{fontSize:e.fontSize*l,x:e.x*l+a,y:e.y*l+r,width:e.width*l,height:e.height*l}));o.push(i)}),t.selectElements(o)})}})),"font"===g&&e.createElement("div",{style:{display:"flex",flexDirection:"column",height:"calc(100% - 50px)"}},e.createElement("label",{htmlFor:"polotno-font-upload"},e.createElement(n,{icon:e.createElement(r,null),style:{width:"100%"},onClick:()=>{var t;null===(t=document.querySelector("#polotno-font-upload"))||void 0===t||t.click()}},c("sidePanel.uploadFont")),e.createElement("input",{type:"file",accept:".ttf, .otf, .woff, .woff2, .eot",id:"polotno-font-upload",style:{display:"none"},onChange:async e=>{const{target:o}=e;for(const n of o.files){const e=await b(n),o=n.name.split(".")[0].replace(/,/g,"");t.addFont({fontFamily:o,url:e})}o.value=null}})),e.createElement("div",{style:{paddingTop:"20px",overflow:"auto",height:"100%"}},t.fonts.map((n,i)=>e.createElement(v,{font:n,key:i,onSelect:()=>{o({fontSize:80,text:"Cool text",fontFamily:n.fontFamily})},onRemove:()=>{t.find(t=>{"text"===t.type&&t.fontFamily===n.fontFamily&&t.set({fontFamily:"Roboto"})}),t.removeFont(n.fontFamily)}})))))});
24
+ `;let b=async t=>y(t);export function setFontUploadFunc(t){b=t}const v=o(({onSelect:t,onRemove:o,font:i})=>e.createElement(u,{style:{fontFamily:i.fontFamily},className:"polotno-font-item",onClick:t},i.fontFamily," text",e.createElement(n,{style:{position:"absolute",right:0,bottom:0},minimal:!0,icon:e.createElement(s,null),onClick:t=>{t.stopPropagation(),o()}}))),w=o=>{var{onSelect:i}=o,l=t(o,["onSelect"]);return e.createElement(n,Object.assign({},l,{draggable:!0,className:"polotno-close-panel",onClick:()=>i(),onDragStart:()=>{h(({x:t,y:e})=>{i({x:t,y:e})})},onDragEnd:t=>{h(null)}}))};export const TextPanel=o(({store:t})=>{e.useEffect(()=>{t.loadFont("Roboto")},[]);const o=e=>{var o;const n=e.width||t.width/2,i=((null==e?void 0:e.x)||t.width/2)-n/2,l=((null==e?void 0:e.y)||t.height/2)-e.fontSize/2,a=(t.width+t.height)/2160,r=null===(o=t.activePage)||void 0===o?void 0:o.addElement(Object.assign(Object.assign({type:"text",fontFamily:"Roboto"},e),{x:i,y:l,width:n,fontSize:e.fontSize*a}));f()||null==r||r.toggleEditMode(!0)};e.useEffect(()=>{t.fonts.forEach(e=>t.loadFont(e.fontFamily))},[t.fonts]);const{data:s,error:m}=a(p(),g),[y,h]=e.useState("text");return e.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},e.createElement(l,{id:"text-panel-tabs",large:!0,onChange:t=>h(String(t))},e.createElement(i,{id:"text"},c("sidePanel.text")),e.createElement(i,{id:"font"},c("sidePanel.myFonts"))),"text"===y&&e.createElement(x,null,e.createElement(w,{style:{marginBottom:"5px",width:"100%",fontSize:"25px",fontFamily:"Roboto"},minimal:!0,onSelect:t=>{o(Object.assign(Object.assign({},t),{fontSize:76,text:c("sidePanel.headerText"),fontFamily:"Roboto"}))}},c("sidePanel.createHeader")),e.createElement(w,{style:{marginBottom:"5px",width:"100%",fontSize:"18px",fontFamily:"Roboto"},minimal:!0,onSelect:t=>{o(Object.assign(Object.assign({},t),{fontSize:44,text:c("sidePanel.subHeaderText"),fontFamily:"Roboto"}))}},c("sidePanel.createSubHeader")),e.createElement(w,{style:{marginBottom:"5px",width:"100%",fontSize:"14px",fontFamily:"Roboto"},minimal:!0,onSelect:t=>{o(Object.assign(Object.assign({},t),{fontSize:30,text:c("sidePanel.bodyText"),fontFamily:"Roboto"}))}},c("sidePanel.createBody")),e.createElement(d,{shadowEnabled:!1,images:null==s?void 0:s.items,getPreview:t=>t.preview,getImageClassName:t=>t.json.indexOf("plain")>=0?"polotno-text-preview-plain":"",isLoading:!s,error:m,onSelect:async(e,o)=>{const n=await fetch(e.json),i=await n.json();if(!t.activePage){return}const l=(t.width+t.height)/2160,a=o?o.x-i.width/2*l:t.width/2-i.width/2*l,r=o?o.y-i.height/2*l:t.height/2-i.height/2*l;t.history.transaction(()=>{const e=i.pages[0].children,o=[];e.forEach(e=>{delete e.id;const{id:n}=t.activePage.addElement(Object.assign(Object.assign({},e),{fontSize:e.fontSize*l,x:e.x*l+a,y:e.y*l+r,width:e.width*l,height:e.height*l}));o.push(n)}),t.selectElements(o)})}})),"font"===y&&e.createElement("div",{style:{display:"flex",flexDirection:"column",height:"calc(100% - 50px)"}},e.createElement("label",{htmlFor:"polotno-font-upload"},e.createElement(n,{icon:e.createElement(r,null),style:{width:"100%"},onClick:()=>{var t;null===(t=document.querySelector("#polotno-font-upload"))||void 0===t||t.click()}},c("sidePanel.uploadFont")),e.createElement("input",{type:"file",accept:".ttf, .otf, .woff, .woff2, .eot",id:"polotno-font-upload",style:{display:"none"},onChange:async e=>{const{target:o}=e;for(const n of o.files){const e=await b(n),o=n.name.split(".")[0].replace(/,/g,"");t.addFont({fontFamily:o,url:e})}o.value=null}})),e.createElement("div",{style:{paddingTop:"20px",overflow:"auto",height:"100%"}},t.fonts.map((n,i)=>e.createElement(v,{font:n,key:i,onSelect:()=>{o({fontSize:80,text:"Cool text",fontFamily:n.fontFamily})},onRemove:()=>{t.find(t=>("text"===t.type&&t.fontFamily===n.fontFamily&&t.set({fontFamily:"Roboto"}),!1)),t.removeFont(n.fontFamily)}})))))});
package/side-panel/upload-panel.js CHANGED
@@ -1 +1 @@
1
- import e from"react";import{Button as t}from"@blueprintjs/core";import{Plus as o}from"@blueprintjs/icons";import{getVideoPreview as i}from"../utils/video.js";import{localFileToURL as r}from"../utils/file.js";import{ImagesGrid as n}from"./images-grid.js";import{t as s}from"../utils/l10n.js";import{selectImage as l}from"./select-image.js";import{selectVideo as c}from"./select-video.js";import{selectSvg as a}from"./select-svg.js";import{selectGif as d}from"./select-gif.js";let m=async e=>r(e);export function setUploadFunc(e){m=e}let p=[];function f(e){const{type:t}=e;return t.indexOf("svg")>=0?"svg":t.indexOf("gif")>=0?"gif":t.indexOf("image")>=0?"image":t.indexOf("video")>=0?"video":t.indexOf("audio")>=0?"audio":"image"}function u(){const e=new Blob(['\n <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">\n <circle cx="50" cy="50" r="45" fill="#f0f0f0" stroke="#ccc" stroke-width="2"/>\n <path d="M40,35 L40,65 L55,50 L70,50 M70,35 Q80,50 70,65" fill="none" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n '],{type:"image/svg+xml"});return URL.createObjectURL(e)}export const UploadPanel=({store:r})=>{const[g,v]=e.useState(p),[y,h]=e.useState(!1),x=e.useRef(null);return e.useEffect(()=>{p=g},[g]),e.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},e.createElement("div",{style:{height:"45px",paddingTop:"5px"}},s("sidePanel.uploadTip")),e.createElement("div",{style:{marginBottom:"20px"}},e.createElement("label",{htmlFor:"input-file"},e.createElement(t,{icon:e.createElement(o,null),style:{width:"100%"},onClick:()=>{var e;null===(e=x.current)||void 0===e||e.click()}},s("sidePanel.uploadImage")),e.createElement("input",{type:"file",ref:x,style:{display:"none"},onChange:async e=>{const{target:t}=e;h(!0);try{for(const e of t.files){const t=await m(e),o=f(e);let r=t;"video"===o?r=await i(t):"audio"===o&&(r=u()),v(e=>e.concat([{url:t,type:o,preview:r}]))}}catch(e){console.error(e)}h(!1),t.value=""},multiple:!0}))),e.createElement(n,{images:g,isLoading:y,getPreview:e=>e.preview,hideNoResults:!0,onSelect:async(e,t,o)=>{const i=e.url,n=e.type;"image"===n?l({src:i,store:r,droppedPos:t,targetElement:o}):"video"===n?c({src:i,store:r,droppedPos:t,targetElement:o}):"gif"===n?d({src:i,store:r,droppedPos:t,targetElement:o}):"svg"===n?a({src:i,store:r,droppedPos:t,targetElement:o}):"audio"===n&&r.addAudio({src:i})}}))};
1
+ import e from"react";import{Button as t}from"@blueprintjs/core";import{Plus as o}from"@blueprintjs/icons";import{getVideoPreview as i}from"../utils/video.js";import{localFileToURL as r}from"../utils/file.js";import{ImagesGrid as n}from"./images-grid.js";import{t as s}from"../utils/l10n.js";import{selectImage as l}from"./select-image.js";import{selectVideo as a}from"./select-video.js";import{selectSvg as c}from"./select-svg.js";import{selectGif as d}from"./select-gif.js";let m=async e=>r(e);export function setUploadFunc(e){m=e}let p=[];function f(e){const{type:t}=e;return t.indexOf("svg")>=0?"svg":t.indexOf("gif")>=0?"gif":t.indexOf("image")>=0?"image":t.indexOf("video")>=0?"video":t.indexOf("audio")>=0?"audio":"image"}function u(){const e=new Blob(['\n <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">\n <circle cx="50" cy="50" r="45" fill="#f0f0f0" stroke="#ccc" stroke-width="2"/>\n <path d="M40,35 L40,65 L55,50 L70,50 M70,35 Q80,50 70,65" fill="none" stroke="#666" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>\n </svg>\n '],{type:"image/svg+xml"});return URL.createObjectURL(e)}export const UploadPanel=({store:r})=>{const[g,v]=e.useState(p),[y,h]=e.useState(!1),x=e.useRef(null);return e.useEffect(()=>{p=g},[g]),e.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},e.createElement("div",{style:{height:"45px",paddingTop:"5px"}},s("sidePanel.uploadTip")),e.createElement("div",{style:{marginBottom:"20px"}},e.createElement("label",{htmlFor:"input-file"},e.createElement(t,{icon:e.createElement(o,null),style:{width:"100%"},onClick:()=>{var e;null===(e=x.current)||void 0===e||e.click()}},s("sidePanel.uploadImage")),e.createElement("input",{type:"file",ref:x,style:{display:"none"},onChange:async e=>{var t;const{target:o}=e;h(!0);try{for(const e of Array.from(null!==(t=o.files)&&void 0!==t?t:[])){const t=await m(e),o=f(e);let r=t;"video"===o?r=await i(t):"audio"===o&&(r=u()),v(e=>e.concat([{url:t,type:o,preview:r}]))}}catch(e){console.error(e)}h(!1),o.value=""},multiple:!0}))),e.createElement(n,{images:g,isLoading:y,getPreview:e=>e.preview,hideNoResults:!0,onSelect:async(e,t,o)=>{const i=e.url,n=e.type;"image"===n?l({src:i,store:r,droppedPos:t,targetElement:o}):"video"===n?a({src:i,store:r,droppedPos:t,targetElement:o}):"gif"===n?d({src:i,store:r,droppedPos:t,targetElement:o}):"svg"===n?c({src:i,store:r,droppedPos:t,targetElement:o}):"audio"===n&&r.addAudio({src:i})}}))};
package/side-panel/videos-grid.js CHANGED
@@ -1,7 +1,7 @@
1
- import e,{useCallback as t,useRef as r}from"react";import n from"../utils/styled.js";import{Spinner as i}from"@blueprintjs/core";import{registerNextDomDrop as o}from"../canvas/page.js";const a=n("div")`
1
+ import e,{useCallback as t,useRef as r}from"react";import n from"../utils/styled.js";import{Spinner as i}from"@blueprintjs/core";import{registerNextDomDrop as o}from"../canvas/page.js";const l=n("div")`
2
2
  height: 100%;
3
3
  overflow: auto;
4
- `,l=n("div")`
4
+ `,a=n("div")`
5
5
  width: 50%;
6
6
  float: left;
7
7
  `,c=n("div")`
@@ -53,4 +53,4 @@ import e,{useCallback as t,useRef as r}from"react";import n from"../utils/styled
53
53
  color: white;
54
54
  font-size: 10px;
55
55
  text-align: center;
56
- `;export const VideosGrid=({items:n,onSelect:c,loadMore:d,isLoading:s,error:u,getCredit:g})=>{const p=r(null),f=t(e=>{s||(p.current&&p.current.disconnect(),p.current=new IntersectionObserver(e=>{e[0].isIntersecting&&d()}),e&&p.current.observe(e))},[s]);if(u){return e.createElement("div",null,u.message)}if(!n||0===n.length){return null}const b=n.filter((e,t)=>t%2==1),h=n.filter((e,t)=>t%2==0);return e.createElement(a,null,[b,h].map((t,r)=>e.createElement(l,{key:r},t.map(t=>e.createElement(v,{key:t.id,item:t,onClick:()=>c(t),onDragStart:e=>{o((e,r)=>{c(t,e,r)})},onDragEnd:()=>o(null),getCredit:g})),e.createElement(m,{ref:f},s&&e.createElement(i,null)))))};const v=({item:t,onClick:n,onDragEnd:i,onDragStart:o,getCredit:a})=>{var l;const m=r(null),v=(null===(l=t.video_files.find(e=>"sd"===e.quality))||void 0===l?void 0:l.link)||"";if(!v){return null}const f=new Date(1e3*t.duration).toISOString();let b;return b=t.duration>3600?f.substring(11,19):f.substring(14,19),e.createElement(c,null,e.createElement(d,{draggable:!0,onClick:n,onDragEnd:i,onDragStart:o,onMouseEnter:()=>{var e;null===(e=m.current.play())||void 0===e||e.catch(()=>{})},onMouseLeave:()=>{var e;null===(e=m.current.pause())||void 0===e||e.catch(()=>{}),m.current.currentTime=0}},e.createElement(s,{poster:t.video_pictures[0].picture,controls:!1,ref:m,muted:!0,preload:"none",playsInline:!0},e.createElement("source",{src:v})),e.createElement(u,null,e.createElement(g,null,b)),a&&e.createElement(p,{className:"video-grid__item-credit"},a(t))))};
56
+ `;export const VideosGrid=({items:n,onSelect:c,loadMore:d,isLoading:s,error:u,getCredit:g})=>{const p=r(null),f=t(e=>{s||(p.current&&p.current.disconnect(),p.current=new IntersectionObserver(e=>{e[0].isIntersecting&&d()}),e&&p.current.observe(e))},[s]);if(u){return e.createElement("div",null,u.message)}if(!n||0===n.length){return null}const b=n.filter((e,t)=>t%2==1),h=n.filter((e,t)=>t%2==0);return e.createElement(l,null,[b,h].map((t,r)=>e.createElement(a,{key:r},t.map(t=>e.createElement(v,{key:t.id,item:t,onClick:()=>c(t),onDragStart:e=>{o((e,r)=>{c(t,e,r)})},onDragEnd:()=>o(null),getCredit:g})),e.createElement(m,{ref:f},s&&e.createElement(i,null)))))};const v=({item:t,onClick:n,onDragEnd:i,onDragStart:o,getCredit:l})=>{var a;const m=r(null),v=(null===(a=t.video_files.find(e=>"sd"===e.quality))||void 0===a?void 0:a.link)||"";if(!v){return null}const f=new Date(1e3*t.duration).toISOString();let b;return b=t.duration>3600?f.substring(11,19):f.substring(14,19),e.createElement(c,null,e.createElement(d,{draggable:!0,onClick:n,onDragEnd:i,onDragStart:o,onMouseEnter:()=>{var e,t;null===(t=null===(e=m.current)||void 0===e?void 0:e.play())||void 0===t||t.catch(()=>{})},onMouseLeave:()=>{var e;null===(e=m.current)||void 0===e||e.pause(),m.current&&(m.current.currentTime=0)}},e.createElement(s,{poster:t.video_pictures[0].picture,controls:!1,ref:m,muted:!0,preload:"none",playsInline:!0},e.createElement("source",{src:v})),e.createElement(u,null,e.createElement(g,null,b)),l&&e.createElement(p,{className:"video-grid__item-credit"},l(t))))};
package/toolbar/animations-picker.d.ts CHANGED
@@ -13,5 +13,10 @@ export declare const AnimationsPickerOld: (({ element, store, elements, }: {
13
13
  }) => React.JSX.Element) & {
14
14
  displayName: string;
15
15
  };
16
- export declare const AnimationsPicker: React.FunctionComponent<object>;
16
+ export declare const AnimationsPicker: (({ element, store }: {
17
+ element: ShapeType;
18
+ store: StoreType;
19
+ }) => React.JSX.Element | null) & {
20
+ displayName: string;
21
+ };
17
22
  export default AnimationsPicker;
package/toolbar/animations-picker.js CHANGED
@@ -1 +1 @@
1
- var e=this&&this.__rest||function(e,t){var n={};for(var a in e){Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(a=Object.getOwnPropertySymbols(e);i<a.length;i++){t.indexOf(a[i])<0&&Object.prototype.propertyIsEnumerable.call(e,a[i])&&(n[a[i]]=e[a[i]])}}return n};import t from"react";import{Button as n,Position as a,Switch as i,Slider as o,Alignment as l,NumericInput as r,ButtonGroup as m,MenuItem as d,Popover as s}from"@blueprintjs/core";import{Select as c}from"@blueprintjs/select";import{observer as p}from"mobx-react-lite";import{t as u}from"../utils/l10n.js";export const NumberInput=n=>{var{value:a,onValueChange:i}=n,o=e(n,["value","onValueChange"]);const[l,m]=t.useState(a.toString());return t.useEffect(()=>{m(a.toString())},[a]),t.createElement(r,Object.assign({value:l,onValueChange:(e,t)=>{m(t),Number.isNaN(e)||i(e)}},o))};const b=p(({element:e,store:a,enabled:i})=>{const o=e.animations.find(e=>"enter"===e.type),l=e.animations.find(e=>"exit"===e.type);return i?t.createElement(m,{style:{width:"100%"}},t.createElement(n,{fill:!0,active:(null==o?void 0:o.enabled)&&!(null==l?void 0:l.enabled),onClick:()=>{a.history.transaction(()=>{e.setAnimation("enter",{enabled:!0}),e.setAnimation("exit",{enabled:!1})})}},"Enter"),t.createElement(n,{fill:!0,active:(null==o?void 0:o.enabled)&&(null==l?void 0:l.enabled),onClick:()=>{a.history.transaction(()=>{e.setAnimation("enter",{enabled:!0}),e.setAnimation("exit",{enabled:!0})})}},"Both"),t.createElement(n,{fill:!0,active:(null==l?void 0:l.enabled)&&!(null==o?void 0:o.enabled),onClick:()=>{a.history.transaction(()=>{e.setAnimation("enter",{enabled:!1}),e.setAnimation("exit",{enabled:!0})})}},"Exit")):null}),v=(e,{handleClick:n,handleFocus:a,modifiers:i,query:o})=>i.matchesPredicate?t.createElement(d,{active:i.active,disabled:i.disabled,key:e,onClick:n,icon:"arrow-"+e,onFocus:a,roleStructure:"listoption",text:e,shouldDismissPopover:!1}):null,g=["right","left","up","down","bottom-right","bottom-left","top-right","top-left"],h=p(({value:e,onChange:a})=>t.createElement("div",{style:{paddingTop:"10px"}},t.createElement(c,{items:g,itemRenderer:v,filterable:!1,activeItem:e,onItemSelect:e=>{a(e)}},t.createElement(n,{text:e,icon:"arrow-"+e,fill:!0})))),f=p(({element:e,store:n})=>{const a=e.animations.find(e=>"enter"===e.type);return a?t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"Delay"),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat((a.delay/1e3).toFixed(2)),onValueChange:t=>{e.setAnimation("enter",{delay:1e3*t})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:0,max:2.5,buttonPosition:"none"}))),t.createElement(o,{min:0,max:1e3,value:a.delay,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("enter",{delay:t})}})):null}),y=p(({element:e,store:n})=>{const a=e.animations.find(e=>"enter"===e.type);return a?t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"Duration"),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat((a.duration/1e3).toFixed(2)),onValueChange:t=>{e.setAnimation("enter",{duration:1e3*t}),e.setAnimation("exit",{duration:1e3*t})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:0,max:2.5,buttonPosition:"none"}))),t.createElement(o,{min:0,max:2500,value:a.duration,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("enter",{duration:t}),e.setAnimation("exit",{duration:t})}})):null});export const AnimationsPickerOld=p(({element:e,store:o,elements:r})=>{var m,d;const c=r||[e],p=c[0],v=(p.type,p.type,p.type,(e,t)=>{o.history.transaction(()=>{c.forEach(n=>{n.setAnimation("enter",Object.assign({name:e},t)),n.setAnimation("exit",Object.assign(Object.assign({name:e},t),{from:t.to,to:t.from}))})}),t.enabled&&(o.play({animatedElementsIds:c.map(e=>e.id),currentTime:p.page.startTime}),setTimeout(()=>{o.stop()},1e3))}),g=(e,t)=>{var n;return!!((e?null===(n=p.animations)||void 0===n?void 0:n.filter(t=>t.name===e):p.animations)||[]).find(e=>e.enabled)};return t.createElement(s,{hasBackdrop:!1,autoFocus:!1,content:t.createElement("div",{style:{padding:"15px",paddingTop:"25px",width:"230px"}},t.createElement(i,{checked:g("fade"),label:u("toolbar.fade"),onChange:e=>{v("fade",{enabled:e.target.checked})},alignIndicator:l.RIGHT}),t.createElement(i,{checked:g("move"),label:u("toolbar.move"),onChange:e=>{v("move",{enabled:e.target.checked})},alignIndicator:l.RIGHT}),t.createElement(i,{checked:g("zoom"),label:u("toolbar.zoom"),onChange:e=>{v("zoom",{enabled:e.target.checked})},alignIndicator:l.RIGHT}),t.createElement(b,{element:p,store:o,name:"move",enabled:g()}),g("move")&&t.createElement(h,{value:(null===(d=null===(m=p.animations.find(e=>"move"===e.name))||void 0===m?void 0:m.data)||void 0===d?void 0:d.direction)||"right",onChange:e=>{v("move",{data:{direction:e},enabled:!0})}}),g()&&t.createElement(f,{store:o,element:e}),g()&&t.createElement(y,{store:o,element:e}),t.createElement(i,{checked:g("rotate"),label:u("toolbar.rotate"),onChange:e=>{var t;t={enabled:e.target.checked},o.history.transaction(()=>{c.forEach(e=>{e.setAnimation("loop",Object.assign({name:"rotate"},t))})}),t.enabled&&(o.play({animatedElementsIds:c.map(e=>e.id),currentTime:p.page.startTime}),setTimeout(()=>{o.stop()},1e3))},alignIndicator:l.RIGHT})),position:a.BOTTOM},t.createElement(n,{text:u("toolbar.animate"),minimal:!0}))});export const AnimationsPicker=p(({element:e,store:a})=>e.contentEditable?t.createElement(n,{minimal:!0,text:u("toolbar.animate"),onClickCapture:e=>{e.stopPropagation(),a.openSidePanel("animation")}}):null);export default AnimationsPicker;
1
+ var e=this&&this.__rest||function(e,t){var n={};for(var a in e){Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(n[a]=e[a])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(a=Object.getOwnPropertySymbols(e);i<a.length;i++){t.indexOf(a[i])<0&&Object.prototype.propertyIsEnumerable.call(e,a[i])&&(n[a[i]]=e[a[i]])}}return n};import t from"react";import{Button as n,Position as a,Switch as i,Slider as o,Alignment as l,NumericInput as r,ButtonGroup as m,MenuItem as d,Popover as s}from"@blueprintjs/core";import{Select as c}from"@blueprintjs/select";import{observer as p}from"mobx-react-lite";import{t as u}from"../utils/l10n.js";export const NumberInput=n=>{var{value:a,onValueChange:i}=n,o=e(n,["value","onValueChange"]);const[l,m]=t.useState(a.toString());return t.useEffect(()=>{m(a.toString())},[a]),t.createElement(r,Object.assign({value:l,onValueChange:(e,t)=>{m(t),Number.isNaN(e)||i(e)}},o))};const b=p(({element:e,store:a,enabled:i})=>{const o=e.animations.find(e=>"enter"===e.type),l=e.animations.find(e=>"exit"===e.type);return i?t.createElement(m,{style:{width:"100%"}},t.createElement(n,{fill:!0,active:(null==o?void 0:o.enabled)&&!(null==l?void 0:l.enabled),onClick:()=>{a.history.transaction(()=>{e.setAnimation("enter",{enabled:!0}),e.setAnimation("exit",{enabled:!1})})}},"Enter"),t.createElement(n,{fill:!0,active:(null==o?void 0:o.enabled)&&(null==l?void 0:l.enabled),onClick:()=>{a.history.transaction(()=>{e.setAnimation("enter",{enabled:!0}),e.setAnimation("exit",{enabled:!0})})}},"Both"),t.createElement(n,{fill:!0,active:(null==l?void 0:l.enabled)&&!(null==o?void 0:o.enabled),onClick:()=>{a.history.transaction(()=>{e.setAnimation("enter",{enabled:!1}),e.setAnimation("exit",{enabled:!0})})}},"Exit")):null}),v=(e,{handleClick:n,handleFocus:a,modifiers:i})=>i.matchesPredicate?t.createElement(d,{active:i.active,disabled:i.disabled,key:e,onClick:n,icon:"arrow-"+e,onFocus:a,roleStructure:"listoption",text:e,shouldDismissPopover:!1}):null,g=["right","left","up","down","bottom-right","bottom-left","top-right","top-left"],h=p(({value:e,onChange:a})=>t.createElement("div",{style:{paddingTop:"10px"}},t.createElement(c,{items:g,itemRenderer:v,filterable:!1,activeItem:e,onItemSelect:e=>{a(e)}},t.createElement(n,{text:e,icon:"arrow-"+e,fill:!0})))),f=p(({element:e,store:n})=>{const a=e.animations.find(e=>"enter"===e.type);return a?t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"Delay"),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat((a.delay/1e3).toFixed(2)),onValueChange:t=>{e.setAnimation("enter",{delay:1e3*t})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:0,max:2.5,buttonPosition:"none"}))),t.createElement(o,{min:0,max:1e3,value:a.delay,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("enter",{delay:t})}})):null}),y=p(({element:e,store:n})=>{const a=e.animations.find(e=>"enter"===e.type);return a?t.createElement("div",{style:{padding:"10px"}},t.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},t.createElement("div",null,"Duration"),t.createElement("div",null,t.createElement(NumberInput,{value:parseFloat((a.duration/1e3).toFixed(2)),onValueChange:t=>{e.setAnimation("enter",{duration:1e3*t}),e.setAnimation("exit",{duration:1e3*t})},style:{width:"50px"},minorStepSize:.01,stepSize:.01,min:0,max:2.5,buttonPosition:"none"}))),t.createElement(o,{min:0,max:2500,value:a.duration,showTrackFill:!1,labelRenderer:!1,onChange:t=>{e.setAnimation("enter",{duration:t}),e.setAnimation("exit",{duration:t})}})):null});export const AnimationsPickerOld=p(({element:e,store:o,elements:r})=>{var m,d;const c=r||[e],p=c[0],v=(p.type,p.type,p.type,(e,t)=>{o.history.transaction(()=>{c.forEach(n=>{n.setAnimation("enter",Object.assign({name:e},t)),n.setAnimation("exit",Object.assign(Object.assign({name:e},t),{from:t.to,to:t.from}))})}),t.enabled&&(o.play({animatedElementsIds:c.map(e=>e.id),currentTime:p.page.startTime}),setTimeout(()=>{o.stop()},1e3))}),g=(e,t)=>{var n;return!!((e?null===(n=p.animations)||void 0===n?void 0:n.filter(t=>t.name===e):p.animations)||[]).find(e=>e.enabled)};return t.createElement(s,{hasBackdrop:!1,autoFocus:!1,content:t.createElement("div",{style:{padding:"15px",paddingTop:"25px",width:"230px"}},t.createElement(i,{checked:g("fade"),label:u("toolbar.fade"),onChange:e=>{v("fade",{enabled:e.target.checked})},alignIndicator:l.RIGHT}),t.createElement(i,{checked:g("move"),label:u("toolbar.move"),onChange:e=>{v("move",{enabled:e.target.checked})},alignIndicator:l.RIGHT}),t.createElement(i,{checked:g("zoom"),label:u("toolbar.zoom"),onChange:e=>{v("zoom",{enabled:e.target.checked})},alignIndicator:l.RIGHT}),t.createElement(b,{element:p,store:o,enabled:g()}),g("move")&&t.createElement(h,{value:(null===(d=null===(m=p.animations.find(e=>"move"===e.name))||void 0===m?void 0:m.data)||void 0===d?void 0:d.direction)||"right",onChange:e=>{v("move",{data:{direction:e},enabled:!0})}}),g()&&t.createElement(f,{store:o,element:p}),g()&&t.createElement(y,{store:o,element:p}),t.createElement(i,{checked:g("rotate"),label:u("toolbar.rotate"),onChange:e=>{var t;t={enabled:e.target.checked},o.history.transaction(()=>{c.forEach(e=>{e.setAnimation("loop",Object.assign({name:"rotate"},t))})}),t.enabled&&(o.play({animatedElementsIds:c.map(e=>e.id),currentTime:p.page.startTime}),setTimeout(()=>{o.stop()},1e3))},alignIndicator:l.RIGHT})),position:a.BOTTOM},t.createElement(n,{text:u("toolbar.animate"),minimal:!0}))});export const AnimationsPicker=p(({element:e,store:a})=>e.contentEditable?t.createElement(n,{minimal:!0,text:u("toolbar.animate"),onClickCapture:e=>{e.stopPropagation(),a.openSidePanel("animation")}}):null);export default AnimationsPicker;