polotno 2.2.5 → 2.3.0

package/side-panel/background-panel.js

@@ -5,4 +5,4 @@
   border-radius: 2px;
   box-shadow: 0 0 2px rgba(16, 22, 26, 0.3);
   cursor: pointer;
-`,Colored=e=>{var{children:t,color:r}=e,a=__rest(e,["children","color"]);return react_1.default.createElement(ColoredContainer,Object.assign({},a,{style:Object.assign(Object.assign({},a.style),{background:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 8 8'%3E%3Cg fill='rgba(112, 112, 116, 1)' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E\")"})}),react_1.default.createElement("div",{style:{width:"100%",height:"100%",background:r}},t))};exports.BackgroundPanel=(0,mobx_react_lite_1.observer)((({store:e})=>{var t,r;const{setQuery:a,loadMore:l,isReachingEnd:o,data:i,isLoading:n,error:s}=(0,use_api_1.useInfiniteAPI)({defaultQuery:"gradient",getAPI:({page:e,query:t})=>(0,api_1.unsplashList)({page:e,query:t})});return react_1.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-around",paddingBottom:"10px"}},react_1.default.createElement(color_picker_1.ColorPicker,{value:(null===(t=e.activePage)||void 0===t?void 0:t.background)||"white",onChange:t=>{var r;null===(r=e.activePage)||void 0===r||r.set({background:t})},store:e},react_1.default.createElement(Colored,{color:null===(r=e.activePage)||void 0===r?void 0:r.background,style:{fontSize:"30px"}},react_1.default.createElement(IosColorPalette_1.default,{style:{mixBlendMode:"difference"}}))),colors.map((t=>react_1.default.createElement(Colored,{key:t,color:t,onClick:()=>{var r;null===(r=e.activePage)||void 0===r||r.set({background:t})}})))),react_1.default.createElement(core_1.InputGroup,{leftIcon:"search",placeholder:(0,l10n_1.t)("sidePanel.searchPlaceholder"),onChange:e=>{a(e.target.value)},style:{marginBottom:"20px"}}),react_1.default.createElement("p",{style:{textAlign:"center"}},"Photos by"," ",react_1.default.createElement("a",{href:"https://unsplash.com/",target:"_blank"},"Unsplash")),react_1.default.createElement(images_grid_1.ImagesGrid,{images:null==i?void 0:i.map((e=>e.results)).flat().filter(Boolean),isLoading:n,getPreview:e=>e.urls.small,loadMore:!o&&l,onSelect:async t=>{var r;fetch((0,api_1.unsplashDownload)(t.id)),null===(r=e.activePage)||void 0===r||r.set({background:t.urls.regular})},error:s,getCredit:e=>react_1.default.createElement("span",null,"Photo by"," ",react_1.default.createElement("a",{href:`https://unsplash.com/@${e.user.username}?utm_source=polotno&utm_medium=referral`,target:"_blank"},e.user.name)," ","on"," ",react_1.default.createElement("a",{href:"https://unsplash.com/?utm_source=polotno&utm_medium=referral",target:"_blank"},"Unsplash"))}))}));
+`,Colored=e=>{var{children:t,color:r}=e,a=__rest(e,["children","color"]);return react_1.default.createElement(ColoredContainer,Object.assign({},a,{style:Object.assign(Object.assign({},a.style),{background:"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 8 8'%3E%3Cg fill='rgba(112, 112, 116, 1)' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E\")"})}),react_1.default.createElement("div",{style:{width:"100%",height:"100%",background:r}},t))};exports.BackgroundPanel=(0,mobx_react_lite_1.observer)((({store:e})=>{var t,r;const{setQuery:a,loadMore:l,isReachingEnd:o,data:i,isLoading:n,error:s}=(0,use_api_1.useInfiniteAPI)({defaultQuery:"gradient",getAPI:({page:e,query:t})=>(0,api_1.unsplashList)({page:e,query:t})});return react_1.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-around",paddingBottom:"10px"}},react_1.default.createElement(color_picker_1.ColorPicker,{value:(null===(t=e.activePage)||void 0===t?void 0:t.background)||"white",onChange:t=>{var r;null===(r=e.activePage)||void 0===r||r.set({background:t})},store:e},react_1.default.createElement(Colored,{color:null===(r=e.activePage)||void 0===r?void 0:r.background,style:{fontSize:"30px"}},react_1.default.createElement(IosColorPalette_1.default,{style:{mixBlendMode:"difference"}}))),colors.map((t=>react_1.default.createElement(Colored,{key:t,color:t,onClick:()=>{var r;null===(r=e.activePage)||void 0===r||r.set({background:t})}})))),react_1.default.createElement(core_1.InputGroup,{leftIcon:"search",placeholder:(0,l10n_1.t)("sidePanel.searchPlaceholder"),onChange:e=>{a(e.target.value)},type:"search",style:{marginBottom:"20px"}}),react_1.default.createElement("p",{style:{textAlign:"center"}},"Photos by"," ",react_1.default.createElement("a",{href:"https://unsplash.com/",target:"_blank"},"Unsplash")),react_1.default.createElement(images_grid_1.ImagesGrid,{images:null==i?void 0:i.map((e=>e.results)).flat().filter(Boolean),isLoading:n,getPreview:e=>e.urls.small,loadMore:!o&&l,onSelect:async t=>{var r;fetch((0,api_1.unsplashDownload)(t.id)),null===(r=e.activePage)||void 0===r||r.set({background:t.urls.regular})},error:s,getCredit:e=>react_1.default.createElement("span",null,"Photo by"," ",react_1.default.createElement("a",{href:`https://unsplash.com/@${e.user.username}?utm_source=polotno&utm_medium=referral`,target:"_blank"},e.user.name)," ","on"," ",react_1.default.createElement("a",{href:"https://unsplash.com/?utm_source=polotno&utm_medium=referral",target:"_blank"},"Unsplash"))}))}));

package/side-panel/elements-panel.js

@@ -1,4 +1,4 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ElementsPanel=exports.Shapes=exports.NounprojectPanel=void 0;const react_1=__importDefault(require("react")),mobx_state_tree_1=require("mobx-state-tree"),core_1=require("@blueprintjs/core"),images_grid_1=require("./images-grid"),swr_1=__importDefault(require("swr")),image_1=require("../utils/image"),svg_1=require("../utils/svg"),styled_1=__importDefault(require("../utils/styled")),l10n_1=require("../utils/l10n"),use_api_1=require("../utils/use-api"),api_1=require("../utils/api"),validate_key_1=require("../utils/validate-key"),iconToSrc=async e=>{const t=await fetch(`${api_1.API}/download-nounproject?id=${e}&KEY=${(0,validate_key_1.getKey)()}`),r=await t.text();return await(0,svg_1.svgToURL)(r)},NounContainer=(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.ElementsPanel=exports.Shapes=exports.NounprojectPanel=void 0;const react_1=__importDefault(require("react")),mobx_state_tree_1=require("mobx-state-tree"),core_1=require("@blueprintjs/core"),images_grid_1=require("./images-grid"),svg_1=require("../utils/svg"),figure_to_svg_1=require("../utils/figure-to-svg"),styled_1=__importDefault(require("../utils/styled")),l10n_1=require("../utils/l10n"),use_api_1=require("../utils/use-api"),api_1=require("../utils/api"),validate_key_1=require("../utils/validate-key"),iconToSrc=async e=>{const t=await fetch(`${api_1.API}/download-nounproject?id=${e}&KEY=${(0,validate_key_1.getKey)()}`),r=await t.text();return await(0,svg_1.svgToURL)(r)},NounContainer=(0,styled_1.default)("div")`
   height: 100%;
   overflow: hidden;
 
@@ -76,9 +76,14 @@
       strokeLinecap="round"
     ></path>
   </svg>
-`,data:{startHead:"circle",endHead:"bar",dash:[2,1]}}],Lines=({store:e})=>react_1.default.createElement(images_grid_1.ImagesGrid,{shadowEnabled:!1,rowsNumber:3,images:LINES,getPreview:e=>e.preview,itemHeight:50,isLoading:!1,onSelect:async(t,r,a)=>{const i=e.activePage.computedWidth/3;e.activePage.addElement(Object.assign({type:"line",x:r?r.x:e.activePage.computedWidth/2-i/2,y:r?r.y:e.activePage.computedHeight/2,width:i},t.data))}}),BasicShapes=({store:e})=>{const{data:t}=(0,swr_1.default)((0,api_1.polotnoShapesList)(),use_api_1.fetcher),r=Math.ceil((null==t?void 0:t.items.length)/3)||1;return react_1.default.createElement("div",{style:{height:110*r+"px"}},react_1.default.createElement(images_grid_1.ImagesGrid,{shadowEnabled:!1,rowsNumber:3,images:null==t?void 0:t.items,getPreview:e=>e.url,isLoading:!t,itemHeight:100,onSelect:async(t,r,a)=>{var i;const{width:o,height:s}=await(0,image_1.getImageSize)(t.url),n=await(0,svg_1.urlToBase64)(t.url);if(a&&"image"===a.type&&a.contentEditable)return void a.set({clipSrc:n});const l=((null==r?void 0:r.x)||e.width/2)-o/2,d=((null==r?void 0:r.y)||e.height/2)-s/2;null===(i=e.activePage)||void 0===i||i.addElement({type:"svg",width:o,height:s,x:l,y:d,src:n,keepRatio:!1})}}))},LinesContainer=(0,styled_1.default)("div")`
+`,data:{startHead:"circle",endHead:"bar",dash:[2,1]}}],Lines=({store:e})=>react_1.default.createElement(images_grid_1.ImagesGrid,{shadowEnabled:!1,rowsNumber:3,images:LINES,getPreview:e=>e.preview,itemHeight:50,isLoading:!1,onSelect:async(t,r,a)=>{const i=e.activePage.computedWidth/3;e.activePage.addElement(Object.assign({type:"line",x:r?r.x:e.activePage.computedWidth/2-i/2,y:r?r.y:e.activePage.computedHeight/2,width:i},t.data))}}),FIGURE_DEFAULTS={width:300,height:300,fill:"rgba(36, 36, 36, 1)",stroke:"#0c0c0c",strokeWidth:0,url:""},subTypes=Object.keys(figure_to_svg_1.TYPES),DEFAULTS=[FIGURE_DEFAULTS],FIGURES=[];subTypes.forEach((e=>{DEFAULTS.forEach((t=>{FIGURES.push(Object.assign({subType:e},t))}))})),FIGURES.forEach((e=>{e.url=(0,svg_1.svgToURL)((0,figure_to_svg_1.figureToSvg)(e))}));const BasicShapesContainer=(0,styled_1.default)("div")`
   height: 220px;
   .bp5-dark & img {
     filter: invert(1);
   }
-`,Shapes=({store:e})=>react_1.default.createElement("div",{style:{display:"flex",flexDirection:"column",height:"100%",overflow:"auto"}},react_1.default.createElement("p",null,(0,l10n_1.t)("sidePanel.lines")),react_1.default.createElement(LinesContainer,null,react_1.default.createElement(Lines,{store:e})),react_1.default.createElement("p",null,(0,l10n_1.t)("sidePanel.shapes")),react_1.default.createElement(BasicShapes,{store:e}));exports.Shapes=Shapes;const ElementsPanel=({store:e})=>{const t=react_1.default.useRef(),[r,a]=react_1.default.useState(""),[i,o]=react_1.default.useState(r);react_1.default.useEffect((()=>(t.current=setTimeout((()=>{o(r)}),500),()=>{clearTimeout(t.current)})),[r]);const s=!!i;return react_1.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},react_1.default.createElement(core_1.InputGroup,{leftIcon:"search",placeholder:(0,l10n_1.t)("sidePanel.searchPlaceholder"),onChange:e=>{a(e.target.value)},style:{marginBottom:"20px"}}),s&&react_1.default.createElement(exports.NounprojectPanel,{query:i,store:e}),!s&&react_1.default.createElement(exports.Shapes,{store:e}))};exports.ElementsPanel=ElementsPanel;
+`,BasicShapes=({store:e})=>{const t=Math.ceil(FIGURES.length/4)||1;return react_1.default.createElement(BasicShapesContainer,{style:{height:110*t+"px"}},react_1.default.createElement(images_grid_1.ImagesGrid,{shadowEnabled:!1,rowsNumber:4,images:FIGURES,getPreview:e=>e.url,isLoading:!1,itemHeight:100,onSelect:async(t,r,a)=>{var i;if(a&&"image"===a.type&&a.contentEditable)return void a.set({clipSrc:t.url});const o=(e.activePage.computedWidth+e.activePage.computedHeight)/2160,s=t.width*o,n=t.height*o,l=((null==r?void 0:r.x)||e.activePage.computedWidth/2)-s/2,d=((null==r?void 0:r.y)||e.activePage.computedHeight/2)-n/2;null===(i=e.activePage)||void 0===i||i.addElement(Object.assign(Object.assign({type:"figure"},t),{x:l,y:d,width:s,height:n}))}}))},LinesContainer=(0,styled_1.default)("div")`
+  height: 220px;
+  .bp5-dark & img {
+    filter: invert(1);
+  }
+`,Shapes=({store:e})=>react_1.default.createElement("div",{style:{display:"flex",flexDirection:"column",height:"100%",overflow:"auto"}},react_1.default.createElement("p",null,(0,l10n_1.t)("sidePanel.lines")),react_1.default.createElement(LinesContainer,null,react_1.default.createElement(Lines,{store:e})),react_1.default.createElement("p",null,(0,l10n_1.t)("sidePanel.shapes")),react_1.default.createElement(BasicShapes,{store:e}));exports.Shapes=Shapes;const ElementsPanel=({store:e})=>{const t=react_1.default.useRef(),[r,a]=react_1.default.useState(""),[i,o]=react_1.default.useState(r);react_1.default.useEffect((()=>(t.current=setTimeout((()=>{o(r)}),500),()=>{clearTimeout(t.current)})),[r]);const s=!!i;return react_1.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},react_1.default.createElement(core_1.InputGroup,{leftIcon:"search",placeholder:(0,l10n_1.t)("sidePanel.searchPlaceholder"),onChange:e=>{a(e.target.value)},style:{marginBottom:"20px"},type:"search"}),s&&react_1.default.createElement(exports.NounprojectPanel,{query:i,store:e}),!s&&react_1.default.createElement(exports.Shapes,{store:e}))};exports.ElementsPanel=ElementsPanel;

package/side-panel/photos-panel.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PhotosPanel=void 0;const react_1=__importDefault(require("react")),core_1=require("@blueprintjs/core"),images_grid_1=require("./images-grid"),image_1=require("../utils/image"),use_api_1=require("../utils/use-api"),l10n_1=require("../utils/l10n"),api_1=require("../utils/api"),image_2=require("../utils/image"),PhotosPanel=({store:e})=>{const{setQuery:t,loadMore:r,isReachingEnd:a,data:l,isLoading:i,error:s}=(0,use_api_1.useInfiniteAPI)({defaultQuery:"",getAPI:({page:e,query:t})=>(0,api_1.unsplashList)({page:e,query:t})});return react_1.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},react_1.default.createElement(core_1.InputGroup,{leftIcon:"search",placeholder:(0,l10n_1.t)("sidePanel.searchPlaceholder"),onChange:e=>{t(e.target.value)},style:{marginBottom:"20px"}}),react_1.default.createElement("p",{style:{textAlign:"center"}},"Photos by"," ",react_1.default.createElement("a",{href:"https://unsplash.com/",target:"_blank"},"Unsplash")),react_1.default.createElement(images_grid_1.ImagesGrid,{images:null==l?void 0:l.map((e=>e.results)).flat().filter(Boolean),getPreview:e=>e.urls.small,onSelect:async(t,r,a)=>{var l;if(fetch((0,api_1.unsplashDownload)(t.id)),a&&"svg"===a.type&&a.contentEditable)return void a.set({maskSrc:t.urls.regular});const{width:i,height:s}=await(0,image_1.getImageSize)(t.urls.small);if(a&&"image"===a.type&&a.contentEditable){const e=(0,image_2.getCrop)(a,{width:i,height:s});return void a.set(Object.assign({src:t.urls.regular},e))}const u=((null==r?void 0:r.x)||e.width/2)-i/2,n=((null==r?void 0:r.y)||e.height/2)-s/2;null===(l=e.activePage)||void 0===l||l.addElement({type:"image",src:t.urls.regular,width:i,height:s,x:u,y:n})},isLoading:i,error:s,loadMore:!a&&r,getCredit:e=>react_1.default.createElement("span",null,"Photo by"," ",react_1.default.createElement("a",{href:`https://unsplash.com/@${e.user.username}?utm_source=polotno&utm_medium=referral`,target:"_blank"},e.user.name)," ","on"," ",react_1.default.createElement("a",{href:"https://unsplash.com/?utm_source=polotno&utm_medium=referral",target:"_blank"},"Unsplash"))}))};exports.PhotosPanel=PhotosPanel;
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PhotosPanel=void 0;const react_1=__importDefault(require("react")),core_1=require("@blueprintjs/core"),images_grid_1=require("./images-grid"),image_1=require("../utils/image"),use_api_1=require("../utils/use-api"),l10n_1=require("../utils/l10n"),api_1=require("../utils/api"),image_2=require("../utils/image"),PhotosPanel=({store:e})=>{const{setQuery:t,loadMore:r,isReachingEnd:a,data:l,isLoading:i,error:s}=(0,use_api_1.useInfiniteAPI)({defaultQuery:"",getAPI:({page:e,query:t})=>(0,api_1.unsplashList)({page:e,query:t})});return react_1.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},react_1.default.createElement(core_1.InputGroup,{leftIcon:"search",placeholder:(0,l10n_1.t)("sidePanel.searchPlaceholder"),onChange:e=>{t(e.target.value)},type:"search",style:{marginBottom:"20px"}}),react_1.default.createElement("p",{style:{textAlign:"center"}},"Photos by"," ",react_1.default.createElement("a",{href:"https://unsplash.com/",target:"_blank"},"Unsplash")),react_1.default.createElement(images_grid_1.ImagesGrid,{images:null==l?void 0:l.map((e=>e.results)).flat().filter(Boolean),getPreview:e=>e.urls.small,onSelect:async(t,r,a)=>{var l;if(fetch((0,api_1.unsplashDownload)(t.id)),a&&"svg"===a.type&&a.contentEditable)return void a.set({maskSrc:t.urls.regular});const{width:i,height:s}=await(0,image_1.getImageSize)(t.urls.small);if(a&&"image"===a.type&&a.contentEditable){const e=(0,image_2.getCrop)(a,{width:i,height:s});return void a.set(Object.assign({src:t.urls.regular},e))}const u=((null==r?void 0:r.x)||e.width/2)-i/2,n=((null==r?void 0:r.y)||e.height/2)-s/2;null===(l=e.activePage)||void 0===l||l.addElement({type:"image",src:t.urls.regular,width:i,height:s,x:u,y:n})},isLoading:i,error:s,loadMore:!a&&r,getCredit:e=>react_1.default.createElement("span",null,"Photo by"," ",react_1.default.createElement("a",{href:`https://unsplash.com/@${e.user.username}?utm_source=polotno&utm_medium=referral`,target:"_blank"},e.user.name)," ","on"," ",react_1.default.createElement("a",{href:"https://unsplash.com/?utm_source=polotno&utm_medium=referral",target:"_blank"},"Unsplash"))}))};exports.PhotosPanel=PhotosPanel;

package/side-panel/templates-panel.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TemplatesPanel=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),nanoid_1=require("nanoid"),l10n_1=require("../utils/l10n"),images_grid_1=require("./images-grid"),api_1=require("../utils/api"),use_api_1=require("../utils/use-api"),useChange=(e,t)=>{const a=react_1.default.useRef(!0);react_1.default.useEffect((()=>{a.current?a.current=!1:e()}),t)},Templates=(0,mobx_react_lite_1.observer)((({sizeQuery:e,query:t,store:a})=>{const{setQuery:r,loadMore:i,hasMore:s,data:l,isLoading:n,reset:o,error:c}=(0,use_api_1.useInfiniteAPI)({getAPI:({page:t,query:a})=>(0,api_1.templateList)({page:t,query:a,sizeQuery:e}),getSize:e=>e.totalPages});return useChange((()=>{o()}),[e]),useChange((()=>{r(t)}),[t]),react_1.default.createElement(images_grid_1.ImagesGrid,{images:null==l?void 0:l.map((e=>e.items)).flat(),getPreview:e=>e.preview,isLoading:n,onSelect:async e=>{const t=await fetch(e.json),r=await t.json();if(a.pages.length<=1)a.loadJSON(r,!0);else{const e=JSON.parse(JSON.stringify(a.toJSON()));e.width===r.width&&e.height===r.height||r.pages.forEach((e=>{e.width=e.width||r.width,e.height=e.height||r.height})),r.pages.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10),e.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}))}));const t=a.pages.indexOf(a.activePage);e.pages.splice(t,1,...r.pages),a.loadJSON(e,!0)}},loadMore:s&&i,error:c})}));exports.TemplatesPanel=(0,mobx_react_lite_1.observer)((({store:e})=>{const[t,a]=react_1.default.useState(!0),[r,i]=react_1.default.useState(""),s=t?`${e.width}x${e.height}`:"all";return react_1.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},react_1.default.createElement(core_1.InputGroup,{leftIcon:"search",placeholder:(0,l10n_1.t)("sidePanel.searchPlaceholder"),onChange:e=>{i(e.target.value)},style:{marginBottom:"20px"}}),react_1.default.createElement(core_1.Switch,{checked:t,onChange:e=>{a(e.target.checked)},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"8px",marginBottom:"25px"}},(0,l10n_1.t)("sidePanel.searchTemplatesWithSameSize")," "),react_1.default.createElement(Templates,{store:e,sizeQuery:"size="+s,query:r}))}));
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.TemplatesPanel=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),nanoid_1=require("nanoid"),l10n_1=require("../utils/l10n"),images_grid_1=require("./images-grid"),api_1=require("../utils/api"),use_api_1=require("../utils/use-api"),useChange=(e,t)=>{const a=react_1.default.useRef(!0);react_1.default.useEffect((()=>{a.current?a.current=!1:e()}),t)},Templates=(0,mobx_react_lite_1.observer)((({sizeQuery:e,query:t,store:a})=>{const{setQuery:r,loadMore:i,hasMore:s,data:l,isLoading:n,reset:o,error:c}=(0,use_api_1.useInfiniteAPI)({getAPI:({page:t,query:a})=>(0,api_1.templateList)({page:t,query:a,sizeQuery:e}),getSize:e=>e.totalPages});return useChange((()=>{o()}),[e]),useChange((()=>{r(t)}),[t]),react_1.default.createElement(images_grid_1.ImagesGrid,{images:null==l?void 0:l.map((e=>e.items)).flat(),getPreview:e=>e.preview,isLoading:n,onSelect:async e=>{const t=await fetch(e.json),r=await t.json();if(a.pages.length<=1)a.loadJSON(r,!0);else{const e=JSON.parse(JSON.stringify(a.toJSON()));e.width===r.width&&e.height===r.height||r.pages.forEach((e=>{e.width=e.width||r.width,e.height=e.height||r.height})),r.pages.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10),e.children.forEach((e=>{e.id=(0,nanoid_1.nanoid)(10)}))}));const t=a.pages.indexOf(a.activePage);e.pages.splice(t,1,...r.pages),a.loadJSON(e,!0)}},loadMore:s&&i,error:c})}));exports.TemplatesPanel=(0,mobx_react_lite_1.observer)((({store:e})=>{const[t,a]=react_1.default.useState(!0),[r,i]=react_1.default.useState(""),s=t?`${e.width}x${e.height}`:"all";return react_1.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},react_1.default.createElement(core_1.InputGroup,{leftIcon:"search",placeholder:(0,l10n_1.t)("sidePanel.searchPlaceholder"),type:"search",onChange:e=>{i(e.target.value)},style:{marginBottom:"20px"}}),react_1.default.createElement(core_1.Switch,{checked:t,onChange:e=>{a(e.target.checked)},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"8px",marginBottom:"25px"}},(0,l10n_1.t)("sidePanel.searchTemplatesWithSameSize")," "),react_1.default.createElement(Templates,{store:e,sizeQuery:"size="+s,query:r}))}));

package/toolbar/figure-toolbar.js

@@ -1 +1 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FigureToolbar=exports.FigureStroke=exports.FigureSettings=exports.FigureFill=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),core_2=require("@blueprintjs/core"),ZoStrokeWidth_1=__importDefault(require("@meronex/icons/zo/ZoStrokeWidth")),color_picker_1=__importDefault(require("./color-picker")),animations_picker_1=require("./animations-picker"),filters_picker_1=require("./filters-picker"),element_container_1=require("./element-container"),l10n_1=require("../utils/l10n"),flags_1=require("../utils/flags");exports.FigureFill=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>react_1.default.createElement(color_picker_1.default,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!1,onChange:r=>t.history.transaction((()=>{e.forEach((e=>{e.set({fill:r})}))})),store:t}))),exports.FigureSettings=(0,mobx_react_lite_1.observer)((({store:e,elements:t,element:r})=>{const a=r=>{e.history.transaction((()=>{t.forEach((e=>{e.set(r)}))}))};return react_1.default.createElement(core_2.Popover,{content:react_1.default.createElement("div",{style:{padding:"15px",paddingTop:"15px",width:"230px"}},react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.strokeWidth")),react_1.default.createElement("div",null,react_1.default.createElement(filters_picker_1.NumberInput,{value:t[0].strokeWidth,onValueChange:e=>{a({strokeWidth:e})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:t[0].strokeWidth,onChange:e=>{a({strokeWidth:e})},min:0,max:100,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px",paddingTop:"15px"}},react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[]})},active:0===t[0].dash.length},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x2:"24",y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[4,1]})},active:4===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[2,1]})},active:2===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[1,1]})},active:1===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})))),"rect"===r.subType&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.cornerRadius")),react_1.default.createElement("div",null,react_1.default.createElement(filters_picker_1.NumberInput,{value:t[0].cornerRadius,onValueChange:e=>{a({cornerRadius:e})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:t[0].cornerRadius,onChange:e=>{a({cornerRadius:e})},min:0,max:100,labelRenderer:!1}))),position:core_1.Position.BOTTOM},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(ZoStrokeWidth_1.default,null),minimal:!0}))})),exports.FigureStroke=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>e.find((e=>e.strokeWidth))?react_1.default.createElement(color_picker_1.default,{value:e[0].stroke,style:{marginRight:"5px"},gradientEnabled:!1,onChange:r=>t.history.transaction((()=>{e.forEach((e=>{e.set({stroke:r})}))})),store:t}):null));const PROPS_MAP={FigureFill:exports.FigureFill,FigureStroke:exports.FigureStroke,FigureSettings:exports.FigureSettings,FigureAnimations:animations_picker_1.AnimationsPicker};exports.FigureToolbar=(0,mobx_react_lite_1.observer)((({store:e,components:t})=>{const r=e.selectedElements[0],a=["FigureFill","FigureStroke","FigureSettings",flags_1.flags.animationsEnabled&&"FigureAnimations"].filter((e=>Boolean(e))),l=(0,element_container_1.extendToolbar)({type:"line",usedItems:a,components:t});return react_1.default.createElement(element_container_1.ElementContainer,{items:l,itemRender:a=>{const l=t[a]||PROPS_MAP[a];return react_1.default.createElement(l,{element:r,store:e,key:a,elements:e.selectedElements})}})})),exports.default=exports.FigureToolbar;
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FigureToolbar=exports.FigureStroke=exports.FigureSettings=exports.FigureFill=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),core_2=require("@blueprintjs/core"),ZoStrokeWidth_1=__importDefault(require("@meronex/icons/zo/ZoStrokeWidth")),color_picker_1=__importDefault(require("./color-picker")),animations_picker_1=require("./animations-picker"),filters_picker_1=require("./filters-picker"),element_container_1=require("./element-container"),l10n_1=require("../utils/l10n"),flags_1=require("../utils/flags");exports.FigureFill=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>react_1.default.createElement(color_picker_1.default,{value:e[0].fill,style:{marginRight:"5px"},gradientEnabled:!1,onChange:r=>t.history.transaction((()=>{e.forEach((e=>{e.set({fill:r})}))})),store:t}))),exports.FigureSettings=(0,mobx_react_lite_1.observer)((({store:e,elements:t,element:r})=>{const a=r=>{e.history.transaction((()=>{t.forEach((e=>{e.set(r)}))}))};return react_1.default.createElement(core_2.Popover,{content:react_1.default.createElement("div",{style:{padding:"15px",paddingTop:"15px",width:"230px"}},react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"15px"}},react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[]})},active:0===t[0].dash.length},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x2:"24",y1:"50%",y2:"50%",stroke:"currentColor",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[4,1]})},active:4===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"-1",x2:"25",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"12 2",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[2,1]})},active:2===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"6 2",strokeWidth:"2"}))),react_1.default.createElement(core_1.Button,{onClick:()=>{a({dash:[1,1]})},active:1===t[0].dash[0]},react_1.default.createElement("svg",{width:"24",height:"24",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},react_1.default.createElement("line",{x1:"1",x2:"23",y1:"50%",y2:"50%",stroke:"currentColor",strokeDasharray:"2 2",strokeWidth:"2"})))),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.strokeWidth")),react_1.default.createElement("div",null,react_1.default.createElement(filters_picker_1.NumberInput,{value:t[0].strokeWidth,onValueChange:e=>{a({strokeWidth:e})},style:{width:"50px"},min:0,max:Math.round(Math.min(r.width,r.height)/2),buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:t[0].strokeWidth,onChange:e=>{a({strokeWidth:e})},min:0,max:Math.round(Math.min(r.width,r.height)/2),labelRenderer:!1}),"rect"===r.subType&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"15px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.cornerRadius")),react_1.default.createElement("div",null,react_1.default.createElement(filters_picker_1.NumberInput,{value:t[0].cornerRadius,onValueChange:e=>{a({cornerRadius:e})},style:{width:"50px"},min:0,max:Math.round(Math.max(r.width,r.height)/2),buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:t[0].cornerRadius,onChange:e=>{a({cornerRadius:e})},min:0,max:Math.round(Math.max(r.width,r.height)/2),labelRenderer:!1}))),position:core_1.Position.BOTTOM},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(ZoStrokeWidth_1.default,null),minimal:!0}))})),exports.FigureStroke=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>e.find((e=>e.strokeWidth))?react_1.default.createElement(color_picker_1.default,{value:e[0].stroke,style:{marginRight:"5px"},gradientEnabled:!1,onChange:r=>t.history.transaction((()=>{e.forEach((e=>{e.set({stroke:r})}))})),store:t}):null));const PROPS_MAP={FigureFill:exports.FigureFill,FigureStroke:exports.FigureStroke,FigureSettings:exports.FigureSettings,FigureAnimations:animations_picker_1.AnimationsPicker};exports.FigureToolbar=(0,mobx_react_lite_1.observer)((({store:e,components:t})=>{const r=e.selectedElements[0],a=["FigureFill","FigureStroke","FigureSettings",flags_1.flags.animationsEnabled&&"FigureAnimations"].filter((e=>Boolean(e))),i=(0,element_container_1.extendToolbar)({type:"line",usedItems:a,components:t});return react_1.default.createElement(element_container_1.ElementContainer,{items:i,itemRender:a=>{const i=t[a]||PROPS_MAP[a];return react_1.default.createElement(i,{element:r,store:e,key:a,elements:e.selectedElements})}})})),exports.default=exports.FigureToolbar;

package/utils/api.d.ts

@@ -1,5 +1,5 @@
-export declare const API = "https://api.polotno.dev/api";
-export declare const URL = "https://api.polotno.dev";
+export declare const API = "https://api.polotno.com/api";
+export declare const URL = "https://api.polotno.com";
 type Params = {
     query: string;
     page: number;

package/utils/api.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.setAPI=exports.iconscoutDownload=exports.iconscoutList=exports.svgapiDownload=exports.svgapiList=exports.unsplashDownload=exports.unsplashList=exports.textTemplateList=exports.templateList=exports.removeBackground=exports.polotnoShapesList=exports.getGoogleFontImage=exports.getGoogleFontsListAPI=exports.URLS=exports.URL=exports.API=void 0;const validate_key_1=require("./validate-key");exports.API="https://api.polotno.dev/api",exports.URL="https://api.polotno.dev";const showedWarnings={},warn=(e,o)=>{showedWarnings[e]||(showedWarnings[e]=!0,console.error(o))},replaceAll=(e,o,t)=>e.replace(new RegExp(o,"g"),t),ICONSCOUT_MESSAGE="API for iconscout is provided as a demonstration.\nFor production usage you have to use your own API endpoint.\nhttps://iconscout.com/developers, https://iconscout.com/legal/api-license-development-agreement\nhttps://polotno.com/docs/server-api",UNSPLASH_MESSAGE="API for unsplash is provided as a demonstration.\nFor production usage you have to use your own API endpoint.\nhttps://unsplash.com/developers, https://unsplash.com/documentation#license\nhttps://polotno.com/docs/server-api";exports.URLS={unsplashList:({query:e,page:o=1})=>`${exports.API}/get-unsplash?query=${e}&per_page=20&page=${o}&KEY=${(0,validate_key_1.getKey)()}`,unsplashDownload:e=>`${exports.API}/download-unsplash?id=${e}&KEY=${(0,validate_key_1.getKey)()}`,svgapiList:({query:e,page:o=0})=>`${exports.API}/get-svgapi?query=${e}&page=${o}&per_page=20&KEY=${(0,validate_key_1.getKey)()}`,svgapiDownload:e=>`${exports.API}/download-svgapi?path=${e}&KEY=${(0,validate_key_1.getKey)()}`,iconscoutList:({query:e,page:o=1})=>(warn("iconscout",ICONSCOUT_MESSAGE),`${exports.API}/get-iconscout?query=${e}&page=${o}&KEY=${(0,validate_key_1.getKey)()}`),iconscoutDownload:e=>(warn("iconscout",ICONSCOUT_MESSAGE),`${exports.API}/download-iconscout?uuid=${e}&KEY=${(0,validate_key_1.getKey)()}`),templateList:({query:e,page:o=1,sizeQuery:t})=>`${exports.API}/get-templates?${t}&query=${e}&per_page=30&page=${o}&KEY=${(0,validate_key_1.getKey)()}`};const getGoogleFontsListAPI=()=>`${exports.API}/get-google-fonts?KEY=${(0,validate_key_1.getKey)()}`;exports.getGoogleFontsListAPI=getGoogleFontsListAPI;const getGoogleFontImage=e=>{return`${exports.URL}/google-fonts-previews/black/${o=e,t=" ",s="-",o.replace(new RegExp(t,"g"),s)}.png`;var o,t,s};exports.getGoogleFontImage=getGoogleFontImage;const polotnoShapesList=()=>`${exports.API}/get-basic-shapes?KEY=${(0,validate_key_1.getKey)()}`;exports.polotnoShapesList=polotnoShapesList;const removeBackground=()=>`${exports.API}/remove-image-background?KEY=${(0,validate_key_1.getKey)()}`;exports.removeBackground=removeBackground;const templateList=e=>exports.URLS.templateList(e);exports.templateList=templateList;const textTemplateList=()=>`${exports.API}/get-text-templates?KEY=${(0,validate_key_1.getKey)()}`;exports.textTemplateList=textTemplateList;const unsplashList=e=>exports.URLS.unsplashList(e);exports.unsplashList=unsplashList;const unsplashDownload=e=>exports.URLS.unsplashDownload(e);exports.unsplashDownload=unsplashDownload;const svgapiList=e=>exports.URLS.svgapiList(e);exports.svgapiList=svgapiList;const svgapiDownload=e=>exports.URLS.svgapiDownload(e);exports.svgapiDownload=svgapiDownload;const iconscoutList=e=>exports.URLS.iconscoutList(e);exports.iconscoutList=iconscoutList;const iconscoutDownload=e=>exports.URLS.iconscoutDownload(e);exports.iconscoutDownload=iconscoutDownload;const setAPI=(e,o)=>{exports.URLS[e]=o};exports.setAPI=setAPI;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.setAPI=exports.iconscoutDownload=exports.iconscoutList=exports.svgapiDownload=exports.svgapiList=exports.unsplashDownload=exports.unsplashList=exports.textTemplateList=exports.templateList=exports.removeBackground=exports.polotnoShapesList=exports.getGoogleFontImage=exports.getGoogleFontsListAPI=exports.URLS=exports.URL=exports.API=void 0;const validate_key_1=require("./validate-key");exports.API="https://api.polotno.com/api",exports.URL="https://api.polotno.com";const showedWarnings={},warn=(e,o)=>{showedWarnings[e]||(showedWarnings[e]=!0,console.error(o))},replaceAll=(e,o,t)=>e.replace(new RegExp(o,"g"),t),ICONSCOUT_MESSAGE="API for iconscout is provided as a demonstration.\nFor production usage you have to use your own API endpoint.\nhttps://iconscout.com/developers, https://iconscout.com/legal/api-license-development-agreement\nhttps://polotno.com/docs/server-api",UNSPLASH_MESSAGE="API for unsplash is provided as a demonstration.\nFor production usage you have to use your own API endpoint.\nhttps://unsplash.com/developers, https://unsplash.com/documentation#license\nhttps://polotno.com/docs/server-api";exports.URLS={unsplashList:({query:e,page:o=1})=>`${exports.API}/get-unsplash?query=${e}&per_page=20&page=${o}&KEY=${(0,validate_key_1.getKey)()}`,unsplashDownload:e=>`${exports.API}/download-unsplash?id=${e}&KEY=${(0,validate_key_1.getKey)()}`,svgapiList:({query:e,page:o=0})=>`${exports.API}/get-svgapi?query=${e}&page=${o}&per_page=20&KEY=${(0,validate_key_1.getKey)()}`,svgapiDownload:e=>`${exports.API}/download-svgapi?path=${e}&KEY=${(0,validate_key_1.getKey)()}`,iconscoutList:({query:e,page:o=1})=>(warn("iconscout",ICONSCOUT_MESSAGE),`${exports.API}/get-iconscout?query=${e}&page=${o}&KEY=${(0,validate_key_1.getKey)()}`),iconscoutDownload:e=>(warn("iconscout",ICONSCOUT_MESSAGE),`${exports.API}/download-iconscout?uuid=${e}&KEY=${(0,validate_key_1.getKey)()}`),templateList:({query:e,page:o=1,sizeQuery:t})=>`${exports.API}/get-templates?${t}&query=${e}&per_page=30&page=${o}&KEY=${(0,validate_key_1.getKey)()}`};const getGoogleFontsListAPI=()=>`${exports.API}/get-google-fonts?KEY=${(0,validate_key_1.getKey)()}`;exports.getGoogleFontsListAPI=getGoogleFontsListAPI;const getGoogleFontImage=e=>{return`${exports.URL}/google-fonts-previews/black/${o=e,t=" ",s="-",o.replace(new RegExp(t,"g"),s)}.png`;var o,t,s};exports.getGoogleFontImage=getGoogleFontImage;const polotnoShapesList=()=>`${exports.API}/get-basic-shapes?KEY=${(0,validate_key_1.getKey)()}`;exports.polotnoShapesList=polotnoShapesList;const removeBackground=()=>`${exports.API}/remove-image-background?KEY=${(0,validate_key_1.getKey)()}`;exports.removeBackground=removeBackground;const templateList=e=>exports.URLS.templateList(e);exports.templateList=templateList;const textTemplateList=()=>`${exports.API}/get-text-templates?KEY=${(0,validate_key_1.getKey)()}`;exports.textTemplateList=textTemplateList;const unsplashList=e=>exports.URLS.unsplashList(e);exports.unsplashList=unsplashList;const unsplashDownload=e=>exports.URLS.unsplashDownload(e);exports.unsplashDownload=unsplashDownload;const svgapiList=e=>exports.URLS.svgapiList(e);exports.svgapiList=svgapiList;const svgapiDownload=e=>exports.URLS.svgapiDownload(e);exports.svgapiDownload=svgapiDownload;const iconscoutList=e=>exports.URLS.iconscoutList(e);exports.iconscoutList=iconscoutList;const iconscoutDownload=e=>exports.URLS.iconscoutDownload(e);exports.iconscoutDownload=iconscoutDownload;const setAPI=(e,o)=>{exports.URLS[e]=o};exports.setAPI=setAPI;