additional tools

src/tools/draw.js

@@ -580,6 +580,12 @@ export class Draw {
     const viewController = viewLayer.getViewController();
     this.#tmpShapeGroup = this.#currentFactory.create(
       tmpPoints, this.#style, viewController);
+
+    // skip if select draw
+    if (!this.#tmpShapeGroup) {
+      return;
+    }
+
     // do not listen during creation
     const shape = this.#tmpShapeGroup.getChildren(isNodeNameShape)[0];
     shape.listening(false);
@@ -612,6 +618,12 @@ export class Draw {
     // create final shape
     const finalShapeGroup = this.#currentFactory.create(
       finalPoints, this.#style, viewController);
+
+    // skip if select draw
+    if (!finalShapeGroup) {
+      return;
+    }
+
     finalShapeGroup.id(guid());
 
     // get the position group

src/tools/index.js

@@ -5,7 +5,12 @@ import {Opacity} from './opacity';
 import {Draw} from './draw';
 import {Floodfill} from './floodfill';
 import {Livewire} from './livewire';
+import {ZoomIn} from './zoomIn';
+import {ZoomOut} from './zoomOut';
+import {Pan} from './pan';
 
+
+import {Select} from './select';
 import {ArrowFactory} from './arrow';
 import {CircleFactory} from './circle';
 import {EllipseFactory} from './ellipse';
@@ -33,7 +38,10 @@ export const defaultToolList = {
   Draw,
   Filter,
   Floodfill,
-  Livewire
+  Livewire,
+  ZoomIn,
+  ZoomOut,
+  Pan,
 };
 
 export const toolOptions = {
@@ -45,7 +53,8 @@ export const toolOptions = {
     ProtractorFactory,
     RectangleFactory,
     RoiFactory,
-    RulerFactory
+    RulerFactory,
+    SelectFactory: Select,
   },
   filter: {
     Threshold,

src/tools/pan.js

@@ -0,0 +1,249 @@
+import {Point2D} from '../math/point';
+import {getLayerDetailsFromEvent} from '../gui/layerGroup';
+import {getMousePoint, getTouchPoints} from '../gui/generic';
+
+// doc imports
+/* eslint-disable no-unused-vars */
+import {App} from '../app/application';
+import {Line} from '../math/line';
+/* eslint-enable no-unused-vars */
+
+/**
+ * Pan class.
+ *
+ * @example
+ * // create the dwv app
+ * const app = new dwv.App();
+ * // initialise
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
+ * const viewConfigs = {'*': [viewConfig0]};
+ * const options = new dwv.AppOptions(viewConfigs);
+ * options.tools = {Pan: new dwv.ToolConfig()};
+ * app.init(options);
+ * // activate tool
+ * app.addEventListener('load', function () {
+ *   app.setTool('Pan');
+ * });
+ * // load dicom data
+ * app.loadURLs([
+ *   'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm'
+ * ]);
+ */
+export class Pan {
+  /**
+   * Associated app.
+   *
+   * @type {App}
+   */
+  #app;
+
+  /**
+   * Interaction start flag.
+   *
+   * @type {boolean}
+   */
+  #started = false;
+
+  /**
+   * Start point.
+   *
+   * @type {Point2D}
+   */
+  #startPoint;
+
+  /**
+   * Line between input points.
+   *
+   * @type {Line}
+   */
+  #pointsLine;
+
+  /**
+   * PointsLine midpoint.
+   *
+   * @type {Point2D}
+   */
+  #midPoint;
+
+  /**
+   * @param {App} app The associated application.
+   */
+  constructor(app) {
+    this.#app = app;
+  }
+
+  /**
+   * Start tool interaction.
+   *
+   * @param {Point2D} point The start point.
+   */
+  #start(point) {
+    this.#started = true;
+    this.#startPoint = point;
+  }
+
+  /**
+   * Two touch start.
+   *
+   * @param {Point2D[]} points The start points.
+   */
+  #twoTouchStart = (points) => {
+    this.#started = true;
+    this.#startPoint = points[0];
+    // points line
+    this.#pointsLine = new Line(points[0], points[1]);
+    this.#midPoint = this.#pointsLine.getMidpoint();
+  };
+
+  /**
+   * Update tool interaction.
+   *
+   * @param {Point2D} point The update point.
+   * @param {string} divId The layer group divId.
+   */
+  #update(point, divId) {
+    if (!this.#started) {
+      return;
+    }
+
+    // calculate translation
+    const tx = point.getX() - this.#startPoint.getX();
+    const ty = point.getY() - this.#startPoint.getY();
+    // apply translation
+    const layerGroup = this.#app.getLayerGroupByDivId(divId);
+    const viewLayer = layerGroup.getActiveViewLayer();
+    const viewController = viewLayer.getViewController();
+    const planeOffset = viewLayer.displayToPlaneScale(new Point2D(tx, ty));
+    const offset3D = viewController.getOffset3DFromPlaneOffset({
+      x: planeOffset.getX(),
+      y: planeOffset.getY(),
+    });
+    layerGroup.addTranslation({
+      x: offset3D.getX(),
+      y: offset3D.getY(),
+      z: offset3D.getZ(),
+    });
+    layerGroup.draw();
+    // reset origin point
+    this.#startPoint = point;
+  }
+
+  /**
+   * Finish tool interaction.
+   */
+  #finish() {
+    if (this.#started) {
+      this.#started = false;
+    }
+  }
+
+  /**
+   * Handle mouse down event.
+   *
+   * @param {object} event The mouse down event.
+   */
+  mousedown = (event) => {
+    const mousePoint = getMousePoint(event);
+    this.#start(mousePoint);
+  };
+
+  /**
+   * Handle mouse move event.
+   *
+   * @param {object} event The mouse move event.
+   */
+  mousemove = (event) => {
+    const mousePoint = getMousePoint(event);
+    const layerDetails = getLayerDetailsFromEvent(event);
+    this.#update(mousePoint, layerDetails.groupDivId);
+  };
+
+  /**
+   * Handle mouse up event.
+   *
+   * @param {object} _event The mouse up event.
+   */
+  mouseup = (_event) => {
+    this.#finish();
+  };
+
+  /**
+   * Handle mouse out event.
+   *
+   * @param {object} _event The mouse out event.
+   */
+  mouseout = (_event) => {
+    this.#finish();
+  };
+
+  /**
+   * Handle touch start event.
+   *
+   * @param {object} event The touch start event.
+   */
+  touchstart = (event) => {
+    const touchPoints = getTouchPoints(event);
+    if (touchPoints.length === 1) {
+      this.#start(touchPoints[0]);
+    } else if (touchPoints.length === 2) {
+      this.#twoTouchStart(touchPoints);
+    }
+  };
+
+  /**
+   * Handle touch move event.
+   *
+   * @param {object} event The touch move event.
+   */
+  touchmove = (event) => {
+    const touchPoints = getTouchPoints(event);
+    const layerDetails = getLayerDetailsFromEvent(event);
+    if (touchPoints.length === 1) {
+      this.#update(touchPoints[0], layerDetails.groupDivId);
+    }
+  };
+
+  /**
+   * Handle touch end event.
+   *
+   * @param {object} _event The touch end event.
+   */
+  touchend = (_event) => {
+    this.#finish();
+  };
+
+  /**
+   * Handle key down event.
+   *
+   * @param {object} event The key down event.
+   */
+  keydown = (event) => {
+    event.context = 'Pan';
+    this.#app.onKeydown(event);
+  };
+
+  /**
+   * Activate the tool.
+   *
+   * @param {boolean} _bool The flag to activate or not.
+   */
+  activate(_bool) {
+    // does nothing
+  }
+
+  /**
+   * Initialise the tool.
+   */
+  init() {
+    // does nothing
+  }
+
+  /**
+   * Set the tool live features: does nothing.
+   *
+   * @param {object} _features The list of features.
+   */
+  setFeatures(_features) {
+    // does nothing
+  }
+} // Pan class

src/tools/select.js

@@ -0,0 +1,69 @@
+// import {defaults} from '../app/defaults';
+
+// doc imports
+/* eslint-disable no-unused-vars */
+import Konva from 'konva';
+import {ViewController} from '../app/viewController';
+import {Style} from '../gui/style';
+import {Point2D} from '../math/point';
+/* eslint-enable no-unused-vars */
+
+/**
+ * Arrow factory.
+ */
+export class Select {
+  /**
+   * Get the name of the shape group.
+   *
+   * @returns {string} The name.
+   */
+  getGroupName() {
+    return 'select-group';
+  }
+
+  /**
+   * Get the number of points needed to build the shape.
+   *
+   * @returns {number} The number of points.
+   */
+  getNPoints() {
+    return 2;
+  }
+
+  /**
+   * Is the input group a group of this factory?
+   *
+   * @param {Konva.Group} group The group to test.
+   * @returns {boolean} True if the group is from this fcatory.
+   */
+  isFactoryGroup(group) {
+    return this.getGroupName() === group.name();
+  }
+
+  /**
+   * Create an arrow shape to be displayed.
+   *
+   * @param {Point2D[]} _points The points from which to extract the line.
+   * @param {Style} _style The drawing style.
+   * @param {ViewController} _viewController The associated view controller.
+   * @returns {Konva.Group} The Konva group.
+   */
+  create(_points, _style, _viewController) {
+    // const group = new Konva.Group();
+    // group.name(this.getGroupName());
+    // group.visible(true); // dont inherit
+    return null;
+  }
+
+  /**
+   * Update an arrow shape.
+   *
+   * @param {Konva.Ellipse} _anchor The active anchor.
+   * @param {Style} _style The app style.
+   * @param {ViewController} _viewController The associated view controller.
+   */
+  update(_anchor, _style, _viewController) {
+    // does nothing
+  }
+
+} // class Select