polotno 1.2.2 → 1.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/canvas/image-element.js +1 -1
- package/canvas/use-transformer-snap.js +1 -1
- package/model/store.js +1 -1
- package/package.json +1 -1
- package/polotno.bundle.js +10 -10
- package/side-panel/background-panel.js +1 -1
- package/side-panel/photos-panel.js +1 -1
- package/side-panel/side-panel.js +1 -1
- package/side-panel/tab-button.js +1 -1
- package/side-panel/text-panel.js +1 -1
- package/utils/svg.js +1 -1
- package/utils/wait.d.ts +1 -0
- package/utils/wait.js +1 -0
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
border-radius: 2px;
|
|
6
6
|
box-shadow: 0 0 2px rgba(16, 22, 26, 0.3);
|
|
7
7
|
cursor: pointer;
|
|
8
|
-
`,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"))}))}));
|
|
8
|
+
`,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"))}))}));
|
|
@@ -1 +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;
|
|
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;
|
package/side-panel/side-panel.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"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")`
|
|
1
|
+
"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")`
|
|
2
2
|
display: flex;
|
|
3
3
|
height: 100% !important;
|
|
4
4
|
padding: 0px !important;
|
package/side-panel/tab-button.js
CHANGED
|
@@ -21,4 +21,4 @@
|
|
|
21
21
|
padding-top: 9px;
|
|
22
22
|
width: 72px;
|
|
23
23
|
}
|
|
24
|
-
`,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"}},
|
|
24
|
+
`,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
CHANGED
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
.bp4-dark & .polotno-text-preview-plain {
|
|
7
7
|
filter: invert(1);
|
|
8
8
|
}
|
|
9
|
-
`,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()
|
|
9
|
+
`,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/utils/svg.js
CHANGED
|
@@ -1 +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");(!
|
|
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&&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
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function waitTillAvailable(func: Function): Promise<any>;
|
package/utils/wait.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
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;
|