Skip to content

Commit

Permalink
fix: add draw undo/redo & closed issue #136
Browse files Browse the repository at this point in the history
  • Loading branch information
JoyZhou committed Mar 5, 2021
1 parent a4c3228 commit 2bc522d
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 93 deletions.
15 changes: 10 additions & 5 deletions src/app/dwv/dwv.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@
<mat-icon>arrow_drop_down</mat-icon>
</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false" yPosition="below">
<button *ngFor="let tool of toolNames" mat-menu-item (value)="tool" (click)="onChangeTool(tool)">{{ tool }}</button>
<button *ngFor="let tool of toolNames" mat-menu-item (value)="tool" (click)="onChangeTool(tool)">{{ tool
}}</button>
</mat-menu>

<button mat-raised-button color="primary" (click)="onReset()" [disabled]="!dataLoaded">Reset</button>
<button mat-raised-button color="primary" (click)="onUndo()" [disabled]="!dataLoaded">undo</button>
<button mat-raised-button color="primary" (click)="onRedo()" [disabled]="!dataLoaded">redo</button>
<button mat-raised-button color="primary" (click)="openTagsDialog()" [disabled]="!dataLoaded">Tags</button>
</div>
<div class="layerContainer">
Expand All @@ -18,7 +21,9 @@
</div>
<div class="legend mat-small">
<p>Powered by
<a href="https://github.com/ivmartel/dwv">dwv</a>
{{ versions.dwv }}
and Angular {{ versions.angular }}</p></div>
</div>
<a href="https://github.com/ivmartel/dwv">dwv</a>
{{ versions.dwv }}
and Angular {{ versions.angular }}
</p>
</div>
</div>
187 changes: 99 additions & 88 deletions src/app/dwv/dwv.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { VERSION } from '@angular/core';
import * as dwv from 'dwv';
import { MatDialog } from '@angular/material/dialog';
import { TagsDialogComponent } from './tags-dialog.component';
import { Component, OnInit } from "@angular/core";
import { VERSION } from "@angular/core";
import * as dwv from "dwv";
import { MatDialog } from "@angular/material/dialog";
import { TagsDialogComponent } from "./tags-dialog.component";

// gui overrides

Expand All @@ -11,47 +11,46 @@ dwv.gui.getElement = dwv.gui.base.getElement;

// Image decoders (for web workers)
dwv.image.decoderScripts = {
jpeg2000: 'assets/dwv/decoders/pdfjs/decode-jpeg2000.js',
'jpeg-lossless': 'assets/dwv/decoders/rii-mango/decode-jpegloss.js',
'jpeg-baseline': 'assets/dwv/decoders/pdfjs/decode-jpegbaseline.js',
rle: 'assets/dwv/decoders/dwv/decode-rle.js'
jpeg2000: "assets/dwv/decoders/pdfjs/decode-jpeg2000.js",
"jpeg-lossless": "assets/dwv/decoders/rii-mango/decode-jpegloss.js",
"jpeg-baseline": "assets/dwv/decoders/pdfjs/decode-jpegbaseline.js",
rle: "assets/dwv/decoders/dwv/decode-rle.js",
};

@Component({
selector: 'app-dwv',
templateUrl: './dwv.component.html',
styleUrls: ['./dwv.component.scss']
selector: "app-dwv",
templateUrl: "./dwv.component.html",
styleUrls: ["./dwv.component.scss"],
})

export class DwvComponent implements OnInit {
public versions: any;
public tools = {
Scroll: {},
ZoomAndPan: {},
WindowLevel: {},
Draw: {
options: ['Ruler'],
type: 'factory',
events: ['drawcreate', 'drawchange', 'drawmove', 'drawdelete']
}
Scroll: {},
ZoomAndPan: {},
WindowLevel: {},
Draw: {
options: ["Ruler"],
type: "factory",
events: ["drawcreate", "drawchange", "drawmove", "drawdelete"],
},
};
public toolNames: string[];
public selectedTool = 'Select Tool';
public selectedTool = "Select Tool";
public loadProgress = 0;
public dataLoaded = false;

private dwvApp: any;
private metaData: any[];

// drop box class name
private dropboxClassName = 'dropBox';
private borderClassName = 'dropBoxBorder';
private hoverClassName = 'hover';
private dropboxClassName = "dropBox";
private borderClassName = "dropBoxBorder";
private hoverClassName = "hover";

constructor(public dialog: MatDialog) {
this.versions = {
dwv: dwv.getVersion(),
angular: VERSION.full
angular: VERSION.full,
};
}

Expand All @@ -60,14 +59,14 @@ export class DwvComponent implements OnInit {
this.dwvApp = new dwv.App();
// initialise app
this.dwvApp.init({
containerDivId: 'dwv',
tools: this.tools
containerDivId: "dwv",
tools: this.tools,
});
// handle load events
let nLoadItem = null;
let nReceivedError = null;
let nReceivedAbort = null;
this.dwvApp.addEventListener('loadstart', (/*event*/) => {
this.dwvApp.addEventListener("loadstart", (/*event*/) => {
// reset flags
this.dataLoaded = false;
nLoadItem = 0;
Expand All @@ -76,57 +75,59 @@ export class DwvComponent implements OnInit {
// hide drop box
this.showDropbox(false);
});
this.dwvApp.addEventListener('loadprogress', (event) => {
this.dwvApp.addEventListener("loadprogress", (event) => {
this.loadProgress = event.loaded;
});
this.dwvApp.addEventListener('load', (/*event*/) => {
this.dwvApp.addEventListener("load", (/*event*/) => {
// set dicom tags
this.metaData = dwv.utils.objectToArray(this.dwvApp.getMetaData());
// available tools
this.toolNames = [];
for (const key in this.tools) {
if ((key === 'Scroll' && this.dwvApp.canScroll()) ||
(key === 'WindowLevel' && this.dwvApp.canWindowLevel()) ||
(key !== 'Scroll' && key !== 'WindowLevel')) {
if (
(key === "Scroll" && this.dwvApp.canScroll()) ||
(key === "WindowLevel" && this.dwvApp.canWindowLevel()) ||
(key !== "Scroll" && key !== "WindowLevel")
) {
this.toolNames.push(key);
}
}
this.onChangeTool(this.toolNames[0]);
// set data loaded flag
this.dataLoaded = true;
});
this.dwvApp.addEventListener('loadend', (/*event*/) => {
this.dwvApp.addEventListener("loadend", (/*event*/) => {
if (nReceivedError) {
this.loadProgress = 0;
alert('Received errors during load. Check log for details.');
alert("Received errors during load. Check log for details.");
// show drop box if nothing has been loaded
if (!nLoadItem) {
this.showDropbox(true);
}
}
if (nReceivedAbort) {
this.loadProgress = 0;
alert('Load was aborted.');
alert("Load was aborted.");
this.showDropbox(true);
}
});
this.dwvApp.addEventListener('loaditem', (/*event*/) => {
this.dwvApp.addEventListener("loaditem", (/*event*/) => {
++nLoadItem;
});
this.dwvApp.addEventListener('error', (event) => {
this.dwvApp.addEventListener("error", (event) => {
console.error(event.error);
++nReceivedError;
});
this.dwvApp.addEventListener('abort', (/*event*/) => {
this.dwvApp.addEventListener("abort", (/*event*/) => {
++nReceivedAbort;
});

// handle key events
this.dwvApp.addEventListener('keydown', (event) => {
this.dwvApp.defaultOnKeydown(event);
this.dwvApp.addEventListener("keydown", (event) => {
this.dwvApp.defaultOnKeydown(event);
});
// handle window resize
window.addEventListener('resize', this.dwvApp.onResize);
window.addEventListener("resize", this.dwvApp.onResize);

// setup drop box
this.setupDropbox();
Expand All @@ -140,66 +141,78 @@ export class DwvComponent implements OnInit {
* @param tool The new tool name.
*/
onChangeTool = (tool: string) => {
if ( this.dwvApp ) {
if (this.dwvApp) {
this.selectedTool = tool;
this.dwvApp.setTool(tool);
if (tool === 'Draw') {
if (tool === "Draw") {
this.onChangeShape(this.tools.Draw.options[0]);
}
}
}
};

/**
* Handle a change draw shape event.
* @param shape The new shape name.
*/
private onChangeShape = (shape: string) => {
if ( this.dwvApp && this.selectedTool === 'Draw') {
if (this.dwvApp && this.selectedTool === "Draw") {
this.dwvApp.setDrawShape(shape);
}
}
};

/**
* Handle a reset event.
*/
onReset = () => {
if ( this.dwvApp ) {
if (this.dwvApp) {
this.dwvApp.resetDisplay();
}
};

/**
* handle an undo event
*/
onUndo() {
this.dwvApp.undo();
}

/**
* handle a redo event
*/
onRedo() {
this.dwvApp.redo();
}

/**
* Open the DICOM tags dialog.
*/
openTagsDialog = () => {
this.dialog.open(TagsDialogComponent,
{
width: '80%',
height: '90%',
data: {
title: 'DICOM Tags',
value: this.metaData
}
}
);
}
this.dialog.open(TagsDialogComponent, {
width: "80%",
height: "90%",
data: {
title: "DICOM Tags",
value: this.metaData,
},
});
};

// drag and drop [begin] -----------------------------------------------------

/**
* Setup the data load drop box: add event listeners and set initial size.
*/
private setupDropbox = () => {
const layerContainer = this.dwvApp.getElement('layerContainer');
if (layerContainer) {
// show drop box
this.showDropbox(true);
// start listening to drag events on the layer container
layerContainer.addEventListener('dragover', this.onDragOver);
layerContainer.addEventListener('dragleave', this.onDragLeave);
layerContainer.addEventListener('drop', this.onDrop);
}
}
const layerContainer = this.dwvApp.getElement("layerContainer");
if (layerContainer) {
// show drop box
this.showDropbox(true);
// start listening to drag events on the layer container
layerContainer.addEventListener("dragover", this.onDragOver);
layerContainer.addEventListener("dragleave", this.onDragLeave);
layerContainer.addEventListener("drop", this.onDrop);
}
};

/**
* Handle a drag over.
Expand All @@ -212,9 +225,9 @@ export class DwvComponent implements OnInit {
// update box border
const box = this.dwvApp.getElement(this.borderClassName);
if (box && box.className.indexOf(this.hoverClassName) === -1) {
box.className += ' ' + this.hoverClassName;
box.className += " " + this.hoverClassName;
}
}
};

/**
* Handle a drag leave.
Expand All @@ -225,11 +238,11 @@ export class DwvComponent implements OnInit {
event.stopPropagation();
event.preventDefault();
// update box class
const box = this.dwvApp.getElement(this.borderClassName + ' hover');
const box = this.dwvApp.getElement(this.borderClassName + " hover");
if (box && box.className.indexOf(this.hoverClassName) !== -1) {
box.className = box.className.replace(' ' + this.hoverClassName, '');
box.className = box.className.replace(" " + this.hoverClassName, "");
}
}
};

/**
* Show/hide the data load drop box.
Expand All @@ -240,29 +253,28 @@ export class DwvComponent implements OnInit {
if (box) {
if (show) {
// reset css class
box.className = this.dropboxClassName + ' ' + this.borderClassName;
box.className = this.dropboxClassName + " " + this.borderClassName;
// check content
if (box.innerHTML === '') {
box.innerHTML = 'Drag and drop data here.';
if (box.innerHTML === "") {
box.innerHTML = "Drag and drop data here.";
}
const size = this.dwvApp.getLayerContainerSize();
// set the initial drop box size
const dropBoxSize = 2 * size.height / 3;
const dropBoxSize = (2 * size.height) / 3;
box.setAttribute(
'style',
'width:' + dropBoxSize + 'px;height:' + dropBoxSize + 'px');
"style",
"width:" + dropBoxSize + "px;height:" + dropBoxSize + "px"
);
} else {
// remove border css class
box.className = this.dropboxClassName;
// remove content
box.innerHTML = '';
box.innerHTML = "";
// make not visible
box.setAttribute(
'style',
'visible:false;');
box.setAttribute("style", "visible:false;");
}
}
}
};

/**
* Handle a drop event.
Expand All @@ -274,8 +286,7 @@ export class DwvComponent implements OnInit {
event.preventDefault();
// load files
this.dwvApp.loadFiles(event.dataTransfer.files);
}
};

// drag and drop [end] -------------------------------------------------------

}

0 comments on commit 2bc522d

Please sign in to comment.