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

Comparing version 1.1.2 to 1.1.3

dist/PiecewiseUtils.d.ts

@@ -12,3 +12,3 @@ export declare type ChartStyle = {
 };
-export declare const updateColorCanvas: (colorTransferFunction: ColorTransferFunction, width: number, canvas: HTMLCanvasElement) => HTMLCanvasElement;
+export declare const updateColorCanvas: (colorTransferFunction: ColorTransferFunction, width: number, renderedDataRange: [number, number], canvas: HTMLCanvasElement) => HTMLCanvasElement;
 export declare const windowPointsForSort: (points: [number, number][]) => number[][];

dist/TransferFunctionEditor.es.js

@@ -398,8 +398,7 @@ var __defProp = Object.defineProperty;
 const CANVAS_HEIGHT = 1;
-const updateColorCanvas = (colorTransferFunction, width, canvas) => {
+const updateColorCanvas = (colorTransferFunction, width, renderedDataRange, canvas) => {
   const workCanvas = canvas || document.createElement("canvas");
   workCanvas.setAttribute("width", String(width));
   workCanvas.setAttribute("height", String(CANVAS_HEIGHT));
-  const [startValue, endValue] = colorTransferFunction.getMappingRange();
-  const rgba = colorTransferFunction.getUint8Table(startValue, endValue, width, true);
+  const rgba = colorTransferFunction.getUint8Table(renderedDataRange[0], renderedDataRange[1], width, true);
   const ctx = workCanvas.getContext("2d");
@@ -454,7 +453,18 @@ if (ctx) {
       ctx.clip();
+      const [headX] = linePoints[1];
       const [tailX] = linePoints[linePoints.length - 2];
-      const [headX] = linePoints[1];
-      const pointsRange = Math.floor(tailX - headX) || borderWidth;
-      updateColorCanvas(colorTransferFunction, pointsRange, colorCanvas);
-      ctx.drawImage(colorCanvas, 0, 0, colorCanvas.width, colorCanvas.height, Math.floor(headX), Math.floor(top), pointsRange, Math.ceil(bottom - top));
+      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));
       ctx.restore();
@@ -461,0 +471,0 @@ }

dist/TransferFunctionEditor.umd.js

@@ -1,1 +0,1 @@
-var J=Object.defineProperty;var K=(g,v,E)=>v in g?J(g,v,{enumerable:!0,configurable:!0,writable:!0,value:E}):g[v]=E;var s=(g,v,E)=>(K(g,typeof v!="symbol"?v+"":v,E),E);(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 E=()=>{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},U=n=>{const t=document.createElement("div");t.setAttribute("style","position: relative; width: 100%; height: 100%"),n.appendChild(t);const e=E();t.appendChild(e);const i=new EventTarget,o=a=>{i.addEventListener("sizeupdated",a)};new ResizeObserver(()=>{i.dispatchEvent(new Event("sizeupdated"))}).observe(t);const l=document.createElementNS("http://www.w3.org/2000/svg","rect");e.appendChild(l),l.setAttribute("fill","none"),l.setAttribute("stroke","black");const d=a=>{e.appendChild(a)},f=a=>{e.removeChild(a)};let h=[0,1,0,1];const c=()=>h,P=(a,m,u=0,p=1)=>{h=[a,m,u,p],i.dispatchEvent(new Event("sizeupdated"))},w=()=>{const{top:a,left:m,width:u,height:p}=t.getBoundingClientRect();return{width:u-2*10,height:p-2*10,top:a+10,left:m+10}},A=(a,m)=>{const{top:u,left:p,width:T,height:S}=w(),y=h[1]-h[0],k=h[3]-h[2];return[(a-p)/T*y+h[0],(1-(m-u)/S)*k+h[2]]},b=(a,m)=>{const{width:u,height:p}=w(),T=h[1]-h[0],S=(a-h[0])/T*u+10,y=h[3]-h[2],k=(1-(m-h[2])/y)*p+10;return[S,k]},C=()=>{const[a,m]=b(0,0),[u,p]=b(1,1);return{left:a,bottom:m,right:u,top:p}};return o(()=>{const{left:a,bottom:m,right:u,top:p}=C();l.setAttribute("x",`${a}`),l.setAttribute("y",`${p}`),l.setAttribute("width",`${Math.max(0,u-a)}`),l.setAttribute("height",`${Math.max(0,m-p)}`)}),{appendChild:d,removeChild:f,addSizeObserver:o,getViewBox:c,setViewBox:P,domToNormalized:A,normalizedToSvg:b,borderSize:C,remove:()=>n.removeChild(t),root:t}},B="controlPoint",F=()=>{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 O{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=F(),this.point=e,this.container=t,t.addSizeObserver(()=>{this.positionElement()}),i&&this.eventTarget.addEventListener(this.DELETE_EVENT,r=>{i(r)}),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 R{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(r=>r===o.point));t.forEach(o=>o.remove()),this.controlPoints=this.controlPoints.filter(o=>!t.includes(o));const e=o=>this.controlPoints.find(r=>r.point===o),i=o=>this.controlPoints.push(new O(this.container,o,r=>this.onControlPointDelete(r),this.isNewPointFromPointer));this.points.points.filter(o=>!e(o)).forEach(i)}}const L=n=>Math.max(0,Math.min(1,n));class V{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 N=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]]},z=n=>N(n.map(({x:t,y:e})=>[t,e]));class H{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 V(t,e);return i.eventTarget.addEventListener("updated",()=>{this._points.sort((o,r)=>o.x-r.x),this.dispatchUpdatedEvent()}),this._points.push(i),this._points.sort((o,r)=>o.x-r.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 W{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=z(this.points.points).map(([e,i])=>this.container.normalizedToSvg(e,i)).map(([e,i])=>`${e},${i}`).join(" ");this.element.setAttribute("points",t)}}const _=1.1,X=n=>{n.root.addEventListener("wheel",t=>{t.preventDefault(),t.stopPropagation();const e=t.deltaY>0?_:1/_,[i,o]=n.domToNormalized(t.clientX,t.clientY),[r,l,d,f]=n.getViewBox(),h=Math.max(0,r-Math.max(0,i-r)*(e-1)),c=Math.min(1,(l-r)*e+h),P=Math.max(0,d-Math.max(0,o-d)*(e-1)),w=Math.min(1,(f-d)*e+P);n.setViewBox(h,c,P,w)})},Y=(n,t,e,i={lineWidth:1,strokeStyle:"#000",fillStyle:void 0,clip:!1})=>{const o=t[3],r=t[2]/(e.length-1),l=o+t[1];n.lineWidth=i.lineWidth,n.strokeStyle=i.strokeStyle,n.beginPath(),n.moveTo(t[0],t[1]+t[3]);for(let d=0;d<e.length;d++)n.lineTo(t[0]+d*r,Math.max(t[1],l-e[d]*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()},x=1,$=(n,t,e)=>{const i=e||document.createElement("canvas");i.setAttribute("width",String(t)),i.setAttribute("height",String(x));const[o,r]=n.getMappingRange(),l=n.getUint8Table(o,r,t,!0),d=i.getContext("2d");if(d){const f=d.getImageData(0,0,t,x);for(let c=0;c<x;c++)f.data.set(l,c*4*t);const h=x*t*4;for(let c=3;c<h;c+=4)f.data[c]=255;d.putImageData(f,0,0)}return i},j=n=>{const t=N(n);return t[0][0]-=1e-8,t[t.length-1][0]+=1e-8,t},I="rgba(50, 50, 50, 0.3)",Z=(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,r;const l=document.createElement("canvas"),d=()=>{if(!!i){if(i.clearRect(0,0,e.width,e.height),o){const{width:c,height:P}=n.root.getBoundingClientRect();e.setAttribute("width",String(c)),e.setAttribute("height",String(P));const{left:w,right:A,bottom:b,top:C}=n.borderSize(),D=Math.ceil(A-w);if(D<0)return;const M=z(t.points),a=[[0,0],...M,[1,0]].map(([T,S])=>n.normalizedToSvg(T,S));i.save(),i.beginPath(),a.forEach(([T,S])=>{i.lineTo(T,S)}),i.clip();const[m]=a[a.length-2],[u]=a[1],p=Math.floor(m-u)||D;$(o,p,l),i.drawImage(l,0,0,l.width,l.height,Math.floor(u),Math.floor(C),p,Math.ceil(b-C)),i.restore()}if(r){const{left:c,right:P,bottom:w,top:A}=n.borderSize(),b=[c,A,P-c,w-A];Y(i,b,r,{lineWidth:1,strokeStyle:I,fillStyle:I})}}};return n.addSizeObserver(d),t.eventTarget.addEventListener("updated",d),{container:n,canvas:e,setColorTransferFunction:c=>{o=c,d()},setHistogram:c=>{r=c,d()},render:d,remove:()=>n.root.removeChild(e)}};class q{constructor(t){s(this,"points");s(this,"line");s(this,"pointController");s(this,"container");s(this,"background");this.container=U(t),X(this.container),this.points=new H;const e=[[0,0],[1,1]];this.points.setPoints(e),this.background=Z(this.container,this.points),this.line=new W(this.container,this.points),this.pointController=new R(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=q,g.windowPointsForSort=j,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+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"}})});

package.json

 {
   "name": "itk-viewer-transfer-function-editor",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "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

50283

increased by1.45%

Lines of code

762

increased by1.46%

No dependency changes