@chief-editor/editor
Version:
FlowEditor Editor
1 lines • 2.36 kB
JavaScript
var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,o=1,r=arguments.length;o<r;o++)for(var a in t=arguments[o])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,t){var o={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(o[r[a]]=e[r[a]])}return o};import{Vector}from"@co-hooks/vector";import{useRefCallback,useRefGetter,useToggle}from"@rc-hooks/use";import React,{useCallback,useRef}from"react";import{classnames}from"@co-hooks/util";import{useDrag}from"@rc-hooks/drag";import{getRotate}from"@chief-editor/core";import{Rotation}from"@chief-editor/icons";import{useTemplate}from"../../hooks/useTemplate";import{useEditorCls}from"../../hooks/useEditorCls";export function RotateDragger(e){var t,o=e.className,r=e.rotate,a=e.center,s=e.onDragStart,n=e.onDragging,l=e.onDragEnd,i=e.pos,c=__rest(e,["className","rotate","center","onDragStart","onDragging","onDragEnd","pos"]),g=useRef(null),u=useToggle(!1),f=u[0],m=u[1],p=u[2],d=useTemplate(),R=useRefGetter(a),b=useRefCallback(s),h=useRefCallback(n),k=useRefCallback(l),_=useCallback((function(e){m(),b(e)}),[]),D=useCallback((function(e){var t=d.getPosition(),o=t.left,r=t.top;e.data.rotate=getDaltRotate(R(),new Vector([o,r]),e),h(e)}),[]),v=useCallback((function(e){var t=d.getPosition(),o=t.left,r=t.top;e.data.rotate=getDaltRotate(R(),new Vector([o,r]),e),p(),k(e)}),[]),y=classnames(useEditorCls("direct-drag-mask-rotate-dragger"),((t={})[String(o)]=!!o,t)),C=useEditorCls("direct-drag-mask-rotate-dragger-mark");useDrag(g,__assign(__assign({},c),{onDragStart:_,onDragging:D,onDragEnd:v}));var O=i.get(),E=O[0],w=O[1];return React.createElement("div",{className:y,ref:g,style:{position:"absolute",left:E+"px",top:w+"px"}},React.createElement(Rotation,{fill:"#000",twoToneColor:"#fff"}),f&&React.createElement("div",{className:C},r,"°"))}function getDaltRotate(e,t,o){var r=o.startMousePos,a=o.currentMousePos,s=t.get(),n=s[0],l=s[1],i=new Vector([r.clientX-n,r.clientY-l]),c=new Vector([a.clientX-n,a.clientY-l]);return Math.floor(getRotate(e,i,c))}