kfb-view 2.0.17 → 2.1.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "2.0.17",
+  "version": "2.1.7",
   "author": "qifeng.fan <qifeng.fan@hzztai.com>",
   "license": "MIT",
   "main": "lib/kfb-view.js",

package/readme.md

@@ -1,21 +1 @@
 ## Kfb-View ##
-
-使用之前需安装html-loader,否则无法正常显示
-```
-npm install -D html-loader
-```
-
-### webpack ###
-```
-{
-  test: /\.html$/,
-  use: [{
-    loader: 'html-loader',
-    options: {
-      minimize: true,
-      removeComments: false,
-      collapseWhitespace: false,
-    },
-  }],
-}
-```

package/src/components/area/index.js

@@ -1,6 +1,6 @@
 import {ViewerCommon} from '../common/common';
 import {
-  CURVE, DOT,
+  POLYGON, DOT,
   FLAG,
   FONT,
   LINE_TYPES, MARKS,
@@ -94,7 +94,7 @@ export class Area extends ViewerCommon {
         pointList = getRectPoint(startPoint, endPoint);
         moveIndex = pointList.findIndex(
           (point) => pointInOtherPoint(point, {x, y}));
-      } else if (item.tool === CURVE) {
+      } else if (item.tool === POLYGON) {
         // 曲线，每个有效的点都可以移动
         pointList = this.setPointsMove(item);
         moveIndex = pointList.findIndex(
@@ -166,15 +166,15 @@ export class Area extends ViewerCommon {
       // moveIndex>-1,表示选中的是图形中可移动的点
       if (~moveIndex) {
         this.movePoint = {position: moveIndex, label: item};
-      } else if ((item.tool !== CURVE &&
+      } else if ((item.tool !== POLYGON &&
         isPointInMatrix(pointList[0], pointList[2], pointList[6], pointList[8],
           {x, y})) ||
-        (item.tool === CURVE && isPointInPolygon({x, y}, pointList))) {
+        (item.tool === POLYGON && isPointInPolygon({x, y}, pointList))) {
         selectList.push(item);
       }
     });
     // 如果点击canvas，同时选中了多个标签，那么显示规则为，
-    // 优先级FONT>STAR>FLAG>LINE>RECT>CURVE
+    // 优先级FONT>STAR>FLAG>LINE>RECT>POLYGON
     // 如果是LINE或RECT或ELLIPSE或CURVE则优先显示范围小的
     if (this.movePoint) {
       this.movePoint.label.select = true;
@@ -298,7 +298,7 @@ export class Area extends ViewerCommon {
           _endPoint = {x: pointList[8].x + distX, y: pointList[8].y + distY};
           break;
       }
-    } else if (tool === CURVE) {
+    } else if (tool === POLYGON) {
       const points = this.imageToViewerElementPoints(label.points).
         map((item, index) => ({
           ...item,
@@ -398,7 +398,7 @@ export class Area extends ViewerCommon {
         label.lineWidth += distY / scale;
       }
     }
-    if (tool !== CURVE) {
+    if (tool !== POLYGON) {
       label.points = [
         this.viewerElementToImageCoordinates(_startPoint.x, _startPoint.y),
         this.viewerElementToImageCoordinates(_endPoint.x, _endPoint.y)];
@@ -437,7 +437,7 @@ export class Area extends ViewerCommon {
       getRectPoint(points[0], points[1]).forEach((point) => {
         this.drawPoint(point, {thumbRadius: 5});
       });
-    } else if (type === CURVE) {
+    } else if (type === POLYGON) {
       points.forEach((point) => {
         if (point.canMove) {
           this.drawPoint(point, {thumbRadius: 5});
@@ -505,7 +505,7 @@ export class Area extends ViewerCommon {
           x: startPoint.x + dist,
           y: startPoint.y,
         }], label.tool);
-    } else if (label.tool === CURVE) {
+    } else if (label.tool === POLYGON) {
       if (this.draging) {
         const points = this.imageToViewerElementPoints(label.points);
         this.drawThumbPoint(points, label.tool);

package/src/components/board/index.js

@@ -1,7 +1,7 @@
 import {ViewerCommon} from '../common/common';
 import * as Tools from '../../tool';
 import {
-  CURVE, DOT, FLAG, MARKS,
+  POLYGON, DOT, FLAG, MARKS,
   NO_NORMAL_REGION_TYPES,
   POINT_TYPES, STAR,
 } from '../../const/mark';
@@ -11,7 +11,6 @@ import {
   EVENT_IN_PAINTING,
 } from '../../const/event';
 import {
-  isPointInMatrix,
   pointInOtherPoint,
   pointsToRegion,
 } from '../../util/calculate';
@@ -52,7 +51,10 @@ export class Board extends ViewerCommon {
     if (!options.tool) {
       throw new Error('options.tool must not bu null');
     }
-    if (!this[options.tool]) {
+    if (options.tool === 'curve') {
+      throw new Error(`Curve is obsolete. Please use polygon instead`);
+    }
+    if (!MARKS.includes(options.tool)) {
       throw new Error(`${options.tool} is not a effective drawing tool`);
     }
     this.viewer.canvas.focus();
@@ -80,7 +82,10 @@ export class Board extends ViewerCommon {
     if (!options.tool) {
       throw new Error('options.tool must not bu null');
     }
-    if (!this[options.tool]) {
+    if (options.tool === 'curve') {
+      throw new Error(`Curve is obsolete. Please use polygon instead`);
+    }
+    if (!MARKS.includes(options.tool)) {
       throw new Error(`${options.tool} is not a effective drawing tool`);
     }
     this.viewer.canvas.focus();
@@ -123,7 +128,7 @@ export class Board extends ViewerCommon {
       return;
     }
     const tool = this.tool;
-    if (tool === CURVE) {
+    if (tool === POLYGON) {
       this.points.push(point);
     } else {
       this.points = [point];
@@ -149,7 +154,7 @@ export class Board extends ViewerCommon {
     const tool = this.tool;
     if (!NO_NORMAL_REGION_TYPES.includes(tool)) {
       this.points = [this.points[0] || point, point];
-    } else if (tool === CURVE) {
+    } else if (tool === POLYGON) {
       this.points.push(point);
     } else if (POINT_TYPES.includes(tool)) {
       this.points = [point, point];
@@ -179,7 +184,7 @@ export class Board extends ViewerCommon {
       return;
     } else if (POINT_TYPES.includes(tool)) {
       this.points = [point, point];
-    } else if (tool === CURVE) {
+    } else if (tool === POLYGON) {
       const points = this.imageToViewerElementPoints(this.points);
       let firstPoint = points[0];
       // 是否是闭合曲线
@@ -229,7 +234,7 @@ export class Board extends ViewerCommon {
       return;
     }
     const tool = this.tool;
-    if (tool === CURVE && this.points.length > 0) {
+    if (tool === POLYGON && this.points.length > 0) {
       this.points.pop();
       this.points.push(point);
       this.clearCanvas();

package/src/components/common/common.js

@@ -1,21 +1,18 @@
 import {EventEmitter} from '../../util/event-emitter';
 import {Thumb} from '../../tool/Thumb';
 import {
-  acreage, getAngle,
-  getRectPoint, isPointInEllipse, isPointInMatrix,
-  perimeter,
-  pointsToRegion,
+  acreage, getAngle, perimeter, pointsToRegion,
+  getRectPoint, isPointInEllipse, isPointInMatrix, isPointInPolygon,
 } from '../../util/calculate';
 import {Point, Rect} from '../../plugin/openseadragon/openseadragon';
 import {
   ARROW,
   BILATERAL,
-  CURVE,
+  POLYGON,
   ELLIPSE,
   LINE,
   RECTANGLE,
 } from '../../const/mark';
-import {isPointInPolygon} from '../..';
 
 /**
  * 通用方法类
@@ -89,7 +86,7 @@ export class ViewerCommon extends EventEmitter {
       if (tool === RECTANGLE) {
         return isPointInMatrix(p1, p2, p3, p4, point);
       }
-      if (tool === CURVE && isClose) {
+      if (tool === POLYGON && isClose) {
         return isPointInPolygon(point, points);
       }
       return false;
@@ -272,7 +269,7 @@ export class ViewerCommon extends EventEmitter {
         };
       }
         break;
-      case CURVE: {
+      case POLYGON: {
         const points = label.points;
         const rightTop = getRectPoint(startPoint, endPoint)[2];
         const p = this.imageToViewerElementCoordinates(rightTop.x,

package/src/components/graduation/index.js

@@ -1,4 +1,3 @@
-import {Point} from '../../plugin/openseadragon/openseadragon';
 import {ViewerCommon} from '../common/common';
 
 /**
@@ -56,11 +55,8 @@ export class Graduation extends ViewerCommon {
    * @param {number} px
    */
   setScaleLine(txt, px) {
-    const startPoint =
-      this.viewport.imageToViewerElementCoordinates(new Point(0, 0));
-    const endPoint =
-      this.viewport.imageToViewerElementCoordinates(
-        new Point(px, 0));
+    const startPoint = this.imageToViewerElementCoordinates(0, 0);
+    const endPoint = this.imageToViewerElementCoordinates(px, 0);
     const width = Math.abs(endPoint.x - startPoint.x);
     if (this.options.custom) {
       this.$emit('graduation-change', {width, txt});
@@ -81,7 +77,7 @@ export class Graduation extends ViewerCommon {
     if (left) {
       x = left;
     } else if (right) {
-      x = width - right;
+      x = width - right - lineWidth;
     }
     if (top) {
       y = top;
@@ -100,6 +96,6 @@ export class Graduation extends ViewerCommon {
     ctx.fillStyle = '#454545';
     const t = txt.toFixed(0) + this.options.unit;
     const fontWidth = ctx.measureText(t).width;
-    ctx.fillText(t, x + lineWidth / 2 - fontWidth / 2, y - 10);
+    ctx.fillText(t, x + lineWidth / 2 - fontWidth / 2, top ? y + 10 : y - 10);
   }
 }

package/src/components/index.js

@@ -1,6 +1,6 @@
 export {Cache} from './cache';
 export {Rotation} from './rotation';
-export {ViewerNavigator} from './navigator';
+export {Navigator} from './navigator';
 export {Tailoring} from './tailoring';
 export {Shape} from './shape';
 export {Area} from './area';

package/src/components/navigator/index.js

@@ -8,7 +8,7 @@ import {EVENT_NAVIGATOR_VESTIGE} from '../../const/event';
  * 视图导航器
  * @class
  */
-export class ViewerNavigator extends EventEmitter {
+export class Navigator extends EventEmitter {
   /**
    * 初始化导航器数据
    * @param {Object=} rest openseadragon的导航器参数
@@ -36,13 +36,11 @@ export class ViewerNavigator extends EventEmitter {
     this.element.innerHTML = navigatorHtml;
     const navigatorMain = this.element.getElementsByClassName(
       'navigator-main')[0];
-    this.imgTop = 0;
-    this.imgLeft = 0;
     this.canvas = this.createNavigatorCanvas();
-    navigatorMain.prepend(this.canvas);
+    navigatorMain.appendChild(this.canvas);
     this.handleMouseDrag(navigatorMain);
 
-    const rect = navigatorMain.getElementsByClassName('view-rect')[0];
+    const rect = this.element.getElementsByClassName('view-rect')[0];
     this.rect = rect;
     this.$on('rect-change', (e) => {
       const vLine = navigatorMain.getElementsByClassName('v-line')[0];
@@ -83,8 +81,6 @@ export class ViewerNavigator extends EventEmitter {
     this.pointList = pointList;
     const colorCanvas = this.element.getElementsByClassName(
       'navigator-color-rect')[0];
-    colorCanvas.width = this.canvas.width;
-    colorCanvas.height = this.canvas.height;
     const ctx = colorCanvas.getContext('2d');
     this.pointList.forEach((item) => {
       this.drawRect(ctx, item);
@@ -298,11 +294,9 @@ export class ViewerNavigator extends EventEmitter {
       const imgWidth = img.width;
       const imgHeight = img.height;
       let scale = 1;
-      if (imgWidth > imgHeight) {
+      if (imgWidth >= imgHeight) {
         scale = imgWidth / this.width;
         const trueHeight = imgHeight / scale;
-        /* const top = (this.height - trueHeight) / 2;
-        this.imgTop = top;*/
         canvas.width = this.width;
         canvas.height = trueHeight;
         ctx.drawImage(img, 0, 0, canvas.width, trueHeight);
@@ -310,13 +304,15 @@ export class ViewerNavigator extends EventEmitter {
       if (imgHeight > imgWidth) {
         scale = imgHeight / this.height;
         const trueWidth = imgWidth / scale;
-        /* const left = (this.width - trueWidth) / 2;
-         this.imgLeft = left;*/
         canvas.height = this.height;
         canvas.width = trueWidth;
         ctx.drawImage(img, 0, 0, trueWidth, canvas.height);
       }
       this.setViewRect(this.element.getElementsByClassName('view-rect')[0]);
+      const colorCanvas = this.element.getElementsByClassName(
+        'navigator-color-rect')[0];
+      colorCanvas.width = this.canvas.width;
+      colorCanvas.height = this.canvas.height;
     };
     img.src = this.options.thumbnail; // 设置图片源地
     return canvas;
@@ -330,11 +326,9 @@ export class ViewerNavigator extends EventEmitter {
       const imgWidth = img.width;
       const imgHeight = img.height;
       let scale = 1;
-      if (imgWidth > imgHeight) {
+      if (imgWidth >= imgHeight) {
         scale = imgWidth / this.width;
         const trueHeight = imgHeight / scale;
-        const top = (this.height - trueHeight) / 2;
-        this.imgTop = top;
         this.canvas.width = this.width;
         this.canvas.height = trueHeight;
         ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -343,14 +337,16 @@ export class ViewerNavigator extends EventEmitter {
       if (imgHeight > imgWidth) {
         scale = imgHeight / this.height;
         const trueWidth = imgWidth / scale;
-        const left = (this.width - trueWidth) / 2;
-        this.imgLeft = left;
         this.canvas.height = this.height;
         this.canvas.width = trueWidth;
         ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         ctx.drawImage(img, 0, 0, trueWidth, this.canvas.height);
       }
       this.setViewRect(this.element.getElementsByClassName('view-rect')[0]);
+      const colorCanvas = this.element.getElementsByClassName(
+        'navigator-color-rect')[0];
+      colorCanvas.width = this.canvas.width;
+      colorCanvas.height = this.canvas.height;
     };
     img.src = this.options.thumbnail; // 设置图片源地
   }

package/src/components/navigator/navigator.scss

@@ -1,46 +1,46 @@
-#hzzt_navigator {
+.openseadragon-navigator {
   position: absolute;
   z-index: 1;
-}
 
-.navigator-main {
-  position: relative;
-  overflow: hidden;
-  display: block;
-  font-size: 0;
+  .navigator-main {
+    position: relative;
+    overflow: hidden;
+    display: block;
+    font-size: 0;
 
-  .v-line {
-    height: 100%;
-    width: 1px;
-    line-height: 1px;
-    position: absolute;
-    top: 0;
-    background-color: rgb(255, 0, 0);
-  }
+    .v-line {
+      height: 100%;
+      width: 1px;
+      line-height: 1px;
+      position: absolute;
+      top: 0;
+      background-color: rgb(255, 0, 0);
+    }
 
-  .h-line {
-    width: 100%;
-    height: 1px;
-    line-height: 1px;
-    position: absolute;
-    left: 0;
-    background-color: rgb(255, 0, 0);
-  }
+    .h-line {
+      width: 100%;
+      height: 1px;
+      line-height: 1px;
+      position: absolute;
+      left: 0;
+      background-color: rgb(255, 0, 0);
+    }
 
-  .view-rect {
-    top: -1px;
-    border: 1px solid rgb(255, 0, 0);
-    background-color: rgb(255, 255, 255);
-    position: absolute;
-    cursor: pointer;
-    opacity: 0.5;
-    box-sizing: border-box;
-  }
+    .view-rect {
+      top: -1px;
+      border: 1px solid rgb(255, 0, 0);
+      background-color: rgb(255, 255, 255);
+      position: absolute;
+      cursor: pointer;
+      opacity: 0.5;
+      box-sizing: border-box;
+    }
 
-  .navigator-color-rect {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
+    .navigator-color-rect {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 1;
+    }
   }
 }

package/src/components/shape/index.js

@@ -1,10 +1,9 @@
 import {
-  CURVE, HAS_REGION_TYPES, MARKS,
+  POLYGON, HAS_REGION_TYPES, MARKS,
   NO_NORMAL_REGION_TYPES,
 } from '../../const/mark';
 import {ViewerCommon} from '../common/common';
 import * as Tools from '../../tool';
-import {isPointInPolygon} from '../..';
 import {Combination} from '../../tool/Combination';
 
 /**
@@ -104,7 +103,7 @@ export class Shape extends ViewerCommon {
     if (!NO_NORMAL_REGION_TYPES.includes(item.tool)) {
       this[item.tool].draw(points, this.viewport.getRotation(),
         this.imageToViewerElementRectangle(item.region));
-    } else if (item.tool === CURVE) {
+    } else if (item.tool === POLYGON) {
       this[item.tool].draw(points);
       this[item.tool].drawEndPoints(points);
     } else {

package/src/const/mark.js

@@ -3,7 +3,7 @@ export const ARROW = 'Arrow';
 export const BILATERAL = 'Bilateral';
 export const RECTANGLE = 'Rectangle';
 export const ELLIPSE = 'Ellipse';
-export const CURVE = 'Curve';
+export const POLYGON = 'Polygon';
 export const FONT = 'Font';
 export const STAR = 'Star';
 export const FLAG = 'Flag';
@@ -12,15 +12,15 @@ export const DOT = 'Dot';
 export const POINT_TYPES = [FONT, STAR, FLAG, DOT];
 export const REGION_TYPES = [RECTANGLE, ELLIPSE];
 export const LINE_TYPES = [LINE, ARROW, BILATERAL];
-export const NO_NORMAL_REGION_TYPES = [CURVE, FONT, STAR, FLAG, DOT];
-export const HAS_REGION_TYPES = [...REGION_TYPES, CURVE];
+export const NO_NORMAL_REGION_TYPES = [POLYGON, FONT, STAR, FLAG, DOT];
+export const HAS_REGION_TYPES = [...REGION_TYPES, POLYGON];
 export const MARKS = [
   LINE,
   ARROW,
   BILATERAL,
   RECTANGLE,
   ELLIPSE,
-  CURVE,
+  POLYGON,
   FONT,
   STAR,
   FLAG,

package/src/tool/Arrow.js

@@ -40,5 +40,3 @@ class Arrow extends Brush {
 export {
   Arrow,
 };
-
-export const arrow = new Arrow();

package/src/tool/Bilateral.js

@@ -41,5 +41,3 @@ class Bilateral extends Brush {
 export {
   Bilateral,
 };
-
-export const bilateral = new Bilateral();

package/src/tool/Combination.js

@@ -1,5 +1,5 @@
 import {Brush} from './Brush';
-import {CURVE, ELLIPSE, RECTANGLE} from '../const/mark';
+import {POLYGON, ELLIPSE, RECTANGLE} from '../const/mark';
 import {pointsToRegion} from '../util/calculate';
 
 /**
@@ -10,7 +10,7 @@ class Combination extends Brush {
   /**
    * 绘制
    * @param {Object} parent - 绘制的点
-   * @param {Object} parent.points - 绘制的点x
+   * @param {Array} parent.points - 绘制的点x
    * @param {string} parent.tool - 工具
    * @param {Array} children
    * @param {number} rotation
@@ -27,12 +27,11 @@ class Combination extends Brush {
     };
     ctx.translate(centerPoint.x, centerPoint.y);
     ctx.rotate(rotation * Math.PI / 180);
-    if (tool === CURVE) {
-      ctx.moveTo(points[0].x - centerPoint.x, points[0].y - centerPoint.y);
-      points.forEach((point) => {
-        ctx.lineTo(point.x - centerPoint.x, point.y - centerPoint.y);
-      });
-      ctx.lineTo(points[0].x - centerPoint.x, points[0].y - centerPoint.y);
+    if (tool === POLYGON) {
+      ctx.drawPolygon(points.map((p) => ({
+        x: p.x - centerPoint.x,
+        y: p.y - centerPoint.y,
+      })), true, false);
     } else if (tool === RECTANGLE) {
       ctx.moveTo(points[0].x - centerPoint.x, points[0].y - centerPoint.y);
       ctx.lineTo(points[0].x + region.width - centerPoint.x,
@@ -43,21 +42,7 @@ class Combination extends Brush {
         points[0].y + region.height - centerPoint.y);
       ctx.lineTo(points[0].x - centerPoint.x, points[0].y - centerPoint.y);
     } else if (tool === ELLIPSE) {
-      const x = 0;
-      const y = 0;
-      const a = region.width / 2;
-      const b = region.height / 2;
-      // 选择a、b中的较大者作为arc方法的半径参数
-      const r = (a > b) ? a : b;
-      const ratioX = a / r; // 横轴缩放比率
-      const ratioY = b / r; // 纵轴缩放比率
-      ctx.save();
-      ctx.scale(ratioX, ratioY); // 进行缩放（均匀压缩）
-      // 从椭圆的左端点开始顺时针绘制
-      ctx.moveTo((x + a) / ratioX, y / ratioY);
-      ctx.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
-      ctx.closePath();
-      ctx.restore();
+      ctx.drawOval(0, 0, region.width / 2, region.height / 2, false);
     }
     ctx.closePath();
     ctx.restore();
@@ -70,13 +55,11 @@ class Combination extends Brush {
       };
       ctx.translate(centerPoint.x, centerPoint.y);
       ctx.rotate(rotation * Math.PI / 180);
-      if (tool === CURVE) {
-        points.reverse();
-        ctx.moveTo(points[0].x - centerPoint.x, points[0].y - centerPoint.y);
-        points.forEach((point) => {
-          ctx.lineTo(point.x - centerPoint.x, point.y - centerPoint.y);
-        });
-        ctx.lineTo(points[0].x - centerPoint.x, points[0].y - centerPoint.y);
+      if (tool === POLYGON) {
+        ctx.drawPolygon(points.map((p) => ({
+          x: p.x - centerPoint.x,
+          y: p.y - centerPoint.y,
+        })), true, true);
       } else if (tool === RECTANGLE) {
         ctx.moveTo(points[0].x - centerPoint.x, points[0].y - centerPoint.y);
         ctx.lineTo(points[0].x - centerPoint.x,
@@ -87,21 +70,7 @@ class Combination extends Brush {
           points[0].y - centerPoint.y);
         ctx.lineTo(points[0].x - centerPoint.x, points[0].y - centerPoint.y);
       } else if (tool === ELLIPSE) {
-        const x = 0;
-        const y = 0;
-        const a = region.width / 2;
-        const b = region.height / 2;
-        // 选择a、b中的较大者作为arc方法的半径参数
-        const r = (a > b) ? a : b;
-        const ratioX = a / r; // 横轴缩放比率
-        const ratioY = b / r; // 纵轴缩放比率
-        ctx.save();
-        ctx.scale(ratioX, ratioY); // 进行缩放（均匀压缩）
-        // 从椭圆的左端点开始逆时针绘制
-        ctx.moveTo((x + a) / ratioX, y / ratioY);
-        ctx.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, true);
-        ctx.closePath();
-        ctx.restore();
+        ctx.drawOval(0, 0, region.width / 2, region.height / 2, true);
       }
       ctx.closePath();
       ctx.restore();

package/src/tool/Dot.js

@@ -41,5 +41,3 @@ class Dot extends Brush {
 export {
   Dot,
 };
-
-export const dot = new Dot();

package/src/tool/Ellipse.js

@@ -62,5 +62,3 @@ class Ellipse extends Brush {
 export {
   Ellipse,
 };
-
-export const ellipse = new Ellipse();

package/src/tool/Flag.js

@@ -72,5 +72,3 @@ class Flag extends Brush {
 export {
   Flag,
 };
-
-export const flag = new Flag();

package/src/tool/Font.js

@@ -40,5 +40,3 @@ class Font extends Brush {
 export {
   Font,
 };
-
-export const font = new Font();

package/src/tool/Line.js

@@ -42,5 +42,3 @@ class Line extends Brush {
 export {
   Line,
 };
-
-export const line = new Line();