@sunspots/core 0.0.4 → 0.0.5

package/dist/index.d.mts

@@ -28,6 +28,17 @@ declare class ReferenceLine {
     constructor(placement: Placement, position: number);
 }
 
+declare enum ResizeDirection {
+    Top = 0,
+    Right = 1,
+    Bottom = 2,
+    Left = 3,
+    TopRight = 4,
+    BottomRight = 5,
+    BottomLeft = 6,
+    TopLeft = 7
+}
+
 interface StageConfig {
     readonly sceneCanvas: HTMLCanvasElement;
     readonly draggableCanvas: HTMLCanvasElement;
@@ -101,12 +112,18 @@ interface ShapeConfig {
     stroke?: string;
     strokeWidth?: number;
 }
+interface ResizableConfig {
+    /** 横纵比，输入即代表缩放需要保持横纵比 */
+    aspectRatio?: number;
+    /** 指定哪些方向允许 resize */
+    directions?: ResizeDirection[];
+}
 declare abstract class Shape<T extends ShapeConfig = ShapeConfig> implements ShapeConfig, Vector2 {
     protected config: T;
     abstract type: string;
     index: number;
     key: string;
-    resizable: boolean;
+    resizable: boolean | ResizableConfig;
     stage: Stage;
     private events;
     get x(): number;
@@ -144,6 +161,11 @@ declare abstract class Shape<T extends ShapeConfig = ShapeConfig> implements Sha
         strokeWidth: number;
     } & Record<string, unknown>;
 }
+declare function isLockAspectRatioResize(shape: Shape): shape is Shape & {
+    resizable: {
+        aspectRatio: number;
+    };
+};
 
 type PointerEventName = 'pointerdown' | 'pointermove' | 'pointerup' | 'pointercancel';
 type StageEventName = PointerEventName | 'add' | 'remove';
@@ -175,17 +197,6 @@ interface PointerEvent {
     offsetY: number;
 }
 
-declare enum ResizeDirection {
-    Top = 0,
-    Right = 1,
-    Bottom = 2,
-    Left = 3,
-    TopRight = 4,
-    BottomRight = 5,
-    BottomLeft = 6,
-    TopLeft = 7
-}
-
 declare function withDpr(value: number): number;
 declare function withPixel(value: number): string;
 declare function withHash(value: string): string;
@@ -193,4 +204,4 @@ declare function randomColor(): string;
 declare function rgbToHex(r: number, g: number, b: number): string;
 declare function rgba<R extends number, G extends number, B extends number, A extends number>(r: R, g: G, b: B, a?: A): `rgba(${R},${G},${B},${A})`;
 
-export { type Box, Color, Placement, type PointerEvent, type PointerEventName, ReferenceLine, ResizeDirection, Shape, type ShapeConfig, type ShapeEvent, Stage, type StageConfig, type StageEvent, type StageEventName, type Vector2, randomColor, rgbToHex, rgba, withDpr, withHash, withPixel };
+export { type Box, Color, Placement, type PointerEvent, type PointerEventName, ReferenceLine, type ResizableConfig, ResizeDirection, Shape, type ShapeConfig, type ShapeEvent, Stage, type StageConfig, type StageEvent, type StageEventName, type Vector2, isLockAspectRatioResize, randomColor, rgbToHex, rgba, withDpr, withHash, withPixel };

package/dist/index.mjs

@@ -1 +1 @@
-var q=Object.defineProperty;var g=(c,t)=>q(c,"name",{value:t,configurable:!0});var X="#",U="px";function k(c){return c*devicePixelRatio}g(k,"withDpr");function T(c){return c+U}g(T,"withPixel");function Y(c){return X+c}g(Y,"withHash");function z(){let c=(Math.random()*16777215<<0).toString(16);for(;c.length<6;)c=0+c;return X+c}g(z,"randomColor");function I(c,t,e){return((1<<24)+(c<<16)+(t<<8)+e).toString(16).slice(1)}g(I,"rgbToHex");function D(c,t,e,a=1){return`rgba(${c},${t},${e},${a})`}g(D,"rgba");var A={Transparent:D(0,0,0,0),Black:"#000000",White:"#ffffff"};var N=(e=>(e[e.Horizontal=0]="Horizontal",e[e.Vertical=1]="Vertical",e))(N||{}),W=class W{constructor(t,e){this.placement=t;this.position=e}};g(W,"ReferenceLine");var n=W;var J=(r=>(r[r.Top=0]="Top",r[r.Right=1]="Right",r[r.Bottom=2]="Bottom",r[r.Left=3]="Left",r[r.TopRight=4]="TopRight",r[r.BottomRight=5]="BottomRight",r[r.BottomLeft=6]="BottomLeft",r[r.TopLeft=7]="TopLeft",r))(J||{});import{Subject as K,filter as Q}from"rxjs";var E=new Map;var O=class O{constructor(t){this.config=t;this.index=0;this.resizable=!0;this.events=new K;this.strokeWidth=0;for(;;){let e=z();if(e&&!E.has(e)){this.key=e,E.set(e,this);break}}Object.assign(this,t)}get x(){var t;return(t=this.config.x)!=null?t:0}set x(t){this.config.x=t}get y(){var t;return(t=this.config.y)!=null?t:0}set y(t){this.config.y=t}get width(){var t;return(t=this.config.width)!=null?t:0}set width(t){this.config.width=t}get height(){var t;return(t=this.config.height)!=null?t:0}set height(t){this.config.height=t}coord(){return{x:this.x,y:this.y}}emit(t){this.events.next(t)}on(t){return this.events.pipe(Q(e=>e.type===t))}destroy(){this.events.complete()}setAttrs(t){Object.assign(this,t)}toObject(t={}){return Object.assign({type:this.type,index:this.index,x:this.x,y:this.y,width:this.width,height:this.height,fill:this.fill,stroke:this.stroke,strokeWidth:this.strokeWidth},t)}};g(O,"Shape");var R=O;import{Subject as F,animationFrames as Z,filter as H,takeUntil as L}from"rxjs";var $=class $ extends R{constructor(e){super({fill:"#ffffff",stroke:"#3b82f6",strokeWidth:2});this.direction=e;this.type="anchor";this.radius=5}getRadius(){return this.radius/this.stage.scale}render(e){let{x:a,y:d,stroke:b,strokeWidth:u}=this;e.beginPath(),e.arc(a,d,this.getRadius(),0,Math.PI*2,!1),e.fill(),b&&(e.lineWidth=(u!=null?u:1)/this.stage.scale,e.stroke()),e.closePath()}innerBox(){return{x:this.x-this.getRadius(),y:this.y-this.getRadius(),width:this.getRadius()*2,height:this.getRadius()*2}}boundingBox(){var b;let e=this.innerBox(),a=(b=this.strokeWidth)!=null?b:0,d=a/2;return e.x-=d,e.y-=d,e.width+=a,e.height+=a,e}setWidth(e){this.width=e,this.radius=e/2}setHeight(e){this.height=e,this.radius=e/2}get x(){let e=this.target.boundingBox();switch(this.direction){case 0:case 2:return e.x+e.width/2;case 4:case 1:case 5:return e.x+e.width;case 7:case 6:case 3:return e.x}}set x(e){}get y(){let e=this.target.boundingBox();switch(this.direction){case 7:case 0:case 4:return e.y;case 1:case 3:return e.y+e.height/2;case 5:case 2:case 6:return e.y+e.height}}set y(e){}setTarget(e){this.target=e}};g($,"Anchor");var l=$;var j=class j{constructor(t){this.config=t;this.anchors=[new l(7),new l(0),new l(4),new l(1),new l(5),new l(2),new l(6),new l(3)];this.shapes=[];this.activatedShape=null;this.scale=1;this.events=new F;this.destroyed$=new F;let{sceneCanvas:e,shadowCanvas:a,draggableCanvas:d,draftCanvas:b,canvasEvents:u,clientEvents:y}=t;this.context=e.getContext("2d"),this.shadowContext=a.getContext("2d",{willReadFrequently:!0}),this.draggableContext=d.getContext("2d"),this.draftContext=b.getContext("2d");for(let h of this.anchors)h.stage=this;this.resize();let r,p,s,f,M=!1;u.pipe(H(h=>h.type==="pointerdown"),L(this.destroyed$)).subscribe(h=>{if(h.button!==void 0&&h.button!==0)return;M=!0,r=h.offsetX,p=h.offsetY;let P=k(h.offsetX),V=k(h.offsetY),m=this.getColor(P,V),o=E.get(m);if(!o){this.emit({type:"pointerdown"}),this.setActivatedShape(null);return}if(this.activatedShape=o,o.emit({type:"pointerdown"}),o instanceof l){s=o.target.innerBox(),f=o.target.coord(),this.drawScene();return}this.setActivatedShape(o),this.emit({type:"pointerdown",target:o}),s=o.innerBox(),f=o.coord(),this.drawDraggable(),this.drawScene()}),y.pipe(H(h=>h.type==="pointermove"),H(()=>M),L(this.destroyed$)).subscribe(h=>{let P=h.offsetX,V=h.offsetY,m=(P-r)/this.scale,o=(V-p)/this.scale;if(this.activatedShape instanceof l){let B=this.activatedShape,w=B.target,v=f.x,S=f.y,x=s.width,i=s.height;switch(B.direction){case 7:S=f.y+o,i=s.height-o,v=f.x+m,x=s.width-m;break;case 0:S=f.y+o,i=s.height-o;break;case 4:S=f.y+o,i=s.height-o,x=s.width+m;break;case 1:x=s.width+m;break;case 5:x=s.width+m,i=s.height+o;break;case 2:i=s.height+o;break;case 6:i=s.height+o,v=f.x+m,x=s.width-m;break;case 3:v=f.x+m,x=s.width-m;break}v=Math.round(v),S=Math.round(S),x=Math.round(x),i=Math.round(i),w.x=Math.min(f.x+s.width,v),w.y=Math.min(f.y+s.height,S),w.setWidth?w.setWidth(Math.max(1,x)):w.width=Math.max(1,x),w.setHeight?w.setHeight(Math.max(1,i)):w.height=Math.max(1,i)}else if(this.activatedShape){let B=Math.round(f.x+m),w=Math.round(f.y+o),v=1/0,S=1/0,x=[new n(0,0),new n(1,0),new n(0,this.config.height/2),new n(1,this.config.width/2),new n(0,this.config.height/2-this.activatedShape.height/2),new n(1,this.config.width/2-this.activatedShape.width/2),new n(0,this.config.height-this.activatedShape.height),new n(1,this.config.width-this.activatedShape.width)];for(let i of this.shapes)i!==this.activatedShape&&x.push(new n(0,i.y-this.activatedShape.height),i.height>this.activatedShape.height?new n(0,i.y-this.activatedShape.height/2):new n(0,i.y-this.activatedShape.height+i.height/2),new n(0,i.y),i.height>this.activatedShape.height?new n(0,i.y+i.height-this.activatedShape.height/2):new n(0,i.y-this.activatedShape.height+i.height),new n(0,i.y/2),new n(0,i.y+i.height),new n(1,i.x-this.activatedShape.width),i.width>this.activatedShape.width?new n(1,i.x-this.activatedShape.width/2):new n(1,i.x-this.activatedShape.width+i.width/2),new n(1,i.x),i.width>this.activatedShape.width?new n(1,i.x+i.width-this.activatedShape.width/2):new n(1,i.x-this.activatedShape.width+i.width),new n(1,i.x/2),new n(1,i.x+i.width));for(let i of x)switch(i.placement){case 0:{let C=Math.abs(i.position-w);C<=4&&C<S&&(w=i.position,S=C);break}case 1:{let C=Math.abs(i.position-B);C<=4&&C<v&&(B=i.position,v=C);break}}this.activatedShape.x=B,this.activatedShape.y=w}}),y.pipe(H(h=>h.type==="pointerup"||h.type==="pointercancel"),L(this.destroyed$)).subscribe(()=>{this.render(),M=!1}),Z().pipe(H(()=>M&&!!this.activatedShape),L(this.destroyed$)).subscribe(()=>{this.drawDraggable()})}resize(t){Object.assign(this.config,t);let{sceneCanvas:e,shadowCanvas:a,draggableCanvas:d,draftCanvas:b,width:u,height:y,dpr:r}=this.config;for(let p of[e,a,d,b]){let s=p.getContext("2d");p.style.width=T(u),p.style.height=T(y),p.width=k(u),p.height=k(y),s.scale(r,r)}}zoom(t){let{sceneCanvas:e,shadowCanvas:a,draggableCanvas:d,draftCanvas:b,dpr:u,width:y,height:r}=this.config;for(let p of[e,a,d,b]){let s=p.getContext("2d");p.style.width=T(y*t),p.style.height=T(r*t),p.width=k(y*t),p.height=k(r*t),s.scale(u*t,u*t)}this.scale=t}add(...t){for(let e of t)e.index=this.shapes.length,e.stage=this,this.shapes.push(e),this.draw(e),this.emit({type:"add",target:e})}remove(...t){let e=this.getActivatedShape();for(let a of t){this.shapes.splice(this.shapes.indexOf(a),1);for(let d of this.shapes)d.index>a.index&&d.index--;e===a&&this.setActivatedShape(null),this.emit({type:"remove",target:a})}for(let a=0;a<this.shapes.length;a++){let d=this.shapes[a];d.index=a}}setActivatedShape(t){if(!t){this.activatedShape=null;return}for(let e of this.shapes)e.index>t.index&&e.index--;t.index=this.shapes.length;for(let e of this.anchors)e.target=t;this.activatedShape=t}getActivatedShape(){return this.activatedShape instanceof l?this.activatedShape.target:this.activatedShape}render(){this.activatedShape?this.drawDraggable():this.clear(this.draggableContext),this.drawScene()}isActivatedShape(t){let e=this.getActivatedShape();return t===e}drawScene(){this.clear(this.context),this.clear(this.shadowContext);for(let e of this.shapes.slice().sort((a,d)=>a.index-d.index))this.draw(e);let t=this.getActivatedShape();if(t&&t.resizable)for(let e of this.anchors)this.drawShadow(e)}draw(t){var e;this.drawShadow(t),!this.isActivatedShape(t)&&(this.context.save(),this.context.fillStyle=(e=t.fill)!=null?e:A.Transparent,t.stroke&&(this.context.lineWidth=t.strokeWidth,this.context.strokeStyle=t.stroke),this.context.beginPath(),t.render(this.context),this.context.stroke(),this.context.restore())}drawDraggable(){var e;let t=this.getActivatedShape();t&&(this.clear(this.draggableContext),this.draggableContext.save(),this.draggableContext.fillStyle=(e=t.fill)!=null?e:A.Transparent,t.stroke&&(this.draggableContext.lineWidth=t.strokeWidth,this.draggableContext.strokeStyle=t.stroke),this.draggableContext.beginPath(),t.render(this.draggableContext),this.draggableContext.stroke(),this.draggableContext.restore(),this.drawTransformer(t))}drawTransformer(t){let e=t.boundingBox();if(this.draggableContext.fillStyle="#ffffff",this.draggableContext.strokeStyle="#3b82f6",this.draggableContext.lineWidth=2/this.scale,this.draggableContext.strokeRect(e.x,e.y,e.width,e.height),!!t.resizable)for(let a of this.anchors)a.render(this.draggableContext)}drawShadow(t){this.shadowContext.save(),this.shadowContext.fillStyle=t.fill?t.key:A.Transparent,this.shadowContext.strokeStyle=t.key,t.stroke&&(this.shadowContext.lineWidth=t.strokeWidth),this.shadowContext.beginPath(),t.renderShadow?t.renderShadow(this.shadowContext):t.render(this.shadowContext),this.shadowContext.stroke(),this.shadowContext.restore()}getColor(t,e){let{data:a}=this.shadowContext.getImageData(t,e,1,1);return Y(I(a[0],a[1],a[2]))}clear(t){t.clearRect(0,0,this.config.width,this.config.height)}emit(t){this.events.next(t)}on(t){return this.events.pipe(H(e=>e.type===t))}destroy(){this.destroyed$.next(),this.destroyed$.complete(),this.events.complete();for(let t of this.shapes)t.destroy()}toObject(){return{width:this.config.width,height:this.config.height,children:this.shapes.map(t=>t.toObject())}}toBlob(t=1){return this.setActivatedShape(null),this.render(),new Promise(e=>{this.config.sceneCanvas.toBlob(a=>e(a),"image/webp",t)})}};g(j,"Stage");var G=j;export{A as Color,N as Placement,n as ReferenceLine,J as ResizeDirection,R as Shape,G as Stage,z as randomColor,I as rgbToHex,D as rgba,k as withDpr,Y as withHash,T as withPixel};
+var U=Object.defineProperty;var f=(c,t)=>U(c,"name",{value:t,configurable:!0});var X="#",J="px";function k(c){return c*devicePixelRatio}f(k,"withDpr");function H(c){return c+J}f(H,"withPixel");function Y(c){return X+c}f(Y,"withHash");function D(){let c=(Math.random()*16777215<<0).toString(16);for(;c.length<6;)c=0+c;return X+c}f(D,"randomColor");function I(c,t,e){return((1<<24)+(c<<16)+(t<<8)+e).toString(16).slice(1)}f(I,"rgbToHex");function N(c,t,e,a=1){return`rgba(${c},${t},${e},${a})`}f(N,"rgba");var E={Transparent:N(0,0,0,0),Black:"#000000",White:"#ffffff"};var F=(e=>(e[e.Horizontal=0]="Horizontal",e[e.Vertical=1]="Vertical",e))(F||{}),W=class W{constructor(t,e){this.placement=t;this.position=e}};f(W,"ReferenceLine");var r=W;var K=(n=>(n[n.Top=0]="Top",n[n.Right=1]="Right",n[n.Bottom=2]="Bottom",n[n.Left=3]="Left",n[n.TopRight=4]="TopRight",n[n.BottomRight=5]="BottomRight",n[n.BottomLeft=6]="BottomLeft",n[n.TopLeft=7]="TopLeft",n))(K||{});import{Subject as Q,filter as Z}from"rxjs";var T=new Map;var O=class O{constructor(t){this.config=t;this.index=0;this.resizable=!0;this.events=new Q;this.strokeWidth=0;for(;;){let e=D();if(e&&!T.has(e)){this.key=e,T.set(e,this);break}}Object.assign(this,t)}get x(){var t;return(t=this.config.x)!=null?t:0}set x(t){this.config.x=t}get y(){var t;return(t=this.config.y)!=null?t:0}set y(t){this.config.y=t}get width(){var t;return(t=this.config.width)!=null?t:0}set width(t){this.config.width=t}get height(){var t;return(t=this.config.height)!=null?t:0}set height(t){this.config.height=t}coord(){return{x:this.x,y:this.y}}emit(t){this.events.next(t)}on(t){return this.events.pipe(Z(e=>e.type===t))}destroy(){this.events.complete()}setAttrs(t){Object.assign(this,t)}toObject(t={}){return Object.assign({type:this.type,index:this.index,x:this.x,y:this.y,width:this.width,height:this.height,fill:this.fill,stroke:this.stroke,strokeWidth:this.strokeWidth},t)}};f(O,"Shape");var L=O;function z(c){return typeof c.resizable=="object"&&!!c.resizable.aspectRatio}f(z,"isLockAspectRatioResize");import{animationFrames as _,filter as R,Subject as G,takeUntil as M}from"rxjs";var j=class j extends L{constructor(e){super({fill:"#ffffff",stroke:"#3b82f6",strokeWidth:2});this.direction=e;this.type="anchor";this.radius=5}getRadius(){return this.radius/this.stage.scale}render(e){let{x:a,y:h,stroke:w,strokeWidth:u}=this;e.beginPath(),e.arc(a,h,this.getRadius(),0,Math.PI*2,!1),e.fill(),w&&(e.lineWidth=(u!=null?u:1)/this.stage.scale,e.stroke()),e.closePath()}innerBox(){return{x:this.x-this.getRadius(),y:this.y-this.getRadius(),width:this.getRadius()*2,height:this.getRadius()*2}}boundingBox(){var w;let e=this.innerBox(),a=(w=this.strokeWidth)!=null?w:0,h=a/2;return e.x-=h,e.y-=h,e.width+=a,e.height+=a,e}setWidth(e){this.width=e,this.radius=e/2}setHeight(e){this.height=e,this.radius=e/2}get x(){let e=this.target.boundingBox();switch(this.direction){case 0:case 2:return e.x+e.width/2;case 4:case 1:case 5:return e.x+e.width;case 7:case 6:case 3:return e.x}}set x(e){}get y(){let e=this.target.boundingBox();switch(this.direction){case 7:case 0:case 4:return e.y;case 1:case 3:return e.y+e.height/2;case 5:case 2:case 6:return e.y+e.height}}set y(e){}setTarget(e){this.target=e}};f(j,"Anchor");var b=j;var $=class ${constructor(t){this.config=t;this.anchors=[new b(7),new b(0),new b(4),new b(1),new b(5),new b(2),new b(6),new b(3)];this.shapes=[];this.activatedShape=null;this.scale=1;this.events=new G;this.destroyed$=new G;let{sceneCanvas:e,shadowCanvas:a,draggableCanvas:h,draftCanvas:w,canvasEvents:u,clientEvents:y}=t;this.context=e.getContext("2d"),this.shadowContext=a.getContext("2d",{willReadFrequently:!0}),this.draggableContext=h.getContext("2d"),this.draftContext=w.getContext("2d");for(let g of this.anchors)g.stage=this;this.resize();let n,l,s,x,A=!1;u.pipe(R(g=>g.type==="pointerdown"),M(this.destroyed$)).subscribe(g=>{if(g.button!==void 0&&g.button!==0)return;A=!0,n=g.offsetX,l=g.offsetY;let P=k(g.offsetX),V=k(g.offsetY),m=this.getColor(P,V),o=T.get(m);if(!o){this.emit({type:"pointerdown"}),this.setActivatedShape(null);return}if(this.activatedShape=o,o.emit({type:"pointerdown"}),o instanceof b){s=o.target.innerBox(),x=o.target.coord(),this.drawScene();return}this.setActivatedShape(o),this.emit({type:"pointerdown",target:o}),s=o.innerBox(),x=o.coord(),this.drawDraggable(),this.drawScene()}),y.pipe(R(g=>g.type==="pointermove"),R(()=>A),M(this.destroyed$)).subscribe(g=>{let P=g.offsetX,V=g.offsetY,m=(P-n)/this.scale,o=(V-l)/this.scale;if(this.activatedShape instanceof b){let B=this.activatedShape,d=B.target,v=x.x,S=x.y,p=s.width,i=s.height;switch(B.direction){case 7:v=x.x+m,S=x.y+o,i=s.height-o,p=s.width-m;break;case 0:S=x.y+o,i=s.height-o,z(d)&&(p=i*d.resizable.aspectRatio);break;case 4:S=x.y+o,i=s.height-o,p=s.width+m;break;case 1:p=s.width+m,z(d)&&(i=p/d.resizable.aspectRatio);break;case 5:p=s.width+m,i=s.height+o;break;case 2:i=s.height+o,z(d)&&(p=i*d.resizable.aspectRatio);break;case 6:i=s.height+o,v=x.x+m,p=s.width-m;break;case 3:v=x.x+m,p=s.width-m,z(d)&&(i=p/d.resizable.aspectRatio);break}v=Math.round(v),S=Math.round(S),p=Math.round(p),i=Math.round(i),d.x=Math.min(x.x+s.width,v),d.y=Math.min(x.y+s.height,S),d.setWidth?d.setWidth(Math.max(1,p)):d.width=Math.max(1,p),d.setHeight?d.setHeight(Math.max(1,i)):d.height=Math.max(1,i)}else if(this.activatedShape){let B=Math.round(x.x+m),d=Math.round(x.y+o),v=1/0,S=1/0,p=[new r(0,0),new r(1,0),new r(0,this.config.height/2),new r(1,this.config.width/2),new r(0,this.config.height/2-this.activatedShape.height/2),new r(1,this.config.width/2-this.activatedShape.width/2),new r(0,this.config.height-this.activatedShape.height),new r(1,this.config.width-this.activatedShape.width)];for(let i of this.shapes)i!==this.activatedShape&&p.push(new r(0,i.y-this.activatedShape.height),i.height>this.activatedShape.height?new r(0,i.y-this.activatedShape.height/2):new r(0,i.y-this.activatedShape.height+i.height/2),new r(0,i.y),i.height>this.activatedShape.height?new r(0,i.y+i.height-this.activatedShape.height/2):new r(0,i.y-this.activatedShape.height+i.height),new r(0,i.y/2),new r(0,i.y+i.height),new r(1,i.x-this.activatedShape.width),i.width>this.activatedShape.width?new r(1,i.x-this.activatedShape.width/2):new r(1,i.x-this.activatedShape.width+i.width/2),new r(1,i.x),i.width>this.activatedShape.width?new r(1,i.x+i.width-this.activatedShape.width/2):new r(1,i.x-this.activatedShape.width+i.width),new r(1,i.x/2),new r(1,i.x+i.width));for(let i of p)switch(i.placement){case 0:{let C=Math.abs(i.position-d);C<=4&&C<S&&(d=i.position,S=C);break}case 1:{let C=Math.abs(i.position-B);C<=4&&C<v&&(B=i.position,v=C);break}}this.activatedShape.x=B,this.activatedShape.y=d}}),y.pipe(R(g=>g.type==="pointerup"||g.type==="pointercancel"),M(this.destroyed$)).subscribe(()=>{this.render(),A=!1}),_().pipe(R(()=>A&&!!this.activatedShape),M(this.destroyed$)).subscribe(()=>{this.drawDraggable()})}resize(t){Object.assign(this.config,t);let{sceneCanvas:e,shadowCanvas:a,draggableCanvas:h,draftCanvas:w,width:u,height:y,dpr:n}=this.config;for(let l of[e,a,h,w]){let s=l.getContext("2d");l.style.width=H(u),l.style.height=H(y),l.width=k(u),l.height=k(y),s.scale(n,n)}}zoom(t){let{sceneCanvas:e,shadowCanvas:a,draggableCanvas:h,draftCanvas:w,dpr:u,width:y,height:n}=this.config;for(let l of[e,a,h,w]){let s=l.getContext("2d");l.style.width=H(y*t),l.style.height=H(n*t),l.width=k(y*t),l.height=k(n*t),s.scale(u*t,u*t)}this.scale=t}add(...t){for(let e of t)e.index=this.shapes.length,e.stage=this,this.shapes.push(e),this.draw(e),this.emit({type:"add",target:e})}remove(...t){let e=this.getActivatedShape();for(let a of t){this.shapes.splice(this.shapes.indexOf(a),1);for(let h of this.shapes)h.index>a.index&&h.index--;e===a&&this.setActivatedShape(null),this.emit({type:"remove",target:a})}for(let a=0;a<this.shapes.length;a++){let h=this.shapes[a];h.index=a}}setActivatedShape(t){if(!t){this.activatedShape=null;return}for(let e of this.shapes)e.index>t.index&&e.index--;t.index=this.shapes.length;for(let e of this.anchors)e.target=t;this.activatedShape=t}getActivatedShape(){return this.activatedShape instanceof b?this.activatedShape.target:this.activatedShape}render(){this.activatedShape?this.drawDraggable():this.clear(this.draggableContext),this.drawScene()}isActivatedShape(t){let e=this.getActivatedShape();return t===e}drawScene(){this.clear(this.context),this.clear(this.shadowContext);for(let e of this.shapes.slice().sort((a,h)=>a.index-h.index))this.draw(e);let t=this.getActivatedShape();if(t&&t.resizable)for(let e of this.anchors)this.drawShadow(e)}draw(t){var e;this.drawShadow(t),!this.isActivatedShape(t)&&(this.context.save(),this.context.fillStyle=(e=t.fill)!=null?e:E.Transparent,t.stroke&&(this.context.lineWidth=t.strokeWidth,this.context.strokeStyle=t.stroke),this.context.beginPath(),t.render(this.context),this.context.stroke(),this.context.restore())}drawDraggable(){var e;let t=this.getActivatedShape();t&&(this.clear(this.draggableContext),this.draggableContext.save(),this.draggableContext.fillStyle=(e=t.fill)!=null?e:E.Transparent,t.stroke&&(this.draggableContext.lineWidth=t.strokeWidth,this.draggableContext.strokeStyle=t.stroke),this.draggableContext.beginPath(),t.render(this.draggableContext),this.draggableContext.stroke(),this.draggableContext.restore(),this.drawTransformer(t))}drawTransformer(t){let e=t.boundingBox();if(this.draggableContext.fillStyle="#ffffff",this.draggableContext.strokeStyle="#3b82f6",this.draggableContext.lineWidth=2/this.scale,this.draggableContext.strokeRect(e.x,e.y,e.width,e.height),!t.resizable)return;let a=[];typeof t.resizable=="object"&&(t.resizable.aspectRatio?a=[0,1,2,3]:t.resizable.directions&&(a=t.resizable.directions));for(let h of this.anchors)a.length&&!a.includes(h.direction)||h.render(this.draggableContext)}drawShadow(t){this.shadowContext.save(),this.shadowContext.fillStyle=t.fill?t.key:E.Transparent,this.shadowContext.strokeStyle=t.key,t.stroke&&(this.shadowContext.lineWidth=t.strokeWidth),this.shadowContext.beginPath(),t.renderShadow?t.renderShadow(this.shadowContext):t.render(this.shadowContext),this.shadowContext.stroke(),this.shadowContext.restore()}getColor(t,e){let{data:a}=this.shadowContext.getImageData(t,e,1,1);return Y(I(a[0],a[1],a[2]))}clear(t){t.clearRect(0,0,this.config.width,this.config.height)}emit(t){this.events.next(t)}on(t){return this.events.pipe(R(e=>e.type===t))}destroy(){this.destroyed$.next(),this.destroyed$.complete(),this.events.complete();for(let t of this.shapes)t.destroy()}toObject(){return{width:this.config.width,height:this.config.height,children:this.shapes.map(t=>t.toObject())}}toBlob(t=1){return this.setActivatedShape(null),this.render(),new Promise(e=>{this.config.sceneCanvas.toBlob(a=>e(a),"image/webp",t)})}};f($,"Stage");var q=$;export{E as Color,F as Placement,r as ReferenceLine,K as ResizeDirection,L as Shape,q as Stage,z as isLockAspectRatioResize,D as randomColor,I as rgbToHex,N as rgba,k as withDpr,Y as withHash,H as withPixel};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sunspots/core",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -28,5 +28,5 @@
   "peerDependencies": {
     "rxjs": "^7.8.1"
   },
-  "gitHead": "a6c7e07167e3a13d24b2e28806fc56f7845a6542"
+  "gitHead": "62499627598d490e8a97a8df8909f2cfeae05a0b"
 }