@erase2d/fabric 1.1.7 → 1.1.9
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/README.md +51 -3
- package/dist/_virtual/_rollupPluginBabelHelpers.js +351 -450
- package/dist/_virtual/_rollupPluginBabelHelpers.js.map +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/tsconfig.json +5 -2
- package/types/fabric.d.ts +2 -0
- package/types/index.d.ts +1 -0
- package/dist/core/dist/src/erase.js +0 -36
- package/dist/core/dist/src/erase.js.map +0 -1
- package/dist/fabric/src/ClippingGroup.js +0 -46
- package/dist/fabric/src/ClippingGroup.js.map +0 -1
- package/dist/fabric/src/EraserBrush.js +0 -433
- package/dist/fabric/src/EraserBrush.js.map +0 -1
- package/dist/fabric/src/ErasingEffect.js +0 -117
- package/dist/fabric/src/ErasingEffect.js.map +0 -1
- package/dist/fabric/src/isTransparent.js +0 -52
- package/dist/fabric/src/isTransparent.js.map +0 -1
- package/dist/src/ClippingGroup.d.ts +0 -8
- package/dist/src/ClippingGroup.d.ts.map +0 -1
- package/dist/src/EraserBrush.d.ts +0 -114
- package/dist/src/EraserBrush.d.ts.map +0 -1
- package/dist/src/ErasingEffect.d.ts +0 -27
- package/dist/src/ErasingEffect.d.ts.map +0 -1
- package/dist/src/isTransparent.d.ts +0 -7
- package/dist/src/isTransparent.d.ts.map +0 -1
|
@@ -1,117 +0,0 @@
|
|
|
1
|
-
import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
2
|
-
import { Group } from 'fabric';
|
|
3
|
-
import { ClippingGroup } from './ClippingGroup.js';
|
|
4
|
-
|
|
5
|
-
function walk(objects) {
|
|
6
|
-
return objects.flatMap(function (object) {
|
|
7
|
-
if (!object.erasable || object.isNotVisible()) {
|
|
8
|
-
return [];
|
|
9
|
-
} else if (object instanceof Group && object.erasable === 'deep') {
|
|
10
|
-
return walk(object.getObjects());
|
|
11
|
-
} else {
|
|
12
|
-
return [object];
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
}
|
|
16
|
-
function drawCanvas(ctx, canvas, objects) {
|
|
17
|
-
canvas.clearContext(ctx);
|
|
18
|
-
ctx.imageSmoothingEnabled = canvas.imageSmoothingEnabled;
|
|
19
|
-
ctx.imageSmoothingQuality = 'high';
|
|
20
|
-
// @ts-expect-error node-canvas stuff
|
|
21
|
-
ctx.patternQuality = 'best';
|
|
22
|
-
canvas._renderBackground(ctx);
|
|
23
|
-
ctx.save();
|
|
24
|
-
ctx.transform.apply(ctx, _toConsumableArray(canvas.viewportTransform));
|
|
25
|
-
objects.forEach(function (object) {
|
|
26
|
-
return object.render(ctx);
|
|
27
|
-
});
|
|
28
|
-
ctx.restore();
|
|
29
|
-
var clipPath = canvas.clipPath;
|
|
30
|
-
if (clipPath) {
|
|
31
|
-
// fabric crap
|
|
32
|
-
clipPath._set('canvas', canvas);
|
|
33
|
-
clipPath.shouldCache();
|
|
34
|
-
clipPath._transformDone = true;
|
|
35
|
-
clipPath.renderCache({
|
|
36
|
-
forClipping: true
|
|
37
|
-
});
|
|
38
|
-
canvas.drawClipPathOnCanvas(ctx, clipPath);
|
|
39
|
-
}
|
|
40
|
-
canvas._renderOverlay(ctx);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Prepare the pattern for the erasing brush
|
|
45
|
-
* This pattern will be drawn on the top context after clipping the main context,
|
|
46
|
-
* achieving a visual effect of erasing only erasable objects.
|
|
47
|
-
*
|
|
48
|
-
* This is designed to support erasing a collection with both erasable and non-erasable objects while maintaining object stacking.\
|
|
49
|
-
* Iterates over collections to allow nested selective erasing.\
|
|
50
|
-
* Prepares objects before rendering the pattern brush.\
|
|
51
|
-
* If brush is **NOT** inverted render all non-erasable objects.\
|
|
52
|
-
* If brush is inverted render all objects, erasable objects without their eraser.
|
|
53
|
-
* This will render the erased parts as if they were not erased in the first place, achieving an undo effect.
|
|
54
|
-
*
|
|
55
|
-
* Caveat:
|
|
56
|
-
* Does not support erasing effects of shadows
|
|
57
|
-
*
|
|
58
|
-
*/
|
|
59
|
-
function draw(ctx, _ref, _ref2) {
|
|
60
|
-
var inverted = _ref.inverted,
|
|
61
|
-
opacity = _ref.opacity;
|
|
62
|
-
var canvas = _ref2.canvas,
|
|
63
|
-
_ref2$objects = _ref2.objects,
|
|
64
|
-
objects = _ref2$objects === void 0 ? canvas._objectsToRender || canvas._objects : _ref2$objects,
|
|
65
|
-
_ref2$background = _ref2.background,
|
|
66
|
-
background = _ref2$background === void 0 ? canvas.backgroundImage : _ref2$background,
|
|
67
|
-
_ref2$overlay = _ref2.overlay,
|
|
68
|
-
overlay = _ref2$overlay === void 0 ? canvas.overlayImage : _ref2$overlay;
|
|
69
|
-
// prepare tree
|
|
70
|
-
var alpha = 1 - opacity;
|
|
71
|
-
var restore = walk([].concat(_toConsumableArray(objects), _toConsumableArray([background, overlay].filter(function (d) {
|
|
72
|
-
return !!d;
|
|
73
|
-
})))).map(function (object) {
|
|
74
|
-
if (!inverted) {
|
|
75
|
-
var _object$parent;
|
|
76
|
-
// render only non-erasable objects
|
|
77
|
-
var _opacity = object.opacity;
|
|
78
|
-
object.opacity *= alpha;
|
|
79
|
-
(_object$parent = object.parent) === null || _object$parent === void 0 || _object$parent.set('dirty', true);
|
|
80
|
-
return {
|
|
81
|
-
object: object,
|
|
82
|
-
opacity: _opacity
|
|
83
|
-
};
|
|
84
|
-
} else if (object.clipPath instanceof ClippingGroup) {
|
|
85
|
-
// render all objects without eraser
|
|
86
|
-
object.clipPath['blockErasing'] = true;
|
|
87
|
-
object.clipPath.set('dirty', true);
|
|
88
|
-
object.set('dirty', true);
|
|
89
|
-
return {
|
|
90
|
-
object: object,
|
|
91
|
-
clipPath: object.clipPath
|
|
92
|
-
};
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
|
|
96
|
-
// draw
|
|
97
|
-
drawCanvas(ctx, canvas, objects);
|
|
98
|
-
|
|
99
|
-
// restore
|
|
100
|
-
restore.forEach(function (entry) {
|
|
101
|
-
if (!entry) {
|
|
102
|
-
return;
|
|
103
|
-
}
|
|
104
|
-
if (entry.opacity) {
|
|
105
|
-
var _entry$object$parent;
|
|
106
|
-
entry.object.opacity = entry.opacity;
|
|
107
|
-
(_entry$object$parent = entry.object.parent) === null || _entry$object$parent === void 0 || _entry$object$parent.set('dirty', true);
|
|
108
|
-
} else if (entry.clipPath) {
|
|
109
|
-
entry.clipPath['blockErasing'] = false;
|
|
110
|
-
entry.clipPath.set('dirty', true);
|
|
111
|
-
entry.object.set('dirty', true);
|
|
112
|
-
}
|
|
113
|
-
});
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
export { draw };
|
|
117
|
-
//# sourceMappingURL=ErasingEffect.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ErasingEffect.js","sources":["../../../src/ErasingEffect.ts"],"sourcesContent":["import { Canvas, FabricObject, Group } from 'fabric';\nimport { ClippingGroup } from './ClippingGroup';\n\nfunction walk(objects: FabricObject[]): FabricObject[] {\n return objects.flatMap((object) => {\n if (!object.erasable || object.isNotVisible()) {\n return [];\n } else if (object instanceof Group && object.erasable === 'deep') {\n return walk(object.getObjects());\n } else {\n return [object];\n }\n });\n}\n\nfunction drawCanvas(\n ctx: CanvasRenderingContext2D,\n canvas: Canvas,\n objects: FabricObject[]\n) {\n canvas.clearContext(ctx);\n\n ctx.imageSmoothingEnabled = canvas.imageSmoothingEnabled;\n ctx.imageSmoothingQuality = 'high';\n // @ts-expect-error node-canvas stuff\n ctx.patternQuality = 'best';\n\n canvas._renderBackground(ctx);\n\n ctx.save();\n ctx.transform(...canvas.viewportTransform);\n objects.forEach((object) => object.render(ctx));\n ctx.restore();\n\n const clipPath = canvas.clipPath;\n if (clipPath) {\n // fabric crap\n clipPath._set('canvas', canvas);\n clipPath.shouldCache();\n clipPath._transformDone = true;\n clipPath.renderCache({ forClipping: true });\n canvas.drawClipPathOnCanvas(ctx, clipPath as any);\n }\n\n canvas._renderOverlay(ctx);\n}\n\n/**\n * Prepare the pattern for the erasing brush\n * This pattern will be drawn on the top context after clipping the main context,\n * achieving a visual effect of erasing only erasable objects.\n *\n * This is designed to support erasing a collection with both erasable and non-erasable objects while maintaining object stacking.\\\n * Iterates over collections to allow nested selective erasing.\\\n * Prepares objects before rendering the pattern brush.\\\n * If brush is **NOT** inverted render all non-erasable objects.\\\n * If brush is inverted render all objects, erasable objects without their eraser.\n * This will render the erased parts as if they were not erased in the first place, achieving an undo effect.\n *\n * Caveat:\n * Does not support erasing effects of shadows\n *\n */\nexport function draw(\n ctx: CanvasRenderingContext2D,\n { inverted, opacity }: { inverted: boolean; opacity: number },\n {\n canvas,\n objects = canvas._objectsToRender || canvas._objects,\n background = canvas.backgroundImage,\n overlay = canvas.overlayImage,\n }: {\n canvas: Canvas;\n objects?: FabricObject[];\n background?: FabricObject;\n overlay?: FabricObject;\n }\n) {\n // prepare tree\n const alpha = 1 - opacity;\n const restore = walk([\n ...objects,\n ...([background, overlay] as FabricObject[]).filter((d) => !!d),\n ]).map((object) => {\n if (!inverted) {\n // render only non-erasable objects\n const opacity = object.opacity;\n object.opacity *= alpha;\n object.parent?.set('dirty', true);\n return { object, opacity };\n } else if (object.clipPath instanceof ClippingGroup) {\n // render all objects without eraser\n object.clipPath['blockErasing'] = true;\n object.clipPath.set('dirty', true);\n object.set('dirty', true);\n return { object, clipPath: object.clipPath };\n }\n });\n\n // draw\n drawCanvas(ctx, canvas, objects);\n\n // restore\n restore.forEach((entry) => {\n if (!entry) {\n return;\n }\n if (entry.opacity) {\n entry.object.opacity = entry.opacity;\n entry.object.parent?.set('dirty', true);\n } else if (entry.clipPath) {\n entry.clipPath['blockErasing'] = false;\n entry.clipPath.set('dirty', true);\n entry.object.set('dirty', true);\n }\n });\n}\n"],"names":["walk","objects","flatMap","object","erasable","isNotVisible","Group","getObjects","drawCanvas","ctx","canvas","clearContext","imageSmoothingEnabled","imageSmoothingQuality","patternQuality","_renderBackground","save","transform","apply","_toConsumableArray","viewportTransform","forEach","render","restore","clipPath","_set","shouldCache","_transformDone","renderCache","forClipping","drawClipPathOnCanvas","_renderOverlay","draw","_ref","_ref2","inverted","opacity","_ref2$objects","_objectsToRender","_objects","_ref2$background","background","backgroundImage","_ref2$overlay","overlay","overlayImage","alpha","concat","filter","d","map","_object$parent","parent","set","ClippingGroup","entry","_entry$object$parent"],"mappings":"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"}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
var messageID = -1;
|
|
2
|
-
var isImageDataTransparent = function isImageDataTransparent(imageData) {
|
|
3
|
-
return imageData.data.every(function (x, i) {
|
|
4
|
-
return i % 4 !== 3 || x === 0;
|
|
5
|
-
});
|
|
6
|
-
};
|
|
7
|
-
function isTransparent(object, worker) {
|
|
8
|
-
// should also move to offscreen
|
|
9
|
-
var canvas = object.toCanvasElement({
|
|
10
|
-
// multiplier: 0.1,
|
|
11
|
-
enableRetinaScaling: false,
|
|
12
|
-
viewportTransform: false,
|
|
13
|
-
withoutTransform: true,
|
|
14
|
-
withoutShadow: true
|
|
15
|
-
});
|
|
16
|
-
var id = ++messageID;
|
|
17
|
-
return new Promise(function (resolve, reject) {
|
|
18
|
-
var _canvas$getContext;
|
|
19
|
-
var imageData = (_canvas$getContext = canvas.getContext('2d')) === null || _canvas$getContext === void 0 ? void 0 : _canvas$getContext.getImageData(0, 0, canvas.width, canvas.height);
|
|
20
|
-
if (!imageData) {
|
|
21
|
-
reject();
|
|
22
|
-
} else if (!worker) {
|
|
23
|
-
resolve(isImageDataTransparent(imageData));
|
|
24
|
-
} else {
|
|
25
|
-
var messageHandler = function messageHandler(e) {
|
|
26
|
-
if (e.data.messageID === id) {
|
|
27
|
-
worker.removeEventListener('message', messageHandler);
|
|
28
|
-
resolve(e.data.isTransparent);
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
worker.addEventListener('message', messageHandler);
|
|
32
|
-
worker.postMessage({
|
|
33
|
-
imageData: imageData,
|
|
34
|
-
messageID: id
|
|
35
|
-
}, []);
|
|
36
|
-
}
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
|
-
isTransparent.installWorker = function installWorker() {
|
|
40
|
-
addEventListener('message', function (e) {
|
|
41
|
-
var _e$data = e.data,
|
|
42
|
-
imageData = _e$data.imageData,
|
|
43
|
-
messageID = _e$data.messageID;
|
|
44
|
-
postMessage({
|
|
45
|
-
isTransparent: isImageDataTransparent(imageData),
|
|
46
|
-
messageID: messageID
|
|
47
|
-
});
|
|
48
|
-
});
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
export { isTransparent };
|
|
52
|
-
//# sourceMappingURL=isTransparent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isTransparent.js","sources":["../../../src/isTransparent.ts"],"sourcesContent":["import { type FabricObject } from 'fabric';\n\nlet messageID = -1;\n\nconst isImageDataTransparent = (imageData: ImageData) =>\n imageData.data.every((x, i) => i % 4 !== 3 || x === 0);\n\nfunction isTransparent(object: FabricObject, worker?: Worker) {\n // should also move to offscreen\n const canvas = object.toCanvasElement({\n // multiplier: 0.1,\n enableRetinaScaling: false,\n viewportTransform: false,\n withoutTransform: true,\n withoutShadow: true,\n });\n\n const id = ++messageID;\n return new Promise<boolean>((resolve, reject) => {\n const imageData = canvas\n .getContext('2d')\n ?.getImageData(0, 0, canvas.width, canvas.height);\n\n if (!imageData) {\n reject();\n } else if (!worker) {\n resolve(isImageDataTransparent(imageData));\n } else {\n const messageHandler = (\n e: MessageEvent<{ messageID: number; isTransparent: boolean }>\n ) => {\n if (e.data.messageID === id) {\n worker.removeEventListener('message', messageHandler);\n resolve(e.data.isTransparent);\n }\n };\n worker.addEventListener('message', messageHandler);\n worker.postMessage(\n {\n imageData,\n messageID: id,\n },\n []\n );\n }\n });\n}\n\nisTransparent.installWorker = function installWorker() {\n addEventListener(\n 'message',\n (e: MessageEvent<{ imageData: ImageData; messageID: number }>) => {\n const { imageData, messageID } = e.data;\n postMessage({\n isTransparent: isImageDataTransparent(imageData),\n messageID,\n });\n }\n );\n};\n\nexport { isTransparent };\n"],"names":["messageID","isImageDataTransparent","imageData","data","every","x","i","isTransparent","object","worker","canvas","toCanvasElement","enableRetinaScaling","viewportTransform","withoutTransform","withoutShadow","id","Promise","resolve","reject","_canvas$getContext","getContext","getImageData","width","height","messageHandler","e","removeEventListener","addEventListener","postMessage","installWorker","_e$data"],"mappings":"AAEA,IAAIA,SAAS,GAAG,CAAC,CAAC,CAAA;AAElB,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIC,SAAoB,EAAA;EAAA,OAClDA,SAAS,CAACC,IAAI,CAACC,KAAK,CAAC,UAACC,CAAC,EAAEC,CAAC,EAAA;IAAA,OAAKA,CAAC,GAAG,CAAC,KAAK,CAAC,IAAID,CAAC,KAAK,CAAC,CAAA;GAAC,CAAA,CAAA;AAAA,CAAA,CAAA;AAExD,SAASE,aAAaA,CAACC,MAAoB,EAAEC,MAAe,EAAE;AAC5D;AACA,EAAA,IAAMC,MAAM,GAAGF,MAAM,CAACG,eAAe,CAAC;AACpC;AACAC,IAAAA,mBAAmB,EAAE,KAAK;AAC1BC,IAAAA,iBAAiB,EAAE,KAAK;AACxBC,IAAAA,gBAAgB,EAAE,IAAI;AACtBC,IAAAA,aAAa,EAAE,IAAA;AACjB,GAAC,CAAC,CAAA;EAEF,IAAMC,EAAE,GAAG,EAAEhB,SAAS,CAAA;AACtB,EAAA,OAAO,IAAIiB,OAAO,CAAU,UAACC,OAAO,EAAEC,MAAM,EAAK;AAAA,IAAA,IAAAC,kBAAA,CAAA;AAC/C,IAAA,IAAMlB,SAAS,GAAA,CAAAkB,kBAAA,GAAGV,MAAM,CACrBW,UAAU,CAAC,IAAI,CAAC,MAAAD,IAAAA,IAAAA,kBAAA,KADDA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,kBAAA,CAEdE,YAAY,CAAC,CAAC,EAAE,CAAC,EAAEZ,MAAM,CAACa,KAAK,EAAEb,MAAM,CAACc,MAAM,CAAC,CAAA;IAEnD,IAAI,CAACtB,SAAS,EAAE;AACdiB,MAAAA,MAAM,EAAE,CAAA;AACV,KAAC,MAAM,IAAI,CAACV,MAAM,EAAE;AAClBS,MAAAA,OAAO,CAACjB,sBAAsB,CAACC,SAAS,CAAC,CAAC,CAAA;AAC5C,KAAC,MAAM;AACL,MAAA,IAAMuB,cAAc,GAAG,SAAjBA,cAAcA,CAClBC,CAA8D,EAC3D;AACH,QAAA,IAAIA,CAAC,CAACvB,IAAI,CAACH,SAAS,KAAKgB,EAAE,EAAE;AAC3BP,UAAAA,MAAM,CAACkB,mBAAmB,CAAC,SAAS,EAAEF,cAAc,CAAC,CAAA;AACrDP,UAAAA,OAAO,CAACQ,CAAC,CAACvB,IAAI,CAACI,aAAa,CAAC,CAAA;AAC/B,SAAA;OACD,CAAA;AACDE,MAAAA,MAAM,CAACmB,gBAAgB,CAAC,SAAS,EAAEH,cAAc,CAAC,CAAA;MAClDhB,MAAM,CAACoB,WAAW,CAChB;AACE3B,QAAAA,SAAS,EAATA,SAAS;AACTF,QAAAA,SAAS,EAAEgB,EAAAA;OACZ,EACD,EACF,CAAC,CAAA;AACH,KAAA;AACF,GAAC,CAAC,CAAA;AACJ,CAAA;AAEAT,aAAa,CAACuB,aAAa,GAAG,SAASA,aAAaA,GAAG;AACrDF,EAAAA,gBAAgB,CACd,SAAS,EACT,UAACF,CAA4D,EAAK;AAChE,IAAA,IAAAK,OAAA,GAAiCL,CAAC,CAACvB,IAAI;MAA/BD,SAAS,GAAA6B,OAAA,CAAT7B,SAAS;MAAEF,SAAS,GAAA+B,OAAA,CAAT/B,SAAS,CAAA;AAC5B6B,IAAAA,WAAW,CAAC;AACVtB,MAAAA,aAAa,EAAEN,sBAAsB,CAACC,SAAS,CAAC;AAChDF,MAAAA,SAAS,EAATA,SAAAA;AACF,KAAC,CAAC,CAAA;AACJ,GACF,CAAC,CAAA;AACH,CAAC;;;;"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { FabricObject, Group, GroupProps } from 'fabric';
|
|
2
|
-
export declare class ClippingGroup extends Group {
|
|
3
|
-
static type: string;
|
|
4
|
-
private blockErasing;
|
|
5
|
-
constructor(objects: FabricObject[], options: Partial<GroupProps>);
|
|
6
|
-
drawObject(ctx: CanvasRenderingContext2D): void;
|
|
7
|
-
}
|
|
8
|
-
//# sourceMappingURL=ClippingGroup.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ClippingGroup.d.ts","sourceRoot":"","sources":["../../src/ClippingGroup.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAEZ,KAAK,EACL,UAAU,EAIX,MAAM,QAAQ,CAAC;AAEhB,qBAAa,aAAc,SAAQ,KAAK;IACtC,MAAM,CAAC,IAAI,SAAc;IAEzB,OAAO,CAAC,YAAY,CAAS;gBAEjB,OAAO,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC;IAWjE,UAAU,CAAC,GAAG,EAAE,wBAAwB;CAwBzC"}
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import * as fabric from 'fabric';
|
|
2
|
-
export type EventDetailMap = {
|
|
3
|
-
start: fabric.TEvent<fabric.TPointerEvent>;
|
|
4
|
-
move: fabric.TEvent<fabric.TPointerEvent>;
|
|
5
|
-
end: {
|
|
6
|
-
path: fabric.Path;
|
|
7
|
-
targets: fabric.FabricObject[];
|
|
8
|
-
};
|
|
9
|
-
redraw: {
|
|
10
|
-
type: 'start' | 'render';
|
|
11
|
-
};
|
|
12
|
-
cancel: never;
|
|
13
|
-
};
|
|
14
|
-
export type ErasingEventType = keyof EventDetailMap;
|
|
15
|
-
export type ErasingEvent<T extends ErasingEventType> = CustomEvent<EventDetailMap[T]>;
|
|
16
|
-
export declare function commitErasing(object: fabric.FabricObject, sourceInObjectPlane: fabric.Path): void;
|
|
17
|
-
export declare function eraseObject(object: fabric.FabricObject, source: fabric.Path): Promise<fabric.Path<Partial<fabric.PathProps>, fabric.SerializedPathProps, fabric.ObjectEvents>>;
|
|
18
|
-
export declare function eraseCanvasDrawable(object: fabric.FabricObject, vpt: fabric.TMat2D | undefined, source: fabric.Path): Promise<fabric.Path<Partial<fabric.PathProps>, fabric.SerializedPathProps, fabric.ObjectEvents>>;
|
|
19
|
-
/**
|
|
20
|
-
* Supports **selective** erasing: only erasable objects are affected by the eraser brush.
|
|
21
|
-
*
|
|
22
|
-
* Supports **{@link inverted}** erasing: the brush can "undo" erasing.
|
|
23
|
-
*
|
|
24
|
-
* Supports **alpha** erasing: setting the alpha channel of the `color` property controls the eraser intensity.
|
|
25
|
-
*
|
|
26
|
-
* In order to support selective erasing, the brush clips the entire canvas and
|
|
27
|
-
* masks all non-erasable objects over the erased path, see {@link draw}.
|
|
28
|
-
*
|
|
29
|
-
* If **{@link inverted}** draws all objects, erasable objects without their eraser, over the erased path.
|
|
30
|
-
* This achieves the desired effect of seeming to erase or undo erasing on erasable objects only.
|
|
31
|
-
*
|
|
32
|
-
* After erasing is done the `end` event {@link ErasingEndEvent} is fired, after which erasing will be committed to the tree.
|
|
33
|
-
* @example
|
|
34
|
-
* canvas = new Canvas();
|
|
35
|
-
* const eraser = new EraserBrush(canvas);
|
|
36
|
-
* canvas.freeDrawingBrush = eraser;
|
|
37
|
-
* canvas.isDrawingMode = true;
|
|
38
|
-
* eraser.on('start', (e) => {
|
|
39
|
-
* console.log('started erasing');
|
|
40
|
-
* // prevent erasing
|
|
41
|
-
* e.preventDefault();
|
|
42
|
-
* });
|
|
43
|
-
* eraser.on('end', (e) => {
|
|
44
|
-
* const { targets: erasedTargets, path } = e.detail;
|
|
45
|
-
* e.preventDefault(); // prevent erasing being committed to the tree
|
|
46
|
-
* eraser.commit({ targets: erasedTargets, path }); // commit manually since default was prevented
|
|
47
|
-
* });
|
|
48
|
-
*
|
|
49
|
-
* In case of performance issues trace {@link drawEffect} calls and consider preventing it from executing
|
|
50
|
-
* @example
|
|
51
|
-
* const eraser = new EraserBrush(canvas);
|
|
52
|
-
* eraser.on('redraw', (e) => {
|
|
53
|
-
* // prevent effect redraw on pointer down (e.g. useful if canvas didn't change)
|
|
54
|
-
* e.detail.type === 'start' && e.preventDefault());
|
|
55
|
-
* // prevent effect redraw after canvas has rendered (effect will become stale)
|
|
56
|
-
* e.detail.type === 'render' && e.preventDefault());
|
|
57
|
-
* });
|
|
58
|
-
*/
|
|
59
|
-
export declare class EraserBrush extends fabric.PencilBrush {
|
|
60
|
-
/**
|
|
61
|
-
* When set to `true` the brush will create a visual effect of undoing erasing
|
|
62
|
-
*/
|
|
63
|
-
inverted: boolean;
|
|
64
|
-
effectContext: CanvasRenderingContext2D;
|
|
65
|
-
private eventEmitter;
|
|
66
|
-
private active;
|
|
67
|
-
private _disposer?;
|
|
68
|
-
constructor(canvas: fabric.Canvas);
|
|
69
|
-
/**
|
|
70
|
-
* @returns disposer make sure to call it to avoid memory leaks
|
|
71
|
-
*/
|
|
72
|
-
on<T extends ErasingEventType>(type: T, cb: (evt: ErasingEvent<T>) => any, options?: boolean | AddEventListenerOptions): () => void;
|
|
73
|
-
drawEffect(): void;
|
|
74
|
-
/**
|
|
75
|
-
* @override
|
|
76
|
-
*/
|
|
77
|
-
_setBrushStyles(ctx?: CanvasRenderingContext2D): void;
|
|
78
|
-
/**
|
|
79
|
-
* @override strictly speaking the eraser needs a full render only if it has opacity set.
|
|
80
|
-
* However since {@link PencilBrush} is designed for subclassing that is what we have to work with.
|
|
81
|
-
*/
|
|
82
|
-
needsFullRender(): boolean;
|
|
83
|
-
/**
|
|
84
|
-
* @override erase
|
|
85
|
-
*/
|
|
86
|
-
_render(ctx?: CanvasRenderingContext2D): void;
|
|
87
|
-
/**
|
|
88
|
-
* @override {@link drawEffect}
|
|
89
|
-
*/
|
|
90
|
-
onMouseDown(pointer: fabric.Point, context: fabric.TEvent<fabric.TPointerEvent>): void;
|
|
91
|
-
/**
|
|
92
|
-
* @override run if active
|
|
93
|
-
*/
|
|
94
|
-
onMouseMove(pointer: fabric.Point, context: fabric.TEvent<fabric.TPointerEvent>): void;
|
|
95
|
-
/**
|
|
96
|
-
* @override run if active, dispose of {@link drawEffect} listener
|
|
97
|
-
*/
|
|
98
|
-
onMouseUp(context: fabric.TEvent<fabric.TPointerEvent>): boolean;
|
|
99
|
-
/**
|
|
100
|
-
* @override {@link fabric.PencilBrush} logic
|
|
101
|
-
*/
|
|
102
|
-
convertPointsToSVGPath(points: fabric.Point[]): fabric.util.TSimplePathData;
|
|
103
|
-
/**
|
|
104
|
-
* @override
|
|
105
|
-
*/
|
|
106
|
-
createPath(pathData: fabric.util.TSimplePathData): fabric.Path<Partial<fabric.PathProps>, fabric.SerializedPathProps, fabric.ObjectEvents>;
|
|
107
|
-
commit({ path, targets, }: EventDetailMap['end']): Promise<Map<fabric.FabricObject, fabric.Path>>;
|
|
108
|
-
/**
|
|
109
|
-
* @override handle events
|
|
110
|
-
*/
|
|
111
|
-
_finalizeAndAddPath(): void;
|
|
112
|
-
dispose(): void;
|
|
113
|
-
}
|
|
114
|
-
//# sourceMappingURL=EraserBrush.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"EraserBrush.d.ts","sourceRoot":"","sources":["../../src/EraserBrush.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { Canvas, FabricObject } from 'fabric';
|
|
2
|
-
/**
|
|
3
|
-
* Prepare the pattern for the erasing brush
|
|
4
|
-
* This pattern will be drawn on the top context after clipping the main context,
|
|
5
|
-
* achieving a visual effect of erasing only erasable objects.
|
|
6
|
-
*
|
|
7
|
-
* This is designed to support erasing a collection with both erasable and non-erasable objects while maintaining object stacking.\
|
|
8
|
-
* Iterates over collections to allow nested selective erasing.\
|
|
9
|
-
* Prepares objects before rendering the pattern brush.\
|
|
10
|
-
* If brush is **NOT** inverted render all non-erasable objects.\
|
|
11
|
-
* If brush is inverted render all objects, erasable objects without their eraser.
|
|
12
|
-
* This will render the erased parts as if they were not erased in the first place, achieving an undo effect.
|
|
13
|
-
*
|
|
14
|
-
* Caveat:
|
|
15
|
-
* Does not support erasing effects of shadows
|
|
16
|
-
*
|
|
17
|
-
*/
|
|
18
|
-
export declare function draw(ctx: CanvasRenderingContext2D, { inverted, opacity }: {
|
|
19
|
-
inverted: boolean;
|
|
20
|
-
opacity: number;
|
|
21
|
-
}, { canvas, objects, background, overlay, }: {
|
|
22
|
-
canvas: Canvas;
|
|
23
|
-
objects?: FabricObject[];
|
|
24
|
-
background?: FabricObject;
|
|
25
|
-
overlay?: FabricObject;
|
|
26
|
-
}): void;
|
|
27
|
-
//# sourceMappingURL=ErasingEffect.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ErasingEffect.d.ts","sourceRoot":"","sources":["../../src/ErasingEffect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,YAAY,EAAS,MAAM,QAAQ,CAAC;AA+CrD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,IAAI,CAClB,GAAG,EAAE,wBAAwB,EAC7B,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,EAC7D,EACE,MAAM,EACN,OAAoD,EACpD,UAAmC,EACnC,OAA6B,GAC9B,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB,QAwCF"}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { type FabricObject } from 'fabric';
|
|
2
|
-
declare function isTransparent(object: FabricObject, worker?: Worker): Promise<boolean>;
|
|
3
|
-
declare namespace isTransparent {
|
|
4
|
-
var installWorker: () => void;
|
|
5
|
-
}
|
|
6
|
-
export { isTransparent };
|
|
7
|
-
//# sourceMappingURL=isTransparent.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"isTransparent.d.ts","sourceRoot":"","sources":["../../src/isTransparent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,QAAQ,CAAC;AAO3C,iBAAS,aAAa,CAAC,MAAM,EAAE,YAAY,EAAE,MAAM,CAAC,EAAE,MAAM,oBAuC3D;kBAvCQ,aAAa;;;AAsDtB,OAAO,EAAE,aAAa,EAAE,CAAC"}
|