@chief-editor/editor/lib/components/mask/BrickRectMask.js

FlowEditor Editor

"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var r,t=1,a=arguments.length;t<a;t++)for(var o in r=arguments[t])Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o]);return e}).apply(this,arguments)},__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)Object.hasOwnProperty.call(e,t)&&(r[t]=e[t]);return r.default=e,r};Object.defineProperty(exports,"__esModule",{value:!0});var core_1=require("@chief-editor/core"),vector_1=require("@co-hooks/vector"),use_1=require("@rc-hooks/use"),react_1=__importStar(require("react")),useDraggerMask_1=require("../../hooks/useDraggerMask"),useEditorCls_1=require("../../hooks/useEditorCls"),useTemplate_1=require("../../hooks/useTemplate"),DirectDragMask_1=require("./DirectDragMask"),RotateDragger_1=require("./RotateDragger");function BrickRectMask(e){var r=e.boardId,t=e.data,a=t.id,o=t.rect,s=o.left,i=o.top,c=o.width,n=o.height,g=t.transform,u=t.rotatePoint,l=use_1.useUpdate(),_=useEditorCls_1.useEditorCls("template-brick-mask-item"),d=useTemplate_1.useTemplate(),k=use_1.useRefGetter(d.getBoard(r)),D=d.getBrick(a),p=D.layout,f=p.vertical,h=p.horizontal,m=p.ratio,v=void 0!==m&&m,M=DirectDragMask_1.DirectType.ALL;"dock"===f&&"dock"===h?M=[]:"dock"===f?M=[core_1.Direct.LEFT,core_1.Direct.RIGHT]:"dock"===h?M=[core_1.Direct.TOP,core_1.Direct.BOTTOM]:v&&(M=DirectDragMask_1.DirectType.ANGLE);var E=react_1.useCallback((function(){var e=k();e.isLayerBoard()&&e.directDragStart(a)}),[]),y=react_1.useCallback((function(e){var r=k();r.isLayerBoard()&&r.directDragging(a,e)}),[]),T=react_1.useCallback((function(e){var r=k();r.isLayerBoard()&&r.directDragEnd(a,e)}),[]),w=g.scaleX,b=g.scaleY,x=g.skewX,L=g.skewY,q=g.rotate,B=useDraggerMask_1.useDraggerMask({onDragStart:E,onDragging:y,onDragEnd:T,rotate:q,ratio:v});return react_1.useEffect((function(){return D.addListener("lock-change",l),function(){D.removeListener("lock-change",l)}}),[D]),D.getLock()?react_1.default.createElement("div",{className:_,style:{position:"absolute",left:s+"px",top:i+"px",width:c+"px",height:n+"px",transform:"rotate("+q+"deg) skew("+x+"deg, "+L+"deg) scale("+w+", "+b+")"}},react_1.default.createElement(DirectDragMask_1.DirectDragMask,{onDragStart:E,onDragging:y,onDragEnd:T,skew:x,rotate:q,directType:[],ratio:v})):react_1.default.createElement(react_1.Fragment,null,react_1.default.createElement("div",{className:_,style:{position:"absolute",left:s+"px",top:i+"px",width:c+"px",height:n+"px",transform:"rotate("+q+"deg) skew("+x+"deg, "+L+"deg) scale("+w+", "+b+")"}},react_1.default.createElement(DirectDragMask_1.DirectDragMask,{onDragStart:E,onDragging:y,onDragEnd:T,skew:x,rotate:q,directType:M,ratio:v})),react_1.default.createElement(RotateDragger_1.RotateDragger,__assign({data:{},rotate:q,center:new vector_1.Vector([Math.floor(s+c/2),Math.floor(i+n/2)]),pos:u},B)))}exports.BrickRectMask=BrickRectMask;