@nasser-sw/fabric 7.0.1-beta7 → 7.0.1-beta9
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.
- package/debug/konva-master/CHANGELOG.md +1475 -0
- package/debug/konva-master/LICENSE +22 -0
- package/debug/konva-master/README.md +209 -0
- package/debug/konva-master/gulpfile.mjs +110 -0
- package/debug/konva-master/package.json +139 -0
- package/debug/konva-master/release.sh +62 -0
- package/debug/konva-master/resources/doc-includes/ContainerParams.txt +6 -0
- package/debug/konva-master/resources/doc-includes/NodeParams.txt +20 -0
- package/debug/konva-master/resources/doc-includes/ShapeParams.txt +53 -0
- package/debug/konva-master/resources/jsdoc.conf.json +28 -0
- package/debug/konva-master/rollup.config.mjs +32 -0
- package/debug/konva-master/src/Animation.ts +237 -0
- package/debug/konva-master/src/BezierFunctions.ts +826 -0
- package/debug/konva-master/src/Canvas.ts +230 -0
- package/debug/konva-master/src/Container.ts +649 -0
- package/debug/konva-master/src/Context.ts +1017 -0
- package/debug/konva-master/src/Core.ts +5 -0
- package/debug/konva-master/src/DragAndDrop.ts +173 -0
- package/debug/konva-master/src/Factory.ts +246 -0
- package/debug/konva-master/src/FastLayer.ts +29 -0
- package/debug/konva-master/src/Global.ts +210 -0
- package/debug/konva-master/src/Group.ts +31 -0
- package/debug/konva-master/src/Layer.ts +546 -0
- package/debug/konva-master/src/Node.ts +3477 -0
- package/debug/konva-master/src/PointerEvents.ts +67 -0
- package/debug/konva-master/src/Shape.ts +2081 -0
- package/debug/konva-master/src/Stage.ts +1000 -0
- package/debug/konva-master/src/Tween.ts +811 -0
- package/debug/konva-master/src/Util.ts +1123 -0
- package/debug/konva-master/src/Validators.ts +210 -0
- package/debug/konva-master/src/_CoreInternals.ts +85 -0
- package/debug/konva-master/src/_FullInternals.ts +171 -0
- package/debug/konva-master/src/canvas-backend.ts +36 -0
- package/debug/konva-master/src/filters/Blur.ts +388 -0
- package/debug/konva-master/src/filters/Brighten.ts +48 -0
- package/debug/konva-master/src/filters/Brightness.ts +30 -0
- package/debug/konva-master/src/filters/Contrast.ts +75 -0
- package/debug/konva-master/src/filters/Emboss.ts +207 -0
- package/debug/konva-master/src/filters/Enhance.ts +154 -0
- package/debug/konva-master/src/filters/Grayscale.ts +25 -0
- package/debug/konva-master/src/filters/HSL.ts +108 -0
- package/debug/konva-master/src/filters/HSV.ts +106 -0
- package/debug/konva-master/src/filters/Invert.ts +23 -0
- package/debug/konva-master/src/filters/Kaleidoscope.ts +274 -0
- package/debug/konva-master/src/filters/Mask.ts +220 -0
- package/debug/konva-master/src/filters/Noise.ts +44 -0
- package/debug/konva-master/src/filters/Pixelate.ts +107 -0
- package/debug/konva-master/src/filters/Posterize.ts +46 -0
- package/debug/konva-master/src/filters/RGB.ts +82 -0
- package/debug/konva-master/src/filters/RGBA.ts +103 -0
- package/debug/konva-master/src/filters/Sepia.ts +27 -0
- package/debug/konva-master/src/filters/Solarize.ts +29 -0
- package/debug/konva-master/src/filters/Threshold.ts +44 -0
- package/debug/konva-master/src/index.ts +3 -0
- package/debug/konva-master/src/shapes/Arc.ts +176 -0
- package/debug/konva-master/src/shapes/Arrow.ts +231 -0
- package/debug/konva-master/src/shapes/Circle.ts +76 -0
- package/debug/konva-master/src/shapes/Ellipse.ts +121 -0
- package/debug/konva-master/src/shapes/Image.ts +319 -0
- package/debug/konva-master/src/shapes/Label.ts +386 -0
- package/debug/konva-master/src/shapes/Line.ts +364 -0
- package/debug/konva-master/src/shapes/Path.ts +1013 -0
- package/debug/konva-master/src/shapes/Rect.ts +79 -0
- package/debug/konva-master/src/shapes/RegularPolygon.ts +167 -0
- package/debug/konva-master/src/shapes/Ring.ts +94 -0
- package/debug/konva-master/src/shapes/Sprite.ts +370 -0
- package/debug/konva-master/src/shapes/Star.ts +125 -0
- package/debug/konva-master/src/shapes/Text.ts +1065 -0
- package/debug/konva-master/src/shapes/TextPath.ts +583 -0
- package/debug/konva-master/src/shapes/Transformer.ts +1889 -0
- package/debug/konva-master/src/shapes/Wedge.ts +129 -0
- package/debug/konva-master/src/skia-backend.ts +35 -0
- package/debug/konva-master/src/types.ts +84 -0
- package/debug/konva-master/tsconfig.json +31 -0
- package/debug/konva-master/tsconfig.test.json +7 -0
- package/dist/index.js +977 -29
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/dist/index.min.mjs +1 -1
- package/dist/index.min.mjs.map +1 -1
- package/dist/index.mjs +977 -29
- package/dist/index.mjs.map +1 -1
- package/dist/index.node.cjs +977 -29
- package/dist/index.node.cjs.map +1 -1
- package/dist/index.node.mjs +977 -29
- package/dist/index.node.mjs.map +1 -1
- package/dist/package.json.min.mjs +1 -1
- package/dist/package.json.mjs +1 -1
- package/dist/src/shapes/Line.d.ts +1 -0
- package/dist/src/shapes/Line.d.ts.map +1 -1
- package/dist/src/shapes/Line.min.mjs +1 -1
- package/dist/src/shapes/Line.min.mjs.map +1 -1
- package/dist/src/shapes/Line.mjs +63 -6
- package/dist/src/shapes/Line.mjs.map +1 -1
- package/dist/src/shapes/Text/Text.d.ts +19 -0
- package/dist/src/shapes/Text/Text.d.ts.map +1 -1
- package/dist/src/shapes/Text/Text.min.mjs +1 -1
- package/dist/src/shapes/Text/Text.min.mjs.map +1 -1
- package/dist/src/shapes/Text/Text.mjs +238 -4
- package/dist/src/shapes/Text/Text.mjs.map +1 -1
- package/dist/src/shapes/Textbox.d.ts +38 -1
- package/dist/src/shapes/Textbox.d.ts.map +1 -1
- package/dist/src/shapes/Textbox.min.mjs +1 -1
- package/dist/src/shapes/Textbox.min.mjs.map +1 -1
- package/dist/src/shapes/Textbox.mjs +497 -15
- package/dist/src/shapes/Textbox.mjs.map +1 -1
- package/dist/src/text/examples/arabicTextExample.d.ts +60 -0
- package/dist/src/text/examples/arabicTextExample.d.ts.map +1 -0
- package/dist/src/text/measure.d.ts +9 -0
- package/dist/src/text/measure.d.ts.map +1 -1
- package/dist/src/text/measure.min.mjs +1 -1
- package/dist/src/text/measure.min.mjs.map +1 -1
- package/dist/src/text/measure.mjs +175 -4
- package/dist/src/text/measure.mjs.map +1 -1
- package/dist/src/text/overlayEditor.d.ts.map +1 -1
- package/dist/src/text/overlayEditor.min.mjs +1 -1
- package/dist/src/text/overlayEditor.min.mjs.map +1 -1
- package/dist/src/text/overlayEditor.mjs +7 -0
- package/dist/src/text/overlayEditor.mjs.map +1 -1
- package/dist/src/text/scriptUtils.d.ts +142 -0
- package/dist/src/text/scriptUtils.d.ts.map +1 -0
- package/dist/src/text/scriptUtils.min.mjs +2 -0
- package/dist/src/text/scriptUtils.min.mjs.map +1 -0
- package/dist/src/text/scriptUtils.mjs +212 -0
- package/dist/src/text/scriptUtils.mjs.map +1 -0
- package/dist-extensions/src/shapes/Line.d.ts +1 -0
- package/dist-extensions/src/shapes/Line.d.ts.map +1 -1
- package/dist-extensions/src/shapes/Text/Text.d.ts +19 -0
- package/dist-extensions/src/shapes/Text/Text.d.ts.map +1 -1
- package/dist-extensions/src/shapes/Textbox.d.ts +38 -1
- package/dist-extensions/src/shapes/Textbox.d.ts.map +1 -1
- package/dist-extensions/src/text/measure.d.ts +9 -0
- package/dist-extensions/src/text/measure.d.ts.map +1 -1
- package/dist-extensions/src/text/overlayEditor.d.ts.map +1 -1
- package/dist-extensions/src/text/scriptUtils.d.ts +142 -0
- package/dist-extensions/src/text/scriptUtils.d.ts.map +1 -0
- package/fabric-test-editor.html +2401 -46
- package/fabric-test2.html +43 -0
- package/fonts/STV Bold.ttf +0 -0
- package/fonts/STV Light.ttf +0 -0
- package/fonts/STV Regular.ttf +0 -0
- package/package.json +1 -1
- package/src/shapes/Line.ts +132 -46
- package/src/shapes/Text/Text.ts +238 -5
- package/src/shapes/Textbox.ts +521 -11
- package/src/text/measure.ts +200 -50
- package/src/text/overlayEditor.ts +7 -0
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import type { Container } from './Container.ts';
|
|
2
|
+
import { Konva } from './Global.ts';
|
|
3
|
+
import type { Node } from './Node.ts';
|
|
4
|
+
import type { Vector2d } from './types.ts';
|
|
5
|
+
import { Util } from './Util.ts';
|
|
6
|
+
|
|
7
|
+
export const DD = {
|
|
8
|
+
get isDragging() {
|
|
9
|
+
let flag = false;
|
|
10
|
+
DD._dragElements.forEach((elem) => {
|
|
11
|
+
if (elem.dragStatus === 'dragging') {
|
|
12
|
+
flag = true;
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
return flag;
|
|
16
|
+
},
|
|
17
|
+
justDragged: false,
|
|
18
|
+
get node() {
|
|
19
|
+
// return first dragging node
|
|
20
|
+
let node: Node | undefined;
|
|
21
|
+
DD._dragElements.forEach((elem) => {
|
|
22
|
+
node = elem.node;
|
|
23
|
+
});
|
|
24
|
+
return node;
|
|
25
|
+
},
|
|
26
|
+
_dragElements: new Map<
|
|
27
|
+
number,
|
|
28
|
+
{
|
|
29
|
+
node: Node;
|
|
30
|
+
startPointerPos: Vector2d;
|
|
31
|
+
offset: Vector2d;
|
|
32
|
+
pointerId?: number;
|
|
33
|
+
// when we just put pointer down on a node
|
|
34
|
+
// it will create drag element
|
|
35
|
+
dragStatus: 'ready' | 'dragging' | 'stopped';
|
|
36
|
+
// dragStarted: boolean;
|
|
37
|
+
// isDragging: boolean;
|
|
38
|
+
// dragStopped: boolean;
|
|
39
|
+
}
|
|
40
|
+
>(),
|
|
41
|
+
|
|
42
|
+
// methods
|
|
43
|
+
_drag(evt) {
|
|
44
|
+
const nodesToFireEvents: Array<Node> = [];
|
|
45
|
+
DD._dragElements.forEach((elem, key) => {
|
|
46
|
+
const { node } = elem;
|
|
47
|
+
// we need to find pointer relative to that node
|
|
48
|
+
const stage = node.getStage()!;
|
|
49
|
+
stage.setPointersPositions(evt);
|
|
50
|
+
|
|
51
|
+
// it is possible that user call startDrag without any event
|
|
52
|
+
// it that case we need to detect first movable pointer and attach it into the node
|
|
53
|
+
if (elem.pointerId === undefined) {
|
|
54
|
+
elem.pointerId = Util._getFirstPointerId(evt);
|
|
55
|
+
}
|
|
56
|
+
const pos = stage._changedPointerPositions.find(
|
|
57
|
+
(pos) => pos.id === elem.pointerId
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
// not related pointer
|
|
61
|
+
if (!pos) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
if (elem.dragStatus !== 'dragging') {
|
|
65
|
+
const dragDistance = node.dragDistance();
|
|
66
|
+
const distance = Math.max(
|
|
67
|
+
Math.abs(pos.x - elem.startPointerPos.x),
|
|
68
|
+
Math.abs(pos.y - elem.startPointerPos.y)
|
|
69
|
+
);
|
|
70
|
+
if (distance < dragDistance) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
node.startDrag({ evt });
|
|
74
|
+
// a user can stop dragging inside `dragstart`
|
|
75
|
+
if (!node.isDragging()) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
node._setDragPosition(evt, elem);
|
|
80
|
+
nodesToFireEvents.push(node);
|
|
81
|
+
});
|
|
82
|
+
// call dragmove only after ALL positions are changed
|
|
83
|
+
nodesToFireEvents.forEach((node) => {
|
|
84
|
+
node.fire(
|
|
85
|
+
'dragmove',
|
|
86
|
+
{
|
|
87
|
+
type: 'dragmove',
|
|
88
|
+
target: node,
|
|
89
|
+
evt: evt,
|
|
90
|
+
},
|
|
91
|
+
true
|
|
92
|
+
);
|
|
93
|
+
});
|
|
94
|
+
},
|
|
95
|
+
|
|
96
|
+
// dragBefore and dragAfter allows us to set correct order of events
|
|
97
|
+
// setup all in dragbefore, and stop dragging only after pointerup triggered.
|
|
98
|
+
_endDragBefore(evt?) {
|
|
99
|
+
const drawNodes: Array<Container> = [];
|
|
100
|
+
DD._dragElements.forEach((elem) => {
|
|
101
|
+
const { node } = elem;
|
|
102
|
+
// we need to find pointer relative to that node
|
|
103
|
+
const stage = node.getStage()!;
|
|
104
|
+
if (evt) {
|
|
105
|
+
stage.setPointersPositions(evt);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
const pos = stage._changedPointerPositions.find(
|
|
109
|
+
(pos) => pos.id === elem.pointerId
|
|
110
|
+
);
|
|
111
|
+
|
|
112
|
+
// that pointer is not related
|
|
113
|
+
if (!pos) {
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
if (elem.dragStatus === 'dragging' || elem.dragStatus === 'stopped') {
|
|
118
|
+
// if a node is stopped manually we still need to reset events:
|
|
119
|
+
DD.justDragged = true;
|
|
120
|
+
Konva._mouseListenClick = false;
|
|
121
|
+
Konva._touchListenClick = false;
|
|
122
|
+
Konva._pointerListenClick = false;
|
|
123
|
+
elem.dragStatus = 'stopped';
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
const drawNode =
|
|
127
|
+
elem.node.getLayer() ||
|
|
128
|
+
((elem.node instanceof Konva['Stage'] && elem.node) as any);
|
|
129
|
+
|
|
130
|
+
if (drawNode && drawNodes.indexOf(drawNode) === -1) {
|
|
131
|
+
drawNodes.push(drawNode);
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
// draw in a sync way
|
|
135
|
+
// because mousemove event may trigger BEFORE batch draw is called
|
|
136
|
+
// but as we have not hit canvas updated yet, it will trigger incorrect mouseover/mouseout events
|
|
137
|
+
drawNodes.forEach((drawNode) => {
|
|
138
|
+
drawNode.draw();
|
|
139
|
+
});
|
|
140
|
+
},
|
|
141
|
+
_endDragAfter(evt) {
|
|
142
|
+
DD._dragElements.forEach((elem, key) => {
|
|
143
|
+
if (elem.dragStatus === 'stopped') {
|
|
144
|
+
elem.node.fire(
|
|
145
|
+
'dragend',
|
|
146
|
+
{
|
|
147
|
+
type: 'dragend',
|
|
148
|
+
target: elem.node,
|
|
149
|
+
evt: evt,
|
|
150
|
+
},
|
|
151
|
+
true
|
|
152
|
+
);
|
|
153
|
+
}
|
|
154
|
+
if (elem.dragStatus !== 'dragging') {
|
|
155
|
+
DD._dragElements.delete(key);
|
|
156
|
+
}
|
|
157
|
+
});
|
|
158
|
+
},
|
|
159
|
+
};
|
|
160
|
+
|
|
161
|
+
if (Konva.isBrowser) {
|
|
162
|
+
window.addEventListener('mouseup', DD._endDragBefore, true);
|
|
163
|
+
window.addEventListener('touchend', DD._endDragBefore, true);
|
|
164
|
+
// add touchcancel to fix this: https://github.com/konvajs/konva/issues/1843
|
|
165
|
+
window.addEventListener('touchcancel', DD._endDragBefore, true);
|
|
166
|
+
|
|
167
|
+
window.addEventListener('mousemove', DD._drag);
|
|
168
|
+
window.addEventListener('touchmove', DD._drag);
|
|
169
|
+
|
|
170
|
+
window.addEventListener('mouseup', DD._endDragAfter, false);
|
|
171
|
+
window.addEventListener('touchend', DD._endDragAfter, false);
|
|
172
|
+
window.addEventListener('touchcancel', DD._endDragAfter, false);
|
|
173
|
+
}
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import type { Node } from './Node.ts';
|
|
2
|
+
import type { GetSet } from './types.ts';
|
|
3
|
+
import { Util } from './Util.ts';
|
|
4
|
+
import { getComponentValidator } from './Validators.ts';
|
|
5
|
+
|
|
6
|
+
const GET = 'get';
|
|
7
|
+
const SET = 'set';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Enforces that a type is a string.
|
|
11
|
+
*/
|
|
12
|
+
type EnforceString<T> = T extends string ? T : never;
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Represents a class.
|
|
16
|
+
*/
|
|
17
|
+
type Constructor = abstract new (...args: any) => any;
|
|
18
|
+
|
|
19
|
+
/**
|
|
20
|
+
* An attribute of an instance of the provided class. Attributes names be strings.
|
|
21
|
+
*/
|
|
22
|
+
type Attr<T extends Constructor> = EnforceString<keyof InstanceType<T>>;
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* A function that is called after a setter is called.
|
|
26
|
+
*/
|
|
27
|
+
type AfterFunc<T extends Constructor> = (this: InstanceType<T>) => void;
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Extracts the type of a GetSet.
|
|
31
|
+
*/
|
|
32
|
+
type ExtractGetSet<T> = T extends GetSet<infer U, any> ? U : never;
|
|
33
|
+
|
|
34
|
+
/**
|
|
35
|
+
* Extracts the type of a GetSet class attribute.
|
|
36
|
+
*/
|
|
37
|
+
type Value<T extends Constructor, U extends Attr<T>> = ExtractGetSet<
|
|
38
|
+
InstanceType<T>[U]
|
|
39
|
+
>;
|
|
40
|
+
|
|
41
|
+
/**
|
|
42
|
+
* A function that validates a value.
|
|
43
|
+
*/
|
|
44
|
+
type ValidatorFunc<T> = (val: ExtractGetSet<T>, attr: string) => T;
|
|
45
|
+
|
|
46
|
+
/**
|
|
47
|
+
* Extracts the "components" (keys) of a GetSet value. The value must be an object.
|
|
48
|
+
*/
|
|
49
|
+
type ExtractComponents<T extends Constructor, U extends Attr<T>> =
|
|
50
|
+
Value<T, U> extends Record<string, any>
|
|
51
|
+
? EnforceString<keyof Value<T, U>>[]
|
|
52
|
+
: never;
|
|
53
|
+
|
|
54
|
+
export const Factory = {
|
|
55
|
+
addGetterSetter<T extends Constructor, U extends Attr<T>>(
|
|
56
|
+
constructor: T,
|
|
57
|
+
attr: U,
|
|
58
|
+
def?: Value<T, U>,
|
|
59
|
+
validator?: ValidatorFunc<Value<T, U>>,
|
|
60
|
+
after?: AfterFunc<T>
|
|
61
|
+
): void {
|
|
62
|
+
Factory.addGetter(constructor, attr, def);
|
|
63
|
+
Factory.addSetter(constructor, attr, validator, after);
|
|
64
|
+
Factory.addOverloadedGetterSetter(constructor, attr);
|
|
65
|
+
},
|
|
66
|
+
addGetter<T extends Constructor, U extends Attr<T>>(
|
|
67
|
+
constructor: T,
|
|
68
|
+
attr: U,
|
|
69
|
+
def?: Value<T, U>
|
|
70
|
+
) {
|
|
71
|
+
const method = GET + Util._capitalize(attr);
|
|
72
|
+
|
|
73
|
+
constructor.prototype[method] =
|
|
74
|
+
constructor.prototype[method] ||
|
|
75
|
+
function (this: Node) {
|
|
76
|
+
const val = this.attrs[attr];
|
|
77
|
+
return val === undefined ? def : val;
|
|
78
|
+
};
|
|
79
|
+
},
|
|
80
|
+
|
|
81
|
+
addSetter<T extends Constructor, U extends Attr<T>>(
|
|
82
|
+
constructor: T,
|
|
83
|
+
attr: U,
|
|
84
|
+
validator?: ValidatorFunc<Value<T, U>>,
|
|
85
|
+
after?: AfterFunc<T>
|
|
86
|
+
) {
|
|
87
|
+
const method = SET + Util._capitalize(attr);
|
|
88
|
+
|
|
89
|
+
if (!constructor.prototype[method]) {
|
|
90
|
+
Factory.overWriteSetter(constructor, attr, validator, after);
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
|
|
94
|
+
overWriteSetter<T extends Constructor, U extends Attr<T>>(
|
|
95
|
+
constructor: T,
|
|
96
|
+
attr: U,
|
|
97
|
+
validator?: ValidatorFunc<Value<T, U>>,
|
|
98
|
+
after?: AfterFunc<T>
|
|
99
|
+
) {
|
|
100
|
+
const method = SET + Util._capitalize(attr);
|
|
101
|
+
constructor.prototype[method] = function (val) {
|
|
102
|
+
if (validator && val !== undefined && val !== null) {
|
|
103
|
+
val = validator.call(this, val, attr);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
this._setAttr(attr, val);
|
|
107
|
+
|
|
108
|
+
if (after) {
|
|
109
|
+
after.call(this);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
return this;
|
|
113
|
+
};
|
|
114
|
+
},
|
|
115
|
+
|
|
116
|
+
addComponentsGetterSetter<T extends Constructor, U extends Attr<T>>(
|
|
117
|
+
constructor: T,
|
|
118
|
+
attr: U,
|
|
119
|
+
components: ExtractComponents<T, U>,
|
|
120
|
+
validator?: ValidatorFunc<Value<T, U>>,
|
|
121
|
+
after?: AfterFunc<T>
|
|
122
|
+
) {
|
|
123
|
+
const len = components.length,
|
|
124
|
+
capitalize = Util._capitalize,
|
|
125
|
+
getter = GET + capitalize(attr),
|
|
126
|
+
setter = SET + capitalize(attr);
|
|
127
|
+
|
|
128
|
+
// getter
|
|
129
|
+
constructor.prototype[getter] = function () {
|
|
130
|
+
const ret: Record<string, any> = {};
|
|
131
|
+
|
|
132
|
+
for (let n = 0; n < len; n++) {
|
|
133
|
+
const component = components[n];
|
|
134
|
+
ret[component] = this.getAttr(attr + capitalize(component));
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
return ret;
|
|
138
|
+
};
|
|
139
|
+
|
|
140
|
+
const basicValidator = getComponentValidator(components);
|
|
141
|
+
|
|
142
|
+
// setter
|
|
143
|
+
constructor.prototype[setter] = function (val) {
|
|
144
|
+
const oldVal = this.attrs[attr];
|
|
145
|
+
|
|
146
|
+
if (validator) {
|
|
147
|
+
val = validator.call(this, val, attr);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
if (basicValidator) {
|
|
151
|
+
basicValidator.call(this, val, attr);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
for (const key in val) {
|
|
155
|
+
if (!val.hasOwnProperty(key)) {
|
|
156
|
+
continue;
|
|
157
|
+
}
|
|
158
|
+
this._setAttr(attr + capitalize(key), val[key]);
|
|
159
|
+
}
|
|
160
|
+
if (!val) {
|
|
161
|
+
components.forEach((component) => {
|
|
162
|
+
this._setAttr(attr + capitalize(component), undefined);
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
this._fireChangeEvent(attr, oldVal, val);
|
|
167
|
+
|
|
168
|
+
if (after) {
|
|
169
|
+
after.call(this);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
return this;
|
|
173
|
+
};
|
|
174
|
+
|
|
175
|
+
Factory.addOverloadedGetterSetter(constructor, attr);
|
|
176
|
+
},
|
|
177
|
+
addOverloadedGetterSetter<T extends Constructor, U extends Attr<T>>(
|
|
178
|
+
constructor: T,
|
|
179
|
+
attr: U
|
|
180
|
+
) {
|
|
181
|
+
const capitalizedAttr = Util._capitalize(attr),
|
|
182
|
+
setter = SET + capitalizedAttr,
|
|
183
|
+
getter = GET + capitalizedAttr;
|
|
184
|
+
|
|
185
|
+
constructor.prototype[attr] = function () {
|
|
186
|
+
// setting
|
|
187
|
+
if (arguments.length) {
|
|
188
|
+
this[setter](arguments[0]);
|
|
189
|
+
return this;
|
|
190
|
+
}
|
|
191
|
+
// getting
|
|
192
|
+
return this[getter]();
|
|
193
|
+
};
|
|
194
|
+
},
|
|
195
|
+
addDeprecatedGetterSetter<T extends Constructor, U extends Attr<T>>(
|
|
196
|
+
constructor: T,
|
|
197
|
+
attr: U,
|
|
198
|
+
def: Value<T, U>,
|
|
199
|
+
validator: ValidatorFunc<Value<T, U>>
|
|
200
|
+
) {
|
|
201
|
+
Util.error('Adding deprecated ' + attr);
|
|
202
|
+
|
|
203
|
+
const method = GET + Util._capitalize(attr);
|
|
204
|
+
|
|
205
|
+
const message =
|
|
206
|
+
attr +
|
|
207
|
+
' property is deprecated and will be removed soon. Look at Konva change log for more information.';
|
|
208
|
+
constructor.prototype[method] = function () {
|
|
209
|
+
Util.error(message);
|
|
210
|
+
const val = this.attrs[attr];
|
|
211
|
+
return val === undefined ? def : val;
|
|
212
|
+
};
|
|
213
|
+
Factory.addSetter(constructor, attr, validator, function () {
|
|
214
|
+
Util.error(message);
|
|
215
|
+
});
|
|
216
|
+
Factory.addOverloadedGetterSetter(constructor, attr);
|
|
217
|
+
},
|
|
218
|
+
backCompat<T extends Constructor>(
|
|
219
|
+
constructor: T,
|
|
220
|
+
methods: Record<string, string>
|
|
221
|
+
) {
|
|
222
|
+
Util.each(methods, function (oldMethodName, newMethodName) {
|
|
223
|
+
const method = constructor.prototype[newMethodName];
|
|
224
|
+
const oldGetter = GET + Util._capitalize(oldMethodName);
|
|
225
|
+
const oldSetter = SET + Util._capitalize(oldMethodName);
|
|
226
|
+
|
|
227
|
+
function deprecated(this: Node) {
|
|
228
|
+
method.apply(this, arguments);
|
|
229
|
+
Util.error(
|
|
230
|
+
'"' +
|
|
231
|
+
oldMethodName +
|
|
232
|
+
'" method is deprecated and will be removed soon. Use ""' +
|
|
233
|
+
newMethodName +
|
|
234
|
+
'" instead.'
|
|
235
|
+
);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
constructor.prototype[oldMethodName] = deprecated;
|
|
239
|
+
constructor.prototype[oldGetter] = deprecated;
|
|
240
|
+
constructor.prototype[oldSetter] = deprecated;
|
|
241
|
+
});
|
|
242
|
+
},
|
|
243
|
+
afterSetFilter(this: Node): void {
|
|
244
|
+
this._filterUpToDate = false;
|
|
245
|
+
},
|
|
246
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { Util } from './Util.ts';
|
|
2
|
+
import { Layer } from './Layer.ts';
|
|
3
|
+
import { _registerNode } from './Global.ts';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* FastLayer constructor. **DEPRECATED!** Please use `Konva.Layer({ listening: false})` instead. Layers are tied to their own canvas element and are used
|
|
7
|
+
* to contain shapes only. If you don't need node nesting, mouse and touch interactions,
|
|
8
|
+
* or event pub/sub, you should use FastLayer instead of Layer to create your layers.
|
|
9
|
+
* It renders about 2x faster than normal layers.
|
|
10
|
+
*
|
|
11
|
+
* @constructor
|
|
12
|
+
* @memberof Konva
|
|
13
|
+
* @augments Konva.Layer
|
|
14
|
+
@@containerParams
|
|
15
|
+
* @example
|
|
16
|
+
* var layer = new Konva.FastLayer();
|
|
17
|
+
*/
|
|
18
|
+
export class FastLayer extends Layer {
|
|
19
|
+
constructor(attrs) {
|
|
20
|
+
super(attrs);
|
|
21
|
+
this.listening(false);
|
|
22
|
+
Util.warn(
|
|
23
|
+
'Konva.Fast layer is deprecated. Please use "new Konva.Layer({ listening: false })" instead.'
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
FastLayer.prototype.nodeType = 'FastLayer';
|
|
29
|
+
_registerNode(FastLayer);
|
|
@@ -0,0 +1,210 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Konva JavaScript Framework v@@version
|
|
3
|
+
* http://konvajs.org/
|
|
4
|
+
* Licensed under the MIT
|
|
5
|
+
* Date: @@date
|
|
6
|
+
*
|
|
7
|
+
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
|
|
8
|
+
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
|
|
9
|
+
*
|
|
10
|
+
* @license
|
|
11
|
+
*/
|
|
12
|
+
const PI_OVER_180 = Math.PI / 180;
|
|
13
|
+
/**
|
|
14
|
+
* @namespace Konva
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
function detectBrowser() {
|
|
18
|
+
return (
|
|
19
|
+
typeof window !== 'undefined' &&
|
|
20
|
+
// browser case
|
|
21
|
+
({}.toString.call(window) === '[object Window]' ||
|
|
22
|
+
// electron case
|
|
23
|
+
{}.toString.call(window) === '[object global]')
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
declare const WorkerGlobalScope: any;
|
|
28
|
+
|
|
29
|
+
export const glob: any =
|
|
30
|
+
typeof global !== 'undefined'
|
|
31
|
+
? global
|
|
32
|
+
: typeof window !== 'undefined'
|
|
33
|
+
? window
|
|
34
|
+
: typeof WorkerGlobalScope !== 'undefined'
|
|
35
|
+
? self
|
|
36
|
+
: {};
|
|
37
|
+
|
|
38
|
+
export const Konva = {
|
|
39
|
+
_global: glob,
|
|
40
|
+
version: '@@version',
|
|
41
|
+
isBrowser: detectBrowser(),
|
|
42
|
+
isUnminified: /param/.test(function (param: any) {}.toString()),
|
|
43
|
+
dblClickWindow: 400,
|
|
44
|
+
getAngle(angle: number) {
|
|
45
|
+
return Konva.angleDeg ? angle * PI_OVER_180 : angle;
|
|
46
|
+
},
|
|
47
|
+
enableTrace: false,
|
|
48
|
+
pointerEventsEnabled: true,
|
|
49
|
+
/**
|
|
50
|
+
* Should Konva automatically update canvas on any changes. Default is true.
|
|
51
|
+
* @property autoDrawEnabled
|
|
52
|
+
* @default true
|
|
53
|
+
* @name autoDrawEnabled
|
|
54
|
+
* @memberof Konva
|
|
55
|
+
* @example
|
|
56
|
+
* Konva.autoDrawEnabled = true;
|
|
57
|
+
*/
|
|
58
|
+
autoDrawEnabled: true,
|
|
59
|
+
/**
|
|
60
|
+
* Should we enable hit detection while dragging? For performance reasons, by default it is false.
|
|
61
|
+
* But on some rare cases you want to see hit graph and check intersections. Just set it to true.
|
|
62
|
+
* @property hitOnDragEnabled
|
|
63
|
+
* @default false
|
|
64
|
+
* @name hitOnDragEnabled
|
|
65
|
+
* @memberof Konva
|
|
66
|
+
* @example
|
|
67
|
+
* Konva.hitOnDragEnabled = true;
|
|
68
|
+
*/
|
|
69
|
+
hitOnDragEnabled: false,
|
|
70
|
+
/**
|
|
71
|
+
* Should we capture touch events and bind them to the touchstart target? That is how it works on DOM elements.
|
|
72
|
+
* The case: we touchstart on div1, then touchmove out of that element into another element div2.
|
|
73
|
+
* DOM will continue trigger touchmove events on div1 (not div2). Because events are "captured" into initial target.
|
|
74
|
+
* By default Konva do not do that and will trigger touchmove on another element, while pointer is moving.
|
|
75
|
+
* @property capturePointerEventsEnabled
|
|
76
|
+
* @default false
|
|
77
|
+
* @name capturePointerEventsEnabled
|
|
78
|
+
* @memberof Konva
|
|
79
|
+
* @example
|
|
80
|
+
* Konva.capturePointerEventsEnabled = true;
|
|
81
|
+
*/
|
|
82
|
+
capturePointerEventsEnabled: false,
|
|
83
|
+
|
|
84
|
+
_mouseListenClick: false,
|
|
85
|
+
_touchListenClick: false,
|
|
86
|
+
_pointerListenClick: false,
|
|
87
|
+
_mouseInDblClickWindow: false,
|
|
88
|
+
_touchInDblClickWindow: false,
|
|
89
|
+
_pointerInDblClickWindow: false,
|
|
90
|
+
_mouseDblClickPointerId: null,
|
|
91
|
+
_touchDblClickPointerId: null,
|
|
92
|
+
_pointerDblClickPointerId: null,
|
|
93
|
+
_renderBackend: 'web', // web, node-canvas, skia-canvas
|
|
94
|
+
/**
|
|
95
|
+
* Use legacy text rendering. with "middle" baseline by default.
|
|
96
|
+
* @property legacyTextRendering
|
|
97
|
+
* @default false
|
|
98
|
+
* @name legacyTextRendering
|
|
99
|
+
* @memberof Konva
|
|
100
|
+
* @example
|
|
101
|
+
* Konva.legacyTextRendering = true;
|
|
102
|
+
*/
|
|
103
|
+
legacyTextRendering: false,
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Global pixel ratio configuration. KonvaJS automatically detect pixel ratio of current device.
|
|
107
|
+
* But you may override such property, if you want to use your value. Set this value before any components initializations.
|
|
108
|
+
* @property pixelRatio
|
|
109
|
+
* @default undefined
|
|
110
|
+
* @name pixelRatio
|
|
111
|
+
* @memberof Konva
|
|
112
|
+
* @example
|
|
113
|
+
* // before any Konva code:
|
|
114
|
+
* Konva.pixelRatio = 1;
|
|
115
|
+
*/
|
|
116
|
+
pixelRatio: (typeof window !== 'undefined' && window.devicePixelRatio) || 1,
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Drag distance property. If you start to drag a node you may want to wait until pointer is moved to some distance from start point,
|
|
120
|
+
* only then start dragging. Default is 3px.
|
|
121
|
+
* @property dragDistance
|
|
122
|
+
* @default 0
|
|
123
|
+
* @memberof Konva
|
|
124
|
+
* @example
|
|
125
|
+
* Konva.dragDistance = 10;
|
|
126
|
+
*/
|
|
127
|
+
dragDistance: 3,
|
|
128
|
+
/**
|
|
129
|
+
* Use degree values for angle properties. You may set this property to false if you want to use radian values.
|
|
130
|
+
* @property angleDeg
|
|
131
|
+
* @default true
|
|
132
|
+
* @memberof Konva
|
|
133
|
+
* @example
|
|
134
|
+
* node.rotation(45); // 45 degrees
|
|
135
|
+
* Konva.angleDeg = false;
|
|
136
|
+
* node.rotation(Math.PI / 2); // PI/2 radian
|
|
137
|
+
*/
|
|
138
|
+
angleDeg: true,
|
|
139
|
+
/**
|
|
140
|
+
* Show different warnings about errors or wrong API usage
|
|
141
|
+
* @property showWarnings
|
|
142
|
+
* @default true
|
|
143
|
+
* @memberof Konva
|
|
144
|
+
* @example
|
|
145
|
+
* Konva.showWarnings = false;
|
|
146
|
+
*/
|
|
147
|
+
showWarnings: true,
|
|
148
|
+
|
|
149
|
+
/**
|
|
150
|
+
* Configure what mouse buttons can be used for drag and drop.
|
|
151
|
+
* Default value is [0] - only left mouse button.
|
|
152
|
+
* @property dragButtons
|
|
153
|
+
* @default true
|
|
154
|
+
* @memberof Konva
|
|
155
|
+
* @example
|
|
156
|
+
* // enable left and right mouse buttons
|
|
157
|
+
* Konva.dragButtons = [0, 2];
|
|
158
|
+
*/
|
|
159
|
+
dragButtons: [0, 1],
|
|
160
|
+
|
|
161
|
+
/**
|
|
162
|
+
* returns whether or not drag and drop is currently active
|
|
163
|
+
* @method
|
|
164
|
+
* @memberof Konva
|
|
165
|
+
*/
|
|
166
|
+
isDragging(): boolean {
|
|
167
|
+
return Konva['DD'].isDragging;
|
|
168
|
+
},
|
|
169
|
+
isTransforming(): boolean {
|
|
170
|
+
return Konva['Transformer']?.isTransforming() ?? false;
|
|
171
|
+
},
|
|
172
|
+
/**
|
|
173
|
+
* returns whether or not a drag and drop operation is ready, but may
|
|
174
|
+
* not necessarily have started
|
|
175
|
+
* @method
|
|
176
|
+
* @memberof Konva
|
|
177
|
+
*/
|
|
178
|
+
isDragReady() {
|
|
179
|
+
return !!Konva['DD'].node;
|
|
180
|
+
},
|
|
181
|
+
/**
|
|
182
|
+
* Should Konva release canvas elements on destroy. Default is true.
|
|
183
|
+
* Useful to avoid memory leak issues in Safari on macOS/iOS.
|
|
184
|
+
* @property releaseCanvasOnDestroy
|
|
185
|
+
* @default true
|
|
186
|
+
* @name releaseCanvasOnDestroy
|
|
187
|
+
* @memberof Konva
|
|
188
|
+
* @example
|
|
189
|
+
* Konva.releaseCanvasOnDestroy = true;
|
|
190
|
+
*/
|
|
191
|
+
releaseCanvasOnDestroy: true,
|
|
192
|
+
// user agent
|
|
193
|
+
document: glob.document,
|
|
194
|
+
// insert Konva into global namespace (window)
|
|
195
|
+
// it is required for npm packages
|
|
196
|
+
_injectGlobal(Konva) {
|
|
197
|
+
if (typeof glob.Konva !== 'undefined') {
|
|
198
|
+
console.error(
|
|
199
|
+
'Severa Konva instances detected. It is not recommended to use multiple Konva instances in the same environment.'
|
|
200
|
+
);
|
|
201
|
+
}
|
|
202
|
+
glob.Konva = Konva;
|
|
203
|
+
},
|
|
204
|
+
};
|
|
205
|
+
|
|
206
|
+
export const _registerNode = (NodeClass: any) => {
|
|
207
|
+
Konva[NodeClass.prototype.getClassName()] = NodeClass;
|
|
208
|
+
};
|
|
209
|
+
|
|
210
|
+
Konva._injectGlobal(Konva);
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Util } from './Util.ts';
|
|
2
|
+
import type { ContainerConfig } from './Container.ts';
|
|
3
|
+
import { Container } from './Container.ts';
|
|
4
|
+
import { _registerNode } from './Global.ts';
|
|
5
|
+
import type { Node } from './Node.ts';
|
|
6
|
+
import type { Shape } from './Shape.ts';
|
|
7
|
+
|
|
8
|
+
export interface GroupConfig extends ContainerConfig {}
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Group constructor. Groups are used to contain shapes or other groups.
|
|
12
|
+
* @constructor
|
|
13
|
+
* @memberof Konva
|
|
14
|
+
* @augments Konva.Container
|
|
15
|
+
* @param {Object} config
|
|
16
|
+
* @@nodeParams
|
|
17
|
+
* @@containerParams
|
|
18
|
+
* @example
|
|
19
|
+
* var group = new Konva.Group();
|
|
20
|
+
*/
|
|
21
|
+
export class Group extends Container<Group | Shape> {
|
|
22
|
+
_validateAdd(child: Node) {
|
|
23
|
+
const type = child.getType();
|
|
24
|
+
if (type !== 'Group' && type !== 'Shape') {
|
|
25
|
+
Util.throw('You may only add groups and shapes to groups.');
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
Group.prototype.nodeType = 'Group';
|
|
31
|
+
_registerNode(Group);
|