polotno 2.5.2 → 2.6.0

package/side-panel/image-clip-panel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { StoreType } from '../model/store';
+export declare const ImageClipPanel: (({ store }: {
+    store: StoreType;
+}) => React.JSX.Element) & {
+    displayName: string;
+};

package/side-panel/image-clip-panel.js

@@ -0,0 +1,3 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ImageClipPanel=void 0;const react_1=__importDefault(require("react")),core_1=require("@blueprintjs/core"),icons_1=require("@blueprintjs/icons"),mobx_react_lite_1=require("mobx-react-lite"),images_grid_1=require("./images-grid"),svg_1=require("../utils/svg"),figure_to_svg_1=require("../utils/figure-to-svg"),styled_1=__importDefault(require("../utils/styled")),l10n_1=require("../utils/l10n"),FIGURE_DEFAULTS={width:300,height:300,fill:"lightgray",stroke:"#0c0c0c",strokeWidth:0,url:""},subTypes=Object.keys(figure_to_svg_1.TYPES),DEFAULTS=[FIGURE_DEFAULTS],FIGURES=[];subTypes.forEach((e=>{DEFAULTS.forEach((t=>{FIGURES.push(Object.assign({subType:e},t))}))})),FIGURES.forEach((e=>{e.url=(0,svg_1.svgToURL)((0,figure_to_svg_1.figureToSvg)(e))}));const BasicShapesContainer=(0,styled_1.default)("div")`
+  height: 220px;
+`;exports.ImageClipPanel=(0,mobx_react_lite_1.observer)((({store:e})=>{const t=Math.ceil(FIGURES.length/4)||1,r=()=>e.selectedElements.map((e=>e.id)).join(","),i=react_1.default.useMemo(r,[]),l=r();return react_1.default.useEffect((()=>{i!==l&&e.openSidePanel(e.previousOpenedSidePanel)}),[i,l]),react_1.default.createElement("div",{style:{height:"100%",display:"flex",flexDirection:"column",overflow:"auto"}},react_1.default.createElement("div",{style:{display:"flex",justifyContent:"space-between"}},react_1.default.createElement("h3",null,(0,l10n_1.t)("sidePanel.clipImage")),react_1.default.createElement(core_1.Button,{minimal:!0,icon:react_1.default.createElement(icons_1.Cross,null),onClick:()=>e.openSidePanel(e.previousOpenedSidePanel)})),react_1.default.createElement(BasicShapesContainer,{style:{height:110*t+"px"}},react_1.default.createElement(images_grid_1.ImagesGrid,{shadowEnabled:!1,rowsNumber:4,images:FIGURES,getPreview:e=>e.url,isLoading:!1,itemHeight:100,onSelect:async(t,r,i)=>{(i=i||e.selectedElements[0])&&"image"===i.type&&i.contentEditable&&i.set({clipSrc:t.url})}})))}));

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

@@ -0,0 +1,13 @@
+import { StoreType } from '../model/store';
+import { NodeType } from '../model/node-model';
+type Props = {
+    store: StoreType;
+    src: string;
+    droppedPos?: {
+        x: number;
+        y: number;
+    };
+    targetElement?: NodeType;
+};
+export declare const selectImage: ({ src, droppedPos, targetElement, store, }: Props) => Promise<void>;
+export {};

package/side-panel/select-image.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.selectImage=void 0;const image_1=require("../utils/image"),image_2=require("../utils/image"),selectImage=async({src:e,droppedPos:t,targetElement:i,store:s})=>{var a;if(i&&"svg"===i.type&&i.contentEditable){const t=i.parent,a=i.zIndex,n=Object.assign({},i.toJSON());delete n.id,s.deleteElements([i.id]);return void t.addElement(Object.assign(Object.assign({},n),{type:"image",src:e,clipSrc:n.src})).setZIndex(a)}i&&"figure"===i.type&&i.contentEditable;let{width:n,height:g}=await(0,image_1.getImageSize)(e);if(i&&"image"===i.type&&i.contentEditable){const t=(0,image_2.getCrop)(i,{width:n,height:g});return void i.set(Object.assign({src:e},t))}const d=Math.min(s.width/n,s.height/g,1);n*=d,g*=d;const c=((null==t?void 0:t.x)||s.width/2)-n/2,r=((null==t?void 0:t.y)||s.height/2)-g/2;null===(a=s.activePage)||void 0===a||a.addElement({type:"image",src:e,width:n,height:g,x:c,y:r})};exports.selectImage=selectImage;

package/side-panel/select-svg.d.ts

@@ -0,0 +1,13 @@
+import { StoreType } from '../model/store';
+import { NodeType } from '../model/node-model';
+type Props = {
+    store: StoreType;
+    src: string;
+    droppedPos?: {
+        x: number;
+        y: number;
+    };
+    targetElement?: NodeType;
+};
+export declare const selectSvg: ({ src, droppedPos, targetElement, store, }: Props) => Promise<void>;
+export {};

package/side-panel/select-svg.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.selectSvg=void 0;const image_1=require("../utils/image"),selectSvg=async({src:e,droppedPos:t,targetElement:i,store:s})=>{var l;if(i&&"image"===i.type&&i.contentEditable)return void i.set({clipSrc:e});const{width:r,height:g}=await(0,image_1.getImageSize)(e),o=((null==t?void 0:t.x)||s.width/2)-r/2,a=((null==t?void 0:t.y)||s.height/2)-g/2;null===(l=s.activePage)||void 0===l||l.addElement({type:"svg",width:r,height:g,x:o,y:a,src:e})};exports.selectSvg=selectSvg;

package/side-panel/select-video.d.ts

@@ -0,0 +1,13 @@
+import { StoreType } from '../model/store';
+import { NodeType } from '../model/node-model';
+type Props = {
+    store: StoreType;
+    src: string;
+    droppedPos?: {
+        x: number;
+        y: number;
+    };
+    targetElement?: NodeType;
+};
+export declare const selectVideo: ({ src, droppedPos, targetElement, store, }: Props) => Promise<void>;
+export {};

package/side-panel/select-video.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.selectVideo=void 0;const video_1=require("../utils/video"),selectVideo=async({src:e,droppedPos:t,targetElement:i,store:o})=>{var d;let{width:s,height:l}=await(0,video_1.getVideoSize)(e);const r=Math.min(o.width/s,o.height/l,1);s*=r,l*=r;const c=((null==t?void 0:t.x)||o.width/2)-s/2,h=((null==t?void 0:t.y)||o.height/2)-l/2;null===(d=o.activePage)||void 0===d||d.addElement({type:"video",src:e,width:s,height:l,x:c,y:h})};exports.selectVideo=selectVideo;