lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 04:42:02 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: allow window global to be set for transformer

Browse Source
This commit is contained in:
loc 2022-09-14 16:35:02 -07:00
parent 99180601fc
commit 59096bec7b
5 changed files with 90 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
konva.js
View File

@ -8,7 +8,7 @@
* Konva JavaScript Framework v8.3.12 * Konva JavaScript Framework v8.3.12
* http://konvajs.org/ * http://konvajs.org/
* Licensed under the MIT * Licensed under the MIT
* Date: Mon Aug 29 2022 * Date: Wed Sep 14 2022
* *
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -2406,14 +2406,28 @@
}); });
}, },
}; };
if (Konva$2.isBrowser) { const registerDragAndDropListenersForWindowGlobal = (windowGlobal) => {
window.addEventListener('mouseup', DD._endDragBefore, true); if (Konva$2.isBrowser) {
window.addEventListener('touchend', DD._endDragBefore, true); windowGlobal.console.log('registering events');
window.addEventListener('mousemove', DD._drag); // Remove them all first in case this is a duplicate call with the same
window.addEventListener('touchmove', DD._drag); // windowGlobal. If this is the first call, this will be a noop. This is to
window.addEventListener('mouseup', DD._endDragAfter, false); // avoid a situation where we're storing multiple Window handles and
window.addEventListener('touchend', DD._endDragAfter, false); // possibly introducing a memory leak.
} windowGlobal.removeEventListener('mouseup', DD._endDragBefore, true);
windowGlobal.removeEventListener('touchend', DD._endDragBefore, true);
windowGlobal.removeEventListener('mousemove', DD._drag);
windowGlobal.removeEventListener('touchmove', DD._drag);
windowGlobal.removeEventListener('mouseup', DD._endDragAfter, false);
windowGlobal.removeEventListener('touchend', DD._endDragAfter, false);
// Go ahead and actually set up the listeners.
windowGlobal.addEventListener('mouseup', DD._endDragBefore, true);
windowGlobal.addEventListener('touchend', DD._endDragBefore, true);
windowGlobal.addEventListener('mousemove', DD._drag);
windowGlobal.addEventListener('touchmove', DD._drag);
windowGlobal.addEventListener('mouseup', DD._endDragAfter, false);
windowGlobal.addEventListener('touchend', DD._endDragAfter, false);
}
};
// CONSTANTS // CONSTANTS
var ABSOLUTE_OPACITY = 'absoluteOpacity', ALL_LISTENERS = 'allEventListeners', ABSOLUTE_TRANSFORM = 'absoluteTransform', ABSOLUTE_SCALE = 'absoluteScale', CANVAS = 'canvas', CHANGE = 'Change', CHILDREN = 'children', KONVA = 'konva', LISTENING = 'listening', MOUSEENTER$1 = 'mouseenter', MOUSELEAVE$1 = 'mouseleave', SET = 'set', SHAPE = 'Shape', SPACE$1 = ' ', STAGE$1 = 'stage', TRANSFORM = 'transform', UPPER_STAGE = 'Stage', VISIBLE = 'visible', TRANSFORM_CHANGE_STR$1 = [ var ABSOLUTE_OPACITY = 'absoluteOpacity', ALL_LISTENERS = 'allEventListeners', ABSOLUTE_TRANSFORM = 'absoluteTransform', ABSOLUTE_SCALE = 'absoluteScale', CANVAS = 'canvas', CHANGE = 'Change', CHILDREN = 'children', KONVA = 'konva', LISTENING = 'listening', MOUSEENTER$1 = 'mouseenter', MOUSELEAVE$1 = 'mouseleave', SET = 'set', SHAPE = 'Shape', SPACE$1 = ' ', STAGE$1 = 'stage', TRANSFORM = 'transform', UPPER_STAGE = 'Stage', VISIBLE = 'visible', TRANSFORM_CHANGE_STR$1 = [
@ -5904,6 +5918,7 @@
checkNoClip(this.attrs); checkNoClip(this.attrs);
}); });
this._checkVisibility(); this._checkVisibility();
registerDragAndDropListenersForWindowGlobal(this.getWindowGlobal());
} }
_validateAdd(child) { _validateAdd(child) {
const isLayer = child.getType() === 'Layer'; const isLayer = child.getType() === 'Layer';
@ -6021,6 +6036,10 @@
getContent() { getContent() {
return this.content; return this.content;
} }
getWindowGlobal() {
var _a;
return (_a = this.attrs.windowGlobal) !== null && _a !== void 0 ? _a : window;
}
_toKonvaCanvas(config) { _toKonvaCanvas(config) {
config = config || {}; config = config || {};
config.x = config.x || 0; config.x = config.x || 0;
@ -6835,8 +6854,11 @@
return this._getCache(SHADOW_RGBA, this._getShadowRGBA); return this._getCache(SHADOW_RGBA, this._getShadowRGBA);
} }
_getShadowRGBA() { _getShadowRGBA() {
if (this.hasShadow()) { if (!this.hasShadow()) {
var rgba = Util.colorToRGBA(this.shadowColor()); return;
}
var rgba = Util.colorToRGBA(this.shadowColor());
if (rgba) {
return ('rgba(' + return ('rgba(' +
rgba.r + rgba.r +
',' + ',' +
@ -15089,11 +15111,12 @@
var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); var hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
this.sin = Math.abs(height / hypotenuse); this.sin = Math.abs(height / hypotenuse);
this.cos = Math.abs(width / hypotenuse); this.cos = Math.abs(width / hypotenuse);
if (typeof window !== 'undefined') { const windowGlobal = e.target.getStage().getWindowGlobal();
window.addEventListener('mousemove', this._handleMouseMove); if (typeof windowGlobal !== 'undefined') {
window.addEventListener('touchmove', this._handleMouseMove); windowGlobal.addEventListener('mousemove', this._handleMouseMove);
window.addEventListener('mouseup', this._handleMouseUp, true); windowGlobal.addEventListener('touchmove', this._handleMouseMove);
window.addEventListener('touchend', this._handleMouseUp, true); windowGlobal.addEventListener('mouseup', this._handleMouseUp, true);
windowGlobal.addEventListener('touchend', this._handleMouseUp, true);
} }
this._transforming = true; this._transforming = true;
var ap = e.target.getAbsolutePosition(); var ap = e.target.getAbsolutePosition();
@ -15293,13 +15316,14 @@
_removeEvents(e) { _removeEvents(e) {
if (this._transforming) { if (this._transforming) {
this._transforming = false; this._transforming = false;
if (typeof window !== 'undefined') {
window.removeEventListener('mousemove', this._handleMouseMove);
window.removeEventListener('touchmove', this._handleMouseMove);
window.removeEventListener('mouseup', this._handleMouseUp, true);
window.removeEventListener('touchend', this._handleMouseUp, true);
}
var node = this.getNode(); var node = this.getNode();
const windowGlobal = node.getStage().getWindowGlobal();
if (typeof windowGlobal !== 'undefined') {
windowGlobal.removeEventListener('mousemove', this._handleMouseMove);
windowGlobal.removeEventListener('touchmove', this._handleMouseMove);
windowGlobal.removeEventListener('mouseup', this._handleMouseUp, true);
windowGlobal.removeEventListener('touchend', this._handleMouseUp, true);
}
this._fire('transformend', { evt: e, target: node }); this._fire('transformend', { evt: e, target: node });
if (node) { if (node) {
this._nodes.forEach((target) => { this._nodes.forEach((target) => {
@ -15582,8 +15606,8 @@
this.getStage().content && (this.getStage().content.style.cursor = ''); this.getStage().content && (this.getStage().content.style.cursor = '');
} }
Group.prototype.destroy.call(this); Group.prototype.destroy.call(this);
this.detach();
this._removeEvents(); this._removeEvents();
this.detach();
return this; return this;
} }
// do not work as a container // do not work as a container

4
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

29
src/DragAndDrop.ts
View File

@ -157,13 +157,26 @@ export const DD = {
}, },
}; };
if (Konva.isBrowser) { export const registerDragAndDropListenersForWindowGlobal = (windowGlobal: Window) => {
window.addEventListener('mouseup', DD._endDragBefore, true); if (Konva.isBrowser) {
window.addEventListener('touchend', DD._endDragBefore, true); (windowGlobal as any).console.log('registering events');
// Remove them all first in case this is a duplicate call with the same
// windowGlobal. If this is the first call, this will be a noop. This is to
// avoid a situation where we're storing multiple Window handles and
// possibly introducing a memory leak.
windowGlobal.removeEventListener('mouseup', DD._endDragBefore, true);
windowGlobal.removeEventListener('touchend', DD._endDragBefore, true);
windowGlobal.removeEventListener('mousemove', DD._drag);
windowGlobal.removeEventListener('touchmove', DD._drag);
windowGlobal.removeEventListener('mouseup', DD._endDragAfter, false);
windowGlobal.removeEventListener('touchend', DD._endDragAfter, false);
window.addEventListener('mousemove', DD._drag); // Go ahead and actually set up the listeners.
window.addEventListener('touchmove', DD._drag); windowGlobal.addEventListener('mouseup', DD._endDragBefore, true);
windowGlobal.addEventListener('touchend', DD._endDragBefore, true);
window.addEventListener('mouseup', DD._endDragAfter, false); windowGlobal.addEventListener('mousemove', DD._drag);
window.addEventListener('touchend', DD._endDragAfter, false); windowGlobal.addEventListener('touchmove', DD._drag);
windowGlobal.addEventListener('mouseup', DD._endDragAfter, false);
windowGlobal.addEventListener('touchend', DD._endDragAfter, false);
}
} }

7
src/Stage.ts
View File

@ -6,12 +6,13 @@ import { SceneCanvas, HitCanvas } from './Canvas';
import { GetSet, Vector2d } from './types'; import { GetSet, Vector2d } from './types';
import { Shape } from './Shape'; import { Shape } from './Shape';
import { Layer } from './Layer'; import { Layer } from './Layer';
import { DD } from './DragAndDrop'; import { DD, registerDragAndDropListenersForWindowGlobal } from './DragAndDrop';
import { _registerNode } from './Global'; import { _registerNode } from './Global';
import * as PointerEvents from './PointerEvents'; import * as PointerEvents from './PointerEvents';
export interface StageConfig extends ContainerConfig { export interface StageConfig extends ContainerConfig {
container: HTMLDivElement | string; container: HTMLDivElement | string;
windowGlobal?: Window;
} }
// CONSTANTS // CONSTANTS
@ -188,6 +189,7 @@ export class Stage extends Container<Layer> {
} }
); );
this._checkVisibility(); this._checkVisibility();
registerDragAndDropListenersForWindowGlobal(this.getWindowGlobal());
} }
_validateAdd(child) { _validateAdd(child) {
@ -311,6 +313,9 @@ export class Stage extends Container<Layer> {
getContent() { getContent() {
return this.content; return this.content;
} }
getWindowGlobal() {
return this.attrs.windowGlobal ?? window;
}
_toKonvaCanvas(config) { _toKonvaCanvas(config) {
config = config || {}; config = config || {};

26
src/shapes/Transformer.ts
View File

@ -635,11 +635,12 @@ export class Transformer extends Group {
this.sin = Math.abs(height / hypotenuse); this.sin = Math.abs(height / hypotenuse);
this.cos = Math.abs(width / hypotenuse); this.cos = Math.abs(width / hypotenuse);
if (typeof window !== 'undefined') { const windowGlobal = e.target.getStage().getWindowGlobal();
window.addEventListener('mousemove', this._handleMouseMove); if (typeof windowGlobal !== 'undefined') {
window.addEventListener('touchmove', this._handleMouseMove); windowGlobal.addEventListener('mousemove', this._handleMouseMove);
window.addEventListener('mouseup', this._handleMouseUp, true); windowGlobal.addEventListener('touchmove', this._handleMouseMove);
window.addEventListener('touchend', this._handleMouseUp, true); windowGlobal.addEventListener('mouseup', this._handleMouseUp, true);
windowGlobal.addEventListener('touchend', this._handleMouseUp, true);
} }
this._transforming = true; this._transforming = true;
@ -895,13 +896,14 @@ export class Transformer extends Group {
_removeEvents(e?) { _removeEvents(e?) {
if (this._transforming) { if (this._transforming) {
this._transforming = false; this._transforming = false;
if (typeof window !== 'undefined') {
window.removeEventListener('mousemove', this._handleMouseMove);
window.removeEventListener('touchmove', this._handleMouseMove);
window.removeEventListener('mouseup', this._handleMouseUp, true);
window.removeEventListener('touchend', this._handleMouseUp, true);
}
var node = this.getNode(); var node = this.getNode();
const windowGlobal = node.getStage().getWindowGlobal();
if (typeof windowGlobal !== 'undefined') {
windowGlobal.removeEventListener('mousemove', this._handleMouseMove);
windowGlobal.removeEventListener('touchmove', this._handleMouseMove);
windowGlobal.removeEventListener('mouseup', this._handleMouseUp, true);
windowGlobal.removeEventListener('touchend', this._handleMouseUp, true);
}
this._fire('transformend', { evt: e, target: node }); this._fire('transformend', { evt: e, target: node });
if (node) { if (node) {
@ -1209,8 +1211,8 @@ export class Transformer extends Group {
this.getStage().content && (this.getStage().content.style.cursor = ''); this.getStage().content && (this.getStage().content.style.cursor = '');
} }
Group.prototype.destroy.call(this); Group.prototype.destroy.call(this);
this.detach();
this._removeEvents(); this._removeEvents();
this.detach();
return this; return this;
} }
// do not work as a container // do not work as a container