@nasser-sw/fabric 7.0.0-beta1 → 7.0.1-beta10
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/0 +0 -0
- package/debug/{konva → konva-master}/CHANGELOG.md +2 -1
- package/debug/{konva → konva-master}/README.md +7 -3
- package/debug/{konva → konva-master}/package.json +1 -1
- package/debug/{konva → konva-master}/release.sh +1 -4
- package/debug/{konva → konva-master}/src/Canvas.ts +37 -0
- package/debug/{konva → konva-master}/src/shapes/Text.ts +2 -2
- package/dist/index.js +2198 -272
- 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 +2198 -272
- package/dist/index.mjs.map +1 -1
- package/dist/index.node.cjs +2198 -272
- package/dist/index.node.cjs.map +1 -1
- package/dist/index.node.mjs +2198 -272
- 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 +33 -86
- 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 +405 -159
- package/dist/src/shapes/Line.mjs.map +1 -1
- package/dist/src/shapes/Polyline.d.ts +7 -0
- package/dist/src/shapes/Polyline.d.ts.map +1 -1
- package/dist/src/shapes/Polyline.min.mjs +1 -1
- package/dist/src/shapes/Polyline.min.mjs.map +1 -1
- package/dist/src/shapes/Polyline.mjs +48 -16
- package/dist/src/shapes/Polyline.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 +302 -16
- package/dist/src/shapes/Text/Text.mjs.map +1 -1
- package/dist/src/shapes/Textbox.d.ts +56 -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 +633 -11
- package/dist/src/shapes/Textbox.mjs.map +1 -1
- package/dist/src/shapes/Triangle.d.ts +27 -2
- package/dist/src/shapes/Triangle.d.ts.map +1 -1
- package/dist/src/shapes/Triangle.min.mjs +1 -1
- package/dist/src/shapes/Triangle.min.mjs.map +1 -1
- package/dist/src/shapes/Triangle.mjs +72 -12
- package/dist/src/shapes/Triangle.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 +8 -0
- 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 +395 -56
- 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/src/util/misc/cornerRadius.d.ts +70 -0
- package/dist/src/util/misc/cornerRadius.d.ts.map +1 -0
- package/dist/src/util/misc/cornerRadius.min.mjs +2 -0
- package/dist/src/util/misc/cornerRadius.min.mjs.map +1 -0
- package/dist/src/util/misc/cornerRadius.mjs +181 -0
- package/dist/src/util/misc/cornerRadius.mjs.map +1 -0
- package/dist-extensions/src/shapes/CustomLine.d.ts +10 -0
- package/dist-extensions/src/shapes/CustomLine.d.ts.map +1 -0
- package/dist-extensions/src/shapes/Line.d.ts +33 -86
- package/dist-extensions/src/shapes/Line.d.ts.map +1 -1
- package/dist-extensions/src/shapes/Polyline.d.ts +7 -0
- package/dist-extensions/src/shapes/Polyline.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 +56 -1
- package/dist-extensions/src/shapes/Textbox.d.ts.map +1 -1
- package/dist-extensions/src/shapes/Triangle.d.ts +27 -2
- package/dist-extensions/src/shapes/Triangle.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 +8 -0
- 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/dist-extensions/src/util/misc/cornerRadius.d.ts +70 -0
- package/dist-extensions/src/util/misc/cornerRadius.d.ts.map +1 -0
- package/fabric-test-editor.html +3552 -0
- package/fabric-test2.html +647 -0
- package/fabric.ts +182 -182
- package/fonts/STV Bold.ttf +0 -0
- package/fonts/STV Light.ttf +0 -0
- package/fonts/STV Regular.ttf +0 -0
- package/package.json +164 -164
- package/src/shapes/Line.ts +484 -157
- package/src/shapes/Polyline.ts +70 -29
- package/src/shapes/Text/Text.ts +317 -19
- package/src/shapes/Textbox.ts +663 -12
- package/src/shapes/Triangle.spec.ts +76 -0
- package/src/shapes/Triangle.ts +85 -15
- package/src/text/measure.ts +200 -50
- package/src/text/overlayEditor.ts +504 -94
- package/src/util/misc/cornerRadius.spec.ts +141 -0
- package/src/util/misc/cornerRadius.ts +269 -0
- /package/debug/{konva → konva-master}/LICENSE +0 -0
- /package/debug/{konva → konva-master}/gulpfile.mjs +0 -0
- /package/debug/{konva → konva-master}/resources/doc-includes/ContainerParams.txt +0 -0
- /package/debug/{konva → konva-master}/resources/doc-includes/NodeParams.txt +0 -0
- /package/debug/{konva → konva-master}/resources/doc-includes/ShapeParams.txt +0 -0
- /package/debug/{konva → konva-master}/resources/jsdoc.conf.json +0 -0
- /package/debug/{konva → konva-master}/rollup.config.mjs +0 -0
- /package/debug/{konva → konva-master}/src/Animation.ts +0 -0
- /package/debug/{konva → konva-master}/src/BezierFunctions.ts +0 -0
- /package/debug/{konva → konva-master}/src/Container.ts +0 -0
- /package/debug/{konva → konva-master}/src/Context.ts +0 -0
- /package/debug/{konva → konva-master}/src/Core.ts +0 -0
- /package/debug/{konva → konva-master}/src/DragAndDrop.ts +0 -0
- /package/debug/{konva → konva-master}/src/Factory.ts +0 -0
- /package/debug/{konva → konva-master}/src/FastLayer.ts +0 -0
- /package/debug/{konva → konva-master}/src/Global.ts +0 -0
- /package/debug/{konva → konva-master}/src/Group.ts +0 -0
- /package/debug/{konva → konva-master}/src/Layer.ts +0 -0
- /package/debug/{konva → konva-master}/src/Node.ts +0 -0
- /package/debug/{konva → konva-master}/src/PointerEvents.ts +0 -0
- /package/debug/{konva → konva-master}/src/Shape.ts +0 -0
- /package/debug/{konva → konva-master}/src/Stage.ts +0 -0
- /package/debug/{konva → konva-master}/src/Tween.ts +0 -0
- /package/debug/{konva → konva-master}/src/Util.ts +0 -0
- /package/debug/{konva → konva-master}/src/Validators.ts +0 -0
- /package/debug/{konva → konva-master}/src/_CoreInternals.ts +0 -0
- /package/debug/{konva → konva-master}/src/_FullInternals.ts +0 -0
- /package/debug/{konva → konva-master}/src/canvas-backend.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Blur.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Brighten.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Brightness.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Contrast.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Emboss.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Enhance.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Grayscale.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/HSL.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/HSV.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Invert.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Kaleidoscope.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Mask.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Noise.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Pixelate.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Posterize.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/RGB.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/RGBA.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Sepia.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Solarize.ts +0 -0
- /package/debug/{konva → konva-master}/src/filters/Threshold.ts +0 -0
- /package/debug/{konva → konva-master}/src/index.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Arc.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Arrow.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Circle.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Ellipse.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Image.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Label.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Line.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Path.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Rect.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/RegularPolygon.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Ring.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Sprite.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Star.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/TextPath.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Transformer.ts +0 -0
- /package/debug/{konva → konva-master}/src/shapes/Wedge.ts +0 -0
- /package/debug/{konva → konva-master}/src/skia-backend.ts +0 -0
- /package/debug/{konva → konva-master}/src/types.ts +0 -0
- /package/debug/{konva → konva-master}/tsconfig.json +0 -0
- /package/debug/{konva → konva-master}/tsconfig.test.json +0 -0
package/0
ADDED
|
File without changes
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
This project adheres to [Semantic Versioning](http://semver.org/).
|
|
5
5
|
|
|
6
|
-
## 10.0.0
|
|
6
|
+
## 10.0.0 (2025-09-07)
|
|
7
7
|
|
|
8
8
|
### Breaking Changes
|
|
9
9
|
|
|
@@ -85,6 +85,7 @@ var text = new Konva.Text({
|
|
|
85
85
|
|
|
86
86
|
- **Performance**: Rewrote Emboss and Solarize filters for improved performance and usability
|
|
87
87
|
- Changed return type of `node.toImage()`
|
|
88
|
+
- Brave detection and warning
|
|
88
89
|
|
|
89
90
|
## 9.3.22 (2025-07-08)
|
|
90
91
|
|
|
@@ -22,7 +22,7 @@ This repository began as a GitHub fork of [ericdrowell/KineticJS](https://github
|
|
|
22
22
|
# Quick Look
|
|
23
23
|
|
|
24
24
|
```html
|
|
25
|
-
<script src="https://unpkg.com/konva@
|
|
25
|
+
<script src="https://unpkg.com/konva@10.0.0-1/konva.min.js"></script>
|
|
26
26
|
<div id="container"></div>
|
|
27
27
|
<script>
|
|
28
28
|
var stage = new Konva.Stage({
|
|
@@ -75,7 +75,7 @@ Konva supports UMD loading. So you can use all possible variants to load the fra
|
|
|
75
75
|
### Load Konva via classical `<script>` tag from CDN:
|
|
76
76
|
|
|
77
77
|
```html
|
|
78
|
-
<script src="https://unpkg.com/konva@
|
|
78
|
+
<script src="https://unpkg.com/konva@10.0.0-1/konva.min.js"></script>
|
|
79
79
|
```
|
|
80
80
|
|
|
81
81
|
### Install with npm:
|
|
@@ -126,16 +126,20 @@ import { Blur } from 'konva/lib/filters/Blur';
|
|
|
126
126
|
|
|
127
127
|
### 4 NodeJS env
|
|
128
128
|
|
|
129
|
-
In order to run `konva` in nodejs environment you also need to install `canvas` package manually
|
|
129
|
+
In order to run `konva` in nodejs environment you also need to install `canvas` or `skia-canvas` package manually for rendering backend.
|
|
130
130
|
|
|
131
131
|
```bash
|
|
132
|
+
# node-canvas backend
|
|
132
133
|
npm install konva canvas
|
|
134
|
+
# skia-canvas backend
|
|
135
|
+
npm install konva skia-canvas
|
|
133
136
|
```
|
|
134
137
|
|
|
135
138
|
Then you can use the same Konva API and all Konva demos will work just fine. You just don't need to use `container` attribute in your stage.
|
|
136
139
|
|
|
137
140
|
```js
|
|
138
141
|
import Konva from 'konva';
|
|
142
|
+
import 'konva/canvas-backend'; // or import 'konva/skia-backend';
|
|
139
143
|
|
|
140
144
|
const stage = new Konva.Stage({
|
|
141
145
|
width: 500,
|
|
@@ -5,9 +5,6 @@ old_version="$(git describe --abbrev=0 --tags)"
|
|
|
5
5
|
new_version=$1
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
old_cdn="https://unpkg.com/konva@${old_version}/konva.js"
|
|
9
|
-
new_cdn="https://unpkg.com/konva@${new_version}/konva.js"
|
|
10
|
-
|
|
11
8
|
old_cdn_min="https://unpkg.com/konva@${old_version}/konva.min.js"
|
|
12
9
|
new_cdn_min="https://unpkg.com/konva@${new_version}/konva.min.js"
|
|
13
10
|
|
|
@@ -59,7 +56,7 @@ git tag $1 >/dev/null
|
|
|
59
56
|
cd ../konva
|
|
60
57
|
git push >/dev/null
|
|
61
58
|
git push --tags >/dev/null
|
|
62
|
-
npm publish
|
|
59
|
+
npm publish
|
|
63
60
|
|
|
64
61
|
|
|
65
62
|
echo "DONE!"
|
|
@@ -182,6 +182,42 @@ export class SceneCanvas extends Canvas {
|
|
|
182
182
|
}
|
|
183
183
|
}
|
|
184
184
|
|
|
185
|
+
// function checks if canvas farbling is active
|
|
186
|
+
// canvas farbling is a Browser security feature, it break konva internals
|
|
187
|
+
function isCanvasFarblingActive() {
|
|
188
|
+
const c = Util.createCanvasElement();
|
|
189
|
+
c.width = 1;
|
|
190
|
+
c.height = 1;
|
|
191
|
+
const ctx = c.getContext('2d', {
|
|
192
|
+
willReadFrequently: true,
|
|
193
|
+
}) as CanvasRenderingContext2D;
|
|
194
|
+
ctx.clearRect(0, 0, 1, 1);
|
|
195
|
+
ctx.fillStyle = 'rgba(255,0,255,1)'; // clear #FF00FF, no alpha
|
|
196
|
+
ctx.fillRect(0, 0, 1, 1);
|
|
197
|
+
const d = ctx.getImageData(0, 0, 1, 1).data;
|
|
198
|
+
const exact = d[0] === 255 && d[1] === 0 && d[2] === 255 && d[3] === 255;
|
|
199
|
+
return !exact;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
function isBraveBrowser() {
|
|
203
|
+
if (typeof navigator === 'undefined') {
|
|
204
|
+
return false;
|
|
205
|
+
}
|
|
206
|
+
// @ts-ignore
|
|
207
|
+
return navigator.brave?.isBrave() ?? false;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
let warned = false;
|
|
211
|
+
function checkHitCanvasSupport() {
|
|
212
|
+
if (isBraveBrowser() && isCanvasFarblingActive() && !warned) {
|
|
213
|
+
warned = true;
|
|
214
|
+
Util.error(
|
|
215
|
+
'Looks like you have "Brave shield" enabled in your browser. It breaks KonvaJS internals. Please disable it. You may need to ask your users to do the same.'
|
|
216
|
+
);
|
|
217
|
+
}
|
|
218
|
+
return isBraveBrowser() && isCanvasFarblingActive();
|
|
219
|
+
}
|
|
220
|
+
|
|
185
221
|
export class HitCanvas extends Canvas {
|
|
186
222
|
hitCanvas = true;
|
|
187
223
|
constructor(config: ICanvasConfig = { width: 0, height: 0 }) {
|
|
@@ -189,5 +225,6 @@ export class HitCanvas extends Canvas {
|
|
|
189
225
|
|
|
190
226
|
this.context = new HitContext(this);
|
|
191
227
|
this.setSize(config.width, config.height);
|
|
228
|
+
checkHitCanvasSupport();
|
|
192
229
|
}
|
|
193
230
|
}
|
|
@@ -1052,8 +1052,8 @@ Factory.addGetterSetter(Text, 'textDecoration', '');
|
|
|
1052
1052
|
* Note: per-character rendering may disable native kerning/ligatures.
|
|
1053
1053
|
* @name Konva.Text#charRenderFunc
|
|
1054
1054
|
* @method
|
|
1055
|
-
* @param {
|
|
1056
|
-
* @returns {
|
|
1055
|
+
* @param {Function} charRenderFunc
|
|
1056
|
+
* @returns {Function}
|
|
1057
1057
|
* @example
|
|
1058
1058
|
* // apply small x-translation to every second character
|
|
1059
1059
|
* text.charRenderFunc(function(props) {
|