@machete-jhun/canvas-studio 0.0.8 → 0.0.9
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/index.js +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -17,6 +17,6 @@ return U("div",{style:{display:"flex",flexDirection:"column",padding:"4px 0",min
|
|
|
17
17
|
/* @__PURE__ */V(L,{ref:h,stroke:"#a0a0a0",strokeWidth:1}),
|
|
18
18
|
/* @__PURE__ */V(L,{ref:f,stroke:"#a0a0a0",strokeWidth:1})]}),
|
|
19
19
|
/* @__PURE__ */V(T,{ref:l,visible:!s,onPointerDown:b(!1),name:"ce"}),
|
|
20
|
-
/* @__PURE__ */V(T,{visible:!s,ref:c,onPointerDown:b(!0),name:"cd"})]})});Ae.displayName="AuxiliaryLines";var Ce=Ae;var Me=function(e){return function(t){if(!e)return void console.error("Stage is not defined");t.evt.preventDefault();const n=e.scaleX(),r=e.getPointerPosition().x/n-e.x()/n,i=e.getPointerPosition().y/n-e.y()/n;let a=t.evt.deltaY>0?.9*n:1.1*n;a=Math.max(.125,a),a=Math.min(100,a),e.scale({x:a,y:a});const o={x:-(r-e.getPointerPosition().x/a)*a,y:-(i-e.getPointerPosition().y/a)*a};e.position(o)}},Ee=!0;var xe=function(e){function t(t){try{" "===t.key&&(Ee&&(e.container().style.cursor="grab",Ee=!1),e.draggable(!0))}catch{}}function n(t){if(" "===t.key)try{e.draggable(!1),e.container().style.cursor="default",Ee=!0}catch{}}return[function(){window.addEventListener("keydown",t),window.addEventListener("keyup",n)},function(){window.removeEventListener("keydown",t),window.removeEventListener("keyup",n)}]},ke=!1,Ie={x:0,y:0},Pe=!1;var Re=!0,Se=[];var Le=function(e,t,n){let r=[],i=0,a=0,o=1,s=0,u=-1;const l=[],c=[];function d(e,t){"keydown"===t?l.push(e):c.push(e)}function h(e){let t=0;l[t](e,function n(){t++,t<l.length&&l[t](e,n)})}function f(e){let t=0;c[t](e,function n(){t++,t<c.length&&c[t](e,n)})}function p(){return r.length||(r=e?.find(e=>t.some(t=>t.id===e.attrs.id))),r}const m=$(()=>{if(!p().length)return;const e=t.map(e=>{const t=p().find(t=>t.attrs.id===e.id)?.x(),n=p().find(t=>t.attrs.id===e.id)?.y();return{...e,x:t||e.x,y:n||e.y}});n.onSetShapes(e)},1200),v=e=>{p().length&&t.length&&(u=requestAnimationFrame(()=>{0!==i||0!==a?(p().forEach(e=>{e.setAttr("x",e.x()+i),e.setAttr("y",e.y()+a)}),e.shiftKey||e.altKey||(i=0,a=0),v(e),m()):u=-1}))},g=e.getContent();g.setAttribute("tabindex","2"),g.style.outline="none";const b=()=>{Re=!1},y=()=>{Re=!0};return d((e,t)=>{const n=["ArrowLeft","ArrowRight","f","h","s"];(e.ctrlKey||e.metaKey)&&n.includes(e.key)&&e.preventDefault(),t()},"keydown"),d((e,n)=>{if(t.length&&!Re){switch(e.altKey?o=2:e.shiftKey&&(o=5),e.key){case"ArrowUp":a=0,a-=o,e.preventDefault(),e.stopPropagation();break;case"ArrowDown":a=0,a+=o,e.preventDefault(),e.stopPropagation();break;case"ArrowLeft":i=0,i-=o,e.preventDefault(),e.stopPropagation();break;case"ArrowRight":i=0,i+=o,e.preventDefault(),e.stopPropagation();break;default:return void n()}u<0&&v(e)}else n()},"keydown"),d((r,i)=>{t?.length&&!Re&&"Backspace"===r.key?(r.preventDefault(),n.onRemoveShapes(t.map(e=>e.id)),n.onSetActiveShapeIds([]),Object.assign(e?.container().style??{},{cursor:"unset"})):i()},"keydown"),d((e,r)=>{(e.ctrlKey||e.metaKey)&&["c","v"].includes(e.key)&&t?.length&&!Re?"c"===e.key?s=0:(s++,Se=t.map(e=>({...e,id:Y(),x:e.x+10*s,y:e.y+10*s})),n.onAddShapes(Se),n.onSetActiveShapeIds(Se.map(e=>e.id))):r()},"keydown"),d((e,t)=>{switch(e.key){case"ArrowUp":case"ArrowDown":a=0,e.preventDefault();break;case"ArrowLeft":case"ArrowRight":i=0,e.preventDefault();break;default:t()}},"keyup"),[function(){window.addEventListener("keydown",h),window.addEventListener("keyup",f),g.addEventListener("focus",b),g.addEventListener("blur",y)},function(){cancelAnimationFrame(u),window.removeEventListener("keydown",h),window.removeEventListener("keyup",f),g.removeEventListener("focus",b),g.removeEventListener("blur",y)}]};const Te={wrapper:{width:"100%",height:"100%",display:"flex",flexDirection:"column",overflow:"hidden"},container:{width:"100%",height:"100%",position:"relative",overflow:"hidden",backgroundColor:"#f5f5f5"},stage:{width:"100%",height:"100%"}};var Fe=({renderMode:e=!1,width:t,height:n,shapeList:r,bgShapeList:i,onSelectedShapeIdsChange:a,onShapeListChange:o,onBgShapeListChange:s,className:u="",backgroundType:l="grid",hideRuler:c=!1,disableRulerAuxiliary:d=!1,ppmm:h=1,forwardedRef:f})=>{const p=x(null),m=x(null),v=x(null),[g,b]=k(null),[y,w]=k({width:t||800,height:n||600}),[_,E]=k([]),[R,L]=k([]),[T,F]=k([]),j=x([]),D=r??_,W=i??R,B=[...D,...W].filter(e=>T.includes(e.id)),N=A(e=>{void 0===r&&E(e),o?.(e)},[r,o]),z=A(e=>{void 0===i&&L(e),s?.(e)},[i,s]),H=A(e=>{F(e),j.current=e,a?.(e)},[a]),X=A(e=>{N(D.map(t=>t.id===e.id?e:t))},[D,N]);C(()=>{if(!p.current)return;const e=p.current.findOne(".c5"),t=new I.Animation(()=>{},e);return t.start(),()=>{t.stop()}},[p]);const G=A(e=>{z(W.map(t=>t.id===e.id?e:t))},[W,z]),q=A(e=>{N([...D,...e])},[D,N]),K=A(e=>{z([...W,...e])},[W,z]),J=A(e=>{N(D.filter(t=>!e.includes(t.id)))},[D,N]),Z=A(e=>{z(W.filter(t=>!e.includes(t.id)))},[W,z]),Q=A(e=>{N(D.filter(t=>t.id!==e)),H(T.filter(t=>t!==e))},[D,N,T,H]),ee=A(e=>{z(W.filter(t=>t.id!==e)),H(T.filter(t=>t!==e))},[W,z,T,H]),te=A(e=>{const t={...structuredClone(e),id:Y(),x:e.x+20,y:e.y+20};q([t]),H([t.id])},[q,H]),ne=A(e=>{T.includes(e)||H([...T,e])},[T,H]),ie=A(e=>{H(T.filter(t=>t!==e))},[T,H]),oe=A(()=>{if(!p.current)return;const e=p.current;e.scale({x:1,y:1}),e.position({x:0,y:0});const t=e.findOne(".c7"),n=e.findOne(".c5"),r=[];if(t&&t.find(e=>{const t=e.getClassName();return"Group"!==t&&"Layer"!==t&&r.push(e),!1}),n&&n.find(e=>{const t=e.getClassName();return"Group"!==t&&"Layer"!==t&&r.push(e),!1}),0===r.length)return;const i=new I.Group;r.forEach(e=>{i.add(e.clone())});const{x:a,y:o,width:s,height:u}=i.getClientRect();if(i.destroy(),0===s||0===u)return;const l=e.width()-80,c=e.height()-80,d=Math.min(l/s,c/u,1);e.scale({x:d,y:d}),e.position({x:(l-s*d)/2-a*d+40,y:(c-u*d)/2-o*d+40}),v.current?.rulerReRender(e)},[]);M(f,()=>({getStage:()=>p.current,getSelectedShapeIds:()=>T,setSelectedShapeIds:H,addShapes:q,removeShapes:J,updateShape:X,getShapeList:()=>D,fitToContent:oe,addBgShapes:K,removeBgShapes:Z,removeBgShape:ee}),[T,H,q,J,X,D,oe,K,Z,ee]),C(()=>{if(!p.current)return;b(p.current);const
|
|
20
|
+
/* @__PURE__ */V(T,{visible:!s,ref:c,onPointerDown:b(!0),name:"cd"})]})});Ae.displayName="AuxiliaryLines";var Ce=Ae;var Me=function(e){return function(t){if(!e)return void console.error("Stage is not defined");t.evt.preventDefault();const n=e.scaleX(),r=e.getPointerPosition().x/n-e.x()/n,i=e.getPointerPosition().y/n-e.y()/n;let a=t.evt.deltaY>0?.9*n:1.1*n;a=Math.max(.125,a),a=Math.min(100,a),e.scale({x:a,y:a});const o={x:-(r-e.getPointerPosition().x/a)*a,y:-(i-e.getPointerPosition().y/a)*a};e.position(o)}},Ee=!0;var xe=function(e){function t(t){try{" "===t.key&&(Ee&&(e.container().style.cursor="grab",Ee=!1),e.draggable(!0))}catch{}}function n(t){if(" "===t.key)try{e.draggable(!1),e.container().style.cursor="default",Ee=!0}catch{}}return[function(){window.addEventListener("keydown",t),window.addEventListener("keyup",n)},function(){window.removeEventListener("keydown",t),window.removeEventListener("keyup",n)}]},ke=!1,Ie={x:0,y:0},Pe=!1;var Re=!0,Se=[];var Le=function(e,t,n){let r=[],i=0,a=0,o=1,s=0,u=-1;const l=[],c=[];function d(e,t){"keydown"===t?l.push(e):c.push(e)}function h(e){let t=0;l[t](e,function n(){t++,t<l.length&&l[t](e,n)})}function f(e){let t=0;c[t](e,function n(){t++,t<c.length&&c[t](e,n)})}function p(){return r.length||(r=e?.find(e=>t.some(t=>t.id===e.attrs.id))),r}const m=$(()=>{if(!p().length)return;const e=t.map(e=>{const t=p().find(t=>t.attrs.id===e.id)?.x(),n=p().find(t=>t.attrs.id===e.id)?.y();return{...e,x:t||e.x,y:n||e.y}});n.onSetShapes(e)},1200),v=e=>{p().length&&t.length&&(u=requestAnimationFrame(()=>{0!==i||0!==a?(p().forEach(e=>{e.setAttr("x",e.x()+i),e.setAttr("y",e.y()+a)}),e.shiftKey||e.altKey||(i=0,a=0),v(e),m()):u=-1}))},g=e.getContent();g.setAttribute("tabindex","2"),g.style.outline="none";const b=()=>{Re=!1},y=()=>{Re=!0};return d((e,t)=>{const n=["ArrowLeft","ArrowRight","f","h","s"];(e.ctrlKey||e.metaKey)&&n.includes(e.key)&&e.preventDefault(),t()},"keydown"),d((e,n)=>{if(t.length&&!Re){switch(e.altKey?o=2:e.shiftKey&&(o=5),e.key){case"ArrowUp":a=0,a-=o,e.preventDefault(),e.stopPropagation();break;case"ArrowDown":a=0,a+=o,e.preventDefault(),e.stopPropagation();break;case"ArrowLeft":i=0,i-=o,e.preventDefault(),e.stopPropagation();break;case"ArrowRight":i=0,i+=o,e.preventDefault(),e.stopPropagation();break;default:return void n()}u<0&&v(e)}else n()},"keydown"),d((r,i)=>{t?.length&&!Re&&"Backspace"===r.key?(r.preventDefault(),n.onRemoveShapes(t.map(e=>e.id)),n.onSetActiveShapeIds([]),Object.assign(e?.container().style??{},{cursor:"unset"})):i()},"keydown"),d((e,r)=>{(e.ctrlKey||e.metaKey)&&["c","v"].includes(e.key)&&t?.length&&!Re?"c"===e.key?s=0:(s++,Se=t.map(e=>({...e,id:Y(),x:e.x+10*s,y:e.y+10*s})),n.onAddShapes(Se),n.onSetActiveShapeIds(Se.map(e=>e.id))):r()},"keydown"),d((e,t)=>{switch(e.key){case"ArrowUp":case"ArrowDown":a=0,e.preventDefault();break;case"ArrowLeft":case"ArrowRight":i=0,e.preventDefault();break;default:t()}},"keyup"),[function(){window.addEventListener("keydown",h),window.addEventListener("keyup",f),g.addEventListener("focus",b),g.addEventListener("blur",y)},function(){cancelAnimationFrame(u),window.removeEventListener("keydown",h),window.removeEventListener("keyup",f),g.removeEventListener("focus",b),g.removeEventListener("blur",y)}]};const Te={wrapper:{width:"100%",height:"100%",display:"flex",flexDirection:"column",overflow:"hidden"},container:{width:"100%",height:"100%",position:"relative",overflow:"hidden",backgroundColor:"#f5f5f5"},stage:{width:"100%",height:"100%"}};var Fe=({renderMode:e=!1,width:t,height:n,shapeList:r,bgShapeList:i,onSelectedShapeIdsChange:a,onShapeListChange:o,onBgShapeListChange:s,className:u="",backgroundType:l="grid",hideRuler:c=!1,disableRulerAuxiliary:d=!1,ppmm:h=1,forwardedRef:f})=>{const p=x(null),m=x(null),v=x(null),[g,b]=k(null),[y,w]=k({width:t||800,height:n||600}),[_,E]=k([]),[R,L]=k([]),[T,F]=k([]),j=x([]),D=r??_,W=i??R,B=[...D,...W].filter(e=>T.includes(e.id)),N=A(e=>{void 0===r&&E(e),o?.(e)},[r,o]),z=A(e=>{void 0===i&&L(e),s?.(e)},[i,s]),H=A(e=>{F(e),j.current=e,a?.(e)},[a]),X=A(e=>{N(D.map(t=>t.id===e.id?e:t))},[D,N]);C(()=>{if(!p.current)return;const e=p.current.findOne(".c5"),t=new I.Animation(()=>{},e);return t.start(),()=>{t.stop()}},[p]);const G=A(e=>{z(W.map(t=>t.id===e.id?e:t))},[W,z]),q=A(e=>{N([...D,...e])},[D,N]),K=A(e=>{z([...W,...e])},[W,z]),J=A(e=>{N(D.filter(t=>!e.includes(t.id)))},[D,N]),Z=A(e=>{z(W.filter(t=>!e.includes(t.id)))},[W,z]),Q=A(e=>{N(D.filter(t=>t.id!==e)),H(T.filter(t=>t!==e))},[D,N,T,H]),ee=A(e=>{z(W.filter(t=>t.id!==e)),H(T.filter(t=>t!==e))},[W,z,T,H]),te=A(e=>{const t={...structuredClone(e),id:Y(),x:e.x+20,y:e.y+20};q([t]),H([t.id])},[q,H]),ne=A(e=>{T.includes(e)||H([...T,e])},[T,H]),ie=A(e=>{H(T.filter(t=>t!==e))},[T,H]),oe=A(()=>{if(!p.current)return;const e=p.current;e.scale({x:1,y:1}),e.position({x:0,y:0});const t=e.findOne(".c7"),n=e.findOne(".c5"),r=[];if(t&&t.find(e=>{const t=e.getClassName();return"Group"!==t&&"Layer"!==t&&r.push(e),!1}),n&&n.find(e=>{const t=e.getClassName();return"Group"!==t&&"Layer"!==t&&r.push(e),!1}),0===r.length)return;const i=new I.Group;r.forEach(e=>{i.add(e.clone())});const{x:a,y:o,width:s,height:u}=i.getClientRect();if(i.destroy(),0===s||0===u)return;const l=e.width()-80,c=e.height()-80,d=Math.min(l/s,c/u,1);e.scale({x:d,y:d}),e.position({x:(l-s*d)/2-a*d+40,y:(c-u*d)/2-o*d+40}),v.current?.rulerReRender(e)},[]);M(f,()=>({getStage:()=>p.current,getSelectedShapeIds:()=>T,setSelectedShapeIds:H,addShapes:q,removeShapes:J,updateShape:X,getShapeList:()=>D,fitToContent:oe,addBgShapes:K,removeBgShapes:Z,removeBgShape:ee}),[T,H,q,J,X,D,oe,K,Z,ee]),C(()=>{if(e)return;if(!p.current)return;b(p.current);const t=p.current,n=()=>{v.current?.rulerReRender(t)},r=Me(t),i=e=>{r(e),n()};t.on("wheel",i),t.on("dragmove",n);const[a,o]=xe(t);a();const[s,u]=function(e,t){function n(e){if(t?.press&&e.key===t?.press){if(t?.hasSelectedElements?.())return void(Pe=!1);Pe=!0}}function r(e){t?.press&&e.key===t?.press&&(Pe=!1)}function i(t){0===t.button&&e&&e.contains(t.target)&&(ke=!0,Object.assign(Ie,{x:t.clientX,y:t.clientY}))}function a(e){0===e.button&&(ke=!1)}function o(n){ke&&e&&(t?.press&&!Pe||(e.style.setProperty("--offsetX",`${Ie.x+n.clientX}px`),e.style.setProperty("--offsetY",`${Ie.y+n.clientY}px`)))}let s="";const u=$(()=>{e&&(s?e.style.setProperty("background-image",s):e.style.removeProperty("background-image"))},100),l=()=>{if(!e)return;const t=e.style.getPropertyValue("background-image");t&&"none"!==t&&(s=t),e.style.setProperty("background-image","none"),u()};return[function(){e&&(e.addEventListener("wheel",l),window.addEventListener("mousedown",i),window.addEventListener("mouseup",a),window.addEventListener("mousemove",o),window.addEventListener("keydown",n),window.addEventListener("keyup",r))},function(){e&&(e.removeEventListener("wheel",l),window.removeEventListener("mousedown",i),window.removeEventListener("mouseup",a),window.removeEventListener("mousemove",o),window.removeEventListener("keydown",n),window.removeEventListener("keyup",r))}]}(m.current,{press:" ",hasSelectedElements:()=>j.current.length>0});return s(),()=>{t.off("wheel",i),t.off("dragmove",n),o(),u()}},[e]),C(()=>{if(!g)return;const[e,t]=Le(g,B,{onSetShapes:e=>{N(D.map(t=>e.find(e=>e.id===t.id)||t)),z(W.map(t=>e.find(e=>e.id===t.id)||t))},onRemoveShapes:J,onSetActiveShapeIds:H,onAddShapes:q});return e(),t},[g,B,D,N,J,H,q,W,z]),C(()=>{if(!m.current)return;const e=()=>{if(p.current){const{clientWidth:e,clientHeight:r}=p.current.container();w({width:t||e,height:n||r})}};e();const r=new ResizeObserver(e);return r.observe(m.current),()=>{r.disconnect()}},[t,n]);/* @__PURE__ */
|
|
21
21
|
return V("div",{style:Te.wrapper,className:u,children:/* @__PURE__ */U("div",{ref:m,id:"c0",style:{...Te.container,..."grid"===l?((e="#e0e0e0")=>({"--size":"20px","--offsetX":"0px","--offsetY":"0px",backgroundImage:`\n linear-gradient(45deg, ${e} 25%, transparent 0, transparent 75%, ${e} 0),\n linear-gradient(45deg, ${e} 25%, transparent 0, transparent 75%, ${e} 0)\n `,backgroundPosition:"var(--offsetX) var(--offsetY),\n calc(var(--size) + var(--offsetX)) calc(var(--size) + var(--offsetY))",backgroundSize:"calc(var(--size) * 2) calc(var(--size) * 2)"}))():"point"===l?{"--size":"20px","--offsetX":"0px","--offsetY":"0px",backgroundSize:"var(--size) var(--size)",backgroundImage:"radial-gradient(circle, #2f3542 1px, rgba(0, 0, 0, 0) 1px)",backgroundPosition:"var(--offsetX) var(--offsetY)"}:{}},children:[/* @__PURE__ */U(O,{ref:p,style:Te.stage,...y,listening:!e,children:[!e&&/* @__PURE__ */V(S,{name:"c7",children:/* @__PURE__ */V(P,{id:"c6",children:W.map(e=>/* @__PURE__ */V(re,{shapeProps:{...e,name:"c2"},onChange:G,onShapeChange:G},e.id))})}),
|
|
22
22
|
/* @__PURE__ */V(S,{name:"c5",listening:!e,children:D.map(e=>/* @__PURE__ */V(re,{shapeProps:e,onChange:X,onShapeChange:X},e.id))}),!e&&/* @__PURE__ */V(S,{children:/* @__PURE__ */V(ae,{selectedShapeIds:T,stageIns:g,shaleSelector:".c1, .c2"})}),!d&&!e&&/* @__PURE__ */V(Ce,{ref:v,stageIns:g,hideRuler:c,currentPpmm:h,auxiliaryVisible:!0,auxiliaryLock:!1,disableAuxiliary:!1})]}),!e&&/* @__PURE__ */V(ge,{stageIns:g,selectedShapeIds:T,shapeList:D,callbacks:{onSetActiveShapeIds:H,onAddActiveShapeId:ne,onRemoveActiveShapeId:ie,onUpdateShapeList:N,onDeleteShape:Q,onDuplicateShape:te}})]})})};const Oe=_((e,t)=>/* @__PURE__ */V(Fe,{...e,forwardedRef:t}));Oe.displayName="CanvasStudio";var je=Oe;export{m as AREA_SHAPE_NAME,c as AUXILIARY_GROUP,f as AUXILIARY_LAYER_NAME,s as BACKGROUND_LAYER_NAME,t as BACKGROUND_SHAPE_NAME,d as CUSTOMER_SHAPE_NAME,Oe as CanvasStudio,p as DRAW_AREA_LAYER_NAME,n as DRAW_AREA_SHAPE_NAME,u as HELP_LINE_NAME,v as RULER_RECT_H,r as RULER_RECT_V,i as SHAPE_GROUP,h as SHAPE_LAYER_NAME,l as SHAPE_TYPES,o as SNAPPING_LINE_NAME,a as STAGE_CONTAINER_ID,e as THEME_COLOR,G as assertNever,je as default};
|
package/package.json
CHANGED