polotno 1.2.2 → 1.2.4

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:"pattern",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(),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:"pattern",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"))}))}));

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(),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)},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/side-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.SidePanel=exports.DEFAULT_SECTIONS=exports.SizeSection=exports.LayersSection=exports.PagesSection=exports.BackgroundSection=exports.UploadSection=exports.ElementsSection=exports.PhotosSection=exports.TextSection=exports.TemplatesSection=exports.ImagesGrid=exports.SectionTab=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),styled_1=__importDefault(require("../utils/styled")),screen_1=require("../utils/screen"),FaShapes_1=__importDefault(require("@meronex/icons/fa/FaShapes")),FdPageMultiple_1=__importDefault(require("@meronex/icons/fd/FdPageMultiple")),l10n_1=require("../utils/l10n"),tab_button_1=require("./tab-button");var tab_button_2=require("./tab-button");Object.defineProperty(exports,"SectionTab",{enumerable:!0,get:function(){return tab_button_2.SectionTab}});var images_grid_1=require("./images-grid");Object.defineProperty(exports,"ImagesGrid",{enumerable:!0,get:function(){return images_grid_1.ImagesGrid}});const text_panel_1=require("./text-panel"),size_panel_1=require("./size-panel"),upload_panel_1=require("./upload-panel"),photos_panel_1=require("./photos-panel"),background_panel_1=require("./background-panel"),elements_panel_1=require("./elements-panel"),pages_panel_1=require("./pages-panel"),templates_panel_1=require("./templates-panel"),layers_panel_1=require("./layers-panel");exports.TemplatesSection={name:"templates",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.templates")},e),react_1.default.createElement(core_1.Icon,{icon:"control"})))),Panel:({store:e})=>react_1.default.createElement(templates_panel_1.TemplatesPanel,{store:e})},exports.TextSection={name:"text",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.text")},e),react_1.default.createElement(core_1.Icon,{icon:"new-text-box"})))),Panel:({store:e})=>react_1.default.createElement(text_panel_1.TextPanel,{store:e})},exports.PhotosSection={name:"photos",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.photos")},e),react_1.default.createElement(core_1.Icon,{icon:"media"})))),Panel:({store:e})=>react_1.default.createElement(photos_panel_1.PhotosPanel,{store:e})},exports.ElementsSection={name:"elements",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.elements"),iconSize:16},e),react_1.default.createElement(FaShapes_1.default,null)))),Panel:({store:e})=>react_1.default.createElement(elements_panel_1.ElementsPanel,{store:e})},exports.UploadSection={name:"upload",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.upload")},e),react_1.default.createElement(core_1.Icon,{icon:"cloud-upload"})))),Panel:({store:e})=>react_1.default.createElement(upload_panel_1.UploadPanel,{store:e})},exports.BackgroundSection={name:"background",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.background")},e),react_1.default.createElement(core_1.Icon,{icon:"layout-grid"})))),Panel:({store:e})=>react_1.default.createElement(background_panel_1.BackgroundPanel,{store:e})},exports.PagesSection={name:"pages",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.pages")},e),react_1.default.createElement(FdPageMultiple_1.default,null)))),Panel:({store:e})=>react_1.default.createElement(pages_panel_1.PagesPanel,{store:e}),visibleInList:!1},exports.LayersSection={name:"layers",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.layers")},e),react_1.default.createElement(core_1.Icon,{icon:"layers"})))),Panel:({store:e})=>react_1.default.createElement(layers_panel_1.LayersPanel,{store:e})},exports.SizeSection={name:"size",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.resize")},e),react_1.default.createElement(core_1.Icon,{icon:"fullscreen"})))),Panel:({store:e})=>react_1.default.createElement(size_panel_1.SizePanel,{store:e})};const MoreTab=(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.more")},e),react_1.default.createElement(core_1.Icon,{icon:"more"}))));exports.DEFAULT_SECTIONS=[exports.TemplatesSection,exports.TextSection,exports.PhotosSection,exports.ElementsSection,exports.UploadSection,exports.BackgroundSection,exports.LayersSection,exports.SizeSection];const SidePanelContainer=(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.SidePanel=exports.DEFAULT_SECTIONS=exports.SizeSection=exports.LayersSection=exports.PagesSection=exports.BackgroundSection=exports.UploadSection=exports.ElementsSection=exports.PhotosSection=exports.TextSection=exports.TemplatesSection=exports.ImagesGrid=exports.SectionTab=void 0;const react_1=__importDefault(require("react")),mobx_react_lite_1=require("mobx-react-lite"),core_1=require("@blueprintjs/core"),styled_1=__importDefault(require("../utils/styled")),screen_1=require("../utils/screen"),FaShapes_1=__importDefault(require("@meronex/icons/fa/FaShapes")),FdPageMultiple_1=__importDefault(require("@meronex/icons/fd/FdPageMultiple")),l10n_1=require("../utils/l10n"),tab_button_1=require("./tab-button");var tab_button_2=require("./tab-button");Object.defineProperty(exports,"SectionTab",{enumerable:!0,get:function(){return tab_button_2.SectionTab}});var images_grid_1=require("./images-grid");Object.defineProperty(exports,"ImagesGrid",{enumerable:!0,get:function(){return images_grid_1.ImagesGrid}});const text_panel_1=require("./text-panel"),size_panel_1=require("./size-panel"),upload_panel_1=require("./upload-panel"),photos_panel_1=require("./photos-panel"),background_panel_1=require("./background-panel"),elements_panel_1=require("./elements-panel"),pages_panel_1=require("./pages-panel"),templates_panel_1=require("./templates-panel"),layers_panel_1=require("./layers-panel");exports.TemplatesSection={name:"templates",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.templates")},e),react_1.default.createElement(core_1.Icon,{icon:"control"})))),Panel:({store:e})=>react_1.default.createElement(templates_panel_1.TemplatesPanel,{store:e})},exports.TextSection={name:"text",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.text")},e),react_1.default.createElement(core_1.Icon,{icon:"new-text-box"})))),Panel:({store:e})=>react_1.default.createElement(text_panel_1.TextPanel,{store:e})},exports.PhotosSection={name:"photos",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.photos")},e),react_1.default.createElement(core_1.Icon,{icon:"media"})))),Panel:({store:e})=>react_1.default.createElement(photos_panel_1.PhotosPanel,{store:e})},exports.ElementsSection={name:"elements",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.elements"),iconSize:16},e),react_1.default.createElement("span",{className:"bp4-icon"},react_1.default.createElement(FaShapes_1.default,null))))),Panel:({store:e})=>react_1.default.createElement(elements_panel_1.ElementsPanel,{store:e})},exports.UploadSection={name:"upload",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.upload")},e),react_1.default.createElement(core_1.Icon,{icon:"cloud-upload"})))),Panel:({store:e})=>react_1.default.createElement(upload_panel_1.UploadPanel,{store:e})},exports.BackgroundSection={name:"background",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.background")},e),react_1.default.createElement(core_1.Icon,{icon:"layout-grid"})))),Panel:({store:e})=>react_1.default.createElement(background_panel_1.BackgroundPanel,{store:e})},exports.PagesSection={name:"pages",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.pages")},e),react_1.default.createElement(FdPageMultiple_1.default,null)))),Panel:({store:e})=>react_1.default.createElement(pages_panel_1.PagesPanel,{store:e}),visibleInList:!1},exports.LayersSection={name:"layers",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.layers")},e),react_1.default.createElement(core_1.Icon,{icon:"layers"})))),Panel:({store:e})=>react_1.default.createElement(layers_panel_1.LayersPanel,{store:e})},exports.SizeSection={name:"size",Tab:(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.resize")},e),react_1.default.createElement(core_1.Icon,{icon:"fullscreen"})))),Panel:({store:e})=>react_1.default.createElement(size_panel_1.SizePanel,{store:e})};const MoreTab=(0,mobx_react_lite_1.observer)((e=>react_1.default.createElement(tab_button_1.SectionTab,Object.assign({name:(0,l10n_1.t)("sidePanel.more")},e),react_1.default.createElement(core_1.Icon,{icon:"more"}))));exports.DEFAULT_SECTIONS=[exports.TemplatesSection,exports.TextSection,exports.PhotosSection,exports.ElementsSection,exports.UploadSection,exports.BackgroundSection,exports.LayersSection,exports.SizeSection];const SidePanelContainer=(0,styled_1.default)("div")`
   display: flex;
   height: 100% !important;
   padding: 0px !important;

package/side-panel/tab-button.js

@@ -21,4 +21,4 @@
     padding-top: 9px;
     width: 72px;
   }
-`,SectionTab=({children:e,name:t,onClick:a,active:i,iconSize:r})=>react_1.default.createElement(TabContainer,{onClick:a,className:"polotno-side-panel-tab"+(i?" active":"")},react_1.default.createElement("div",{style:{fontSize:(r||14)+"px"}},react_1.default.createElement("span",null,e)),react_1.default.createElement("div",{style:{paddingTop:"5px"}},t));exports.SectionTab=SectionTab;
+`,SectionTab=({children:e,name:t,onClick:a,active:i,iconSize:r})=>react_1.default.createElement(TabContainer,{onClick:a,className:"polotno-side-panel-tab"+(i?" active":"")},react_1.default.createElement("div",{style:{fontSize:(r||14)+"px"}},e),react_1.default.createElement("div",{style:{paddingTop:"5px"}},t));exports.SectionTab=SectionTab;

package/side-panel/text-panel.js

@@ -6,4 +6,4 @@
   .bp4-dark & .polotno-text-preview-plain {
     filter: invert(1);
   }
-`,toBase64=e=>new Promise(((t,o)=>{const a=new FileReader;a.readAsDataURL(e),a.onload=()=>t(a.result),a.onerror=e=>o(e)})),FontItem=(0,mobx_react_lite_1.observer)((({onSelect:e,onRemove:t,font:o})=>react_1.default.createElement("div",{style:{height:"100px",cursor:"pointer",boxShadow:"0 0 5px rgba(16, 22, 26, 0.3)",borderRadius:"5px",backgroundColor:"rgba(0, 0, 0, 0.4)",position:"relative",fontFamily:o.fontFamily,fontSize:25,display:"flex",justifyContent:"center",alignContent:"center",flexDirection:"column",textAlign:"center",color:"white",marginBottom:"10px"},onClick:e},o.fontFamily," text",react_1.default.createElement(core_1.Button,{style:{position:"absolute",right:0,bottom:0},minimal:!0,icon:"trash",onClick:e=>{e.stopPropagation(),t()}})))),DragButton=e=>{var{onSelect:t}=e,o=__rest(e,["onSelect"]);return react_1.default.createElement(core_1.Button,Object.assign({},o,{draggable:!0,className:"polotno-close-panel",onClick:()=>t(),onDragStart:()=>{(0,page_1.registerNextDomDrop)((({x:e,y:o})=>{t({x:e,y:o})}))},onDragEnd:e=>{(0,page_1.registerNextDomDrop)(null)}}))};exports.TextPanel=(0,mobx_react_lite_1.observer)((({store:e})=>{react_1.default.useEffect((()=>{e.loadFont("Roboto")}),[]);const t=t=>{var o;const a=t.width||e.width/2,n=((null==t?void 0:t.x)||e.width/2)-a/2,i=((null==t?void 0:t.y)||e.height/2)-t.fontSize/2,l=(e.width+e.height)/2160,r=null===(o=e.activePage)||void 0===o?void 0:o.addElement(Object.assign(Object.assign({type:"text",fontFamily:"Roboto"},t),{x:n,y:i,width:a,fontSize:t.fontSize*l}));(0,screen_1.isMobile)()||null==r||r.toggleEditMode(!0)};react_1.default.useEffect((()=>{e.fonts.forEach((t=>e.loadFont(t.fontFamily)))}),[e.fonts]);const{data:o,error:a}=(0,swr_1.default)((0,api_1.textTemplateList)(),use_api_1.fetcher),[n,i]=react_1.default.useState("text");return react_1.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},react_1.default.createElement(core_1.Tabs,{large:!0,onChange:e=>i(e)},react_1.default.createElement(core_1.Tab,{id:"text"},(0,l10n_1.t)("sidePanel.text")),react_1.default.createElement(core_1.Tab,{id:"font"},(0,l10n_1.t)("sidePanel.myFonts"))),"text"===n&&react_1.default.createElement(Container,null,react_1.default.createElement(DragButton,{style:{marginBottom:"5px",width:"100%",fontSize:"25px",fontFamily:"Roboto"},minimal:!0,onSelect:e=>{t(Object.assign(Object.assign({},e),{fontSize:76,text:(0,l10n_1.t)("sidePanel.headerText"),fontFamily:"Roboto"}))}},(0,l10n_1.t)("sidePanel.createHeader")),react_1.default.createElement(DragButton,{style:{marginBottom:"5px",width:"100%",fontSize:"18px",fontFamily:"Roboto"},minimal:!0,onSelect:e=>{t(Object.assign(Object.assign({},e),{fontSize:44,text:(0,l10n_1.t)("sidePanel.subHeaderText"),fontFamily:"Roboto"}))}},(0,l10n_1.t)("sidePanel.createSubHeader")),react_1.default.createElement(DragButton,{style:{marginBottom:"5px",width:"100%",fontSize:"14px",fontFamily:"Roboto"},minimal:!0,onSelect:e=>{t(Object.assign(Object.assign({},e),{fontSize:30,text:(0,l10n_1.t)("sidePanel.bodyText"),fontFamily:"Roboto"}))}},(0,l10n_1.t)("sidePanel.createBody")),react_1.default.createElement(images_grid_1.ImagesGrid,{shadowEnabled:!1,images:null==o?void 0:o.items,getPreview:e=>e.preview,getImageClassName:e=>e.json.indexOf("plain")>=0?"polotno-text-preview-plain":"",isLoading:!o,error:a,onSelect:async(t,o)=>{const a=await fetch(t.json),n=await a.json(),i=(e.width+e.height)/2160,l=o?o.x-n.width/2*i:e.width/2-n.width/2*i,r=o?o.y-n.height/2*i:e.height/2-n.height/2*i;e.history.transaction((()=>{const t=n.pages[0].children,o=[];t.forEach((t=>{var a;delete t.id;const{id:n}=null===(a=e.activePage)||void 0===a?void 0:a.addElement(Object.assign(Object.assign({},t),{fontSize:t.fontSize*i,x:t.x*i+l,y:t.y*i+r,width:t.width*i,height:t.height*i}));o.push(n)})),e.selectElements(o)}))}})),"font"===n&&react_1.default.createElement("div",{style:{display:"flex",flexDirection:"column",height:"calc(100% - 50px)"}},react_1.default.createElement("label",{htmlFor:"polotno-font-upload"},react_1.default.createElement(core_1.Button,{icon:"upload",style:{width:"100%"},onClick:()=>{var e;null===(e=document.querySelector("#polotno-font-upload"))||void 0===e||e.click()}},(0,l10n_1.t)("sidePanel.uploadFont")),react_1.default.createElement("input",{type:"file",accept:".ttf, .otf, .woff, .woff2, .eot",id:"polotno-font-upload",style:{display:"none"},onChange:async t=>{const{target:o}=t;for(const t of o.files){const o=await toBase64(t),a=t.name.split(".")[0];e.addFont({fontFamily:a,url:o})}o.value=null}})),react_1.default.createElement("div",{style:{paddingTop:"20px",overflow:"auto",height:"100%"}},e.fonts.map(((o,a)=>react_1.default.createElement(FontItem,{font:o,key:a,onSelect:()=>{t({fontSize:80,text:"Cool text",fontFamily:o.fontFamily})},onRemove:()=>{e.removeFont(o.fontFamily)}}))))))}));
+`,toBase64=e=>new Promise(((t,o)=>{const a=new FileReader;a.readAsDataURL(e),a.onload=()=>t(a.result),a.onerror=e=>o(e)})),FontItem=(0,mobx_react_lite_1.observer)((({onSelect:e,onRemove:t,font:o})=>react_1.default.createElement("div",{style:{height:"100px",cursor:"pointer",boxShadow:"0 0 5px rgba(16, 22, 26, 0.3)",borderRadius:"5px",backgroundColor:"rgba(0, 0, 0, 0.4)",position:"relative",fontFamily:o.fontFamily,fontSize:25,display:"flex",justifyContent:"center",alignContent:"center",flexDirection:"column",textAlign:"center",color:"white",marginBottom:"10px"},onClick:e},o.fontFamily," text",react_1.default.createElement(core_1.Button,{style:{position:"absolute",right:0,bottom:0},minimal:!0,icon:"trash",onClick:e=>{e.stopPropagation(),t()}})))),DragButton=e=>{var{onSelect:t}=e,o=__rest(e,["onSelect"]);return react_1.default.createElement(core_1.Button,Object.assign({},o,{draggable:!0,className:"polotno-close-panel",onClick:()=>t(),onDragStart:()=>{(0,page_1.registerNextDomDrop)((({x:e,y:o})=>{t({x:e,y:o})}))},onDragEnd:e=>{(0,page_1.registerNextDomDrop)(null)}}))};exports.TextPanel=(0,mobx_react_lite_1.observer)((({store:e})=>{react_1.default.useEffect((()=>{e.loadFont("Roboto")}),[]);const t=t=>{var o;const a=t.width||e.width/2,n=((null==t?void 0:t.x)||e.width/2)-a/2,i=((null==t?void 0:t.y)||e.height/2)-t.fontSize/2,l=(e.width+e.height)/2160,r=null===(o=e.activePage)||void 0===o?void 0:o.addElement(Object.assign(Object.assign({type:"text",fontFamily:"Roboto"},t),{x:n,y:i,width:a,fontSize:t.fontSize*l}));(0,screen_1.isMobile)()||null==r||r.toggleEditMode(!0)};react_1.default.useEffect((()=>{e.fonts.forEach((t=>e.loadFont(t.fontFamily)))}),[e.fonts]);const{data:o,error:a}=(0,swr_1.default)((0,api_1.textTemplateList)(),use_api_1.fetcher),[n,i]=react_1.default.useState("text");return react_1.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column"}},react_1.default.createElement(core_1.Tabs,{large:!0,onChange:e=>i(e)},react_1.default.createElement(core_1.Tab,{id:"text"},(0,l10n_1.t)("sidePanel.text")),react_1.default.createElement(core_1.Tab,{id:"font"},(0,l10n_1.t)("sidePanel.myFonts"))),"text"===n&&react_1.default.createElement(Container,null,react_1.default.createElement(DragButton,{style:{marginBottom:"5px",width:"100%",fontSize:"25px",fontFamily:"Roboto"},minimal:!0,onSelect:e=>{t(Object.assign(Object.assign({},e),{fontSize:76,text:(0,l10n_1.t)("sidePanel.headerText"),fontFamily:"Roboto"}))}},(0,l10n_1.t)("sidePanel.createHeader")),react_1.default.createElement(DragButton,{style:{marginBottom:"5px",width:"100%",fontSize:"18px",fontFamily:"Roboto"},minimal:!0,onSelect:e=>{t(Object.assign(Object.assign({},e),{fontSize:44,text:(0,l10n_1.t)("sidePanel.subHeaderText"),fontFamily:"Roboto"}))}},(0,l10n_1.t)("sidePanel.createSubHeader")),react_1.default.createElement(DragButton,{style:{marginBottom:"5px",width:"100%",fontSize:"14px",fontFamily:"Roboto"},minimal:!0,onSelect:e=>{t(Object.assign(Object.assign({},e),{fontSize:30,text:(0,l10n_1.t)("sidePanel.bodyText"),fontFamily:"Roboto"}))}},(0,l10n_1.t)("sidePanel.createBody")),react_1.default.createElement(images_grid_1.ImagesGrid,{shadowEnabled:!1,images:null==o?void 0:o.items,getPreview:e=>e.preview,getImageClassName:e=>e.json.indexOf("plain")>=0?"polotno-text-preview-plain":"",isLoading:!o,error:a,onSelect:async(t,o)=>{const a=await fetch(t.json),n=await a.json();if(!e.activePage)return;const i=(e.width+e.height)/2160,l=o?o.x-n.width/2*i:e.width/2-n.width/2*i,r=o?o.y-n.height/2*i:e.height/2-n.height/2*i;e.history.transaction((()=>{const t=n.pages[0].children,o=[];t.forEach((t=>{var a;delete t.id;const{id:n}=null===(a=e.activePage)||void 0===a?void 0:a.addElement(Object.assign(Object.assign({},t),{fontSize:t.fontSize*i,x:t.x*i+l,y:t.y*i+r,width:t.width*i,height:t.height*i}));o.push(n)})),e.selectElements(o)}))}})),"font"===n&&react_1.default.createElement("div",{style:{display:"flex",flexDirection:"column",height:"calc(100% - 50px)"}},react_1.default.createElement("label",{htmlFor:"polotno-font-upload"},react_1.default.createElement(core_1.Button,{icon:"upload",style:{width:"100%"},onClick:()=>{var e;null===(e=document.querySelector("#polotno-font-upload"))||void 0===e||e.click()}},(0,l10n_1.t)("sidePanel.uploadFont")),react_1.default.createElement("input",{type:"file",accept:".ttf, .otf, .woff, .woff2, .eot",id:"polotno-font-upload",style:{display:"none"},onChange:async t=>{const{target:o}=t;for(const t of o.files){const o=await toBase64(t),a=t.name.split(".")[0];e.addFont({fontFamily:a,url:o})}o.value=null}})),react_1.default.createElement("div",{style:{paddingTop:"20px",overflow:"auto",height:"100%"}},e.fonts.map(((o,a)=>react_1.default.createElement(FontItem,{font:o,key:a,onSelect:()=>{t({fontSize:80,text:"Cool text",fontFamily:o.fontFamily})},onRemove:()=>{e.removeFont(o.fontFamily)}}))))))}));

package/toolbar/filters-picker.js

@@ -1 +1 @@
-"use strict";var __rest=this&&this.__rest||function(e,t){var a={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(a[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(l=Object.getOwnPropertySymbols(e);r<l.length;r++)t.indexOf(l[r])<0&&Object.prototype.propertyIsEnumerable.call(e,l[r])&&(a[l[r]]=e[l[r]])}return a},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FiltersPicker=void 0;const react_1=__importDefault(require("react")),core_1=require("@blueprintjs/core"),popover2_1=require("@blueprintjs/popover2"),mobx_react_lite_1=require("mobx-react-lite"),color_picker_1=__importDefault(require("./color-picker")),l10n_1=require("../utils/l10n"),limit=(e,t,a)=>Math.max(t,Math.min(a,e)),NumberInput=e=>{var{value:t,onValueChange:a}=e,l=__rest(e,["value","onValueChange"]);const[r,n]=react_1.default.useState(t.toString());react_1.default.useEffect((()=>{n(t.toString())}),[t]);return react_1.default.createElement(core_1.NumericInput,Object.assign({value:r,onValueChange:(e,t)=>{n(t),Number.isNaN(e)||a(e)}},l))};exports.FiltersPicker=(0,mobx_react_lite_1.observer)((({element:e,store:t,elements:a})=>{const l=a||[e],r=l[0],n="text"===r.type,o="image"===r.type,i="svg"===r.type,c=e=>{t.history.transaction((()=>{l.forEach((t=>{t.set(e)}))}))};return react_1.default.createElement(popover2_1.Popover2,{content:react_1.default.createElement("div",{style:{padding:"15px",paddingTop:"25px",width:"200px"}},react_1.default.createElement(core_1.Switch,{checked:r.blurEnabled,label:(0,l10n_1.t)("toolbar.blur"),onChange:e=>{c({blurEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT}),r.blurEnabled&&react_1.default.createElement(core_1.Slider,{value:r.blurRadius,labelStepSize:5,onChange:e=>{c({blurRadius:e})},min:0,max:20,showTrackFill:!1}),!n&&react_1.default.createElement(core_1.Switch,{checked:r.brightnessEnabled,label:(0,l10n_1.t)("toolbar.brightness"),onChange:e=>{c({brightnessEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),r.brightnessEnabled&&react_1.default.createElement(core_1.Slider,{value:100*r.brightness+100,onChange:e=>{c({brightness:(e-100)/100})},min:0,max:200,showTrackFill:!1,labelStepSize:50}),!n&&react_1.default.createElement(core_1.Switch,{checked:r.sepiaEnabled,label:(0,l10n_1.t)("toolbar.sepia"),onChange:e=>{c({sepiaEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!n&&react_1.default.createElement(core_1.Switch,{checked:r.grayscaleEnabled,label:(0,l10n_1.t)("toolbar.grayscale"),onChange:e=>{c({grayscaleEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),n&&react_1.default.createElement(core_1.Switch,{checked:!!r.strokeWidth,label:(0,l10n_1.t)("toolbar.textStroke"),onChange:e=>{c({strokeWidth:e.target.checked?2:0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!!r.strokeWidth&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},react_1.default.createElement(color_picker_1.default,{value:r.stroke,size:30,onChange:e=>{c({stroke:e})},store:t}),react_1.default.createElement(core_1.NumericInput,{defaultValue:r.strokeWidth,onValueChange:e=>{c({strokeWidth:limit(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(r.fontSize/2)}))),(o||i)&&react_1.default.createElement(core_1.Switch,{checked:!!r.borderSize,label:(0,l10n_1.t)("toolbar.border"),onChange:e=>{c({borderSize:e.target.checked?2:0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!!r.borderSize&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},react_1.default.createElement(color_picker_1.default,{value:r.borderColor,size:30,onChange:e=>{c({borderColor:e})},store:t}),react_1.default.createElement(core_1.NumericInput,{defaultValue:r.borderSize,onValueChange:e=>{c({borderSize:limit(e,1,Math.min(r.width,r.height)/2)})},style:{width:"80px"},min:1,max:Math.min(r.width,r.height)/2}))),!n&&react_1.default.createElement(core_1.Switch,{checked:!!r.cornerRadius,label:(0,l10n_1.t)("toolbar.cornerRadius"),onChange:e=>{c({cornerRadius:e.target.checked?Math.min(r.width/4,r.height/4):0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!n&&!!r.cornerRadius&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(core_1.Slider,{value:Math.min(r.cornerRadius,Math.round(Math.min(r.width/2,r.height/2))),onChange:e=>{c({cornerRadius:e})},min:1,max:Math.round(Math.min(r.width/2,r.height/2)),labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),react_1.default.createElement(core_1.Switch,{checked:r.shadowEnabled,label:(0,l10n_1.t)("toolbar.shadow"),onChange:e=>{c({shadowEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),r.shadowEnabled&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.blur")),react_1.default.createElement("div",null,react_1.default.createElement(NumberInput,{value:r.shadowBlur,onValueChange:e=>{c({shad:limit(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:r.shadowBlur,onChange:e=>{c({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.offsetX")),react_1.default.createElement("div",null,react_1.default.createElement(NumberInput,{value:r.shadowOffsetX,onValueChange:e=>{c({shadowOffsetX:limit(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:r.shadowOffsetX,onChange:e=>{c({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.offsetY")),react_1.default.createElement("div",null,react_1.default.createElement(NumberInput,{value:r.shadowOffsetY,onValueChange:e=>{c({shadowOffsetY:limit(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:r.shadowOffsetY,onChange:e=>{c({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.opacity")),react_1.default.createElement("div",null,react_1.default.createElement(NumberInput,{value:Math.round(100*r.shadowOpacity),onValueChange:e=>{c({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:100*r.shadowOpacity,onChange:e=>{c({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",{style:{lineHeight:"30px"}},(0,l10n_1.t)("toolbar.color")),react_1.default.createElement(color_picker_1.default,{value:r.shadowColor,size:30,onChange:e=>{c({shadowColor:e})},store:t})))),position:core_1.Position.BOTTOM},react_1.default.createElement(core_1.Button,{icon:"left-join",text:(0,l10n_1.t)("toolbar.effects"),minimal:!0}))})),exports.default=exports.FiltersPicker;
+"use strict";var __rest=this&&this.__rest||function(e,t){var a={};for(var l in e)Object.prototype.hasOwnProperty.call(e,l)&&t.indexOf(l)<0&&(a[l]=e[l]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(l=Object.getOwnPropertySymbols(e);r<l.length;r++)t.indexOf(l[r])<0&&Object.prototype.propertyIsEnumerable.call(e,l[r])&&(a[l[r]]=e[l[r]])}return a},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FiltersPicker=void 0;const react_1=__importDefault(require("react")),core_1=require("@blueprintjs/core"),popover2_1=require("@blueprintjs/popover2"),mobx_react_lite_1=require("mobx-react-lite"),color_picker_1=__importDefault(require("./color-picker")),l10n_1=require("../utils/l10n"),limit=(e,t,a)=>Math.max(t,Math.min(a,e)),NumberInput=e=>{var{value:t,onValueChange:a}=e,l=__rest(e,["value","onValueChange"]);const[r,n]=react_1.default.useState(t.toString());react_1.default.useEffect((()=>{n(t.toString())}),[t]);return react_1.default.createElement(core_1.NumericInput,Object.assign({value:r,onValueChange:(e,t)=>{n(t),Number.isNaN(e)||a(e)}},l))};exports.FiltersPicker=(0,mobx_react_lite_1.observer)((({element:e,store:t,elements:a})=>{const l=a||[e],r=l[0],n="text"===r.type,o="image"===r.type,i="svg"===r.type,c=e=>{t.history.transaction((()=>{l.forEach((t=>{t.set(e)}))}))};return react_1.default.createElement(popover2_1.Popover2,{content:react_1.default.createElement("div",{style:{padding:"15px",paddingTop:"25px",width:"230px"}},react_1.default.createElement(core_1.Switch,{checked:r.blurEnabled,label:(0,l10n_1.t)("toolbar.blur"),onChange:e=>{c({blurEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT}),r.blurEnabled&&react_1.default.createElement(core_1.Slider,{value:r.blurRadius,labelStepSize:5,onChange:e=>{c({blurRadius:e})},min:0,max:20,showTrackFill:!1}),!n&&react_1.default.createElement(core_1.Switch,{checked:r.brightnessEnabled,label:(0,l10n_1.t)("toolbar.brightness"),onChange:e=>{c({brightnessEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),r.brightnessEnabled&&react_1.default.createElement(core_1.Slider,{value:100*r.brightness+100,onChange:e=>{c({brightness:(e-100)/100})},min:0,max:200,showTrackFill:!1,labelStepSize:50}),!n&&react_1.default.createElement(core_1.Switch,{checked:r.sepiaEnabled,label:(0,l10n_1.t)("toolbar.sepia"),onChange:e=>{c({sepiaEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!n&&react_1.default.createElement(core_1.Switch,{checked:r.grayscaleEnabled,label:(0,l10n_1.t)("toolbar.grayscale"),onChange:e=>{c({grayscaleEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),n&&react_1.default.createElement(core_1.Switch,{checked:!!r.strokeWidth,label:(0,l10n_1.t)("toolbar.textStroke"),onChange:e=>{c({strokeWidth:e.target.checked?2:0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!!r.strokeWidth&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},react_1.default.createElement(color_picker_1.default,{value:r.stroke,size:30,onChange:e=>{c({stroke:e})},store:t}),react_1.default.createElement(core_1.NumericInput,{defaultValue:r.strokeWidth,onValueChange:e=>{c({strokeWidth:limit(e,1,30)})},style:{width:"80px"},min:1,max:Math.round(r.fontSize/2)}))),(o||i)&&react_1.default.createElement(core_1.Switch,{checked:!!r.borderSize,label:(0,l10n_1.t)("toolbar.border"),onChange:e=>{c({borderSize:e.target.checked?2:0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!!r.borderSize&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},react_1.default.createElement(color_picker_1.default,{value:r.borderColor,size:30,onChange:e=>{c({borderColor:e})},store:t}),react_1.default.createElement(core_1.NumericInput,{defaultValue:r.borderSize,onValueChange:e=>{c({borderSize:limit(e,1,Math.min(r.width,r.height)/2)})},style:{width:"80px"},min:1,max:Math.min(r.width,r.height)/2}))),!n&&react_1.default.createElement(core_1.Switch,{checked:!!r.cornerRadius,label:(0,l10n_1.t)("toolbar.cornerRadius"),onChange:e=>{c({cornerRadius:e.target.checked?Math.min(r.width/4,r.height/4):0})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),!n&&!!r.cornerRadius&&react_1.default.createElement("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"}},react_1.default.createElement("div",{style:{width:"150px",paddingTop:"7px"}},react_1.default.createElement(core_1.Slider,{value:Math.min(r.cornerRadius,Math.round(Math.min(r.width/2,r.height/2))),onChange:e=>{c({cornerRadius:e})},min:1,max:Math.round(Math.min(r.width/2,r.height/2)),labelStepSize:50,showTrackFill:!1,labelRenderer:!1})),react_1.default.createElement(core_1.NumericInput,{value:r.cornerRadius,onValueChange:e=>{c({cornerRadius:limit(e,1,Math.min(r.width,r.height)/2)})},buttonPosition:"none",style:{width:"45px",padding:"0 5px"},min:1,max:Math.round(Math.min(r.width/2,r.height/2))})),react_1.default.createElement(core_1.Switch,{checked:r.shadowEnabled,label:(0,l10n_1.t)("toolbar.shadow"),onChange:e=>{c({shadowEnabled:e.target.checked})},alignIndicator:core_1.Alignment.RIGHT,style:{marginTop:"20px"}}),r.shadowEnabled&&react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.blur")),react_1.default.createElement("div",null,react_1.default.createElement(NumberInput,{value:r.shadowBlur,onValueChange:e=>{c({shad:limit(e,-50,50)})},style:{width:"50px"},min:0,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:r.shadowBlur,onChange:e=>{c({shadowBlur:e})},min:0,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.offsetX")),react_1.default.createElement("div",null,react_1.default.createElement(NumberInput,{value:r.shadowOffsetX,onValueChange:e=>{c({shadowOffsetX:limit(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:r.shadowOffsetX,onChange:e=>{c({shadowOffsetX:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.offsetY")),react_1.default.createElement("div",null,react_1.default.createElement(NumberInput,{value:r.shadowOffsetY,onValueChange:e=>{c({shadowOffsetY:limit(e,-50,50)})},style:{width:"50px"},min:-50,max:50,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:r.shadowOffsetY,onChange:e=>{c({shadowOffsetY:e})},min:-50,max:50,showTrackFill:!1,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",null,(0,l10n_1.t)("toolbar.opacity")),react_1.default.createElement("div",null,react_1.default.createElement(NumberInput,{value:Math.round(100*r.shadowOpacity),onValueChange:e=>{c({shadowOpacity:e/100})},style:{width:"50px"},min:0,max:100,buttonPosition:"none"}))),react_1.default.createElement(core_1.Slider,{value:100*r.shadowOpacity,onChange:e=>{c({shadowOpacity:e/100})},min:0,max:100,labelRenderer:!1}),react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between",paddingTop:"5px",paddingBottom:"5px"}},react_1.default.createElement("div",{style:{lineHeight:"30px"}},(0,l10n_1.t)("toolbar.color")),react_1.default.createElement(color_picker_1.default,{value:r.shadowColor,size:30,onChange:e=>{c({shadowColor:e})},store:t})))),position:core_1.Position.BOTTOM},react_1.default.createElement(core_1.Button,{icon:"left-join",text:(0,l10n_1.t)("toolbar.effects"),minimal:!0}))})),exports.default=exports.FiltersPicker;

package/toolbar/text-toolbar.js

@@ -4,4 +4,4 @@
   .bp4-dark & {
     filter: invert(1);
   }
-`,googleFonts=(0,fonts_1.getFontsList)(),FontItem=({fontFamily:e,handleClick:t,modifiers:n,store:r,isCustom:o})=>{const[a,l]=react_1.default.useState(!o);react_1.default.useEffect((()=>{a||r.loadFont(e)}),[e,a]);const i=a?react_1.default.createElement(Image,{src:(0,api_1.getGoogleFontImage)(e),alt:e,onError:()=>{l(!1)}}):e;return react_1.default.createElement(core_1.MenuItem,{text:i,active:n.active,disabled:n.disabled,onClick:t,style:{fontFamily:'"'+e+'"'}})},SearchInput=({onChange:e,defaultValue:t})=>{const n=react_1.default.useRef(null);return react_1.default.useEffect((()=>{n.current&&n.current.focus()}),[]),react_1.default.createElement(core_1.InputGroup,{leftIcon:"search",inputRef:n,defaultValue:t,onChange:t=>e(t.target.value)})},FontMenu=({store:e,fonts:t,activeFont:n,activeFontLabel:r,onFontSelect:o})=>{const[a,l]=react_1.default.useState(""),i=t.filter((e=>e.toLowerCase().indexOf(a.toLowerCase())>=0));return react_1.default.createElement(popover2_1.Popover2,{content:react_1.default.createElement("div",null,react_1.default.createElement(SearchInput,{onChange:e=>l(e),defaultValue:a}),react_1.default.createElement("div",{style:{paddingTop:"5px"}},react_1.default.createElement(react_window_1.FixedSizeList,{innerElementType:react_1.default.forwardRef(((e,t)=>react_1.default.createElement(core_1.Menu,Object.assign({ref:t},e)))),height:Math.min(400,30*i.length)+10,width:210,itemCount:i.length,itemSize:30,children:({index:t,style:r})=>{const a=i[t];return react_1.default.createElement("div",{style:r},react_1.default.createElement(FontItem,{key:a,fontFamily:a,modifiers:{active:n===a},handleClick:()=>o(a),store:e,isCustom:e.fonts.find((e=>e.fontFamily===a))||fonts_1.globalFonts.find((e=>e.fontFamily===a))}))}})))},react_1.default.createElement(core_1.Button,{text:r,rightIcon:"caret-down",minimal:!0,style:{marginRight:"5px",fontFamily:'"'+n+'"',overflow:"hidden",whiteSpace:"nowrap",maxHeight:"30px"}}))};exports.FontFamilyInput=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const{data:n,mutate:r}=(0,swr_1.default)((0,api_1.getGoogleFontsListAPI)(),use_api_1.fetcher,{isPaused:()=>(0,fonts_1.isGoogleFontChanged)(),fallbackData:[]});react_1.default.useEffect((()=>{r()}),[(0,fonts_1.isGoogleFontChanged)()]);const o=t.fonts.concat(fonts_1.globalFonts).map((e=>e.fontFamily)).concat((null==n?void 0:n.length)?n:googleFonts);let a=e[0].fontFamily;return a.length>15&&(a=a.slice(0,15)+"..."),react_1.default.createElement(FontMenu,{fonts:o,activeFont:e[0].fontFamily,activeFontLabel:a,store:t,onFontSelect:n=>{t.history.transaction((()=>{e.forEach((e=>{e.set({fontFamily:n})}))}))}})})),exports.FontSizeInput=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>react_1.default.createElement(core_1.NumericInput,{onValueChange:n=>{t.history.transaction((()=>{e.forEach((e=>{e.set({fontSize:n,width:Math.max(n,e.width)})}))}))},value:Math.round(e[0].fontSize),style:{width:"50px"},min:5})));const ALIGN_OPTIONS=["left","center","right","justify"],VERTICAL_ALIGN_OPTIONS=["top","middle","bottom"],VERTICAL_ALIGN_ICONS={top:react_1.default.createElement(MdcFormatVerticalAlignTop_1.default,null),middle:react_1.default.createElement(MdcFormatVerticalAlignCenter_1.default,null),bottom:react_1.default.createElement(MdcFormatVerticalAlignBottom_1.default,null)};exports.FontStyleGroup=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const n=e[0];return react_1.default.createElement(core_1.ButtonGroup,null,react_1.default.createElement(core_1.Button,{minimal:!0,icon:"align-"+n.align,onClick:()=>{const r=(ALIGN_OPTIONS.indexOf(n.align)+1+ALIGN_OPTIONS.length)%ALIGN_OPTIONS.length,o=ALIGN_OPTIONS[r];t.history.transaction((()=>{e.forEach((e=>{e.set({align:o})}))}))}}),flags_1.flags.textVerticalResizeEnabled&&react_1.default.createElement(core_1.Button,{minimal:!0,icon:VERTICAL_ALIGN_ICONS[n.verticalAlign],onClick:()=>{const r=(VERTICAL_ALIGN_OPTIONS.indexOf(n.verticalAlign)+1+VERTICAL_ALIGN_OPTIONS.length)%VERTICAL_ALIGN_OPTIONS.length,o=VERTICAL_ALIGN_OPTIONS[r];t.history.transaction((()=>{e.forEach((e=>{e.set({verticalAlign:o})}))}))}}),react_1.default.createElement(core_1.Button,{minimal:!0,icon:"bold",active:"bold"===n.fontWeight||"700"===n.fontWeight,onClick:()=>{const r="bold"===n.fontWeight||"700"===n.fontWeight;t.history.transaction((()=>{e.forEach((e=>{r?e.set({fontWeight:"normal"}):e.set({fontWeight:"bold"})}))}))}}),react_1.default.createElement(core_1.Button,{minimal:!0,icon:"italic",active:"italic"===n.fontStyle,onClick:()=>{t.history.transaction((()=>{e.forEach((e=>{"italic"===n.fontStyle?e.set({fontStyle:"normal"}):e.set({fontStyle:"italic"})}))}))}}),react_1.default.createElement(core_1.Button,{minimal:!0,icon:"underline",active:n.textDecoration.indexOf("underline")>=0,onClick:()=>{let r=n.textDecoration.split(" ");r.indexOf("underline")>=0?r=r.filter((e=>"underline"!==e)):r.push("underline"),t.history.transaction((()=>{e.forEach((e=>{e.set({textDecoration:r.join(" ")})}))}))}}))})),exports.FontColorInput=(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:!0,onChange:n=>t.history.transaction((()=>{e.forEach((e=>{e.set({fill:n})}))})),store:t}))),exports.SpacingInput=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const n=e[0];return react_1.default.createElement(popover2_1.Popover2,{content:react_1.default.createElement("div",{style:{padding:"15px 25px",width:"200px"}},react_1.default.createElement("p",null,(0,l10n_1.t)("toolbar.lineHeight")),react_1.default.createElement(core_1.Slider,{value:"number"==typeof n.lineHeight?100*n.lineHeight:120,labelStepSize:50,onChange:n=>{t.history.transaction((()=>{e.forEach((e=>{e.set({lineHeight:n/100})}))}))},min:50,max:250,stepSize:10,showTrackFill:!0}),react_1.default.createElement("p",null,(0,l10n_1.t)("toolbar.letterSpacing")),react_1.default.createElement(core_1.Slider,{value:100*n.letterSpacing,labelStepSize:50,onChange:n=>{t.history.transaction((()=>{e.forEach((e=>{e.set({letterSpacing:n/100})}))}))},min:-50,max:250,stepSize:10,showTrackFill:!1})),position:core_1.Position.BOTTOM},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(MdcFormatLineSpacing_1.default,{className:"bp4-icon",style:{fontSize:"20px"}}),minimal:!0}))}));const PROPS_MAP={TextFontFamily:exports.FontFamilyInput,TextFontSize:exports.FontSizeInput,TextFontVariant:exports.FontStyleGroup,TextFilters:filters_picker_1.default,TextFill:exports.FontColorInput,TextSpacing:exports.SpacingInput};exports.TextToolbar=(0,mobx_react_lite_1.observer)((({store:e,hideTextFontFamily:t,hideTextEffects:n,hideTextSpacing:r,hideTextBold:o,hideTextItalic:a,hideTextUnderline:l,components:i})=>{const c=e.selectedElements,s=["TextFill",!t&&"TextFontFamily","TextFontSize","TextFontVariant",!r&&"TextSpacing",!n&&"TextFilters"].filter((e=>!!e)),u=(0,element_container_1.extendToolbar)({type:"text",usedItems:s,components:i});return react_1.default.createElement(element_container_1.ElementContainer,{items:u,itemRender:t=>{const n=i[t]||PROPS_MAP[t];return react_1.default.createElement(n,{elements:c,element:c[0],store:e,key:t,hideTextBold:o,hideTextItalic:a,hideTextUnderline:l})}})})),exports.default=exports.TextToolbar;
+`,googleFonts=(0,fonts_1.getFontsList)(),FontItem=({fontFamily:e,handleClick:t,modifiers:n,store:r,isCustom:o})=>{const[a,l]=react_1.default.useState(!o);react_1.default.useEffect((()=>{a||r.loadFont(e)}),[e,a]);const i=a?react_1.default.createElement(Image,{src:(0,api_1.getGoogleFontImage)(e),alt:e,onError:()=>{l(!1)}}):e;return react_1.default.createElement(core_1.MenuItem,{text:i,active:n.active,disabled:n.disabled,onClick:t,style:{fontFamily:'"'+e+'"'}})},SearchInput=({onChange:e,defaultValue:t})=>{const n=react_1.default.useRef(null);return react_1.default.useEffect((()=>{n.current&&n.current.focus()}),[]),react_1.default.createElement(core_1.InputGroup,{leftIcon:"search",inputRef:n,defaultValue:t,onChange:t=>e(t.target.value)})},FontMenu=({store:e,fonts:t,activeFont:n,activeFontLabel:r,onFontSelect:o})=>{const[a,l]=react_1.default.useState(""),i=t.filter((e=>e.toLowerCase().indexOf(a.toLowerCase())>=0));return react_1.default.createElement(popover2_1.Popover2,{content:react_1.default.createElement("div",null,react_1.default.createElement(SearchInput,{onChange:e=>l(e),defaultValue:a}),react_1.default.createElement("div",{style:{paddingTop:"5px"}},react_1.default.createElement(react_window_1.FixedSizeList,{innerElementType:react_1.default.forwardRef(((e,t)=>react_1.default.createElement(core_1.Menu,Object.assign({ref:t},e)))),height:Math.min(400,30*i.length)+10,width:210,itemCount:i.length,itemSize:30,children:({index:t,style:r})=>{const a=i[t];return react_1.default.createElement("div",{style:r},react_1.default.createElement(FontItem,{key:a,fontFamily:a,modifiers:{active:n===a},handleClick:()=>o(a),store:e,isCustom:e.fonts.find((e=>e.fontFamily===a))||fonts_1.globalFonts.find((e=>e.fontFamily===a))}))}})))},react_1.default.createElement(core_1.Button,{text:r,rightIcon:"caret-down",minimal:!0,style:{marginRight:"5px",fontFamily:'"'+n+'"',overflow:"hidden",whiteSpace:"nowrap",maxHeight:"30px"}}))};exports.FontFamilyInput=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const{data:n,mutate:r}=(0,swr_1.default)((0,api_1.getGoogleFontsListAPI)(),use_api_1.fetcher,{isPaused:()=>(0,fonts_1.isGoogleFontChanged)(),fallbackData:[]});react_1.default.useEffect((()=>{r()}),[(0,fonts_1.isGoogleFontChanged)()]);const o=t.fonts.concat(fonts_1.globalFonts).map((e=>e.fontFamily)).concat((null==n?void 0:n.length)&&!(0,fonts_1.isGoogleFontChanged)()?n:googleFonts);let a=e[0].fontFamily;return a.length>15&&(a=a.slice(0,15)+"..."),react_1.default.createElement(FontMenu,{fonts:o,activeFont:e[0].fontFamily,activeFontLabel:a,store:t,onFontSelect:n=>{t.history.transaction((()=>{e.forEach((e=>{e.set({fontFamily:n})}))}))}})})),exports.FontSizeInput=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>react_1.default.createElement(core_1.NumericInput,{onValueChange:n=>{t.history.transaction((()=>{e.forEach((e=>{e.set({fontSize:n,width:Math.max(n,e.width)})}))}))},value:Math.round(e[0].fontSize),style:{width:"50px"},min:5,max:4*t.height})));const ALIGN_OPTIONS=["left","center","right","justify"],VERTICAL_ALIGN_OPTIONS=["top","middle","bottom"],VERTICAL_ALIGN_ICONS={top:react_1.default.createElement(MdcFormatVerticalAlignTop_1.default,null),middle:react_1.default.createElement(MdcFormatVerticalAlignCenter_1.default,null),bottom:react_1.default.createElement(MdcFormatVerticalAlignBottom_1.default,null)};exports.FontStyleGroup=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const n=e[0];return react_1.default.createElement(core_1.ButtonGroup,null,react_1.default.createElement(core_1.Button,{minimal:!0,icon:"align-"+n.align,onClick:()=>{const r=(ALIGN_OPTIONS.indexOf(n.align)+1+ALIGN_OPTIONS.length)%ALIGN_OPTIONS.length,o=ALIGN_OPTIONS[r];t.history.transaction((()=>{e.forEach((e=>{e.set({align:o})}))}))}}),flags_1.flags.textVerticalResizeEnabled&&react_1.default.createElement(core_1.Button,{minimal:!0,icon:VERTICAL_ALIGN_ICONS[n.verticalAlign],onClick:()=>{const r=(VERTICAL_ALIGN_OPTIONS.indexOf(n.verticalAlign)+1+VERTICAL_ALIGN_OPTIONS.length)%VERTICAL_ALIGN_OPTIONS.length,o=VERTICAL_ALIGN_OPTIONS[r];t.history.transaction((()=>{e.forEach((e=>{e.set({verticalAlign:o})}))}))}}),react_1.default.createElement(core_1.Button,{minimal:!0,icon:"bold",active:"bold"===n.fontWeight||"700"===n.fontWeight,onClick:()=>{const r="bold"===n.fontWeight||"700"===n.fontWeight;t.history.transaction((()=>{e.forEach((e=>{r?e.set({fontWeight:"normal"}):e.set({fontWeight:"bold"})}))}))}}),react_1.default.createElement(core_1.Button,{minimal:!0,icon:"italic",active:"italic"===n.fontStyle,onClick:()=>{t.history.transaction((()=>{e.forEach((e=>{"italic"===n.fontStyle?e.set({fontStyle:"normal"}):e.set({fontStyle:"italic"})}))}))}}),react_1.default.createElement(core_1.Button,{minimal:!0,icon:"underline",active:n.textDecoration.indexOf("underline")>=0,onClick:()=>{let r=n.textDecoration.split(" ");r.indexOf("underline")>=0?r=r.filter((e=>"underline"!==e)):r.push("underline"),t.history.transaction((()=>{e.forEach((e=>{e.set({textDecoration:r.join(" ")})}))}))}}))})),exports.FontColorInput=(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:!0,onChange:n=>t.history.transaction((()=>{e.forEach((e=>{e.set({fill:n})}))})),store:t}))),exports.SpacingInput=(0,mobx_react_lite_1.observer)((({elements:e,store:t})=>{const n=e[0];return react_1.default.createElement(popover2_1.Popover2,{content:react_1.default.createElement("div",{style:{padding:"15px 25px",width:"200px"}},react_1.default.createElement("p",null,(0,l10n_1.t)("toolbar.lineHeight")),react_1.default.createElement(core_1.Slider,{value:"number"==typeof n.lineHeight?100*n.lineHeight:120,labelStepSize:50,onChange:n=>{t.history.transaction((()=>{e.forEach((e=>{e.set({lineHeight:n/100})}))}))},min:50,max:250,stepSize:10,showTrackFill:!0}),react_1.default.createElement("p",null,(0,l10n_1.t)("toolbar.letterSpacing")),react_1.default.createElement(core_1.Slider,{value:100*n.letterSpacing,labelStepSize:50,onChange:n=>{t.history.transaction((()=>{e.forEach((e=>{e.set({letterSpacing:n/100})}))}))},min:-50,max:250,stepSize:10,showTrackFill:!1})),position:core_1.Position.BOTTOM},react_1.default.createElement(core_1.Button,{icon:react_1.default.createElement(MdcFormatLineSpacing_1.default,{className:"bp4-icon",style:{fontSize:"20px"}}),minimal:!0}))}));const PROPS_MAP={TextFontFamily:exports.FontFamilyInput,TextFontSize:exports.FontSizeInput,TextFontVariant:exports.FontStyleGroup,TextFilters:filters_picker_1.default,TextFill:exports.FontColorInput,TextSpacing:exports.SpacingInput};exports.TextToolbar=(0,mobx_react_lite_1.observer)((({store:e,hideTextFontFamily:t,hideTextEffects:n,hideTextSpacing:r,hideTextBold:o,hideTextItalic:a,hideTextUnderline:l,components:i})=>{const c=e.selectedElements,s=["TextFill",!t&&"TextFontFamily","TextFontSize","TextFontVariant",!r&&"TextSpacing",!n&&"TextFilters"].filter((e=>!!e)),u=(0,element_container_1.extendToolbar)({type:"text",usedItems:s,components:i});return react_1.default.createElement(element_container_1.ElementContainer,{items:u,itemRender:t=>{const n=i[t]||PROPS_MAP[t];return react_1.default.createElement(n,{elements:c,element:c[0],store:e,key:t,hideTextBold:o,hideTextItalic:a,hideTextUnderline:l})}})})),exports.default=exports.TextToolbar;

package/utils/fonts.d.ts

@@ -1,6 +1,6 @@
 import * as mobx from 'mobx';
 export declare function isGoogleFontChanged(): boolean;
-export declare function setGoogleFonts(list: any): void;
+export declare function setGoogleFonts(list: string[] | 'default'): void;
 export declare function getFontsList(): mobx.IObservableArray<string>;
 declare type FontItem = {
     fontFamily: string;

package/utils/fonts.js

@@ -1 +1 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,n){void 0===n&&(n=o);var r=Object.getOwnPropertyDescriptor(t,o);r&&!("get"in r?!t.__esModule:r.writable||r.configurable)||(r={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,n,r)}:function(e,t,o,n){void 0===n&&(n=o),e[n]=t[o]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(t,e,o);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.injectCustomFont=exports.injectGoogleFont=exports.loadFont=exports.isFontLoaded=exports.replaceGlobalFonts=exports.removeGlobalFont=exports.addGlobalFont=exports.globalFonts=exports.getFontsList=exports.setGoogleFonts=exports.isGoogleFontChanged=void 0;const mobx=__importStar(require("mobx")),loader_1=require("./loader");let GOOGLE_FONTS=mobx.observable(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),googleFontsChanged=!1;function isGoogleFontChanged(){return googleFontsChanged}function setGoogleFonts(e){googleFontsChanged=!0,GOOGLE_FONTS.splice(0,GOOGLE_FONTS.length),GOOGLE_FONTS.push(...e)}function getFontsList(){return GOOGLE_FONTS}function addGlobalFont(e){exports.globalFonts.push(e)}function removeGlobalFont(e){const t=exports.globalFonts.findIndex((t=>t.fontFamily===e));-1!==t&&exports.globalFonts.splice(t,1)}function replaceGlobalFonts(e){exports.globalFonts.replace(e)}exports.isGoogleFontChanged=isGoogleFontChanged,exports.setGoogleFonts=setGoogleFonts,exports.getFontsList=getFontsList,exports.globalFonts=mobx.observable([]),exports.addGlobalFont=addGlobalFont,exports.removeGlobalFont=removeGlobalFont,exports.replaceGlobalFonts=replaceGlobalFonts;var TEXT_TEXT="Some test text;?#D-ПРИВЕТ!1230o9u8i7y6t5r4e3w2q1",canvas=document.createElement("canvas");function measureArial(){return measureFont("Arial")}function measureTimes(){return measureFont("Times","Times")}function measureFont(e,t="Arial"){var o=canvas.getContext("2d");return o.font=`normal 40px '${e}', ${t}`,o.measureText(TEXT_TEXT).width}const MAX_ATTEMPTS=100,loadedFonts={Arial:!0},isFontLoaded=e=>loadedFonts[e];async function loadFont(e){var t;if(loadedFonts[e])return;const o=!!(null===(t=document.fonts)||void 0===t?void 0:t.load),n=measureArial();if(o)try{await document.fonts.load(`16px '${e}'`);const t=measureFont(e);if(n!==t)return void(loadedFonts[e]=!0)}catch(e){}const r=measureTimes(),s=measureFont(e);for(let t=0;t<100;t++){const t=measureFont(e,"Arial"),o=measureFont(e,"Times");if(t!==s||t!==n||o!==r)return void(loadedFonts[e]=!0);await new Promise((e=>setTimeout(e,60)))}console.warn(`Timeout for loading font "${e}". Looks like polotno can't load it. Is it a correct font family?`),(0,loader_1.triggerLoadError)(`Timeout for loading font "${e}"`)}exports.isFontLoaded=isFontLoaded,exports.loadFont=loadFont;const registeredGoogleFonts={};function injectGoogleFont(e){if(registeredGoogleFonts[e])return;const t=`https://fonts.googleapis.com/css?family=${e.replace(/ /g,"+")}`,o=document.createElement("link");o.type="text/css",o.href=t,o.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(o),registeredGoogleFonts[e]=!0}exports.injectGoogleFont=injectGoogleFont;const registeredCustomFonts={};function injectCustomFont(e){const t=e.fontFamily;if(registeredCustomFonts[t])return;if(!e.url&&!e.styles)return;const o=document.createElement("style");o.type="text/css";const n=e.styles||(e.url?[{src:`url("${e.url}")`}]:[]);let r="";n.forEach((e=>{r+=`\n      @font-face {\n        font-family: '${t}';\n        src: ${e.src};\n        font-style: ${e.fontStyle||"normal"};\n        font-weight: ${e.fontWeight||"normal"};\n      }\n    `})),o.innerHTML=r,document.getElementsByTagName("head")[0].appendChild(o),registeredCustomFonts[e.fontFamily]=!0}exports.injectCustomFont=injectCustomFont;
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,n){void 0===n&&(n=o);var s=Object.getOwnPropertyDescriptor(t,o);s&&!("get"in s?!t.__esModule:s.writable||s.configurable)||(s={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,n,s)}:function(e,t,o,n){void 0===n&&(n=o),e[n]=t[o]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(t,e,o);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.injectCustomFont=exports.injectGoogleFont=exports.loadFont=exports.isFontLoaded=exports.replaceGlobalFonts=exports.removeGlobalFont=exports.addGlobalFont=exports.globalFonts=exports.getFontsList=exports.setGoogleFonts=exports.isGoogleFontChanged=void 0;const mobx=__importStar(require("mobx")),loader_1=require("./loader");let GOOGLE_FONTS=mobx.observable(["Roboto","Amatic SC","Press Start 2P","Marck Script","Rubik Mono One"]),googleFontsChanged=mobx.observable({value:!1});function isGoogleFontChanged(){return googleFontsChanged.value}function setGoogleFonts(e){"default"!==e?(googleFontsChanged.value=!0,GOOGLE_FONTS.splice(0,GOOGLE_FONTS.length),GOOGLE_FONTS.push(...e)):googleFontsChanged.value=!1}function getFontsList(){return GOOGLE_FONTS}function addGlobalFont(e){exports.globalFonts.push(e)}function removeGlobalFont(e){const t=exports.globalFonts.findIndex((t=>t.fontFamily===e));-1!==t&&exports.globalFonts.splice(t,1)}function replaceGlobalFonts(e){exports.globalFonts.replace(e)}exports.isGoogleFontChanged=isGoogleFontChanged,exports.setGoogleFonts=setGoogleFonts,exports.getFontsList=getFontsList,exports.globalFonts=mobx.observable([]),exports.addGlobalFont=addGlobalFont,exports.removeGlobalFont=removeGlobalFont,exports.replaceGlobalFonts=replaceGlobalFonts;var TEXT_TEXT="Some test text;?#D-ПРИВЕТ!1230o9u8i7y6t5r4e3w2q1",canvas=document.createElement("canvas");function measureArial(){return measureFont("Arial")}function measureTimes(){return measureFont("Times","Times")}function measureFont(e,t="Arial"){var o=canvas.getContext("2d");return o.font=`normal 40px '${e}', ${t}`,o.measureText(TEXT_TEXT).width}const MAX_ATTEMPTS=100,loadedFonts={Arial:!0},isFontLoaded=e=>loadedFonts[e];async function loadFont(e){var t;if(loadedFonts[e])return;const o=!!(null===(t=document.fonts)||void 0===t?void 0:t.load),n=measureArial();if(o)try{await document.fonts.load(`16px '${e}'`);const t=measureFont(e);if(n!==t)return void(loadedFonts[e]=!0)}catch(e){}const s=measureTimes(),r=measureFont(e);for(let t=0;t<100;t++){const t=measureFont(e,"Arial"),o=measureFont(e,"Times");if(t!==r||t!==n||o!==s)return void(loadedFonts[e]=!0);await new Promise((e=>setTimeout(e,60)))}console.warn(`Timeout for loading font "${e}". Looks like polotno can't load it. Is it a correct font family?`),(0,loader_1.triggerLoadError)(`Timeout for loading font "${e}"`)}exports.isFontLoaded=isFontLoaded,exports.loadFont=loadFont;const registeredGoogleFonts={};function injectGoogleFont(e){if(registeredGoogleFonts[e])return;const t=`https://fonts.googleapis.com/css?family=${e.replace(/ /g,"+")}`,o=document.createElement("link");o.type="text/css",o.href=t,o.rel="stylesheet",document.getElementsByTagName("head")[0].appendChild(o),registeredGoogleFonts[e]=!0}exports.injectGoogleFont=injectGoogleFont;const registeredCustomFonts={};function injectCustomFont(e){const t=e.fontFamily;if(registeredCustomFonts[t])return;if(!e.url&&!e.styles)return;const o=document.createElement("style");o.type="text/css";const n=e.styles||(e.url?[{src:`url("${e.url}")`}]:[]);let s="";n.forEach((e=>{s+=`\n      @font-face {\n        font-family: '${t}';\n        src: ${e.src};\n        font-style: ${e.fontStyle||"normal"};\n        font-weight: ${e.fontWeight||"normal"};\n      }\n    `})),o.innerHTML=s,document.getElementsByTagName("head")[0].appendChild(o),registeredCustomFonts[e.fontFamily]=!0}exports.injectCustomFont=injectCustomFont;

package/utils/svg.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.useSvgColors=exports.replaceColors=exports.sameColors=exports.fixSize=exports.getSvgSize=exports.svgToURL=exports.getColors=exports.urlToString=exports.urlToBase64=void 0;const konva_1=__importDefault(require("konva")),react_1=__importDefault(require("react")),gradient_1=require("./gradient");function isInsideDef(e){for(;e.parentNode;){if("defs"===e.nodeName)return!0;e=e.parentNode}return!1}function getElementColors(e){const t={fill:"",stroke:""};return e.getAttribute("fill")&&"none"!==e.getAttribute("fill")&&(t.fill=e.getAttribute("fill")),!t.fill&&e.style.fill&&"none"!==e.style.fill&&(t.fill=e.style.fill),e.getAttribute("stroke")&&(t.stroke=e.getAttribute("stroke")),!t.stroke&&e.style.stroke&&(t.stroke=e.style.stroke),t.stroke||t.fill||(t.fill="black"),t}const SVG_SHAPES=["path","rect","circle"];function getAllElementsWithColor(e){for(var t=[],r=e.getElementsByTagName("*"),o=0,s=r.length;o<s;o++){const e=r[o];isInsideDef(e)||(null!==e.getAttribute("fill")&&t.push(e),(null!==e.getAttribute("stroke")||e.style&&e.style.fill||SVG_SHAPES.indexOf(e.nodeName)>=0)&&t.push(e))}return t}async function urlToBase64(e){const t=await fetch(e);return svgToURL(await t.text())}async function urlToString(e){const t=await fetch(e,{mode:"cors"});return await t.text()}function getColors(e){const t=getAllElementsWithColor((new DOMParser).parseFromString(e,"image/svg+xml")),r=[];return t.forEach((e=>{const{fill:t,stroke:o}=getElementColors(e);[t,o].forEach((e=>{if(!e)return;konva_1.default.Util.colorToRGBA(e)&&-1===r.indexOf(e)&&r.push(e)}))})),r}function svgToURL(e){return"data:image/svg+xml;base64,"+window.btoa(unescape(encodeURIComponent(e)))}async function getSvgSize(e){const t=await urlToString(e);const r=(new DOMParser).parseFromString(t,"image/svg+xml").documentElement.getAttribute("viewBox"),[o,s,n,l]=(null==r?void 0:r.split(" "))||[];return{width:parseFloat(n),height:parseFloat(l)}}function fixSize(e){var t=(new DOMParser).parseFromString(e,"image/svg+xml");const r=t.documentElement.getAttribute("viewBox"),[o,s,n,l]=(null==r?void 0:r.split(" "))||[],i=t.documentElement.getAttribute("width");(!i||i.indexOf("%")>=0)&&t.documentElement.setAttribute("width",n+"px");const a=t.documentElement.getAttribute("height");(!a||a.indexOf("%")>=0)&&t.documentElement.setAttribute("height",l+"px");return(new XMLSerializer).serializeToString(t)}exports.urlToBase64=urlToBase64,exports.urlToString=urlToString,exports.getColors=getColors,exports.svgToURL=svgToURL,exports.getSvgSize=getSvgSize,exports.fixSize=fixSize;const sameColors=(e,t)=>{if(!e||!t)return!1;const r=konva_1.default.Util.colorToRGBA(e),o=konva_1.default.Util.colorToRGBA(t);return r&&o?r.r===o.r&&r.g===o.g&&r.b===o.b&&r.a===o.a:void 0};function createGradient(e,t,r,o){var s=e.namespaceURI,n=document.createElementNS(s,"linearGradient");const l=konva_1.default.Util.degToRad(r+90),i=(Math.cos(l)+1)/2,a=(Math.sin(l)+1)/2,u=(Math.cos(l+Math.PI)+1)/2,c=(Math.sin(l+Math.PI)+1)/2;n.setAttribute("x1",100*i+"%"),n.setAttribute("y1",100*a+"%"),n.setAttribute("x2",100*u+"%"),n.setAttribute("y2",100*c+"%"),n.setAttribute("gradientUnits","userSpaceOnUse"),n.setAttribute("id",t);for(var f=0;f<o.length;f++){var g=o[f],d=document.createElementNS(s,"stop");for(var p in g)g.hasOwnProperty(p)&&d.setAttribute(p,g[p]);n.appendChild(d)}return(e.querySelector("defs")||e.insertBefore(document.createElementNS(s,"defs"),e.firstChild)).appendChild(n)}function replaceColors(e,t){var r=(new DOMParser).parseFromString(e,"image/svg+xml");const o=getAllElementsWithColor(r),s=Array.from(t.keys());o.forEach((e=>{const{fill:o,stroke:n}=getElementColors(e);[{prop:"fill",color:o},{prop:"stroke",color:n}].forEach((({prop:o,color:n})=>{const l=s.find((e=>(0,exports.sameColors)(e,n)));if(l){const s=t.get(l);if((0,gradient_1.isGradient)(s)){const[t,n,l]=(0,gradient_1.parseColor)(s),i=[{offset:"0%","stop-color":n},{offset:"100%","stop-color":l}],a="color"+Math.round(1e8*Math.random());createGradient(r.children[0],a,t,i),e.style[o]=null,e.setAttribute(o,`url('#${a}')`)}else e.style[o]=t.get(l)}}))}));return svgToURL((new XMLSerializer).serializeToString(r))}exports.sameColors=sameColors,exports.replaceColors=replaceColors;const useSvgColors=e=>{const[t,r]=react_1.default.useState([]);return react_1.default.useEffect((()=>{let t=!1;return(async()=>{r([]);const o=getColors(await urlToString(e));t||r(o)})(),()=>{t=!0}}),[e]),t};exports.useSvgColors=useSvgColors;
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useSvgColors=exports.replaceColors=exports.sameColors=exports.fixSize=exports.getSvgSize=exports.svgToURL=exports.getColors=exports.urlToString=exports.urlToBase64=void 0;const konva_1=__importDefault(require("konva")),react_1=__importDefault(require("react")),gradient_1=require("./gradient");function isInsideDef(e){for(;e.parentNode;){if("defs"===e.nodeName)return!0;e=e.parentNode}return!1}function getElementColors(e){const t={fill:"",stroke:""};return e.getAttribute("fill")&&"none"!==e.getAttribute("fill")&&(t.fill=e.getAttribute("fill")),!t.fill&&e.style.fill&&"none"!==e.style.fill&&(t.fill=e.style.fill),e.getAttribute("stroke")&&(t.stroke=e.getAttribute("stroke")),!t.stroke&&e.style.stroke&&(t.stroke=e.style.stroke),t.stroke||t.fill||(t.fill="black"),t}const SVG_SHAPES=["path","rect","circle"];function getAllElementsWithColor(e){for(var t=[],r=e.getElementsByTagName("*"),o=0,s=r.length;o<s;o++){const e=r[o];isInsideDef(e)||(null!==e.getAttribute("fill")&&t.push(e),(null!==e.getAttribute("stroke")||e.style&&e.style.fill||SVG_SHAPES.indexOf(e.nodeName)>=0)&&t.push(e))}return t}async function urlToBase64(e){const t=await fetch(e);return svgToURL(await t.text())}async function urlToString(e){const t=await fetch(e,{mode:"cors"});return await t.text()}function getColors(e){const t=getAllElementsWithColor((new DOMParser).parseFromString(e,"image/svg+xml")),r=[];return t.forEach((e=>{const{fill:t,stroke:o}=getElementColors(e);[t,o].forEach((e=>{if(!e)return;konva_1.default.Util.colorToRGBA(e)&&-1===r.indexOf(e)&&r.push(e)}))})),r}function svgToURL(e){return"data:image/svg+xml;base64,"+window.btoa(unescape(encodeURIComponent(e)))}async function getSvgSize(e){const t=await urlToString(e);const r=(new DOMParser).parseFromString(t,"image/svg+xml").documentElement.getAttribute("viewBox"),[o,s,n,l]=(null==r?void 0:r.split(" "))||[];return{width:parseFloat(n),height:parseFloat(l)}}function fixSize(e){var t=(new DOMParser).parseFromString(e,"image/svg+xml");const r=t.documentElement.getAttribute("viewBox"),[o,s,n,l]=(null==r?void 0:r.split(" "))||[],i=t.documentElement.getAttribute("width");!i&&t.documentElement.setAttribute("width",n+"px");const a=t.documentElement.getAttribute("height");if((!a||a.indexOf("%")>=0)&&t.documentElement.setAttribute("height",l+"px"),i&&i.indexOf("%")>=0&&a&&-1===a.indexOf("%")){const e=parseFloat(a)/parseFloat(l);t.documentElement.setAttribute("width",e*parseFloat(n)+"px")}if(a&&a.indexOf("%")>=0&&i&&-1===i.indexOf("%")){const e=parseFloat(i)/parseFloat(n);t.documentElement.setAttribute("height",e*parseFloat(l)+"px")}return(new XMLSerializer).serializeToString(t)}exports.urlToBase64=urlToBase64,exports.urlToString=urlToString,exports.getColors=getColors,exports.svgToURL=svgToURL,exports.getSvgSize=getSvgSize,exports.fixSize=fixSize;const sameColors=(e,t)=>{if(!e||!t)return!1;const r=konva_1.default.Util.colorToRGBA(e),o=konva_1.default.Util.colorToRGBA(t);return r&&o?r.r===o.r&&r.g===o.g&&r.b===o.b&&r.a===o.a:void 0};function createGradient(e,t,r,o){var s=e.namespaceURI,n=document.createElementNS(s,"linearGradient");const l=konva_1.default.Util.degToRad(r+90),i=(Math.cos(l)+1)/2,a=(Math.sin(l)+1)/2,u=(Math.cos(l+Math.PI)+1)/2,c=(Math.sin(l+Math.PI)+1)/2;n.setAttribute("x1",100*i+"%"),n.setAttribute("y1",100*a+"%"),n.setAttribute("x2",100*u+"%"),n.setAttribute("y2",100*c+"%"),n.setAttribute("gradientUnits","userSpaceOnUse"),n.setAttribute("id",t);for(var f=0;f<o.length;f++){var g=o[f],p=document.createElementNS(s,"stop");for(var d in g)g.hasOwnProperty(d)&&p.setAttribute(d,g[d]);n.appendChild(p)}return(e.querySelector("defs")||e.insertBefore(document.createElementNS(s,"defs"),e.firstChild)).appendChild(n)}function replaceColors(e,t){var r=(new DOMParser).parseFromString(e,"image/svg+xml");const o=getAllElementsWithColor(r),s=Array.from(t.keys());o.forEach((e=>{const{fill:o,stroke:n}=getElementColors(e);[{prop:"fill",color:o},{prop:"stroke",color:n}].forEach((({prop:o,color:n})=>{const l=s.find((e=>(0,exports.sameColors)(e,n)));if(l){const s=t.get(l);if((0,gradient_1.isGradient)(s)){const[t,n,l]=(0,gradient_1.parseColor)(s),i=[{offset:"0%","stop-color":n},{offset:"100%","stop-color":l}],a="color"+Math.round(1e8*Math.random());createGradient(r.children[0],a,t,i),e.style[o]=null,e.setAttribute(o,`url('#${a}')`)}else e.style[o]=t.get(l)}}))}));return svgToURL((new XMLSerializer).serializeToString(r))}exports.sameColors=sameColors,exports.replaceColors=replaceColors;const useSvgColors=e=>{const[t,r]=react_1.default.useState([]);return react_1.default.useEffect((()=>{let t=!1;return(async()=>{r([]);const o=getColors(await urlToString(e));t||r(o)})(),()=>{t=!0}}),[e]),t};exports.useSvgColors=useSvgColors;

package/utils/wait.d.ts

@@ -0,0 +1 @@
+export declare function waitTillAvailable(func: Function): Promise<any>;

package/utils/wait.js

@@ -0,0 +1 @@
+"use strict";async function waitTillAvailable(e){for(let i=0;i<30;i++){const i=await e();if(i)return i;await new Promise((e=>setTimeout(e,50)))}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.waitTillAvailable=void 0,exports.waitTillAvailable=waitTillAvailable;