kfb-view 3.0.8 → 3.1.0

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 (38) hide show
  1. package/lib/kfb-view.js +1 -1
  2. package/lib/kfb-view.js.LICENSE.txt +3 -3
  3. package/package.json +3 -2
  4. package/src/components/area/index.js +38 -48
  5. package/src/components/board/index.js +30 -4
  6. package/src/components/common/common.js +0 -67
  7. package/src/plugin/openseadragon/openseadragon.js +667 -126
  8. package/src/util/calculate.js +79 -35
  9. package/src/util/imageData.js +0 -5
  10. package/src/view.js +6 -6
  11. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  12. package/.idea/git_toolbox_prj.xml +0 -20
  13. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  14. package/.idea/inspectionProfiles/profiles_settings.xml +0 -5
  15. package/.idea/kfb-view.iml +0 -12
  16. package/.idea/misc.xml +0 -86
  17. package/.idea/modules.xml +0 -8
  18. package/.idea/vcs.xml +0 -6
  19. package/.idea/watcherTasks.xml +0 -4
  20. package/.idea/workspace.xml +0 -874
  21. package/config/utils.js +0 -77
  22. package/config/webpack.base.conf.js +0 -95
  23. package/config/webpack.dev.conf.js +0 -80
  24. package/config/webpack.lib.conf.js +0 -92
  25. package/config/webpack.prod.conf.js +0 -102
  26. package/config/webpack.test.conf.js +0 -0
  27. package/example/index.js +0 -547
  28. package/example/label/check.svg +0 -8
  29. package/example/label/check_empty.svg +0 -9
  30. package/example/label/cross.svg +0 -6
  31. package/example/label/cross_empty.svg +0 -6
  32. package/example/label/delete.svg +0 -8
  33. package/example/label/delete_empty.svg +0 -8
  34. package/example/label/hasAudit.svg +0 -26
  35. package/example/style/index.css +0 -153
  36. package/example/worker/canvas.worker.js +0 -28
  37. package/test.html +0 -246
  38. package/yarn.lock +0 -7508
package/example/style/index.css DELETED
@@ -1,153 +0,0 @@
1
- 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 {
2
- padding: 0;
3
- margin: 0;
4
- list-style: none;
5
- font-style: normal;
6
- text-decoration: none;
7
- border: none;
8
- -webkit-tap-highlight-color: transparent;
9
- -webkit-font-smoothing: antialiased;
10
- }
11
-
12
- .rotation-container {
13
- color: #FDFDFD;
14
- font-size: 14px;
15
- padding: 2px 10px;
16
- opacity: .5;
17
- background-color: #000;
18
- }
19
-
20
- .flex {
21
- display: flex;
22
- display: -ms-flexbox;
23
- display: -webkit-flex
24
- }
25
-
26
- .column {
27
- flex-direction: column;
28
- -webkit-flex-direction: column;
29
- -ms-flex-direction: column
30
- }
31
-
32
- .row {
33
- flex-direction: row;
34
- -webkit-flex-direction: row;
35
- -ms-flex-direction: row
36
- }
37
-
38
- .wrap {
39
- flex-wrap: wrap;
40
- -webkit-flex-wrap: wrap;
41
- -ms-flex-wrap: wrap
42
- }
43
-
44
- .nowrap {
45
- flex-wrap: nowrap;
46
- -webkit-flex-wrap: nowrap;
47
- -ms-flex-wrap: nowrap
48
- }
49
-
50
- .justify-content-center {
51
- justify-content: center;
52
- -webkit-justify-content: center
53
- }
54
-
55
- .justify-content-between {
56
- justify-content: space-between;
57
- -webkit-justify-content: space-between
58
- }
59
-
60
- .justify-content-around {
61
- justify-content: space-around;
62
- -webkit-justify-content: space-around
63
- }
64
-
65
- .justify-content-start {
66
- justify-content: flex-start;
67
- -webkit-justify-content: flex-start
68
- }
69
-
70
- .justify-content-end {
71
- justify-content: flex-end;
72
- -webkit-justify-content: flex-end
73
- }
74
-
75
- .align-items-center {
76
- align-items: center;
77
- -webkit-align-items: center
78
- }
79
-
80
- .align-items-start {
81
- align-items: flex-start;
82
- -webkit-align-items: flex-start
83
- }
84
-
85
- .align-items-end {
86
- align-items: flex-end;
87
- -webkit-align-items: flex-end
88
- }
89
-
90
- .align-items-stretch {
91
- align-items: stretch;
92
- -webkit-align-items: stretch
93
- }
94
-
95
- .align-items-baseline {
96
- align-items: baseline;
97
- -webkit-align-items: baseline
98
- }
99
-
100
- .align-self-center {
101
- align-self: center;
102
- -webkit-align-self: center
103
- }
104
-
105
- .align-self-start {
106
- align-self: flex-start;
107
- -webkit-align-self: flex-start
108
- }
109
-
110
- .align-self-end {
111
- align-self: flex-end;
112
- -webkit-align-self: flex-end
113
- }
114
-
115
- .align-self-stretch {
116
- align-self: stretch;
117
- -webkit-align-self: stretch
118
- }
119
-
120
- .align-self-baseline {
121
- align-self: baseline;
122
- -webkit-align-self: baseline
123
- }
124
-
125
- .flex-1 {
126
- flex: 1;
127
- -webkit-flex: 1;
128
- -ms-flex: 1
129
- }
130
-
131
- .flex-2 {
132
- flex: 2;
133
- -webkit-flex: 2;
134
- -ms-flex: 2
135
- }
136
-
137
- .flex-3 {
138
- flex: 3;
139
- -webkit-flex: 3;
140
- -ms-flex: 3
141
- }
142
-
143
- .flex-4 {
144
- flex: 4;
145
- -webkit-flex: 4;
146
- -ms-flex: 4
147
- }
148
-
149
- .flex-5 {
150
- flex: 5;
151
- -webkit-flex: 5;
152
- -ms-flex: 5
153
- }
package/example/worker/canvas.worker.js DELETED
@@ -1,28 +0,0 @@
1
- import {hslToRgb, rgbToHsl, toGamma} from '../../src/util/imageData';
2
-
3
- self.onmessage = (e) => {
4
- const {imageData, rangeA, rangeB} = e.data;
5
-
6
- for (let i = 0; i < imageData.data.length; i++) {
7
- if (i % 4 === 0) {
8
- const {h, s, l} = rgbToHsl(imageData.data[i + 0],
9
- imageData.data[i + 1], imageData.data[i + 2]);
10
- // console.log(h, s, l);
11
- let {r, g, b} = hslToRgb(h, s * (1 + rangeB / 1), l);
12
- r = toGamma(r, rangeA);
13
- g = toGamma(g, rangeA);
14
- b = toGamma(b, rangeA);
15
- imageData.data[i + 0] = Math.round(r);
16
- imageData.data[i + 1] = Math.round(g);
17
- imageData.data[i + 2] = Math.round(b);
18
- }
19
-
20
- /* if (i === 0) {
21
- console.log(imageData.data[i + 0], imageData.data[i + 1],
22
- imageData.data[i + 2]);
23
- }*/
24
- }
25
- self.postMessage({
26
- imageData,
27
- });
28
- };
package/test.html DELETED
@@ -1,246 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <title>Title</title>
6
- </head>
7
- <body>
8
-
9
- <canvas id="canvas" width="800" height="600"></canvas>
10
- <button id="reDraw">重绘</button>
11
- <script>
12
- /**
13
- * 清除圆形区域
14
- * @param {number} x
15
- * @param {number} y
16
- * @param {number} radius
17
- * @param {number=} [start=0]
18
- * @param {number=} [end=Math.PI * 2]
19
- */
20
- CanvasRenderingContext2D.prototype.clearArc =
21
- function clearArc(x, y, radius, start = 0, end = Math.PI * 2) {
22
- this.beginPath();
23
- this.save();
24
- this.arc(x, y, radius, start, end);
25
- this.clip();
26
- this.clearRect(x - radius, y - radius, (radius) * 2, (radius) * 2);
27
- this.restore();
28
- this.closePath();
29
- };
30
-
31
- /**
32
- * 画箭头
33
- * @param {Object} p1 线起始点
34
- * @param {Object} p2 线结束点
35
- * @param {number=} [theta=30] 箭头与线的夹角
36
- * @param {number=} [headlen=10] 箭头的长度
37
- */
38
- CanvasRenderingContext2D.prototype.drawArrow = function drawArrow(
39
- p1, p2, theta = 30, headlen = 10) {
40
- const angle = Math.atan2(p1.y - p2.y, p1.x - p2.x) * 180 / Math.PI;
41
- const angle1 = (angle + theta) * Math.PI / 180;
42
- const angle2 = (angle - theta) * Math.PI / 180;
43
- const topX = headlen * Math.cos(angle1);
44
- const topY = headlen * Math.sin(angle1);
45
- const botX = headlen * Math.cos(angle2);
46
- const botY = headlen * Math.sin(angle2);
47
- let arrowX = p1.x - topX;
48
- let arrowY = p2.y - topY;
49
- this.moveTo(arrowX, arrowY);
50
- this.moveTo(p1.x, p1.y);
51
- this.lineTo(p2.x, p2.y);
52
- arrowX = p2.x + topX;
53
- arrowY = p2.y + topY;
54
- this.moveTo(arrowX, arrowY);
55
- this.lineTo(p2.x, p2.y);
56
- arrowX = p2.x + botX;
57
- arrowY = p2.y + botY;
58
- this.lineTo(arrowX, arrowY);
59
- };
60
-
61
- /**
62
- * 绘制椭圆
63
- * @param {number} x 椭圆中心横坐标，
64
- * @param {number} y 椭圆中心纵坐标
65
- * @param {number} a 椭圆横半轴长
66
- * @param {number} b 椭圆纵半轴长
67
- * @param {boolean=} [anticlockwise=true] false为顺时针，true为逆时针
68
- */
69
- CanvasRenderingContext2D.prototype.drawOval = function drawOval(
70
- x, y, a, b, anticlockwise = true) {
71
- this.save();
72
- // 选择a、b中的较大者作为arc方法的半径参数
73
- const r = (a > b) ? a : b;
74
- const ratioX = a / r; // 横轴缩放比率
75
- const ratioY = b / r; // 纵轴缩放比率
76
- this.scale(ratioX, ratioY); // 进行缩放（均匀压缩）
77
- // 从椭圆的左端点开始逆时针绘制
78
- this.moveTo((x + a) / ratioX, y / ratioY);
79
- this.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, anticlockwise);
80
- this.closePath();
81
- this.restore();
82
- };
83
-
84
- /**
85
- * 画多边形
86
- * @param {Array} points 多边形所有的点
87
- * @param {boolean=} [close=true] 是否是闭合多边形
88
- * @param {boolean=} [anticlockwise=true] false为顺时针，true为逆时针
89
- */
90
- CanvasRenderingContext2D.prototype.drawPolygon = function drawPolygon(
91
- points, close = true, anticlockwise = true) {
92
- let _points = [...points];
93
- // Green公式,判断连续点组成的多边形是逆时针还是顺时针
94
- let d = 0;
95
- for (let i = 0; i < points.length - 1; i++) {
96
- d += -0.5 * (points[i + 1].y + points[i].y) *
97
- (points[i + 1].x - points[i].x);
98
- }
99
- // 顺时针
100
- if (d > 0) {
101
- if (anticlockwise) {
102
- _points.reverse();
103
- }
104
- } else {
105
- // 逆时针
106
- if (!anticlockwise) {
107
- _points.reverse();
108
- }
109
- }
110
- this.moveTo(_points[0].x, _points[0].y);
111
- _points.forEach((point) => {
112
- this.lineTo(point.x, point.y);
113
- });
114
- if (close) {
115
- this.lineTo(_points[0].x, _points[0].y);
116
- }
117
- };
118
-
119
- // eslint-disable-next-line require-jsdoc
120
- class BezierCurve {
121
- // eslint-disable-next-line require-jsdoc
122
- constructor(points) {
123
- this.points = points;
124
- }
125
-
126
- // eslint-disable-next-line require-jsdoc
127
- calculationPoint(t) {
128
- const n = this.points.length - 1;
129
- const point = {x: 0, y: 0};
130
- this.points.forEach((item, index) => {
131
- if (!index) {
132
- point.x += item.x * Math.pow((1 - t), n - index) * Math.pow(t, index);
133
- point.y += item.y * Math.pow((1 - t), n - index) * Math.pow(t, index);
134
- } else {
135
- point.x += this.factorial(n) / this.factorial(index) /
136
- this.factorial(n - index) * item.x * Math.pow((1 - t), n - index) *
137
- Math.pow(t, index);
138
- point.y += this.factorial(n) / this.factorial(index) /
139
- this.factorial(n - index) * item.y * Math.pow((1 - t), n - index) *
140
- Math.pow(t, index);
141
- }
142
- });
143
- return point;
144
- }
145
-
146
- // eslint-disable-next-line require-jsdoc
147
- factorial(num) {
148
- if (num <= 1) {
149
- return 1;
150
- } else {
151
- return num * this.factorial(num - 1);
152
- }
153
- }
154
- }
155
-
156
- /**
157
- * 绘制多次贝赛尔曲线
158
- */
159
- CanvasRenderingContext2D.prototype.bezierCurve = function(...rest) {
160
- if (rest.length === 1) {
161
- const points = rest[0];
162
- if (Array.isArray(points)) {
163
- if (points.length === 1 || points.length === 0) {
164
- throw new SyntaxError('Parameter length greater than 1');
165
- }
166
- if (points.length === 2) {
167
- this.moveTo(points[0].x, points[0].y);
168
- this.lineTo(points[1].x, points[1].y);
169
- this.stroke();
170
- }
171
- if (points.length === 3) {
172
- const startPoint = points[0];
173
- this.moveTo(startPoint.x, startPoint.y);
174
- this.quadraticCurveTo(points[1].x, points[1].y, points[2].x,
175
- points[2].y);
176
- this.stroke();
177
- } else if (points.length === 4) {
178
- const startPoint = points[0];
179
- this.moveTo(startPoint.x, startPoint.y);
180
- this.bezierCurveTo(points[1].x, points[1].y, points[2].x, points[2].y,
181
- points[3].x, points[3].y);
182
- this.stroke();
183
- } else {
184
- const bezierCurve = new BezierCurve(points);
185
- const calculationPoints = [...new Array(101)].map(
186
- (item, index) => bezierCurve.calculationPoint(index / 100));
187
- for (let t = 1; t < 101; t++) {
188
- this.moveTo(calculationPoints[t - 1].x, calculationPoints[t - 1].y);
189
- this.lineTo(calculationPoints[t].x, calculationPoints[t].y);
190
- this.stroke();
191
- }
192
- }
193
- } else {
194
- throw new SyntaxError('parameter error');
195
- }
196
- } else if (rest.length === 4) {
197
- this.quadraticCurveTo(rest[0], rest[1], rest[2], rest[3]);
198
- } else if (rest.length === 6) {
199
- this.bezierCurveTo(rest[0], rest[1], rest[2], rest[3], rest[4], rest[5]);
200
- } else {
201
- throw new SyntaxError('parameter error');
202
- }
203
- };
204
-
205
-
206
- </script>
207
- <script>
208
- const canvas = document.getElementById('canvas');
209
- const reDrawBtn = document.getElementById('reDraw');
210
- const ctx = canvas.getContext('2d');
211
-
212
- function drwaP(points) {
213
- let dist = 4 * 1;
214
- const point = points[0];
215
- const ctx = canvas.getContext('2d');
216
- const {x, y} = point;
217
- ctx.lineWidth = 2;
218
- ctx.moveTo(x + dist, y);
219
- ctx.arc(x, y, dist, 0, Math.PI * 2, !1);
220
- }
221
-
222
- ctx.beginPath();
223
- ctx.fillStyle = '#ff0000';
224
- ctx.strokeStyle = '#00ff00';
225
- ctx.lineWidth = 2;
226
- for (let i = 0; i < 4000; i++) {
227
- drwaP([{x: Math.random() * 800, y: Math.random() * 600}]);
228
- }
229
- ctx.stroke();
230
- reDrawBtn.addEventListener('click', (e) => {
231
- ctx.clearRect(0, 0, 800, 600);
232
- console.time('draw');
233
- ctx.beginPath();
234
- ctx.fillStyle = '#ff0000';
235
- ctx.strokeStyle = '#00ff00';
236
- ctx.lineWidth = 2;
237
- for (let i = 0; i < 10000; i++) {
238
- drwaP([{x: Math.random() * 800, y: Math.random() * 600}]);
239
- }
240
- ctx.stroke();
241
- console.timeEnd('draw');
242
- });
243
-
244
- </script>
245
- </body>
246
- </html>