nzk-react-components 0.4.5 → 0.4.6
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/assets/icons/awards.svg +14 -0
- package/dist/assets/icons/awards.svg.js +89 -0
- package/dist/assets/icons/awards.svg.js.map +1 -0
- package/dist/components/Icon/icons.d.ts +1 -0
- package/dist/components/Icon/icons.js +2 -0
- package/dist/components/Icon/icons.js.map +1 -1
- package/package.json +1 -1
- package/dist/components/DrawingTool/DrawingTool.d.ts +0 -29
- package/dist/components/DrawingTool/DrawingTool.js +0 -277
- package/dist/components/DrawingTool/DrawingTool.js.map +0 -1
- package/dist/components/DrawingTool/DrawingTool.stories.d.ts +0 -6
- package/dist/components/DrawingTool/DrawingTool.styles.d.ts +0 -41
- package/dist/components/DrawingTool/DrawingTool.styles.js +0 -54
- package/dist/components/DrawingTool/DrawingTool.styles.js.map +0 -1
- package/dist/components/DrawingTool/DrawingToolProvider.d.ts +0 -56
- package/dist/components/DrawingTool/DrawingToolProvider.js +0 -182
- package/dist/components/DrawingTool/DrawingToolProvider.js.map +0 -1
- package/dist/components/DrawingTool/components/ColourToolbar/ColourToolbar.d.ts +0 -21
- package/dist/components/DrawingTool/components/ColourToolbar/ColourToolbar.js +0 -89
- package/dist/components/DrawingTool/components/ColourToolbar/ColourToolbar.js.map +0 -1
- package/dist/components/DrawingTool/components/ColourToolbar/ColourToolbar.styles.d.ts +0 -9
- package/dist/components/DrawingTool/components/ColourToolbar/ColourToolbar.styles.js +0 -18
- package/dist/components/DrawingTool/components/ColourToolbar/ColourToolbar.styles.js.map +0 -1
- package/dist/components/DrawingTool/components/ColourToolbar/index.d.ts +0 -2
- package/dist/components/DrawingTool/components/ColourToolbar/index.js +0 -8
- package/dist/components/DrawingTool/components/ColourToolbar/index.js.map +0 -1
- package/dist/components/DrawingTool/components/FileInput/FileInput.d.ts +0 -9
- package/dist/components/DrawingTool/components/FileInput/FileInput.js +0 -88
- package/dist/components/DrawingTool/components/FileInput/FileInput.js.map +0 -1
- package/dist/components/DrawingTool/components/FileInput/FileInput.styles.d.ts +0 -4
- package/dist/components/DrawingTool/components/FileInput/FileInput.styles.js +0 -22
- package/dist/components/DrawingTool/components/FileInput/FileInput.styles.js.map +0 -1
- package/dist/components/DrawingTool/components/FileInput/index.d.ts +0 -2
- package/dist/components/DrawingTool/components/FileInput/index.js +0 -8
- package/dist/components/DrawingTool/components/FileInput/index.js.map +0 -1
- package/dist/components/DrawingTool/components/Header/Header.d.ts +0 -9
- package/dist/components/DrawingTool/components/Header/Header.js +0 -38
- package/dist/components/DrawingTool/components/Header/Header.js.map +0 -1
- package/dist/components/DrawingTool/components/Header/index.d.ts +0 -2
- package/dist/components/DrawingTool/components/Header/index.js +0 -8
- package/dist/components/DrawingTool/components/Header/index.js.map +0 -1
- package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.d.ts +0 -8
- package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.js +0 -31
- package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.js.map +0 -1
- package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.styles.d.ts +0 -9
- package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.styles.js +0 -18
- package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.styles.js.map +0 -1
- package/dist/components/DrawingTool/components/OpacityToggle/index.d.ts +0 -2
- package/dist/components/DrawingTool/components/OpacityToggle/index.js +0 -8
- package/dist/components/DrawingTool/components/OpacityToggle/index.js.map +0 -1
- package/dist/components/DrawingTool/components/Placeable/index.d.ts +0 -9
- package/dist/components/DrawingTool/components/Placeable/index.js +0 -22
- package/dist/components/DrawingTool/components/Placeable/index.js.map +0 -1
- package/dist/components/DrawingTool/index.d.ts +0 -2
- package/dist/components/DrawingTool/lib/Sketch.d.ts +0 -90
- package/dist/components/DrawingTool/lib/Sketch.js +0 -414
- package/dist/components/DrawingTool/lib/Sketch.js.map +0 -1
- package/dist/components/DrawingTool/lib/SketchCut.d.ts +0 -22
- package/dist/components/DrawingTool/lib/SketchCut.js +0 -98
- package/dist/components/DrawingTool/lib/SketchCut.js.map +0 -1
- package/dist/components/DrawingTool/lib/SketchCutModel.d.ts +0 -6
- package/dist/components/DrawingTool/lib/SketchCutModel.js +0 -20
- package/dist/components/DrawingTool/lib/SketchCutModel.js.map +0 -1
- package/dist/components/DrawingTool/lib/SketchLayer.d.ts +0 -27
- package/dist/components/DrawingTool/lib/SketchLayer.js +0 -59
- package/dist/components/DrawingTool/lib/SketchLayer.js.map +0 -1
- package/dist/components/DrawingTool/lib/SketchModel.d.ts +0 -65
- package/dist/components/DrawingTool/lib/SketchModel.js +0 -137
- package/dist/components/DrawingTool/lib/SketchModel.js.map +0 -1
- package/dist/components/DrawingTool/lib/SketchStrokeModel.d.ts +0 -33
- package/dist/components/DrawingTool/lib/SketchStrokeModel.js +0 -48
- package/dist/components/DrawingTool/lib/SketchStrokeModel.js.map +0 -1
- package/dist/components/DrawingTool/lib/createInteractionSurface.d.ts +0 -16
- package/dist/components/DrawingTool/lib/createInteractionSurface.js +0 -56
- package/dist/components/DrawingTool/lib/createInteractionSurface.js.map +0 -1
- package/dist/components/DrawingTool/lib/trace.d.ts +0 -3
- package/dist/components/DrawingTool/lib/trace.js +0 -24
- package/dist/components/DrawingTool/lib/trace.js.map +0 -1
- package/dist/components/DrawingTool/lib/trimCanvas.d.ts +0 -2
- package/dist/components/DrawingTool/lib/trimCanvas.js +0 -42
- package/dist/components/DrawingTool/lib/trimCanvas.js.map +0 -1
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib = require('tslib');
|
|
4
|
-
var Sketch = require('./Sketch.js');
|
|
5
|
-
var SketchCutModel = require('./SketchCutModel.js');
|
|
6
|
-
var SketchLayer = require('./SketchLayer.js');
|
|
7
|
-
var trace = require('./trace.js');
|
|
8
|
-
|
|
9
|
-
var SketchCut = (function (_super) {
|
|
10
|
-
tslib.__extends(SketchCut, _super);
|
|
11
|
-
function SketchCut(props) {
|
|
12
|
-
var _this = _super.call(this, props) || this;
|
|
13
|
-
_this.model = new SketchCutModel({
|
|
14
|
-
pixelRatioScale: _this.pixelRatioScale
|
|
15
|
-
});
|
|
16
|
-
_this.imageToCut = props.imageToCut;
|
|
17
|
-
_this.drawingLayer.drawImageToFit(_this.imageToCut, .9);
|
|
18
|
-
if (props.onImageCut) {
|
|
19
|
-
_this.onImageCut = props.onImageCut;
|
|
20
|
-
}
|
|
21
|
-
var defaultLayerProps = {
|
|
22
|
-
pixelRatioScale: _this.pixelRatioScale,
|
|
23
|
-
width: props.containerEl.offsetWidth,
|
|
24
|
-
height: props.containerEl.offsetHeight
|
|
25
|
-
};
|
|
26
|
-
_this.cutLayer = new SketchLayer(defaultLayerProps);
|
|
27
|
-
_this.cutLayer.canvas.style.zIndex = '1';
|
|
28
|
-
_this.containerEl.appendChild(_this.cutLayer.canvas);
|
|
29
|
-
_this.uiLayer = new SketchLayer(defaultLayerProps);
|
|
30
|
-
_this.uiLayer.canvas.style.zIndex = '4';
|
|
31
|
-
_this.containerEl.appendChild(_this.uiLayer.canvas);
|
|
32
|
-
return _this;
|
|
33
|
-
}
|
|
34
|
-
SketchCut.prototype.initDrawAnimations = function () {
|
|
35
|
-
_super.prototype.initDrawAnimations.call(this);
|
|
36
|
-
this.drawFinished.cut = this.drawCutFinal;
|
|
37
|
-
this.drawAnimation.cut = this.drawCutStroke;
|
|
38
|
-
};
|
|
39
|
-
SketchCut.prototype.drawCutStroke = function (stroke) {
|
|
40
|
-
this.bufferLayer.clear();
|
|
41
|
-
trace(stroke, this.bufferLayer.ctx);
|
|
42
|
-
this.bufferLayer.ctx.closePath();
|
|
43
|
-
this.bufferLayer.ctx.stroke();
|
|
44
|
-
};
|
|
45
|
-
SketchCut.prototype.drawCutFinal = function (stroke) {
|
|
46
|
-
this.bufferLayer.clear();
|
|
47
|
-
this.drawingLayer.ctx.globalCompositeOperation = 'copy';
|
|
48
|
-
this.drawingLayer.drawImageToFit(this.imageToCut);
|
|
49
|
-
this.drawingLayer.ctx.globalCompositeOperation = 'destination-in';
|
|
50
|
-
trace(stroke, this.drawingLayer.ctx);
|
|
51
|
-
this.drawingLayer.ctx.closePath();
|
|
52
|
-
this.drawingLayer.ctx.fill();
|
|
53
|
-
this.cutLayer.hide();
|
|
54
|
-
var box = this.findBoundingBox(this.drawingLayer.ctx);
|
|
55
|
-
if (box.width < 0 || box.height < 0 || (box.width * box.height) < ((this.width * this.height) * 0.001)) {
|
|
56
|
-
this.resetCut();
|
|
57
|
-
}
|
|
58
|
-
else {
|
|
59
|
-
this.drawOutline(stroke);
|
|
60
|
-
this.cutLayer.clear();
|
|
61
|
-
this.cutLayer.ctx.drawImage(this.drawingLayer.ctx.canvas, box.topLeftX, box.topLeftY, box.width, box.height, 0, 0, box.width, box.height);
|
|
62
|
-
if (this.onImageCut) {
|
|
63
|
-
this.onImageCut();
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
SketchCut.prototype.resetCut = function () {
|
|
68
|
-
this.uiLayer.clear();
|
|
69
|
-
this.drawingLayer.ctx.globalCompositeOperation = 'copy';
|
|
70
|
-
this.drawingLayer.drawImageToFit(this.imageToCut);
|
|
71
|
-
};
|
|
72
|
-
SketchCut.prototype.drawOutline = function (stroke) {
|
|
73
|
-
this.uiLayer.ctx.strokeStyle = "rgba(252,234,63, 1)";
|
|
74
|
-
this.uiLayer.ctx.lineWidth = 7 * this.pixelRatioScale;
|
|
75
|
-
this.uiLayer.ctx.lineJoin = "round";
|
|
76
|
-
this.uiLayer.ctx.lineCap = "round";
|
|
77
|
-
if (this.uiLayer.ctx.setLineDash) {
|
|
78
|
-
this.uiLayer.ctx.setLineDash([15]);
|
|
79
|
-
}
|
|
80
|
-
else if (this.uiLayer.ctx.webkitLineDash) {
|
|
81
|
-
this.uiLayer.ctx.webkitLineDash = [15, 15];
|
|
82
|
-
}
|
|
83
|
-
else {
|
|
84
|
-
this.uiLayer.ctx.mozDash = [15, 15];
|
|
85
|
-
}
|
|
86
|
-
this.uiLayer.clear();
|
|
87
|
-
trace(stroke, this.uiLayer.ctx);
|
|
88
|
-
this.uiLayer.ctx.closePath();
|
|
89
|
-
this.uiLayer.ctx.stroke();
|
|
90
|
-
};
|
|
91
|
-
SketchCut.prototype.getLayerToExport = function () {
|
|
92
|
-
return this.cutLayer;
|
|
93
|
-
};
|
|
94
|
-
return SketchCut;
|
|
95
|
-
}(Sketch));
|
|
96
|
-
|
|
97
|
-
module.exports = SketchCut;
|
|
98
|
-
//# sourceMappingURL=SketchCut.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SketchCut.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib = require('tslib');
|
|
4
|
-
var SketchModel = require('./SketchModel.js');
|
|
5
|
-
|
|
6
|
-
var SketchCutModel = (function (_super) {
|
|
7
|
-
tslib.__extends(SketchCutModel, _super);
|
|
8
|
-
function SketchCutModel() {
|
|
9
|
-
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
10
|
-
_this.colour = [252, 234, 63];
|
|
11
|
-
return _this;
|
|
12
|
-
}
|
|
13
|
-
SketchCutModel.prototype.generateStyleType = function () {
|
|
14
|
-
return 'cut';
|
|
15
|
-
};
|
|
16
|
-
return SketchCutModel;
|
|
17
|
-
}(SketchModel));
|
|
18
|
-
|
|
19
|
-
module.exports = SketchCutModel;
|
|
20
|
-
//# sourceMappingURL=SketchCutModel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SketchCutModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
interface Props {
|
|
2
|
-
width: number;
|
|
3
|
-
height: number;
|
|
4
|
-
pixelRatioScale: number;
|
|
5
|
-
x?: number;
|
|
6
|
-
y?: number;
|
|
7
|
-
}
|
|
8
|
-
export default class SketchLayer {
|
|
9
|
-
width: number;
|
|
10
|
-
height: number;
|
|
11
|
-
x: number;
|
|
12
|
-
y: number;
|
|
13
|
-
naturalWidth: number;
|
|
14
|
-
naturalHeight: number;
|
|
15
|
-
readonly pixelRatioScale: number;
|
|
16
|
-
readonly canvas: HTMLCanvasElement;
|
|
17
|
-
readonly ctx: CanvasRenderingContext2D;
|
|
18
|
-
constructor(props: Props);
|
|
19
|
-
setSize(naturalWidth: any, naturalHeight: any, width: any, height: any): void;
|
|
20
|
-
setPosition(x: any, y: any): void;
|
|
21
|
-
hide(): void;
|
|
22
|
-
show(): void;
|
|
23
|
-
clear(): void;
|
|
24
|
-
drawImageToFit(image: any, ratio?: number): void;
|
|
25
|
-
drawImageToFill(image: any): void;
|
|
26
|
-
}
|
|
27
|
-
export {};
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var SketchLayer = (function () {
|
|
4
|
-
function SketchLayer(props) {
|
|
5
|
-
this.x = 0;
|
|
6
|
-
this.y = 0;
|
|
7
|
-
this.pixelRatioScale = props.pixelRatioScale;
|
|
8
|
-
this.naturalWidth = props.width;
|
|
9
|
-
this.naturalHeight = props.height;
|
|
10
|
-
this.width = this.naturalWidth * this.pixelRatioScale;
|
|
11
|
-
this.height = this.naturalHeight * this.pixelRatioScale;
|
|
12
|
-
this.canvas = document.createElement('canvas');
|
|
13
|
-
this.ctx = this.canvas.getContext('2d');
|
|
14
|
-
this.canvas.style.position = 'absolute';
|
|
15
|
-
this.canvas.style.pointerEvents = 'none';
|
|
16
|
-
this.setSize(this.naturalWidth, this.naturalHeight, this.width, this.height);
|
|
17
|
-
if (props.x)
|
|
18
|
-
this.x = props.x;
|
|
19
|
-
if (props.y)
|
|
20
|
-
this.y = props.y;
|
|
21
|
-
this.setPosition(this.x, this.y);
|
|
22
|
-
}
|
|
23
|
-
SketchLayer.prototype.setSize = function (naturalWidth, naturalHeight, width, height) {
|
|
24
|
-
this.canvas.style.width = naturalWidth + "px";
|
|
25
|
-
this.canvas.style.height = naturalHeight + "px";
|
|
26
|
-
this.canvas.width = width;
|
|
27
|
-
this.canvas.height = height;
|
|
28
|
-
};
|
|
29
|
-
SketchLayer.prototype.setPosition = function (x, y) {
|
|
30
|
-
this.canvas.style.left = x + "px";
|
|
31
|
-
this.canvas.style.top = y + "px";
|
|
32
|
-
};
|
|
33
|
-
SketchLayer.prototype.hide = function () {
|
|
34
|
-
this.canvas.style.display = 'none';
|
|
35
|
-
};
|
|
36
|
-
SketchLayer.prototype.show = function () {
|
|
37
|
-
this.canvas.style.display = 'block';
|
|
38
|
-
};
|
|
39
|
-
SketchLayer.prototype.clear = function () {
|
|
40
|
-
this.ctx.clearRect(0, 0, this.width, this.height);
|
|
41
|
-
};
|
|
42
|
-
SketchLayer.prototype.drawImageToFit = function (image, ratio) {
|
|
43
|
-
if (ratio === void 0) { ratio = 1; }
|
|
44
|
-
var scale = Math.min(this.width / image.width, this.height / image.height) * ratio;
|
|
45
|
-
var x = (this.width / 2) - (image.width / 2) * scale;
|
|
46
|
-
var y = (this.height / 2) - (image.height / 2) * scale;
|
|
47
|
-
this.ctx.drawImage(image, 0, 0, image.width, image.height, x, y, image.width * scale, image.height * scale);
|
|
48
|
-
};
|
|
49
|
-
SketchLayer.prototype.drawImageToFill = function (image) {
|
|
50
|
-
var scale = Math.max(this.width / image.width, this.height / image.height);
|
|
51
|
-
var x = (this.width / 2) - (image.width / 2) * scale;
|
|
52
|
-
var y = (this.height / 2) - (image.height / 2) * scale;
|
|
53
|
-
this.ctx.drawImage(image, 0, 0, image.width, image.height, x, y, image.width * scale, image.height * scale);
|
|
54
|
-
};
|
|
55
|
-
return SketchLayer;
|
|
56
|
-
}());
|
|
57
|
-
|
|
58
|
-
module.exports = SketchLayer;
|
|
59
|
-
//# sourceMappingURL=SketchLayer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SketchLayer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import SketchStrokeModel, { SketchPoint, SketchStrokeModelData, SketchStrokeType } from './SketchStrokeModel';
|
|
2
|
-
export declare type SketchActionType = 'STROKE' | 'IMAGE_MERGE';
|
|
3
|
-
export interface SketchActionMergeData {
|
|
4
|
-
image?: HTMLImageElement;
|
|
5
|
-
imageSrc?: string;
|
|
6
|
-
x: number;
|
|
7
|
-
y: number;
|
|
8
|
-
origin: number[];
|
|
9
|
-
height: number;
|
|
10
|
-
width: number;
|
|
11
|
-
rotation: number;
|
|
12
|
-
}
|
|
13
|
-
export interface SketchAction {
|
|
14
|
-
type: SketchActionType;
|
|
15
|
-
data?: SketchStrokeModelData | SketchActionMergeData;
|
|
16
|
-
model?: SketchStrokeModel;
|
|
17
|
-
}
|
|
18
|
-
export interface SketchModelData {
|
|
19
|
-
colour: number[];
|
|
20
|
-
opacity: number;
|
|
21
|
-
size: number;
|
|
22
|
-
lastActionIndex: number;
|
|
23
|
-
actions: SketchAction[];
|
|
24
|
-
currentStroke: null | SketchStrokeModelData;
|
|
25
|
-
}
|
|
26
|
-
interface Props {
|
|
27
|
-
pixelRatioScale: number;
|
|
28
|
-
}
|
|
29
|
-
export default class SketchModel {
|
|
30
|
-
colour: number[];
|
|
31
|
-
eraser: boolean;
|
|
32
|
-
fill: boolean;
|
|
33
|
-
opacity: number;
|
|
34
|
-
size: number;
|
|
35
|
-
pixelRatioScale: number;
|
|
36
|
-
actions: SketchAction[];
|
|
37
|
-
lastActionIndex: number;
|
|
38
|
-
currentStroke: null | SketchStrokeModel;
|
|
39
|
-
constructor(props: Props);
|
|
40
|
-
generateStyleType(): SketchStrokeType;
|
|
41
|
-
getStyle(): {
|
|
42
|
-
opacity: number;
|
|
43
|
-
colour: number[];
|
|
44
|
-
eraser: boolean;
|
|
45
|
-
size: number;
|
|
46
|
-
type: SketchStrokeType;
|
|
47
|
-
};
|
|
48
|
-
initStroke(newPoint: SketchPoint): void;
|
|
49
|
-
continueStroke(newPoint: SketchPoint): void;
|
|
50
|
-
saveStroke(): void;
|
|
51
|
-
saveMergeImage(mergeParams: SketchActionMergeData): void;
|
|
52
|
-
canUndo(): boolean;
|
|
53
|
-
canRedo(): boolean;
|
|
54
|
-
reset(): void;
|
|
55
|
-
serialize(): {
|
|
56
|
-
colour: number[];
|
|
57
|
-
opacity: number;
|
|
58
|
-
size: number;
|
|
59
|
-
lastActionIndex: number;
|
|
60
|
-
actions: SketchAction[];
|
|
61
|
-
currentStroke: SketchStrokeModelData | null;
|
|
62
|
-
};
|
|
63
|
-
deserialize(serialized: SketchModelData): void;
|
|
64
|
-
}
|
|
65
|
-
export {};
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var SketchStrokeModel = require('./SketchStrokeModel.js');
|
|
4
|
-
|
|
5
|
-
var SketchModel = (function () {
|
|
6
|
-
function SketchModel(props) {
|
|
7
|
-
this.colour = [0, 0, 0];
|
|
8
|
-
this.eraser = false;
|
|
9
|
-
this.fill = false;
|
|
10
|
-
this.opacity = 1.0;
|
|
11
|
-
this.size = 7;
|
|
12
|
-
this.pixelRatioScale = 1;
|
|
13
|
-
this.actions = [];
|
|
14
|
-
this.lastActionIndex = -1;
|
|
15
|
-
this.currentStroke = null;
|
|
16
|
-
this.pixelRatioScale = props.pixelRatioScale;
|
|
17
|
-
}
|
|
18
|
-
SketchModel.prototype.generateStyleType = function () {
|
|
19
|
-
return "" + (this.eraser || this.opacity === 1.0 ? 'opaque' : 'transparent') + (this.eraser ? 'Eraser' : 'Colour') + (this.fill ? 'Fill' : 'Stroke');
|
|
20
|
-
};
|
|
21
|
-
SketchModel.prototype.getStyle = function () {
|
|
22
|
-
return {
|
|
23
|
-
opacity: this.opacity,
|
|
24
|
-
colour: this.colour,
|
|
25
|
-
eraser: this.eraser,
|
|
26
|
-
size: this.size * this.pixelRatioScale,
|
|
27
|
-
type: this.generateStyleType()
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
SketchModel.prototype.initStroke = function (newPoint) {
|
|
31
|
-
if (this.canRedo()) {
|
|
32
|
-
if (this.lastActionIndex === -1) {
|
|
33
|
-
this.actions = [];
|
|
34
|
-
}
|
|
35
|
-
else {
|
|
36
|
-
this.actions = this.actions.slice(0, this.lastActionIndex + 1);
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
this.currentStroke = new SketchStrokeModel(this.getStyle(), newPoint);
|
|
40
|
-
};
|
|
41
|
-
SketchModel.prototype.continueStroke = function (newPoint) {
|
|
42
|
-
if (this.currentStroke) {
|
|
43
|
-
this.currentStroke.addPoint(newPoint);
|
|
44
|
-
}
|
|
45
|
-
};
|
|
46
|
-
SketchModel.prototype.saveStroke = function () {
|
|
47
|
-
if (this.currentStroke) {
|
|
48
|
-
this.actions.push({
|
|
49
|
-
type: 'STROKE',
|
|
50
|
-
model: this.currentStroke
|
|
51
|
-
});
|
|
52
|
-
this.currentStroke = null;
|
|
53
|
-
this.lastActionIndex += 1;
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
SketchModel.prototype.saveMergeImage = function (mergeParams) {
|
|
57
|
-
this.currentStroke = null;
|
|
58
|
-
this.lastActionIndex += 1;
|
|
59
|
-
this.actions.push({
|
|
60
|
-
type: 'IMAGE_MERGE',
|
|
61
|
-
data: mergeParams
|
|
62
|
-
});
|
|
63
|
-
};
|
|
64
|
-
SketchModel.prototype.canUndo = function () {
|
|
65
|
-
return this.lastActionIndex > -1;
|
|
66
|
-
};
|
|
67
|
-
SketchModel.prototype.canRedo = function () {
|
|
68
|
-
return this.lastActionIndex < this.actions.length - 1;
|
|
69
|
-
};
|
|
70
|
-
SketchModel.prototype.reset = function () {
|
|
71
|
-
this.actions = [];
|
|
72
|
-
this.lastActionIndex = -1;
|
|
73
|
-
if (this.currentStroke) {
|
|
74
|
-
this.currentStroke = null;
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
SketchModel.prototype.serialize = function () {
|
|
78
|
-
var serialized = {
|
|
79
|
-
colour: this.colour,
|
|
80
|
-
opacity: this.opacity,
|
|
81
|
-
size: this.size,
|
|
82
|
-
lastActionIndex: this.lastActionIndex,
|
|
83
|
-
actions: [],
|
|
84
|
-
currentStroke: null
|
|
85
|
-
};
|
|
86
|
-
this.actions.forEach(function (action) {
|
|
87
|
-
var serializedObject;
|
|
88
|
-
if (action.type === 'STROKE') {
|
|
89
|
-
serializedObject = action.model ? action.model.serialize() : action.data || {};
|
|
90
|
-
}
|
|
91
|
-
else if (action.type === 'IMAGE_MERGE') {
|
|
92
|
-
serializedObject = action.data;
|
|
93
|
-
if (serializedObject.image) {
|
|
94
|
-
serializedObject.imageSrc = serializedObject.image.src;
|
|
95
|
-
serializedObject.image = undefined;
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
serialized.actions.push({
|
|
99
|
-
type: action.type,
|
|
100
|
-
data: serializedObject
|
|
101
|
-
});
|
|
102
|
-
});
|
|
103
|
-
if (this.currentStroke) {
|
|
104
|
-
serialized.currentStroke = this.currentStroke.serialize();
|
|
105
|
-
}
|
|
106
|
-
return serialized;
|
|
107
|
-
};
|
|
108
|
-
SketchModel.prototype.deserialize = function (serialized) {
|
|
109
|
-
var _this = this;
|
|
110
|
-
this.colour = serialized.colour;
|
|
111
|
-
this.opacity = serialized.opacity;
|
|
112
|
-
this.size = serialized.size;
|
|
113
|
-
this.lastActionIndex = serialized.lastActionIndex;
|
|
114
|
-
this.actions = [];
|
|
115
|
-
serialized.actions.forEach(function (action) {
|
|
116
|
-
var deserializedAction = {
|
|
117
|
-
type: action.type,
|
|
118
|
-
data: action.data,
|
|
119
|
-
model: null
|
|
120
|
-
};
|
|
121
|
-
if (action.type === 'STROKE' && action.data) {
|
|
122
|
-
var stroke = new SketchStrokeModel();
|
|
123
|
-
stroke.deserialize(action.data);
|
|
124
|
-
deserializedAction.model = stroke;
|
|
125
|
-
}
|
|
126
|
-
_this.actions.push(deserializedAction);
|
|
127
|
-
});
|
|
128
|
-
if (serialized.currentStroke !== undefined) {
|
|
129
|
-
this.currentStroke = new SketchStrokeModel();
|
|
130
|
-
this.currentStroke.deserialize(serialized.currentStroke);
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
return SketchModel;
|
|
134
|
-
}());
|
|
135
|
-
|
|
136
|
-
module.exports = SketchModel;
|
|
137
|
-
//# sourceMappingURL=SketchModel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SketchModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
export interface SketchPoint {
|
|
2
|
-
x: number;
|
|
3
|
-
y: number;
|
|
4
|
-
}
|
|
5
|
-
export declare type SketchStrokeType = 'transparentEraserFill' | 'transparentEraserStroke' | 'transparentColourFill' | 'transparentColourStroke' | 'opaqueEraserFill' | 'opaqueEraserStroke' | 'opaqueColourFill' | 'opaqueColourStroke' | 'cut';
|
|
6
|
-
export interface SketchStrokeStyle {
|
|
7
|
-
opacity: number;
|
|
8
|
-
colour: number[];
|
|
9
|
-
eraser: boolean;
|
|
10
|
-
size: number;
|
|
11
|
-
type: SketchStrokeType;
|
|
12
|
-
}
|
|
13
|
-
export interface SketchStrokeModelPoint {
|
|
14
|
-
s: SketchPoint;
|
|
15
|
-
h: SketchPoint | null;
|
|
16
|
-
}
|
|
17
|
-
export interface SketchStrokeModelData {
|
|
18
|
-
style?: SketchStrokeStyle;
|
|
19
|
-
points: SketchStrokeModelPoint[];
|
|
20
|
-
}
|
|
21
|
-
export default class SketchStrokeModel {
|
|
22
|
-
style?: SketchStrokeStyle;
|
|
23
|
-
points: SketchStrokeModelPoint[];
|
|
24
|
-
constructor(style?: SketchStrokeStyle, firstPoint?: SketchPoint);
|
|
25
|
-
length(): number;
|
|
26
|
-
lastPoint(): SketchPoint;
|
|
27
|
-
addPoint(newPoint: any): number;
|
|
28
|
-
serialize(): {
|
|
29
|
-
points: SketchStrokeModelPoint[];
|
|
30
|
-
style: SketchStrokeStyle | undefined;
|
|
31
|
-
};
|
|
32
|
-
deserialize(serialized: any): void;
|
|
33
|
-
}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var SketchStrokeModel = (function () {
|
|
4
|
-
function SketchStrokeModel(style, firstPoint) {
|
|
5
|
-
if (style) {
|
|
6
|
-
this.style = style;
|
|
7
|
-
}
|
|
8
|
-
this.points = [];
|
|
9
|
-
if (firstPoint) {
|
|
10
|
-
this.points.push({
|
|
11
|
-
s: firstPoint,
|
|
12
|
-
h: null
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
SketchStrokeModel.prototype.length = function () {
|
|
17
|
-
return this.points.length;
|
|
18
|
-
};
|
|
19
|
-
SketchStrokeModel.prototype.lastPoint = function () {
|
|
20
|
-
return this.points[this.points.length - 1].s;
|
|
21
|
-
};
|
|
22
|
-
SketchStrokeModel.prototype.addPoint = function (newPoint) {
|
|
23
|
-
this.points[this.points.length - 1].h = {
|
|
24
|
-
x: (this.points[this.points.length - 1].s.x + newPoint.x) / 2,
|
|
25
|
-
y: (this.points[this.points.length - 1].s.y + newPoint.y) / 2
|
|
26
|
-
};
|
|
27
|
-
return this.points.push({
|
|
28
|
-
s: newPoint,
|
|
29
|
-
h: null
|
|
30
|
-
});
|
|
31
|
-
};
|
|
32
|
-
SketchStrokeModel.prototype.serialize = function () {
|
|
33
|
-
return {
|
|
34
|
-
points: this.points,
|
|
35
|
-
style: this.style
|
|
36
|
-
};
|
|
37
|
-
};
|
|
38
|
-
SketchStrokeModel.prototype.deserialize = function (serialized) {
|
|
39
|
-
if (!serialized)
|
|
40
|
-
return;
|
|
41
|
-
this.style = serialized.style;
|
|
42
|
-
this.points = serialized.points || [];
|
|
43
|
-
};
|
|
44
|
-
return SketchStrokeModel;
|
|
45
|
-
}());
|
|
46
|
-
|
|
47
|
-
module.exports = SketchStrokeModel;
|
|
48
|
-
//# sourceMappingURL=SketchStrokeModel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SketchStrokeModel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export interface Point {
|
|
2
|
-
x: number;
|
|
3
|
-
y: number;
|
|
4
|
-
}
|
|
5
|
-
interface Props {
|
|
6
|
-
width: number;
|
|
7
|
-
height: number;
|
|
8
|
-
scale: number;
|
|
9
|
-
onTouchStart?: (point: Point) => void;
|
|
10
|
-
onTouchMove?: (point: Point) => void;
|
|
11
|
-
onTouchEnd?: (point: Point) => void;
|
|
12
|
-
onTouchLeave?: (point: Point) => void;
|
|
13
|
-
onTouchEnter?: (point: Point) => void;
|
|
14
|
-
}
|
|
15
|
-
declare const _default: (props: Props) => HTMLDivElement;
|
|
16
|
-
export default _default;
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var createInteractionSurface = (function (props) {
|
|
4
|
-
var el = document.createElement('div');
|
|
5
|
-
el.style.width = props.width + "px";
|
|
6
|
-
el.style.height = props.height + "px";
|
|
7
|
-
el.style.position = 'absolute';
|
|
8
|
-
el.style.left = '0px';
|
|
9
|
-
el.style.top = '0px';
|
|
10
|
-
var getMousePoint = function (ev) {
|
|
11
|
-
var rect = el.getBoundingClientRect();
|
|
12
|
-
return {
|
|
13
|
-
x: (ev.clientX - rect.left) * props.scale,
|
|
14
|
-
y: (ev.clientY - rect.top) * props.scale
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
var getTouchPoint = function (ev) {
|
|
18
|
-
var rect = el.getBoundingClientRect();
|
|
19
|
-
return {
|
|
20
|
-
x: (ev.touches[0].clientX - rect.left) * props.scale,
|
|
21
|
-
y: (ev.touches[0].clientY - rect.top) * props.scale
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
var wrapMouseEvent = function (ev, handler) {
|
|
25
|
-
ev.preventDefault();
|
|
26
|
-
ev.stopPropagation();
|
|
27
|
-
handler(getMousePoint(ev));
|
|
28
|
-
};
|
|
29
|
-
var wrapTouchEvent = function (ev, handler) {
|
|
30
|
-
ev.preventDefault();
|
|
31
|
-
ev.stopPropagation();
|
|
32
|
-
if (ev.touches[0]) {
|
|
33
|
-
handler(getTouchPoint(ev));
|
|
34
|
-
}
|
|
35
|
-
else {
|
|
36
|
-
handler();
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
el.addEventListener("mousedown", function (ev) { return wrapMouseEvent(ev, props.onTouchStart); });
|
|
40
|
-
el.addEventListener("mousemove", function (ev) { return wrapMouseEvent(ev, props.onTouchMove); });
|
|
41
|
-
el.addEventListener("mouseup", function (ev) { return wrapMouseEvent(ev, props.onTouchEnd); });
|
|
42
|
-
el.addEventListener("mouseleave", function (ev) { return wrapMouseEvent(ev, props.onTouchLeave); });
|
|
43
|
-
el.addEventListener("mouseenter", function (ev) {
|
|
44
|
-
if (ev.buttons > 0) {
|
|
45
|
-
wrapMouseEvent(ev, props.onTouchStart);
|
|
46
|
-
}
|
|
47
|
-
});
|
|
48
|
-
el.addEventListener("touchstart", function (ev) { return wrapTouchEvent(ev, props.onTouchStart); });
|
|
49
|
-
el.addEventListener("touchmove", function (ev) { return wrapTouchEvent(ev, props.onTouchMove); });
|
|
50
|
-
el.addEventListener("touchend", function (ev) { return wrapTouchEvent(ev, props.onTouchEnd); });
|
|
51
|
-
el.addEventListener("touchcancel", function (ev) { return wrapTouchEvent(ev, props.onTouchEnd); });
|
|
52
|
-
return el;
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
module.exports = createInteractionSurface;
|
|
56
|
-
//# sourceMappingURL=createInteractionSurface.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"createInteractionSurface.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var trace = (function (stroke, ctx) {
|
|
4
|
-
var nbPoints = stroke.length();
|
|
5
|
-
ctx.beginPath();
|
|
6
|
-
if (nbPoints < 3) {
|
|
7
|
-
ctx.moveTo(stroke.points[0].s.x, stroke.points[0].s.y);
|
|
8
|
-
ctx.lineTo(stroke.points[nbPoints - 1].s.x + 0.001, stroke.points[nbPoints - 1].s.y + 0.001);
|
|
9
|
-
}
|
|
10
|
-
else {
|
|
11
|
-
ctx.moveTo(stroke.points[0].s.x, stroke.points[0].s.y);
|
|
12
|
-
var i = void 0;
|
|
13
|
-
var len = void 0;
|
|
14
|
-
var move = void 0;
|
|
15
|
-
var ref = stroke.points.slice(1, +(nbPoints - 2) + 1 || 9e9);
|
|
16
|
-
for (i = 0, len = ref.length; i < len; i += 1) {
|
|
17
|
-
move = ref[i];
|
|
18
|
-
ctx.quadraticCurveTo(move.s.x, move.s.y, move.h.x, move.h.y);
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
|
|
23
|
-
module.exports = trace;
|
|
24
|
-
//# sourceMappingURL=trace.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"trace.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const rowBlank = (imageData, width, y) => {
|
|
4
|
-
for (let x = 0; x < width; x+=1) {
|
|
5
|
-
if (imageData.data[y * width * 4 + x * 4 + 3] !== 0) return false
|
|
6
|
-
}
|
|
7
|
-
return true
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
const columnBlank = (imageData, width, x, top, bottom) => {
|
|
11
|
-
for (let y = top; y < bottom; y+=1) {
|
|
12
|
-
if (imageData.data[y * width * 4 + x * 4 + 3] !== 0) return false
|
|
13
|
-
}
|
|
14
|
-
return true
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
var trimCanvas = (canvas) => {
|
|
18
|
-
const ctx = canvas.getContext("2d");
|
|
19
|
-
|
|
20
|
-
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
21
|
-
let top = 0;
|
|
22
|
-
let bottom = imageData.height;
|
|
23
|
-
let left = 0;
|
|
24
|
-
let right = imageData.width;
|
|
25
|
-
|
|
26
|
-
while (top < bottom && rowBlank(imageData, canvas.width, top)) top+=1;
|
|
27
|
-
while (bottom - 1 > top && rowBlank(imageData, canvas.width, bottom - 1)) bottom-=1;
|
|
28
|
-
while (left < right && columnBlank(imageData, canvas.width, left, top, bottom)) left+=1;
|
|
29
|
-
while (right - 1 > left && columnBlank(imageData, canvas.width, right - 1, top, bottom)) right-=1;
|
|
30
|
-
|
|
31
|
-
const trimmed = ctx.getImageData(left, top, right - left, bottom - top);
|
|
32
|
-
const copy = canvas.ownerDocument.createElement("canvas");
|
|
33
|
-
const copyCtx = copy.getContext("2d");
|
|
34
|
-
copy.width = trimmed.width;
|
|
35
|
-
copy.height = trimmed.height;
|
|
36
|
-
copyCtx.putImageData(trimmed, 0, 0);
|
|
37
|
-
|
|
38
|
-
return copy
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
module.exports = trimCanvas;
|
|
42
|
-
//# sourceMappingURL=trimCanvas.js.map
|