polotno 3.0.0-beta.37 → 3.0.0-beta.40

package/blueprint/blueprint-guard.d.ts

@@ -0,0 +1,2 @@
+declare const MESSAGE = "polotno/blueprint/* requires @blueprintjs/core @blueprintjs/icons @blueprintjs/select \u2014 install them to use the legacy Blueprint chrome.";
+declare function blueprintResolvable(): boolean;

package/blueprint/blueprint-guard.js

@@ -0,0 +1 @@
+const MESSAGE="polotno/blueprint/* requires @blueprintjs/core @blueprintjs/icons @blueprintjs/select — install them to use the legacy Blueprint chrome.";function blueprintResolvable(){try{const req=eval('typeof require !== "undefined" ? require : undefined');return!req||"function"!=typeof req.resolve||(req.resolve("@blueprintjs/core"),!0)}catch(_a){return!1}}if(!blueprintResolvable()){throw new Error(MESSAGE)}

package/blueprint/canvas/context-menu/context-menu.d.ts

@@ -0,0 +1,16 @@
+import { StoreType } from '../../../model/store.js';
+import { ShapeType } from '../../../model/shape-model.js';
+type ContextMenuProps = {
+    store: StoreType;
+    element: ShapeType;
+    offset: {
+        x: number;
+        y: number;
+    };
+    isOpen: boolean;
+    setIsOpen: (b: boolean) => void;
+};
+export declare const ContextMenu: (({ store, isOpen, offset, setIsOpen }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export {};

package/blueprint/canvas/context-menu/context-menu.js

@@ -0,0 +1 @@
+import{jsx as o,jsxs as e,Fragment as t}from"react/jsx-runtime";import{observer as l}from"mobx-react-lite";import{ContextMenuPopover as n,Menu as s,MenuDivider as i,MenuItem as r}from"@blueprintjs/core";import{t as a}from"../../../utils/l10n.js";import{useDuplicateElement as d}from"../../toolbar/use-duplicate-element.js";import{ChevronDown as m,ChevronUp as c,DoubleChevronDown as u,DoubleChevronUp as b,Duplicate as v,Layers as p,Lock as C,Trash as x,Unlock as E}from"@blueprintjs/icons";import{useRemoveElement as h}from"../../toolbar/use-remove-element.js";import{useCopyStyle as w}from"../../toolbar/use-copy-style.js";import{useLock as f}from"../../toolbar/use-lock.js";export const ContextMenu=l(({store:l,isOpen:k,offset:R,setIsOpen:y})=>{var j;const{disabled:g,duplicate:M}=d({store:l}),{disabled:D,remove:P}=h({store:l}),{setElementToCopy:B}=w(l),{disabled:O,lock:F,locked:T}=f({store:l}),U=o(T?C:E,{});return 0===l.selectedElements.length?null:o(n,{isOpen:k,onClose:()=>{y(!1)},content:e(s,{children:[o(r,{shouldDismissPopover:!1,icon:U,text:a(T?"contextMenu.unlock":"contextMenu.lock"),onClick:F,disabled:O}),o(r,{icon:o(v,{}),text:a("contextMenu.duplicate"),onClick:M,disabled:g}),o(r,{icon:o(x,{}),text:a("contextMenu.remove"),onClick:P,disabled:D}),o(i,{}),e(r,{icon:o(p,{}),text:a("toolbar.layering"),children:[o(r,{shouldDismissPopover:!1,icon:o(b,{}),text:a("toolbar.toForward"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsTop([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveTop())}),o(r,{shouldDismissPopover:!1,icon:o(c,{}),text:a("toolbar.up"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsUp([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveUp())}),o(r,{shouldDismissPopover:!1,icon:o(m,{}),text:a("toolbar.down"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsDown([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveDown())}),o(r,{shouldDismissPopover:!1,icon:o(u,{}),text:a("toolbar.toBottom"),disabled:!l.selectedElements.some(o=>{var e;return null===(e=o.parent)||void 0===e?void 0:e.canMoveElementsBottom([o.id])}),onClick:()=>l.selectedElements.forEach(o=>o.moveBottom())})]}),"table"===(null===(j=l.selectedElements[0])||void 0===j?void 0:j.type)&&(()=>{var n;const s=l.selectedElements[0],d=s.focusedCells[0],m=null!=d,c=null!==(n=s.getFocusedCellRange())&&void 0!==n?n:d?{minRow:d.row,maxRow:d.row,minCol:d.col,maxCol:d.col}:{minRow:0,maxRow:0,minCol:0,maxCol:0},{minRow:u,maxRow:b,minCol:v,maxCol:p}=c,C=b>u,x=p>v;return e(t,{children:[m&&e(t,{children:[o(i,{}),o(r,{text:a("toolbar.insertRowAbove"),onClick:()=>{l.history.transaction(()=>{s.addRow(u)})}}),o(r,{text:a("toolbar.insertRowBelow"),onClick:()=>{l.history.transaction(()=>{s.addRow(b+1)})}}),o(r,{text:a(C?"toolbar.deleteRows":"toolbar.deleteRow"),disabled:s.rows<=b-u+1,onClick:()=>{l.history.transaction(()=>{s.removeRowRange(u,b)})}}),o(i,{}),o(r,{text:a("toolbar.insertColumnLeft"),onClick:()=>{l.history.transaction(()=>{s.addColumn(v)})}}),o(r,{text:a("toolbar.insertColumnRight"),onClick:()=>{l.history.transaction(()=>{s.addColumn(p+1)})}}),o(r,{text:a(x?"toolbar.deleteColumns":"toolbar.deleteColumn"),disabled:s.cols<=p-v+1,onClick:()=>{l.history.transaction(()=>{s.removeColumnRange(v,p)})}})]}),o(i,{}),o(r,{text:a("toolbar.distributeRowsEvenly"),onClick:()=>{l.history.transaction(()=>{s.distributeRowsEvenly()})}}),o(r,{text:a("toolbar.distributeColumnsEvenly"),onClick:()=>{l.history.transaction(()=>{s.distributeColumnsEvenly()})}})]})})()]}),targetOffset:{top:R.y,left:R.x}})});

package/blueprint/canvas/page-controls.d.ts

@@ -0,0 +1,11 @@
+import { StoreType } from '../../model/store.js';
+import { PageType } from '../../model/page-model.js';
+export declare const PageControls: (({ store, page, xPadding, yPadding, layout, }: {
+    store: StoreType;
+    page: PageType;
+    xPadding: number;
+    yPadding: number;
+    layout?: "vertical" | "horizontal";
+}) => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};

package/blueprint/canvas/page-controls.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{observer as i}from"mobx-react-lite";import{Button as a,Tooltip as l}from"@blueprintjs/core";import{ChevronUp as n,ChevronDown as t,ChevronLeft as r,ChevronRight as c,Duplicate as s,Trash as d,Insert as p}from"@blueprintjs/icons";import{ROLES as m}from"../../model/store.js";import{t as g}from"../../utils/l10n.js";export const PageControls=i(({store:i,page:h,xPadding:v,yPadding:b,layout:k="vertical"})=>{const u=i.pages.length>1,x=i.pages.indexOf(h),P="horizontal"===k,w=P?r:n,f=P?c:t,j=g(P?"workspace.moveLeft":"workspace.moveUp"),C=g(P?"workspace.moveRight":"workspace.moveDown");return"selection"!==i.tool||i.role===m.VIEWER?null:o("div",{style:{position:"absolute",top:b-40+"px",right:v+"px"},children:[u&&e(l,{content:j,disabled:0===x,children:e(a,{icon:e(w,{}),minimal:!0,disabled:0===x,onClick:()=>{h.setZIndex(x-1)},"aria-label":j})}),u&&e(l,{content:C,disabled:x===i.pages.length-1,children:e(a,{icon:e(f,{}),"aria-label":C,minimal:!0,disabled:x===i.pages.length-1,onClick:()=>{const e=i.pages.indexOf(h);h.setZIndex(e+1)}})}),e(l,{content:g("workspace.duplicatePage"),children:e(a,{icon:e(s,{}),minimal:!0,"aria-label":g("workspace.duplicatePage"),onClick:()=>{h.clone()}})}),u&&e(l,{content:g("workspace.removePage"),children:e(a,{icon:e(d,{}),"aria-label":g("workspace.removePage"),minimal:!0,onClick:()=>{i.deletePages([h.id])}})}),e(l,{content:g("workspace.addPage"),children:e(a,{icon:e(p,{}),minimal:!0,"aria-label":g("workspace.addPage"),onClick:()=>{var e,o,a;const l=i.addPage({bleed:(null===(e=i.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(o=i.activePage)||void 0===o?void 0:o.width)||"auto",height:(null===(a=i.activePage)||void 0===a?void 0:a.height)||"auto"}),n=i.pages.indexOf(h);l.setZIndex(n+1)}})})]})});

package/blueprint/canvas/tooltip.d.ts

@@ -0,0 +1,16 @@
+import { StoreType } from '../../model/store.js';
+import { PageType } from '../../model/page-model.js';
+export declare const Tooltip: (({ store, page, components, stageRef, tooltipSafeArea, }: {
+    store: StoreType;
+    page: PageType;
+    components?: any;
+    stageRef?: any;
+    tooltipSafeArea?: {
+        top?: number;
+        bottom?: number;
+        left?: number;
+        right?: number;
+    };
+}) => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};

package/blueprint/canvas/tooltip.js

@@ -0,0 +1 @@
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import n from"react";import{observer as o}from"mobx-react-lite";import{Html as l}from"react-konva-utils";import{Navbar as r,NavbarGroup as i}from"@blueprintjs/core";import{getTotalClientRect as s}from"../../utils/math.js";import{extendToolbar as u}from"../toolbar/element-container.js";import{TextAiWrite as a}from"../toolbar/text-ai-write.js";import{flags as c}from"../../utils/flags.js";import{DuplicateButton as d}from"../toolbar/duplicate-button.js";import{RemoveButton as f}from"../toolbar/remove-button.js";import{PositionPicker as m}from"../toolbar/position-picker.js";import{GroupButton as p}from"../toolbar/group-button.js";function v(t,e){return t.classList.contains(e)?t:t.parentElement?v(t.parentElement,e):null}const h=()=>null;export const Tooltip=o(({store:o,page:g,components:b,stageRef:x,tooltipSafeArea:y})=>{var E,C,k;const j=o.selectedShapes.every(t=>t.page===g),w=n.useRef(null),[I,N]=n.useState(!1),R=o._hasCroppedImages;o.selectedElements.length,n.useEffect(()=>{var t,e,n;const o=()=>{N(!0)},l=()=>{N(!1)};null===(t=null==x?void 0:x.current)||void 0===t||t.on("dragstart",o),null===(e=null==x?void 0:x.current)||void 0===e||e.on("dragend",l);const r=null===(n=null==x?void 0:x.current)||void 0===n?void 0:n.findOne("Transformer");return null==r||r.on("transformstart",o),null==r||r.on("transformend",l),()=>{var t,e;null===(t=null==x?void 0:x.current)||void 0===t||t.off("dragstart",o),null===(e=null==x?void 0:x.current)||void 0===e||e.off("dragend",l),null==r||r.off("transformstart",o),null==r||r.off("transformend",l)}},[]);const[M,T]=n.useState({fit:!0,needCalculate:!1,token:Math.random()});function O(){if(!w.current){return}if(!M.needCalculate){return}const t=v(w.current,"polotno-workspace-container");if(!t){return}const e=t.getBoundingClientRect(),n=w.current.getBoundingClientRect(),o=(n.right,e.left,n.top-e.top),l=(n.left,e.left,n.bottom-e.top),r=(null==y?void 0:y.top)||0,i=(null==y?void 0:y.bottom)||0,s=null==x?void 0:x.current;let u=-1/0,a=1/0;if(s){const t=s.container().getBoundingClientRect(),n=s.scaleY();u=t.top+s.y()+S.y*n-e.top,a=t.top+s.y()+(S.y+S.height)*n-e.top}const c=o>=20+r&&u-l>=48,d=l-e.height<=-20-i&&o-a>=48;T(c?{fit:!0,needCalculate:!1,token:M.token}:d?{fit:!1,needCalculate:!1,token:M.token}:{fit:M.fit,needCalculate:!1,token:M.token})}if(n.useEffect(()=>{0!==o.selectedElements.length&&T({fit:!0,needCalculate:!0,token:Math.random()})},[o.selectedElements,I,o.scale]),n.useLayoutEffect(()=>{const t=setTimeout(()=>{O()},100);return()=>{clearTimeout(t)}},[M.needCalculate,w.current,M.token]),n.useEffect(()=>{if(!x.current){return}const t=v(x.current.content,"polotno-workspace-inner");if(!t){return}const e=()=>{o.selectedElements.length&&T({fit:!0,needCalculate:!0,token:Math.random()})};return null==t||t.addEventListener("scroll",e),()=>{null==t||t.removeEventListener("scroll",e)}},[]),0===o.selectedShapes.length){return null}if(I){return null}if(!j){return null}if(o.activePage!==g){return null}if(R){return null}const S=s(o.selectedShapes),B=(null==b?void 0:b.Position)||m,Y=(null==b?void 0:b.Duplicate)||d,F=(null==b?void 0:b.Remove)||f,L=(null==b?void 0:b.Group)||p,P=(null==b?void 0:b.Lock)||h,X=null===(E=o.selectedElements[0])||void 0===E?void 0:E.type,_=Object.assign(Object.assign({},c.aiTextEnabled?{TextAiWrite:a}:{}),b||{}),A=u({components:_,type:X,usedItems:[]}),J=(null===(k=null===(C=null==x?void 0:x.current)||void 0===C?void 0:C.findOne("Transformer"))||void 0===k?void 0:k.rotation())||0;let V=80;return Math.abs(J)<30&&M.fit&&(V=80),Math.abs(J)>140&&!M.fit&&(V=80),t(l,{parentNodeFunc:({stage:t})=>{var e,n;return(null===(e=null==t?void 0:t.container())||void 0===e?void 0:e.closest(".polotno-workspace-container"))||(null===(n=null==t?void 0:t.container())||void 0===n?void 0:n.parentNode)},transformFunc:t=>{var e;const n=S.x+S.width/2,o=null===(e=null==x?void 0:x.current)||void 0===e?void 0:e.container(),l=(null==o?void 0:o.getBoundingClientRect())||{left:0,top:0,width:0,height:0,right:0,bottom:0,x:0,y:0,toJSON:()=>({})},r=null==o?void 0:o.closest(".polotno-workspace-container"),i=(null==r?void 0:r.getBoundingClientRect())||{left:0,top:0,width:Number.POSITIVE_INFINITY,height:Number.POSITIVE_INFINITY,right:0,bottom:0,x:0,y:0,toJSON:()=>({})},s=l.left-i.left,u=l.top-i.top,a=w.current?w.current.getBoundingClientRect().height:34,c=((null==y?void 0:y.top)||0)+8,d=u+t.y+S.y*t.scaleY;let f=M.fit;if(f){const t=d-V,e=c+a/2;Math.max(e,t)+a/2>d-48&&(f=!1)}const m=f?S.y*t.scaleY-V:S.y*t.scaleY+S.height*t.scaleY+V;let p=s+t.x+n*t.scaleX,v=p-S.width*t.scaleX/2,h=p+S.width*t.scaleX/2;const g=Math.min(50,S.width/2*t.scaleX),b=h>=g&&v<=i.width-g,E=w.current?w.current.getBoundingClientRect().width:0,C=(null==y?void 0:y.left)||0,k=(null==y?void 0:y.right)||0;if(Number.isFinite(i.width)&&E>0&&b){const t=8+E/2+C,e=i.width-8-E/2-k;e>=t&&(p=Math.max(t,Math.min(p,e)))}h<g&&(p-=E+8),v>i.width-g&&(p+=E+8);let j=u+t.y+m;const I=w.current?w.current.getBoundingClientRect().height:34,N=((null==y?void 0:y.top)||0)+8,R=((null==y?void 0:y.bottom)||0)+8;return Number.isFinite(i.height)&&(j=Math.max(N+I/2,j),j=Math.min(i.height-R-I/2,j)),Object.assign(Object.assign({},t),{x:p,y:j,scaleX:1,scaleY:1})},divProps:{style:{pointerEvents:"none",position:"absolute",visibility:M.needCalculate?"hidden":"visible",zIndex:9}},children:t("div",{ref:t=>{w.current=t,!w.current&&t&&O()},style:{pointerEvents:"none"},children:t(r,{style:{padding:"2px",borderRadius:"5px",height:"34px",transform:"translate(-50%, -50%)",pointerEvents:"auto"},children:e(i,{style:{height:"30px"},children:[A.map(e=>{const n=_[e];return t(n,{elements:o.selectedElements,element:o.selectedElements[0],store:o},e)}),t(L,{store:o}),t(P,{store:o}),t(Y,{store:o}),t(F,{store:o}),t(B,{store:o})]})})})})});

package/blueprint/pages-timeline/audio-track.d.ts

@@ -0,0 +1,12 @@
+import { StoreType } from '../../model/store.js';
+import { AudioType } from '../../model/audio-model.js';
+export declare const AUDIO_ROW_HEIGHT = 28;
+export declare const AUDIO_TRACK_HEIGHT = 24;
+export declare const AudioTrack: (({ audio, scale, store, index, }: {
+    audio: AudioType;
+    scale: number;
+    store: StoreType;
+    index: number;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

package/blueprint/pages-timeline/audio-track.js

@@ -0,0 +1 @@
+var e=this&&this.__rest||function(e,t){var n={};for(var o in e){Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o])}if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(o=Object.getOwnPropertySymbols(e);i<o.length;i++){t.indexOf(o[i])<0&&Object.prototype.propertyIsEnumerable.call(e,o[i])&&(n[o[i]]=e[o[i]])}}return n};import{jsx as t,jsxs as n}from"react/jsx-runtime";import o from"react";import{observer as i}from"mobx-react-lite";import{Button as s,Menu as a,MenuItem as r,MenuDivider as l,Popover as m,Position as d,Slider as p}from"@blueprintjs/core";import{Duplicate as c,More as u,Trash as h,VolumeUp as x,VolumeOff as v}from"@blueprintjs/icons";import{t as f}from"../../utils/l10n.js";import{Spinner as y}from"./spinner.js";import{useWaveformData as M,useWaveformPath as T}from"./waveform.js";import{TrackWrapper as g,TrackContainer as w,TrackMenu as b,TrackHandleLeft as I,TrackHandleRight as j,WaveformSvg as O}from"./track-styles.js";export const AUDIO_ROW_HEIGHT=28;export const AUDIO_TRACK_HEIGHT=24;const E=({position:e,store:t,scale:n})=>{const o=t.pages;for(const i of o){const t=i.startTime,o=i.startTime+i.duration;if(Math.abs(e-t)<10/n){return t}if(Math.abs(e-o)<10/n){return o}}return null};export const AudioTrack=i(({audio:i,scale:A,store:D,index:P})=>{const[C,L]=o.useState(1),N=0===i.volume,k=()=>{N?i.set({volume:C>0?C:1}):(L(i.volume),i.set({volume:0}))},S=(e=i.startTime,t=i.endTime)=>Math.max(0,(t-e)*(i.duration||0)),_=e=>Math.max(0,D.duration-e),H=(e,t=S())=>Math.min(Math.max(0,e),_(t)),R=S(),X=D.duration*A-i.delay*A,z=Math.min(R*A,X),$=i.delay*A,{data:Y,isLoading:B}=M(i.src),F=(i.endTime-i.startTime)*i.duration*A,G=T(Y,20).path,U=(e,t)=>{e.stopPropagation(),e.preventDefault();const n=e.clientX,o=$,s=z,a=i.endTime,r=i.startTime,l=i.delay,m=i.duration||1,d=e=>{e.preventDefault();const d=(e.clientX-n)/A;if("start"===t){if(d>=0){const e=d,t=Math.max(0,a-.1-r)*m,n=Math.min(e,t);if(n<=0){return}let o=r+n/m;const s=(i.endTime-o)*m,p=l+n,c=_(s);let u=Math.min(Math.max(0,p),c);const h=E({position:u,store:D,scale:A});u=Math.min(Math.max(0,null!=h?h:u),c);const x=u-p;o=Math.min(i.endTime-.1,Math.max(0,o+x/m)),i.set({delay:u,startTime:o})}else{const e=-d,t=r*m,n=Math.min(e,t);if(n<=0){return}const o=n/m;let s=Math.max(0,r-o);const a=(i.endTime-s)*m,p=l-n,c=_(a);let u=Math.min(Math.max(0,p),c);const h=E({position:u,store:D,scale:A});u=Math.min(Math.max(0,null!=h?h:u),c);const x=u-p;s=Math.max(0,Math.min(i.endTime-.1,s+x/m)),i.set({delay:u,startTime:s})}}else{const e=o/A+s/A;let t=e+d;const n=E({position:t,store:D,scale:A});t=null!=n?n:t;const r=(t-e)/i.duration,l=Math.min(1,Math.max(i.startTime+.1,a+r));i.set({endTime:l})}},p=()=>{if(window.removeEventListener("mousemove",d),window.removeEventListener("mouseup",p),"start"===t){const e=E({position:i.delay,store:D,scale:A});if(null!=e&&e!==i.delay){const t=S(i.startTime,i.endTime),n=H(e,t),o=n-i.delay,s=Math.max(0,Math.min(i.endTime-.1,i.startTime+o/m));i.set({delay:n,startTime:s})}}};window.addEventListener("mousemove",d),window.addEventListener("mouseup",p)};return t(g,{style:{left:`${$}px`,top:28*P+"px",width:`${z}px`,height:"24px"},className:"polotno-audio-container",children:n(w,{style:{width:"100%",height:"100%",color:"var(--polotno-timeline-audio-color, rgba(0, 161, 255, 0.85))"},onMouseDown:e=>{const t=e.clientX,n=$;e.preventDefault();const o=e=>{e.preventDefault();const o=(e.clientX-t)/A;let s=n/A+o;const a=s+R,r=E({position:s,store:D,scale:A}),l=E({position:a,store:D,scale:A}),m=null!==r?Math.abs(s-r):Number.POSITIVE_INFINITY,d=null!==l?Math.abs(a-l):Number.POSITIVE_INFINITY;let p;p=H(null!==r&&m<d?r:null!==l?l-R:s),i.set({delay:H(p)})},s=()=>{window.removeEventListener("mousemove",o),window.removeEventListener("mouseup",s)};window.addEventListener("mousemove",o),window.addEventListener("mouseup",s)},children:[t("div",{style:{position:"absolute",left:"4px",top:"50%",transform:"translateY(-50%)",zIndex:10,pointerEvents:"auto"},onClick:e=>{e.stopPropagation(),k()},onMouseDown:e=>e.stopPropagation(),children:t(N?v:x,{size:14,style:{opacity:.7,cursor:"pointer"}})}),t("div",{style:{position:"absolute",inset:"0 0 0 0",display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},children:n("div",{style:{display:"flex",alignItems:"center",width:"100%",height:"100%",gap:"8px",paddingLeft:"22px"},children:[G&&t("div",{style:{flex:1,height:"14px",overflow:"hidden",opacity:N?.4:1},children:t(O,{width:F,height:"14",viewBox:`0 0 ${F} 20`,preserveAspectRatio:"none",style:{width:F+"px",height:"14px",transform:`translateX(-${i.startTime*F}px)`},children:t("path",{d:G})})}),B&&t("div",{style:{flex:1,display:"flex",justifyContent:"center",alignItems:"center"},children:t(y,{})})]})}),t(I,{onMouseDown:e=>U(e,"start")}),t(j,{onMouseDown:e=>U(e,"end")}),t(b,{className:"polotno-track-menu",onClick:e=>{e.stopPropagation()},onMouseDown:e=>e.stopPropagation(),children:t(m,{content:n(a,{style:{width:"180px"},children:[n("div",{style:{padding:"8px 12px"},children:[n("div",{style:{fontSize:"12px",marginBottom:"6px",display:"flex",justifyContent:"space-between",alignItems:"center"},children:[t("span",{children:f("pagesTimeline.volume")}),n("span",{children:[Math.round(100*i.volume),"%"]})]}),t(p,{value:i.volume,min:0,max:1,stepSize:.01,labelRenderer:!1,onChange:e=>{const t=Math.max(0,Math.min(1,e));t>0&&L(t),i.set({volume:t})}})]}),t(l,{}),t(r,{icon:t(N?x:v,{}),text:f(N?"pagesTimeline.unmuteAudio":"pagesTimeline.muteAudio"),onClick:k}),t(r,{icon:t(c,{}),text:f("pagesTimeline.duplicateAudio"),onClick:()=>{const t=i.toJSON(),n=(i.endTime-i.startTime)*(i.duration||0),o=i.delay+n,s=D.duration-o;let a=i.delay;s>=n?a=o:s>0&&(a=Math.max(0,D.duration-n));const{id:r}=t,l=e(t,["id"]);D.addAudio(Object.assign(Object.assign({},l),{delay:a}))}}),t(l,{}),t(r,{icon:t(h,{}),text:f("pagesTimeline.removeAudio"),onClick:()=>{D.removeAudio(i.id)}})]}),position:d.TOP,children:t(s,{icon:t(u,{}),style:{minHeight:"20px",borderRadius:"10px",padding:"0px"}})})})]})})});

package/blueprint/pages-timeline/audios.d.ts

@@ -0,0 +1,8 @@
+import { StoreType } from '../../model/store.js';
+export declare const Audios: (({ store, scale, width, }: {
+    store: StoreType;
+    scale: number;
+    width: number;
+}) => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};

package/blueprint/pages-timeline/audios.js

@@ -0,0 +1 @@
+import{jsx as o}from"react/jsx-runtime";import{observer as t}from"mobx-react-lite";import{AudioTrack as e,AUDIO_ROW_HEIGHT as r}from"./audio-track.js";export const Audios=t(({store:t,scale:i,width:a})=>{const s=(o=>{const t=[],e=[];return o.forEach(o=>{const r=o.delay,i=o.delay+(o.endTime-o.startTime)*o.duration;let a=0;for(;a<e.length&&e[a]>r;){a++}t.push({audio:o,row:a}),e[a]=i}),t})(t.audios),n=s.reduce((o,t)=>Math.max(o,t.row),-1)+1,d=Math.max(n,1)*r;return s.length?o("div",{style:{position:"relative",minWidth:a+"px",height:d+"px",marginTop:"12px"},className:"polotno-audios-container",children:s.map(({audio:r,row:a})=>o(e,{audio:r,scale:i,store:t,index:a},r.id))}):null});

package/blueprint/pages-timeline/current-time.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StoreType } from '../../model/store.js';
+type Variant = 'timeline' | 'ruler';
+interface CurrentTimeProps {
+    store: StoreType;
+    scale: number;
+    variant?: Variant;
+    dragAreaRef?: React.RefObject<HTMLElement>;
+}
+export declare const CurrentTime: (({ store, scale, variant, dragAreaRef }: CurrentTimeProps) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export {};

package/blueprint/pages-timeline/current-time.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n from"react";import{observer as o}from"mobx-react-lite";const r="rgb(0, 161, 255)";export const CurrentTime=o(({store:o,scale:i,variant:a="timeline",dragAreaRef:s})=>{var l;const c=n.useRef(null),u=(null===(l=o.activePage)||void 0===l?void 0:l.startTime)||0,d=o.isPlaying||0!==o.currentTime?o.currentTime:u,v=n.useCallback(e=>Math.max(0,Math.min(e,o.duration)),[o.duration]),p=n.useCallback(e=>{var t,n;const r=(null==s?void 0:s.current)||(null===(t=c.current)||void 0===t?void 0:t.parentElement);if(!r){return}const a=r.getBoundingClientRect(),l=r.scrollLeft||0;let u=e-a.left+l;const d=window.getComputedStyle(r);u-=parseFloat(d.paddingLeft)||0;const p=Math.max(0,u),m=v(p/i);o.setCurrentTime(m),null===(n=o.checkActivePage)||void 0===n||n.call(o)},[v,s,i,o]),m=n.useCallback(e=>{p(e);const t=e=>{e.preventDefault(),p(e.clientX)},n=()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",n)};window.addEventListener("mousemove",t),window.addEventListener("mouseup",n)},[p]),w=n.useCallback(e=>{p(e);const t=e=>{const t=e.touches[0];t&&(e.preventDefault(),p(t.clientX))},n=()=>{window.removeEventListener("touchmove",t),window.removeEventListener("touchend",n),window.removeEventListener("touchcancel",n)};window.addEventListener("touchmove",t,{passive:!1}),window.addEventListener("touchend",n),window.addEventListener("touchcancel",n)},[p]),h=n.useCallback(e=>{e.preventDefault(),e.stopPropagation(),m(e.clientX)},[m]),g=n.useCallback(e=>{const t=e.touches[0];t&&(e.preventDefault(),e.stopPropagation(),w(t.clientX))},[w]),f=(e=>"ruler"===e?{wrapper:{top:0,width:12,height:"100%",transform:"translateX(-6px)",display:"flex",flexDirection:"column",alignItems:"center"},line:{flex:1}}:{wrapper:{top:0,width:12,height:"100%",transform:"translateX(-6px)"},line:{height:"100%",margin:"0 auto"},showMarker:!1})(a);return t("div",{ref:c,onMouseDown:h,onTouchStart:g,style:Object.assign(Object.assign({position:"absolute",left:d*i+"px"},f.wrapper),{cursor:"col-resize",touchAction:"none"}),children:[e("svg",{width:"12",height:"8",viewBox:"0 0 12 8",style:{display:"block",filter:"drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))"},children:e("path",{d:"M0 0 H12 L6 8 Z",fill:r,stroke:r,strokeWidth:"2",strokeLinejoin:"round"})}),e("div",{style:Object.assign({width:"2px",backgroundColor:r},f.line)})]})});

package/blueprint/pages-timeline/element-track.d.ts

@@ -0,0 +1,13 @@
+import { ShapeType } from '../../model/shape-model.js';
+import { StoreType } from '../../model/store.js';
+import { PageType } from '../../model/page-model.js';
+export declare const ELEMENT_ROW_HEIGHT = 26;
+export declare const ElementTrack: (({ element, page, store, scale, row, }: {
+    element: ShapeType;
+    page: PageType;
+    store: StoreType;
+    scale: number;
+    row: number;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

package/blueprint/pages-timeline/element-track.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n from"react";import{observer as o}from"mobx-react-lite";import{Button as i,Menu as s,MenuItem as l,Popover as r,Position as a}from"@blueprintjs/core";import{Duplicate as m,More as d,Trash as p}from"@blueprintjs/icons";import{t as c}from"../../utils/l10n.js";import{TrackWrapper as u,TrackContainer as v,TrackMenu as w,TrackHandleLeft as x,TrackHandleRight as f,TrackLabel as h}from"./track-styles.js";import{duplicateElements as E}from"../../utils/duplicate.js";export const ELEMENT_ROW_HEIGHT=26;const y=100,b=(e,t,n)=>Math.min(n,Math.max(t,e)),g=(e,t)=>{const n=e.animations.find(e=>e.type===t);n?n.enabled||e.setAnimation(t,{enabled:!0}):e.setAnimation(t,{})},L=(e,t,n,o)=>{const i=b(n,0,t-y),s=b(o,i+y,t);g(e,"enter"),g(e,"exit"),e.setAnimation("enter",{delay:i}),e.setAnimation("exit",{delay:Math.max(0,t-s)})};export const ElementTrack=o(({element:o,page:g,store:M,scale:j,row:D})=>{const k=g.duration,P=g.startTime,T=P+k,A=b((e=>{var t;const n=e.animations.find(e=>"enter"===e.type);return null!==(t=null==n?void 0:n.delay)&&void 0!==t?t:0})(o),0,k),X=b(k-(e=>{var t;const n=e.animations.find(e=>"exit"===e.type);return null!==(t=null==n?void 0:n.delay)&&void 0!==t?t:0})(o),A+y,k),C=Math.max(X-A,y)*j,H=(P+A)*j,O=o.name||o.type||c("toolbar.element"),[N,R]=n.useState(null),$=()=>{R(e=>null===e?D:e)},_=()=>{R(null)},G=(e,t)=>{e.preventDefault(),e.stopPropagation(),$();const n=e.clientX,i=A,s=X,l=e=>{e.preventDefault();const l=(e.clientX-n)/j;if("start"===t){const e=b(P+i+l,P,P+s-y);L(o,k,e-P,s)}else{const e=b(P+s+l,P+i+y,T);L(o,k,i,e-P)}},r=()=>{window.removeEventListener("mousemove",l),window.removeEventListener("mouseup",r),_()};window.addEventListener("mousemove",l),window.addEventListener("mouseup",r)};return e(u,{style:{left:`${H}px`,top:26*(null!=N?N:D)+"px",width:`${C}px`,height:"22px"},children:t(v,{style:{width:"100%",height:"100%",color:"var(--polotno-timeline-element-color, rgba(255, 153, 0, 0.85))",outline:M.selectedElements.find(e=>e.id===o.id)?"2px solid var(--polotno-timeline-element-selected-color, rgba(0, 120, 255, 0.9))":"none",outlineOffset:"-1px"},onMouseDown:e=>{e.preventDefault(),e.stopPropagation(),$();const t=e.clientX,n=A,i=X-n;let s=!1;const l=e=>{e.preventDefault(),s=!0;const l=(e.clientX-t)/j,r=b(P+n+l,P,T-i)-P;L(o,k,r,r+i)},r=()=>{window.removeEventListener("mousemove",l),window.removeEventListener("mouseup",r),_(),s||M.selectElements([o.id])};window.addEventListener("mousemove",l),window.addEventListener("mouseup",r)},children:[e(h,{children:O}),e(x,{onMouseDown:e=>G(e,"start")}),e(f,{onMouseDown:e=>G(e,"end")}),e(w,{className:"polotno-track-menu",onMouseDown:e=>e.stopPropagation(),onClick:e=>e.stopPropagation(),children:e(r,{content:t(s,{style:{width:"140px"},children:[e(l,{icon:e(m,{}),text:c("toolbar.duplicateElements"),onClick:()=>{E([o],M)}}),e(l,{icon:e(p,{}),text:c("toolbar.removeElements"),onClick:()=>{M.deleteElements([o.id])}})]}),position:a.TOP,children:e(i,{icon:e(d,{}),style:{minHeight:"20px",borderRadius:"10px",padding:"0px"}})})})]})})});

package/blueprint/pages-timeline/elements.d.ts

@@ -0,0 +1,10 @@
+import { StoreType } from '../../model/store.js';
+interface ElementTimelineProps {
+    store: StoreType;
+    scale: number;
+    width: number;
+}
+export declare const ElementsTimeline: (({ store, scale, width }: ElementTimelineProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export {};

package/blueprint/pages-timeline/elements.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{observer as t}from"mobx-react-lite";import{ROLES as r}from"../../model/store.js";import{ElementTrack as n,ELEMENT_ROW_HEIGHT as o}from"./element-track.js";import{forEveryChild as a}from"../../model/group-model.js";export const ElementsTimeline=t(({store:t,scale:l,width:s})=>{const i=t.pages.slice();if(!i.length){return null}const m=i.flatMap(e=>(e=>{const t=[];for(const r of e.children){"group"===r.type?a(r,e=>{"group"!==e.type&&t.push(e)}):t.push(r)}return t})(e).map(t=>({element:t,page:e}))).filter(({element:e})=>e.selectable||t.role===r.ADMIN);if(!m.length){return null}const p=(e=>{const t=[],r=[];return e.map(({element:e,page:t})=>{const r=((e,t)=>{var r,n;const o=t.duration,a=e.animations.find(e=>"enter"===e.type),l=e.animations.find(e=>"exit"===e.type),s=Math.max(0,Math.min(o,null!==(r=null==a?void 0:a.delay)&&void 0!==r?r:0));return{start:s,end:Math.max(s+50,Math.min(o,o-(null!==(n=null==l?void 0:l.delay)&&void 0!==n?n:0)))}})(e,t);return{element:e,page:t,start:t.startTime+r.start,end:t.startTime+r.end}}).sort((e,t)=>e.start-t.start).forEach(e=>{if(e.end-e.start<50){return}let n=0;for(;n<r.length&&r[n]>e.start;){n++}t.push({element:e.element,page:e.page,row:n,start:e.start,end:e.end}),r[n]=e.end}),t})(m);if(!p.length){return null}const d=p.reduce((e,t)=>Math.max(e,t.row),-1)+1;return e("div",{style:{position:"relative",minWidth:s+"px",height:d*o+"px",marginTop:"12px"},className:"polotno-elements-container",children:p.map(({element:r,row:o,page:a})=>e(n,{element:r,store:t,page:a,scale:l,row:o},`${a.id}-${r.id}`))})});

package/blueprint/pages-timeline/index.d.ts

@@ -0,0 +1 @@
+export * from './pages-timeline.js';

package/blueprint/pages-timeline/index.js

@@ -0,0 +1 @@
+export * from './pages-timeline.js';

package/blueprint/pages-timeline/page-preview.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PageType } from '../../model/page-model.js';
+export declare const usePagePreview: ({ page, ref, }: {
+    page: PageType;
+    ref: React.RefObject<HTMLDivElement>;
+}) => string | null;
+export declare const PagePreview: (({ page, scale }: {
+    page: PageType;
+    scale: number;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

package/blueprint/pages-timeline/page-preview.js

@@ -0,0 +1,23 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"react";import{observer as i}from"mobx-react-lite";import{reaction as n}from"mobx";import{onSnapshot as r}from"mobx-state-tree";import{Button as s,Menu as a,MenuItem as l,Popover as d,Position as c}from"@blueprintjs/core";import{Duplicate as p,Insert as u,More as g,Trash as m}from"@blueprintjs/icons";import h from"../../utils/styled.js";import{flags as x}from"../../utils/flags.js";import{t as f}from"../../utils/l10n.js";import{Spinner as v}from"./spinner.js";import{deepEqual as b}from"../../utils/deep-equal.js";const w=h("div",o.forwardRef)`
+  display: flex;
+  position: relative;
+  border-radius: 15px;
+
+  &:hover {
+    .polotno-page-menu {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+`,P=h("div")`
+  position: absolute;
+  z-index: 20;
+  top: 5px;
+  right: 5px;
+  opacity: 0;
+  pointer-events: none;
+
+  &:hover {
+    display: block;
+  }
+`;let y=[],k=!1;const E=async()=>{if(k||0===y.length){return}k=!0;const{page:e,setPreview:t}=y.shift();try{t(await e.store.toDataURL({pageId:e.id,pixelRatio:.1,quickMode:!0}))}catch(o){o instanceof Error&&"string"==typeof o.message&&(o.message.includes("Canvas was unmounted.")||o.message.includes("<Workspace /> component is not mounted"))||console.error(o)}finally{k=!1}E()};export const usePagePreview=({page:e,ref:t})=>{const[i,s]=o.useState(null),a=o.useRef(!1);return o.useEffect(()=>{const o=()=>{y.push({page:e,setPreview:e=>s(e)}),E()};let i=null,l=null,d=Date.now();const c=()=>{i&&clearTimeout(i),a.current&&(l||(l=setTimeout(()=>{Date.now()-d>=6e3&&(o(),d=Date.now(),l=null)},6e3)),i=setTimeout(()=>{o(),d=Date.now(),i=null,l&&(clearTimeout(l),l=null)},300))};let p=null;const u=r(e,e=>{b(p,e)||(c(),p=e)}),g=n(()=>e.children.some(e=>e._editModeEnabled),e=>{e||c()}),m=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(a.current=!0,c()):(i&&clearTimeout(i),l&&clearTimeout(l),a.current=!1)})},{threshold:.1});return t.current&&m.observe(t.current),()=>{m.disconnect(),i&&clearTimeout(i),l&&clearTimeout(l),u(),g(),y=y.filter(t=>t.page!==e)}},[t,e]),i};export const PagePreview=i(({page:i,scale:n})=>{const r=i.store.activePage===i||i.store._selectedPagesIds.includes(i.id),h=o.useRef(null),b=i.store.pages.indexOf(i),y=60/i.computedHeight*i.computedWidth,k=x.animationsEnabled?i.duration*n:y,E=i.store.pages.length>1;o.useLayoutEffect(()=>{h.current&&(h.current.style.width=k+"px")},[b,k]);const I=usePagePreview({page:i,ref:h}),{handleStartDrag:R}=((e,t)=>({handleStartDrag:o.useCallback((o,i)=>{o.preventDefault();const n=o=>{if(o.preventDefault(),!t.current){return}const n="start"===i?7:-7,{clientX:r}=o,{left:s,width:a}=t.current.getBoundingClientRect(),l=(r-s-n)/a;"end"===i&&e.set({duration:Math.max(1e3,l*e.duration)})},r=()=>{window.removeEventListener("mousemove",n),window.removeEventListener("mouseup",r)};window.addEventListener("mousemove",n),window.addEventListener("mouseup",r)},[t,e])}))(i,h);return t(w,{style:{width:k+"px",marginRight:x.animationsEnabled?"0px":"10px",height:"60px"},ref:h,className:"polotno-page-container"+(r?" sortable-selected":""),children:[e("div",{style:{width:"100%",height:"100%",borderRadius:"15px",backgroundImage:I?`url("${I}")`:"none",backgroundRepeat:"repeat-x",backgroundSize:"auto 100%",backgroundColor:"white",display:"flex",justifyContent:"center",alignItems:"center"},onClick:e=>{const{store:t}=i,o=t._selectedPagesIds.length?t._selectedPagesIds:t.activePage?[t.activePage.id]:[],n=o.includes(i.id),r=e.shiftKey;if(r&&n){const e=o.filter(e=>e!==i.id);t.selectPages(e)}else if(r&&!n){const e=o.concat([i.id]);t.selectPages(e)}else{t.selectPages([i.id])}},children:!I&&e(v,{})}),e("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:r?"2px solid rgb(0, 161, 255, 0.9)":"2px solid lightgrey",zIndex:1,pointerEvents:"none"}}),x.animationsEnabled&&t("div",{style:{position:"absolute",zIndex:1,bottom:"5px",left:"5px",backgroundColor:"rgba(0, 0, 0, 0.5)",color:"white",padding:"2px 7px",textAlign:"center",borderRadius:"4rem"},children:[(i.duration/1e3).toFixed(1),"s"]}),x.animationsEnabled&&e("div",{style:{position:"absolute",zIndex:1,top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",border:"1px solid rgb(255, 255, 255, 0.6)",backgroundColor:"rgb(0, 0, 0, 0.6)",cursor:"ew-resize"},onMouseDown:e=>R(e,"end")}),r&&e(P,{className:"polotno-page-menu",onClick:e=>{e.stopPropagation()},children:e(d,{content:t(a,{style:{width:"140px"},children:[e(l,{icon:e(p,{}),text:f("pagesTimeline.duplicatePage"),onClick:()=>{const e=i.store,t=(e.selectedPages||[]).filter(Boolean),o=t.length?t:e.activePage?[e.activePage]:[];if(!o.length){return}const n=new Set(o.map(e=>e.id)),r=e.pages.filter(e=>n.has(e.id)),s=r[r.length-1],a=r.map(e=>e.clone()),l=e.pages.indexOf(s);a.forEach((e,t)=>{e.setZIndex(l+1+t)}),e.selectPages(a.map(e=>e.id))}}),e(l,{icon:e(u,{}),text:f("pagesTimeline.addPage"),onClick:()=>{var e,t,o;const n=i.store.addPage({bleed:(null===(e=i.store.activePage)||void 0===e?void 0:e.bleed)||0,width:(null===(t=i.store.activePage)||void 0===t?void 0:t.width)||"auto",height:(null===(o=i.store.activePage)||void 0===o?void 0:o.height)||"auto"}),r=i.store.pages.indexOf(i);n.setZIndex(r+1)}}),E&&e(l,{icon:e(m,{}),text:f("pagesTimeline.removePage"),onClick:()=>{const e=i.store,t=(e.selectedPages||[]).filter(Boolean),o=t.length?t.map(e=>e.id):e.activePage?[e.activePage.id]:[];o.length&&e.deletePages(o)}})]}),position:c.TOP,children:e(s,{icon:e(g,{}),style:{minHeight:"20px",borderRadius:"10px"}})})})]})});

package/blueprint/pages-timeline/pages-timeline.d.ts

@@ -0,0 +1,8 @@
+import '../blueprint-guard';
+import { StoreType } from '../../model/store.js';
+export declare const PagesTimeline: (({ store, defaultOpened, }: {
+    store: StoreType;
+    defaultOpened?: boolean;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

package/blueprint/pages-timeline/pages-timeline.js

@@ -0,0 +1,38 @@
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import"../blueprint-guard";import n from"react";import{observer as o}from"mobx-react-lite";import{Button as r,Navbar as s}from"@blueprintjs/core";import{Plus as a,Play as l}from"@blueprintjs/icons";import d from"../../utils/styled.js";import{flags as m}from"../../utils/flags.js";import{t as p}from"../../utils/l10n.js";import{Pages as c}from"./pages.js";import{CurrentTime as u}from"./current-time.js";import{Audios as h}from"./audios.js";import{ElementsTimeline as v}from"./elements.js";import{PlayButton as f}from"./play-button.js";import{TimeRuler as g}from"./time-ruler.js";const b=d("div")`
+  position: relative;
+  height: 0px;
+`,x=d("div")`
+  position: absolute;
+  bottom: 5px;
+  width: auto;
+  left: 5px;
+  overflow: hidden;
+  box-shadow: 0 0 4px lightgrey;
+  border-radius: 5px;
+  z-index: 1;
+`,w=d("div")`
+  position: absolute;
+  top: 0;
+  left: 0px;
+  right: 0px;
+  height: 14px;
+  transform: translateY(-50%);
+  cursor: ns-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    content: '';
+    width: 100%;
+    height: 4px;
+    border-radius: 2px;
+    background: rgba(0, 0, 0, 0);
+    transition: background 0.2s;
+  }
+
+  &:hover::before,
+  &.active::before {
+    background: var(--polotno-accent-color, #137cbd);
+  }
+`;export const PagesTimeline=o(({store:o,defaultOpened:d=!1})=>{const y=n.useRef(null),[j,E]=n.useState(d),[k,L]=n.useState(.02),[C,M]=n.useState(()=>(e=>{if(!m.animationsEnabled){return 65}const t=e.pages.reduce((e,t)=>e+t.children.length,0),i=25*e.audios.length+20*t+140;return Math.min(Math.max(i,140),420)})(o)),[R,S]=n.useState(!1),P=n.useRef(0),z=n.useRef(C),D=n.useRef(!1),W=o.duration*k,Y=n.useCallback(e=>{if(!D.current){return}const t=e.clientY-P.current,i=z.current-t,n=Math.min(420,Math.max(140,i));M(n)},[]),N=n.useCallback(()=>{D.current&&(D.current=!1,S(!1),window.removeEventListener("mousemove",Y),window.removeEventListener("mouseup",N))},[Y]);return n.useEffect(()=>()=>{window.removeEventListener("mousemove",Y),window.removeEventListener("mouseup",N)},[Y,N]),t(i,{children:[e(b,{children:e(x,{children:e(s,{style:{height:"35px",padding:"0 5px"},children:e(s.Group,{style:{height:"35px"},children:e(r,{minimal:!0,onClick:()=>{E(!j)},icon:m.animationsEnabled&&!j?e(l,{}):null,children:p("pagesTimeline.pages")})})})})}),t(s,{style:{padding:"5px",height:"auto",zIndex:1,position:"relative",overflow:"visible",display:j?"block":"none"},className:"polotno-pages-timeline",children:[m.animationsEnabled&&e(w,{onMouseDown:e=>{e.preventDefault(),P.current=e.clientY,z.current=C,D.current=!0,S(!0),window.addEventListener("mousemove",Y),window.addEventListener("mouseup",N)},className:R?"active":void 0,title:"Drag to adjust timeline height"}),m.animationsEnabled&&e("div",{style:{display:"flex",justifyContent:"center"},children:e(f,{store:o,scale:k,onScaleChange:L})}),e("div",{dir:"ltr",style:{width:"100%",position:"relative",height:C},children:e("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflowX:"auto",padding:"0 24px"},ref:y,children:t("div",{style:{position:"relative",minWidth:m.animationsEnabled?W+"px":void 0},children:[m.animationsEnabled&&e(g,{store:o,scale:k,minWidth:W}),t("div",{style:{position:"relative",display:"flex"},children:[e("div",{style:{position:"relative",minWidth:m.animationsEnabled?W+"px":void 0,height:"60px"},children:e(c,{store:o,scale:k})}),e(r,{icon:e(a,{}),style:{width:"60px",marginLeft:"12px"},onClick:()=>{var e;o.addPage({bleed:(null===(e=o.activePage)||void 0===e?void 0:e.bleed)||0})},minimal:!0})]}),m.animationsEnabled&&t(i,{children:[e(v,{store:o,scale:k,width:W}),e(h,{store:o,scale:k,width:W})]}),m.animationsEnabled&&e(u,{store:o,scale:k,dragAreaRef:y,variant:"timeline"})]})})})]})]})});

package/blueprint/pages-timeline/pages.d.ts

@@ -0,0 +1,7 @@
+import { StoreType } from '../../model/store.js';
+export declare const Pages: (({ store, scale }: {
+    store: StoreType;
+    scale: number;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

package/blueprint/pages-timeline/pages.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{observer as t}from"mobx-react-lite";import{ReactSortable as o}from"react-sortablejs";import{PagePreview as r}from"./page-preview.js";export const Pages=t(({store:t,scale:s})=>{const i=t.pages.map(e=>({id:e.id}));return e(o,{list:i,setList:e=>{e.forEach(({id:e},o)=>{const r=t.pages.find(t=>t.id===e);r&&t.pages.indexOf(r)!==o&&r.setZIndex(o)})},direction:"horizontal",style:{display:"flex",flexDirection:"row"},delay:500,delayOnTouchOnly:!0,className:"polotno-pages-container",children:i.map(({id:o})=>{const i=t.pages.find(e=>e.id===o);return i?e(r,{page:i,scale:s},o):null})})});

package/blueprint/pages-timeline/play-button.d.ts

@@ -0,0 +1,10 @@
+import { StoreType } from '../../model/store.js';
+interface PlayButtonProps {
+    store: StoreType;
+    scale?: number;
+    onScaleChange?: (scale: number) => void;
+}
+export declare const PlayButton: (({ store, scale, onScaleChange }: PlayButtonProps) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export {};

package/blueprint/pages-timeline/play-button.js

@@ -0,0 +1,24 @@
+import{jsxs as t,jsx as i}from"react/jsx-runtime";import{observer as e}from"mobx-react-lite";import{Button as n,ButtonGroup as o}from"@blueprintjs/core";import{Pause as l,Play as a}from"@blueprintjs/icons";import r from"../../utils/styled.js";const s=r("div")`
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  width: 100%;
+  gap: 12px;
+`,c=r("div")`
+  display: flex;
+  justify-content: flex-end;
+`,m=r("div")`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+`,d=r("div")`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+`,p=r("div")`
+  font-size: 13px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+`,f=t=>{const i=Math.floor(t/6e4),e=Math.floor(t%6e4/1e3);return`${i.toString().padStart(2,"0")}:${e.toString().padStart(2,"0")}`};export const PlayButton=e(({store:e,scale:r,onScaleChange:g})=>{var u;const y=(null===(u=e.activePage)||void 0===u?void 0:u.startTime)||0,h=e.isPlaying||0!==e.currentTime?e.currentTime:y;return t(s,{children:[i(c,{children:t(p,{style:{opacity:.85,textAlign:"right"},children:[f(h)," / ",f(e.duration)]})}),i(m,{className:"polotno-play-button-container",children:i(n,{icon:e.isPlaying?i(l,{size:25}):i(a,{size:25}),minimal:!0,onClick:()=>{var t;if(e.isPlaying){const t=e.activePage;e.stop(),t&&e.selectPage(t.id)}else{e.play({startTime:(null===(t=e.activePage)||void 0===t?void 0:t.startTime)||0})}}})}),g&&r&&t(d,{children:[i(p,{style:{opacity:.6,fontSize:"12px"},children:"Zoom timeline"}),t(o,{minimal:!0,children:[i(n,{icon:i("span",{style:{fontWeight:"bold"},children:"−"}),onClick:()=>{g&&r&&g(Math.max(r/1.5,.005))},title:"Zoom out timeline"}),i(n,{icon:i("span",{style:{fontWeight:"bold"},children:"+"}),onClick:()=>{g&&r&&g(Math.min(1.5*r,.2))},title:"Zoom in timeline"})]})]})]})});

package/blueprint/pages-timeline/spinner.d.ts

@@ -0,0 +1 @@
+export declare const Spinner: any;

package/blueprint/pages-timeline/spinner.js

@@ -0,0 +1,14 @@
+import r from"../../utils/styled.js";export const Spinner=r("div")`
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #09f;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: spin 1s linear infinite;
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;

package/blueprint/pages-timeline/time-ruler.d.ts

@@ -0,0 +1,8 @@
+import { StoreType } from '../../model/store.js';
+export declare const TimeRuler: (({ store, scale, minWidth, }: {
+    store: StoreType;
+    scale: number;
+    minWidth?: number;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

package/blueprint/pages-timeline/time-ruler.js

@@ -0,0 +1,13 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n from"react";import{observer as o}from"mobx-react-lite";import r from"../../utils/styled.js";const i=r("div",n.forwardRef)`
+  position: relative;
+  height: 24px;
+  user-select: none;
+  cursor: pointer;
+  color: inherit;
+`,a=r("div")`
+  margin-top: 4px;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  opacity: 0.7;
+`;export const TimeRuler=o(({store:o,scale:r,minWidth:s=0})=>{const l=n.useRef(null),c=Math.max(o.duration,0),u=Math.max(1,Math.ceil(c/1e3)),d=Math.max(c*r,s,120),m=1/(1/(1e3*r)),h=[1,2,5,10,15,30,60,120,300,600],v=h.find(e=>e*m>=70)||h[h.length-1],p=Math.max(1,Math.ceil(20/m)),w=n.useCallback(e=>Math.max(0,Math.min(e,o.duration)),[o.duration]),f=n.useCallback(e=>{var t;if(!l.current){return}const n=l.current.getBoundingClientRect(),i=Math.min(Math.max(e-n.left,0),n.width),a=w(i/r);o.setCurrentTime(a),null===(t=o.checkActivePage)||void 0===t||t.call(o)},[w,r,o]),x=n.useCallback(e=>{f(e);const t=e=>{e.preventDefault(),f(e.clientX)},n=()=>{window.removeEventListener("mousemove",t),window.removeEventListener("mouseup",n)};window.addEventListener("mousemove",t),window.addEventListener("mouseup",n)},[f]),g=n.useCallback(e=>{f(e);const t=e=>{const t=e.touches[0];t&&(e.preventDefault(),f(t.clientX))},n=()=>{window.removeEventListener("touchmove",t),window.removeEventListener("touchend",n),window.removeEventListener("touchcancel",n)};window.addEventListener("touchmove",t,{passive:!1}),window.addEventListener("touchend",n),window.addEventListener("touchcancel",n)},[f]),M=n.useCallback(e=>{e.preventDefault(),x(e.clientX)},[x]),b=n.useCallback(e=>{const t=e.touches[0];t&&(e.preventDefault(),g(t.clientX))},[g]);return e(i,{ref:l,className:"polotno-time-ruler",onMouseDown:M,onTouchStart:b,style:{minWidth:d+"px",width:d+"px",touchAction:"none"},children:Array.from({length:u+1},(n,o)=>{const i=o%v===0,s=o%p===0&&!i;return i||s?t("div",{style:{position:"absolute",left:1e3*o*r+"px",top:0,transform:"translateX(-50%)",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",height:"100%",gap:4,pointerEvents:"none"},children:[s&&e("div",{style:{width:4,height:4,borderRadius:"50%",backgroundColor:"currentColor",opacity:.5}}),i&&e(a,{children:o<60?`${o}s`:`${Math.floor(o/60)}m${o%60?o%60+"s":""}`})]},o):null})})});

package/blueprint/pages-timeline/track-styles.d.ts

@@ -0,0 +1,7 @@
+export declare const TrackLabel: any;
+export declare const WaveformSvg: any;
+export declare const TrackWrapper: any;
+export declare const TrackContainer: any;
+export declare const TrackMenu: any;
+export declare const TrackHandleLeft: any;
+export declare const TrackHandleRight: any;

package/blueprint/pages-timeline/track-styles.js

@@ -0,0 +1,79 @@
+import o from"../../utils/styled.js";export const TrackLabel=o("div")`
+  position: absolute;
+  inset: 0 0 0 0;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  pointer-events: none;
+  font-size: 11px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.75);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .bp6-dark & {
+    color: rgba(255, 255, 255, 0.92);
+  }
+`;export const WaveformSvg=o("svg")`
+  & path {
+    fill: rgba(0, 0, 0, 0.5);
+  }
+
+  .bp6-dark & path {
+    fill: rgba(255, 255, 255, 0.7);
+  }
+`;export const TrackWrapper=o("div")`
+  position: absolute;
+
+  &:hover {
+    .polotno-track-menu {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+`;export const TrackContainer=o("div")`
+  position: absolute;
+  border-radius: 10px;
+  color: rgba(0, 161, 255, 0.85);
+  background: linear-gradient(
+    135deg,
+    rgba(0, 161, 255, 0.15),
+    rgba(0, 161, 255, 0.35)
+  );
+  border: 1px solid rgba(0, 120, 200, 0.55);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  cursor: move;
+  overflow: hidden;
+`;export const TrackMenu=o("div")`
+  position: absolute;
+  z-index: 20;
+  top: 50%;
+  right: 12px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-50%);
+`;const e=o("div")`
+  position: absolute;
+  top: 1px;
+  width: 12px;
+  height: calc(100% - 2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ew-resize;
+  pointer-events: auto;
+
+  &::before {
+    content: '';
+    width: 8px;
+    height: 75%;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+`;export const TrackHandleLeft=o(e)`
+  left: 0;
+`;export const TrackHandleRight=o(e)`
+  right: 0;
+`;

package/blueprint/pages-timeline/waveform.d.ts

@@ -0,0 +1,14 @@
+export declare function generateWaveformData(audioUrl: string): Promise<number[]>;
+export declare function createFullWaveformPath(samples: number[], height: number): {
+    path: string;
+    width: number;
+};
+export declare function useWaveformData(src: string): {
+    data: number[] | null;
+    isLoading: boolean;
+    error: Error | null;
+};
+export declare function useWaveformPath(data: number[] | null, height?: number): {
+    path: string;
+    width: number;
+};

package/blueprint/pages-timeline/waveform.js

@@ -0,0 +1 @@
+import t from"react";const e={};let a=null;export async function generateWaveformData(t){if(e[t]){return e[t]}const r="undefined"==typeof window?null:(a=a||new AudioContext,a);if(!r){return[]}const n=await fetch(t),o=await n.arrayBuffer(),l=(await r.decodeAudioData(o)).getChannelData(0),u=Math.max(1,Math.floor(l.length/500)),f=new Array(500).fill(0);for(let e=0;e<500;e++){let t=0;const a=e*u;for(let e=0;e<u&&a+e<l.length;e++){t=Math.max(t,Math.abs(l[a+e]))}f[e]=t}const h=Math.max(...f)||1,i=f.map(t=>Number((t/h).toFixed(4)));return e[t]=i,i}export function createFullWaveformPath(t,e){if(!t.length||e<=0){return{path:"",width:0}}const a=e/2,r=Math.max(1,t.length-1);let n="";for(let o=0;o<t.length;o++){const e=o,r=a-t[o]*a;n+=0===o?`M ${e},${r}`:` L ${e},${r}`}for(let o=t.length-1;o>=0;o--){n+=` L ${o},${a+t[o]*a}`}return n+=" Z",{path:n,width:r}}export function useWaveformData(e){const[a,r]=t.useState(null),[n,o]=t.useState(!1),[l,u]=t.useState(null);return t.useEffect(()=>{e?(o(!0),generateWaveformData(e).then(t=>{r(t),o(!1)}).catch(t=>{console.error("Error generating waveform:",t),u(t),o(!1)})):r(null)},[e]),{data:a,isLoading:n,error:l}}export function useWaveformPath(e,a=20){return t.useMemo(()=>e?createFullWaveformPath(e,a):{path:"",width:0},[e,a])}

package/blueprint/side-panel/ai-images-panel.d.ts

@@ -0,0 +1,6 @@
+import { StoreType } from '../../model/store.js';
+export declare const AiImagesPanel: (({ store }: {
+    store: StoreType;
+}) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};

package/blueprint/side-panel/ai-images-panel.js

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import{observer as o}from"mobx-react-lite";import{InputGroup as r,Button as n}from"@blueprintjs/core";import{getKey as a}from"../../utils/validate-key.js";import{getImageSize as s}from"../../utils/image.js";import{ImagesGrid as l}from"./images-grid.js";import{getAPI as m}from"../../utils/api.js";export const AiImagesPanel=o(({store:o})=>{const p=i.useRef(null),[d,c]=i.useState(null),[g,u]=i.useState(!1),f=async()=>{u(!0),c(null);const e=await fetch(`${m()}/get-stable-diffusion?KEY=${a()}&prompt=${p.current.value}`);if(u(!1),!e.ok){return void alert("Something went wrong, please try again later...")}const t=await e.json();c(t.output[0])};return t("div",{style:{height:"100%",display:"flex",flexDirection:"column"},children:[e("div",{style:{padding:"15px 0"},children:"Stable Diffusion is a latent text-to-image diffusion model capable of generating photo-realistic images given any text input"}),e(r,{placeholder:"Type your image generation prompt here...",onKeyDown:e=>{"Enter"===e.key&&f()},style:{marginBottom:"20px"},inputRef:p}),e(n,{onClick:f,intent:"primary",loading:g,style:{marginBottom:"40px"},children:"Generate"}),d&&e(l,{shadowEnabled:!1,images:d?[d]:[],getPreview:e=>e,isLoading:g,onSelect:async(e,t,i)=>{var r;const n=e;if(i&&"svg"===i.type&&i.contentEditable){return void i.set({maskSrc:n})}if(i&&"image"===i.type&&i.contentEditable){return void i.set({src:n})}const{width:a,height:l}=await s(n),m=((null==t?void 0:t.x)||o.width/2)-a/2,p=((null==t?void 0:t.y)||o.height/2)-l/2;null===(r=o.activePage)||void 0===r||r.addElement({type:"image",src:n,width:a,height:l,x:m,y:p})},rowsNumber:1})]})});

package/blueprint/side-panel/animations-panel.d.ts

@@ -0,0 +1,11 @@
+import { StoreType } from '../../model/store.js';
+export declare const NumberInput: ({ value, onValueChange, ...props }: {
+    [x: string]: any;
+    value: any;
+    onValueChange: any;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimationsPanel: (({ store }: {
+    store: StoreType;
+}) => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};