@leafer-in/editor 1.0.0-rc.4 → 1.0.0-rc.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/editor.esm.js +4 -1
- package/dist/editor.esm.min.js +1 -1
- package/dist/editor.js +4 -1
- package/dist/editor.min.js +1 -1
- package/package.json +6 -6
- package/src/Editor.ts +3 -2
- package/src/event/EditorResizeEvent.ts +1 -1
- package/src/event/EditorRotateEvent.ts +1 -1
- package/src/tool/RectTool.ts +2 -0
package/dist/editor.esm.js
CHANGED
|
@@ -230,8 +230,10 @@ const RectTool = {
|
|
|
230
230
|
}
|
|
231
231
|
resizeP.rotation = 90;
|
|
232
232
|
resizeP.visible = type === 'mobile';
|
|
233
|
+
rotateP.visible = false;
|
|
233
234
|
}
|
|
234
235
|
else {
|
|
236
|
+
rotateP.visible = type !== 'mobile';
|
|
235
237
|
rectPoints.push(point.x, point.y);
|
|
236
238
|
}
|
|
237
239
|
}
|
|
@@ -368,8 +370,9 @@ class Editor extends Group {
|
|
|
368
370
|
init() {
|
|
369
371
|
let rotatePoint, resizeLine, resizePoint;
|
|
370
372
|
const { resizePoints, rotatePoints, resizeLines } = this;
|
|
373
|
+
const arounds = [{ x: 1, y: 1 }, 'center', { x: 0, y: 1 }, 'center', { x: 0, y: 0 }, 'center', { x: 1, y: 0 }, 'center'];
|
|
371
374
|
for (let i = 0; i < 8; i++) {
|
|
372
|
-
rotatePoint = new Rect({ around:
|
|
375
|
+
rotatePoint = new Rect({ around: arounds[i], width: 15, height: 15, hitFill: "all" });
|
|
373
376
|
rotatePoints.push(rotatePoint);
|
|
374
377
|
this.__listenPointEvents(rotatePoint, 'rotate', i);
|
|
375
378
|
if (i % 2) {
|
package/dist/editor.esm.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{MatrixHelper as t,Bounds as e,Matrix as i,Event as s,Group as o,Rect as r,Polygon as n,DataHelper as a,RotateEvent as h,PointHelper as l,MathHelper as c,DragEvent as g,PointerEvent as y,RenderEvent as d,KeyEvent as
|
|
1
|
+
import{MatrixHelper as t,Bounds as e,Matrix as i,Event as s,Group as o,Rect as r,Polygon as n,DataHelper as a,RotateEvent as h,PointHelper as l,MathHelper as c,DragEvent as g,PointerEvent as y,RenderEvent as d,KeyEvent as _}from"@leafer-ui/core";var u;!function(t){t[t.topLeft=0]="topLeft",t[t.top=1]="top",t[t.topRight=2]="topRight",t[t.right=3]="right",t[t.bottomRight=4]="bottomRight",t[t.bottom=5]="bottom",t[t.bottomLeft=6]="bottomLeft",t[t.left=7]="left"}(u||(u={}));const{scaleOfOuter:x,reset:b}=t,{topLeft:v,top:f,topRight:p,right:z,bottomRight:R,bottom:w,bottomLeft:m,left:E}=u,M={};const{topLeft:P,top:T,topRight:L,right:k,bottomRight:I,bottom:F,bottomLeft:O,left:D}=u;function X(t,e){const i=t.enterPoint;if(!i||!t.target||!t.visible)return;let{rotation:s}=t,{resizeCursor:o,rotateCursor:r,resizeable:n}=t.config;const a=t.tool.getMirrorData(t),{__direction:h,__isResizePoint:l}=i.__;t.enterPoint=i,l&&(e.metaKey||e.ctrlKey||!n)&&(o=r),(a.x||a.y)&&(Y(o=[...o],a.x,a.y),Y(r=[...r],a.y,a.x),a.x+a.y===1&&(s=-s));let c=(h+Math.round(s/45))%8;c<0&&(c+=8),i.cursor=l?o[c]:r[c]}function Y(t,e,i){if(e){const e=t[T],i=t[P],s=t[L];t[T]=t[F],t[P]=t[O],t[L]=t[I],t[F]=e,t[O]=i,t[I]=s}if(i){const e=t[D],i=t[P],s=t[O];t[D]=t[k],t[P]=t[L],t[O]=t[I],t[k]=e,t[L]=i,t[I]=s}}const A={name:"RectTool",getMirrorData(t){const{scaleX:e,scaleY:i}=t.target;return{x:e<0?1:0,y:i<0?1:0}},resize(t){const{target:e,bounds:i,resizeType:s,old:o}=t,{x:r,y:n,width:a,height:h}=i,l={x:r-o.x,y:n-o.y};e.innerToWorld(l,null,!0,e.parent),e.x+=l.x,e.y+=l.y,"scale"===s?(e.scaleX*=a/o.width,e.scaleY*=h/o.height):(a<0?(e.width=-a,e.scaleX*=-1):e.width!==a&&(e.width=a),h<0?(e.height=-h,e.scaleY*=-1):e.height!==h&&(e.height=h))},rotate(t){const{target:e,rotation:i,origin:s}=t;e.rotateOf(s,i)},update(t){const{target:s,config:o,rotatePoints:r,targetRect:n,rect:a,circle:h,resizeLines:l,resizePoints:c}=t,{type:g,resizeable:y,rotateable:d,stroke:_,pointFill:u,pointSize:x,pointRadius:b}=o,v={fill:u,stroke:_,width:x,height:x,cornerRadius:b},f=o.point instanceof Array?o.point:[o.point||v],p=new e(s.boxBounds),z=s.worldTransform,R=t.parent.worldTransform,w=new i(z);w.divide(R);const m=w.e,E=w.f;let{scaleX:M,scaleY:P,rotation:T,skewX:L,skewY:k}=z;M/=R.scaleX,P/=R.scaleY,T-=R.rotation,L-=R.skewX,k-=R.skewY;const{x:I,y:F,width:O,height:D}=p.scale(M,P);t.set({x:m,y:E,rotation:T,skewX:L,skewY:k}),n.set({x:I,y:F,width:p.width/M,height:p.height/P,scaleX:M,scaleY:P,visible:!0});const X=[{x:I,y:F},{x:I+O/2,y:F},{x:I+O,y:F},{x:I+O,y:F+D/2},{x:I+O,y:F+D},{x:I+O/2,y:F+D},{x:I,y:F+D},{x:I,y:F+D/2}],Y=[];let A,C,K,B,S;for(let t=0;t<8;t++)A=X[t],C=f[t%f.length],B=c[t],S=l[Math.floor(t/2)],K=r[t],B.set(C),B.x=K.x=S.x=A.x,B.y=K.y=S.y=A.y,B.visible=S.visible=y||d,K.visible=d&&y,t%2?((t+1)/2%2?(S.width=Math.abs(O),K.width=Math.max(10,Math.abs(O)-30)):(S.height=Math.abs(D),K.height=Math.max(10,Math.abs(D)-30)),B.rotation=90,B.visible="mobile"===g,K.visible=!1):(K.visible="mobile"!==g,Y.push(A.x,A.y));C=o.rotatePoint||C,h.set(C),h.x=I+O/2,C.y||(h.y=F-(10+(B.height+h.height)/2)*(this.getMirrorData(t).y?-1:1)),h.visible=d&&"mobile"===g,a.set(o.rect||{stroke:_}),a.points=Y,a.visible=!0}},{left:C,right:K}=u,B={name:"LineTool",getMirrorData:t=>({x:0,y:0}),resize(t){const{direction:e,dragEvent:i,lockRatio:s,around:o}=t,r=t.target,n={x:0,y:0},{toPoint:a}=r;r.rotation=0;let{x:h,y:l}=i.getInnerMove(r);s&&(Math.abs(h)>Math.abs(l)?l=0:h=0),e===C?(n.x+=h,n.y+=l,o&&(a.x-=h,a.y-=l)):(o&&(n.x-=h,n.y-=l),a.x+=h,a.y+=l),r.getLocalPointByInner(n,null,null,!0),r.getLocalPointByInner(a,null,null,!0),r.x=n.x,r.y=n.y,r.getInnerPointByLocal(a,null,null,!0),r.toPoint=a},rotate(t){A.rotate(t)},update(t){const{rotatePoints:e,circle:i,resizeLines:s,resizePoints:o}=t;A.update(t);for(let t=0;t<8;t++)t<4&&(s[t].visible=!1),o[t].visible=e[t].visible=t===C||t===K;i.visible=!1}};class S extends s{constructor(t,e){super(t),e&&Object.assign(this,e)}}S.RESIZE="editor.resize";class j extends s{constructor(t,e){super(t),e&&Object.assign(this,e)}}j.ROTATE="editor.rotate";class G extends o{get target(){return this._target}set target(t){this.__removeTargetEvents(),this.visible=!!t,this._target=t,t&&this.onTarget()}constructor(t,e){super(e),this.config={type:"pc",stroke:"#836DFF",pointFill:"#FFFFFF",pointSize:10,pointRadius:10,rotateGap:90,hideOnMove:!1,moveCursor:"move",resizeType:"auto",resizeCursor:["nwse-resize","ns-resize","nesw-resize","ew-resize","nwse-resize","ns-resize","nesw-resize","ew-resize"],rotateCursor:["ne-resize","e-resize","se-resize","s-resize","sw-resize","w-resize","nw-resize","n-resize"],resizeable:!0,rotateable:!0},this.resizePoints=[],this.rotatePoints=[],this.resizeLines=[],this.targetRect=new r({hitFill:"all",hitRadius:5}),this.rect=new n({hittable:!1,strokeAlign:"center"}),this.circle=new r({around:"center",hitRadius:10}),this.__eventIds=[],this.__targetEventIds=[],t&&(this.config=a.default(t,this.config)),this.init()}init(){let t,e,i;const{resizePoints:s,rotatePoints:o,resizeLines:n}=this,a=[{x:1,y:1},"center",{x:0,y:1},"center",{x:0,y:0},"center",{x:1,y:0},"center"];for(let h=0;h<8;h++)t=new r({around:a[h],width:15,height:15,hitFill:"all"}),o.push(t),this.__listenPointEvents(t,"rotate",h),h%2&&(e=new r({around:"center",width:10,height:10,hitFill:"all"}),n.push(e),this.__listenPointEvents(e,"resize",h)),i=new r({around:"center",hitRadius:5}),s.push(i),this.__listenPointEvents(i,"resize",h);this.__listenPointEvents(this.circle,"rotate",1),this.addMany(...o,this.targetRect,this.rect,this.circle,...n,...s),this.__listenEvents()}onTarget(){this.tool=this.getTool(this.target),this.waitLeafer((()=>{this.update(),this.updateMoveCursor(),this.__listenTargetEvents()}))}getTool(t){return"Line"===t.tag&&t.resizeable?B:A}update(){this.target&&this.tool.update(this)}onDrag(t){const{resizeable:e,rotateable:i}=this.config;t.metaKey||t.ctrlKey||!e?i&&this.onRotate(t):this.onResize(t)}onMove(t){const{target:e}=this,{x:i,y:s}=t.getLocalMove(e);t.shiftKey?Math.abs(i)>Math.abs(s)?e.x+=i:e.y+=s:(e.x+=i,e.y+=s)}onRotate(t){const{target:e}=this,{rotateGap:i}=this.config,{x:s,y:o,width:r,height:n}=e.boxBounds,a={x:s+r/2,y:o+n/2};let g;if(t instanceof h)g=t.rotation;else{const i=t,s={x:i.x-t.moveX,y:i.y-t.moveY};g=l.getChangeAngle(s,e.getWorldPoint(a),i)}g=c.getGapRotation(e.rotation+g,i)-e.rotation;const y=new j(j.ROTATE,{editor:this,target:e,origin:a,rotation:g});this.tool.rotate(y),e.emitEvent(y)}onResize(t){const{target:e}=this,{__direction:i}=t.current.__;let{resizeType:s,around:o,lockRatio:r}=this.config;t.shiftKey&&(r=!0),t.altKey&&!o&&(o="center"),"auto"===s&&(s=e.resizeable?"size":"scale");const n=function(t,e,i,s,o){o&&(i.x*=2,i.y*=2);let r,n=1,a=1;const{x:h,y:l,width:c,height:g}=t,y=(-i.y+g)/g,d=(i.x+c)/c,_=(i.y+g)/g,u=(-i.x+c)/c;switch(e){case f:a=y,s&&(n=a),r={x:h+c/2,y:l+g};break;case z:n=d,s&&(a=n),r={x:h,y:l+g/2};break;case w:a=_,s&&(n=a),r={x:h+c/2,y:l};break;case E:n=u,s&&(a=n),r={x:h+c,y:l+g/2};break;case v:a=y,n=u,s&&(n=a),r={x:h+c,y:l+g};break;case p:a=y,n=d,s&&(n=a),r={x:h,y:l+g};break;case R:a=_,n=d,s&&(n=a),r={x:h,y:l};break;case m:a=_,n=u,s&&(n=a),r={x:h+c,y:l}}return o&&(r="object"==typeof o?{x:h+c/o.x,y:l+g/o.y}:{x:h+c/2,y:l+g/2}),b(M),x(M,r,n,a),{bounds:{x:t.x+M.e,y:t.y+M.f,width:c*n,height:g*a},old:t,origin:r,scaleX:n,scaleY:a,direction:e,lockRatio:s,around:o}}(e.boxBounds,i,t.getInnerMove(this.targetRect),r,o),a=new S(S.RESIZE,Object.assign(Object.assign({},n),{target:e,editor:this,dragEvent:t,resizeType:s}));this.tool.resize(a),e.emitEvent(a)}updateMoveCursor(){this.targetRect.cursor=this.config.moveCursor}__listenEvents(){this.__eventIds=[this.targetRect.on_(g.START,(()=>{this.opacity=this.config.hideOnMove?0:1})),this.targetRect.on_(g.DRAG,this.onMove,this),this.targetRect.on_(g.END,(()=>{this.opacity=1})),this.targetRect.on_(y.ENTER,this.updateMoveCursor,this)]}__removeListenEvents(){this.targetRect.off_(this.__eventIds),this.__eventIds.length=0}__listenPointEvents(t,e,i){t.__.__direction=i;const s=t.__.__isResizePoint="resize"===e;t.on_(g.DRAG,s?this.onDrag:this.onRotate,this),t.on_(y.LEAVE,(()=>this.enterPoint=null)),t.on_(y.ENTER,(e=>{this.enterPoint=t,X(this,e)}))}__listenTargetEvents(){if(this.target){const{leafer:t}=this.target;this.__targetEventIds=[t.on_(d.START,this.update,this),t.on_([_.HOLD,_.UP],(t=>{X(this,t)}))]}}__removeTargetEvents(){if(this.__targetEventIds.length){const{leafer:t}=this.target;t&&t.off_(this.__targetEventIds),this.__targetEventIds.length=0}}destroy(){this.__removeListenEvents(),this._target=null,super.destroy()}}export{G as Editor,S as EditorResizeEvent,j as EditorRotateEvent,B as LineTool,A as RectTool};
|
package/dist/editor.js
CHANGED
|
@@ -232,8 +232,10 @@ this.LeaferIN.editor = (function (exports, core) {
|
|
|
232
232
|
}
|
|
233
233
|
resizeP.rotation = 90;
|
|
234
234
|
resizeP.visible = type === 'mobile';
|
|
235
|
+
rotateP.visible = false;
|
|
235
236
|
}
|
|
236
237
|
else {
|
|
238
|
+
rotateP.visible = type !== 'mobile';
|
|
237
239
|
rectPoints.push(point.x, point.y);
|
|
238
240
|
}
|
|
239
241
|
}
|
|
@@ -370,8 +372,9 @@ this.LeaferIN.editor = (function (exports, core) {
|
|
|
370
372
|
init() {
|
|
371
373
|
let rotatePoint, resizeLine, resizePoint;
|
|
372
374
|
const { resizePoints, rotatePoints, resizeLines } = this;
|
|
375
|
+
const arounds = [{ x: 1, y: 1 }, 'center', { x: 0, y: 1 }, 'center', { x: 0, y: 0 }, 'center', { x: 1, y: 0 }, 'center'];
|
|
373
376
|
for (let i = 0; i < 8; i++) {
|
|
374
|
-
rotatePoint = new core.Rect({ around:
|
|
377
|
+
rotatePoint = new core.Rect({ around: arounds[i], width: 15, height: 15, hitFill: "all" });
|
|
375
378
|
rotatePoints.push(rotatePoint);
|
|
376
379
|
this.__listenPointEvents(rotatePoint, 'rotate', i);
|
|
377
380
|
if (i % 2) {
|
package/dist/editor.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
this.LeaferIN=this.LeaferIN||{},this.LeaferIN.editor=function(t,e){"use strict";var i;!function(t){t[t.topLeft=0]="topLeft",t[t.top=1]="top",t[t.topRight=2]="topRight",t[t.right=3]="right",t[t.bottomRight=4]="bottomRight",t[t.bottom=5]="bottom",t[t.bottomLeft=6]="bottomLeft",t[t.left=7]="left"}(i||(i={}));const{scaleOfOuter:s,reset:o}=e.MatrixHelper,{topLeft:r,top:n,topRight:a,right:h,bottomRight:l,bottom:c,bottomLeft:g,left:
|
|
1
|
+
this.LeaferIN=this.LeaferIN||{},this.LeaferIN.editor=function(t,e){"use strict";var i;!function(t){t[t.topLeft=0]="topLeft",t[t.top=1]="top",t[t.topRight=2]="topRight",t[t.right=3]="right",t[t.bottomRight=4]="bottomRight",t[t.bottom=5]="bottom",t[t.bottomLeft=6]="bottomLeft",t[t.left=7]="left"}(i||(i={}));const{scaleOfOuter:s,reset:o}=e.MatrixHelper,{topLeft:r,top:n,topRight:a,right:h,bottomRight:l,bottom:c,bottomLeft:g,left:y}=i,d={};const{topLeft:u,top:v,topRight:_,right:x,bottomRight:b,bottom:f,bottomLeft:p,left:R}=i;function E(t,e){const i=t.enterPoint;if(!i||!t.target||!t.visible)return;let{rotation:s}=t,{resizeCursor:o,rotateCursor:r,resizeable:n}=t.config;const a=t.tool.getMirrorData(t),{__direction:h,__isResizePoint:l}=i.__;t.enterPoint=i,l&&(e.metaKey||e.ctrlKey||!n)&&(o=r),(a.x||a.y)&&(z(o=[...o],a.x,a.y),z(r=[...r],a.y,a.x),a.x+a.y===1&&(s=-s));let c=(h+Math.round(s/45))%8;c<0&&(c+=8),i.cursor=l?o[c]:r[c]}function z(t,e,i){if(e){const e=t[v],i=t[u],s=t[_];t[v]=t[f],t[u]=t[p],t[_]=t[b],t[f]=e,t[p]=i,t[b]=s}if(i){const e=t[R],i=t[u],s=t[p];t[R]=t[x],t[u]=t[_],t[p]=t[b],t[x]=e,t[_]=i,t[b]=s}}const w={name:"RectTool",getMirrorData(t){const{scaleX:e,scaleY:i}=t.target;return{x:e<0?1:0,y:i<0?1:0}},resize(t){const{target:e,bounds:i,resizeType:s,old:o}=t,{x:r,y:n,width:a,height:h}=i,l={x:r-o.x,y:n-o.y};e.innerToWorld(l,null,!0,e.parent),e.x+=l.x,e.y+=l.y,"scale"===s?(e.scaleX*=a/o.width,e.scaleY*=h/o.height):(a<0?(e.width=-a,e.scaleX*=-1):e.width!==a&&(e.width=a),h<0?(e.height=-h,e.scaleY*=-1):e.height!==h&&(e.height=h))},rotate(t){const{target:e,rotation:i,origin:s}=t;e.rotateOf(s,i)},update(t){const{target:i,config:s,rotatePoints:o,targetRect:r,rect:n,circle:a,resizeLines:h,resizePoints:l}=t,{type:c,resizeable:g,rotateable:y,stroke:d,pointFill:u,pointSize:v,pointRadius:_}=s,x={fill:u,stroke:d,width:v,height:v,cornerRadius:_},b=s.point instanceof Array?s.point:[s.point||x],f=new e.Bounds(i.boxBounds),p=i.worldTransform,R=t.parent.worldTransform,E=new e.Matrix(p);E.divide(R);const z=E.e,w=E.f;let{scaleX:m,scaleY:P,rotation:M,skewX:T,skewY:L}=p;m/=R.scaleX,P/=R.scaleY,M-=R.rotation,T-=R.skewX,L-=R.skewY;const{x:k,y:I,width:D,height:F}=f.scale(m,P);t.set({x:z,y:w,rotation:M,skewX:T,skewY:L}),r.set({x:k,y:I,width:f.width/m,height:f.height/P,scaleX:m,scaleY:P,visible:!0});const O=[{x:k,y:I},{x:k+D/2,y:I},{x:k+D,y:I},{x:k+D,y:I+F/2},{x:k+D,y:I+F},{x:k+D/2,y:I+F},{x:k,y:I+F},{x:k,y:I+F/2}],X=[];let Y,A,C,K,B;for(let t=0;t<8;t++)Y=O[t],A=b[t%b.length],K=l[t],B=h[Math.floor(t/2)],C=o[t],K.set(A),K.x=C.x=B.x=Y.x,K.y=C.y=B.y=Y.y,K.visible=B.visible=g||y,C.visible=y&&g,t%2?((t+1)/2%2?(B.width=Math.abs(D),C.width=Math.max(10,Math.abs(D)-30)):(B.height=Math.abs(F),C.height=Math.max(10,Math.abs(F)-30)),K.rotation=90,K.visible="mobile"===c,C.visible=!1):(C.visible="mobile"!==c,X.push(Y.x,Y.y));A=s.rotatePoint||A,a.set(A),a.x=k+D/2,A.y||(a.y=I-(10+(K.height+a.height)/2)*(this.getMirrorData(t).y?-1:1)),a.visible=y&&"mobile"===c,n.set(s.rect||{stroke:d}),n.points=X,n.visible=!0}},{left:m,right:P}=i,M={name:"LineTool",getMirrorData:t=>({x:0,y:0}),resize(t){const{direction:e,dragEvent:i,lockRatio:s,around:o}=t,r=t.target,n={x:0,y:0},{toPoint:a}=r;r.rotation=0;let{x:h,y:l}=i.getInnerMove(r);s&&(Math.abs(h)>Math.abs(l)?l=0:h=0),e===m?(n.x+=h,n.y+=l,o&&(a.x-=h,a.y-=l)):(o&&(n.x-=h,n.y-=l),a.x+=h,a.y+=l),r.getLocalPointByInner(n,null,null,!0),r.getLocalPointByInner(a,null,null,!0),r.x=n.x,r.y=n.y,r.getInnerPointByLocal(a,null,null,!0),r.toPoint=a},rotate(t){w.rotate(t)},update(t){const{rotatePoints:e,circle:i,resizeLines:s,resizePoints:o}=t;w.update(t);for(let t=0;t<8;t++)t<4&&(s[t].visible=!1),o[t].visible=e[t].visible=t===m||t===P;i.visible=!1}};class T extends e.Event{constructor(t,e){super(t),e&&Object.assign(this,e)}}T.RESIZE="editor.resize";class L extends e.Event{constructor(t,e){super(t),e&&Object.assign(this,e)}}L.ROTATE="editor.rotate";class k extends e.Group{get target(){return this._target}set target(t){this.__removeTargetEvents(),this.visible=!!t,this._target=t,t&&this.onTarget()}constructor(t,i){super(i),this.config={type:"pc",stroke:"#836DFF",pointFill:"#FFFFFF",pointSize:10,pointRadius:10,rotateGap:90,hideOnMove:!1,moveCursor:"move",resizeType:"auto",resizeCursor:["nwse-resize","ns-resize","nesw-resize","ew-resize","nwse-resize","ns-resize","nesw-resize","ew-resize"],rotateCursor:["ne-resize","e-resize","se-resize","s-resize","sw-resize","w-resize","nw-resize","n-resize"],resizeable:!0,rotateable:!0},this.resizePoints=[],this.rotatePoints=[],this.resizeLines=[],this.targetRect=new e.Rect({hitFill:"all",hitRadius:5}),this.rect=new e.Polygon({hittable:!1,strokeAlign:"center"}),this.circle=new e.Rect({around:"center",hitRadius:10}),this.__eventIds=[],this.__targetEventIds=[],t&&(this.config=e.DataHelper.default(t,this.config)),this.init()}init(){let t,i,s;const{resizePoints:o,rotatePoints:r,resizeLines:n}=this,a=[{x:1,y:1},"center",{x:0,y:1},"center",{x:0,y:0},"center",{x:1,y:0},"center"];for(let h=0;h<8;h++)t=new e.Rect({around:a[h],width:15,height:15,hitFill:"all"}),r.push(t),this.__listenPointEvents(t,"rotate",h),h%2&&(i=new e.Rect({around:"center",width:10,height:10,hitFill:"all"}),n.push(i),this.__listenPointEvents(i,"resize",h)),s=new e.Rect({around:"center",hitRadius:5}),o.push(s),this.__listenPointEvents(s,"resize",h);this.__listenPointEvents(this.circle,"rotate",1),this.addMany(...r,this.targetRect,this.rect,this.circle,...n,...o),this.__listenEvents()}onTarget(){this.tool=this.getTool(this.target),this.waitLeafer((()=>{this.update(),this.updateMoveCursor(),this.__listenTargetEvents()}))}getTool(t){return"Line"===t.tag&&t.resizeable?M:w}update(){this.target&&this.tool.update(this)}onDrag(t){const{resizeable:e,rotateable:i}=this.config;t.metaKey||t.ctrlKey||!e?i&&this.onRotate(t):this.onResize(t)}onMove(t){const{target:e}=this,{x:i,y:s}=t.getLocalMove(e);t.shiftKey?Math.abs(i)>Math.abs(s)?e.x+=i:e.y+=s:(e.x+=i,e.y+=s)}onRotate(t){const{target:i}=this,{rotateGap:s}=this.config,{x:o,y:r,width:n,height:a}=i.boxBounds,h={x:o+n/2,y:r+a/2};let l;if(t instanceof e.RotateEvent)l=t.rotation;else{const s=t,o={x:s.x-t.moveX,y:s.y-t.moveY};l=e.PointHelper.getChangeAngle(o,i.getWorldPoint(h),s)}l=e.MathHelper.getGapRotation(i.rotation+l,s)-i.rotation;const c=new L(L.ROTATE,{editor:this,target:i,origin:h,rotation:l});this.tool.rotate(c),i.emitEvent(c)}onResize(t){const{target:e}=this,{__direction:i}=t.current.__;let{resizeType:u,around:v,lockRatio:_}=this.config;t.shiftKey&&(_=!0),t.altKey&&!v&&(v="center"),"auto"===u&&(u=e.resizeable?"size":"scale");const x=function(t,e,i,u,v){v&&(i.x*=2,i.y*=2);let _,x=1,b=1;const{x:f,y:p,width:R,height:E}=t,z=(-i.y+E)/E,w=(i.x+R)/R,m=(i.y+E)/E,P=(-i.x+R)/R;switch(e){case n:b=z,u&&(x=b),_={x:f+R/2,y:p+E};break;case h:x=w,u&&(b=x),_={x:f,y:p+E/2};break;case c:b=m,u&&(x=b),_={x:f+R/2,y:p};break;case y:x=P,u&&(b=x),_={x:f+R,y:p+E/2};break;case r:b=z,x=P,u&&(x=b),_={x:f+R,y:p+E};break;case a:b=z,x=w,u&&(x=b),_={x:f,y:p+E};break;case l:b=m,x=w,u&&(x=b),_={x:f,y:p};break;case g:b=m,x=P,u&&(x=b),_={x:f+R,y:p}}return v&&(_="object"==typeof v?{x:f+R/v.x,y:p+E/v.y}:{x:f+R/2,y:p+E/2}),o(d),s(d,_,x,b),{bounds:{x:t.x+d.e,y:t.y+d.f,width:R*x,height:E*b},old:t,origin:_,scaleX:x,scaleY:b,direction:e,lockRatio:u,around:v}}(e.boxBounds,i,t.getInnerMove(this.targetRect),_,v),b=new T(T.RESIZE,Object.assign(Object.assign({},x),{target:e,editor:this,dragEvent:t,resizeType:u}));this.tool.resize(b),e.emitEvent(b)}updateMoveCursor(){this.targetRect.cursor=this.config.moveCursor}__listenEvents(){this.__eventIds=[this.targetRect.on_(e.DragEvent.START,(()=>{this.opacity=this.config.hideOnMove?0:1})),this.targetRect.on_(e.DragEvent.DRAG,this.onMove,this),this.targetRect.on_(e.DragEvent.END,(()=>{this.opacity=1})),this.targetRect.on_(e.PointerEvent.ENTER,this.updateMoveCursor,this)]}__removeListenEvents(){this.targetRect.off_(this.__eventIds),this.__eventIds.length=0}__listenPointEvents(t,i,s){t.__.__direction=s;const o=t.__.__isResizePoint="resize"===i;t.on_(e.DragEvent.DRAG,o?this.onDrag:this.onRotate,this),t.on_(e.PointerEvent.LEAVE,(()=>this.enterPoint=null)),t.on_(e.PointerEvent.ENTER,(e=>{this.enterPoint=t,E(this,e)}))}__listenTargetEvents(){if(this.target){const{leafer:t}=this.target;this.__targetEventIds=[t.on_(e.RenderEvent.START,this.update,this),t.on_([e.KeyEvent.HOLD,e.KeyEvent.UP],(t=>{E(this,t)}))]}}__removeTargetEvents(){if(this.__targetEventIds.length){const{leafer:t}=this.target;t&&t.off_(this.__targetEventIds),this.__targetEventIds.length=0}}destroy(){this.__removeListenEvents(),this._target=null,super.destroy()}}return t.Editor=k,t.EditorResizeEvent=T,t.EditorRotateEvent=L,t.LineTool=M,t.RectTool=w,t}({},LeaferUI);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leafer-in/editor",
|
|
3
|
-
"version": "1.0.0-rc.
|
|
3
|
+
"version": "1.0.0-rc.6",
|
|
4
4
|
"description": "@leafer-in/editor",
|
|
5
5
|
"author": "Chao (Leafer) Wan",
|
|
6
6
|
"license": "MIT",
|
|
@@ -28,12 +28,12 @@
|
|
|
28
28
|
"leaferjs"
|
|
29
29
|
],
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@leafer-ui/core": "1.0.0-rc.
|
|
32
|
-
"@leafer/core": "1.0.0-rc.
|
|
31
|
+
"@leafer-ui/core": "1.0.0-rc.6",
|
|
32
|
+
"@leafer/core": "1.0.0-rc.6"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
|
-
"@leafer-ui/interface": "1.0.0-rc.
|
|
36
|
-
"@leafer/interface": "1.0.0-rc.
|
|
37
|
-
"@leafer-in/interface": "1.0.0-rc.
|
|
35
|
+
"@leafer-ui/interface": "1.0.0-rc.6",
|
|
36
|
+
"@leafer/interface": "1.0.0-rc.6",
|
|
37
|
+
"@leafer-in/interface": "1.0.0-rc.6"
|
|
38
38
|
}
|
|
39
39
|
}
|
package/src/Editor.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IGroupInputData, IPolygon, IUI, IEventListenerId } from '@leafer-ui/interface'
|
|
1
|
+
import { IGroupInputData, IPolygon, IUI, IEventListenerId, IAround } from '@leafer-ui/interface'
|
|
2
2
|
import { IEditor, IEditorConfig, IEditorTool, IDirection8 } from '@leafer-in/interface'
|
|
3
3
|
|
|
4
4
|
import { Group, Rect, Polygon, DragEvent, PointHelper, PointerEvent, KeyEvent, RotateEvent, DataHelper, MathHelper, RenderEvent } from '@leafer-ui/core'
|
|
@@ -65,9 +65,10 @@ export class Editor extends Group implements IEditor {
|
|
|
65
65
|
protected init() {
|
|
66
66
|
let rotatePoint: IUI, resizeLine: IUI, resizePoint: IUI
|
|
67
67
|
const { resizePoints, rotatePoints, resizeLines } = this
|
|
68
|
+
const arounds: IAround[] = [{ x: 1, y: 1 }, 'center', { x: 0, y: 1 }, 'center', { x: 0, y: 0 }, 'center', { x: 1, y: 0 }, 'center']
|
|
68
69
|
|
|
69
70
|
for (let i = 0; i < 8; i++) {
|
|
70
|
-
rotatePoint = new Rect({ around:
|
|
71
|
+
rotatePoint = new Rect({ around: arounds[i], width: 15, height: 15, hitFill: "all" })
|
|
71
72
|
rotatePoints.push(rotatePoint)
|
|
72
73
|
this.__listenPointEvents(rotatePoint, 'rotate', i)
|
|
73
74
|
|
|
@@ -22,7 +22,7 @@ export class EditorResizeEvent extends Event implements IEditorResizeEvent {
|
|
|
22
22
|
readonly old: IBoundsData
|
|
23
23
|
|
|
24
24
|
// scaleOf(origin, scaleX, scaleY)
|
|
25
|
-
readonly origin: IPointData
|
|
25
|
+
declare readonly origin: IPointData
|
|
26
26
|
readonly scaleX: number
|
|
27
27
|
readonly scaleY: number
|
|
28
28
|
|
|
@@ -12,7 +12,7 @@ export class EditorRotateEvent extends Event implements IEditorRotateEvent {
|
|
|
12
12
|
readonly editor: IEditor
|
|
13
13
|
|
|
14
14
|
// rotateOf(origin, rotation)
|
|
15
|
-
readonly origin: IPointData
|
|
15
|
+
declare readonly origin: IPointData
|
|
16
16
|
readonly rotation: number
|
|
17
17
|
|
|
18
18
|
constructor(type: string, data?: IEditorRotateEvent) {
|
package/src/tool/RectTool.ts
CHANGED
|
@@ -116,8 +116,10 @@ export const RectTool: IEditorTool = {
|
|
|
116
116
|
|
|
117
117
|
resizeP.rotation = 90
|
|
118
118
|
resizeP.visible = type === 'mobile'
|
|
119
|
+
rotateP.visible = false
|
|
119
120
|
|
|
120
121
|
} else {
|
|
122
|
+
rotateP.visible = type !== 'mobile'
|
|
121
123
|
rectPoints.push(point.x, point.y)
|
|
122
124
|
}
|
|
123
125
|
}
|