@leapfrog/interactive-canvas 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/interactive-canvas.es.js +56 -39
- package/dist/interactive-canvas.js +56 -39
- package/dist/mutator/mutable-position.interface.d.ts +30 -0
- package/dist/object/abstract-canvas-object.d.ts +35 -0
- package/dist/object/impl/horizontal-rule.d.ts +0 -5
- package/dist/object/impl/image.d.ts +0 -5
- package/dist/object/impl/rectangle.d.ts +0 -5
- package/dist/object/impl/text.d.ts +0 -5
- package/dist/object/impl/vertical-rule.d.ts +0 -5
- package/dist/types/position.interface.d.ts +3 -0
- package/package.json +1 -1
|
@@ -844,6 +844,55 @@ var AbstractCanvasObject = /** @class */ (function () {
|
|
|
844
844
|
this.canvas.notifyObjectListChanged();
|
|
845
845
|
this.updateFabricObjectBehavior();
|
|
846
846
|
};
|
|
847
|
+
/**
|
|
848
|
+
* @override
|
|
849
|
+
* @inheritDoc
|
|
850
|
+
*/
|
|
851
|
+
AbstractCanvasObject.prototype.setLeft = function (left) {
|
|
852
|
+
this.setPosition({ left: left });
|
|
853
|
+
};
|
|
854
|
+
/**
|
|
855
|
+
* @override
|
|
856
|
+
* @inheritDoc
|
|
857
|
+
*/
|
|
858
|
+
AbstractCanvasObject.prototype.setTop = function (top) {
|
|
859
|
+
this.setPosition({ top: top });
|
|
860
|
+
};
|
|
861
|
+
/**
|
|
862
|
+
* @override
|
|
863
|
+
* @inheritDoc
|
|
864
|
+
*/
|
|
865
|
+
AbstractCanvasObject.prototype.setHeight = function (height) {
|
|
866
|
+
this.setPosition({ height: height });
|
|
867
|
+
};
|
|
868
|
+
/**
|
|
869
|
+
* @override
|
|
870
|
+
* @inheritDoc
|
|
871
|
+
*/
|
|
872
|
+
AbstractCanvasObject.prototype.setWidth = function (width) {
|
|
873
|
+
this.setPosition({ width: width });
|
|
874
|
+
};
|
|
875
|
+
/**
|
|
876
|
+
* @override
|
|
877
|
+
* @inheritDoc
|
|
878
|
+
*/
|
|
879
|
+
AbstractCanvasObject.prototype.setAngle = function (angle) {
|
|
880
|
+
this.setPosition({ angle: angle });
|
|
881
|
+
};
|
|
882
|
+
/**
|
|
883
|
+
* @override
|
|
884
|
+
* @inheritDoc
|
|
885
|
+
*/
|
|
886
|
+
AbstractCanvasObject.prototype.setScaleX = function (scale) {
|
|
887
|
+
this.setPosition({ scaleX: scale });
|
|
888
|
+
};
|
|
889
|
+
/**
|
|
890
|
+
* @override
|
|
891
|
+
* @inheritDoc
|
|
892
|
+
*/
|
|
893
|
+
AbstractCanvasObject.prototype.setScaleY = function (scale) {
|
|
894
|
+
this.setPosition({ scaleY: scale });
|
|
895
|
+
};
|
|
847
896
|
/**
|
|
848
897
|
* Get the underlying fabric object.
|
|
849
898
|
* (Internal use only, do not expose this outside the canvas module).
|
|
@@ -861,6 +910,13 @@ var AbstractCanvasObject = /** @class */ (function () {
|
|
|
861
910
|
this.fabricObject.set({ width: position.width / scale.x });
|
|
862
911
|
if (position.height != undefined)
|
|
863
912
|
this.fabricObject.set({ height: position.height / scale.y });
|
|
913
|
+
if (position.angle != undefined)
|
|
914
|
+
this.fabricObject.set({ angle: position.angle });
|
|
915
|
+
if (position.scaleX != undefined)
|
|
916
|
+
this.fabricObject.set({ scaleX: position.scaleX });
|
|
917
|
+
if (position.scaleY != undefined)
|
|
918
|
+
this.fabricObject.set({ scaleY: position.scaleY });
|
|
919
|
+
this.canvas.notifyObjectListChanged();
|
|
864
920
|
};
|
|
865
921
|
AbstractCanvasObject.prototype.setCoords = function () {
|
|
866
922
|
this.fabricObject.setCoords();
|
|
@@ -1282,14 +1338,6 @@ var HorizontalRule = /** @class */ (function (_super) {
|
|
|
1282
1338
|
HorizontalRule.prototype.centerVertically = function () {
|
|
1283
1339
|
_super.prototype.centerVerticallyInternal.call(this);
|
|
1284
1340
|
};
|
|
1285
|
-
/**
|
|
1286
|
-
* @override
|
|
1287
|
-
* @inheritDoc
|
|
1288
|
-
*/
|
|
1289
|
-
HorizontalRule.prototype.setHeight = function (height) {
|
|
1290
|
-
this.setPosition({ height: height });
|
|
1291
|
-
this.canvas.notifyObjectListChanged();
|
|
1292
|
-
};
|
|
1293
1341
|
/**
|
|
1294
1342
|
* @override
|
|
1295
1343
|
* @inheritDoc
|
|
@@ -1394,14 +1442,6 @@ var Image = /** @class */ (function (_super) {
|
|
|
1394
1442
|
Image.prototype.centerVertically = function () {
|
|
1395
1443
|
_super.prototype.centerVerticallyInternal.call(this);
|
|
1396
1444
|
};
|
|
1397
|
-
/**
|
|
1398
|
-
* @override
|
|
1399
|
-
* @inheritDoc
|
|
1400
|
-
*/
|
|
1401
|
-
Image.prototype.setHeight = function (height) {
|
|
1402
|
-
this.setPosition({ height: height });
|
|
1403
|
-
this.canvas.notifyObjectListChanged();
|
|
1404
|
-
};
|
|
1405
1445
|
/**
|
|
1406
1446
|
* @override
|
|
1407
1447
|
* @inheritDoc
|
|
@@ -1536,14 +1576,6 @@ var Rectangle = /** @class */ (function (_super) {
|
|
|
1536
1576
|
Rectangle.prototype.centerVertically = function () {
|
|
1537
1577
|
_super.prototype.centerVerticallyInternal.call(this);
|
|
1538
1578
|
};
|
|
1539
|
-
/**
|
|
1540
|
-
* @override
|
|
1541
|
-
* @inheritDoc
|
|
1542
|
-
*/
|
|
1543
|
-
Rectangle.prototype.setHeight = function (height) {
|
|
1544
|
-
this.setPosition({ height: height });
|
|
1545
|
-
this.canvas.notifyObjectListChanged();
|
|
1546
|
-
};
|
|
1547
1579
|
/**
|
|
1548
1580
|
* @override
|
|
1549
1581
|
* @inheritDoc
|
|
@@ -1837,13 +1869,6 @@ var Text = /** @class */ (function (_super) {
|
|
|
1837
1869
|
Text.prototype.centerVertically = function () {
|
|
1838
1870
|
_super.prototype.centerVerticallyInternal.call(this);
|
|
1839
1871
|
};
|
|
1840
|
-
/**
|
|
1841
|
-
* @override
|
|
1842
|
-
* @inheritDoc
|
|
1843
|
-
*/
|
|
1844
|
-
Text.prototype.setHeight = function (height) {
|
|
1845
|
-
//no-op
|
|
1846
|
-
};
|
|
1847
1872
|
/**
|
|
1848
1873
|
* @override
|
|
1849
1874
|
* @inheritDoc
|
|
@@ -2235,14 +2260,6 @@ var VerticalRule = /** @class */ (function (_super) {
|
|
|
2235
2260
|
VerticalRule.prototype.centerVertically = function () {
|
|
2236
2261
|
_super.prototype.centerVerticallyInternal.call(this);
|
|
2237
2262
|
};
|
|
2238
|
-
/**
|
|
2239
|
-
* @override
|
|
2240
|
-
* @inheritDoc
|
|
2241
|
-
*/
|
|
2242
|
-
VerticalRule.prototype.setHeight = function (height) {
|
|
2243
|
-
this.setPosition({ height: height });
|
|
2244
|
-
this.canvas.notifyObjectListChanged();
|
|
2245
|
-
};
|
|
2246
2263
|
/**
|
|
2247
2264
|
* @override
|
|
2248
2265
|
* @inheritDoc
|
|
@@ -846,6 +846,55 @@ var AbstractCanvasObject = /** @class */ (function () {
|
|
|
846
846
|
this.canvas.notifyObjectListChanged();
|
|
847
847
|
this.updateFabricObjectBehavior();
|
|
848
848
|
};
|
|
849
|
+
/**
|
|
850
|
+
* @override
|
|
851
|
+
* @inheritDoc
|
|
852
|
+
*/
|
|
853
|
+
AbstractCanvasObject.prototype.setLeft = function (left) {
|
|
854
|
+
this.setPosition({ left: left });
|
|
855
|
+
};
|
|
856
|
+
/**
|
|
857
|
+
* @override
|
|
858
|
+
* @inheritDoc
|
|
859
|
+
*/
|
|
860
|
+
AbstractCanvasObject.prototype.setTop = function (top) {
|
|
861
|
+
this.setPosition({ top: top });
|
|
862
|
+
};
|
|
863
|
+
/**
|
|
864
|
+
* @override
|
|
865
|
+
* @inheritDoc
|
|
866
|
+
*/
|
|
867
|
+
AbstractCanvasObject.prototype.setHeight = function (height) {
|
|
868
|
+
this.setPosition({ height: height });
|
|
869
|
+
};
|
|
870
|
+
/**
|
|
871
|
+
* @override
|
|
872
|
+
* @inheritDoc
|
|
873
|
+
*/
|
|
874
|
+
AbstractCanvasObject.prototype.setWidth = function (width) {
|
|
875
|
+
this.setPosition({ width: width });
|
|
876
|
+
};
|
|
877
|
+
/**
|
|
878
|
+
* @override
|
|
879
|
+
* @inheritDoc
|
|
880
|
+
*/
|
|
881
|
+
AbstractCanvasObject.prototype.setAngle = function (angle) {
|
|
882
|
+
this.setPosition({ angle: angle });
|
|
883
|
+
};
|
|
884
|
+
/**
|
|
885
|
+
* @override
|
|
886
|
+
* @inheritDoc
|
|
887
|
+
*/
|
|
888
|
+
AbstractCanvasObject.prototype.setScaleX = function (scale) {
|
|
889
|
+
this.setPosition({ scaleX: scale });
|
|
890
|
+
};
|
|
891
|
+
/**
|
|
892
|
+
* @override
|
|
893
|
+
* @inheritDoc
|
|
894
|
+
*/
|
|
895
|
+
AbstractCanvasObject.prototype.setScaleY = function (scale) {
|
|
896
|
+
this.setPosition({ scaleY: scale });
|
|
897
|
+
};
|
|
849
898
|
/**
|
|
850
899
|
* Get the underlying fabric object.
|
|
851
900
|
* (Internal use only, do not expose this outside the canvas module).
|
|
@@ -863,6 +912,13 @@ var AbstractCanvasObject = /** @class */ (function () {
|
|
|
863
912
|
this.fabricObject.set({ width: position.width / scale.x });
|
|
864
913
|
if (position.height != undefined)
|
|
865
914
|
this.fabricObject.set({ height: position.height / scale.y });
|
|
915
|
+
if (position.angle != undefined)
|
|
916
|
+
this.fabricObject.set({ angle: position.angle });
|
|
917
|
+
if (position.scaleX != undefined)
|
|
918
|
+
this.fabricObject.set({ scaleX: position.scaleX });
|
|
919
|
+
if (position.scaleY != undefined)
|
|
920
|
+
this.fabricObject.set({ scaleY: position.scaleY });
|
|
921
|
+
this.canvas.notifyObjectListChanged();
|
|
866
922
|
};
|
|
867
923
|
AbstractCanvasObject.prototype.setCoords = function () {
|
|
868
924
|
this.fabricObject.setCoords();
|
|
@@ -1284,14 +1340,6 @@ var HorizontalRule = /** @class */ (function (_super) {
|
|
|
1284
1340
|
HorizontalRule.prototype.centerVertically = function () {
|
|
1285
1341
|
_super.prototype.centerVerticallyInternal.call(this);
|
|
1286
1342
|
};
|
|
1287
|
-
/**
|
|
1288
|
-
* @override
|
|
1289
|
-
* @inheritDoc
|
|
1290
|
-
*/
|
|
1291
|
-
HorizontalRule.prototype.setHeight = function (height) {
|
|
1292
|
-
this.setPosition({ height: height });
|
|
1293
|
-
this.canvas.notifyObjectListChanged();
|
|
1294
|
-
};
|
|
1295
1343
|
/**
|
|
1296
1344
|
* @override
|
|
1297
1345
|
* @inheritDoc
|
|
@@ -1396,14 +1444,6 @@ var Image = /** @class */ (function (_super) {
|
|
|
1396
1444
|
Image.prototype.centerVertically = function () {
|
|
1397
1445
|
_super.prototype.centerVerticallyInternal.call(this);
|
|
1398
1446
|
};
|
|
1399
|
-
/**
|
|
1400
|
-
* @override
|
|
1401
|
-
* @inheritDoc
|
|
1402
|
-
*/
|
|
1403
|
-
Image.prototype.setHeight = function (height) {
|
|
1404
|
-
this.setPosition({ height: height });
|
|
1405
|
-
this.canvas.notifyObjectListChanged();
|
|
1406
|
-
};
|
|
1407
1447
|
/**
|
|
1408
1448
|
* @override
|
|
1409
1449
|
* @inheritDoc
|
|
@@ -1538,14 +1578,6 @@ var Rectangle = /** @class */ (function (_super) {
|
|
|
1538
1578
|
Rectangle.prototype.centerVertically = function () {
|
|
1539
1579
|
_super.prototype.centerVerticallyInternal.call(this);
|
|
1540
1580
|
};
|
|
1541
|
-
/**
|
|
1542
|
-
* @override
|
|
1543
|
-
* @inheritDoc
|
|
1544
|
-
*/
|
|
1545
|
-
Rectangle.prototype.setHeight = function (height) {
|
|
1546
|
-
this.setPosition({ height: height });
|
|
1547
|
-
this.canvas.notifyObjectListChanged();
|
|
1548
|
-
};
|
|
1549
1581
|
/**
|
|
1550
1582
|
* @override
|
|
1551
1583
|
* @inheritDoc
|
|
@@ -1839,13 +1871,6 @@ var Text = /** @class */ (function (_super) {
|
|
|
1839
1871
|
Text.prototype.centerVertically = function () {
|
|
1840
1872
|
_super.prototype.centerVerticallyInternal.call(this);
|
|
1841
1873
|
};
|
|
1842
|
-
/**
|
|
1843
|
-
* @override
|
|
1844
|
-
* @inheritDoc
|
|
1845
|
-
*/
|
|
1846
|
-
Text.prototype.setHeight = function (height) {
|
|
1847
|
-
//no-op
|
|
1848
|
-
};
|
|
1849
1874
|
/**
|
|
1850
1875
|
* @override
|
|
1851
1876
|
* @inheritDoc
|
|
@@ -2237,14 +2262,6 @@ var VerticalRule = /** @class */ (function (_super) {
|
|
|
2237
2262
|
VerticalRule.prototype.centerVertically = function () {
|
|
2238
2263
|
_super.prototype.centerVerticallyInternal.call(this);
|
|
2239
2264
|
};
|
|
2240
|
-
/**
|
|
2241
|
-
* @override
|
|
2242
|
-
* @inheritDoc
|
|
2243
|
-
*/
|
|
2244
|
-
VerticalRule.prototype.setHeight = function (height) {
|
|
2245
|
-
this.setPosition({ height: height });
|
|
2246
|
-
this.canvas.notifyObjectListChanged();
|
|
2247
|
-
};
|
|
2248
2265
|
/**
|
|
2249
2266
|
* @override
|
|
2250
2267
|
* @inheritDoc
|
|
@@ -8,11 +8,41 @@ export interface IMutablePosition extends ICanvasObject {
|
|
|
8
8
|
* Center the object vertically on the canvas.
|
|
9
9
|
*/
|
|
10
10
|
centerVertically(): void;
|
|
11
|
+
/**
|
|
12
|
+
* Set the left value of the element.
|
|
13
|
+
* @param left New left value.
|
|
14
|
+
*/
|
|
15
|
+
setLeft(left: number): void;
|
|
16
|
+
/**
|
|
17
|
+
* Set the top value of the element.
|
|
18
|
+
* @param top New top value.
|
|
19
|
+
*/
|
|
20
|
+
setTop(top: number): void;
|
|
11
21
|
/**
|
|
12
22
|
* Set the height of the element.
|
|
13
23
|
* @param height New height.
|
|
14
24
|
*/
|
|
15
25
|
setHeight(height: number): void;
|
|
26
|
+
/**
|
|
27
|
+
* Set the width of the element.
|
|
28
|
+
* @param width New width.
|
|
29
|
+
*/
|
|
30
|
+
setWidth(width: number): void;
|
|
31
|
+
/**
|
|
32
|
+
* Set the angle of the element.
|
|
33
|
+
* @param angle New angle.
|
|
34
|
+
*/
|
|
35
|
+
setAngle(angle: number): void;
|
|
36
|
+
/**
|
|
37
|
+
* Set the x scale of the element.
|
|
38
|
+
* @param scale New scale.
|
|
39
|
+
*/
|
|
40
|
+
setScaleX(scale: number): void;
|
|
41
|
+
/**
|
|
42
|
+
* Set the y scale of the element.
|
|
43
|
+
* @param scale New scale.
|
|
44
|
+
*/
|
|
45
|
+
setScaleY(scale: number): void;
|
|
16
46
|
/**
|
|
17
47
|
* Nudge the object upward.
|
|
18
48
|
*/
|
|
@@ -123,6 +123,41 @@ export declare abstract class AbstractCanvasObject<T extends Object> implements
|
|
|
123
123
|
* @inheritDoc
|
|
124
124
|
*/
|
|
125
125
|
setPinToBottom(value?: boolean): void;
|
|
126
|
+
/**
|
|
127
|
+
* @override
|
|
128
|
+
* @inheritDoc
|
|
129
|
+
*/
|
|
130
|
+
setLeft(left: number): void;
|
|
131
|
+
/**
|
|
132
|
+
* @override
|
|
133
|
+
* @inheritDoc
|
|
134
|
+
*/
|
|
135
|
+
setTop(top: number): void;
|
|
136
|
+
/**
|
|
137
|
+
* @override
|
|
138
|
+
* @inheritDoc
|
|
139
|
+
*/
|
|
140
|
+
setHeight(height: number): void;
|
|
141
|
+
/**
|
|
142
|
+
* @override
|
|
143
|
+
* @inheritDoc
|
|
144
|
+
*/
|
|
145
|
+
setWidth(width: number): void;
|
|
146
|
+
/**
|
|
147
|
+
* @override
|
|
148
|
+
* @inheritDoc
|
|
149
|
+
*/
|
|
150
|
+
setAngle(angle: number): void;
|
|
151
|
+
/**
|
|
152
|
+
* @override
|
|
153
|
+
* @inheritDoc
|
|
154
|
+
*/
|
|
155
|
+
setScaleX(scale: number): void;
|
|
156
|
+
/**
|
|
157
|
+
* @override
|
|
158
|
+
* @inheritDoc
|
|
159
|
+
*/
|
|
160
|
+
setScaleY(scale: number): void;
|
|
126
161
|
/**
|
|
127
162
|
* Get the underlying fabric object.
|
|
128
163
|
* (Internal use only, do not expose this outside the canvas module).
|
|
@@ -157,11 +157,6 @@ export declare class Text extends AbstractCanvasObject<fabric.Textbox> implement
|
|
|
157
157
|
* @inheritDoc
|
|
158
158
|
*/
|
|
159
159
|
centerVertically(): void;
|
|
160
|
-
/**
|
|
161
|
-
* @override
|
|
162
|
-
* @inheritDoc
|
|
163
|
-
*/
|
|
164
|
-
setHeight(height: number): void;
|
|
165
160
|
/**
|
|
166
161
|
* @override
|
|
167
162
|
* @inheritDoc
|