itk-viewer-transfer-function-editor - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

dist/TransferFunctionEditor.es.js

@@ -454,16 +454,18 @@ var __defProp = Object.defineProperty;
       const [tailX] = linePoints[linePoints.length - 2];
-      const headXClamped = Math.max(0, headX);
-      const tailXClamped = Math.min(width, tailX);
-      const colorCanvasWidth = Math.floor(tailXClamped - headXClamped) || borderWidth;
-      const pointPixelWidth = tailX - headX;
-      const headClampAmount = (headXClamped - headX) / pointPixelWidth;
-      const tailClampAmount = (tailXClamped - tailX) / pointPixelWidth;
-      const dataRange = colorTransferFunction.getMappingRange();
-      const dataWidth = dataRange[1] - dataRange[0];
-      const visibleDataRange = [
-        dataRange[0] + dataWidth * headClampAmount,
-        dataRange[1] + dataWidth * tailClampAmount
-      ];
-      updateColorCanvas(colorTransferFunction, colorCanvasWidth, visibleDataRange, colorCanvas);
-      ctx.drawImage(colorCanvas, 0, 0, colorCanvas.width, colorCanvas.height, Math.floor(headXClamped), Math.floor(top), colorCanvasWidth, Math.ceil(bottom - top));
+      const headXClamped = Math.min(width, Math.max(0, headX));
+      const tailXClamped = Math.min(width, Math.max(0, tailX));
+      const colorCanvasWidth = Math.ceil(tailXClamped - headXClamped);
+      if (colorCanvasWidth) {
+        const pointPixelWidth = tailX - headX;
+        const headClampAmount = (headXClamped - headX) / pointPixelWidth;
+        const tailClampAmount = (tailXClamped - tailX) / pointPixelWidth;
+        const dataRange = colorTransferFunction.getMappingRange();
+        const dataWidth = dataRange[1] - dataRange[0];
+        const visibleDataRange = [
+          dataRange[0] + dataWidth * headClampAmount,
+          dataRange[1] + dataWidth * tailClampAmount
+        ];
+        updateColorCanvas(colorTransferFunction, colorCanvasWidth, visibleDataRange, colorCanvas);
+        ctx.drawImage(colorCanvas, 0, 0, colorCanvas.width, colorCanvas.height, Math.floor(headXClamped), Math.floor(top), colorCanvasWidth, Math.ceil(bottom - top));
+      }
       ctx.restore();
@@ -470,0 +472,0 @@ }

dist/TransferFunctionEditor.umd.js

@@ -1,1 +0,1 @@
-var it=Object.defineProperty;var ot=(g,v,w)=>v in g?it(g,v,{enumerable:!0,configurable:!0,writable:!0,value:w}):g[v]=w;var s=(g,v,w)=>(ot(g,typeof v!="symbol"?v+"":v,w),w);(function(g,v){typeof exports=="object"&&typeof module!="undefined"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(g=typeof globalThis!="undefined"?globalThis:g||self,v(g.TransferFunctionEditor={}))})(this,function(g){"use strict";const w=()=>{const n=document.createElementNS("http://www.w3.org/2000/svg","svg");return n.setAttribute("style","position: absolute; top: 0; left: 0; z-index: 2; box-sizing: border-box; width: 100%; height: 100%;"),n},R=n=>{const t=document.createElement("div");t.setAttribute("style","position: relative; width: 100%; height: 100%"),n.appendChild(t);const e=w();t.appendChild(e);const i=new EventTarget,o=d=>{i.addEventListener("sizeupdated",d)};new ResizeObserver(()=>{i.dispatchEvent(new Event("sizeupdated"))}).observe(t);const h=document.createElementNS("http://www.w3.org/2000/svg","rect");e.appendChild(h),h.setAttribute("fill","none"),h.setAttribute("stroke","black");const c=d=>{e.appendChild(d)},b=d=>{e.removeChild(d)};let r=[0,1,0,1];const m=()=>r,f=(d,p,u=0,l=1)=>{r=[d,p,u,l],i.dispatchEvent(new Event("sizeupdated"))},P=()=>{const{top:d,left:p,width:u,height:l}=t.getBoundingClientRect();return{width:u-2*10,height:l-2*10,top:d+10,left:p+10}},T=(d,p)=>{const{top:u,left:l,width:A,height:C}=P(),S=r[1]-r[0],D=r[3]-r[2];return[(d-l)/A*S+r[0],(1-(p-u)/C)*D+r[2]]},E=(d,p)=>{const{width:u,height:l}=P(),A=r[1]-r[0],C=(d-r[0])/A*u+10,S=r[3]-r[2],D=(1-(p-r[2])/S)*l+10;return[C,D]},x=()=>{const[d,p]=E(0,0),[u,l]=E(1,1);return{left:d,bottom:p,right:u,top:l}};return o(()=>{const{left:d,bottom:p,right:u,top:l}=x();h.setAttribute("x",`${d}`),h.setAttribute("y",`${l}`),h.setAttribute("width",`${Math.max(0,u-d)}`),h.setAttribute("height",`${Math.max(0,p-l)}`)}),{appendChild:c,removeChild:b,addSizeObserver:o,getViewBox:m,setViewBox:f,domToNormalized:T,normalizedToSvg:E,borderSize:x,remove:()=>n.removeChild(t),root:t}},V="controlPoint",H=()=>{const n=document.createElementNS("http://www.w3.org/2000/svg","circle");return n.setAttribute("r","9"),n.setAttribute("fill","white"),n.setAttribute("stroke","black"),n.setAttribute("stroke-width","2"),n.setAttribute("class",V),n.setAttribute("style","cursor: move;"),n};class W{constructor(t,e,i,o=!1){s(this,"element");s(this,"container");s(this,"isDragging",!1);s(this,"isHovered",!1);s(this,"point");s(this,"DELETE_EVENT","deleteme");s(this,"eventTarget",new EventTarget);this.element=H(),this.point=e,this.container=t,t.addSizeObserver(()=>{this.positionElement()}),i&&this.eventTarget.addEventListener(this.DELETE_EVENT,a=>{i(a)}),t.appendChild(this.element),this.positionElement(),this.setupInteraction(),o&&this.startInteraction(!0)}remove(){this.container.removeChild(this.element)}positionElement(){const{x:t,y:e}=this.point,[i,o]=this.container.normalizedToSvg(t,e);this.element.setAttribute("cx",String(i)),this.element.setAttribute("cy",String(o))}movePoint(t){const[e,i]=this.container.domToNormalized(t.clientX,t.clientY);this.point.setPosition(e,i),this.positionElement()}startInteraction(t=!1){this.isDragging=t,this.isDragging||this.element.setAttribute("stroke","red");const e=o=>{this.isDragging=!0,this.element.setAttribute("stroke","black"),this.movePoint(o)};document.addEventListener("pointermove",e);const i=()=>{if(document.removeEventListener("pointermove",e),document.removeEventListener("pointerup",i),!this.isDragging){const o=new CustomEvent(this.DELETE_EVENT,{detail:this});this.eventTarget.dispatchEvent(o)}this.isHovered||this.element.setAttribute("stroke-width","2"),this.isDragging=!1};document.addEventListener("pointerup",i)}setupInteraction(){this.element.addEventListener("pointerdown",t=>{t.stopPropagation(),t.preventDefault(),this.startInteraction()}),this.element.addEventListener("pointerenter",()=>{this.isHovered=!0,this.element.setAttribute("stroke-width","4")}),this.element.addEventListener("pointerleave",()=>{this.isHovered=!1,this.isDragging||this.element.setAttribute("stroke-width","2")})}}class G{constructor(t,e){s(this,"container");s(this,"points");s(this,"onPointsUpdated");s(this,"controlPoints",[]);s(this,"isNewPointFromPointer",!1);this.container=t,this.points=e;const{root:i}=t;i.addEventListener("pointerdown",o=>this.onPointerDown(o)),this.onPointsUpdated=()=>this.updatePoints(),this.points.eventTarget.addEventListener("updated",this.onPointsUpdated),this.updatePoints()}remove(){this.points.eventTarget.removeEventListener("updated",this.onPointsUpdated)}onPointerDown(t){t.preventDefault();const[e,i]=this.container.domToNormalized(t.clientX,t.clientY);this.isNewPointFromPointer=!0,this.points.addPoint(e,i),this.isNewPointFromPointer=!1}onControlPointDelete(t){this.points.removePoint(t.detail.point)}updatePoints(){const t=this.controlPoints.filter(o=>!this.points.points.find(a=>a===o.point));t.forEach(o=>o.remove()),this.controlPoints=this.controlPoints.filter(o=>!t.includes(o));const e=o=>this.controlPoints.find(a=>a.point===o),i=o=>this.controlPoints.push(new W(this.container,o,a=>this.onControlPointDelete(a),this.isNewPointFromPointer));this.points.points.filter(o=>!e(o)).forEach(i)}}const M=n=>Math.max(0,Math.min(1,n));class X{constructor(t,e){s(this,"_x");s(this,"_y");s(this,"eventTarget",new EventTarget);this.x=t,this.y=e}get x(){return this._x}set x(t){this._x=M(t),this.dispatchUpdatedEvent()}get y(){return this._y}set y(t){this._y=M(t),this.dispatchUpdatedEvent()}setPosition(t,e){this.x=t,this.y=e,this.dispatchUpdatedEvent()}dispatchUpdatedEvent(){this.eventTarget.dispatchEvent(new CustomEvent("updated",{detail:[this.x,this.y]}))}}const _=n=>{if(n.length===0)return[[0,1],[1,1]];if(n.length===1){const[,i]=n[0];return[[0,i],[1,i]]}const t=n[0],e=n[n.length-1];return[[t[0],0],...n,[e[0],0]]},I=n=>_(n.map(({x:t,y:e})=>[t,e]));class Y{constructor(){s(this,"_points",[]);s(this,"eventTarget",new EventTarget)}get points(){return[...this._points]}addPoint(t,e){const i=this.createPoint(t,e);return this.dispatchUpdatedEvent(),i}addPoints(t){return t.map(([i,o])=>this.createPoint(i,o))}setPoints(t){return[...this._points].forEach(e=>this.deletePoint(e)),this.addPoints(t)}removePoint(t){this.deletePoint(t),this.dispatchUpdatedEvent()}dispatchUpdatedEvent(){this.eventTarget.dispatchEvent(new CustomEvent("updated",{detail:this._points}))}createPoint(t,e){const i=new X(t,e);return i.eventTarget.addEventListener("updated",()=>{this._points.sort((o,a)=>o.x-a.x),this.dispatchUpdatedEvent()}),this._points.push(i),this._points.sort((o,a)=>o.x-a.x),i}deletePoint(t){this._points=this._points.filter(e=>e!==t)}}const $=()=>{const n=document.createElementNS("http://www.w3.org/2000/svg","polyline");return n.setAttribute("fill","none"),n.setAttribute("stroke","black"),n.setAttribute("stroke-width","2"),n};class j{constructor(t,e){s(this,"points");s(this,"container");s(this,"onPointsUpdated");s(this,"element");this.container=t,this.points=e,this.element=$(),this.container.appendChild(this.element),this.onPointsUpdated=()=>this.update(),this.points.eventTarget.addEventListener("updated",this.onPointsUpdated),this.container.addSizeObserver(()=>{this.update()}),this.update()}remove(){this.points.eventTarget.removeEventListener("updated",this.onPointsUpdated)}update(){if(this.points.points.length===0){this.element.setAttribute("points","");return}const t=I(this.points.points).map(([e,i])=>this.container.normalizedToSvg(e,i)).map(([e,i])=>`${e},${i}`).join(" ");this.element.setAttribute("points",t)}}const U=1.1,Z=n=>{n.root.addEventListener("wheel",t=>{t.preventDefault(),t.stopPropagation();const e=t.deltaY>0?U:1/U,[i,o]=n.domToNormalized(t.clientX,t.clientY),[a,h,c,b]=n.getViewBox(),r=Math.max(0,a-Math.max(0,i-a)*(e-1)),m=Math.min(1,(h-a)*e+r),f=Math.max(0,c-Math.max(0,o-c)*(e-1)),P=Math.min(1,(b-c)*e+f);n.setViewBox(r,m,f,P)})},q=(n,t,e,i={lineWidth:1,strokeStyle:"#000",fillStyle:void 0,clip:!1})=>{const o=t[3],a=t[2]/(e.length-1),h=o+t[1];n.lineWidth=i.lineWidth,n.strokeStyle=i.strokeStyle,n.beginPath(),n.moveTo(t[0],t[1]+t[3]);for(let c=0;c<e.length;c++)n.lineTo(t[0]+c*a,Math.max(t[1],h-e[c]*o));if(i.fillStyle){if(n.fillStyle=i.fillStyle,n.lineTo(t[0]+t[2],t[1]+t[3]),i.clip){n.clip();return}n.fill()}n.stroke()},y=1,J=(n,t,e,i)=>{const o=i||document.createElement("canvas");o.setAttribute("width",String(t)),o.setAttribute("height",String(y));const a=n.getUint8Table(e[0],e[1],t,!0),h=o.getContext("2d");if(h){const c=h.getImageData(0,0,t,y);for(let r=0;r<y;r++)c.data.set(a,r*4*t);const b=y*t*4;for(let r=3;r<b;r+=4)c.data[r]=255;h.putImageData(c,0,0)}return o},K=n=>{const t=_(n);return t[0][0]-=1e-8,t[t.length-1][0]+=1e-8,t},F="rgba(50, 50, 50, 0.3)",Q=(n,t)=>{const e=document.createElement("canvas");n.root.appendChild(e),e.setAttribute("style","width: 100%; height: 100%; ");const i=e.getContext("2d");let o,a;const h=document.createElement("canvas"),c=()=>{if(!!i){if(i.clearRect(0,0,e.width,e.height),o){const{width:m,height:f}=n.root.getBoundingClientRect();e.setAttribute("width",String(m)),e.setAttribute("height",String(f));const{left:P,right:T,bottom:E,top:x}=n.borderSize(),L=Math.ceil(T-P);if(L<0)return;const B=I(t.points),d=[[0,0],...B,[1,0]].map(([N,z])=>n.normalizedToSvg(N,z));i.save(),i.beginPath(),d.forEach(([N,z])=>{i.lineTo(N,z)}),i.clip();const[p]=d[1],[u]=d[d.length-2],l=Math.max(0,p),A=Math.min(m,u),C=Math.floor(A-l)||L,S=u-p,D=(l-p)/S,et=(A-u)/S,k=o.getMappingRange(),O=k[1]-k[0],nt=[k[0]+O*D,k[1]+O*et];J(o,C,nt,h),i.drawImage(h,0,0,h.width,h.height,Math.floor(l),Math.floor(x),C,Math.ceil(E-x)),i.restore()}if(a){const{left:m,right:f,bottom:P,top:T}=n.borderSize(),E=[m,T,f-m,P-T];q(i,E,a,{lineWidth:1,strokeStyle:F,fillStyle:F})}}};return n.addSizeObserver(c),t.eventTarget.addEventListener("updated",c),{container:n,canvas:e,setColorTransferFunction:m=>{o=m,c()},setHistogram:m=>{a=m,c()},render:c,remove:()=>n.root.removeChild(e)}};class tt{constructor(t){s(this,"points");s(this,"line");s(this,"pointController");s(this,"container");s(this,"background");this.container=R(t),Z(this.container),this.points=new Y;const e=[[0,0],[1,1]];this.points.setPoints(e),this.background=Q(this.container,this.points),this.line=new j(this.container,this.points),this.pointController=new G(this.container,this.points)}remove(){this.background.remove(),this.container.remove()}getPoints(){return this.points.points.map(({x:t,y:e})=>[t,e])}setPoints(t){this.points.setPoints(t),this.pointController.updatePoints(),this.line.update(),this.background.render()}get eventTarget(){return this.points.eventTarget}setViewBox(t,e,i=0,o=1){this.container.setViewBox(t,e,i,o)}setColorTransferFunction(t){this.background.setColorTransferFunction(t)}setHistogram(t){this.background.setHistogram(t)}}g.TransferFunctionEditor=tt,g.windowPointsForSort=K,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+var et=Object.defineProperty;var nt=(m,v,b)=>v in m?et(m,v,{enumerable:!0,configurable:!0,writable:!0,value:b}):m[v]=b;var s=(m,v,b)=>(nt(m,typeof v!="symbol"?v+"":v,b),b);(function(m,v){typeof exports=="object"&&typeof module!="undefined"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(m=typeof globalThis!="undefined"?globalThis:m||self,v(m.TransferFunctionEditor={}))})(this,function(m){"use strict";const b=()=>{const n=document.createElementNS("http://www.w3.org/2000/svg","svg");return n.setAttribute("style","position: absolute; top: 0; left: 0; z-index: 2; box-sizing: border-box; width: 100%; height: 100%;"),n},F=n=>{const t=document.createElement("div");t.setAttribute("style","position: relative; width: 100%; height: 100%"),n.appendChild(t);const e=b();t.appendChild(e);const i=new EventTarget,o=d=>{i.addEventListener("sizeupdated",d)};new ResizeObserver(()=>{i.dispatchEvent(new Event("sizeupdated"))}).observe(t);const h=document.createElementNS("http://www.w3.org/2000/svg","rect");e.appendChild(h),h.setAttribute("fill","none"),h.setAttribute("stroke","black");const c=d=>{e.appendChild(d)},C=d=>{e.removeChild(d)};let r=[0,1,0,1];const g=()=>r,w=(d,p,u=0,l=1)=>{r=[d,p,u,l],i.dispatchEvent(new Event("sizeupdated"))},E=()=>{const{top:d,left:p,width:u,height:l}=t.getBoundingClientRect();return{width:u-2*10,height:l-2*10,top:d+10,left:p+10}},S=(d,p)=>{const{top:u,left:l,width:x,height:A}=E(),f=r[1]-r[0],P=r[3]-r[2];return[(d-l)/x*f+r[0],(1-(p-u)/A)*P+r[2]]},T=(d,p)=>{const{width:u,height:l}=E(),x=r[1]-r[0],A=(d-r[0])/x*u+10,f=r[3]-r[2],P=(1-(p-r[2])/f)*l+10;return[A,P]},D=()=>{const[d,p]=T(0,0),[u,l]=T(1,1);return{left:d,bottom:p,right:u,top:l}};return o(()=>{const{left:d,bottom:p,right:u,top:l}=D();h.setAttribute("x",`${d}`),h.setAttribute("y",`${l}`),h.setAttribute("width",`${Math.max(0,u-d)}`),h.setAttribute("height",`${Math.max(0,p-l)}`)}),{appendChild:c,removeChild:C,addSizeObserver:o,getViewBox:g,setViewBox:w,domToNormalized:S,normalizedToSvg:T,borderSize:D,remove:()=>n.removeChild(t),root:t}},B="controlPoint",O=()=>{const n=document.createElementNS("http://www.w3.org/2000/svg","circle");return n.setAttribute("r","9"),n.setAttribute("fill","white"),n.setAttribute("stroke","black"),n.setAttribute("stroke-width","2"),n.setAttribute("class",B),n.setAttribute("style","cursor: move;"),n};class R{constructor(t,e,i,o=!1){s(this,"element");s(this,"container");s(this,"isDragging",!1);s(this,"isHovered",!1);s(this,"point");s(this,"DELETE_EVENT","deleteme");s(this,"eventTarget",new EventTarget);this.element=O(),this.point=e,this.container=t,t.addSizeObserver(()=>{this.positionElement()}),i&&this.eventTarget.addEventListener(this.DELETE_EVENT,a=>{i(a)}),t.appendChild(this.element),this.positionElement(),this.setupInteraction(),o&&this.startInteraction(!0)}remove(){this.container.removeChild(this.element)}positionElement(){const{x:t,y:e}=this.point,[i,o]=this.container.normalizedToSvg(t,e);this.element.setAttribute("cx",String(i)),this.element.setAttribute("cy",String(o))}movePoint(t){const[e,i]=this.container.domToNormalized(t.clientX,t.clientY);this.point.setPosition(e,i),this.positionElement()}startInteraction(t=!1){this.isDragging=t,this.isDragging||this.element.setAttribute("stroke","red");const e=o=>{this.isDragging=!0,this.element.setAttribute("stroke","black"),this.movePoint(o)};document.addEventListener("pointermove",e);const i=()=>{if(document.removeEventListener("pointermove",e),document.removeEventListener("pointerup",i),!this.isDragging){const o=new CustomEvent(this.DELETE_EVENT,{detail:this});this.eventTarget.dispatchEvent(o)}this.isHovered||this.element.setAttribute("stroke-width","2"),this.isDragging=!1};document.addEventListener("pointerup",i)}setupInteraction(){this.element.addEventListener("pointerdown",t=>{t.stopPropagation(),t.preventDefault(),this.startInteraction()}),this.element.addEventListener("pointerenter",()=>{this.isHovered=!0,this.element.setAttribute("stroke-width","4")}),this.element.addEventListener("pointerleave",()=>{this.isHovered=!1,this.isDragging||this.element.setAttribute("stroke-width","2")})}}class V{constructor(t,e){s(this,"container");s(this,"points");s(this,"onPointsUpdated");s(this,"controlPoints",[]);s(this,"isNewPointFromPointer",!1);this.container=t,this.points=e;const{root:i}=t;i.addEventListener("pointerdown",o=>this.onPointerDown(o)),this.onPointsUpdated=()=>this.updatePoints(),this.points.eventTarget.addEventListener("updated",this.onPointsUpdated),this.updatePoints()}remove(){this.points.eventTarget.removeEventListener("updated",this.onPointsUpdated)}onPointerDown(t){t.preventDefault();const[e,i]=this.container.domToNormalized(t.clientX,t.clientY);this.isNewPointFromPointer=!0,this.points.addPoint(e,i),this.isNewPointFromPointer=!1}onControlPointDelete(t){this.points.removePoint(t.detail.point)}updatePoints(){const t=this.controlPoints.filter(o=>!this.points.points.find(a=>a===o.point));t.forEach(o=>o.remove()),this.controlPoints=this.controlPoints.filter(o=>!t.includes(o));const e=o=>this.controlPoints.find(a=>a.point===o),i=o=>this.controlPoints.push(new R(this.container,o,a=>this.onControlPointDelete(a),this.isNewPointFromPointer));this.points.points.filter(o=>!e(o)).forEach(i)}}const L=n=>Math.max(0,Math.min(1,n));class H{constructor(t,e){s(this,"_x");s(this,"_y");s(this,"eventTarget",new EventTarget);this.x=t,this.y=e}get x(){return this._x}set x(t){this._x=L(t),this.dispatchUpdatedEvent()}get y(){return this._y}set y(t){this._y=L(t),this.dispatchUpdatedEvent()}setPosition(t,e){this.x=t,this.y=e,this.dispatchUpdatedEvent()}dispatchUpdatedEvent(){this.eventTarget.dispatchEvent(new CustomEvent("updated",{detail:[this.x,this.y]}))}}const M=n=>{if(n.length===0)return[[0,1],[1,1]];if(n.length===1){const[,i]=n[0];return[[0,i],[1,i]]}const t=n[0],e=n[n.length-1];return[[t[0],0],...n,[e[0],0]]},N=n=>M(n.map(({x:t,y:e})=>[t,e]));class W{constructor(){s(this,"_points",[]);s(this,"eventTarget",new EventTarget)}get points(){return[...this._points]}addPoint(t,e){const i=this.createPoint(t,e);return this.dispatchUpdatedEvent(),i}addPoints(t){return t.map(([i,o])=>this.createPoint(i,o))}setPoints(t){return[...this._points].forEach(e=>this.deletePoint(e)),this.addPoints(t)}removePoint(t){this.deletePoint(t),this.dispatchUpdatedEvent()}dispatchUpdatedEvent(){this.eventTarget.dispatchEvent(new CustomEvent("updated",{detail:this._points}))}createPoint(t,e){const i=new H(t,e);return i.eventTarget.addEventListener("updated",()=>{this._points.sort((o,a)=>o.x-a.x),this.dispatchUpdatedEvent()}),this._points.push(i),this._points.sort((o,a)=>o.x-a.x),i}deletePoint(t){this._points=this._points.filter(e=>e!==t)}}const G=()=>{const n=document.createElementNS("http://www.w3.org/2000/svg","polyline");return n.setAttribute("fill","none"),n.setAttribute("stroke","black"),n.setAttribute("stroke-width","2"),n};class X{constructor(t,e){s(this,"points");s(this,"container");s(this,"onPointsUpdated");s(this,"element");this.container=t,this.points=e,this.element=G(),this.container.appendChild(this.element),this.onPointsUpdated=()=>this.update(),this.points.eventTarget.addEventListener("updated",this.onPointsUpdated),this.container.addSizeObserver(()=>{this.update()}),this.update()}remove(){this.points.eventTarget.removeEventListener("updated",this.onPointsUpdated)}update(){if(this.points.points.length===0){this.element.setAttribute("points","");return}const t=N(this.points.points).map(([e,i])=>this.container.normalizedToSvg(e,i)).map(([e,i])=>`${e},${i}`).join(" ");this.element.setAttribute("points",t)}}const z=1.1,Y=n=>{n.root.addEventListener("wheel",t=>{t.preventDefault(),t.stopPropagation();const e=t.deltaY>0?z:1/z,[i,o]=n.domToNormalized(t.clientX,t.clientY),[a,h,c,C]=n.getViewBox(),r=Math.max(0,a-Math.max(0,i-a)*(e-1)),g=Math.min(1,(h-a)*e+r),w=Math.max(0,c-Math.max(0,o-c)*(e-1)),E=Math.min(1,(C-c)*e+w);n.setViewBox(r,g,w,E)})},$=(n,t,e,i={lineWidth:1,strokeStyle:"#000",fillStyle:void 0,clip:!1})=>{const o=t[3],a=t[2]/(e.length-1),h=o+t[1];n.lineWidth=i.lineWidth,n.strokeStyle=i.strokeStyle,n.beginPath(),n.moveTo(t[0],t[1]+t[3]);for(let c=0;c<e.length;c++)n.lineTo(t[0]+c*a,Math.max(t[1],h-e[c]*o));if(i.fillStyle){if(n.fillStyle=i.fillStyle,n.lineTo(t[0]+t[2],t[1]+t[3]),i.clip){n.clip();return}n.fill()}n.stroke()},y=1,j=(n,t,e,i)=>{const o=i||document.createElement("canvas");o.setAttribute("width",String(t)),o.setAttribute("height",String(y));const a=n.getUint8Table(e[0],e[1],t,!0),h=o.getContext("2d");if(h){const c=h.getImageData(0,0,t,y);for(let r=0;r<y;r++)c.data.set(a,r*4*t);const C=y*t*4;for(let r=3;r<C;r+=4)c.data[r]=255;h.putImageData(c,0,0)}return o},Z=n=>{const t=M(n);return t[0][0]-=1e-8,t[t.length-1][0]+=1e-8,t},_="rgba(50, 50, 50, 0.3)",q=(n,t)=>{const e=document.createElement("canvas");n.root.appendChild(e),e.setAttribute("style","width: 100%; height: 100%; ");const i=e.getContext("2d");let o,a;const h=document.createElement("canvas"),c=()=>{if(!!i){if(i.clearRect(0,0,e.width,e.height),o){const{width:g,height:w}=n.root.getBoundingClientRect();e.setAttribute("width",String(g)),e.setAttribute("height",String(w));const{left:E,right:S,bottom:T,top:D}=n.borderSize();if(Math.ceil(S-E)<0)return;const I=N(t.points),d=[[0,0],...I,[1,0]].map(([f,P])=>n.normalizedToSvg(f,P));i.save(),i.beginPath(),d.forEach(([f,P])=>{i.lineTo(f,P)}),i.clip();const[p]=d[1],[u]=d[d.length-2],l=Math.min(g,Math.max(0,p)),x=Math.min(g,Math.max(0,u)),A=Math.ceil(x-l);if(A){const f=u-p,P=(l-p)/f,Q=(x-u)/f,k=o.getMappingRange(),U=k[1]-k[0],tt=[k[0]+U*P,k[1]+U*Q];j(o,A,tt,h),i.drawImage(h,0,0,h.width,h.height,Math.floor(l),Math.floor(D),A,Math.ceil(T-D))}i.restore()}if(a){const{left:g,right:w,bottom:E,top:S}=n.borderSize(),T=[g,S,w-g,E-S];$(i,T,a,{lineWidth:1,strokeStyle:_,fillStyle:_})}}};return n.addSizeObserver(c),t.eventTarget.addEventListener("updated",c),{container:n,canvas:e,setColorTransferFunction:g=>{o=g,c()},setHistogram:g=>{a=g,c()},render:c,remove:()=>n.root.removeChild(e)}};class J{constructor(t){s(this,"points");s(this,"line");s(this,"pointController");s(this,"container");s(this,"background");this.container=F(t),Y(this.container),this.points=new W;const e=[[0,0],[1,1]];this.points.setPoints(e),this.background=q(this.container,this.points),this.line=new X(this.container,this.points),this.pointController=new V(this.container,this.points)}remove(){this.background.remove(),this.container.remove()}getPoints(){return this.points.points.map(({x:t,y:e})=>[t,e])}setPoints(t){this.points.setPoints(t),this.pointController.updatePoints(),this.line.update(),this.background.render()}get eventTarget(){return this.points.eventTarget}setViewBox(t,e,i=0,o=1){this.container.setViewBox(t,e,i,o)}setColorTransferFunction(t){this.background.setColorTransferFunction(t)}setHistogram(t){this.background.setHistogram(t)}}m.TransferFunctionEditor=J,m.windowPointsForSort=Z,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package.json

 {
   "name": "itk-viewer-transfer-function-editor",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Interface to interactively edit opacity transfer functions, etc",
@@ -5,0 +5,0 @@ "files": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50381

increased by0.19%

Lines of code

764

increased by0.26%

No dependency changes