source: imaps-frontend/node_modules/konva/lib/Context.js@ d565449

main
Last change on this file since d565449 was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation
  • Property mode set to 100644
File size: 16.5 KB
RevLine 
[d565449]1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3exports.HitContext = exports.SceneContext = exports.Context = void 0;
4const Util_1 = require("./Util");
5const Global_1 = require("./Global");
6function simplifyArray(arr) {
7 var retArr = [], len = arr.length, util = Util_1.Util, n, val;
8 for (n = 0; n < len; n++) {
9 val = arr[n];
10 if (util._isNumber(val)) {
11 val = Math.round(val * 1000) / 1000;
12 }
13 else if (!util._isString(val)) {
14 val = val + '';
15 }
16 retArr.push(val);
17 }
18 return retArr;
19}
20var COMMA = ',', OPEN_PAREN = '(', CLOSE_PAREN = ')', OPEN_PAREN_BRACKET = '([', CLOSE_BRACKET_PAREN = '])', SEMICOLON = ';', DOUBLE_PAREN = '()', EQUALS = '=', CONTEXT_METHODS = [
21 'arc',
22 'arcTo',
23 'beginPath',
24 'bezierCurveTo',
25 'clearRect',
26 'clip',
27 'closePath',
28 'createLinearGradient',
29 'createPattern',
30 'createRadialGradient',
31 'drawImage',
32 'ellipse',
33 'fill',
34 'fillText',
35 'getImageData',
36 'createImageData',
37 'lineTo',
38 'moveTo',
39 'putImageData',
40 'quadraticCurveTo',
41 'rect',
42 'roundRect',
43 'restore',
44 'rotate',
45 'save',
46 'scale',
47 'setLineDash',
48 'setTransform',
49 'stroke',
50 'strokeText',
51 'transform',
52 'translate',
53];
54var CONTEXT_PROPERTIES = [
55 'fillStyle',
56 'strokeStyle',
57 'shadowColor',
58 'shadowBlur',
59 'shadowOffsetX',
60 'shadowOffsetY',
61 'letterSpacing',
62 'lineCap',
63 'lineDashOffset',
64 'lineJoin',
65 'lineWidth',
66 'miterLimit',
67 'direction',
68 'font',
69 'textAlign',
70 'textBaseline',
71 'globalAlpha',
72 'globalCompositeOperation',
73 'imageSmoothingEnabled',
74];
75const traceArrMax = 100;
76class Context {
77 constructor(canvas) {
78 this.canvas = canvas;
79 if (Global_1.Konva.enableTrace) {
80 this.traceArr = [];
81 this._enableTrace();
82 }
83 }
84 fillShape(shape) {
85 if (shape.fillEnabled()) {
86 this._fill(shape);
87 }
88 }
89 _fill(shape) {
90 }
91 strokeShape(shape) {
92 if (shape.hasStroke()) {
93 this._stroke(shape);
94 }
95 }
96 _stroke(shape) {
97 }
98 fillStrokeShape(shape) {
99 if (shape.attrs.fillAfterStrokeEnabled) {
100 this.strokeShape(shape);
101 this.fillShape(shape);
102 }
103 else {
104 this.fillShape(shape);
105 this.strokeShape(shape);
106 }
107 }
108 getTrace(relaxed, rounded) {
109 var traceArr = this.traceArr, len = traceArr.length, str = '', n, trace, method, args;
110 for (n = 0; n < len; n++) {
111 trace = traceArr[n];
112 method = trace.method;
113 if (method) {
114 args = trace.args;
115 str += method;
116 if (relaxed) {
117 str += DOUBLE_PAREN;
118 }
119 else {
120 if (Util_1.Util._isArray(args[0])) {
121 str += OPEN_PAREN_BRACKET + args.join(COMMA) + CLOSE_BRACKET_PAREN;
122 }
123 else {
124 if (rounded) {
125 args = args.map((a) => typeof a === 'number' ? Math.floor(a) : a);
126 }
127 str += OPEN_PAREN + args.join(COMMA) + CLOSE_PAREN;
128 }
129 }
130 }
131 else {
132 str += trace.property;
133 if (!relaxed) {
134 str += EQUALS + trace.val;
135 }
136 }
137 str += SEMICOLON;
138 }
139 return str;
140 }
141 clearTrace() {
142 this.traceArr = [];
143 }
144 _trace(str) {
145 var traceArr = this.traceArr, len;
146 traceArr.push(str);
147 len = traceArr.length;
148 if (len >= traceArrMax) {
149 traceArr.shift();
150 }
151 }
152 reset() {
153 var pixelRatio = this.getCanvas().getPixelRatio();
154 this.setTransform(1 * pixelRatio, 0, 0, 1 * pixelRatio, 0, 0);
155 }
156 getCanvas() {
157 return this.canvas;
158 }
159 clear(bounds) {
160 var canvas = this.getCanvas();
161 if (bounds) {
162 this.clearRect(bounds.x || 0, bounds.y || 0, bounds.width || 0, bounds.height || 0);
163 }
164 else {
165 this.clearRect(0, 0, canvas.getWidth() / canvas.pixelRatio, canvas.getHeight() / canvas.pixelRatio);
166 }
167 }
168 _applyLineCap(shape) {
169 const lineCap = shape.attrs.lineCap;
170 if (lineCap) {
171 this.setAttr('lineCap', lineCap);
172 }
173 }
174 _applyOpacity(shape) {
175 var absOpacity = shape.getAbsoluteOpacity();
176 if (absOpacity !== 1) {
177 this.setAttr('globalAlpha', absOpacity);
178 }
179 }
180 _applyLineJoin(shape) {
181 const lineJoin = shape.attrs.lineJoin;
182 if (lineJoin) {
183 this.setAttr('lineJoin', lineJoin);
184 }
185 }
186 setAttr(attr, val) {
187 this._context[attr] = val;
188 }
189 arc(x, y, radius, startAngle, endAngle, counterClockwise) {
190 this._context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
191 }
192 arcTo(x1, y1, x2, y2, radius) {
193 this._context.arcTo(x1, y1, x2, y2, radius);
194 }
195 beginPath() {
196 this._context.beginPath();
197 }
198 bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
199 this._context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
200 }
201 clearRect(x, y, width, height) {
202 this._context.clearRect(x, y, width, height);
203 }
204 clip(...args) {
205 this._context.clip.apply(this._context, args);
206 }
207 closePath() {
208 this._context.closePath();
209 }
210 createImageData(width, height) {
211 var a = arguments;
212 if (a.length === 2) {
213 return this._context.createImageData(width, height);
214 }
215 else if (a.length === 1) {
216 return this._context.createImageData(width);
217 }
218 }
219 createLinearGradient(x0, y0, x1, y1) {
220 return this._context.createLinearGradient(x0, y0, x1, y1);
221 }
222 createPattern(image, repetition) {
223 return this._context.createPattern(image, repetition);
224 }
225 createRadialGradient(x0, y0, r0, x1, y1, r1) {
226 return this._context.createRadialGradient(x0, y0, r0, x1, y1, r1);
227 }
228 drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) {
229 var a = arguments, _context = this._context;
230 if (a.length === 3) {
231 _context.drawImage(image, sx, sy);
232 }
233 else if (a.length === 5) {
234 _context.drawImage(image, sx, sy, sWidth, sHeight);
235 }
236 else if (a.length === 9) {
237 _context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
238 }
239 }
240 ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise) {
241 this._context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise);
242 }
243 isPointInPath(x, y, path, fillRule) {
244 if (path) {
245 return this._context.isPointInPath(path, x, y, fillRule);
246 }
247 return this._context.isPointInPath(x, y, fillRule);
248 }
249 fill(...args) {
250 this._context.fill.apply(this._context, args);
251 }
252 fillRect(x, y, width, height) {
253 this._context.fillRect(x, y, width, height);
254 }
255 strokeRect(x, y, width, height) {
256 this._context.strokeRect(x, y, width, height);
257 }
258 fillText(text, x, y, maxWidth) {
259 if (maxWidth) {
260 this._context.fillText(text, x, y, maxWidth);
261 }
262 else {
263 this._context.fillText(text, x, y);
264 }
265 }
266 measureText(text) {
267 return this._context.measureText(text);
268 }
269 getImageData(sx, sy, sw, sh) {
270 return this._context.getImageData(sx, sy, sw, sh);
271 }
272 lineTo(x, y) {
273 this._context.lineTo(x, y);
274 }
275 moveTo(x, y) {
276 this._context.moveTo(x, y);
277 }
278 rect(x, y, width, height) {
279 this._context.rect(x, y, width, height);
280 }
281 roundRect(x, y, width, height, radii) {
282 this._context.roundRect(x, y, width, height, radii);
283 }
284 putImageData(imageData, dx, dy) {
285 this._context.putImageData(imageData, dx, dy);
286 }
287 quadraticCurveTo(cpx, cpy, x, y) {
288 this._context.quadraticCurveTo(cpx, cpy, x, y);
289 }
290 restore() {
291 this._context.restore();
292 }
293 rotate(angle) {
294 this._context.rotate(angle);
295 }
296 save() {
297 this._context.save();
298 }
299 scale(x, y) {
300 this._context.scale(x, y);
301 }
302 setLineDash(segments) {
303 if (this._context.setLineDash) {
304 this._context.setLineDash(segments);
305 }
306 else if ('mozDash' in this._context) {
307 this._context['mozDash'] = segments;
308 }
309 else if ('webkitLineDash' in this._context) {
310 this._context['webkitLineDash'] = segments;
311 }
312 }
313 getLineDash() {
314 return this._context.getLineDash();
315 }
316 setTransform(a, b, c, d, e, f) {
317 this._context.setTransform(a, b, c, d, e, f);
318 }
319 stroke(path2d) {
320 if (path2d) {
321 this._context.stroke(path2d);
322 }
323 else {
324 this._context.stroke();
325 }
326 }
327 strokeText(text, x, y, maxWidth) {
328 this._context.strokeText(text, x, y, maxWidth);
329 }
330 transform(a, b, c, d, e, f) {
331 this._context.transform(a, b, c, d, e, f);
332 }
333 translate(x, y) {
334 this._context.translate(x, y);
335 }
336 _enableTrace() {
337 var that = this, len = CONTEXT_METHODS.length, origSetter = this.setAttr, n, args;
338 var func = function (methodName) {
339 var origMethod = that[methodName], ret;
340 that[methodName] = function () {
341 args = simplifyArray(Array.prototype.slice.call(arguments, 0));
342 ret = origMethod.apply(that, arguments);
343 that._trace({
344 method: methodName,
345 args: args,
346 });
347 return ret;
348 };
349 };
350 for (n = 0; n < len; n++) {
351 func(CONTEXT_METHODS[n]);
352 }
353 that.setAttr = function () {
354 origSetter.apply(that, arguments);
355 var prop = arguments[0];
356 var val = arguments[1];
357 if (prop === 'shadowOffsetX' ||
358 prop === 'shadowOffsetY' ||
359 prop === 'shadowBlur') {
360 val = val / this.canvas.getPixelRatio();
361 }
362 that._trace({
363 property: prop,
364 val: val,
365 });
366 };
367 }
368 _applyGlobalCompositeOperation(node) {
369 const op = node.attrs.globalCompositeOperation;
370 var def = !op || op === 'source-over';
371 if (!def) {
372 this.setAttr('globalCompositeOperation', op);
373 }
374 }
375}
376exports.Context = Context;
377CONTEXT_PROPERTIES.forEach(function (prop) {
378 Object.defineProperty(Context.prototype, prop, {
379 get() {
380 return this._context[prop];
381 },
382 set(val) {
383 this._context[prop] = val;
384 },
385 });
386});
387class SceneContext extends Context {
388 constructor(canvas, { willReadFrequently = false } = {}) {
389 super(canvas);
390 this._context = canvas._canvas.getContext('2d', {
391 willReadFrequently,
392 });
393 }
394 _fillColor(shape) {
395 var fill = shape.fill();
396 this.setAttr('fillStyle', fill);
397 shape._fillFunc(this);
398 }
399 _fillPattern(shape) {
400 this.setAttr('fillStyle', shape._getFillPattern());
401 shape._fillFunc(this);
402 }
403 _fillLinearGradient(shape) {
404 var grd = shape._getLinearGradient();
405 if (grd) {
406 this.setAttr('fillStyle', grd);
407 shape._fillFunc(this);
408 }
409 }
410 _fillRadialGradient(shape) {
411 const grd = shape._getRadialGradient();
412 if (grd) {
413 this.setAttr('fillStyle', grd);
414 shape._fillFunc(this);
415 }
416 }
417 _fill(shape) {
418 const hasColor = shape.fill(), fillPriority = shape.getFillPriority();
419 if (hasColor && fillPriority === 'color') {
420 this._fillColor(shape);
421 return;
422 }
423 const hasPattern = shape.getFillPatternImage();
424 if (hasPattern && fillPriority === 'pattern') {
425 this._fillPattern(shape);
426 return;
427 }
428 const hasLinearGradient = shape.getFillLinearGradientColorStops();
429 if (hasLinearGradient && fillPriority === 'linear-gradient') {
430 this._fillLinearGradient(shape);
431 return;
432 }
433 const hasRadialGradient = shape.getFillRadialGradientColorStops();
434 if (hasRadialGradient && fillPriority === 'radial-gradient') {
435 this._fillRadialGradient(shape);
436 return;
437 }
438 if (hasColor) {
439 this._fillColor(shape);
440 }
441 else if (hasPattern) {
442 this._fillPattern(shape);
443 }
444 else if (hasLinearGradient) {
445 this._fillLinearGradient(shape);
446 }
447 else if (hasRadialGradient) {
448 this._fillRadialGradient(shape);
449 }
450 }
451 _strokeLinearGradient(shape) {
452 const start = shape.getStrokeLinearGradientStartPoint(), end = shape.getStrokeLinearGradientEndPoint(), colorStops = shape.getStrokeLinearGradientColorStops(), grd = this.createLinearGradient(start.x, start.y, end.x, end.y);
453 if (colorStops) {
454 for (var n = 0; n < colorStops.length; n += 2) {
455 grd.addColorStop(colorStops[n], colorStops[n + 1]);
456 }
457 this.setAttr('strokeStyle', grd);
458 }
459 }
460 _stroke(shape) {
461 var dash = shape.dash(), strokeScaleEnabled = shape.getStrokeScaleEnabled();
462 if (shape.hasStroke()) {
463 if (!strokeScaleEnabled) {
464 this.save();
465 var pixelRatio = this.getCanvas().getPixelRatio();
466 this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
467 }
468 this._applyLineCap(shape);
469 if (dash && shape.dashEnabled()) {
470 this.setLineDash(dash);
471 this.setAttr('lineDashOffset', shape.dashOffset());
472 }
473 this.setAttr('lineWidth', shape.strokeWidth());
474 if (!shape.getShadowForStrokeEnabled()) {
475 this.setAttr('shadowColor', 'rgba(0,0,0,0)');
476 }
477 var hasLinearGradient = shape.getStrokeLinearGradientColorStops();
478 if (hasLinearGradient) {
479 this._strokeLinearGradient(shape);
480 }
481 else {
482 this.setAttr('strokeStyle', shape.stroke());
483 }
484 shape._strokeFunc(this);
485 if (!strokeScaleEnabled) {
486 this.restore();
487 }
488 }
489 }
490 _applyShadow(shape) {
491 var _a, _b, _c;
492 var color = (_a = shape.getShadowRGBA()) !== null && _a !== void 0 ? _a : 'black', blur = (_b = shape.getShadowBlur()) !== null && _b !== void 0 ? _b : 5, offset = (_c = shape.getShadowOffset()) !== null && _c !== void 0 ? _c : {
493 x: 0,
494 y: 0,
495 }, scale = shape.getAbsoluteScale(), ratio = this.canvas.getPixelRatio(), scaleX = scale.x * ratio, scaleY = scale.y * ratio;
496 this.setAttr('shadowColor', color);
497 this.setAttr('shadowBlur', blur * Math.min(Math.abs(scaleX), Math.abs(scaleY)));
498 this.setAttr('shadowOffsetX', offset.x * scaleX);
499 this.setAttr('shadowOffsetY', offset.y * scaleY);
500 }
501}
502exports.SceneContext = SceneContext;
503class HitContext extends Context {
504 constructor(canvas) {
505 super(canvas);
506 this._context = canvas._canvas.getContext('2d', {
507 willReadFrequently: true,
508 });
509 }
510 _fill(shape) {
511 this.save();
512 this.setAttr('fillStyle', shape.colorKey);
513 shape._fillFuncHit(this);
514 this.restore();
515 }
516 strokeShape(shape) {
517 if (shape.hasHitStroke()) {
518 this._stroke(shape);
519 }
520 }
521 _stroke(shape) {
522 if (shape.hasHitStroke()) {
523 const strokeScaleEnabled = shape.getStrokeScaleEnabled();
524 if (!strokeScaleEnabled) {
525 this.save();
526 var pixelRatio = this.getCanvas().getPixelRatio();
527 this.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
528 }
529 this._applyLineCap(shape);
530 var hitStrokeWidth = shape.hitStrokeWidth();
531 var strokeWidth = hitStrokeWidth === 'auto' ? shape.strokeWidth() : hitStrokeWidth;
532 this.setAttr('lineWidth', strokeWidth);
533 this.setAttr('strokeStyle', shape.colorKey);
534 shape._strokeFuncHit(this);
535 if (!strokeScaleEnabled) {
536 this.restore();
537 }
538 }
539 }
540}
541exports.HitContext = HitContext;
Note: See TracBrowser for help on using the repository browser.