diff --git a/src/Utils/segmentation/CommToolsData.ts b/src/Utils/segmentation/CommToolsData.ts index b324a37..2a90e3a 100644 --- a/src/Utils/segmentation/CommToolsData.ts +++ b/src/Utils/segmentation/CommToolsData.ts @@ -6,7 +6,7 @@ import { ICursorPage, IPaintImages, IConvertObjType, - ICommXYZ, + ICommXYZ } from "./coreTools/coreType"; import { switchPencilIcon } from "../utils"; import { enableDownload } from "./coreTools/divControlTools"; @@ -47,10 +47,10 @@ export class CommToolsData { skinSphereOrigin: null, ribSphereOrigin: null, nippleSphereOrigin: null, - tumourColor: "#00ff00", - skinColor: "#FFEB3B", - ribcageColor: "#2196F3", - nippleColor: "#E91E63", + tumourColor:"#00ff00", + skinColor:"#FFEB3B", + ribcageColor:"#2196F3", + nippleColor:"#E91E63", spherePlanB: true, sphereRadius: 10, @@ -74,12 +74,7 @@ export class CommToolsData { clearAllFlag: boolean ) => {}, getSphere: (sphereOrigin: number[], sphereRadius: number) => {}, - getCalculateSpherePositions: ( - tumourSphereOrigin: ICommXYZ | null, - skinSphereOrigin: ICommXYZ | null, - ribSphereOrigin: ICommXYZ | null, - nippleSphereOrigin: ICommXYZ | null - ) => {}, + getCalculateSpherePositions:(tumourSphereOrigin:ICommXYZ|null, skinSphereOrigin:ICommXYZ|null, ribSphereOrigin:ICommXYZ|null, nippleSphereOrigin:ICommXYZ|null, aixs:"x"|"y"|"z")=>{}, drawStartPos: { x: 1, y: 1 }, }; @@ -102,7 +97,7 @@ export class CommToolsData { index: 0, updated: false, }, - }; + }; gui_states: IGUIStates = { mainAreaSize: 3, @@ -117,9 +112,9 @@ export class CommToolsData { brushAndEraserSize: 15, cursor: "dot", label: "label1", - cal_distance: "tumour", + cal_distance:"tumour", sphere: false, - calculator: false, + calculator:false, readyToUpdate: true, defaultPaintCursor: switchPencilIcon("dot"), max_sensitive: 100, @@ -169,7 +164,7 @@ export class CommToolsData { currentShowingSlice: undefined, mainPreSlices: undefined, Is_Shift_Pressed: false, - Is_Ctrl_Pressed: false, + Is_Ctrl_Pressed:false, Is_Draw: false, axis: "z", maskData: { @@ -252,7 +247,10 @@ export class CommToolsData { /** * Rewrite this {createEmptyPaintImage} function under NrrdTools */ - createEmptyPaintImage(dimensions: Array, paintImages: IPaintImages) { + createEmptyPaintImage( + dimensions: Array, + paintImages: IPaintImages + ) { throw new Error( "Child class must implement abstract clearStoreImages, currently you can find it in NrrdTools." ); diff --git a/src/Utils/segmentation/DrawToolCore.ts b/src/Utils/segmentation/DrawToolCore.ts index d0852f7..c61b6be 100644 --- a/src/Utils/segmentation/DrawToolCore.ts +++ b/src/Utils/segmentation/DrawToolCore.ts @@ -144,11 +144,13 @@ export class DrawToolCore extends CommToolsData { if (!!opts) { this.nrrd_states.getMask = opts?.getMaskData as any; this.nrrd_states.getSphere = opts?.getSphereData as any; + this.nrrd_states.getCalculateSpherePositions = opts?.getCalculateSpherePositionsData as any; } this.paintOnCanvas(); } - draw_cal_sphere(x:number, y:number, sliceIndex:number, cal_position:"tumour"|"skin"|"nipple"|"ribcage"){ + drawCalSphereDown(x:number, y:number, sliceIndex:number, cal_position:"tumour"|"skin"|"nipple"|"ribcage"){ + this.nrrd_states.sphereRadius = 5 this.protectedData.canvases.drawingCanvas.removeEventListener( "wheel", this.drawingPrameters.handleZoomWheel @@ -160,7 +162,7 @@ export class DrawToolCore extends CommToolsData { this.nrrd_states.sphereOrigin[this.protectedData.axis] = [ mouseX, mouseY, - this.nrrd_states.currentIndex, + sliceIndex, ]; this.setUpSphereOrigins(mouseX, mouseY, sliceIndex); @@ -178,24 +180,48 @@ export class DrawToolCore extends CommToolsData { this.nrrd_states.ribSphereOrigin = JSON.parse(JSON.stringify( this.nrrd_states.sphereOrigin)); break; } - + this.nrrd_states.cursorPageX = mouseX; this.nrrd_states.cursorPageY = mouseY; this.enableCrosshair(); // draw circle setup width/height for sphere canvas this.drawCalculatorSphere(this.nrrd_states.sphereRadius); - this.protectedData.canvases.drawingCanvas.addEventListener( - "wheel", - this.drawingPrameters.handleSphereWheel, - true - ); this.protectedData.canvases.drawingCanvas.addEventListener( "pointerup", this.drawingPrameters.handleOnDrawingMouseUp ); } + drawCalSphereUp(){ + // TODO send data to outside + // this.clearStoreImages(); + this.clearSpherePrintStoreImages() + this.drawCalculatorSphereOnEachViews("x"); + this.drawCalculatorSphereOnEachViews("y"); + this.drawCalculatorSphereOnEachViews("z"); + + !!this.nrrd_states.getCalculateSpherePositions && + this.nrrd_states.getCalculateSpherePositions( + this.nrrd_states.tumourSphereOrigin, + this.nrrd_states.skinSphereOrigin, + this.nrrd_states.ribSphereOrigin, + this.nrrd_states.nippleSphereOrigin, + this.protectedData.axis + ); + + this.zoomActionAfterDrawSphere(); + this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", + this.drawingPrameters.handleOnDrawingMouseUp); + } + + private zoomActionAfterDrawSphere(){ + this.protectedData.canvases.drawingCanvas.addEventListener( + "wheel", + this.drawingPrameters.handleZoomWheel + ); + } + private clearSpherePrintStoreImages(){ this.protectedData.maskData.paintImages.x.length = 0; this.protectedData.maskData.paintImages.y.length = 0; @@ -377,15 +403,18 @@ export class DrawToolCore extends CommToolsData { e.offsetY / this.nrrd_states.sizeFoctor; this.enableCrosshair(); + this.protectedData.canvases.drawingCanvas.addEventListener( + "pointerup", + this.drawingPrameters.handleOnDrawingMouseUp + ); } else if (this.gui_states.sphere && !this.nrrd_states.enableCursorChoose) { - - this.nrrd_states.sphereRadius = 10 + sphere(e) + } else if (this.gui_states.calculator && !this.nrrd_states.enableCursorChoose){ - this.nrrd_states.sphereRadius = 5 - this.draw_cal_sphere(e.offsetX, e.offsetY, this.nrrd_states.currentIndex, this.gui_states.cal_distance) + this.drawCalSphereDown(e.offsetX, e.offsetY, this.nrrd_states.currentIndex, this.gui_states.cal_distance) } } else if (e.button === 2) { rightclicked = true; @@ -417,6 +446,9 @@ export class DrawToolCore extends CommToolsData { ); const sphere = (e:MouseEvent)=>{ + // set sphere size + this.nrrd_states.sphereRadius = 10 + this.protectedData.canvases.drawingCanvas.removeEventListener( "wheel", this.drawingPrameters.handleZoomWheel @@ -435,9 +467,9 @@ export class DrawToolCore extends CommToolsData { this.nrrd_states.cursorPageX = mouseX; this.nrrd_states.cursorPageY = mouseY; this.enableCrosshair(); - + // draw circle setup width/height for sphere canvas - this.drawSphere(e.offsetX , e.offsetY, this.nrrd_states.sphereRadius); + this.drawSphere(mouseX , mouseY, this.nrrd_states.sphereRadius); this.protectedData.canvases.drawingCanvas.addEventListener( "wheel", this.drawingPrameters.handleSphereWheel, @@ -611,60 +643,52 @@ export class DrawToolCore extends CommToolsData { this.nrrd_states.sphereRadius / this.nrrd_states.sizeFoctor ); - this.protectedData.canvases.drawingCanvas.addEventListener( - "wheel", - this.drawingPrameters.handleZoomWheel - ); - this.protectedData.canvases.drawingCanvas.removeEventListener( "wheel", this.drawingPrameters.handleSphereWheel, true ); - } else if(this.gui_states.sphere && + + this.protectedData.canvases.drawingCanvas.addEventListener( + "wheel", + this.drawingPrameters.handleZoomWheel + ); + this.protectedData.canvases.drawingCanvas.removeEventListener( + "pointerup", + this.drawingPrameters.handleOnDrawingMouseUp + ); + + } else if((this.gui_states.sphere || this.gui_states.calculator)&& this.nrrd_states.enableCursorChoose){ this.protectedData.canvases.drawingCanvas.addEventListener( "wheel", this.drawingPrameters.handleZoomWheel ); + this.protectedData.canvases.drawingCanvas.removeEventListener( + "pointerup", + this.drawingPrameters.handleOnDrawingMouseUp + ); } else if(this.gui_states.calculator && !this.nrrd_states.enableCursorChoose){ - // TODO send data to outside - // this.clearStoreImages(); - this.clearSpherePrintStoreImages() - this.drawCalculatorSphereOnEachViews("x"); - this.drawCalculatorSphereOnEachViews("y"); - this.drawCalculatorSphereOnEachViews("z"); - - !!this.nrrd_states.getCalculateSpherePositions && - this.nrrd_states.getCalculateSpherePositions( - this.nrrd_states.tumourSphereOrigin, - this.nrrd_states.skinSphereOrigin, - this.nrrd_states.ribSphereOrigin, - this.nrrd_states.nippleSphereOrigin - ); - - this.protectedData.canvases.drawingCanvas.addEventListener( - "wheel", - this.drawingPrameters.handleZoomWheel - ); - - this.protectedData.canvases.drawingCanvas.removeEventListener( - "wheel", - this.drawingPrameters.handleSphereWheel, - true - ); - this.protectedData.canvases.drawingCanvas.removeEventListener("pointerup", - this.drawingPrameters.handleOnDrawingMouseUp) - + // When mouse up + this.drawCalSphereUp() } + } else if (e.button === 2) { rightclicked = false; this.protectedData.canvases.drawingCanvas.style.cursor = "grab"; + + setTimeout(()=>{ + this.protectedData.canvases.drawingCanvas.style.cursor = this.gui_states.defaultPaintCursor; + }, 2000) this.protectedData.canvases.drawingCanvas.removeEventListener( "pointermove", this.drawingPrameters.handleOnPanMouseMove ); + + if(this.gui_states.sphere || this.gui_states.calculator){ + this.zoomActionAfterDrawSphere(); + } } else { return; } @@ -772,12 +796,12 @@ export class DrawToolCore extends CommToolsData { ex, 0, ex, - this.protectedData.canvases.drawingCanvas.height + this.nrrd_states.changedWidth ); this.drawLine( 0, ey, - this.protectedData.canvases.drawingCanvas.width, + this.nrrd_states.changedHeight, ey ); } @@ -975,16 +999,18 @@ export class DrawToolCore extends CommToolsData { moveDistance = w / this.nrrd_states.originWidth; + if (moveDistance > 8) { moveDistance = 8; + this.resetPaintAreaUIPosition(); } else if (moveDistance < 1) { moveDistance = 1; + this.resetPaintAreaUIPosition(); } else { - this.resizePaintArea(moveDistance); this.resetPaintAreaUIPosition(l, t); - this.setIsDrawFalse(1000); } - + this.resizePaintArea(moveDistance); + this.setIsDrawFalse(1000); this.nrrd_states.sizeFoctor = moveDistance; }; return handleZoomWheelMove; @@ -1072,7 +1098,7 @@ export class DrawToolCore extends CommToolsData { rePositionGroup.forEach((group)=>{ group.forEach(p => { - this.drawSphereCore(ctx, (p as any).x, (p as any).y, this.nrrd_states.sphereRadius / this.nrrd_states.sizeFoctor, (p as any).color); + this.drawSphereCore(ctx, (p as any).x, (p as any).y, this.nrrd_states.sphereRadius, (p as any).color); }); this.storeSphereImages((group[0] as any).z, axis); ctx.clearRect(0, 0, canvas.width, canvas.height); @@ -1113,14 +1139,14 @@ export class DrawToolCore extends CommToolsData { const canvas = this.protectedData.canvases.drawingSphereCanvas; if (preIndex === nextIndex) { - this.drawSphereCore(ctx, mouseX, mouseY, this.nrrd_states.sphereRadius / this.nrrd_states.sizeFoctor,this.gui_states.fillColor); + this.drawSphereCore(ctx, mouseX, mouseY, this.nrrd_states.sphereRadius,this.gui_states.fillColor); this.storeSphereImages(preIndex, axis); } else { this.drawSphereCore( ctx, mouseX, mouseY, - (this.nrrd_states.sphereRadius - decay) / this.nrrd_states.sizeFoctor,this.gui_states.fillColor + (this.nrrd_states.sphereRadius - decay),this.gui_states.fillColor ); this.drawImageOnEmptyImage(canvas); this.storeSphereImages(preIndex, axis); @@ -1129,6 +1155,14 @@ export class DrawToolCore extends CommToolsData { ctx.clearRect(0, 0, canvas.width, canvas.height); } + /** + * + * @param ctx draw sphere canvas ctx + * @param x width must be match the origin size, size factor 1, ignore the size factor + * @param y height must be match the origin size, size factor 1, ignore the size factor + * @param radius radius must be match the origin size, size factor 1, ignore the size factor + * @param color sphere color + */ private drawSphereCore( ctx: CanvasRenderingContext2D, x: number, @@ -1191,38 +1225,26 @@ export class DrawToolCore extends CommToolsData { drawCalculatorSphere(radius: number) { // clear canvas - this.protectedData.canvases.drawingSphereCanvas.width = - this.protectedData.canvases.drawingCanvasLayerMaster.width; - this.protectedData.canvases.drawingSphereCanvas.height = - this.protectedData.canvases.drawingCanvasLayerMaster.height; - const canvas = this.protectedData.canvases.drawingSphereCanvas; - const ctx = this.protectedData.ctxes.drawingSphereCtx; - this.protectedData.ctxes.drawingLayerMasterCtx.clearRect( - 0, - 0, - canvas.width, - canvas.height - ); + const [canvas, ctx] = this.clearSphereCanvas() if(!!this.nrrd_states.tumourSphereOrigin && this.nrrd_states.tumourSphereOrigin[this.protectedData.axis][2]===this.nrrd_states.currentIndex){ - this.drawSphereCore(ctx, this.nrrd_states.tumourSphereOrigin[this.protectedData.axis][0], this.nrrd_states.tumourSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.tumourColor); + this.drawSphereCore(ctx as CanvasRenderingContext2D, this.nrrd_states.tumourSphereOrigin[this.protectedData.axis][0], this.nrrd_states.tumourSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.tumourColor); } if(!!this.nrrd_states.skinSphereOrigin && this.nrrd_states.skinSphereOrigin[this.protectedData.axis][2]===this.nrrd_states.currentIndex){ - this.drawSphereCore(ctx, this.nrrd_states.skinSphereOrigin[this.protectedData.axis][0], this.nrrd_states.skinSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.skinColor); + this.drawSphereCore(ctx as CanvasRenderingContext2D, this.nrrd_states.skinSphereOrigin[this.protectedData.axis][0], this.nrrd_states.skinSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.skinColor); } if(!!this.nrrd_states.ribSphereOrigin && this.nrrd_states.ribSphereOrigin[this.protectedData.axis][2]===this.nrrd_states.currentIndex){ - this.drawSphereCore(ctx, this.nrrd_states.ribSphereOrigin[this.protectedData.axis][0], this.nrrd_states.ribSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.ribcageColor); + this.drawSphereCore(ctx as CanvasRenderingContext2D, this.nrrd_states.ribSphereOrigin[this.protectedData.axis][0], this.nrrd_states.ribSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.ribcageColor); } if(!!this.nrrd_states.nippleSphereOrigin && this.nrrd_states.nippleSphereOrigin[this.protectedData.axis][2]===this.nrrd_states.currentIndex){ - this.drawSphereCore(ctx, this.nrrd_states.nippleSphereOrigin[this.protectedData.axis][0], this.nrrd_states.nippleSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.nippleColor); + this.drawSphereCore(ctx as CanvasRenderingContext2D, this.nrrd_states.nippleSphereOrigin[this.protectedData.axis][0], this.nrrd_states.nippleSphereOrigin[this.protectedData.axis][1], radius, this.nrrd_states.nippleColor); } - this.protectedData.ctxes.drawingLayerMasterCtx.drawImage( - canvas, + canvas as HTMLCanvasElement, 0, 0, this.nrrd_states.changedWidth, @@ -1230,23 +1252,22 @@ export class DrawToolCore extends CommToolsData { ); } + drawSphere(mouseX: number, mouseY: number, radius: number) { // clear canvas - this.protectedData.canvases.drawingSphereCanvas.width = - this.protectedData.canvases.drawingCanvasLayerMaster.width; - this.protectedData.canvases.drawingSphereCanvas.height = - this.protectedData.canvases.drawingCanvasLayerMaster.height; - const canvas = this.protectedData.canvases.drawingSphereCanvas; - const ctx = this.protectedData.ctxes.drawingSphereCtx; - this.protectedData.ctxes.drawingLayerMasterCtx.clearRect( - 0, - 0, - canvas.width, - canvas.height - ); - this.drawSphereCore(ctx, mouseX, mouseY, radius,this.gui_states.fillColor); + const [canvas, ctx] = this.clearSphereCanvas() + this.drawSphereCore(ctx as CanvasRenderingContext2D, mouseX, mouseY, radius,this.gui_states.fillColor); + + console.log("when drawing shpere on canvas"); + + console.log("Line 1256 mastercanvasesize:", this.protectedData.canvases.drawingCanvasLayerMaster.width, this.protectedData.canvases.drawingCanvasLayerMaster.height); + console.log("current xy:", mouseX, mouseY); + console.log("current changed width:", this.nrrd_states.changedWidth, this.nrrd_states.changedHeight); + + + this.protectedData.ctxes.drawingLayerMasterCtx.drawImage( - canvas, + canvas as HTMLCanvasElement, 0, 0, this.nrrd_states.changedWidth, @@ -1254,6 +1275,22 @@ export class DrawToolCore extends CommToolsData { ); } + private clearSphereCanvas(){ + // this.protectedData.canvases.drawingSphereCanvas.width = + // this.protectedData.canvases.drawingCanvasLayerMaster.width; + // this.protectedData.canvases.drawingSphereCanvas.height = + // this.protectedData.canvases.drawingCanvasLayerMaster.height; + + // clear drawingCanvasLayerMaster + this.protectedData.canvases.drawingCanvasLayerMaster.width = this.protectedData.canvases.drawingCanvasLayerMaster.width; + // resize sphere canvas size to original size + this.protectedData.canvases.drawingSphereCanvas.width = this.protectedData.canvases.originCanvas.width; + this.protectedData.canvases.drawingSphereCanvas.height = this.protectedData.canvases.originCanvas.height; + const canvas = this.protectedData.canvases.drawingSphereCanvas; + const ctx = this.protectedData.ctxes.drawingSphereCtx; + return [canvas, ctx] + } + /** * We generate the MRI slice from threejs based on mm, but when we display it is based on pixel size/distance. * So, the index munber on each axis (sagittal, axial, coronal) is the slice's depth in mm distance. And the width and height displayed on screen is the slice's width and height in pixel distance. diff --git a/src/Utils/segmentation/NrrdTools.ts b/src/Utils/segmentation/NrrdTools.ts index 670231e..a89b878 100644 --- a/src/Utils/segmentation/NrrdTools.ts +++ b/src/Utils/segmentation/NrrdTools.ts @@ -345,12 +345,19 @@ export class NrrdTools extends DrawToolCore { } // set calculate distance sphere position - set_calculate_distance_sphere(x:number, y:number, sliceIndex:number, cal_position:"tumour"|"skin"|"nipple"|"ribcage"){ + setCalculateDistanceSphere(x:number, y:number, sliceIndex:number, cal_position:"tumour"|"skin"|"nipple"|"ribcage"){ this.nrrd_states.sphereRadius = 5; - this.draw_cal_sphere(x, y, sliceIndex, cal_position); - this.drawCalculatorSphereOnEachViews("x"); - this.drawCalculatorSphereOnEachViews("y"); - this.drawCalculatorSphereOnEachViews("z"); + + // move to tumour slice + const steps = sliceIndex - this.nrrd_states.currentIndex; + this.setSliceMoving(steps * this.protectedData.displaySlices.length) + + // mock mouse down + // if user zoom the panel, we need to consider the size factor + this.drawCalSphereDown(x*this.nrrd_states.sizeFoctor, y*this.nrrd_states.sizeFoctor, sliceIndex, cal_position); + // mock mouse up + this.drawCalSphereUp() + } private getSharedPlace(len: number, ratio: number): number[] { @@ -867,10 +874,13 @@ export class NrrdTools extends DrawToolCore { this.nrrd_states.originHeight = this.protectedData.canvases.originCanvas.height; + // In html the width and height is pixels, + // So the value must be int + // Therefore, we must use Math.floor rather than using Math.ceil this.nrrd_states.changedWidth = - this.nrrd_states.originWidth * Number(this.nrrd_states.sizeFoctor); + Math.floor(this.nrrd_states.originWidth * Number(this.nrrd_states.sizeFoctor)); this.nrrd_states.changedHeight = - this.nrrd_states.originWidth * Number(this.nrrd_states.sizeFoctor); + Math.floor(this.nrrd_states.originWidth * Number(this.nrrd_states.sizeFoctor)); this.resizePaintArea(this.nrrd_states.sizeFoctor); this.resetPaintAreaUIPosition(); } @@ -985,8 +995,8 @@ export class NrrdTools extends DrawToolCore { this.protectedData.canvases.drawingCanvas.width; this.resetLayerCanvas(); - this.nrrd_states.changedWidth = this.nrrd_states.originWidth * factor; - this.nrrd_states.changedHeight = this.nrrd_states.originHeight * factor; + this.nrrd_states.changedWidth = Math.floor(this.nrrd_states.originWidth * factor); + this.nrrd_states.changedHeight = Math.floor(this.nrrd_states.originHeight * factor); /** * resize canvas diff --git a/src/Utils/segmentation/coreTools/coreType.ts b/src/Utils/segmentation/coreTools/coreType.ts index 103d07a..24717b0 100644 --- a/src/Utils/segmentation/coreTools/coreType.ts +++ b/src/Utils/segmentation/coreTools/coreType.ts @@ -48,8 +48,8 @@ interface IDrawingEvents { } interface IContrastEvents { - move_x: number; - move_y: number; + move_x:number; + move_y:number; x: number; y: number; w: number; @@ -57,7 +57,7 @@ interface IContrastEvents { handleOnContrastMouseDown: (ev: MouseEvent) => void; handleOnContrastMouseMove: (ev: MouseEvent) => void; handleOnContrastMouseUp: (ev: MouseEvent) => void; - handleOnContrastMouseLeave: (ev: MouseEvent) => void; + handleOnContrastMouseLeave:(ev: MouseEvent) => void; } // drawing on canvas @@ -94,7 +94,7 @@ interface IProtected { currentShowingSlice: any; mainPreSlices: any; Is_Shift_Pressed: boolean; - Is_Ctrl_Pressed: boolean; + Is_Ctrl_Pressed:boolean; Is_Draw: boolean; axis: "x" | "y" | "z"; maskData: IMaskData; @@ -136,9 +136,9 @@ interface IGUIStates { brushAndEraserSize: number; cursor: string; label: string; - cal_distance: "tumour" | "skin" | "nipple" | "ribcage"; + cal_distance:"tumour" | "skin" | "nipple" | "ribcage"; sphere: boolean; - calculator: boolean; + calculator:boolean; // subView: boolean; // subViewScale: number; readyToUpdate: boolean; @@ -182,14 +182,14 @@ interface INrrdStates { cursorPageX: number; cursorPageY: number; sphereOrigin: ICommXYZ; - tumourSphereOrigin: ICommXYZ | null; - skinSphereOrigin: ICommXYZ | null; - ribSphereOrigin: ICommXYZ | null; - nippleSphereOrigin: ICommXYZ | null; - tumourColor: "#00ff00"; - skinColor: "#FFEB3B"; - ribcageColor: "#2196F3"; - nippleColor: "#E91E63"; + tumourSphereOrigin: ICommXYZ | null, + skinSphereOrigin: ICommXYZ | null, + ribSphereOrigin: ICommXYZ | null, + nippleSphereOrigin: ICommXYZ | null, + tumourColor:"#00ff00", + skinColor:"#FFEB3B", + ribcageColor:"#2196F3", + nippleColor:"#E91E63", spherePlanB: boolean; sphereRadius: number; Mouse_Over_x: number; @@ -212,12 +212,7 @@ interface INrrdStates { clearAllFlag: boolean ) => void; getSphere: (sphereOrigin: number[], sphereRadius: number) => void; - getCalculateSpherePositions: ( - tumourSphereOrigin: ICommXYZ | null, - skinSphereOrigin: ICommXYZ | null, - ribSphereOrigin: ICommXYZ | null, - nippleSphereOrigin: ICommXYZ | null - ) => void; + getCalculateSpherePositions:(tumourSphereOrigin:ICommXYZ|null, skinSphereOrigin:ICommXYZ|null, ribSphereOrigin:ICommXYZ|null, nippleSphereOrigin:ICommXYZ|null, aixs:"x"|"y"|"z")=>void, drawStartPos: ICommXY; } @@ -236,6 +231,7 @@ interface IDrawOpts { clearAllFlag?: boolean ) => void; getSphereData?: (sphereOrigin: number[], sphereRadius: number) => void; + getCalculateSpherePositionsData?:(tumourSphereOrigin:ICommXYZ|null, skinSphereOrigin:ICommXYZ|null, ribSphereOrigin:ICommXYZ|null, nippleSphereOrigin:ICommXYZ|null, aixs:"x"|"y"|"z")=>void; } type UndoLayerType = { label1: Array; @@ -271,111 +267,111 @@ interface ICursorPage { interface IGuiParameterSettings { globalAlpha: { - name: "Opacity"; - min: number; - max: number; - step: number; - }; + name: "Opacity", + min: number, + max: number, + step: number, + }, segmentation: { - name: "Pencil"; - onChange: () => void; - }; + name: "Pencil", + onChange: ()=>void, + }, sphere: { - name: "Sphere"; - onChange: () => void; - }; + name: "Sphere", + onChange: ()=>void, + }, brushAndEraserSize: { - name: "BrushAndEraserSize"; - min: number; - max: number; - step: number; - onChange: () => void; - }; + name: "BrushAndEraserSize", + min: number, + max: number, + step: number, + onChange: ()=>void, + }, Eraser: { - name: "Eraser"; - onChange: () => void; - }; - calculator: { - name: "Calculator"; - onChange: () => void; - }; - cal_distance: { - name: "CalculatorDistance"; - onChange: (val: "tumour" | "skin" | "ribcage" | "nipple") => void; - }; + name: "Eraser", + onChange: ()=>void, + }, + calculator:{ + name:"Calculator", + onChange: ()=>void, + }, + cal_distance:{ + name:"CalculatorDistance", + onChange: (val:"tumour"|"skin"|"ribcage"|"nipple")=>void + } clear: { - name: "Clear"; - }; + name: "Clear", + }, clearAll: { - name: "ClearAll"; - }; + name: "ClearAll", + }, undo: { - name: "Undo"; - }; + name: "Undo", + }, resetZoom: { - name: "ResetZoom"; - }; + name: "ResetZoom", + }, windowHigh: { - name: "ImageContrast"; - value: null; - min: number; - max: number; - step: number; - onChange: (value: number) => void; - onFinished: () => void; - }; + name: "ImageContrast", + value: null, + min: number, + max: number, + step: number, + onChange: (value: number)=>void, + onFinished: ()=>void, + }, windowLow: { - name: "WindowLow"; - value: null; - min: number; - max: number; - step: number; - onChange: (value: number) => void; - onFinished: () => void; - }; + name: "WindowLow", + value: null, + min: number, + max: number, + step: number, + onChange: (value: number)=>void, + onFinished: ()=>void, + }, advance: { label: { - name: "Label"; - value: ["label1", "label2", "label3"]; - }; + name: "Label", + value: ["label1", "label2", "label3"], + }, cursor: { - name: "CursorIcon"; - value: ["crosshair", "pencil", "dot"]; - }; + name: "CursorIcon", + value: ["crosshair", "pencil", "dot"], + }, mainAreaSize: { - name: "Zoom"; - min: number; - max: number; - step: number; - onFinished: null; - }; + name: "Zoom", + min: number, + max: number, + step: number, + onFinished: null, + }, dragSensitivity: { - name: "DragSensitivity"; - min: number; - max: number; - step: number; - }; + name: "DragSensitivity", + min: number, + max: number, + step: number, + }, pencilSettings: { lineWidth: { - name: "OuterLineWidth"; - min: number; - max: number; - step: number; - }; + name: "OuterLineWidth", + min: number, + max: number, + step: number, + }, color: { - name: "Color"; - }; + name: "Color", + }, fillColor: { - name: "FillColor"; - }; - }; + name: "FillColor", + }, + }, BrushSettings: { brushColor: { - name: "BrushColor"; - }; - }; - }; -} + name: "BrushColor", + }, + }, + }, +}; export { ICommXYZ, @@ -397,5 +393,5 @@ export { IMaskData, IUndoType, ICursorPage, - IGuiParameterSettings, + IGuiParameterSettings }; diff --git a/src/index.ts b/src/index.ts index 5981383..9ffa81d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -40,7 +40,7 @@ import { IOptVTKLoader, } from "./types/types"; -import { IPaintImage } from "./Utils/segmentation/coreTools/coreType"; +import { IPaintImage, ICommXYZ } from "./Utils/segmentation/coreTools/coreType"; import "./css/style.css"; @@ -90,4 +90,5 @@ export type { IPaintImage, exportPaintImageType, IOptVTKLoader, + ICommXYZ };