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

FlowEditor Editor

"use strict";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)},__rest=this&&this.__rest||function(e,t){var r={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(r[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(a=Object.getOwnPropertySymbols(e);o<a.length;o++)t.indexOf(a[o])<0&&Object.prototype.propertyIsEnumerable.call(e,a[o])&&(r[a[o]]=e[a[o]])}return r},__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t};Object.defineProperty(exports,"__esModule",{value:!0});var vector_1=require("@co-hooks/vector"),use_1=require("@rc-hooks/use"),react_1=__importStar(require("react")),util_1=require("@co-hooks/util"),drag_1=require("@rc-hooks/drag"),core_1=require("@chief-editor/core"),icons_1=require("@chief-editor/icons"),useTemplate_1=require("../../hooks/useTemplate"),useEditorCls_1=require("../../hooks/useEditorCls");function RotateDragger(e){var t,r=e.className,a=e.rotate,o=e.center,s=e.onDragStart,n=e.onDragging,i=e.onDragEnd,c=e.pos,l=__rest(e,["className","rotate","center","onDragStart","onDragging","onDragEnd","pos"]),u=react_1.useRef(null),_=use_1.useToggle(!1),g=_[0],f=_[1],p=_[2],d=useTemplate_1.useTemplate(),v=use_1.useRefGetter(o),h=use_1.useRefCallback(s),m=use_1.useRefCallback(n),b=use_1.useRefCallback(i),D=react_1.useCallback((function(e){f(),h(e)}),[]),k=react_1.useCallback((function(e){var t=d.getPosition(),r=t.left,a=t.top;e.data.rotate=getDaltRotate(v(),new vector_1.Vector([r,a]),e),m(e)}),[]),y=react_1.useCallback((function(e){var t=d.getPosition(),r=t.left,a=t.top;e.data.rotate=getDaltRotate(v(),new vector_1.Vector([r,a]),e),p(),b(e)}),[]),O=util_1.classnames(useEditorCls_1.useEditorCls("direct-drag-mask-rotate-dragger"),((t={})[String(r)]=!!r,t)),C=useEditorCls_1.useEditorCls("direct-drag-mask-rotate-dragger-mark");drag_1.useDrag(u,__assign(__assign({},l),{onDragStart:D,onDragging:k,onDragEnd:y}));var E=c.get(),R=E[0],w=E[1];return react_1.default.createElement("div",{className:O,ref:u,style:{position:"absolute",left:R+"px",top:w+"px"}},react_1.default.createElement(icons_1.Rotation,{fill:"#000",twoToneColor:"#fff"}),g&&react_1.default.createElement("div",{className:C},a,"°"))}function getDaltRotate(e,t,r){var a=r.startMousePos,o=r.currentMousePos,s=t.get(),n=s[0],i=s[1],c=new vector_1.Vector([a.clientX-n,a.clientY-i]),l=new vector_1.Vector([o.clientX-n,o.clientY-i]);return Math.floor(core_1.getRotate(e,c,l))}exports.RotateDragger=RotateDragger;