diff --git a/trame_image_tools/module/serve/trame_image_tools.umd.js b/trame_image_tools/module/serve/trame_image_tools.umd.js
index e36cd94..d54e410 100644
--- a/trame_image_tools/module/serve/trame_image_tools.umd.js
+++ b/trame_image_tools/module/serve/trame_image_tools.umd.js
@@ -1,2 +1,2 @@
-(function(P,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(P=typeof globalThis<"u"?globalThis:P||self,o(P.trame_image_tools={},P.Vue))})(this,function(P,o){"use strict";const X=[.5,.5],T=["viewBox"],$=["href"],D=["width","height","stroke","stroke-width"],N=o.defineComponent({__name:"TrameImage",props:o.mergeModels({src:{},size:{},borderColor:{default:"white"},borderSize:{default:1}},{scale:{required:!1,default:.9},scaleModifiers:{},center:{required:!1,default:X},centerModifiers:{}}),emits:["update:scale","update:center"],setup(z){const n=z,a=o.useModel(z,"scale"),y=o.useModel(z,"center"),l=o.useTemplateRef("svg-root"),t=o.ref([1,1]);let r=null;const w=o.computed(()=>u(n.size,t.value,a.value,y.value)),e=o.computed(()=>w.value.join(" ")),d=o.computed(()=>n.size[0]/n.size[1]),g=o.computed(()=>t.value[0]/t.value[1]),M=o.computed(()=>n.size[0]/t.value[0]),k=o.computed(()=>n.size[1]/t.value[1]),v=o.computed(()=>Math.max(M.value,k.value));function c(i,m,f,E){const R=m[0]/f,S=m[1]/f,B=i[2]-R,V=i[3]-S;return[i[0]+B*E[0],i[1]+V*E[1],R,S]}function h(i){i.stopPropagation();const m=.2,f=i.deltaY<0;let E;f?E=a.value*(1+m):E=a.value/(1+m);const R=[0,0];d.value>g.value?(R[0]=i.offsetX/t.value[0],R[1]=d.value/g.value*(i.offsetY/t.value[1])):(R[0]=g.value/d.value*(i.offsetX/t.value[0]),R[1]=i.offsetY/t.value[1]);const S=c(w.value,n.size,E,R),B=p(n.size,t.value,[S[0],S[1]],E);y.value=B,a.value=E}function s(i){const m=[i.clientX,i.clientY],f=[w.value[0],w.value[1]];function E(S){const B=m[0]-S.clientX,V=m[1]-S.clientY,L=[f[0]+v.value*B/a.value,f[1]+v.value*V/a.value];y.value=p(n.size,t.value,L,a.value)}function R(){document.removeEventListener("mousemove",E),document.removeEventListener("mouseup",R)}document.addEventListener("mousemove",E),document.addEventListener("mouseup",R)}function p(i,m,f,E){const R=i[0],S=i[1],B=m[0],V=m[1],L=R/S,b=B/V,C=[0,0];if(L>b){const F=L/b/E;C[0]=f[0]/R+.5/E,C[1]=f[1]/S+F/2}else{const F=b/L/E;C[0]=f[0]/R+F/2,C[1]=f[1]/S+.5/E}return C}function u(i,m,f,E){const R=i[0],S=i[1],B=m[0],V=m[1],L=R/S,b=B/V,C=[0,0];if(L>b){const F=L/b/f;C[0]=-(1/f-2*E[0])*.5*R,C[1]=-(F-2*E[1])*S*.5}else{const F=b/L/f;C[0]=-(F-2*E[0])*R*.5,C[1]=-(1/f-2*E[1])*.5*S}return[C[0],C[1],R/f,S/f]}return o.onMounted(()=>{r=new ResizeObserver(()=>{l.value&&(t.value=[l.value.clientWidth,l.value.clientHeight])}),l.value&&r.observe(l.value)}),o.onBeforeUnmount(()=>{r&&r.disconnect()}),(i,m)=>(o.openBlock(),o.createElementBlock("svg",{ref:"svg-root",onWheel:h,onMousedown:s,version:"1.1",width:"100%",height:"100%",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMinYMin meet",viewBox:e.value},[o.createElementVNode("image",{href:i.src,style:{"image-rendering":"pixelated"}},null,8,$),o.createElementVNode("rect",{width:i.size[0],height:i.size[1],stroke:i.borderColor,fill:"transparent","stroke-width":i.borderSize*v.value/a.value},null,8,D),o.renderSlot(i.$slots,"default",{imageSize:i.size,viewPortSize:t.value,imageRatio:d.value,viewPortRatio:g.value,widthRatio:M.value,heightRatio:k.value,pixelRatio:v.value,center:y.value,scale:a.value,viewBox:w.value})],40,T))}}),W=["x","y","width","height","stroke","fill","stroke-width"],H=["x","y","width","height","stroke","fill","stroke-width"],I=o.defineComponent({__name:"TrameImageRoi",props:o.mergeModels({imageSize:{},pixelRatio:{},scale:{},constrain:{type:Boolean,default:!0},fillColor:{default:"transparent"},borderColor:{default:"lime"},borderSize:{default:2},handleSize:{default:10},handleFillColor:{default:"#ffffffdd"},handleBorderColor:{default:"#000000dd"}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(z){const n=z,a=o.useModel(z,"modelValue");function y(t){t.stopPropagation();let r=[t.clientX,t.clientY];const w=[...a.value],e=n.imageSize[0],d=n.imageSize[1];function g(k){const v=r[0]-k.clientX,c=r[1]-k.clientY,h=[...a.value];let s=[w[0]-n.pixelRatio*v/n.scale,w[1]-n.pixelRatio*c/n.scale,h[2],h[3]];n.constrain&&(s[0]<0&&(s[0]=0),s[1]<0&&(s[1]=0),s[0]+h[2]>e&&(s[0]=e-h[2]),s[1]+h[3]>d&&(s[1]=d-h[3])),s=s.map(u=>Math.round(u));let p=!1;s.forEach((u,i)=>{p=p||u!==h[i]}),p&&(a.value=s)}function M(){document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",M)}document.addEventListener("mousemove",g),document.addEventListener("mouseup",M)}function l(t){t.stopPropagation();let r=[t.clientX,t.clientY];const w=[...a.value],e=n.imageSize[0],d=n.imageSize[1];function g(k){const v=r[0]-k.clientX,c=r[1]-k.clientY,h=[...a.value];let s=[h[0],h[1],w[2]-n.pixelRatio*v/n.scale,w[3]-n.pixelRatio*c/n.scale];s[2]<1&&(s[2]=1),s[3]<1&&(s[3]=1),n.constrain&&(s[0]+s[2]>e&&(s[2]=e-s[0]),s[1]+s[3]>d&&(s[3]=d-s[1])),s=s.map(u=>Math.round(u));let p=!1;s.forEach((u,i)=>{p=p||u!==h[i]}),p&&(a.value=s)}function M(){document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",M)}document.addEventListener("mousemove",g),document.addEventListener("mouseup",M)}return(t,r)=>(o.openBlock(),o.createElementBlock("g",null,[o.createElementVNode("rect",{onMousedown:y,x:a.value[0],y:a.value[1],width:a.value[2],height:a.value[3],stroke:t.borderColor,fill:t.fillColor,"stroke-width":t.borderSize*t.pixelRatio/t.scale},null,40,W),o.createElementVNode("rect",{onMousedown:l,x:a.value[0]+a.value[2]-.5*t.handleSize*t.pixelRatio/t.scale,y:a.value[1]+a.value[3]-.5*t.handleSize*t.pixelRatio/t.scale,width:t.handleSize*t.pixelRatio/t.scale,height:t.handleSize*t.pixelRatio/t.scale,stroke:t.handleBorderColor,fill:t.handleFillColor,"stroke-width":t.pixelRatio/t.scale},null,40,H)]))}}),U=["points","stroke","stroke-width"],A=["onMousedown","x","y","width","height","stroke","fill","stroke-width"],j=o.defineComponent({__name:"TrameImageLine",props:o.mergeModels({imageSize:{},pixelRatio:{},scale:{},constrain:{type:Boolean,default:!0},color:{default:"lime"},thickness:{default:2},handleSize:{default:10},handleFillColor:{default:"#ffffffdd"},handleBorderColor:{default:"#000000dd"},handleBorderSize:{default:1}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(z){const n=z,a=o.useModel(z,"modelValue"),y=o.computed(()=>Math.floor(a.value.length/2)),l=o.computed(()=>{const e=[];for(let d=0;d<y.value;++d)e.push([a.value[d*2],a.value[d*2+1]]);return e}),t=o.computed(()=>l.value.map(e=>e.join(",")).join(" "));function r(e){e.stopPropagation();let d=[e.clientX,e.clientY];const g=l.value.map(v=>v.map(c=>c));function M(v){const c=d[0]-v.clientX,h=d[1]-v.clientY,s=l.value.map(i=>i.map(m=>m));let p=g.map(i=>[i[0]-n.pixelRatio*c/n.scale,i[1]-n.pixelRatio*h/n.scale]);n.constrain&&(p=p.map(i=>[Math.min(Math.max(0,i[0]),n.imageSize[0]),Math.min(Math.max(0,i[1]),n.imageSize[1])])),p=p.map(i=>i.map(m=>Math.round(m)));let u=!1;p.forEach((i,m)=>{i.forEach((f,E)=>{u=u||f!==s[m][E]})}),u&&(a.value=p.flat())}function k(){document.removeEventListener("mousemove",M),document.removeEventListener("mouseup",k)}document.addEventListener("mousemove",M),document.addEventListener("mouseup",k)}function w(e,d){d.stopPropagation();let g=[d.clientX,d.clientY];const M=l.value.map(c=>c.map(h=>h));function k(c){const h=g[0]-c.clientX,s=g[1]-c.clientY,p=l.value.map(m=>m.map(f=>f));let u=l.value.map(m=>m.map(f=>f));u[e]=[M[e][0]-n.pixelRatio*h/n.scale,M[e][1]-n.pixelRatio*s/n.scale],n.constrain&&(u[e][0]=Math.min(Math.max(0,u[e][0]),n.imageSize[0]),u[e][1]=Math.min(Math.max(0,u[e][1]),n.imageSize[1])),u=u.map(m=>m.map(f=>Math.round(f))),(u[e][0]!==p[e][0]||u[e][1]!==p[e][1])&&(a.value=u.flat())}function v(){document.removeEventListener("mousemove",k),document.removeEventListener("mouseup",v)}document.addEventListener("mousemove",k),document.addEventListener("mouseup",v)}return(e,d)=>(o.openBlock(),o.createElementBlock("g",null,[o.createElementVNode("polyline",{onMousedown:r,points:t.value,stroke:e.color,"stroke-width":e.thickness*e.pixelRatio/e.scale,fill:"none"},null,40,U),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(l.value,(g,M)=>(o.openBlock(),o.createElementBlock("rect",{key:M,onMousedown:k=>w(M,k),x:g[0]-.5*e.handleSize*e.pixelRatio/e.scale,y:g[1]-.5*e.handleSize*e.pixelRatio/e.scale,width:e.handleSize*e.pixelRatio/e.scale,height:e.handleSize*e.pixelRatio/e.scale,stroke:e.handleBorderColor,fill:e.handleFillColor,"stroke-width":e.pixelRatio/e.scale},null,40,A))),128))]))}}),q=["cx","cy","r","stroke","fill","stroke-width"],O=["cx","cy","r","stroke","stroke-width"],G=["x","y","width","height","stroke","fill","stroke-width"],Z=o.defineComponent({__name:"TrameImageCircle",props:o.mergeModels({imageSize:{},pixelRatio:{},scale:{},constrain:{type:Boolean,default:!0},fillColor:{default:"transparent"},borderColor:{default:"lime"},borderSize:{default:2},handleSize:{default:10},handleFillColor:{default:"#ffffffdd"},handleBorderColor:{default:"#000000dd"}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(z){const n=z,a=o.useModel(z,"modelValue");function y(t){t.stopPropagation();let r=[t.clientX,t.clientY];const w=[...a.value];function e(g){const M=r[0]-g.clientX,k=r[1]-g.clientY,v=[...a.value];let c=[w[0]-n.pixelRatio*M/n.scale,w[1]-n.pixelRatio*k/n.scale,v[2]];n.constrain&&(c[0]=Math.min(Math.max(0,c[0]),n.imageSize[0]),c[1]=Math.min(Math.max(0,c[1]),n.imageSize[1])),c=c.map(s=>Math.round(s));let h=!1;c.forEach((s,p)=>{h=h||s!==v[p]}),h&&(a.value=c)}function d(){document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",d)}document.addEventListener("mousemove",e),document.addEventListener("mouseup",d)}function l(t,r){r.stopPropagation();let w=[r.clientX,r.clientY];const e=[...a.value];function d(M){const k=w[0]-M.clientX,v=[...a.value];let c=[v[0],v[1],e[2]-n.pixelRatio*k/n.scale];c[2]=Math.max(1,c[2]),c=c.map(s=>Math.round(s));let h=!1;c.forEach((s,p)=>{h=h||s!==v[p]}),h&&(a.value=c)}function g(){document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",g)}document.addEventListener("mousemove",d),document.addEventListener("mouseup",g)}return(t,r)=>(o.openBlock(),o.createElementBlock("g",null,[o.createElementVNode("circle",{onMousedown:y,cx:a.value[0],cy:a.value[1],r:a.value[2],stroke:t.borderColor,fill:t.fillColor,"stroke-width":t.borderSize*t.pixelRatio/t.scale},null,40,q),o.createElementVNode("circle",{cx:a.value[0],cy:a.value[1],r:.5*t.pixelRatio/t.scale,stroke:t.borderColor,"stroke-width":t.borderSize*t.pixelRatio/t.scale,fill:"transparent"},null,8,O),o.createElementVNode("rect",{onMousedown:r[0]||(r[0]=w=>l(0,w)),x:a.value[0]+a.value[2]-.5*t.handleSize*t.pixelRatio/t.scale,y:a.value[1]-.5*t.handleSize*t.pixelRatio/t.scale,width:t.handleSize*t.pixelRatio/t.scale,height:t.handleSize*t.pixelRatio/t.scale,stroke:t.handleBorderColor,fill:t.handleFillColor,"stroke-width":t.pixelRatio/t.scale},null,40,G)]))}}),J=["points","stroke","fill","stroke-width"],K=["onMousedown","x","y","width","height","stroke","fill","stroke-width"],Q=o.defineComponent({__name:"TrameImagePolygon",props:o.mergeModels({imageSize:{},pixelRatio:{},scale:{},constrain:{type:Boolean,default:!0},fillColor:{default:"transparent"},borderColor:{default:"lime"},borderSize:{default:2},handleSize:{default:10},handleFillColor:{default:"#ffffffdd"},handleBorderColor:{default:"#000000dd"}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(z){const n=z,a=o.useModel(z,"modelValue"),y=o.computed(()=>Math.floor(a.value.length/2)),l=o.computed(()=>{const e=[];for(let d=0;d<y.value;++d)e.push([a.value[d*2],a.value[d*2+1]]);return e}),t=o.computed(()=>l.value.map(e=>e.join(",")).join(" "));function r(e){e.stopPropagation();let d=[e.clientX,e.clientY];const g=l.value.map(v=>v.map(c=>c));function M(v){const c=d[0]-v.clientX,h=d[1]-v.clientY,s=l.value.map(i=>i.map(m=>m));let p=g.map(i=>[i[0]-n.pixelRatio*c/n.scale,i[1]-n.pixelRatio*h/n.scale]);n.constrain&&(p=p.map(i=>[Math.min(Math.max(0,i[0]),n.imageSize[0]),Math.min(Math.max(0,i[1]),n.imageSize[1])])),p=p.map(i=>i.map(m=>Math.round(m)));let u=!1;p.forEach((i,m)=>{i.forEach((f,E)=>{u=u||f!==s[m][E]})}),u&&(a.value=p.flat())}function k(){document.removeEventListener("mousemove",M),document.removeEventListener("mouseup",k)}document.addEventListener("mousemove",M),document.addEventListener("mouseup",k)}function w(e,d){d.stopPropagation();let g=[d.clientX,d.clientY];const M=l.value.map(c=>c.map(h=>h));function k(c){const h=g[0]-c.clientX,s=g[1]-c.clientY,p=l.value.map(m=>m.map(f=>f));let u=l.value.map(m=>m.map(f=>f));u[e]=[M[e][0]-n.pixelRatio*h/n.scale,M[e][1]-n.pixelRatio*s/n.scale],n.constrain&&(u[e][0]=Math.min(Math.max(0,u[e][0]),n.imageSize[0]),u[e][1]=Math.min(Math.max(0,u[e][1]),n.imageSize[1])),u=u.map(m=>m.map(f=>Math.round(f))),(u[e][0]!==p[e][0]||u[e][1]!==p[e][1])&&(a.value=u.flat())}function v(){document.removeEventListener("mousemove",k),document.removeEventListener("mouseup",v)}document.addEventListener("mousemove",k),document.addEventListener("mouseup",v)}return(e,d)=>(o.openBlock(),o.createElementBlock("g",null,[o.createElementVNode("polygon",{onMousedown:r,points:t.value,stroke:e.borderColor,fill:e.fillColor,"stroke-width":e.borderSize*e.pixelRatio/e.scale},null,40,J),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(l.value,(g,M)=>(o.openBlock(),o.createElementBlock("rect",{key:M,onMousedown:k=>w(M,k),x:g[0]-.5*e.handleSize*e.pixelRatio/e.scale,y:g[1]-.5*e.handleSize*e.pixelRatio/e.scale,width:e.handleSize*e.pixelRatio/e.scale,height:e.handleSize*e.pixelRatio/e.scale,stroke:e.handleBorderColor,fill:e.handleFillColor,"stroke-width":e.pixelRatio/e.scale},null,40,K))),128))]))}}),x=["x1","x2","y2","stroke","stroke-width"],_=["x","y","fill","font-family","font-size"],ee=["y1","x2","y2","stroke","stroke-width"],oe=["x","y","fill","font-family","font-size"],Y={trameImage:N,trameImageRoi:I,trameImageLine:j,trameImageCircle:Z,trameImagePolygon:Q,trameImageGrid:o.defineComponent({__name:"TrameImageGrid",props:{imageSize:{},pixelRatio:{},scale:{},spacing:{},color:{default:"#ffffffaa"},thickness:{default:.5},fontFamily:{default:"monospace"},fontSize:{default:12}},setup(z){const n=z,a=o.computed(()=>{const l=[],t=Math.floor(n.imageSize[0]/n.spacing[0])+1;for(let r=0;r<t;++r)l.push(r*n.spacing[0]);return l}),y=o.computed(()=>{const l=[],t=Math.floor(n.imageSize[1]/n.spacing[1])+1;for(let r=0;r<t;++r)l.push(r*n.spacing[1]);return l});return(l,t)=>(o.openBlock(),o.createElementBlock("g",null,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(a.value,(r,w)=>(o.openBlock(),o.createElementBlock(o.Fragment,{key:w},[o.createElementVNode("line",{x1:r,y1:0,x2:r,y2:n.imageSize[1],stroke:l.color,"stroke-width":l.thickness*l.pixelRatio/l.scale,"pointer-events":"none"},null,8,x),o.createElementVNode("text",{x:r,y:-l.fontSize*l.pixelRatio/l.scale,fill:l.color,"font-family":l.fontFamily,"text-anchor":"middle","font-size":l.fontSize*l.pixelRatio/l.scale,"pointer-events":"none",style:{"user-select":"none"}},o.toDisplayString(r),9,_)],64))),128)),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(y.value,(r,w)=>(o.openBlock(),o.createElementBlock(o.Fragment,{key:w},[o.createElementVNode("line",{x1:0,y1:r,x2:n.imageSize[0],y2:r,stroke:l.color,"stroke-width":l.thickness*l.pixelRatio/l.scale,"pointer-events":"none"},null,8,ee),o.createElementVNode("text",{x:-l.fontSize*l.pixelRatio/l.scale,y:r,fill:l.color,"font-family":l.fontFamily,"text-anchor":"end","dominant-baseline":"middle","font-size":l.fontSize*l.pixelRatio/l.scale,"pointer-events":"none",style:{"user-select":"none"}},o.toDisplayString(r),9,oe)],64))),128))]))}})};function te(z){Object.keys(Y).forEach(n=>{z.component(n,Y[n])})}P.install=te,Object.defineProperty(P,Symbol.toStringTag,{value:"Module"})});
+(function(P,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(P=typeof globalThis<"u"?globalThis:P||self,o(P.trame_image_tools={},P.Vue))})(this,function(P,o){"use strict";const X=[.5,.5],T=["viewBox"],$=["href"],W=["width","height","stroke","stroke-width"],D=o.defineComponent({__name:"TrameImage",props:o.mergeModels({src:{},size:{},borderColor:{default:"white"},borderSize:{default:1}},{scale:{required:!1,default:.9},scaleModifiers:{},center:{required:!1,default:X},centerModifiers:{}}),emits:["update:scale","update:center"],setup(z){const n=z,a=o.useModel(z,"scale"),y=o.useModel(z,"center"),l=o.useTemplateRef("svg-root"),t=o.ref([1,1]);let r=null;const k=o.computed(()=>u(n.size,t.value,a.value,y.value)),e=o.computed(()=>k.value.join(" ")),d=o.computed(()=>n.size[0]/n.size[1]),g=o.computed(()=>t.value[0]/t.value[1]),M=o.computed(()=>n.size[0]/t.value[0]),w=o.computed(()=>n.size[1]/t.value[1]),v=o.computed(()=>Math.max(M.value,w.value));function c(i,m,f,E){const R=m[0]/f,S=m[1]/f,B=i[2]-R,V=i[3]-S;return[i[0]+B*E[0],i[1]+V*E[1],R,S]}function h(i){i.stopPropagation();const m=.2,f=i.deltaY<0;let E;f?E=a.value*(1+m):E=a.value/(1+m);const R=[0,0];d.value>g.value?(R[0]=i.offsetX/t.value[0],R[1]=d.value/g.value*(i.offsetY/t.value[1])):(R[0]=g.value/d.value*(i.offsetX/t.value[0]),R[1]=i.offsetY/t.value[1]);const S=c(k.value,n.size,E,R),B=p(n.size,t.value,[S[0],S[1]],E);y.value=B,a.value=E}function s(i){const m=[i.clientX,i.clientY],f=[k.value[0],k.value[1]];function E(S){const B=m[0]-S.clientX,V=m[1]-S.clientY,L=[f[0]+v.value*B/a.value,f[1]+v.value*V/a.value];y.value=p(n.size,t.value,L,a.value)}function R(){document.removeEventListener("mousemove",E),document.removeEventListener("mouseup",R)}document.addEventListener("mousemove",E),document.addEventListener("mouseup",R)}function p(i,m,f,E){const R=i[0],S=i[1],B=m[0],V=m[1],L=R/S,b=B/V,C=[0,0];if(L>b){const F=L/b/E;C[0]=f[0]/R+.5/E,C[1]=f[1]/S+F/2}else{const F=b/L/E;C[0]=f[0]/R+F/2,C[1]=f[1]/S+.5/E}return C}function u(i,m,f,E){const R=i[0],S=i[1],B=m[0],V=m[1],L=R/S,b=B/V,C=[0,0];if(L>b){const F=L/b/f;C[0]=-(1/f-2*E[0])*.5*R,C[1]=-(F-2*E[1])*S*.5}else{const F=b/L/f;C[0]=-(F-2*E[0])*R*.5,C[1]=-(1/f-2*E[1])*.5*S}return[C[0],C[1],R/f,S/f]}return o.onMounted(()=>{r=new ResizeObserver(()=>{l.value&&(t.value=[l.value.clientWidth,l.value.clientHeight])}),l.value&&r.observe(l.value)}),o.onBeforeUnmount(()=>{r&&r.disconnect()}),(i,m)=>(o.openBlock(),o.createElementBlock("svg",{ref:"svg-root",onWheel:o.withModifiers(h,["prevent"]),onMousedown:s,version:"1.1",width:"100%",height:"100%",xmlns:"http://www.w3.org/2000/svg",preserveAspectRatio:"xMinYMin meet",viewBox:e.value},[o.createElementVNode("image",{href:i.src,style:{"image-rendering":"pixelated"}},null,8,$),o.createElementVNode("rect",{width:i.size[0],height:i.size[1],stroke:i.borderColor,fill:"transparent","stroke-width":i.borderSize*v.value/a.value},null,8,W),o.renderSlot(i.$slots,"default",{imageSize:i.size,viewPortSize:t.value,imageRatio:d.value,viewPortRatio:g.value,widthRatio:M.value,heightRatio:w.value,pixelRatio:v.value,center:y.value,scale:a.value,viewBox:k.value})],40,T))}}),N=["x","y","width","height","stroke","fill","stroke-width"],H=["x","y","width","height","stroke","fill","stroke-width"],I=o.defineComponent({__name:"TrameImageRoi",props:o.mergeModels({imageSize:{},pixelRatio:{},scale:{},constrain:{type:Boolean,default:!0},fillColor:{default:"transparent"},borderColor:{default:"lime"},borderSize:{default:2},handleSize:{default:10},handleFillColor:{default:"#ffffffdd"},handleBorderColor:{default:"#000000dd"}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(z){const n=z,a=o.useModel(z,"modelValue");function y(t){t.stopPropagation();let r=[t.clientX,t.clientY];const k=[...a.value],e=n.imageSize[0],d=n.imageSize[1];function g(w){const v=r[0]-w.clientX,c=r[1]-w.clientY,h=[...a.value];let s=[k[0]-n.pixelRatio*v/n.scale,k[1]-n.pixelRatio*c/n.scale,h[2],h[3]];n.constrain&&(s[0]<0&&(s[0]=0),s[1]<0&&(s[1]=0),s[0]+h[2]>e&&(s[0]=e-h[2]),s[1]+h[3]>d&&(s[1]=d-h[3])),s=s.map(u=>Math.round(u));let p=!1;s.forEach((u,i)=>{p=p||u!==h[i]}),p&&(a.value=s)}function M(){document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",M)}document.addEventListener("mousemove",g),document.addEventListener("mouseup",M)}function l(t){t.stopPropagation();let r=[t.clientX,t.clientY];const k=[...a.value],e=n.imageSize[0],d=n.imageSize[1];function g(w){const v=r[0]-w.clientX,c=r[1]-w.clientY,h=[...a.value];let s=[h[0],h[1],k[2]-n.pixelRatio*v/n.scale,k[3]-n.pixelRatio*c/n.scale];s[2]<1&&(s[2]=1),s[3]<1&&(s[3]=1),n.constrain&&(s[0]+s[2]>e&&(s[2]=e-s[0]),s[1]+s[3]>d&&(s[3]=d-s[1])),s=s.map(u=>Math.round(u));let p=!1;s.forEach((u,i)=>{p=p||u!==h[i]}),p&&(a.value=s)}function M(){document.removeEventListener("mousemove",g),document.removeEventListener("mouseup",M)}document.addEventListener("mousemove",g),document.addEventListener("mouseup",M)}return(t,r)=>(o.openBlock(),o.createElementBlock("g",null,[o.createElementVNode("rect",{onMousedown:y,x:a.value[0],y:a.value[1],width:a.value[2],height:a.value[3],stroke:t.borderColor,fill:t.fillColor,"stroke-width":t.borderSize*t.pixelRatio/t.scale},null,40,N),o.createElementVNode("rect",{onMousedown:l,x:a.value[0]+a.value[2]-.5*t.handleSize*t.pixelRatio/t.scale,y:a.value[1]+a.value[3]-.5*t.handleSize*t.pixelRatio/t.scale,width:t.handleSize*t.pixelRatio/t.scale,height:t.handleSize*t.pixelRatio/t.scale,stroke:t.handleBorderColor,fill:t.handleFillColor,"stroke-width":t.pixelRatio/t.scale},null,40,H)]))}}),U=["points","stroke","stroke-width"],A=["onMousedown","x","y","width","height","stroke","fill","stroke-width"],j=o.defineComponent({__name:"TrameImageLine",props:o.mergeModels({imageSize:{},pixelRatio:{},scale:{},constrain:{type:Boolean,default:!0},color:{default:"lime"},thickness:{default:2},handleSize:{default:10},handleFillColor:{default:"#ffffffdd"},handleBorderColor:{default:"#000000dd"},handleBorderSize:{default:1}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(z){const n=z,a=o.useModel(z,"modelValue"),y=o.computed(()=>Math.floor(a.value.length/2)),l=o.computed(()=>{const e=[];for(let d=0;d<y.value;++d)e.push([a.value[d*2],a.value[d*2+1]]);return e}),t=o.computed(()=>l.value.map(e=>e.join(",")).join(" "));function r(e){e.stopPropagation();let d=[e.clientX,e.clientY];const g=l.value.map(v=>v.map(c=>c));function M(v){const c=d[0]-v.clientX,h=d[1]-v.clientY,s=l.value.map(i=>i.map(m=>m));let p=g.map(i=>[i[0]-n.pixelRatio*c/n.scale,i[1]-n.pixelRatio*h/n.scale]);n.constrain&&(p=p.map(i=>[Math.min(Math.max(0,i[0]),n.imageSize[0]),Math.min(Math.max(0,i[1]),n.imageSize[1])])),p=p.map(i=>i.map(m=>Math.round(m)));let u=!1;p.forEach((i,m)=>{i.forEach((f,E)=>{u=u||f!==s[m][E]})}),u&&(a.value=p.flat())}function w(){document.removeEventListener("mousemove",M),document.removeEventListener("mouseup",w)}document.addEventListener("mousemove",M),document.addEventListener("mouseup",w)}function k(e,d){d.stopPropagation();let g=[d.clientX,d.clientY];const M=l.value.map(c=>c.map(h=>h));function w(c){const h=g[0]-c.clientX,s=g[1]-c.clientY,p=l.value.map(m=>m.map(f=>f));let u=l.value.map(m=>m.map(f=>f));u[e]=[M[e][0]-n.pixelRatio*h/n.scale,M[e][1]-n.pixelRatio*s/n.scale],n.constrain&&(u[e][0]=Math.min(Math.max(0,u[e][0]),n.imageSize[0]),u[e][1]=Math.min(Math.max(0,u[e][1]),n.imageSize[1])),u=u.map(m=>m.map(f=>Math.round(f))),(u[e][0]!==p[e][0]||u[e][1]!==p[e][1])&&(a.value=u.flat())}function v(){document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",v)}document.addEventListener("mousemove",w),document.addEventListener("mouseup",v)}return(e,d)=>(o.openBlock(),o.createElementBlock("g",null,[o.createElementVNode("polyline",{onMousedown:r,points:t.value,stroke:e.color,"stroke-width":e.thickness*e.pixelRatio/e.scale,fill:"none"},null,40,U),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(l.value,(g,M)=>(o.openBlock(),o.createElementBlock("rect",{key:M,onMousedown:w=>k(M,w),x:g[0]-.5*e.handleSize*e.pixelRatio/e.scale,y:g[1]-.5*e.handleSize*e.pixelRatio/e.scale,width:e.handleSize*e.pixelRatio/e.scale,height:e.handleSize*e.pixelRatio/e.scale,stroke:e.handleBorderColor,fill:e.handleFillColor,"stroke-width":e.pixelRatio/e.scale},null,40,A))),128))]))}}),q=["cx","cy","r","stroke","fill","stroke-width"],O=["cx","cy","r","stroke","stroke-width"],G=["x","y","width","height","stroke","fill","stroke-width"],Z=o.defineComponent({__name:"TrameImageCircle",props:o.mergeModels({imageSize:{},pixelRatio:{},scale:{},constrain:{type:Boolean,default:!0},fillColor:{default:"transparent"},borderColor:{default:"lime"},borderSize:{default:2},handleSize:{default:10},handleFillColor:{default:"#ffffffdd"},handleBorderColor:{default:"#000000dd"}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(z){const n=z,a=o.useModel(z,"modelValue");function y(t){t.stopPropagation();let r=[t.clientX,t.clientY];const k=[...a.value];function e(g){const M=r[0]-g.clientX,w=r[1]-g.clientY,v=[...a.value];let c=[k[0]-n.pixelRatio*M/n.scale,k[1]-n.pixelRatio*w/n.scale,v[2]];n.constrain&&(c[0]=Math.min(Math.max(0,c[0]),n.imageSize[0]),c[1]=Math.min(Math.max(0,c[1]),n.imageSize[1])),c=c.map(s=>Math.round(s));let h=!1;c.forEach((s,p)=>{h=h||s!==v[p]}),h&&(a.value=c)}function d(){document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",d)}document.addEventListener("mousemove",e),document.addEventListener("mouseup",d)}function l(t,r){r.stopPropagation();let k=[r.clientX,r.clientY];const e=[...a.value];function d(M){const w=k[0]-M.clientX,v=[...a.value];let c=[v[0],v[1],e[2]-n.pixelRatio*w/n.scale];c[2]=Math.max(1,c[2]),c=c.map(s=>Math.round(s));let h=!1;c.forEach((s,p)=>{h=h||s!==v[p]}),h&&(a.value=c)}function g(){document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",g)}document.addEventListener("mousemove",d),document.addEventListener("mouseup",g)}return(t,r)=>(o.openBlock(),o.createElementBlock("g",null,[o.createElementVNode("circle",{onMousedown:y,cx:a.value[0],cy:a.value[1],r:a.value[2],stroke:t.borderColor,fill:t.fillColor,"stroke-width":t.borderSize*t.pixelRatio/t.scale},null,40,q),o.createElementVNode("circle",{cx:a.value[0],cy:a.value[1],r:.5*t.pixelRatio/t.scale,stroke:t.borderColor,"stroke-width":t.borderSize*t.pixelRatio/t.scale,fill:"transparent"},null,8,O),o.createElementVNode("rect",{onMousedown:r[0]||(r[0]=k=>l(0,k)),x:a.value[0]+a.value[2]-.5*t.handleSize*t.pixelRatio/t.scale,y:a.value[1]-.5*t.handleSize*t.pixelRatio/t.scale,width:t.handleSize*t.pixelRatio/t.scale,height:t.handleSize*t.pixelRatio/t.scale,stroke:t.handleBorderColor,fill:t.handleFillColor,"stroke-width":t.pixelRatio/t.scale},null,40,G)]))}}),J=["points","stroke","fill","stroke-width"],K=["onMousedown","x","y","width","height","stroke","fill","stroke-width"],Q=o.defineComponent({__name:"TrameImagePolygon",props:o.mergeModels({imageSize:{},pixelRatio:{},scale:{},constrain:{type:Boolean,default:!0},fillColor:{default:"transparent"},borderColor:{default:"lime"},borderSize:{default:2},handleSize:{default:10},handleFillColor:{default:"#ffffffdd"},handleBorderColor:{default:"#000000dd"}},{modelValue:{required:!0},modelModifiers:{}}),emits:["update:modelValue"],setup(z){const n=z,a=o.useModel(z,"modelValue"),y=o.computed(()=>Math.floor(a.value.length/2)),l=o.computed(()=>{const e=[];for(let d=0;d<y.value;++d)e.push([a.value[d*2],a.value[d*2+1]]);return e}),t=o.computed(()=>l.value.map(e=>e.join(",")).join(" "));function r(e){e.stopPropagation();let d=[e.clientX,e.clientY];const g=l.value.map(v=>v.map(c=>c));function M(v){const c=d[0]-v.clientX,h=d[1]-v.clientY,s=l.value.map(i=>i.map(m=>m));let p=g.map(i=>[i[0]-n.pixelRatio*c/n.scale,i[1]-n.pixelRatio*h/n.scale]);n.constrain&&(p=p.map(i=>[Math.min(Math.max(0,i[0]),n.imageSize[0]),Math.min(Math.max(0,i[1]),n.imageSize[1])])),p=p.map(i=>i.map(m=>Math.round(m)));let u=!1;p.forEach((i,m)=>{i.forEach((f,E)=>{u=u||f!==s[m][E]})}),u&&(a.value=p.flat())}function w(){document.removeEventListener("mousemove",M),document.removeEventListener("mouseup",w)}document.addEventListener("mousemove",M),document.addEventListener("mouseup",w)}function k(e,d){d.stopPropagation();let g=[d.clientX,d.clientY];const M=l.value.map(c=>c.map(h=>h));function w(c){const h=g[0]-c.clientX,s=g[1]-c.clientY,p=l.value.map(m=>m.map(f=>f));let u=l.value.map(m=>m.map(f=>f));u[e]=[M[e][0]-n.pixelRatio*h/n.scale,M[e][1]-n.pixelRatio*s/n.scale],n.constrain&&(u[e][0]=Math.min(Math.max(0,u[e][0]),n.imageSize[0]),u[e][1]=Math.min(Math.max(0,u[e][1]),n.imageSize[1])),u=u.map(m=>m.map(f=>Math.round(f))),(u[e][0]!==p[e][0]||u[e][1]!==p[e][1])&&(a.value=u.flat())}function v(){document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",v)}document.addEventListener("mousemove",w),document.addEventListener("mouseup",v)}return(e,d)=>(o.openBlock(),o.createElementBlock("g",null,[o.createElementVNode("polygon",{onMousedown:r,points:t.value,stroke:e.borderColor,fill:e.fillColor,"stroke-width":e.borderSize*e.pixelRatio/e.scale},null,40,J),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(l.value,(g,M)=>(o.openBlock(),o.createElementBlock("rect",{key:M,onMousedown:w=>k(M,w),x:g[0]-.5*e.handleSize*e.pixelRatio/e.scale,y:g[1]-.5*e.handleSize*e.pixelRatio/e.scale,width:e.handleSize*e.pixelRatio/e.scale,height:e.handleSize*e.pixelRatio/e.scale,stroke:e.handleBorderColor,fill:e.handleFillColor,"stroke-width":e.pixelRatio/e.scale},null,40,K))),128))]))}}),x=["x1","x2","y2","stroke","stroke-width"],_=["x","y","fill","font-family","font-size"],ee=["y1","x2","y2","stroke","stroke-width"],oe=["x","y","fill","font-family","font-size"],Y={trameImage:D,trameImageRoi:I,trameImageLine:j,trameImageCircle:Z,trameImagePolygon:Q,trameImageGrid:o.defineComponent({__name:"TrameImageGrid",props:{imageSize:{},pixelRatio:{},scale:{},spacing:{},color:{default:"#ffffffaa"},thickness:{default:.5},fontFamily:{default:"monospace"},fontSize:{default:12}},setup(z){const n=z,a=o.computed(()=>{const l=[],t=Math.floor(n.imageSize[0]/n.spacing[0])+1;for(let r=0;r<t;++r)l.push(r*n.spacing[0]);return l}),y=o.computed(()=>{const l=[],t=Math.floor(n.imageSize[1]/n.spacing[1])+1;for(let r=0;r<t;++r)l.push(r*n.spacing[1]);return l});return(l,t)=>(o.openBlock(),o.createElementBlock("g",null,[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(a.value,(r,k)=>(o.openBlock(),o.createElementBlock(o.Fragment,{key:k},[o.createElementVNode("line",{x1:r,y1:0,x2:r,y2:n.imageSize[1],stroke:l.color,"stroke-width":l.thickness*l.pixelRatio/l.scale,"pointer-events":"none"},null,8,x),o.createElementVNode("text",{x:r,y:-l.fontSize*l.pixelRatio/l.scale,fill:l.color,"font-family":l.fontFamily,"text-anchor":"middle","font-size":l.fontSize*l.pixelRatio/l.scale,"pointer-events":"none",style:{"user-select":"none"}},o.toDisplayString(r),9,_)],64))),128)),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(y.value,(r,k)=>(o.openBlock(),o.createElementBlock(o.Fragment,{key:k},[o.createElementVNode("line",{x1:0,y1:r,x2:n.imageSize[0],y2:r,stroke:l.color,"stroke-width":l.thickness*l.pixelRatio/l.scale,"pointer-events":"none"},null,8,ee),o.createElementVNode("text",{x:-l.fontSize*l.pixelRatio/l.scale,y:r,fill:l.color,"font-family":l.fontFamily,"text-anchor":"end","dominant-baseline":"middle","font-size":l.fontSize*l.pixelRatio/l.scale,"pointer-events":"none",style:{"user-select":"none"}},o.toDisplayString(r),9,oe)],64))),128))]))}})};function te(z){Object.keys(Y).forEach(n=>{z.component(n,Y[n])})}P.install=te,Object.defineProperty(P,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=trame_image_tools.umd.js.map
diff --git a/vue-components/src/components/TrameImage.vue b/vue-components/src/components/TrameImage.vue
index daacc74..4d6968f 100644
--- a/vue-components/src/components/TrameImage.vue
+++ b/vue-components/src/components/TrameImage.vue
@@ -238,7 +238,7 @@ onBeforeUnmount(() => {
 <template>
   <svg
     ref="svg-root"
-    @wheel="onWheel"
+    @wheel.prevent="onWheel"
     @mousedown="onMouseDown"
     version="1.1"
     width="100%"