polotno 2.4.21 → 2.4.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.4.21",
+  "version": "2.4.23",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [

package/pages-timeline/pages-timeline.js

@@ -1,8 +1,8 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PagesTimeline=exports.Pages=void 0;const mobx_react_lite_1=require("mobx-react-lite"),react_1=__importDefault(require("react")),mobx_state_tree_1=require("mobx-state-tree"),core_1=require("@blueprintjs/core"),icons_1=require("@blueprintjs/icons"),styled_1=__importDefault(require("../utils/styled")),screen_1=require("../utils/screen"),HideButtonContainer=(0,styled_1.default)("div")`
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PagesTimeline=exports.Pages=void 0;const mobx_react_lite_1=require("mobx-react-lite"),react_1=__importDefault(require("react")),mobx_state_tree_1=require("mobx-state-tree"),core_1=require("@blueprintjs/core"),icons_1=require("@blueprintjs/icons"),styled_1=__importDefault(require("../utils/styled")),zoom_buttons_1=require("../toolbar/zoom-buttons"),HideButtonContainer=(0,styled_1.default)("div")`
   position: absolute;
   right: 50%;
   transform: translateX(50%);
-  top: -15px;
+  top: -20px;
   height: 16px;
   width: 96px;
   fill: white;
@@ -19,7 +19,7 @@
   }
 
   .bp5-dark & .fill {
-    fill: #383e47;
+    fill: #2f343c;
   }
 
   & .pointer {
@@ -42,6 +42,4 @@
   .bp5-dark &:hover .pointer {
     color: white;
   }
-
-  ${(0,screen_1.mobileStyle)("\n    display: none;\n  ")}
-`,HideButton=({onClick:e})=>react_1.default.createElement(HideButtonContainer,{onClick:e},react_1.default.createElement("svg",{width:"96",height:"16",viewBox:"0 0 96 16",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("path",{className:"fill stroke",d:"M 95.865 16 C 93.555 14.8571 92.4 12.5714 88.6116 8.9143 C 88.4008 8.6286 88.242 8.4571 88.0054 8.3429 L 88.011 8.2286 C 85.701 5.9429 83.622 3.8857 81.1965 2.4 C 79.002 1.1429 76.3455 0.3429 72.765 0.1143 V 0 H 25.41 C 21.1365 0 18.1335 0.8 15.477 2.2857 C 12.936 3.7714 10.9725 5.8286 8.5073 8.2286 L 8.547 8.24 C 8.316 8.4571 8.085 8.6278 7.8393 8.831 C 4.0161 12.6741 3.465 14.8571 0 16"})),react_1.default.createElement("div",{className:"pointer"},"<")),Page=(0,mobx_react_lite_1.observer)((({page:e,scale:t})=>{const[r,a]=react_1.default.useState(null),l=e.store.activePage===e;react_1.default.useEffect((()=>{const t=async()=>{const t=await e.store.toDataURL({pageId:e.id,pixelRatio:.1});a(t)};let r=null;const l=(0,mobx_state_tree_1.onSnapshot)(e.children,(()=>{r||(r=setTimeout((()=>{t(),r=null}),1e3))}));return t(),()=>{clearTimeout(r),l()}}),[]);const o=react_1.default.useRef(null);return react_1.default.createElement("div",{style:{width:e.duration*t+"px",height:"60px",display:"flex",position:"relative",overflow:"hidden",borderRadius:"15px",overflow:"hidden"},ref:o},react_1.default.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"10px",backgroundImage:`url("${r}")`,backgroundRepeat:"repeat-x",backgroundSize:"auto 100%"},onClick:()=>{e.store.selectPage(e.id)}}),l&&react_1.default.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:"2px solid rgb(0, 161, 255, 0.9)"}}),react_1.default.createElement("div",{style:{position:"absolute",top:"50%",right:"0px",width:"8px",height:"50%",transform:"translateY(-50%) translateX(-3px)",borderRadius:"5px",backgroundColor:"rgb(0, 161, 255, 0.9)",cursor:"ew-resize"},onMouseDown:t=>{((t,r)=>{t.preventDefault();const a=t=>{t.preventDefault();const a="start"===r?7:-7,{clientX:l}=t,{left:i,width:n}=o.current.getBoundingClientRect(),s=(l-i-a)/n;"start"===r||"end"===r&&e.set({duration:Math.max(1e3,s*e.duration)})};window.addEventListener("mousemove",a),window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",a)}))})(t,"end")}}))})),CurrentTime=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>react_1.default.createElement("div",{style:{position:"absolute",left:e.currentTime*t+"px",top:"-5px",width:"2px",height:"calc(100% + 10px)",backgroundColor:"rgb(0, 161, 255, 0.9)"}})));exports.Pages=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>react_1.default.createElement("div",{style:{display:"flex",position:"relative"}},e.pages.map((e=>react_1.default.createElement(Page,{key:e.id,page:e,scale:t}))),react_1.default.createElement(CurrentTime,{store:e,scale:t})))),exports.PagesTimeline=(0,mobx_react_lite_1.observer)((({store:e})=>react_1.default.createElement("div",{className:"bp5-navbar",style:{display:"flex",padding:"5px",height:"auto"}},react_1.default.createElement("div",{style:{width:"100%",position:"relative",height:"100px"}},react_1.default.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflowX:"auto",padding:"10px"}},react_1.default.createElement("div",{style:{height:"60px",display:"flex"}},react_1.default.createElement("div",{style:{width:"80px"}},react_1.default.createElement(core_1.Button,{icon:e.isPlaying?react_1.default.createElement(icons_1.Pause,null):react_1.default.createElement(icons_1.Play,null),onClick:()=>{e.isPlaying?e.stop():e.play()},minimal:!0,style:{width:"100%",height:"100%"}})),react_1.default.createElement(exports.Pages,{store:e,scale:.02}),react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(icons_1.Plus,null),onClick:()=>{e.addPage()},minimal:!0})),react_1.default.createElement(HideButton,null))))));
+`,HideButton=({onClick:e,opened:t})=>react_1.default.createElement(HideButtonContainer,{onClick:e},react_1.default.createElement("svg",{width:"96",height:"16",viewBox:"0 0 96 16",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("path",{className:"fill stroke",d:"M 95.865 16 C 93.555 14.8571 92.4 12.5714 88.6116 8.9143 C 88.4008 8.6286 88.242 8.4571 88.0054 8.3429 L 88.011 8.2286 C 85.701 5.9429 83.622 3.8857 81.1965 2.4 C 79.002 1.1429 76.3455 0.3429 72.765 0.1143 V 0 H 25.41 C 21.1365 0 18.1335 0.8 15.477 2.2857 C 12.936 3.7714 10.9725 5.8286 8.5073 8.2286 L 8.547 8.24 C 8.316 8.4571 8.085 8.6278 7.8393 8.831 C 4.0161 12.6741 3.465 14.8571 0 16"})),react_1.default.createElement("div",{className:"pointer"},t?"<":">")),Page=(0,mobx_react_lite_1.observer)((({page:e,scale:t})=>{const[r,a]=react_1.default.useState(null),o=e.store.activePage===e;react_1.default.useEffect((()=>{const t=async()=>{const t=await e.store.toDataURL({pageId:e.id,pixelRatio:.1});a(t)};let r=null;const o=(0,mobx_state_tree_1.onSnapshot)(e.children,(()=>{r||(r=setTimeout((()=>{t(),r=null}),1e3))}));return t(),()=>{clearTimeout(r),o()}}),[]);const l=react_1.default.useRef(null);return react_1.default.createElement("div",{style:{width:e.duration*t+"px",height:"60px",display:"flex",position:"relative",overflow:"hidden",borderRadius:"15px"},ref:l},react_1.default.createElement("div",{style:{width:"100%",height:"100%",borderRadius:"10px",backgroundImage:`url("${r}")`,backgroundRepeat:"repeat-x",backgroundSize:"auto 100%"},onClick:()=>{e.store.selectPage(e.id)}}),o&&react_1.default.createElement("div",{style:{position:"absolute",top:"0",left:"0px",bottom:"0px",right:"0px",borderRadius:"15px",border:"2px solid rgb(0, 161, 255, 0.9)"}}),react_1.default.createElement("div",{style:{position:"absolute",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:t=>{((t,r)=>{t.preventDefault();const a=t=>{t.preventDefault();const a="start"===r?7:-7,{clientX:o}=t,{left:i,width:n}=l.current.getBoundingClientRect(),s=(o-i-a)/n;"start"===r||"end"===r&&e.set({duration:Math.max(1e3,s*e.duration)})};window.addEventListener("mousemove",a),window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",a)}))})(t,"end")}}))})),CurrentTime=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>react_1.default.createElement("div",{style:{position:"absolute",left:e.currentTime*t+"px",top:"-5px",width:"2px",height:"calc(100% + 10px)",backgroundColor:"rgb(0, 161, 255, 0.9)"}})));exports.Pages=(0,mobx_react_lite_1.observer)((({store:e,scale:t})=>react_1.default.createElement("div",{style:{display:"flex",position:"relative"}},e.pages.map((e=>react_1.default.createElement(Page,{key:e.id,page:e,scale:t}))),react_1.default.createElement(CurrentTime,{store:e,scale:t})))),exports.PagesTimeline=(0,mobx_react_lite_1.observer)((({store:e})=>{const[t,r]=react_1.default.useState(!0);return react_1.default.createElement(core_1.Navbar,{style:{display:"flex",padding:"5px",height:"auto"}},react_1.default.createElement("div",{style:{width:"100%",position:"relative",height:t?"100px":"auto"}},react_1.default.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,overflowX:"auto",padding:"10px",display:t?"flex":"none"}},react_1.default.createElement("div",{style:{height:"60px",display:"flex"}},react_1.default.createElement("div",{style:{width:"70px",paddingRight:"10px"}},react_1.default.createElement(core_1.Button,{icon:e.isPlaying?react_1.default.createElement(icons_1.Pause,{size:25}):react_1.default.createElement(icons_1.Play,{size:25}),onClick:()=>{e.isPlaying?e.stop():e.play()},style:{width:"100%",height:"100%",borderRadius:"50px"}})),react_1.default.createElement(exports.Pages,{store:e,scale:.02}),react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(icons_1.Plus,null),onClick:()=>{e.addPage()},minimal:!0}))),react_1.default.createElement(HideButton,{onClick:()=>{r(!t)},opened:t}),react_1.default.createElement(zoom_buttons_1.ZoomGroup,{store:e,align:"right"})))}));