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

FlowEditor Editor

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