Socket
Socket
Sign inDemoInstall

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.6 to 1.2.7

5

dist/TransferFunctionEditor.es.js

@@ -153,3 +153,6 @@ var R = Object.defineProperty;

const t = document.createElement("div");
t.setAttribute("style", "position: relative; width: 100%; height: 100%"), n.appendChild(t);
t.setAttribute(
"style",
"position: relative; width: 100%; height: 100%; user-select: none;"
), n.appendChild(t);
const e = Y();

@@ -156,0 +159,0 @@ t.appendChild(e);

2

dist/TransferFunctionEditor.umd.js

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

(function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.TransferFunctionEditor={}))})(this,function(m){"use strict";var it=Object.defineProperty;var ot=(m,g,P)=>g in m?it(m,g,{enumerable:!0,configurable:!0,writable:!0,value:P}):m[g]=P;var s=(m,g,P)=>(ot(m,typeof g!="symbol"?g+"":g,P),P);const g=n=>Math.max(0,Math.min(1,n));class P{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=g(t),this.dispatchUpdatedEvent()}get y(){return this._y}set y(t){this._y=g(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=>M(n.map(({x:t,y:e})=>[t,e]));class B{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 P(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 F=(n,t,e,i={lineWidth:1,strokeStyle:"#000",fillStyle:void 0,clip:!1})=>{const o=t[3],r=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 a=0;a<e.length;a++)n.lineTo(t[0]+a*r,Math.max(t[1],h-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()},z=1,O=(n,t,e,i)=>{const o=i||document.createElement("canvas");if(o.setAttribute("width",String(t)),o.setAttribute("height",String(z)),n.getSize()===0)return o;const r=n.getUint8Table(e[0],e[1],t,!0),h=o.getContext("2d");if(h){const a=h.getImageData(0,0,t,z);for(let d=0;d<z;d++)a.data.set(r,d*4*t);const k=z*t*4;for(let d=3;d<k;d+=4)a.data[d]=255;h.putImageData(a,0,0)}return o},R=n=>{const t=M(n);return t[0][0]-=1e-8,t[t.length-1][0]+=1e-8,t},V=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)};function H(n,t){if(n.length!==t.length)return!1;for(let e=0;e<n.length;e++)if(n[e]!==t[e])return!1;return!0}const S=10,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},X=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 h=document.createElementNS("http://www.w3.org/2000/svg","rect");e.appendChild(h),h.setAttribute("fill","none"),h.setAttribute("stroke","black");const a=c=>{e.appendChild(c)},k=c=>{e.removeChild(c)};let d=[0,1,0,1];const v=()=>d,x=(c,p,u=0,l=1)=>{const E=d;d=[c,p,u,l],H(E,d)||i.dispatchEvent(new Event("sizeupdated"))},C=()=>{const{top:c,left:p,width:u,height:l}=t.getBoundingClientRect();return{width:u-2*S,height:l-2*S,top:c+S,left:p+S}},A=(c,p)=>{const{top:u,left:l,width:E,height:T}=C(),f=d[1]-d[0]||.001,w=d[3]-d[2]||.001;return[(c-l)/E*f+d[0],(1-(p-u)/T)*w+d[2]]},b=(c,p)=>{const{width:u,height:l}=C(),E=d[1]-d[0]||.001,T=(c-d[0])/E*u+S,f=d[3]-d[2]||.001,w=(1-(p-d[2])/f)*l+S;return[T,w]},y=()=>{const[c,p]=b(0,0),[u,l]=b(1,1);return{left:c,bottom:p,right:u,top:l}};return o(()=>{const{left:c,bottom:p,right:u,top:l}=y();h.setAttribute("x",`${c}`),h.setAttribute("y",`${l}`),h.setAttribute("width",`${Math.max(0,u-c)}`),h.setAttribute("height",`${Math.max(0,p-l)}`)}),{appendChild:a,removeChild:k,addSizeObserver:o,getViewBox:v,setViewBox:x,domToNormalized:A,normalizedToSvg:b,borderSize:y,remove:()=>n.removeChild(t),root:t}},$="controlPoint",Y=()=>{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",$),n.setAttribute("style","cursor: move;"),n};class j{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=Y(),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(),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){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 j(this.container,o,r=>this.onControlPointDelete(r),this.isNewPointFromPointer));this.points.points.filter(o=>!e(o)).forEach(i)}}const Z=()=>{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 q{constructor(t,e){s(this,"points");s(this,"container");s(this,"onPointsUpdated");s(this,"element");this.container=t,this.points=e,this.element=Z(),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=_(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,J=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(),h=Math.max(0,o-Math.max(0,i-o)*(e-1)),a=Math.min(1,(r-o)*e+h);h===o&&a===r||(t.preventDefault(),t.stopPropagation(),n.setViewBox(h,a))})},D="rgba(50, 50, 50, 0.3)",K=(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 h=document.createElement("canvas"),a=()=>{if(i){if(i.clearRect(0,0,e.width,e.height),o){const{width:v,height:x}=n.root.getBoundingClientRect();e.setAttribute("width",String(v)),e.setAttribute("height",String(x));const{left:C,right:A,bottom:b,top:y}=n.borderSize();if(Math.ceil(A-C)<0)return;const U=_(t.points),c=[[0,0],...U,[1,0]].map(([f,w])=>n.normalizedToSvg(f,w));i.save(),i.beginPath(),c.forEach(([f,w])=>{i.lineTo(f,w)}),i.clip();const[p]=c[1],[u]=c[c.length-2],l=Math.min(v,Math.max(0,p)),E=Math.min(v,Math.max(0,u)),T=Math.ceil(E-l);if(T){const f=u-p,w=(l-p)/f,et=(E-u)/f,L=o.getMappingRange(),I=L[1]-L[0],nt=[L[0]+I*w,L[1]+I*et];O(o,T,nt,h),i.drawImage(h,0,0,h.width,h.height,Math.floor(l),Math.floor(y),T,Math.ceil(b-y))}i.restore()}if(r){const{left:v,right:x,bottom:C,top:A}=n.borderSize(),b=[v,A,x-v,C-A];F(i,b,r,{lineWidth:1,strokeStyle:D,fillStyle:D})}}};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 Q{constructor(t){s(this,"points");s(this,"line");s(this,"pointController");s(this,"container");s(this,"background");this.container=X(t),J(this.container),this.points=new B;const e=[[0,0],[1,1]];this.points.setPoints(e),this.background=K(this.container,this.points),this.line=new q(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(V(t))}}m.TransferFunctionEditor=Q,m.windowPointsForSort=R,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
(function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.TransferFunctionEditor={}))})(this,function(m){"use strict";var it=Object.defineProperty;var ot=(m,g,P)=>g in m?it(m,g,{enumerable:!0,configurable:!0,writable:!0,value:P}):m[g]=P;var s=(m,g,P)=>(ot(m,typeof g!="symbol"?g+"":g,P),P);const g=n=>Math.max(0,Math.min(1,n));class P{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=g(t),this.dispatchUpdatedEvent()}get y(){return this._y}set y(t){this._y=g(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=>M(n.map(({x:t,y:e})=>[t,e]));class B{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 P(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 F=(n,t,e,i={lineWidth:1,strokeStyle:"#000",fillStyle:void 0,clip:!1})=>{const o=t[3],r=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 a=0;a<e.length;a++)n.lineTo(t[0]+a*r,Math.max(t[1],h-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()},z=1,O=(n,t,e,i)=>{const o=i||document.createElement("canvas");if(o.setAttribute("width",String(t)),o.setAttribute("height",String(z)),n.getSize()===0)return o;const r=n.getUint8Table(e[0],e[1],t,!0),h=o.getContext("2d");if(h){const a=h.getImageData(0,0,t,z);for(let d=0;d<z;d++)a.data.set(r,d*4*t);const k=z*t*4;for(let d=3;d<k;d+=4)a.data[d]=255;h.putImageData(a,0,0)}return o},R=n=>{const t=M(n);return t[0][0]-=1e-8,t[t.length-1][0]+=1e-8,t},V=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)};function H(n,t){if(n.length!==t.length)return!1;for(let e=0;e<n.length;e++)if(n[e]!==t[e])return!1;return!0}const S=10,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},X=n=>{const t=document.createElement("div");t.setAttribute("style","position: relative; width: 100%; height: 100%; user-select: none;"),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 h=document.createElementNS("http://www.w3.org/2000/svg","rect");e.appendChild(h),h.setAttribute("fill","none"),h.setAttribute("stroke","black");const a=c=>{e.appendChild(c)},k=c=>{e.removeChild(c)};let d=[0,1,0,1];const v=()=>d,x=(c,p,u=0,l=1)=>{const E=d;d=[c,p,u,l],H(E,d)||i.dispatchEvent(new Event("sizeupdated"))},C=()=>{const{top:c,left:p,width:u,height:l}=t.getBoundingClientRect();return{width:u-2*S,height:l-2*S,top:c+S,left:p+S}},A=(c,p)=>{const{top:u,left:l,width:E,height:T}=C(),f=d[1]-d[0]||.001,w=d[3]-d[2]||.001;return[(c-l)/E*f+d[0],(1-(p-u)/T)*w+d[2]]},b=(c,p)=>{const{width:u,height:l}=C(),E=d[1]-d[0]||.001,T=(c-d[0])/E*u+S,f=d[3]-d[2]||.001,w=(1-(p-d[2])/f)*l+S;return[T,w]},y=()=>{const[c,p]=b(0,0),[u,l]=b(1,1);return{left:c,bottom:p,right:u,top:l}};return o(()=>{const{left:c,bottom:p,right:u,top:l}=y();h.setAttribute("x",`${c}`),h.setAttribute("y",`${l}`),h.setAttribute("width",`${Math.max(0,u-c)}`),h.setAttribute("height",`${Math.max(0,p-l)}`)}),{appendChild:a,removeChild:k,addSizeObserver:o,getViewBox:v,setViewBox:x,domToNormalized:A,normalizedToSvg:b,borderSize:y,remove:()=>n.removeChild(t),root:t}},$="controlPoint",Y=()=>{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",$),n.setAttribute("style","cursor: move;"),n};class j{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=Y(),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(),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){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 j(this.container,o,r=>this.onControlPointDelete(r),this.isNewPointFromPointer));this.points.points.filter(o=>!e(o)).forEach(i)}}const Z=()=>{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 q{constructor(t,e){s(this,"points");s(this,"container");s(this,"onPointsUpdated");s(this,"element");this.container=t,this.points=e,this.element=Z(),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=_(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,J=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(),h=Math.max(0,o-Math.max(0,i-o)*(e-1)),a=Math.min(1,(r-o)*e+h);h===o&&a===r||(t.preventDefault(),t.stopPropagation(),n.setViewBox(h,a))})},D="rgba(50, 50, 50, 0.3)",K=(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 h=document.createElement("canvas"),a=()=>{if(i){if(i.clearRect(0,0,e.width,e.height),o){const{width:v,height:x}=n.root.getBoundingClientRect();e.setAttribute("width",String(v)),e.setAttribute("height",String(x));const{left:C,right:A,bottom:b,top:y}=n.borderSize();if(Math.ceil(A-C)<0)return;const U=_(t.points),c=[[0,0],...U,[1,0]].map(([f,w])=>n.normalizedToSvg(f,w));i.save(),i.beginPath(),c.forEach(([f,w])=>{i.lineTo(f,w)}),i.clip();const[p]=c[1],[u]=c[c.length-2],l=Math.min(v,Math.max(0,p)),E=Math.min(v,Math.max(0,u)),T=Math.ceil(E-l);if(T){const f=u-p,w=(l-p)/f,et=(E-u)/f,L=o.getMappingRange(),I=L[1]-L[0],nt=[L[0]+I*w,L[1]+I*et];O(o,T,nt,h),i.drawImage(h,0,0,h.width,h.height,Math.floor(l),Math.floor(y),T,Math.ceil(b-y))}i.restore()}if(r){const{left:v,right:x,bottom:C,top:A}=n.borderSize(),b=[v,A,x-v,C-A];F(i,b,r,{lineWidth:1,strokeStyle:D,fillStyle:D})}}};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 Q{constructor(t){s(this,"points");s(this,"line");s(this,"pointController");s(this,"container");s(this,"background");this.container=X(t),J(this.container),this.points=new B;const e=[[0,0],[1,1]];this.points.setPoints(e),this.background=K(this.container,this.points),this.line=new q(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(V(t))}}m.TransferFunctionEditor=Q,m.windowPointsForSort=R,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})});
{
"name": "itk-viewer-transfer-function-editor",
"version": "1.2.6",
"version": "1.2.7",
"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