| [d565449] | 1 | "use strict";
|
|---|
| 2 | Object.defineProperty(exports, "__esModule", { value: true });
|
|---|
| 3 | exports.Node = void 0;
|
|---|
| 4 | const Util_1 = require("./Util");
|
|---|
| 5 | const Factory_1 = require("./Factory");
|
|---|
| 6 | const Canvas_1 = require("./Canvas");
|
|---|
| 7 | const Global_1 = require("./Global");
|
|---|
| 8 | const DragAndDrop_1 = require("./DragAndDrop");
|
|---|
| 9 | const Validators_1 = require("./Validators");
|
|---|
| 10 | var ABSOLUTE_OPACITY = 'absoluteOpacity', ALL_LISTENERS = 'allEventListeners', ABSOLUTE_TRANSFORM = 'absoluteTransform', ABSOLUTE_SCALE = 'absoluteScale', CANVAS = 'canvas', CHANGE = 'Change', CHILDREN = 'children', KONVA = 'konva', LISTENING = 'listening', MOUSEENTER = 'mouseenter', MOUSELEAVE = 'mouseleave', NAME = 'name', SET = 'set', SHAPE = 'Shape', SPACE = ' ', STAGE = 'stage', TRANSFORM = 'transform', UPPER_STAGE = 'Stage', VISIBLE = 'visible', TRANSFORM_CHANGE_STR = [
|
|---|
| 11 | 'xChange.konva',
|
|---|
| 12 | 'yChange.konva',
|
|---|
| 13 | 'scaleXChange.konva',
|
|---|
| 14 | 'scaleYChange.konva',
|
|---|
| 15 | 'skewXChange.konva',
|
|---|
| 16 | 'skewYChange.konva',
|
|---|
| 17 | 'rotationChange.konva',
|
|---|
| 18 | 'offsetXChange.konva',
|
|---|
| 19 | 'offsetYChange.konva',
|
|---|
| 20 | 'transformsEnabledChange.konva',
|
|---|
| 21 | ].join(SPACE);
|
|---|
| 22 | let idCounter = 1;
|
|---|
| 23 | class Node {
|
|---|
| 24 | constructor(config) {
|
|---|
| 25 | this._id = idCounter++;
|
|---|
| 26 | this.eventListeners = {};
|
|---|
| 27 | this.attrs = {};
|
|---|
| 28 | this.index = 0;
|
|---|
| 29 | this._allEventListeners = null;
|
|---|
| 30 | this.parent = null;
|
|---|
| 31 | this._cache = new Map();
|
|---|
| 32 | this._attachedDepsListeners = new Map();
|
|---|
| 33 | this._lastPos = null;
|
|---|
| 34 | this._batchingTransformChange = false;
|
|---|
| 35 | this._needClearTransformCache = false;
|
|---|
| 36 | this._filterUpToDate = false;
|
|---|
| 37 | this._isUnderCache = false;
|
|---|
| 38 | this._dragEventId = null;
|
|---|
| 39 | this._shouldFireChangeEvents = false;
|
|---|
| 40 | this.setAttrs(config);
|
|---|
| 41 | this._shouldFireChangeEvents = true;
|
|---|
| 42 | }
|
|---|
| 43 | hasChildren() {
|
|---|
| 44 | return false;
|
|---|
| 45 | }
|
|---|
| 46 | _clearCache(attr) {
|
|---|
| 47 | if ((attr === TRANSFORM || attr === ABSOLUTE_TRANSFORM) &&
|
|---|
| 48 | this._cache.get(attr)) {
|
|---|
| 49 | this._cache.get(attr).dirty = true;
|
|---|
| 50 | }
|
|---|
| 51 | else if (attr) {
|
|---|
| 52 | this._cache.delete(attr);
|
|---|
| 53 | }
|
|---|
| 54 | else {
|
|---|
| 55 | this._cache.clear();
|
|---|
| 56 | }
|
|---|
| 57 | }
|
|---|
| 58 | _getCache(attr, privateGetter) {
|
|---|
| 59 | var cache = this._cache.get(attr);
|
|---|
| 60 | var isTransform = attr === TRANSFORM || attr === ABSOLUTE_TRANSFORM;
|
|---|
| 61 | var invalid = cache === undefined || (isTransform && cache.dirty === true);
|
|---|
| 62 | if (invalid) {
|
|---|
| 63 | cache = privateGetter.call(this);
|
|---|
| 64 | this._cache.set(attr, cache);
|
|---|
| 65 | }
|
|---|
| 66 | return cache;
|
|---|
| 67 | }
|
|---|
| 68 | _calculate(name, deps, getter) {
|
|---|
| 69 | if (!this._attachedDepsListeners.get(name)) {
|
|---|
| 70 | const depsString = deps.map((dep) => dep + 'Change.konva').join(SPACE);
|
|---|
| 71 | this.on(depsString, () => {
|
|---|
| 72 | this._clearCache(name);
|
|---|
| 73 | });
|
|---|
| 74 | this._attachedDepsListeners.set(name, true);
|
|---|
| 75 | }
|
|---|
| 76 | return this._getCache(name, getter);
|
|---|
| 77 | }
|
|---|
| 78 | _getCanvasCache() {
|
|---|
| 79 | return this._cache.get(CANVAS);
|
|---|
| 80 | }
|
|---|
| 81 | _clearSelfAndDescendantCache(attr) {
|
|---|
| 82 | this._clearCache(attr);
|
|---|
| 83 | if (attr === ABSOLUTE_TRANSFORM) {
|
|---|
| 84 | this.fire('absoluteTransformChange');
|
|---|
| 85 | }
|
|---|
| 86 | }
|
|---|
| 87 | clearCache() {
|
|---|
| 88 | if (this._cache.has(CANVAS)) {
|
|---|
| 89 | const { scene, filter, hit } = this._cache.get(CANVAS);
|
|---|
| 90 | Util_1.Util.releaseCanvas(scene, filter, hit);
|
|---|
| 91 | this._cache.delete(CANVAS);
|
|---|
| 92 | }
|
|---|
| 93 | this._clearSelfAndDescendantCache();
|
|---|
| 94 | this._requestDraw();
|
|---|
| 95 | return this;
|
|---|
| 96 | }
|
|---|
| 97 | cache(config) {
|
|---|
| 98 | var conf = config || {};
|
|---|
| 99 | var rect = {};
|
|---|
| 100 | if (conf.x === undefined ||
|
|---|
| 101 | conf.y === undefined ||
|
|---|
| 102 | conf.width === undefined ||
|
|---|
| 103 | conf.height === undefined) {
|
|---|
| 104 | rect = this.getClientRect({
|
|---|
| 105 | skipTransform: true,
|
|---|
| 106 | relativeTo: this.getParent() || undefined,
|
|---|
| 107 | });
|
|---|
| 108 | }
|
|---|
| 109 | var width = Math.ceil(conf.width || rect.width), height = Math.ceil(conf.height || rect.height), pixelRatio = conf.pixelRatio, x = conf.x === undefined ? Math.floor(rect.x) : conf.x, y = conf.y === undefined ? Math.floor(rect.y) : conf.y, offset = conf.offset || 0, drawBorder = conf.drawBorder || false, hitCanvasPixelRatio = conf.hitCanvasPixelRatio || 1;
|
|---|
| 110 | if (!width || !height) {
|
|---|
| 111 | Util_1.Util.error('Can not cache the node. Width or height of the node equals 0. Caching is skipped.');
|
|---|
| 112 | return;
|
|---|
| 113 | }
|
|---|
| 114 | const extraPaddingX = Math.abs(Math.round(rect.x) - x) > 0.5 ? 1 : 0;
|
|---|
| 115 | const extraPaddingY = Math.abs(Math.round(rect.y) - y) > 0.5 ? 1 : 0;
|
|---|
| 116 | width += offset * 2 + extraPaddingX;
|
|---|
| 117 | height += offset * 2 + extraPaddingY;
|
|---|
| 118 | x -= offset;
|
|---|
| 119 | y -= offset;
|
|---|
| 120 | var cachedSceneCanvas = new Canvas_1.SceneCanvas({
|
|---|
| 121 | pixelRatio: pixelRatio,
|
|---|
| 122 | width: width,
|
|---|
| 123 | height: height,
|
|---|
| 124 | }), cachedFilterCanvas = new Canvas_1.SceneCanvas({
|
|---|
| 125 | pixelRatio: pixelRatio,
|
|---|
| 126 | width: 0,
|
|---|
| 127 | height: 0,
|
|---|
| 128 | willReadFrequently: true,
|
|---|
| 129 | }), cachedHitCanvas = new Canvas_1.HitCanvas({
|
|---|
| 130 | pixelRatio: hitCanvasPixelRatio,
|
|---|
| 131 | width: width,
|
|---|
| 132 | height: height,
|
|---|
| 133 | }), sceneContext = cachedSceneCanvas.getContext(), hitContext = cachedHitCanvas.getContext();
|
|---|
| 134 | cachedHitCanvas.isCache = true;
|
|---|
| 135 | cachedSceneCanvas.isCache = true;
|
|---|
| 136 | this._cache.delete(CANVAS);
|
|---|
| 137 | this._filterUpToDate = false;
|
|---|
| 138 | if (conf.imageSmoothingEnabled === false) {
|
|---|
| 139 | cachedSceneCanvas.getContext()._context.imageSmoothingEnabled = false;
|
|---|
| 140 | cachedFilterCanvas.getContext()._context.imageSmoothingEnabled = false;
|
|---|
| 141 | }
|
|---|
| 142 | sceneContext.save();
|
|---|
| 143 | hitContext.save();
|
|---|
| 144 | sceneContext.translate(-x, -y);
|
|---|
| 145 | hitContext.translate(-x, -y);
|
|---|
| 146 | this._isUnderCache = true;
|
|---|
| 147 | this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
|
|---|
| 148 | this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
|
|---|
| 149 | this.drawScene(cachedSceneCanvas, this);
|
|---|
| 150 | this.drawHit(cachedHitCanvas, this);
|
|---|
| 151 | this._isUnderCache = false;
|
|---|
| 152 | sceneContext.restore();
|
|---|
| 153 | hitContext.restore();
|
|---|
| 154 | if (drawBorder) {
|
|---|
| 155 | sceneContext.save();
|
|---|
| 156 | sceneContext.beginPath();
|
|---|
| 157 | sceneContext.rect(0, 0, width, height);
|
|---|
| 158 | sceneContext.closePath();
|
|---|
| 159 | sceneContext.setAttr('strokeStyle', 'red');
|
|---|
| 160 | sceneContext.setAttr('lineWidth', 5);
|
|---|
| 161 | sceneContext.stroke();
|
|---|
| 162 | sceneContext.restore();
|
|---|
| 163 | }
|
|---|
| 164 | this._cache.set(CANVAS, {
|
|---|
| 165 | scene: cachedSceneCanvas,
|
|---|
| 166 | filter: cachedFilterCanvas,
|
|---|
| 167 | hit: cachedHitCanvas,
|
|---|
| 168 | x: x,
|
|---|
| 169 | y: y,
|
|---|
| 170 | });
|
|---|
| 171 | this._requestDraw();
|
|---|
| 172 | return this;
|
|---|
| 173 | }
|
|---|
| 174 | isCached() {
|
|---|
| 175 | return this._cache.has(CANVAS);
|
|---|
| 176 | }
|
|---|
| 177 | getClientRect(config) {
|
|---|
| 178 | throw new Error('abstract "getClientRect" method call');
|
|---|
| 179 | }
|
|---|
| 180 | _transformedRect(rect, top) {
|
|---|
| 181 | var points = [
|
|---|
| 182 | { x: rect.x, y: rect.y },
|
|---|
| 183 | { x: rect.x + rect.width, y: rect.y },
|
|---|
| 184 | { x: rect.x + rect.width, y: rect.y + rect.height },
|
|---|
| 185 | { x: rect.x, y: rect.y + rect.height },
|
|---|
| 186 | ];
|
|---|
| 187 | var minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
|
|---|
| 188 | var trans = this.getAbsoluteTransform(top);
|
|---|
| 189 | points.forEach(function (point) {
|
|---|
| 190 | var transformed = trans.point(point);
|
|---|
| 191 | if (minX === undefined) {
|
|---|
| 192 | minX = maxX = transformed.x;
|
|---|
| 193 | minY = maxY = transformed.y;
|
|---|
| 194 | }
|
|---|
| 195 | minX = Math.min(minX, transformed.x);
|
|---|
| 196 | minY = Math.min(minY, transformed.y);
|
|---|
| 197 | maxX = Math.max(maxX, transformed.x);
|
|---|
| 198 | maxY = Math.max(maxY, transformed.y);
|
|---|
| 199 | });
|
|---|
| 200 | return {
|
|---|
| 201 | x: minX,
|
|---|
| 202 | y: minY,
|
|---|
| 203 | width: maxX - minX,
|
|---|
| 204 | height: maxY - minY,
|
|---|
| 205 | };
|
|---|
| 206 | }
|
|---|
| 207 | _drawCachedSceneCanvas(context) {
|
|---|
| 208 | context.save();
|
|---|
| 209 | context._applyOpacity(this);
|
|---|
| 210 | context._applyGlobalCompositeOperation(this);
|
|---|
| 211 | const canvasCache = this._getCanvasCache();
|
|---|
| 212 | context.translate(canvasCache.x, canvasCache.y);
|
|---|
| 213 | var cacheCanvas = this._getCachedSceneCanvas();
|
|---|
| 214 | var ratio = cacheCanvas.pixelRatio;
|
|---|
| 215 | context.drawImage(cacheCanvas._canvas, 0, 0, cacheCanvas.width / ratio, cacheCanvas.height / ratio);
|
|---|
| 216 | context.restore();
|
|---|
| 217 | }
|
|---|
| 218 | _drawCachedHitCanvas(context) {
|
|---|
| 219 | var canvasCache = this._getCanvasCache(), hitCanvas = canvasCache.hit;
|
|---|
| 220 | context.save();
|
|---|
| 221 | context.translate(canvasCache.x, canvasCache.y);
|
|---|
| 222 | context.drawImage(hitCanvas._canvas, 0, 0, hitCanvas.width / hitCanvas.pixelRatio, hitCanvas.height / hitCanvas.pixelRatio);
|
|---|
| 223 | context.restore();
|
|---|
| 224 | }
|
|---|
| 225 | _getCachedSceneCanvas() {
|
|---|
| 226 | var filters = this.filters(), cachedCanvas = this._getCanvasCache(), sceneCanvas = cachedCanvas.scene, filterCanvas = cachedCanvas.filter, filterContext = filterCanvas.getContext(), len, imageData, n, filter;
|
|---|
| 227 | if (filters) {
|
|---|
| 228 | if (!this._filterUpToDate) {
|
|---|
| 229 | var ratio = sceneCanvas.pixelRatio;
|
|---|
| 230 | filterCanvas.setSize(sceneCanvas.width / sceneCanvas.pixelRatio, sceneCanvas.height / sceneCanvas.pixelRatio);
|
|---|
| 231 | try {
|
|---|
| 232 | len = filters.length;
|
|---|
| 233 | filterContext.clear();
|
|---|
| 234 | filterContext.drawImage(sceneCanvas._canvas, 0, 0, sceneCanvas.getWidth() / ratio, sceneCanvas.getHeight() / ratio);
|
|---|
| 235 | imageData = filterContext.getImageData(0, 0, filterCanvas.getWidth(), filterCanvas.getHeight());
|
|---|
| 236 | for (n = 0; n < len; n++) {
|
|---|
| 237 | filter = filters[n];
|
|---|
| 238 | if (typeof filter !== 'function') {
|
|---|
| 239 | Util_1.Util.error('Filter should be type of function, but got ' +
|
|---|
| 240 | typeof filter +
|
|---|
| 241 | ' instead. Please check correct filters');
|
|---|
| 242 | continue;
|
|---|
| 243 | }
|
|---|
| 244 | filter.call(this, imageData);
|
|---|
| 245 | filterContext.putImageData(imageData, 0, 0);
|
|---|
| 246 | }
|
|---|
| 247 | }
|
|---|
| 248 | catch (e) {
|
|---|
| 249 | Util_1.Util.error('Unable to apply filter. ' +
|
|---|
| 250 | e.message +
|
|---|
| 251 | ' This post my help you https://konvajs.org/docs/posts/Tainted_Canvas.html.');
|
|---|
| 252 | }
|
|---|
| 253 | this._filterUpToDate = true;
|
|---|
| 254 | }
|
|---|
| 255 | return filterCanvas;
|
|---|
| 256 | }
|
|---|
| 257 | return sceneCanvas;
|
|---|
| 258 | }
|
|---|
| 259 | on(evtStr, handler) {
|
|---|
| 260 | this._cache && this._cache.delete(ALL_LISTENERS);
|
|---|
| 261 | if (arguments.length === 3) {
|
|---|
| 262 | return this._delegate.apply(this, arguments);
|
|---|
| 263 | }
|
|---|
| 264 | var events = evtStr.split(SPACE), len = events.length, n, event, parts, baseEvent, name;
|
|---|
| 265 | for (n = 0; n < len; n++) {
|
|---|
| 266 | event = events[n];
|
|---|
| 267 | parts = event.split('.');
|
|---|
| 268 | baseEvent = parts[0];
|
|---|
| 269 | name = parts[1] || '';
|
|---|
| 270 | if (!this.eventListeners[baseEvent]) {
|
|---|
| 271 | this.eventListeners[baseEvent] = [];
|
|---|
| 272 | }
|
|---|
| 273 | this.eventListeners[baseEvent].push({
|
|---|
| 274 | name: name,
|
|---|
| 275 | handler: handler,
|
|---|
| 276 | });
|
|---|
| 277 | }
|
|---|
| 278 | return this;
|
|---|
| 279 | }
|
|---|
| 280 | off(evtStr, callback) {
|
|---|
| 281 | var events = (evtStr || '').split(SPACE), len = events.length, n, t, event, parts, baseEvent, name;
|
|---|
| 282 | this._cache && this._cache.delete(ALL_LISTENERS);
|
|---|
| 283 | if (!evtStr) {
|
|---|
| 284 | for (t in this.eventListeners) {
|
|---|
| 285 | this._off(t);
|
|---|
| 286 | }
|
|---|
| 287 | }
|
|---|
| 288 | for (n = 0; n < len; n++) {
|
|---|
| 289 | event = events[n];
|
|---|
| 290 | parts = event.split('.');
|
|---|
| 291 | baseEvent = parts[0];
|
|---|
| 292 | name = parts[1];
|
|---|
| 293 | if (baseEvent) {
|
|---|
| 294 | if (this.eventListeners[baseEvent]) {
|
|---|
| 295 | this._off(baseEvent, name, callback);
|
|---|
| 296 | }
|
|---|
| 297 | }
|
|---|
| 298 | else {
|
|---|
| 299 | for (t in this.eventListeners) {
|
|---|
| 300 | this._off(t, name, callback);
|
|---|
| 301 | }
|
|---|
| 302 | }
|
|---|
| 303 | }
|
|---|
| 304 | return this;
|
|---|
| 305 | }
|
|---|
| 306 | dispatchEvent(evt) {
|
|---|
| 307 | var e = {
|
|---|
| 308 | target: this,
|
|---|
| 309 | type: evt.type,
|
|---|
| 310 | evt: evt,
|
|---|
| 311 | };
|
|---|
| 312 | this.fire(evt.type, e);
|
|---|
| 313 | return this;
|
|---|
| 314 | }
|
|---|
| 315 | addEventListener(type, handler) {
|
|---|
| 316 | this.on(type, function (evt) {
|
|---|
| 317 | handler.call(this, evt.evt);
|
|---|
| 318 | });
|
|---|
| 319 | return this;
|
|---|
| 320 | }
|
|---|
| 321 | removeEventListener(type) {
|
|---|
| 322 | this.off(type);
|
|---|
| 323 | return this;
|
|---|
| 324 | }
|
|---|
| 325 | _delegate(event, selector, handler) {
|
|---|
| 326 | var stopNode = this;
|
|---|
| 327 | this.on(event, function (evt) {
|
|---|
| 328 | var targets = evt.target.findAncestors(selector, true, stopNode);
|
|---|
| 329 | for (var i = 0; i < targets.length; i++) {
|
|---|
| 330 | evt = Util_1.Util.cloneObject(evt);
|
|---|
| 331 | evt.currentTarget = targets[i];
|
|---|
| 332 | handler.call(targets[i], evt);
|
|---|
| 333 | }
|
|---|
| 334 | });
|
|---|
| 335 | }
|
|---|
| 336 | remove() {
|
|---|
| 337 | if (this.isDragging()) {
|
|---|
| 338 | this.stopDrag();
|
|---|
| 339 | }
|
|---|
| 340 | DragAndDrop_1.DD._dragElements.delete(this._id);
|
|---|
| 341 | this._remove();
|
|---|
| 342 | return this;
|
|---|
| 343 | }
|
|---|
| 344 | _clearCaches() {
|
|---|
| 345 | this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
|
|---|
| 346 | this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
|
|---|
| 347 | this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
|
|---|
| 348 | this._clearSelfAndDescendantCache(STAGE);
|
|---|
| 349 | this._clearSelfAndDescendantCache(VISIBLE);
|
|---|
| 350 | this._clearSelfAndDescendantCache(LISTENING);
|
|---|
| 351 | }
|
|---|
| 352 | _remove() {
|
|---|
| 353 | this._clearCaches();
|
|---|
| 354 | var parent = this.getParent();
|
|---|
| 355 | if (parent && parent.children) {
|
|---|
| 356 | parent.children.splice(this.index, 1);
|
|---|
| 357 | parent._setChildrenIndices();
|
|---|
| 358 | this.parent = null;
|
|---|
| 359 | }
|
|---|
| 360 | }
|
|---|
| 361 | destroy() {
|
|---|
| 362 | this.remove();
|
|---|
| 363 | this.clearCache();
|
|---|
| 364 | return this;
|
|---|
| 365 | }
|
|---|
| 366 | getAttr(attr) {
|
|---|
| 367 | var method = 'get' + Util_1.Util._capitalize(attr);
|
|---|
| 368 | if (Util_1.Util._isFunction(this[method])) {
|
|---|
| 369 | return this[method]();
|
|---|
| 370 | }
|
|---|
| 371 | return this.attrs[attr];
|
|---|
| 372 | }
|
|---|
| 373 | getAncestors() {
|
|---|
| 374 | var parent = this.getParent(), ancestors = [];
|
|---|
| 375 | while (parent) {
|
|---|
| 376 | ancestors.push(parent);
|
|---|
| 377 | parent = parent.getParent();
|
|---|
| 378 | }
|
|---|
| 379 | return ancestors;
|
|---|
| 380 | }
|
|---|
| 381 | getAttrs() {
|
|---|
| 382 | return (this.attrs || {});
|
|---|
| 383 | }
|
|---|
| 384 | setAttrs(config) {
|
|---|
| 385 | this._batchTransformChanges(() => {
|
|---|
| 386 | var key, method;
|
|---|
| 387 | if (!config) {
|
|---|
| 388 | return this;
|
|---|
| 389 | }
|
|---|
| 390 | for (key in config) {
|
|---|
| 391 | if (key === CHILDREN) {
|
|---|
| 392 | continue;
|
|---|
| 393 | }
|
|---|
| 394 | method = SET + Util_1.Util._capitalize(key);
|
|---|
| 395 | if (Util_1.Util._isFunction(this[method])) {
|
|---|
| 396 | this[method](config[key]);
|
|---|
| 397 | }
|
|---|
| 398 | else {
|
|---|
| 399 | this._setAttr(key, config[key]);
|
|---|
| 400 | }
|
|---|
| 401 | }
|
|---|
| 402 | });
|
|---|
| 403 | return this;
|
|---|
| 404 | }
|
|---|
| 405 | isListening() {
|
|---|
| 406 | return this._getCache(LISTENING, this._isListening);
|
|---|
| 407 | }
|
|---|
| 408 | _isListening(relativeTo) {
|
|---|
| 409 | const listening = this.listening();
|
|---|
| 410 | if (!listening) {
|
|---|
| 411 | return false;
|
|---|
| 412 | }
|
|---|
| 413 | const parent = this.getParent();
|
|---|
| 414 | if (parent && parent !== relativeTo && this !== relativeTo) {
|
|---|
| 415 | return parent._isListening(relativeTo);
|
|---|
| 416 | }
|
|---|
| 417 | else {
|
|---|
| 418 | return true;
|
|---|
| 419 | }
|
|---|
| 420 | }
|
|---|
| 421 | isVisible() {
|
|---|
| 422 | return this._getCache(VISIBLE, this._isVisible);
|
|---|
| 423 | }
|
|---|
| 424 | _isVisible(relativeTo) {
|
|---|
| 425 | const visible = this.visible();
|
|---|
| 426 | if (!visible) {
|
|---|
| 427 | return false;
|
|---|
| 428 | }
|
|---|
| 429 | const parent = this.getParent();
|
|---|
| 430 | if (parent && parent !== relativeTo && this !== relativeTo) {
|
|---|
| 431 | return parent._isVisible(relativeTo);
|
|---|
| 432 | }
|
|---|
| 433 | else {
|
|---|
| 434 | return true;
|
|---|
| 435 | }
|
|---|
| 436 | }
|
|---|
| 437 | shouldDrawHit(top, skipDragCheck = false) {
|
|---|
| 438 | if (top) {
|
|---|
| 439 | return this._isVisible(top) && this._isListening(top);
|
|---|
| 440 | }
|
|---|
| 441 | var layer = this.getLayer();
|
|---|
| 442 | var layerUnderDrag = false;
|
|---|
| 443 | DragAndDrop_1.DD._dragElements.forEach((elem) => {
|
|---|
| 444 | if (elem.dragStatus !== 'dragging') {
|
|---|
| 445 | return;
|
|---|
| 446 | }
|
|---|
| 447 | else if (elem.node.nodeType === 'Stage') {
|
|---|
| 448 | layerUnderDrag = true;
|
|---|
| 449 | }
|
|---|
| 450 | else if (elem.node.getLayer() === layer) {
|
|---|
| 451 | layerUnderDrag = true;
|
|---|
| 452 | }
|
|---|
| 453 | });
|
|---|
| 454 | var dragSkip = !skipDragCheck &&
|
|---|
| 455 | !Global_1.Konva.hitOnDragEnabled &&
|
|---|
| 456 | (layerUnderDrag || Global_1.Konva.isTransforming());
|
|---|
| 457 | return this.isListening() && this.isVisible() && !dragSkip;
|
|---|
| 458 | }
|
|---|
| 459 | show() {
|
|---|
| 460 | this.visible(true);
|
|---|
| 461 | return this;
|
|---|
| 462 | }
|
|---|
| 463 | hide() {
|
|---|
| 464 | this.visible(false);
|
|---|
| 465 | return this;
|
|---|
| 466 | }
|
|---|
| 467 | getZIndex() {
|
|---|
| 468 | return this.index || 0;
|
|---|
| 469 | }
|
|---|
| 470 | getAbsoluteZIndex() {
|
|---|
| 471 | var depth = this.getDepth(), that = this, index = 0, nodes, len, n, child;
|
|---|
| 472 | function addChildren(children) {
|
|---|
| 473 | nodes = [];
|
|---|
| 474 | len = children.length;
|
|---|
| 475 | for (n = 0; n < len; n++) {
|
|---|
| 476 | child = children[n];
|
|---|
| 477 | index++;
|
|---|
| 478 | if (child.nodeType !== SHAPE) {
|
|---|
| 479 | nodes = nodes.concat(child.getChildren().slice());
|
|---|
| 480 | }
|
|---|
| 481 | if (child._id === that._id) {
|
|---|
| 482 | n = len;
|
|---|
| 483 | }
|
|---|
| 484 | }
|
|---|
| 485 | if (nodes.length > 0 && nodes[0].getDepth() <= depth) {
|
|---|
| 486 | addChildren(nodes);
|
|---|
| 487 | }
|
|---|
| 488 | }
|
|---|
| 489 | const stage = this.getStage();
|
|---|
| 490 | if (that.nodeType !== UPPER_STAGE && stage) {
|
|---|
| 491 | addChildren(stage.getChildren());
|
|---|
| 492 | }
|
|---|
| 493 | return index;
|
|---|
| 494 | }
|
|---|
| 495 | getDepth() {
|
|---|
| 496 | var depth = 0, parent = this.parent;
|
|---|
| 497 | while (parent) {
|
|---|
| 498 | depth++;
|
|---|
| 499 | parent = parent.parent;
|
|---|
| 500 | }
|
|---|
| 501 | return depth;
|
|---|
| 502 | }
|
|---|
| 503 | _batchTransformChanges(func) {
|
|---|
| 504 | this._batchingTransformChange = true;
|
|---|
| 505 | func();
|
|---|
| 506 | this._batchingTransformChange = false;
|
|---|
| 507 | if (this._needClearTransformCache) {
|
|---|
| 508 | this._clearCache(TRANSFORM);
|
|---|
| 509 | this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
|
|---|
| 510 | }
|
|---|
| 511 | this._needClearTransformCache = false;
|
|---|
| 512 | }
|
|---|
| 513 | setPosition(pos) {
|
|---|
| 514 | this._batchTransformChanges(() => {
|
|---|
| 515 | this.x(pos.x);
|
|---|
| 516 | this.y(pos.y);
|
|---|
| 517 | });
|
|---|
| 518 | return this;
|
|---|
| 519 | }
|
|---|
| 520 | getPosition() {
|
|---|
| 521 | return {
|
|---|
| 522 | x: this.x(),
|
|---|
| 523 | y: this.y(),
|
|---|
| 524 | };
|
|---|
| 525 | }
|
|---|
| 526 | getRelativePointerPosition() {
|
|---|
| 527 | const stage = this.getStage();
|
|---|
| 528 | if (!stage) {
|
|---|
| 529 | return null;
|
|---|
| 530 | }
|
|---|
| 531 | var pos = stage.getPointerPosition();
|
|---|
| 532 | if (!pos) {
|
|---|
| 533 | return null;
|
|---|
| 534 | }
|
|---|
| 535 | var transform = this.getAbsoluteTransform().copy();
|
|---|
| 536 | transform.invert();
|
|---|
| 537 | return transform.point(pos);
|
|---|
| 538 | }
|
|---|
| 539 | getAbsolutePosition(top) {
|
|---|
| 540 | let haveCachedParent = false;
|
|---|
| 541 | let parent = this.parent;
|
|---|
| 542 | while (parent) {
|
|---|
| 543 | if (parent.isCached()) {
|
|---|
| 544 | haveCachedParent = true;
|
|---|
| 545 | break;
|
|---|
| 546 | }
|
|---|
| 547 | parent = parent.parent;
|
|---|
| 548 | }
|
|---|
| 549 | if (haveCachedParent && !top) {
|
|---|
| 550 | top = true;
|
|---|
| 551 | }
|
|---|
| 552 | var absoluteMatrix = this.getAbsoluteTransform(top).getMatrix(), absoluteTransform = new Util_1.Transform(), offset = this.offset();
|
|---|
| 553 | absoluteTransform.m = absoluteMatrix.slice();
|
|---|
| 554 | absoluteTransform.translate(offset.x, offset.y);
|
|---|
| 555 | return absoluteTransform.getTranslation();
|
|---|
| 556 | }
|
|---|
| 557 | setAbsolutePosition(pos) {
|
|---|
| 558 | const { x, y, ...origTrans } = this._clearTransform();
|
|---|
| 559 | this.attrs.x = x;
|
|---|
| 560 | this.attrs.y = y;
|
|---|
| 561 | this._clearCache(TRANSFORM);
|
|---|
| 562 | var it = this._getAbsoluteTransform().copy();
|
|---|
| 563 | it.invert();
|
|---|
| 564 | it.translate(pos.x, pos.y);
|
|---|
| 565 | pos = {
|
|---|
| 566 | x: this.attrs.x + it.getTranslation().x,
|
|---|
| 567 | y: this.attrs.y + it.getTranslation().y,
|
|---|
| 568 | };
|
|---|
| 569 | this._setTransform(origTrans);
|
|---|
| 570 | this.setPosition({ x: pos.x, y: pos.y });
|
|---|
| 571 | this._clearCache(TRANSFORM);
|
|---|
| 572 | this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
|
|---|
| 573 | return this;
|
|---|
| 574 | }
|
|---|
| 575 | _setTransform(trans) {
|
|---|
| 576 | var key;
|
|---|
| 577 | for (key in trans) {
|
|---|
| 578 | this.attrs[key] = trans[key];
|
|---|
| 579 | }
|
|---|
| 580 | }
|
|---|
| 581 | _clearTransform() {
|
|---|
| 582 | var trans = {
|
|---|
| 583 | x: this.x(),
|
|---|
| 584 | y: this.y(),
|
|---|
| 585 | rotation: this.rotation(),
|
|---|
| 586 | scaleX: this.scaleX(),
|
|---|
| 587 | scaleY: this.scaleY(),
|
|---|
| 588 | offsetX: this.offsetX(),
|
|---|
| 589 | offsetY: this.offsetY(),
|
|---|
| 590 | skewX: this.skewX(),
|
|---|
| 591 | skewY: this.skewY(),
|
|---|
| 592 | };
|
|---|
| 593 | this.attrs.x = 0;
|
|---|
| 594 | this.attrs.y = 0;
|
|---|
| 595 | this.attrs.rotation = 0;
|
|---|
| 596 | this.attrs.scaleX = 1;
|
|---|
| 597 | this.attrs.scaleY = 1;
|
|---|
| 598 | this.attrs.offsetX = 0;
|
|---|
| 599 | this.attrs.offsetY = 0;
|
|---|
| 600 | this.attrs.skewX = 0;
|
|---|
| 601 | this.attrs.skewY = 0;
|
|---|
| 602 | return trans;
|
|---|
| 603 | }
|
|---|
| 604 | move(change) {
|
|---|
| 605 | var changeX = change.x, changeY = change.y, x = this.x(), y = this.y();
|
|---|
| 606 | if (changeX !== undefined) {
|
|---|
| 607 | x += changeX;
|
|---|
| 608 | }
|
|---|
| 609 | if (changeY !== undefined) {
|
|---|
| 610 | y += changeY;
|
|---|
| 611 | }
|
|---|
| 612 | this.setPosition({ x: x, y: y });
|
|---|
| 613 | return this;
|
|---|
| 614 | }
|
|---|
| 615 | _eachAncestorReverse(func, top) {
|
|---|
| 616 | var family = [], parent = this.getParent(), len, n;
|
|---|
| 617 | if (top && top._id === this._id) {
|
|---|
| 618 | return;
|
|---|
| 619 | }
|
|---|
| 620 | family.unshift(this);
|
|---|
| 621 | while (parent && (!top || parent._id !== top._id)) {
|
|---|
| 622 | family.unshift(parent);
|
|---|
| 623 | parent = parent.parent;
|
|---|
| 624 | }
|
|---|
| 625 | len = family.length;
|
|---|
| 626 | for (n = 0; n < len; n++) {
|
|---|
| 627 | func(family[n]);
|
|---|
| 628 | }
|
|---|
| 629 | }
|
|---|
| 630 | rotate(theta) {
|
|---|
| 631 | this.rotation(this.rotation() + theta);
|
|---|
| 632 | return this;
|
|---|
| 633 | }
|
|---|
| 634 | moveToTop() {
|
|---|
| 635 | if (!this.parent) {
|
|---|
| 636 | Util_1.Util.warn('Node has no parent. moveToTop function is ignored.');
|
|---|
| 637 | return false;
|
|---|
| 638 | }
|
|---|
| 639 | var index = this.index, len = this.parent.getChildren().length;
|
|---|
| 640 | if (index < len - 1) {
|
|---|
| 641 | this.parent.children.splice(index, 1);
|
|---|
| 642 | this.parent.children.push(this);
|
|---|
| 643 | this.parent._setChildrenIndices();
|
|---|
| 644 | return true;
|
|---|
| 645 | }
|
|---|
| 646 | return false;
|
|---|
| 647 | }
|
|---|
| 648 | moveUp() {
|
|---|
| 649 | if (!this.parent) {
|
|---|
| 650 | Util_1.Util.warn('Node has no parent. moveUp function is ignored.');
|
|---|
| 651 | return false;
|
|---|
| 652 | }
|
|---|
| 653 | var index = this.index, len = this.parent.getChildren().length;
|
|---|
| 654 | if (index < len - 1) {
|
|---|
| 655 | this.parent.children.splice(index, 1);
|
|---|
| 656 | this.parent.children.splice(index + 1, 0, this);
|
|---|
| 657 | this.parent._setChildrenIndices();
|
|---|
| 658 | return true;
|
|---|
| 659 | }
|
|---|
| 660 | return false;
|
|---|
| 661 | }
|
|---|
| 662 | moveDown() {
|
|---|
| 663 | if (!this.parent) {
|
|---|
| 664 | Util_1.Util.warn('Node has no parent. moveDown function is ignored.');
|
|---|
| 665 | return false;
|
|---|
| 666 | }
|
|---|
| 667 | var index = this.index;
|
|---|
| 668 | if (index > 0) {
|
|---|
| 669 | this.parent.children.splice(index, 1);
|
|---|
| 670 | this.parent.children.splice(index - 1, 0, this);
|
|---|
| 671 | this.parent._setChildrenIndices();
|
|---|
| 672 | return true;
|
|---|
| 673 | }
|
|---|
| 674 | return false;
|
|---|
| 675 | }
|
|---|
| 676 | moveToBottom() {
|
|---|
| 677 | if (!this.parent) {
|
|---|
| 678 | Util_1.Util.warn('Node has no parent. moveToBottom function is ignored.');
|
|---|
| 679 | return false;
|
|---|
| 680 | }
|
|---|
| 681 | var index = this.index;
|
|---|
| 682 | if (index > 0) {
|
|---|
| 683 | this.parent.children.splice(index, 1);
|
|---|
| 684 | this.parent.children.unshift(this);
|
|---|
| 685 | this.parent._setChildrenIndices();
|
|---|
| 686 | return true;
|
|---|
| 687 | }
|
|---|
| 688 | return false;
|
|---|
| 689 | }
|
|---|
| 690 | setZIndex(zIndex) {
|
|---|
| 691 | if (!this.parent) {
|
|---|
| 692 | Util_1.Util.warn('Node has no parent. zIndex parameter is ignored.');
|
|---|
| 693 | return this;
|
|---|
| 694 | }
|
|---|
| 695 | if (zIndex < 0 || zIndex >= this.parent.children.length) {
|
|---|
| 696 | Util_1.Util.warn('Unexpected value ' +
|
|---|
| 697 | zIndex +
|
|---|
| 698 | ' for zIndex property. zIndex is just index of a node in children of its parent. Expected value is from 0 to ' +
|
|---|
| 699 | (this.parent.children.length - 1) +
|
|---|
| 700 | '.');
|
|---|
| 701 | }
|
|---|
| 702 | var index = this.index;
|
|---|
| 703 | this.parent.children.splice(index, 1);
|
|---|
| 704 | this.parent.children.splice(zIndex, 0, this);
|
|---|
| 705 | this.parent._setChildrenIndices();
|
|---|
| 706 | return this;
|
|---|
| 707 | }
|
|---|
| 708 | getAbsoluteOpacity() {
|
|---|
| 709 | return this._getCache(ABSOLUTE_OPACITY, this._getAbsoluteOpacity);
|
|---|
| 710 | }
|
|---|
| 711 | _getAbsoluteOpacity() {
|
|---|
| 712 | var absOpacity = this.opacity();
|
|---|
| 713 | var parent = this.getParent();
|
|---|
| 714 | if (parent && !parent._isUnderCache) {
|
|---|
| 715 | absOpacity *= parent.getAbsoluteOpacity();
|
|---|
| 716 | }
|
|---|
| 717 | return absOpacity;
|
|---|
| 718 | }
|
|---|
| 719 | moveTo(newContainer) {
|
|---|
| 720 | if (this.getParent() !== newContainer) {
|
|---|
| 721 | this._remove();
|
|---|
| 722 | newContainer.add(this);
|
|---|
| 723 | }
|
|---|
| 724 | return this;
|
|---|
| 725 | }
|
|---|
| 726 | toObject() {
|
|---|
| 727 | var attrs = this.getAttrs(), key, val, getter, defaultValue, nonPlainObject;
|
|---|
| 728 | const obj = {
|
|---|
| 729 | attrs: {},
|
|---|
| 730 | className: this.getClassName(),
|
|---|
| 731 | };
|
|---|
| 732 | for (key in attrs) {
|
|---|
| 733 | val = attrs[key];
|
|---|
| 734 | nonPlainObject =
|
|---|
| 735 | Util_1.Util.isObject(val) && !Util_1.Util._isPlainObject(val) && !Util_1.Util._isArray(val);
|
|---|
| 736 | if (nonPlainObject) {
|
|---|
| 737 | continue;
|
|---|
| 738 | }
|
|---|
| 739 | getter = typeof this[key] === 'function' && this[key];
|
|---|
| 740 | delete attrs[key];
|
|---|
| 741 | defaultValue = getter ? getter.call(this) : null;
|
|---|
| 742 | attrs[key] = val;
|
|---|
| 743 | if (defaultValue !== val) {
|
|---|
| 744 | obj.attrs[key] = val;
|
|---|
| 745 | }
|
|---|
| 746 | }
|
|---|
| 747 | return Util_1.Util._prepareToStringify(obj);
|
|---|
| 748 | }
|
|---|
| 749 | toJSON() {
|
|---|
| 750 | return JSON.stringify(this.toObject());
|
|---|
| 751 | }
|
|---|
| 752 | getParent() {
|
|---|
| 753 | return this.parent;
|
|---|
| 754 | }
|
|---|
| 755 | findAncestors(selector, includeSelf, stopNode) {
|
|---|
| 756 | var res = [];
|
|---|
| 757 | if (includeSelf && this._isMatch(selector)) {
|
|---|
| 758 | res.push(this);
|
|---|
| 759 | }
|
|---|
| 760 | var ancestor = this.parent;
|
|---|
| 761 | while (ancestor) {
|
|---|
| 762 | if (ancestor === stopNode) {
|
|---|
| 763 | return res;
|
|---|
| 764 | }
|
|---|
| 765 | if (ancestor._isMatch(selector)) {
|
|---|
| 766 | res.push(ancestor);
|
|---|
| 767 | }
|
|---|
| 768 | ancestor = ancestor.parent;
|
|---|
| 769 | }
|
|---|
| 770 | return res;
|
|---|
| 771 | }
|
|---|
| 772 | isAncestorOf(node) {
|
|---|
| 773 | return false;
|
|---|
| 774 | }
|
|---|
| 775 | findAncestor(selector, includeSelf, stopNode) {
|
|---|
| 776 | return this.findAncestors(selector, includeSelf, stopNode)[0];
|
|---|
| 777 | }
|
|---|
| 778 | _isMatch(selector) {
|
|---|
| 779 | if (!selector) {
|
|---|
| 780 | return false;
|
|---|
| 781 | }
|
|---|
| 782 | if (typeof selector === 'function') {
|
|---|
| 783 | return selector(this);
|
|---|
| 784 | }
|
|---|
| 785 | var selectorArr = selector.replace(/ /g, '').split(','), len = selectorArr.length, n, sel;
|
|---|
| 786 | for (n = 0; n < len; n++) {
|
|---|
| 787 | sel = selectorArr[n];
|
|---|
| 788 | if (!Util_1.Util.isValidSelector(sel)) {
|
|---|
| 789 | Util_1.Util.warn('Selector "' +
|
|---|
| 790 | sel +
|
|---|
| 791 | '" is invalid. Allowed selectors examples are "#foo", ".bar" or "Group".');
|
|---|
| 792 | Util_1.Util.warn('If you have a custom shape with such className, please change it to start with upper letter like "Triangle".');
|
|---|
| 793 | Util_1.Util.warn('Konva is awesome, right?');
|
|---|
| 794 | }
|
|---|
| 795 | if (sel.charAt(0) === '#') {
|
|---|
| 796 | if (this.id() === sel.slice(1)) {
|
|---|
| 797 | return true;
|
|---|
| 798 | }
|
|---|
| 799 | }
|
|---|
| 800 | else if (sel.charAt(0) === '.') {
|
|---|
| 801 | if (this.hasName(sel.slice(1))) {
|
|---|
| 802 | return true;
|
|---|
| 803 | }
|
|---|
| 804 | }
|
|---|
| 805 | else if (this.className === sel || this.nodeType === sel) {
|
|---|
| 806 | return true;
|
|---|
| 807 | }
|
|---|
| 808 | }
|
|---|
| 809 | return false;
|
|---|
| 810 | }
|
|---|
| 811 | getLayer() {
|
|---|
| 812 | var parent = this.getParent();
|
|---|
| 813 | return parent ? parent.getLayer() : null;
|
|---|
| 814 | }
|
|---|
| 815 | getStage() {
|
|---|
| 816 | return this._getCache(STAGE, this._getStage);
|
|---|
| 817 | }
|
|---|
| 818 | _getStage() {
|
|---|
| 819 | var parent = this.getParent();
|
|---|
| 820 | if (parent) {
|
|---|
| 821 | return parent.getStage();
|
|---|
| 822 | }
|
|---|
| 823 | else {
|
|---|
| 824 | return null;
|
|---|
| 825 | }
|
|---|
| 826 | }
|
|---|
| 827 | fire(eventType, evt = {}, bubble) {
|
|---|
| 828 | evt.target = evt.target || this;
|
|---|
| 829 | if (bubble) {
|
|---|
| 830 | this._fireAndBubble(eventType, evt);
|
|---|
| 831 | }
|
|---|
| 832 | else {
|
|---|
| 833 | this._fire(eventType, evt);
|
|---|
| 834 | }
|
|---|
| 835 | return this;
|
|---|
| 836 | }
|
|---|
| 837 | getAbsoluteTransform(top) {
|
|---|
| 838 | if (top) {
|
|---|
| 839 | return this._getAbsoluteTransform(top);
|
|---|
| 840 | }
|
|---|
| 841 | else {
|
|---|
| 842 | return this._getCache(ABSOLUTE_TRANSFORM, this._getAbsoluteTransform);
|
|---|
| 843 | }
|
|---|
| 844 | }
|
|---|
| 845 | _getAbsoluteTransform(top) {
|
|---|
| 846 | var at;
|
|---|
| 847 | if (top) {
|
|---|
| 848 | at = new Util_1.Transform();
|
|---|
| 849 | this._eachAncestorReverse(function (node) {
|
|---|
| 850 | var transformsEnabled = node.transformsEnabled();
|
|---|
| 851 | if (transformsEnabled === 'all') {
|
|---|
| 852 | at.multiply(node.getTransform());
|
|---|
| 853 | }
|
|---|
| 854 | else if (transformsEnabled === 'position') {
|
|---|
| 855 | at.translate(node.x() - node.offsetX(), node.y() - node.offsetY());
|
|---|
| 856 | }
|
|---|
| 857 | }, top);
|
|---|
| 858 | return at;
|
|---|
| 859 | }
|
|---|
| 860 | else {
|
|---|
| 861 | at = this._cache.get(ABSOLUTE_TRANSFORM) || new Util_1.Transform();
|
|---|
| 862 | if (this.parent) {
|
|---|
| 863 | this.parent.getAbsoluteTransform().copyInto(at);
|
|---|
| 864 | }
|
|---|
| 865 | else {
|
|---|
| 866 | at.reset();
|
|---|
| 867 | }
|
|---|
| 868 | var transformsEnabled = this.transformsEnabled();
|
|---|
| 869 | if (transformsEnabled === 'all') {
|
|---|
| 870 | at.multiply(this.getTransform());
|
|---|
| 871 | }
|
|---|
| 872 | else if (transformsEnabled === 'position') {
|
|---|
| 873 | const x = this.attrs.x || 0;
|
|---|
| 874 | const y = this.attrs.y || 0;
|
|---|
| 875 | const offsetX = this.attrs.offsetX || 0;
|
|---|
| 876 | const offsetY = this.attrs.offsetY || 0;
|
|---|
| 877 | at.translate(x - offsetX, y - offsetY);
|
|---|
| 878 | }
|
|---|
| 879 | at.dirty = false;
|
|---|
| 880 | return at;
|
|---|
| 881 | }
|
|---|
| 882 | }
|
|---|
| 883 | getAbsoluteScale(top) {
|
|---|
| 884 | var parent = this;
|
|---|
| 885 | while (parent) {
|
|---|
| 886 | if (parent._isUnderCache) {
|
|---|
| 887 | top = parent;
|
|---|
| 888 | }
|
|---|
| 889 | parent = parent.getParent();
|
|---|
| 890 | }
|
|---|
| 891 | const transform = this.getAbsoluteTransform(top);
|
|---|
| 892 | const attrs = transform.decompose();
|
|---|
| 893 | return {
|
|---|
| 894 | x: attrs.scaleX,
|
|---|
| 895 | y: attrs.scaleY,
|
|---|
| 896 | };
|
|---|
| 897 | }
|
|---|
| 898 | getAbsoluteRotation() {
|
|---|
| 899 | return this.getAbsoluteTransform().decompose().rotation;
|
|---|
| 900 | }
|
|---|
| 901 | getTransform() {
|
|---|
| 902 | return this._getCache(TRANSFORM, this._getTransform);
|
|---|
| 903 | }
|
|---|
| 904 | _getTransform() {
|
|---|
| 905 | var _a, _b;
|
|---|
| 906 | var m = this._cache.get(TRANSFORM) || new Util_1.Transform();
|
|---|
| 907 | m.reset();
|
|---|
| 908 | var x = this.x(), y = this.y(), rotation = Global_1.Konva.getAngle(this.rotation()), scaleX = (_a = this.attrs.scaleX) !== null && _a !== void 0 ? _a : 1, scaleY = (_b = this.attrs.scaleY) !== null && _b !== void 0 ? _b : 1, skewX = this.attrs.skewX || 0, skewY = this.attrs.skewY || 0, offsetX = this.attrs.offsetX || 0, offsetY = this.attrs.offsetY || 0;
|
|---|
| 909 | if (x !== 0 || y !== 0) {
|
|---|
| 910 | m.translate(x, y);
|
|---|
| 911 | }
|
|---|
| 912 | if (rotation !== 0) {
|
|---|
| 913 | m.rotate(rotation);
|
|---|
| 914 | }
|
|---|
| 915 | if (skewX !== 0 || skewY !== 0) {
|
|---|
| 916 | m.skew(skewX, skewY);
|
|---|
| 917 | }
|
|---|
| 918 | if (scaleX !== 1 || scaleY !== 1) {
|
|---|
| 919 | m.scale(scaleX, scaleY);
|
|---|
| 920 | }
|
|---|
| 921 | if (offsetX !== 0 || offsetY !== 0) {
|
|---|
| 922 | m.translate(-1 * offsetX, -1 * offsetY);
|
|---|
| 923 | }
|
|---|
| 924 | m.dirty = false;
|
|---|
| 925 | return m;
|
|---|
| 926 | }
|
|---|
| 927 | clone(obj) {
|
|---|
| 928 | var attrs = Util_1.Util.cloneObject(this.attrs), key, allListeners, len, n, listener;
|
|---|
| 929 | for (key in obj) {
|
|---|
| 930 | attrs[key] = obj[key];
|
|---|
| 931 | }
|
|---|
| 932 | var node = new this.constructor(attrs);
|
|---|
| 933 | for (key in this.eventListeners) {
|
|---|
| 934 | allListeners = this.eventListeners[key];
|
|---|
| 935 | len = allListeners.length;
|
|---|
| 936 | for (n = 0; n < len; n++) {
|
|---|
| 937 | listener = allListeners[n];
|
|---|
| 938 | if (listener.name.indexOf(KONVA) < 0) {
|
|---|
| 939 | if (!node.eventListeners[key]) {
|
|---|
| 940 | node.eventListeners[key] = [];
|
|---|
| 941 | }
|
|---|
| 942 | node.eventListeners[key].push(listener);
|
|---|
| 943 | }
|
|---|
| 944 | }
|
|---|
| 945 | }
|
|---|
| 946 | return node;
|
|---|
| 947 | }
|
|---|
| 948 | _toKonvaCanvas(config) {
|
|---|
| 949 | config = config || {};
|
|---|
| 950 | var box = this.getClientRect();
|
|---|
| 951 | var stage = this.getStage(), x = config.x !== undefined ? config.x : Math.floor(box.x), y = config.y !== undefined ? config.y : Math.floor(box.y), pixelRatio = config.pixelRatio || 1, canvas = new Canvas_1.SceneCanvas({
|
|---|
| 952 | width: config.width || Math.ceil(box.width) || (stage ? stage.width() : 0),
|
|---|
| 953 | height: config.height ||
|
|---|
| 954 | Math.ceil(box.height) ||
|
|---|
| 955 | (stage ? stage.height() : 0),
|
|---|
| 956 | pixelRatio: pixelRatio,
|
|---|
| 957 | }), context = canvas.getContext();
|
|---|
| 958 | const bufferCanvas = new Canvas_1.SceneCanvas({
|
|---|
| 959 | width: canvas.width / canvas.pixelRatio + Math.abs(x),
|
|---|
| 960 | height: canvas.height / canvas.pixelRatio + Math.abs(y),
|
|---|
| 961 | pixelRatio: canvas.pixelRatio,
|
|---|
| 962 | });
|
|---|
| 963 | if (config.imageSmoothingEnabled === false) {
|
|---|
| 964 | context._context.imageSmoothingEnabled = false;
|
|---|
| 965 | }
|
|---|
| 966 | context.save();
|
|---|
| 967 | if (x || y) {
|
|---|
| 968 | context.translate(-1 * x, -1 * y);
|
|---|
| 969 | }
|
|---|
| 970 | this.drawScene(canvas, undefined, bufferCanvas);
|
|---|
| 971 | context.restore();
|
|---|
| 972 | return canvas;
|
|---|
| 973 | }
|
|---|
| 974 | toCanvas(config) {
|
|---|
| 975 | return this._toKonvaCanvas(config)._canvas;
|
|---|
| 976 | }
|
|---|
| 977 | toDataURL(config) {
|
|---|
| 978 | config = config || {};
|
|---|
| 979 | var mimeType = config.mimeType || null, quality = config.quality || null;
|
|---|
| 980 | var url = this._toKonvaCanvas(config).toDataURL(mimeType, quality);
|
|---|
| 981 | if (config.callback) {
|
|---|
| 982 | config.callback(url);
|
|---|
| 983 | }
|
|---|
| 984 | return url;
|
|---|
| 985 | }
|
|---|
| 986 | toImage(config) {
|
|---|
| 987 | return new Promise((resolve, reject) => {
|
|---|
| 988 | try {
|
|---|
| 989 | const callback = config === null || config === void 0 ? void 0 : config.callback;
|
|---|
| 990 | if (callback)
|
|---|
| 991 | delete config.callback;
|
|---|
| 992 | Util_1.Util._urlToImage(this.toDataURL(config), function (img) {
|
|---|
| 993 | resolve(img);
|
|---|
| 994 | callback === null || callback === void 0 ? void 0 : callback(img);
|
|---|
| 995 | });
|
|---|
| 996 | }
|
|---|
| 997 | catch (err) {
|
|---|
| 998 | reject(err);
|
|---|
| 999 | }
|
|---|
| 1000 | });
|
|---|
| 1001 | }
|
|---|
| 1002 | toBlob(config) {
|
|---|
| 1003 | return new Promise((resolve, reject) => {
|
|---|
| 1004 | try {
|
|---|
| 1005 | const callback = config === null || config === void 0 ? void 0 : config.callback;
|
|---|
| 1006 | if (callback)
|
|---|
| 1007 | delete config.callback;
|
|---|
| 1008 | this.toCanvas(config).toBlob((blob) => {
|
|---|
| 1009 | resolve(blob);
|
|---|
| 1010 | callback === null || callback === void 0 ? void 0 : callback(blob);
|
|---|
| 1011 | }, config === null || config === void 0 ? void 0 : config.mimeType, config === null || config === void 0 ? void 0 : config.quality);
|
|---|
| 1012 | }
|
|---|
| 1013 | catch (err) {
|
|---|
| 1014 | reject(err);
|
|---|
| 1015 | }
|
|---|
| 1016 | });
|
|---|
| 1017 | }
|
|---|
| 1018 | setSize(size) {
|
|---|
| 1019 | this.width(size.width);
|
|---|
| 1020 | this.height(size.height);
|
|---|
| 1021 | return this;
|
|---|
| 1022 | }
|
|---|
| 1023 | getSize() {
|
|---|
| 1024 | return {
|
|---|
| 1025 | width: this.width(),
|
|---|
| 1026 | height: this.height(),
|
|---|
| 1027 | };
|
|---|
| 1028 | }
|
|---|
| 1029 | getClassName() {
|
|---|
| 1030 | return this.className || this.nodeType;
|
|---|
| 1031 | }
|
|---|
| 1032 | getType() {
|
|---|
| 1033 | return this.nodeType;
|
|---|
| 1034 | }
|
|---|
| 1035 | getDragDistance() {
|
|---|
| 1036 | if (this.attrs.dragDistance !== undefined) {
|
|---|
| 1037 | return this.attrs.dragDistance;
|
|---|
| 1038 | }
|
|---|
| 1039 | else if (this.parent) {
|
|---|
| 1040 | return this.parent.getDragDistance();
|
|---|
| 1041 | }
|
|---|
| 1042 | else {
|
|---|
| 1043 | return Global_1.Konva.dragDistance;
|
|---|
| 1044 | }
|
|---|
| 1045 | }
|
|---|
| 1046 | _off(type, name, callback) {
|
|---|
| 1047 | var evtListeners = this.eventListeners[type], i, evtName, handler;
|
|---|
| 1048 | for (i = 0; i < evtListeners.length; i++) {
|
|---|
| 1049 | evtName = evtListeners[i].name;
|
|---|
| 1050 | handler = evtListeners[i].handler;
|
|---|
| 1051 | if ((evtName !== 'konva' || name === 'konva') &&
|
|---|
| 1052 | (!name || evtName === name) &&
|
|---|
| 1053 | (!callback || callback === handler)) {
|
|---|
| 1054 | evtListeners.splice(i, 1);
|
|---|
| 1055 | if (evtListeners.length === 0) {
|
|---|
| 1056 | delete this.eventListeners[type];
|
|---|
| 1057 | break;
|
|---|
| 1058 | }
|
|---|
| 1059 | i--;
|
|---|
| 1060 | }
|
|---|
| 1061 | }
|
|---|
| 1062 | }
|
|---|
| 1063 | _fireChangeEvent(attr, oldVal, newVal) {
|
|---|
| 1064 | this._fire(attr + CHANGE, {
|
|---|
| 1065 | oldVal: oldVal,
|
|---|
| 1066 | newVal: newVal,
|
|---|
| 1067 | });
|
|---|
| 1068 | }
|
|---|
| 1069 | addName(name) {
|
|---|
| 1070 | if (!this.hasName(name)) {
|
|---|
| 1071 | var oldName = this.name();
|
|---|
| 1072 | var newName = oldName ? oldName + ' ' + name : name;
|
|---|
| 1073 | this.name(newName);
|
|---|
| 1074 | }
|
|---|
| 1075 | return this;
|
|---|
| 1076 | }
|
|---|
| 1077 | hasName(name) {
|
|---|
| 1078 | if (!name) {
|
|---|
| 1079 | return false;
|
|---|
| 1080 | }
|
|---|
| 1081 | const fullName = this.name();
|
|---|
| 1082 | if (!fullName) {
|
|---|
| 1083 | return false;
|
|---|
| 1084 | }
|
|---|
| 1085 | var names = (fullName || '').split(/\s/g);
|
|---|
| 1086 | return names.indexOf(name) !== -1;
|
|---|
| 1087 | }
|
|---|
| 1088 | removeName(name) {
|
|---|
| 1089 | var names = (this.name() || '').split(/\s/g);
|
|---|
| 1090 | var index = names.indexOf(name);
|
|---|
| 1091 | if (index !== -1) {
|
|---|
| 1092 | names.splice(index, 1);
|
|---|
| 1093 | this.name(names.join(' '));
|
|---|
| 1094 | }
|
|---|
| 1095 | return this;
|
|---|
| 1096 | }
|
|---|
| 1097 | setAttr(attr, val) {
|
|---|
| 1098 | var func = this[SET + Util_1.Util._capitalize(attr)];
|
|---|
| 1099 | if (Util_1.Util._isFunction(func)) {
|
|---|
| 1100 | func.call(this, val);
|
|---|
| 1101 | }
|
|---|
| 1102 | else {
|
|---|
| 1103 | this._setAttr(attr, val);
|
|---|
| 1104 | }
|
|---|
| 1105 | return this;
|
|---|
| 1106 | }
|
|---|
| 1107 | _requestDraw() {
|
|---|
| 1108 | if (Global_1.Konva.autoDrawEnabled) {
|
|---|
| 1109 | const drawNode = this.getLayer() || this.getStage();
|
|---|
| 1110 | drawNode === null || drawNode === void 0 ? void 0 : drawNode.batchDraw();
|
|---|
| 1111 | }
|
|---|
| 1112 | }
|
|---|
| 1113 | _setAttr(key, val) {
|
|---|
| 1114 | var oldVal = this.attrs[key];
|
|---|
| 1115 | if (oldVal === val && !Util_1.Util.isObject(val)) {
|
|---|
| 1116 | return;
|
|---|
| 1117 | }
|
|---|
| 1118 | if (val === undefined || val === null) {
|
|---|
| 1119 | delete this.attrs[key];
|
|---|
| 1120 | }
|
|---|
| 1121 | else {
|
|---|
| 1122 | this.attrs[key] = val;
|
|---|
| 1123 | }
|
|---|
| 1124 | if (this._shouldFireChangeEvents) {
|
|---|
| 1125 | this._fireChangeEvent(key, oldVal, val);
|
|---|
| 1126 | }
|
|---|
| 1127 | this._requestDraw();
|
|---|
| 1128 | }
|
|---|
| 1129 | _setComponentAttr(key, component, val) {
|
|---|
| 1130 | var oldVal;
|
|---|
| 1131 | if (val !== undefined) {
|
|---|
| 1132 | oldVal = this.attrs[key];
|
|---|
| 1133 | if (!oldVal) {
|
|---|
| 1134 | this.attrs[key] = this.getAttr(key);
|
|---|
| 1135 | }
|
|---|
| 1136 | this.attrs[key][component] = val;
|
|---|
| 1137 | this._fireChangeEvent(key, oldVal, val);
|
|---|
| 1138 | }
|
|---|
| 1139 | }
|
|---|
| 1140 | _fireAndBubble(eventType, evt, compareShape) {
|
|---|
| 1141 | if (evt && this.nodeType === SHAPE) {
|
|---|
| 1142 | evt.target = this;
|
|---|
| 1143 | }
|
|---|
| 1144 | var shouldStop = (eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
|
|---|
| 1145 | ((compareShape &&
|
|---|
| 1146 | (this === compareShape ||
|
|---|
| 1147 | (this.isAncestorOf && this.isAncestorOf(compareShape)))) ||
|
|---|
| 1148 | (this.nodeType === 'Stage' && !compareShape));
|
|---|
| 1149 | if (!shouldStop) {
|
|---|
| 1150 | this._fire(eventType, evt);
|
|---|
| 1151 | var stopBubble = (eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
|
|---|
| 1152 | compareShape &&
|
|---|
| 1153 | compareShape.isAncestorOf &&
|
|---|
| 1154 | compareShape.isAncestorOf(this) &&
|
|---|
| 1155 | !compareShape.isAncestorOf(this.parent);
|
|---|
| 1156 | if (((evt && !evt.cancelBubble) || !evt) &&
|
|---|
| 1157 | this.parent &&
|
|---|
| 1158 | this.parent.isListening() &&
|
|---|
| 1159 | !stopBubble) {
|
|---|
| 1160 | if (compareShape && compareShape.parent) {
|
|---|
| 1161 | this._fireAndBubble.call(this.parent, eventType, evt, compareShape);
|
|---|
| 1162 | }
|
|---|
| 1163 | else {
|
|---|
| 1164 | this._fireAndBubble.call(this.parent, eventType, evt);
|
|---|
| 1165 | }
|
|---|
| 1166 | }
|
|---|
| 1167 | }
|
|---|
| 1168 | }
|
|---|
| 1169 | _getProtoListeners(eventType) {
|
|---|
| 1170 | var _a, _b, _c;
|
|---|
| 1171 | const allListeners = (_a = this._cache.get(ALL_LISTENERS)) !== null && _a !== void 0 ? _a : {};
|
|---|
| 1172 | let events = allListeners === null || allListeners === void 0 ? void 0 : allListeners[eventType];
|
|---|
| 1173 | if (events === undefined) {
|
|---|
| 1174 | events = [];
|
|---|
| 1175 | let obj = Object.getPrototypeOf(this);
|
|---|
| 1176 | while (obj) {
|
|---|
| 1177 | const hierarchyEvents = (_c = (_b = obj.eventListeners) === null || _b === void 0 ? void 0 : _b[eventType]) !== null && _c !== void 0 ? _c : [];
|
|---|
| 1178 | events.push(...hierarchyEvents);
|
|---|
| 1179 | obj = Object.getPrototypeOf(obj);
|
|---|
| 1180 | }
|
|---|
| 1181 | allListeners[eventType] = events;
|
|---|
| 1182 | this._cache.set(ALL_LISTENERS, allListeners);
|
|---|
| 1183 | }
|
|---|
| 1184 | return events;
|
|---|
| 1185 | }
|
|---|
| 1186 | _fire(eventType, evt) {
|
|---|
| 1187 | evt = evt || {};
|
|---|
| 1188 | evt.currentTarget = this;
|
|---|
| 1189 | evt.type = eventType;
|
|---|
| 1190 | const topListeners = this._getProtoListeners(eventType);
|
|---|
| 1191 | if (topListeners) {
|
|---|
| 1192 | for (var i = 0; i < topListeners.length; i++) {
|
|---|
| 1193 | topListeners[i].handler.call(this, evt);
|
|---|
| 1194 | }
|
|---|
| 1195 | }
|
|---|
| 1196 | const selfListeners = this.eventListeners[eventType];
|
|---|
| 1197 | if (selfListeners) {
|
|---|
| 1198 | for (var i = 0; i < selfListeners.length; i++) {
|
|---|
| 1199 | selfListeners[i].handler.call(this, evt);
|
|---|
| 1200 | }
|
|---|
| 1201 | }
|
|---|
| 1202 | }
|
|---|
| 1203 | draw() {
|
|---|
| 1204 | this.drawScene();
|
|---|
| 1205 | this.drawHit();
|
|---|
| 1206 | return this;
|
|---|
| 1207 | }
|
|---|
| 1208 | _createDragElement(evt) {
|
|---|
| 1209 | var pointerId = evt ? evt.pointerId : undefined;
|
|---|
| 1210 | var stage = this.getStage();
|
|---|
| 1211 | var ap = this.getAbsolutePosition();
|
|---|
| 1212 | if (!stage) {
|
|---|
| 1213 | return;
|
|---|
| 1214 | }
|
|---|
| 1215 | var pos = stage._getPointerById(pointerId) ||
|
|---|
| 1216 | stage._changedPointerPositions[0] ||
|
|---|
| 1217 | ap;
|
|---|
| 1218 | DragAndDrop_1.DD._dragElements.set(this._id, {
|
|---|
| 1219 | node: this,
|
|---|
| 1220 | startPointerPos: pos,
|
|---|
| 1221 | offset: {
|
|---|
| 1222 | x: pos.x - ap.x,
|
|---|
| 1223 | y: pos.y - ap.y,
|
|---|
| 1224 | },
|
|---|
| 1225 | dragStatus: 'ready',
|
|---|
| 1226 | pointerId,
|
|---|
| 1227 | });
|
|---|
| 1228 | }
|
|---|
| 1229 | startDrag(evt, bubbleEvent = true) {
|
|---|
| 1230 | if (!DragAndDrop_1.DD._dragElements.has(this._id)) {
|
|---|
| 1231 | this._createDragElement(evt);
|
|---|
| 1232 | }
|
|---|
| 1233 | const elem = DragAndDrop_1.DD._dragElements.get(this._id);
|
|---|
| 1234 | elem.dragStatus = 'dragging';
|
|---|
| 1235 | this.fire('dragstart', {
|
|---|
| 1236 | type: 'dragstart',
|
|---|
| 1237 | target: this,
|
|---|
| 1238 | evt: evt && evt.evt,
|
|---|
| 1239 | }, bubbleEvent);
|
|---|
| 1240 | }
|
|---|
| 1241 | _setDragPosition(evt, elem) {
|
|---|
| 1242 | const pos = this.getStage()._getPointerById(elem.pointerId);
|
|---|
| 1243 | if (!pos) {
|
|---|
| 1244 | return;
|
|---|
| 1245 | }
|
|---|
| 1246 | var newNodePos = {
|
|---|
| 1247 | x: pos.x - elem.offset.x,
|
|---|
| 1248 | y: pos.y - elem.offset.y,
|
|---|
| 1249 | };
|
|---|
| 1250 | var dbf = this.dragBoundFunc();
|
|---|
| 1251 | if (dbf !== undefined) {
|
|---|
| 1252 | const bounded = dbf.call(this, newNodePos, evt);
|
|---|
| 1253 | if (!bounded) {
|
|---|
| 1254 | Util_1.Util.warn('dragBoundFunc did not return any value. That is unexpected behavior. You must return new absolute position from dragBoundFunc.');
|
|---|
| 1255 | }
|
|---|
| 1256 | else {
|
|---|
| 1257 | newNodePos = bounded;
|
|---|
| 1258 | }
|
|---|
| 1259 | }
|
|---|
| 1260 | if (!this._lastPos ||
|
|---|
| 1261 | this._lastPos.x !== newNodePos.x ||
|
|---|
| 1262 | this._lastPos.y !== newNodePos.y) {
|
|---|
| 1263 | this.setAbsolutePosition(newNodePos);
|
|---|
| 1264 | this._requestDraw();
|
|---|
| 1265 | }
|
|---|
| 1266 | this._lastPos = newNodePos;
|
|---|
| 1267 | }
|
|---|
| 1268 | stopDrag(evt) {
|
|---|
| 1269 | const elem = DragAndDrop_1.DD._dragElements.get(this._id);
|
|---|
| 1270 | if (elem) {
|
|---|
| 1271 | elem.dragStatus = 'stopped';
|
|---|
| 1272 | }
|
|---|
| 1273 | DragAndDrop_1.DD._endDragBefore(evt);
|
|---|
| 1274 | DragAndDrop_1.DD._endDragAfter(evt);
|
|---|
| 1275 | }
|
|---|
| 1276 | setDraggable(draggable) {
|
|---|
| 1277 | this._setAttr('draggable', draggable);
|
|---|
| 1278 | this._dragChange();
|
|---|
| 1279 | }
|
|---|
| 1280 | isDragging() {
|
|---|
| 1281 | const elem = DragAndDrop_1.DD._dragElements.get(this._id);
|
|---|
| 1282 | return elem ? elem.dragStatus === 'dragging' : false;
|
|---|
| 1283 | }
|
|---|
| 1284 | _listenDrag() {
|
|---|
| 1285 | this._dragCleanup();
|
|---|
| 1286 | this.on('mousedown.konva touchstart.konva', function (evt) {
|
|---|
| 1287 | var shouldCheckButton = evt.evt['button'] !== undefined;
|
|---|
| 1288 | var canDrag = !shouldCheckButton || Global_1.Konva.dragButtons.indexOf(evt.evt['button']) >= 0;
|
|---|
| 1289 | if (!canDrag) {
|
|---|
| 1290 | return;
|
|---|
| 1291 | }
|
|---|
| 1292 | if (this.isDragging()) {
|
|---|
| 1293 | return;
|
|---|
| 1294 | }
|
|---|
| 1295 | var hasDraggingChild = false;
|
|---|
| 1296 | DragAndDrop_1.DD._dragElements.forEach((elem) => {
|
|---|
| 1297 | if (this.isAncestorOf(elem.node)) {
|
|---|
| 1298 | hasDraggingChild = true;
|
|---|
| 1299 | }
|
|---|
| 1300 | });
|
|---|
| 1301 | if (!hasDraggingChild) {
|
|---|
| 1302 | this._createDragElement(evt);
|
|---|
| 1303 | }
|
|---|
| 1304 | });
|
|---|
| 1305 | }
|
|---|
| 1306 | _dragChange() {
|
|---|
| 1307 | if (this.attrs.draggable) {
|
|---|
| 1308 | this._listenDrag();
|
|---|
| 1309 | }
|
|---|
| 1310 | else {
|
|---|
| 1311 | this._dragCleanup();
|
|---|
| 1312 | var stage = this.getStage();
|
|---|
| 1313 | if (!stage) {
|
|---|
| 1314 | return;
|
|---|
| 1315 | }
|
|---|
| 1316 | const dragElement = DragAndDrop_1.DD._dragElements.get(this._id);
|
|---|
| 1317 | const isDragging = dragElement && dragElement.dragStatus === 'dragging';
|
|---|
| 1318 | const isReady = dragElement && dragElement.dragStatus === 'ready';
|
|---|
| 1319 | if (isDragging) {
|
|---|
| 1320 | this.stopDrag();
|
|---|
| 1321 | }
|
|---|
| 1322 | else if (isReady) {
|
|---|
| 1323 | DragAndDrop_1.DD._dragElements.delete(this._id);
|
|---|
| 1324 | }
|
|---|
| 1325 | }
|
|---|
| 1326 | }
|
|---|
| 1327 | _dragCleanup() {
|
|---|
| 1328 | this.off('mousedown.konva');
|
|---|
| 1329 | this.off('touchstart.konva');
|
|---|
| 1330 | }
|
|---|
| 1331 | isClientRectOnScreen(margin = { x: 0, y: 0 }) {
|
|---|
| 1332 | const stage = this.getStage();
|
|---|
| 1333 | if (!stage) {
|
|---|
| 1334 | return false;
|
|---|
| 1335 | }
|
|---|
| 1336 | const screenRect = {
|
|---|
| 1337 | x: -margin.x,
|
|---|
| 1338 | y: -margin.y,
|
|---|
| 1339 | width: stage.width() + 2 * margin.x,
|
|---|
| 1340 | height: stage.height() + 2 * margin.y,
|
|---|
| 1341 | };
|
|---|
| 1342 | return Util_1.Util.haveIntersection(screenRect, this.getClientRect());
|
|---|
| 1343 | }
|
|---|
| 1344 | static create(data, container) {
|
|---|
| 1345 | if (Util_1.Util._isString(data)) {
|
|---|
| 1346 | data = JSON.parse(data);
|
|---|
| 1347 | }
|
|---|
| 1348 | return this._createNode(data, container);
|
|---|
| 1349 | }
|
|---|
| 1350 | static _createNode(obj, container) {
|
|---|
| 1351 | var className = Node.prototype.getClassName.call(obj), children = obj.children, no, len, n;
|
|---|
| 1352 | if (container) {
|
|---|
| 1353 | obj.attrs.container = container;
|
|---|
| 1354 | }
|
|---|
| 1355 | if (!Global_1.Konva[className]) {
|
|---|
| 1356 | Util_1.Util.warn('Can not find a node with class name "' +
|
|---|
| 1357 | className +
|
|---|
| 1358 | '". Fallback to "Shape".');
|
|---|
| 1359 | className = 'Shape';
|
|---|
| 1360 | }
|
|---|
| 1361 | const Class = Global_1.Konva[className];
|
|---|
| 1362 | no = new Class(obj.attrs);
|
|---|
| 1363 | if (children) {
|
|---|
| 1364 | len = children.length;
|
|---|
| 1365 | for (n = 0; n < len; n++) {
|
|---|
| 1366 | no.add(Node._createNode(children[n]));
|
|---|
| 1367 | }
|
|---|
| 1368 | }
|
|---|
| 1369 | return no;
|
|---|
| 1370 | }
|
|---|
| 1371 | }
|
|---|
| 1372 | exports.Node = Node;
|
|---|
| 1373 | Node.prototype.nodeType = 'Node';
|
|---|
| 1374 | Node.prototype._attrsAffectingSize = [];
|
|---|
| 1375 | Node.prototype.eventListeners = {};
|
|---|
| 1376 | Node.prototype.on.call(Node.prototype, TRANSFORM_CHANGE_STR, function () {
|
|---|
| 1377 | if (this._batchingTransformChange) {
|
|---|
| 1378 | this._needClearTransformCache = true;
|
|---|
| 1379 | return;
|
|---|
| 1380 | }
|
|---|
| 1381 | this._clearCache(TRANSFORM);
|
|---|
| 1382 | this._clearSelfAndDescendantCache(ABSOLUTE_TRANSFORM);
|
|---|
| 1383 | });
|
|---|
| 1384 | Node.prototype.on.call(Node.prototype, 'visibleChange.konva', function () {
|
|---|
| 1385 | this._clearSelfAndDescendantCache(VISIBLE);
|
|---|
| 1386 | });
|
|---|
| 1387 | Node.prototype.on.call(Node.prototype, 'listeningChange.konva', function () {
|
|---|
| 1388 | this._clearSelfAndDescendantCache(LISTENING);
|
|---|
| 1389 | });
|
|---|
| 1390 | Node.prototype.on.call(Node.prototype, 'opacityChange.konva', function () {
|
|---|
| 1391 | this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
|
|---|
| 1392 | });
|
|---|
| 1393 | const addGetterSetter = Factory_1.Factory.addGetterSetter;
|
|---|
| 1394 | addGetterSetter(Node, 'zIndex');
|
|---|
| 1395 | addGetterSetter(Node, 'absolutePosition');
|
|---|
| 1396 | addGetterSetter(Node, 'position');
|
|---|
| 1397 | addGetterSetter(Node, 'x', 0, (0, Validators_1.getNumberValidator)());
|
|---|
| 1398 | addGetterSetter(Node, 'y', 0, (0, Validators_1.getNumberValidator)());
|
|---|
| 1399 | addGetterSetter(Node, 'globalCompositeOperation', 'source-over', (0, Validators_1.getStringValidator)());
|
|---|
| 1400 | addGetterSetter(Node, 'opacity', 1, (0, Validators_1.getNumberValidator)());
|
|---|
| 1401 | addGetterSetter(Node, 'name', '', (0, Validators_1.getStringValidator)());
|
|---|
| 1402 | addGetterSetter(Node, 'id', '', (0, Validators_1.getStringValidator)());
|
|---|
| 1403 | addGetterSetter(Node, 'rotation', 0, (0, Validators_1.getNumberValidator)());
|
|---|
| 1404 | Factory_1.Factory.addComponentsGetterSetter(Node, 'scale', ['x', 'y']);
|
|---|
| 1405 | addGetterSetter(Node, 'scaleX', 1, (0, Validators_1.getNumberValidator)());
|
|---|
| 1406 | addGetterSetter(Node, 'scaleY', 1, (0, Validators_1.getNumberValidator)());
|
|---|
| 1407 | Factory_1.Factory.addComponentsGetterSetter(Node, 'skew', ['x', 'y']);
|
|---|
| 1408 | addGetterSetter(Node, 'skewX', 0, (0, Validators_1.getNumberValidator)());
|
|---|
| 1409 | addGetterSetter(Node, 'skewY', 0, (0, Validators_1.getNumberValidator)());
|
|---|
| 1410 | Factory_1.Factory.addComponentsGetterSetter(Node, 'offset', ['x', 'y']);
|
|---|
| 1411 | addGetterSetter(Node, 'offsetX', 0, (0, Validators_1.getNumberValidator)());
|
|---|
| 1412 | addGetterSetter(Node, 'offsetY', 0, (0, Validators_1.getNumberValidator)());
|
|---|
| 1413 | addGetterSetter(Node, 'dragDistance', null, (0, Validators_1.getNumberValidator)());
|
|---|
| 1414 | addGetterSetter(Node, 'width', 0, (0, Validators_1.getNumberValidator)());
|
|---|
| 1415 | addGetterSetter(Node, 'height', 0, (0, Validators_1.getNumberValidator)());
|
|---|
| 1416 | addGetterSetter(Node, 'listening', true, (0, Validators_1.getBooleanValidator)());
|
|---|
| 1417 | addGetterSetter(Node, 'preventDefault', true, (0, Validators_1.getBooleanValidator)());
|
|---|
| 1418 | addGetterSetter(Node, 'filters', null, function (val) {
|
|---|
| 1419 | this._filterUpToDate = false;
|
|---|
| 1420 | return val;
|
|---|
| 1421 | });
|
|---|
| 1422 | addGetterSetter(Node, 'visible', true, (0, Validators_1.getBooleanValidator)());
|
|---|
| 1423 | addGetterSetter(Node, 'transformsEnabled', 'all', (0, Validators_1.getStringValidator)());
|
|---|
| 1424 | addGetterSetter(Node, 'size');
|
|---|
| 1425 | addGetterSetter(Node, 'dragBoundFunc');
|
|---|
| 1426 | addGetterSetter(Node, 'draggable', false, (0, Validators_1.getBooleanValidator)());
|
|---|
| 1427 | Factory_1.Factory.backCompat(Node, {
|
|---|
| 1428 | rotateDeg: 'rotate',
|
|---|
| 1429 | setRotationDeg: 'setRotation',
|
|---|
| 1430 | getRotationDeg: 'getRotation',
|
|---|
| 1431 | });
|
|---|
