Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

itk-viewer-transfer-function-editor

Package Overview
Dependencies
Maintainers
2
Versions
20
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.2.1 to 1.2.2

15

dist/TransferFunctionEditor.es.js

@@ -54,4 +54,4 @@ var __defProp = Object.defineProperty;

const { top, left, width, height } = getSize();
const valueRange = viewBox[1] - viewBox[0];
const opacityRange = viewBox[3] - viewBox[2];
const valueRange = viewBox[1] - viewBox[0] || 1e-3;
const opacityRange = viewBox[3] - viewBox[2] || 1e-3;
return [

@@ -64,5 +64,5 @@ (x - left) / width * valueRange + viewBox[0],

const { width, height } = getSize();
const valueRange = viewBox[1] - viewBox[0];
const valueRange = viewBox[1] - viewBox[0] || 1e-3;
const xSvg = (x - viewBox[0]) / valueRange * width + PADDING;
const opacityRange = viewBox[3] - viewBox[2];
const opacityRange = viewBox[3] - viewBox[2] || 1e-3;
const ySvg = (1 - (y - viewBox[2]) / opacityRange) * height + PADDING;

@@ -360,4 +360,2 @@ return [xSvg, ySvg];

container.root.addEventListener("wheel", (e) => {
e.preventDefault();
e.stopPropagation();
const scaleFactor = e.deltaY > 0 ? SCALE_SENSITIVITY : 1 / SCALE_SENSITIVITY;

@@ -368,2 +366,7 @@ const [targetX] = container.domToNormalized(e.clientX, e.clientY);

const newRight = Math.min(1, (right - left) * scaleFactor + newLeft);
if (newLeft === left && newRight === right) {
return;
}
e.preventDefault();
e.stopPropagation();
container.setViewBox(newLeft, newRight);

@@ -370,0 +373,0 @@ });

2

dist/TransferFunctionEditor.umd.js

@@ -1,1 +0,1 @@

var nt=Object.defineProperty;var it=(g,m,w)=>m in g?nt(g,m,{enumerable:!0,configurable:!0,writable:!0,value:w}):g[m]=w;var s=(g,m,w)=>(it(g,typeof m!="symbol"?m+"":m,w),w);(function(g,m){typeof exports=="object"&&typeof module!="undefined"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(g=typeof globalThis!="undefined"?globalThis:g||self,m(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},F=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=h=>{i.addEventListener("sizeupdated",h)};new ResizeObserver(()=>{i.dispatchEvent(new Event("sizeupdated"))}).observe(t);const c=document.createElementNS("http://www.w3.org/2000/svg","rect");e.appendChild(c),c.setAttribute("fill","none"),c.setAttribute("stroke","black");const a=h=>{e.appendChild(h)},y=h=>{e.removeChild(h)};let d=[0,1,0,1];const v=()=>d,S=(h,p,u=0,l=1)=>{d=[h,p,u,l],i.dispatchEvent(new Event("sizeupdated"))},T=()=>{const{top:h,left:p,width:u,height:l}=t.getBoundingClientRect();return{width:u-2*10,height:l-2*10,top:h+10,left:p+10}},A=(h,p)=>{const{top:u,left:l,width:C,height:b}=T(),f=d[1]-d[0],P=d[3]-d[2];return[(h-l)/C*f+d[0],(1-(p-u)/b)*P+d[2]]},E=(h,p)=>{const{width:u,height:l}=T(),C=d[1]-d[0],b=(h-d[0])/C*u+10,f=d[3]-d[2],P=(1-(p-d[2])/f)*l+10;return[b,P]},x=()=>{const[h,p]=E(0,0),[u,l]=E(1,1);return{left:h,bottom:p,right:u,top:l}};return o(()=>{const{left:h,bottom:p,right:u,top:l}=x();c.setAttribute("x",`${h}`),c.setAttribute("y",`${l}`),c.setAttribute("width",`${Math.max(0,u-h)}`),c.setAttribute("height",`${Math.max(0,p-l)}`)}),{appendChild:a,removeChild:y,addSizeObserver:o,getViewBox:v,setViewBox:S,domToNormalized:A,normalizedToSvg:E,borderSize:x,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,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 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(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 R(this.container,o,r=>this.onControlPointDelete(r),this.isNewPointFromPointer));this.points.points.filter(o=>!e(o)).forEach(i)}}const z=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=z(t),this.dispatchUpdatedEvent()}get y(){return this._y}set y(t){this._y=z(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 L=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]]},M=n=>L(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,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 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=M(this.points.points).map(([e,i])=>this.container.normalizedToSvg(e,i)).map(([e,i])=>`${e},${i}`).join(" ");this.element.setAttribute("points",t)}}const N=1.1,$=n=>{n.root.addEventListener("wheel",t=>{t.preventDefault(),t.stopPropagation();const e=t.deltaY>0?N:1/N,[i]=n.domToNormalized(t.clientX,t.clientY),[o,r]=n.getViewBox(),c=Math.max(0,o-Math.max(0,i-o)*(e-1)),a=Math.min(1,(r-o)*e+c);n.setViewBox(c,a)})},Y=(n,t,e,i={lineWidth:1,strokeStyle:"#000",fillStyle:void 0,clip:!1})=>{const o=t[3],r=t[2]/(e.length-1),c=o+t[1];n.lineWidth=i.lineWidth,n.strokeStyle=i.strokeStyle,n.beginPath(),n.moveTo(t[0],t[1]+t[3]);for(let a=0;a<e.length;a++)n.lineTo(t[0]+a*r,Math.max(t[1],c-e[a]*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()},D=1,j=(n,t,e,i)=>{const o=i||document.createElement("canvas");o.setAttribute("width",String(t)),o.setAttribute("height",String(D));const r=n.getUint8Table(e[0],e[1],t,!0),c=o.getContext("2d");if(c){const a=c.getImageData(0,0,t,D);for(let d=0;d<D;d++)a.data.set(r,d*4*t);const y=D*t*4;for(let d=3;d<y;d+=4)a.data[d]=255;c.putImageData(a,0,0)}return o},Z=n=>{const t=L(n);return t[0][0]-=1e-8,t[t.length-1][0]+=1e-8,t},q=n=>{if(!n)return[];const t=n.map(a=>a===0?0:Math.log(a)),e=t.filter(Boolean),i=Math.min(...e),r=Math.max(...e)-i;return t.map(a=>a===0?0:(a-i)/r)},_="rgba(50, 50, 50, 0.3)",J=(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 c=document.createElement("canvas"),a=()=>{if(!!i){if(i.clearRect(0,0,e.width,e.height),o){const{width:v,height:S}=n.root.getBoundingClientRect();e.setAttribute("width",String(v)),e.setAttribute("height",String(S));const{left:T,right:A,bottom:E,top:x}=n.borderSize();if(Math.ceil(A-T)<0)return;const I=M(t.points),h=[[0,0],...I,[1,0]].map(([f,P])=>n.normalizedToSvg(f,P));i.save(),i.beginPath(),h.forEach(([f,P])=>{i.lineTo(f,P)}),i.clip();const[p]=h[1],[u]=h[h.length-2],l=Math.min(v,Math.max(0,p)),C=Math.min(v,Math.max(0,u)),b=Math.ceil(C-l);if(b){const f=u-p,P=(l-p)/f,tt=(C-u)/f,k=o.getMappingRange(),U=k[1]-k[0],et=[k[0]+U*P,k[1]+U*tt];j(o,b,et,c),i.drawImage(c,0,0,c.width,c.height,Math.floor(l),Math.floor(x),b,Math.ceil(E-x))}i.restore()}if(r){const{left:v,right:S,bottom:T,top:A}=n.borderSize(),E=[v,A,S-v,T-A];Y(i,E,r,{lineWidth:1,strokeStyle:_,fillStyle:_})}}};return n.addSizeObserver(a),t.eventTarget.addEventListener("updated",a),{container:n,canvas:e,setColorTransferFunction:v=>{o=v,a()},setHistogram:v=>{r=v,a()},render:a,remove:()=>n.root.removeChild(e)}};class K{constructor(t){s(this,"points");s(this,"line");s(this,"pointController");s(this,"container");s(this,"background");this.container=F(t),$(this.container),this.points=new W;const e=[[0,0],[1,1]];this.points.setPoints(e),this.background=J(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(q(t))}}g.TransferFunctionEditor=K,g.windowPointsForSort=Z,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
var nt=Object.defineProperty;var it=(g,m,w)=>m in g?nt(g,m,{enumerable:!0,configurable:!0,writable:!0,value:w}):g[m]=w;var s=(g,m,w)=>(it(g,typeof m!="symbol"?m+"":m,w),w);(function(g,m){typeof exports=="object"&&typeof module!="undefined"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(g=typeof globalThis!="undefined"?globalThis:g||self,m(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},F=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=c=>{i.addEventListener("sizeupdated",c)};new ResizeObserver(()=>{i.dispatchEvent(new Event("sizeupdated"))}).observe(t);const d=document.createElementNS("http://www.w3.org/2000/svg","rect");e.appendChild(d),d.setAttribute("fill","none"),d.setAttribute("stroke","black");const a=c=>{e.appendChild(c)},y=c=>{e.removeChild(c)};let h=[0,1,0,1];const v=()=>h,S=(c,p,u=0,l=1)=>{h=[c,p,u,l],i.dispatchEvent(new Event("sizeupdated"))},T=()=>{const{top:c,left:p,width:u,height:l}=t.getBoundingClientRect();return{width:u-2*10,height:l-2*10,top:c+10,left:p+10}},A=(c,p)=>{const{top:u,left:l,width:C,height:b}=T(),f=h[1]-h[0]||.001,P=h[3]-h[2]||.001;return[(c-l)/C*f+h[0],(1-(p-u)/b)*P+h[2]]},E=(c,p)=>{const{width:u,height:l}=T(),C=h[1]-h[0]||.001,b=(c-h[0])/C*u+10,f=h[3]-h[2]||.001,P=(1-(p-h[2])/f)*l+10;return[b,P]},x=()=>{const[c,p]=E(0,0),[u,l]=E(1,1);return{left:c,bottom:p,right:u,top:l}};return o(()=>{const{left:c,bottom:p,right:u,top:l}=x();d.setAttribute("x",`${c}`),d.setAttribute("y",`${l}`),d.setAttribute("width",`${Math.max(0,u-c)}`),d.setAttribute("height",`${Math.max(0,p-l)}`)}),{appendChild:a,removeChild:y,addSizeObserver:o,getViewBox:v,setViewBox:S,domToNormalized:A,normalizedToSvg:E,borderSize:x,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,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 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(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 R(this.container,o,r=>this.onControlPointDelete(r),this.isNewPointFromPointer));this.points.points.filter(o=>!e(o)).forEach(i)}}const z=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=z(t),this.dispatchUpdatedEvent()}get y(){return this._y}set y(t){this._y=z(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 L=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]]},M=n=>L(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,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 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=M(this.points.points).map(([e,i])=>this.container.normalizedToSvg(e,i)).map(([e,i])=>`${e},${i}`).join(" ");this.element.setAttribute("points",t)}}const N=1.1,$=n=>{n.root.addEventListener("wheel",t=>{const e=t.deltaY>0?N:1/N,[i]=n.domToNormalized(t.clientX,t.clientY),[o,r]=n.getViewBox(),d=Math.max(0,o-Math.max(0,i-o)*(e-1)),a=Math.min(1,(r-o)*e+d);d===o&&a===r||(t.preventDefault(),t.stopPropagation(),n.setViewBox(d,a))})},Y=(n,t,e,i={lineWidth:1,strokeStyle:"#000",fillStyle:void 0,clip:!1})=>{const o=t[3],r=t[2]/(e.length-1),d=o+t[1];n.lineWidth=i.lineWidth,n.strokeStyle=i.strokeStyle,n.beginPath(),n.moveTo(t[0],t[1]+t[3]);for(let a=0;a<e.length;a++)n.lineTo(t[0]+a*r,Math.max(t[1],d-e[a]*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()},D=1,j=(n,t,e,i)=>{const o=i||document.createElement("canvas");o.setAttribute("width",String(t)),o.setAttribute("height",String(D));const r=n.getUint8Table(e[0],e[1],t,!0),d=o.getContext("2d");if(d){const a=d.getImageData(0,0,t,D);for(let h=0;h<D;h++)a.data.set(r,h*4*t);const y=D*t*4;for(let h=3;h<y;h+=4)a.data[h]=255;d.putImageData(a,0,0)}return o},Z=n=>{const t=L(n);return t[0][0]-=1e-8,t[t.length-1][0]+=1e-8,t},q=n=>{if(!n)return[];const t=n.map(a=>a===0?0:Math.log(a)),e=t.filter(Boolean),i=Math.min(...e),r=Math.max(...e)-i;return t.map(a=>a===0?0:(a-i)/r)},_="rgba(50, 50, 50, 0.3)",J=(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 d=document.createElement("canvas"),a=()=>{if(!!i){if(i.clearRect(0,0,e.width,e.height),o){const{width:v,height:S}=n.root.getBoundingClientRect();e.setAttribute("width",String(v)),e.setAttribute("height",String(S));const{left:T,right:A,bottom:E,top:x}=n.borderSize();if(Math.ceil(A-T)<0)return;const I=M(t.points),c=[[0,0],...I,[1,0]].map(([f,P])=>n.normalizedToSvg(f,P));i.save(),i.beginPath(),c.forEach(([f,P])=>{i.lineTo(f,P)}),i.clip();const[p]=c[1],[u]=c[c.length-2],l=Math.min(v,Math.max(0,p)),C=Math.min(v,Math.max(0,u)),b=Math.ceil(C-l);if(b){const f=u-p,P=(l-p)/f,tt=(C-u)/f,k=o.getMappingRange(),U=k[1]-k[0],et=[k[0]+U*P,k[1]+U*tt];j(o,b,et,d),i.drawImage(d,0,0,d.width,d.height,Math.floor(l),Math.floor(x),b,Math.ceil(E-x))}i.restore()}if(r){const{left:v,right:S,bottom:T,top:A}=n.borderSize(),E=[v,A,S-v,T-A];Y(i,E,r,{lineWidth:1,strokeStyle:_,fillStyle:_})}}};return n.addSizeObserver(a),t.eventTarget.addEventListener("updated",a),{container:n,canvas:e,setColorTransferFunction:v=>{o=v,a()},setHistogram:v=>{r=v,a()},render:a,remove:()=>n.root.removeChild(e)}};class K{constructor(t){s(this,"points");s(this,"line");s(this,"pointController");s(this,"container");s(this,"background");this.container=F(t),$(this.container),this.points=new W;const e=[[0,0],[1,1]];this.points.setPoints(e),this.background=J(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(q(t))}}g.TransferFunctionEditor=K,g.windowPointsForSort=Z,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
{
"name": "itk-viewer-transfer-function-editor",
"version": "1.2.1",
"version": "1.2.2",
"description": "Interface to interactively edit opacity transfer functions, etc",

@@ -5,0 +5,0 @@ "files": [

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc