polotno 2.9.15 → 2.10.0

package/canvas/use-transformer-snap.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.useAnchorSnap=exports.useSnap=void 0;const react_1=__importDefault(require("react")),konva_1=__importDefault(require("konva")),math_1=require("../utils/math");var GUIDELINE_OFFSET=5;function getObjectSnappingEdges(e){const t=e.__getNodeRect(),n=(0,math_1.getClientRect)(Object.assign(Object.assign({},t),{rotation:konva_1.default.Util.radToDeg(t.rotation)})),r=e.getAbsolutePosition();return{vertical:[{guide:n.x,offset:r.x-n.x,snap:"start"},{guide:n.x+n.width/2,offset:r.x-n.x-n.width/2,snap:"center"},{guide:n.x+n.width,offset:r.x-n.x-n.width,snap:"end"}],horizontal:[{guide:n.y,offset:r.y-n.y,snap:"start"},{guide:n.y+n.height/2,offset:r.y-n.y-n.height/2,snap:"center"},{guide:n.y+n.height,offset:r.y-n.y-n.height,snap:"end"}]}}function getGuides(e,t){var n=[],r=[];e.vertical.forEach((e=>{t.vertical.forEach((t=>{var r=Math.abs(e-t.guide);r<GUIDELINE_OFFSET&&n.push({lineGuide:e,diff:r,snap:t.snap,offset:t.offset})}))})),e.horizontal.forEach((e=>{t.horizontal.forEach((t=>{var n=Math.abs(e-t.guide);n<GUIDELINE_OFFSET&&r.push({lineGuide:e,diff:n,snap:t.snap,offset:t.offset})}))}));var a=[];const i=n.sort(((e,t)=>e.diff-t.diff)),o=r.sort(((e,t)=>e.diff-t.diff));var s=i[0],d=o[0];if(s){i.filter((e=>Math.abs(e.diff-s.diff)<.1)).forEach((e=>{a.push(Object.assign({orientation:"V"},e))}))}if(d){o.filter((e=>Math.abs(e.diff-d.diff)<.1)).forEach((e=>{a.push(Object.assign({orientation:"H"},e))}))}return a}function useSnap(e,t){const n=react_1.default.useRef(),r=e=>e.hasName("element")||e.hasName("page-background")||!n.current&&e.hasName("elements-area");function a(t){var n;const a=null===(n=e.current)||void 0===n?void 0:n.getStage();var i=[],o=[];return a.find(r).forEach((e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});i.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}})),{vertical:i,horizontal:o}}function i(t){var n;const r=null===(n=e.current)||void 0===n?void 0:n.getLayer(),a=null==r?void 0:r.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new konva_1.default.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});null==a||a.add(t),r.batchDraw()}else if("V"===e.orientation){t=new konva_1.default.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});null==a||a.add(t)}}))}const o=e=>{e.target.getLayer().children.find((e=>"line-guides"===e.name())).destroyChildren();var t=getGuides(a(e.target.nodes()),getObjectSnappingEdges(e.target));if(!t.length)return;i(t);const n=e.target.getAbsolutePosition(),r=Object.assign({},n);t.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":r.x=e.lineGuide+e.offset;break;case"H":r.y=e.lineGuide+e.offset}}}));const o=r.x-n.x,s=r.y-n.y;e.evt.ctrlKey||e.evt.metaKey||e.target.nodes().forEach((e=>{const t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+o,y:t.y+s})}))},s=(t,n,r)=>{const o=e.current,s=o.getLayer();if(s.children.find((e=>"line-guides"===e.name())).destroyChildren(),"rotater"===o.getActiveAnchor())return n;if(Math.sqrt(Math.pow(n.x-t.x,2)+Math.pow(n.y-t.y,2))>50)return n;if(!s)return n;var d=getGuides(a(o.nodes()),{vertical:[{guide:n.x,offset:0,snap:"start"}],horizontal:[{guide:n.y,offset:0,snap:"start"}]});if(!d.length)return n;i(d);if(r.ctrlKey||r.metaKey)return n;let u=n.x,c=n.x;d.forEach((e=>{switch(e.orientation){case"V":u=e.lineGuide;break;case"H":c=e.lineGuide}}));const l=Math.abs(n.x-u)<10,f=Math.abs(n.y-c)<10;return l&&!f?{x:u,y:t.y}:f&&!l?{x:t.x,y:c}:l&&f?{x:u,y:c}:n},d=e=>{if(n.current=!1,!e.target)return;const t=e.target.getLayer();t.children.find((e=>"line-guides"===e.name())).destroyChildren(),t.batchDraw()},u=()=>{const r=e.current.nodes().map((e=>e.id())),a=t.getElementById(r[0]);n.current="image"===(null==a?void 0:a.type)};react_1.default.useEffect((()=>{e.current&&(e.current.anchorDragBoundFunc(s),e.current.on("dragstart",(()=>{setTimeout((()=>{const e=[...konva_1.default.DD._dragElements.entries()];e.reverse(),konva_1.default.DD._dragElements.clear(),e.forEach((([e,t])=>{konva_1.default.DD._dragElements.set(e,t)}))})),u()})),e.current.on("dragmove",o),e.current.on("dragend",d),e.current.on("transformstart",(()=>{u()})),e.current.on("transformend",d),e.current.on("transform",(t=>{var n,r;t.evt.ctrlKey||t.evt.metaKey?null===(n=e.current)||void 0===n||n.rotationSnapTolerance(0):null===(r=e.current)||void 0===r||r.rotationSnapTolerance(5)})))}),[])}function getAnchorSnappingEdges(e){return{vertical:[{guide:e.absolutePosition().x,offset:0,snap:"center"}],horizontal:[{guide:e.absolutePosition().y,offset:0,snap:"center"}]}}function useAnchorSnap(e,t,n){const r=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area");const a=n=>{n.target.getLayer().children.find((e=>"line-guides"===e.name())).destroyChildren();var a=getGuides(function(t){var n;const a=null===(n=e.current)||void 0===n?void 0:n.getStage();var i=[],o=[];return a.find(r).forEach((e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});e.hasName("line-anchor")&&(n={x:e.absolutePosition().x,y:e.absolutePosition().y,width:0,height:0}),i.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}})),{vertical:i,horizontal:o}}([n.target,...t.map((e=>e.current))]),getAnchorSnappingEdges(n.target));if(!a.length)return;!function(t){var n;const r=null===(n=e.current)||void 0===n?void 0:n.getLayer(),a=null==r?void 0:r.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new konva_1.default.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});null==a||a.add(t),r.batchDraw()}else"V"===e.orientation&&(t=new konva_1.default.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]}),null==a||a.add(t))}))}(a);const i=n.target.getAbsolutePosition(),o=Object.assign({},i);a.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":o.x=e.lineGuide+e.offset;break;case"H":o.y=e.lineGuide+e.offset}}}));const s=o.x-i.x,d=o.y-i.y;if(!(n.evt.ctrlKey||n.evt.metaKey)){const e=n.target.getAbsolutePosition();n.target.absolutePosition({x:e.x+s,y:e.y+d})}},i=e=>{if(!e.target)return;const t=e.target.getLayer();t.children.find((e=>"line-guides"===e.name())).destroyChildren(),t.batchDraw()};react_1.default.useEffect((()=>{e.current&&(e.current.on("dragmove",a),e.current.on("dragend",i))}),n)}exports.useSnap=useSnap,exports.useAnchorSnap=useAnchorSnap;
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useAnchorSnap=exports.useSnap=void 0;const react_1=__importDefault(require("react")),konva_1=__importDefault(require("konva")),math_1=require("../utils/math");var GUIDELINE_OFFSET=5;function getObjectSnappingEdges(e){const t=e.__getNodeRect(),n=(0,math_1.getClientRect)(Object.assign(Object.assign({},t),{rotation:konva_1.default.Util.radToDeg(t.rotation)})),a=e.getAbsolutePosition();return{vertical:[{guide:n.x,offset:a.x-n.x,snap:"start"},{guide:n.x+n.width/2,offset:a.x-n.x-n.width/2,snap:"center"},{guide:n.x+n.width,offset:a.x-n.x-n.width,snap:"end"}],horizontal:[{guide:n.y,offset:a.y-n.y,snap:"start"},{guide:n.y+n.height/2,offset:a.y-n.y-n.height/2,snap:"center"},{guide:n.y+n.height,offset:a.y-n.y-n.height,snap:"end"}]}}function getGuides(e,t){var n=[],a=[];e.vertical.forEach((e=>{t.vertical.forEach((t=>{var a=Math.abs(e-t.guide);a<GUIDELINE_OFFSET&&n.push({lineGuide:e,diff:a,snap:t.snap,offset:t.offset})}))})),e.horizontal.forEach((e=>{t.horizontal.forEach((t=>{var n=Math.abs(e-t.guide);n<GUIDELINE_OFFSET&&a.push({lineGuide:e,diff:n,snap:t.snap,offset:t.offset})}))}));var r=[];const i=n.sort(((e,t)=>e.diff-t.diff)),o=a.sort(((e,t)=>e.diff-t.diff));var s=i[0],d=o[0];if(s){i.filter((e=>Math.abs(e.diff-s.diff)<.1)).forEach((e=>{r.push(Object.assign({orientation:"V"},e))}))}if(d){o.filter((e=>Math.abs(e.diff-d.diff)<.1)).forEach((e=>{r.push(Object.assign({orientation:"H"},e))}))}return r}function useSnap(e,t){const n=react_1.default.useRef(),a=e=>e.hasName("element")||e.hasName("page-background")||!n.current&&e.hasName("elements-area");function r(t){var n;const r=null===(n=e.current)||void 0===n?void 0:n.getStage();var i=[],o=[];return r.find(a).forEach((e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});i.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}})),{vertical:i,horizontal:o}}function i(t){var n;const a=null===(n=e.current)||void 0===n?void 0:n.getLayer(),r=null==a?void 0:a.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new konva_1.default.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});null==r||r.add(t),a.batchDraw()}else if("V"===e.orientation){t=new konva_1.default.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});null==r||r.add(t)}}))}const o=e=>{e.target.getLayer().children.find((e=>"line-guides"===e.name())).destroyChildren();var t=getGuides(r(e.target.nodes()),getObjectSnappingEdges(e.target));if(!t.length)return;i(t);const n=e.target.getAbsolutePosition(),a=(e.target.nodes().map((e=>e.getAbsolutePosition())),Object.assign({},n));t.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":a.x=e.lineGuide+e.offset;break;case"H":a.y=e.lineGuide+e.offset}}}));const o=a.x-n.x,s=a.y-n.y;if(!(e.evt.ctrlKey||e.evt.metaKey)){e.target.nodes().forEach((e=>{const t=e.getAbsolutePosition();e.setAbsolutePosition({x:t.x+o,y:t.y+s})}));const t=e.target.nodes().map((e=>e.getAbsolutePosition().y));t.every((e=>Math.abs(e-t[0])<.1))}},s=(t,n,a)=>{const o=e.current,s=o.getLayer();if(s.children.find((e=>"line-guides"===e.name())).destroyChildren(),"rotater"===o.getActiveAnchor())return n;if(Math.sqrt(Math.pow(n.x-t.x,2)+Math.pow(n.y-t.y,2))>50)return n;if(!s)return n;var d=getGuides(r(o.nodes()),{vertical:[{guide:n.x,offset:0,snap:"start"}],horizontal:[{guide:n.y,offset:0,snap:"start"}]});if(!d.length)return n;i(d);if(a.ctrlKey||a.metaKey)return n;let u=n.x,c=n.x;d.forEach((e=>{switch(e.orientation){case"V":u=e.lineGuide;break;case"H":c=e.lineGuide}}));const f=Math.abs(n.x-u)<10,l=Math.abs(n.y-c)<10;return f&&!l?{x:u,y:t.y}:l&&!f?{x:t.x,y:c}:f&&l?{x:u,y:c}:n},d=e=>{if(n.current=!1,!e.target)return;const t=e.target.getLayer();t.children.find((e=>"line-guides"===e.name())).destroyChildren(),t.batchDraw()},u=()=>{const a=e.current.nodes().map((e=>e.id())),r=t.getElementById(a[0]);n.current="image"===(null==r?void 0:r.type)};react_1.default.useEffect((()=>{e.current&&(e.current.anchorDragBoundFunc(s),e.current.on("dragstart",(()=>{setTimeout((()=>{const e=[...konva_1.default.DD._dragElements.entries()],t=e.find((([e,t])=>t.node instanceof konva_1.default.Transformer));e.splice(e.indexOf(t),1),e.unshift(t),konva_1.default.DD._dragElements.clear(),e.forEach((([e,t])=>{konva_1.default.DD._dragElements.set(e,t)}))})),u()})),e.current.on("dragmove",o),e.current.on("dragend",d),e.current.on("transformstart",(()=>{u()})),e.current.on("transformend",d),e.current.on("transform",(t=>{var n,a;t.evt.ctrlKey||t.evt.metaKey?null===(n=e.current)||void 0===n||n.rotationSnapTolerance(0):null===(a=e.current)||void 0===a||a.rotationSnapTolerance(5)})))}),[])}function getAnchorSnappingEdges(e){return{vertical:[{guide:e.absolutePosition().x,offset:0,snap:"center"}],horizontal:[{guide:e.absolutePosition().y,offset:0,snap:"center"}]}}function useAnchorSnap(e,t,n){const a=e=>e.hasName("element")||e.hasName("line-anchor")||e.hasName("page-background")||e.hasName("elements-area");const r=n=>{n.target.getLayer().children.find((e=>"line-guides"===e.name())).destroyChildren();var r=getGuides(function(t){var n;const r=null===(n=e.current)||void 0===n?void 0:n.getStage();var i=[],o=[];return r.find(a).forEach((e=>{if(!(t.indexOf(e)>=0)){var n=e.getClientRect({skipShadow:!0,skipStroke:!0});e.hasName("line-anchor")&&(n={x:e.absolutePosition().x,y:e.absolutePosition().y,width:0,height:0}),i.push(n.x,n.x+n.width,n.x+n.width/2),o.push(n.y,n.y+n.height,n.y+n.height/2)}})),{vertical:i,horizontal:o}}([n.target,...t.map((e=>e.current))]),getAnchorSnappingEdges(n.target));if(!r.length)return;!function(t){var n;const a=null===(n=e.current)||void 0===n?void 0:n.getLayer(),r=null==a?void 0:a.children.find((e=>"line-guides"===e.name()));t.forEach((e=>{if("H"===e.orientation){var t=new konva_1.default.Line({points:[-6e3,e.lineGuide,6e3,e.lineGuide],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]});null==r||r.add(t),a.batchDraw()}else"V"===e.orientation&&(t=new konva_1.default.Line({points:[e.lineGuide,-6e3,e.lineGuide,6e3],stroke:"rgb(0, 161, 255)",strokeWidth:1,name:"guid-line",dash:[4,6]}),null==r||r.add(t))}))}(r);const i=n.target.getAbsolutePosition(),o=Object.assign({},i);r.forEach((e=>{switch(e.snap){case"start":case"center":case"end":switch(e.orientation){case"V":o.x=e.lineGuide+e.offset;break;case"H":o.y=e.lineGuide+e.offset}}}));const s=o.x-i.x,d=o.y-i.y;if(!(n.evt.ctrlKey||n.evt.metaKey)){const e=n.target.getAbsolutePosition();n.target.absolutePosition({x:e.x+s,y:e.y+d})}},i=e=>{if(!e.target)return;const t=e.target.getLayer();t.children.find((e=>"line-guides"===e.name())).destroyChildren(),t.batchDraw()};react_1.default.useEffect((()=>{e.current&&(e.current.on("dragmove",r),e.current.on("dragend",i))}),n)}exports.useSnap=useSnap,exports.useAnchorSnap=useAnchorSnap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polotno",
-  "version": "2.9.15",
+  "version": "2.10.0",
   "description": "Design Editor Framework",
   "author": "Anton Lavrenov",
   "keywords": [