@chief-editor/editor
Version:
FlowEditor Editor
1 lines • 1.82 kB
JavaScript
import{useCanvasZoom}from"@chief-editor/preset";import React,{useEffect,useState}from"react";import{getKeys}from"@co-hooks/util";import{useUpdate}from"@rc-hooks/use";import{RcPortal}from"@rc-hooks/portal";import{useEditorCls}from"../hooks/useEditorCls";import{useTemplate}from"../hooks/useTemplate";import{useEditor}from"../hooks/useEditor";import{AuxiliaryLine}from"./mask/AuxiliaryLine";import{BrickRectMask}from"./mask/BrickRectMask";import{GroupRect}from"./mask/GroupRect";import{Equidistance}from"./mask/Equidistance";import{RegionRect}from"./mask/RegionRect";export function EditorTemplateMask(){var e=useEditor(),t=useTemplate(),o=t.getMask(),i=useUpdate(),r=useState(e.getZoom()),a=(r[0],r[1],useEditorCls("template-mask")),s=useEditorCls("template-brick-mask"),m=useEditorCls("template-mask-wrapper");useEffect((function(){return o.addListener("repaint",i),function(){o.removeListener("repaint",i)}}),[o]);var c=o.getActiveBrickRectMap(),n=o.getAuxiliaryLine(),l=o.getEquidistance(),p=o.getGroupRectPos(),u=o.getRegionRect(),d=t.getPosition(),R=t.getActiveBoard(),f=(null==R?void 0:R.id)||"",k=!!(null==R?void 0:R.isLayerBoard())&&R.isDragging();return useCanvasZoom(),React.createElement(RcPortal,null,React.createElement("div",{className:a,style:{position:"fixed",top:0,left:0,right:0,bottom:0,pointerEvents:"none",zIndex:50}},React.createElement("div",{className:m,style:{position:"absolute",top:d.top+"px",left:d.left+"px",width:d.width+"px",height:d.height+"px"}},!k&&React.createElement("div",{className:s},getKeys(c).map((function(e){return React.createElement(BrickRectMask,{key:"brick-mask-"+e,boardId:f,data:c[e]})}))),React.createElement(AuxiliaryLine,{auxiliaryLine:n}),!!p&&React.createElement(GroupRect,{info:p}),React.createElement(Equidistance,{data:l})),React.createElement(RegionRect,{data:u})))}