npm - kfb-view - Versions diffs - 3.0.7 → 3.0.9 - Mend

kfb-view 3.0.7 → 3.0.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/lib/kfb-view.js +1 -1
package/lib/kfb-view.js.LICENSE.txt +3 -3
package/package.json +3 -2
package/src/components/area/index.js +38 -48
package/src/components/board/index.js +1 -1
package/src/components/common/common.js +0 -67
package/src/components/grid/index.js +8 -3
package/src/plugin/openseadragon/openseadragon.js +667 -126
package/src/util/calculate.js +79 -35
package/src/util/imageData.js +0 -5
package/src/view.js +7 -6
package/.idea/codeStyles/codeStyleConfig.xml +0 -5
package/.idea/git_toolbox_prj.xml +0 -20
package/.idea/inspectionProfiles/Project_Default.xml +0 -6
package/.idea/inspectionProfiles/profiles_settings.xml +0 -5
package/.idea/kfb-view.iml +0 -12
package/.idea/misc.xml +0 -86
package/.idea/modules.xml +0 -8
package/.idea/vcs.xml +0 -6
package/.idea/watcherTasks.xml +0 -4
package/.idea/workspace.xml +0 -870
package/config/utils.js +0 -77
package/config/webpack.base.conf.js +0 -95
package/config/webpack.dev.conf.js +0 -80
package/config/webpack.lib.conf.js +0 -92
package/config/webpack.prod.conf.js +0 -102
package/config/webpack.test.conf.js +0 -0
package/example/index.js +0 -546
package/example/label/check.svg +0 -8
package/example/label/check_empty.svg +0 -9
package/example/label/cross.svg +0 -6
package/example/label/cross_empty.svg +0 -6
package/example/label/delete.svg +0 -8
package/example/label/delete_empty.svg +0 -8
package/example/label/hasAudit.svg +0 -26
package/example/style/index.css +0 -153
package/example/worker/canvas.worker.js +0 -28
package/test.html +0 -246
package/yarn.lock +0 -7508

package/example/style/index.css DELETED Viewed

@@ -1,153 +0,0 @@
-body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4, h5, h6, i, b, textarea, button, input, select, figure, figcaption {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  font-style: normal;
-  text-decoration: none;
-  border: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-font-smoothing: antialiased;
-}
-.rotation-container {
-  color: #FDFDFD;
-  font-size: 14px;
-  padding: 2px 10px;
-  opacity: .5;
-  background-color: #000;
-}
-.flex {
-  display: flex;
-  display: -ms-flexbox;
-  display: -webkit-flex
-}
-.column {
-  flex-direction: column;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column
-}
-.row {
-  flex-direction: row;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row
-}
-.wrap {
-  flex-wrap: wrap;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap
-}
-.nowrap {
-  flex-wrap: nowrap;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap
-}
-.justify-content-center {
-  justify-content: center;
-  -webkit-justify-content: center
-}
-.justify-content-between {
-  justify-content: space-between;
-  -webkit-justify-content: space-between
-}
-.justify-content-around {
-  justify-content: space-around;
-  -webkit-justify-content: space-around
-}
-.justify-content-start {
-  justify-content: flex-start;
-  -webkit-justify-content: flex-start
-}
-.justify-content-end {
-  justify-content: flex-end;
-  -webkit-justify-content: flex-end
-}
-.align-items-center {
-  align-items: center;
-  -webkit-align-items: center
-}
-.align-items-start {
-  align-items: flex-start;
-  -webkit-align-items: flex-start
-}
-.align-items-end {
-  align-items: flex-end;
-  -webkit-align-items: flex-end
-}
-.align-items-stretch {
-  align-items: stretch;
-  -webkit-align-items: stretch
-}
-.align-items-baseline {
-  align-items: baseline;
-  -webkit-align-items: baseline
-}
-.align-self-center {
-  align-self: center;
-  -webkit-align-self: center
-}
-.align-self-start {
-  align-self: flex-start;
-  -webkit-align-self: flex-start
-}
-.align-self-end {
-  align-self: flex-end;
-  -webkit-align-self: flex-end
-}
-.align-self-stretch {
-  align-self: stretch;
-  -webkit-align-self: stretch
-}
-.align-self-baseline {
-  align-self: baseline;
-  -webkit-align-self: baseline
-}
-.flex-1 {
-  flex: 1;
-  -webkit-flex: 1;
-  -ms-flex: 1
-}
-.flex-2 {
-  flex: 2;
-  -webkit-flex: 2;
-  -ms-flex: 2
-}
-.flex-3 {
-  flex: 3;
-  -webkit-flex: 3;
-  -ms-flex: 3
-}
-.flex-4 {
-  flex: 4;
-  -webkit-flex: 4;
-  -ms-flex: 4
-}
-.flex-5 {
-  flex: 5;
-  -webkit-flex: 5;
-  -ms-flex: 5
-}

package/example/worker/canvas.worker.js DELETED Viewed

@@ -1,28 +0,0 @@
-import {hslToRgb, rgbToHsl, toGamma} from '../../src/util/imageData';
-self.onmessage = (e) => {
-  const {imageData, rangeA, rangeB} = e.data;
-  for (let i = 0; i < imageData.data.length; i++) {
-    if (i % 4 === 0) {
-      const {h, s, l} = rgbToHsl(imageData.data[i + 0],
-        imageData.data[i + 1], imageData.data[i + 2]);
-      // console.log(h, s, l);
-      let {r, g, b} = hslToRgb(h, s * (1 + rangeB / 1), l);
-      r = toGamma(r, rangeA);
-      g = toGamma(g, rangeA);
-      b = toGamma(b, rangeA);
-      imageData.data[i + 0] = Math.round(r);
-      imageData.data[i + 1] = Math.round(g);
-      imageData.data[i + 2] = Math.round(b);
-    }
-    /*  if (i === 0) {
-        console.log(imageData.data[i + 0], imageData.data[i + 1],
-          imageData.data[i + 2]);
-      }*/
-  }
-  self.postMessage({
-    imageData,
-  });
-};

package/test.html DELETED Viewed

@@ -1,246 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Title</title>
-</head>
-<body>
-<canvas id="canvas" width="800" height="600"></canvas>
-<button id="reDraw">重绘</button>
-<script>
-  /**
-   * 清除圆形区域
-   * @param {number} x
-   * @param {number} y
-   * @param {number} radius
-   * @param {number=} [start=0]
-   * @param {number=} [end=Math.PI * 2]
-   */
-  CanvasRenderingContext2D.prototype.clearArc =
-    function clearArc(x, y, radius, start = 0, end = Math.PI * 2) {
-      this.beginPath();
-      this.save();
-      this.arc(x, y, radius, start, end);
-      this.clip();
-      this.clearRect(x - radius, y - radius, (radius) * 2, (radius) * 2);
-      this.restore();
-      this.closePath();
-    };
-  /**
-   * 画箭头
-   * @param {Object} p1 线起始点
-   * @param {Object} p2 线结束点
-   * @param {number=} [theta=30] 箭头与线的夹角
-   * @param {number=} [headlen=10] 箭头的长度
-   */
-  CanvasRenderingContext2D.prototype.drawArrow = function drawArrow(
-    p1, p2, theta = 30, headlen = 10) {
-    const angle = Math.atan2(p1.y - p2.y, p1.x - p2.x) * 180 / Math.PI;
-    const angle1 = (angle + theta) * Math.PI / 180;
-    const angle2 = (angle - theta) * Math.PI / 180;
-    const topX = headlen * Math.cos(angle1);
-    const topY = headlen * Math.sin(angle1);
-    const botX = headlen * Math.cos(angle2);
-    const botY = headlen * Math.sin(angle2);
-    let arrowX = p1.x - topX;
-    let arrowY = p2.y - topY;
-    this.moveTo(arrowX, arrowY);
-    this.moveTo(p1.x, p1.y);
-    this.lineTo(p2.x, p2.y);
-    arrowX = p2.x + topX;
-    arrowY = p2.y + topY;
-    this.moveTo(arrowX, arrowY);
-    this.lineTo(p2.x, p2.y);
-    arrowX = p2.x + botX;
-    arrowY = p2.y + botY;
-    this.lineTo(arrowX, arrowY);
-  };
-  /**
-   * 绘制椭圆
-   * @param {number} x 椭圆中心横坐标，
-   * @param {number} y 椭圆中心纵坐标
-   * @param {number} a 椭圆横半轴长
-   * @param {number} b 椭圆纵半轴长
-   * @param {boolean=} [anticlockwise=true] false为顺时针，true为逆时针
-   */
-  CanvasRenderingContext2D.prototype.drawOval = function drawOval(
-    x, y, a, b, anticlockwise = true) {
-    this.save();
-    // 选择a、b中的较大者作为arc方法的半径参数
-    const r = (a > b) ? a : b;
-    const ratioX = a / r; // 横轴缩放比率
-    const ratioY = b / r; // 纵轴缩放比率
-    this.scale(ratioX, ratioY); // 进行缩放（均匀压缩）
-    // 从椭圆的左端点开始逆时针绘制
-    this.moveTo((x + a) / ratioX, y / ratioY);
-    this.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, anticlockwise);
-    this.closePath();
-    this.restore();
-  };
-  /**
-   * 画多边形
-   * @param {Array} points 多边形所有的点
-   * @param {boolean=} [close=true] 是否是闭合多边形
-   * @param {boolean=} [anticlockwise=true] false为顺时针，true为逆时针
-   */
-  CanvasRenderingContext2D.prototype.drawPolygon = function drawPolygon(
-    points, close = true, anticlockwise = true) {
-    let _points = [...points];
-    // Green公式,判断连续点组成的多边形是逆时针还是顺时针
-    let d = 0;
-    for (let i = 0; i < points.length - 1; i++) {
-      d += -0.5 * (points[i + 1].y + points[i].y) *
-        (points[i + 1].x - points[i].x);
-    }
-    // 顺时针
-    if (d > 0) {
-      if (anticlockwise) {
-        _points.reverse();
-      }
-    } else {
-      // 逆时针
-      if (!anticlockwise) {
-        _points.reverse();
-      }
-    }
-    this.moveTo(_points[0].x, _points[0].y);
-    _points.forEach((point) => {
-      this.lineTo(point.x, point.y);
-    });
-    if (close) {
-      this.lineTo(_points[0].x, _points[0].y);
-    }
-  };
-  // eslint-disable-next-line require-jsdoc
-  class BezierCurve {
-    // eslint-disable-next-line require-jsdoc
-    constructor(points) {
-      this.points = points;
-    }
-    // eslint-disable-next-line require-jsdoc
-    calculationPoint(t) {
-      const n = this.points.length - 1;
-      const point = {x: 0, y: 0};
-      this.points.forEach((item, index) => {
-        if (!index) {
-          point.x += item.x * Math.pow((1 - t), n - index) * Math.pow(t, index);
-          point.y += item.y * Math.pow((1 - t), n - index) * Math.pow(t, index);
-        } else {
-          point.x += this.factorial(n) / this.factorial(index) /
-            this.factorial(n - index) * item.x * Math.pow((1 - t), n - index) *
-            Math.pow(t, index);
-          point.y += this.factorial(n) / this.factorial(index) /
-            this.factorial(n - index) * item.y * Math.pow((1 - t), n - index) *
-            Math.pow(t, index);
-        }
-      });
-      return point;
-    }
-    // eslint-disable-next-line require-jsdoc
-    factorial(num) {
-      if (num <= 1) {
-        return 1;
-      } else {
-        return num * this.factorial(num - 1);
-      }
-    }
-  }
-  /**
-   * 绘制多次贝赛尔曲线
-   */
-  CanvasRenderingContext2D.prototype.bezierCurve = function(...rest) {
-    if (rest.length === 1) {
-      const points = rest[0];
-      if (Array.isArray(points)) {
-        if (points.length === 1 || points.length === 0) {
-          throw new SyntaxError('Parameter length greater than 1');
-        }
-        if (points.length === 2) {
-          this.moveTo(points[0].x, points[0].y);
-          this.lineTo(points[1].x, points[1].y);
-          this.stroke();
-        }
-        if (points.length === 3) {
-          const startPoint = points[0];
-          this.moveTo(startPoint.x, startPoint.y);
-          this.quadraticCurveTo(points[1].x, points[1].y, points[2].x,
-            points[2].y);
-          this.stroke();
-        } else if (points.length === 4) {
-          const startPoint = points[0];
-          this.moveTo(startPoint.x, startPoint.y);
-          this.bezierCurveTo(points[1].x, points[1].y, points[2].x, points[2].y,
-            points[3].x, points[3].y);
-          this.stroke();
-        } else {
-          const bezierCurve = new BezierCurve(points);
-          const calculationPoints = [...new Array(101)].map(
-            (item, index) => bezierCurve.calculationPoint(index / 100));
-          for (let t = 1; t < 101; t++) {
-            this.moveTo(calculationPoints[t - 1].x, calculationPoints[t - 1].y);
-            this.lineTo(calculationPoints[t].x, calculationPoints[t].y);
-            this.stroke();
-          }
-        }
-      } else {
-        throw new SyntaxError('parameter error');
-      }
-    } else if (rest.length === 4) {
-      this.quadraticCurveTo(rest[0], rest[1], rest[2], rest[3]);
-    } else if (rest.length === 6) {
-      this.bezierCurveTo(rest[0], rest[1], rest[2], rest[3], rest[4], rest[5]);
-    } else {
-      throw new SyntaxError('parameter error');
-    }
-  };
-</script>
-<script>
-  const canvas = document.getElementById('canvas');
-  const reDrawBtn = document.getElementById('reDraw');
-  const ctx = canvas.getContext('2d');
-  function drwaP(points) {
-    let dist = 4 * 1;
-    const point = points[0];
-    const ctx = canvas.getContext('2d');
-    const {x, y} = point;
-    ctx.lineWidth = 2;
-    ctx.moveTo(x + dist, y);
-    ctx.arc(x, y, dist, 0, Math.PI * 2, !1);
-  }
-  ctx.beginPath();
-  ctx.fillStyle = '#ff0000';
-  ctx.strokeStyle = '#00ff00';
-  ctx.lineWidth = 2;
-  for (let i = 0; i < 4000; i++) {
-    drwaP([{x: Math.random() * 800, y: Math.random() * 600}]);
-  }
-  ctx.stroke();
-  reDrawBtn.addEventListener('click', (e) => {
-    ctx.clearRect(0, 0, 800, 600);
-    console.time('draw');
-    ctx.beginPath();
-    ctx.fillStyle = '#ff0000';
-    ctx.strokeStyle = '#00ff00';
-    ctx.lineWidth = 2;
-    for (let i = 0; i < 10000; i++) {
-      drwaP([{x: Math.random() * 800, y: Math.random() * 600}]);
-    }
-    ctx.stroke();
-    console.timeEnd('draw');
-  });
-</script>
-</body>
-</html>