polotno 2.4.0 → 2.4.2

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/hotkeys.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.handleHotkey=void 0;let clipBoard=[],copyPage="";const KEY="polotno_clipboard",setClipBoard=e=>{clipBoard=e;try{localStorage.setItem(KEY,JSON.stringify(e))}catch(e){}},getClipBoard=()=>{try{const e=localStorage.getItem(KEY);if(e)return JSON.parse(e)}catch(e){}return clipBoard};function handleHotkey(e,t){var o,l,d,a,i,c,n,r;if("INPUT"===(null===(o=document.activeElement)||void 0===o?void 0:o.tagName)||"TEXTAREA"===(null===(l=document.activeElement)||void 0===l?void 0:l.tagName)||"true"===(null===(d=document.activeElement)||void 0===d?void 0:d.contentEditable))return;const s=t.selectedElements.filter((e=>e.removable)),v=s.map((e=>e.id));46!==e.keyCode&&8!==e.keyCode||t.deleteElements(v);const p=e.ctrlKey||e.metaKey,u=e.shiftKey;if(p&&!u&&"KeyZ"===e.code&&(e.preventDefault(),t.history.undo()),p&&u&&"KeyZ"===e.code&&(e.preventDefault(),t.history.redo()),p&&"KeyA"===e.code){e.preventDefault();const o=null===(a=t.activePage)||void 0===a?void 0:a.children.filter((e=>e.selectable)),l=(null==o?void 0:o.map((e=>e.id)))||[];t.selectElements(l)}if(p&&"KeyC"===e.code&&(e.preventDefault(),copyPage=null===(i=t.activePage)||void 0===i?void 0:i.id,setClipBoard(t.selectedElements.map((e=>e.toJSON())))),p&&"KeyX"===e.code&&(e.preventDefault(),copyPage=null===(c=t.activePage)||void 0===c?void 0:c.id,setClipBoard(t.selectedElements.map((e=>e.toJSON()))),t.deleteElements(s)),p&&"KeyV"===e.code){e.preventDefault();let o=0;copyPage===(null===(n=t.activePage)||void 0===n?void 0:n.id)&&(o=t.width/20),copyPage=null===(r=t.activePage)||void 0===r?void 0:r.id,t.history.transaction((()=>{const e=[],l=getClipBoard();l.forEach((l=>{var d;delete l.id,l.x+=o,l.y+=o;const a=null===(d=t.activePage)||void 0===d?void 0:d.addElement(l);a&&e.push(a.id)})),setClipBoard(l),t.selectElements(e)}))}"ArrowDown"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.set({y:e.y+1})}))),"ArrowUp"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.set({y:e.y-1})}))),"ArrowLeft"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.set({x:e.x-1})}))),"ArrowRight"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.set({x:e.x+1})})))}exports.handleHotkey=handleHotkey;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.handleHotkey=void 0;const group_model_1=require("../model/group-model");let _LOCAL_CLIPBOARD=[],copyPage="";const KEY="polotno_clipboard",setClipBoard=e=>{_LOCAL_CLIPBOARD=JSON.parse(JSON.stringify(e));try{localStorage.setItem(KEY,JSON.stringify(e))}catch(e){}},getClipBoard=()=>{try{const e=localStorage.getItem(KEY);if(e)return JSON.parse(e)}catch(e){}return _LOCAL_CLIPBOARD};function handleHotkey(e,t){var o,l,d,a,r,i,n,c;if("INPUT"===(null===(o=document.activeElement)||void 0===o?void 0:o.tagName)||"TEXTAREA"===(null===(l=document.activeElement)||void 0===l?void 0:l.tagName)||"true"===(null===(d=document.activeElement)||void 0===d?void 0:d.contentEditable))return;const s=t.selectedElements.filter((e=>e.removable)),v=s.map((e=>e.id));46!==e.keyCode&&8!==e.keyCode||t.deleteElements(v);const p=e.ctrlKey||e.metaKey,u=e.shiftKey;if(p&&!u&&"KeyZ"===e.code&&(e.preventDefault(),t.history.undo()),p&&u&&"KeyZ"===e.code&&(e.preventDefault(),t.history.redo()),p&&"KeyA"===e.code){e.preventDefault();const o=null===(a=t.activePage)||void 0===a?void 0:a.children.filter((e=>e.selectable)),l=(null==o?void 0:o.map((e=>e.id)))||[];t.selectElements(l)}if(p&&"KeyC"===e.code&&(e.preventDefault(),copyPage=null===(r=t.activePage)||void 0===r?void 0:r.id,setClipBoard(t.selectedElements.map((e=>e.toJSON())))),p&&"KeyX"===e.code&&(e.preventDefault(),copyPage=null===(i=t.activePage)||void 0===i?void 0:i.id,setClipBoard(t.selectedElements.map((e=>e.toJSON()))),t.deleteElements(s)),p&&"KeyV"===e.code){e.preventDefault();let o=0;copyPage===(null===(n=t.activePage)||void 0===n?void 0:n.id)&&(o=t.width/20),copyPage=null===(c=t.activePage)||void 0===c?void 0:c.id,t.history.transaction((()=>{const e=[],l=getClipBoard();(0,group_model_1.forEveryChild)({children:l},(e=>{delete e.id,"group"!==e.type&&(e.x+=o,e.y+=o)})),console.log(l),l.forEach((o=>{var l;const d=null===(l=t.activePage)||void 0===l?void 0:l.addElement(o);d&&e.push(d.id)})),setClipBoard(l),t.selectElements(e)}))}"ArrowDown"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.set({y:e.y+1})}))),"ArrowUp"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.set({y:e.y-1})}))),"ArrowLeft"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.set({x:e.x-1})}))),"ArrowRight"===e.code&&(e.preventDefault(),t.selectedElements.forEach((e=>{e.set({x:e.x+1})})))}exports.handleHotkey=handleHotkey;
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
- import { StoreType, PageType } from '../model/store';
2
+ import { StoreType } from '../model/store';
3
+ import { PageType } from '../model/page-model';
3
4
  export declare const Tooltip: (({ store, page, components, stageRef, }: {
4
5
  store: StoreType;
5
6
  page: PageType;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "polotno",
3
- "version": "2.4.0",
3
+ "version": "2.4.2",
4
4
  "description": "Design Editor Framework",
5
5
  "author": "Anton Lavrenov",
6
6
  "keywords": [
package/polotno-app.d.ts CHANGED
@@ -3,14 +3,16 @@ import { StoreType } from './model/store';
3
3
  export declare const PolotnoContainer: any;
4
4
  export declare const SidePanelWrap: any;
5
5
  export declare const WorkspaceWrap: any;
6
- export declare const PolotnoApp: ({ store, style, }: {
6
+ export declare const PolotnoApp: ({ store, style, sections, }: {
7
7
  store: StoreType;
8
8
  style?: any;
9
+ sections?: Array<string>;
9
10
  }) => React.JSX.Element;
10
- export declare function createPolotnoApp({ container, key, showCredit }: {
11
+ export declare function createPolotnoApp({ container, key, showCredit, sections }: {
11
12
  container: any;
12
13
  key: any;
13
14
  showCredit: any;
15
+ sections: any;
14
16
  }): {
15
17
  store: {
16
18
  role: string;
package/polotno-app.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.createDemoApp=exports.createPolotnoApp=exports.PolotnoApp=exports.WorkspaceWrap=exports.SidePanelWrap=exports.PolotnoContainer=void 0;const react_1=__importDefault(require("react")),client_1=__importDefault(require("react-dom/client")),workspace_1=__importDefault(require("./canvas/workspace")),toolbar_1=__importDefault(require("./toolbar/toolbar")),side_panel_1=__importDefault(require("./side-panel/side-panel")),zoom_buttons_1=__importDefault(require("./toolbar/zoom-buttons")),download_button_1=require("./toolbar/download-button"),styled_1=__importDefault(require("./utils/styled")),screen_1=require("./utils/screen"),store_1=require("./model/store");exports.PolotnoContainer=(0,styled_1.default)("div")`
1
+ "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,r){void 0===r&&(r=o);var a=Object.getOwnPropertyDescriptor(t,o);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,r,a)}:function(e,t,o,r){void 0===r&&(r=o),e[r]=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},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.createDemoApp=exports.createPolotnoApp=exports.PolotnoApp=exports.WorkspaceWrap=exports.SidePanelWrap=exports.PolotnoContainer=void 0;const react_1=__importDefault(require("react")),client_1=__importDefault(require("react-dom/client")),workspace_1=__importDefault(require("./canvas/workspace")),toolbar_1=__importDefault(require("./toolbar/toolbar")),side_panel_1=__importStar(require("./side-panel/side-panel")),zoom_buttons_1=__importDefault(require("./toolbar/zoom-buttons")),download_button_1=require("./toolbar/download-button"),styled_1=__importDefault(require("./utils/styled")),screen_1=require("./utils/screen"),store_1=require("./model/store");exports.PolotnoContainer=(0,styled_1.default)("div")`
2
2
  display: flex;
3
3
  height: 100%;
4
4
  width: 100%;
@@ -18,4 +18,4 @@
18
18
  flex: 1;
19
19
  flex-direction: column;
20
20
  position: relative;
21
- `;const PolotnoApp=({store:e,style:t})=>react_1.default.createElement(exports.PolotnoContainer,{className:"polotno-app-container",style:t},react_1.default.createElement(exports.SidePanelWrap,null,react_1.default.createElement(side_panel_1.default,{store:e})),react_1.default.createElement(exports.WorkspaceWrap,null,react_1.default.createElement(toolbar_1.default,{store:e,components:{ActionControls:()=>react_1.default.createElement(download_button_1.DownloadButton,{store:e})}}),react_1.default.createElement(workspace_1.default,{store:e}),react_1.default.createElement(zoom_buttons_1.default,{store:e})));function createPolotnoApp({container:e,key:t,showCredit:o}){const r=(0,store_1.createStore)({key:t,showCredit:o}),a=client_1.default.createRoot(e);return a.render(react_1.default.createElement(exports.PolotnoApp,{store:r})),r.addPage(),r.history.clear(),{store:r,root:a}}exports.PolotnoApp=PolotnoApp,exports.createPolotnoApp=createPolotnoApp,exports.createDemoApp=createPolotnoApp;
21
+ `;const PolotnoApp=({store:e,style:t,sections:o})=>{let r=side_panel_1.DEFAULT_SECTIONS;return o&&(r=o.map((e=>{const t=side_panel_1.DEFAULT_SECTIONS.find((t=>t.name===e));return t||console.error(`Section ${e} not found`),t})).filter(Boolean)),react_1.default.createElement(exports.PolotnoContainer,{className:"polotno-app-container",style:t},react_1.default.createElement(exports.SidePanelWrap,null,react_1.default.createElement(side_panel_1.default,{store:e,sections:r})),react_1.default.createElement(exports.WorkspaceWrap,null,react_1.default.createElement(toolbar_1.default,{store:e,components:{ActionControls:()=>react_1.default.createElement(download_button_1.DownloadButton,{store:e})}}),react_1.default.createElement(workspace_1.default,{store:e}),react_1.default.createElement(zoom_buttons_1.default,{store:e})))};function createPolotnoApp({container:e,key:t,showCredit:o,sections:r}){const a=(0,store_1.createStore)({key:t,showCredit:o}),n=client_1.default.createRoot(e);return n.render(react_1.default.createElement(exports.PolotnoApp,{store:a,sections:r})),a.addPage(),a.history.clear(),{store:a,root:n}}exports.PolotnoApp=PolotnoApp,exports.createPolotnoApp=createPolotnoApp,exports.createDemoApp=createPolotnoApp;