lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-06-28 06:31:15 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: lsm:9.3.16
Branches Tags
lsm:master
lsm:codex/resolve-mouseleave-vs-pointerleave-behavior
lsm:revert-1377-revert-1372-cg/touch_click_propagation
lsm:revert-1372-cg/touch_click_propagation
lsm:sutr90-master
lsm:iceafish-patch-6
lsm:jquense-pointer-event-fixes
lsm:jquense-wip-pointer-events
lsm:rfestag-master
lsm:tole42-master
lsm:andrewDyakin-master
lsm:VladimirTechMan-master
lsm:allada-master
lsm:MaxGraey-fix-unscalable-strokes
lsm:seethroughtrees-feature/arrow
lsm:seethroughtrees-feature/findOne
lsm:MaxGraey-add-stroke-gradient
lsm:9.3.20
lsm:9.3.19
lsm:9.3.18
lsm:9.3.17
lsm:9.3.16
lsm:9.3.15
lsm:9.3.14
lsm:9.3.13
lsm:9.3.12
lsm:9.3.11
lsm:9.3.10
lsm:9.3.9
lsm:9.3.8
lsm:9.3.7
lsm:9.3.6
lsm:9.3.5
lsm:9.3.4
lsm:9.3.3
lsm:9.3.2
lsm:9.3.1
lsm:9.3.0
lsm:9.2.3
lsm:9.2.2
lsm:9.2.1
lsm:9.2.0
lsm:9.1.0
lsm:9.0.2
lsm:9.0.1
lsm:9.0.0
lsm:8.4.3
lsm:8.4.2
lsm:8.4.1
lsm:8.4.0
lsm:8.3.14
lsm:8.3.13
lsm:8.3.12
lsm:8.3.11
lsm:8.3.10
lsm:8.3.9
lsm:8.3.8
lsm:8.3.7
lsm:8.3.6
lsm:8.3.5
lsm:8.3.4
lsm:8.3.3
lsm:8.3.2
lsm:8.3.1
lsm:8.3.0
lsm:8.2.4
lsm:8.2.3
lsm:8.2.2
lsm:8.2.1
lsm:8.2.0
lsm:8.1.4
lsm:8.1.3
lsm:8.1.2
lsm:8.1.1
lsm:8.1.0
lsm:8.0.4
lsm:8.0.3
lsm:8.0.2
lsm:8.0.1
lsm:8.0.0
lsm:7.2.5
lsm:7.2.4
lsm:7.2.3
lsm:7.2.2
lsm:7.2.1
lsm:7.2.0
lsm:7.1.9
lsm:7.1.8
lsm:7.1.7
lsm:7.1.6
lsm:7.1.5
lsm:7.1.4
lsm:7.1.3
lsm:7.1.2
lsm:7.1.1
lsm:7.1.0
lsm:7.0.7
lsm:7.0.6
lsm:7.0.5
lsm:7.0.4
lsm:7.0.3
lsm:7.0.2
lsm:7.0.1
lsm:7.0.0
lsm:6.0.0
lsm:5.0.3
lsm:5.0.2
lsm:5.0.1
lsm:5.0.0
lsm:4.2.2
lsm:4.2.1
lsm:4.2.0
lsm:4.1.6
lsm:4.1.5
lsm:4.1.4
lsm:4.1.3
lsm:4.1.2
lsm:4.1.1
lsm:4.1.0
lsm:4.0.18
lsm:4.0.17
lsm:4.0.16
lsm:4.0.15
lsm:4.0.14
lsm:4.0.13
lsm:4.0.12
lsm:4.0.11
lsm:4.0.10
lsm:4.0.9
lsm:4.0.8
lsm:4.0.7
lsm:4.0.6
lsm:4.0.5
lsm:4.0.4
lsm:4.0.3
lsm:4.0.2
lsm:4.0.1
lsm:4.0.0
lsm:3.4.1
lsm:3.4.0
lsm:3.3.3
lsm:3.3.2
lsm:3.3.1
lsm:3.3.0
lsm:3.2.7
lsm:3.2.6
lsm:3.2.5
lsm:3.2.4
lsm:3.2.3
lsm:3.2.2
lsm:3.2.1
lsm:3.2.0
lsm:3.1.7
lsm:3.1.6
lsm:3.1.5
lsm:3.1.4
lsm:3.1.3
lsm:3.1.2
lsm:3.1.1
lsm:3.1.0
lsm:3.0.0
lsm:2.6.0
lsm:2.5.1
lsm:2.5.0
lsm:2.4.2
lsm:2.4.1
lsm:2.4.0
lsm:2.3.0
lsm:2.2.2
lsm:2.2.1
lsm:2.2.0
lsm:2.1.8
lsm:2.1.7
lsm:2.1.6
lsm:2.1.5
lsm:2.1.4
lsm:2.1.3
lsm:2.1.2
lsm:2.1.0
lsm:2.0.3
lsm:2.0.2
lsm:2.0.1
lsm:2.0.0
lsm:1.7.6
lsm:1.7.5
lsm:1.7.4
lsm:1.7.3
lsm:1.7.2
lsm:1.7.1
lsm:1.7.0
lsm:1.6.8
lsm:1.6.7
lsm:1.6.6
lsm:1.6.5
lsm:1.6.3
lsm:1.6.2
lsm:1.6.1
lsm:1.6.0
lsm:1.5.0
lsm:1.4.0
lsm:1.3.0
lsm:1.2.2
lsm:1.2.1
lsm:1.2.0
lsm:1.1.4
lsm:1.1.3
lsm:1.1.2
lsm:1.1.1
lsm:1.1.0
lsm:1.0.3
lsm:1.0.2
lsm:1.0.1
lsm:1.0.0
lsm:0.15.0
lsm:0.14.0
lsm:0.13.0
lsm:0.12.4
lsm:0.12.3
lsm:0.12.2
lsm:0.12.1
lsm:0.12.0
lsm:0.11.1
lsm:0.11.0
lsm:0.10.0
lsm:0.9.5
lsm:0.9.0
lsm:0.8.0
lsm:0.7.0
...
compare: lsm:master
Branches Tags
lsm:master
lsm:codex/resolve-mouseleave-vs-pointerleave-behavior
lsm:revert-1377-revert-1372-cg/touch_click_propagation
lsm:revert-1372-cg/touch_click_propagation
lsm:sutr90-master
lsm:iceafish-patch-6
lsm:jquense-pointer-event-fixes
lsm:jquense-wip-pointer-events
lsm:rfestag-master
lsm:tole42-master
lsm:andrewDyakin-master
lsm:VladimirTechMan-master
lsm:allada-master
lsm:MaxGraey-fix-unscalable-strokes
lsm:seethroughtrees-feature/arrow
lsm:seethroughtrees-feature/findOne
lsm:MaxGraey-add-stroke-gradient
lsm:9.3.20
lsm:9.3.19
lsm:9.3.18
lsm:9.3.17
lsm:9.3.16
lsm:9.3.15
lsm:9.3.14
lsm:9.3.13
lsm:9.3.12
lsm:9.3.11
lsm:9.3.10
lsm:9.3.9
lsm:9.3.8
lsm:9.3.7
lsm:9.3.6
lsm:9.3.5
lsm:9.3.4
lsm:9.3.3
lsm:9.3.2
lsm:9.3.1
lsm:9.3.0
lsm:9.2.3
lsm:9.2.2
lsm:9.2.1
lsm:9.2.0
lsm:9.1.0
lsm:9.0.2
lsm:9.0.1
lsm:9.0.0
lsm:8.4.3
lsm:8.4.2
lsm:8.4.1
lsm:8.4.0
lsm:8.3.14
lsm:8.3.13
lsm:8.3.12
lsm:8.3.11
lsm:8.3.10
lsm:8.3.9
lsm:8.3.8
lsm:8.3.7
lsm:8.3.6
lsm:8.3.5
lsm:8.3.4
lsm:8.3.3
lsm:8.3.2
lsm:8.3.1
lsm:8.3.0
lsm:8.2.4
lsm:8.2.3
lsm:8.2.2
lsm:8.2.1
lsm:8.2.0
lsm:8.1.4
lsm:8.1.3
lsm:8.1.2
lsm:8.1.1
lsm:8.1.0
lsm:8.0.4
lsm:8.0.3
lsm:8.0.2
lsm:8.0.1
lsm:8.0.0
lsm:7.2.5
lsm:7.2.4
lsm:7.2.3
lsm:7.2.2
lsm:7.2.1
lsm:7.2.0
lsm:7.1.9
lsm:7.1.8
lsm:7.1.7
lsm:7.1.6
lsm:7.1.5
lsm:7.1.4
lsm:7.1.3
lsm:7.1.2
lsm:7.1.1
lsm:7.1.0
lsm:7.0.7
lsm:7.0.6
lsm:7.0.5
lsm:7.0.4
lsm:7.0.3
lsm:7.0.2
lsm:7.0.1
lsm:7.0.0
lsm:6.0.0
lsm:5.0.3
lsm:5.0.2
lsm:5.0.1
lsm:5.0.0
lsm:4.2.2
lsm:4.2.1
lsm:4.2.0
lsm:4.1.6
lsm:4.1.5
lsm:4.1.4
lsm:4.1.3
lsm:4.1.2
lsm:4.1.1
lsm:4.1.0
lsm:4.0.18
lsm:4.0.17
lsm:4.0.16
lsm:4.0.15
lsm:4.0.14
lsm:4.0.13
lsm:4.0.12
lsm:4.0.11
lsm:4.0.10
lsm:4.0.9
lsm:4.0.8
lsm:4.0.7
lsm:4.0.6
lsm:4.0.5
lsm:4.0.4
lsm:4.0.3
lsm:4.0.2
lsm:4.0.1
lsm:4.0.0
lsm:3.4.1
lsm:3.4.0
lsm:3.3.3
lsm:3.3.2
lsm:3.3.1
lsm:3.3.0
lsm:3.2.7
lsm:3.2.6
lsm:3.2.5
lsm:3.2.4
lsm:3.2.3
lsm:3.2.2
lsm:3.2.1
lsm:3.2.0
lsm:3.1.7
lsm:3.1.6
lsm:3.1.5
lsm:3.1.4
lsm:3.1.3
lsm:3.1.2
lsm:3.1.1
lsm:3.1.0
lsm:3.0.0
lsm:2.6.0
lsm:2.5.1
lsm:2.5.0
lsm:2.4.2
lsm:2.4.1
lsm:2.4.0
lsm:2.3.0
lsm:2.2.2
lsm:2.2.1
lsm:2.2.0
lsm:2.1.8
lsm:2.1.7
lsm:2.1.6
lsm:2.1.5
lsm:2.1.4
lsm:2.1.3
lsm:2.1.2
lsm:2.1.0
lsm:2.0.3
lsm:2.0.2
lsm:2.0.1
lsm:2.0.0
lsm:1.7.6
lsm:1.7.5
lsm:1.7.4
lsm:1.7.3
lsm:1.7.2
lsm:1.7.1
lsm:1.7.0
lsm:1.6.8
lsm:1.6.7
lsm:1.6.6
lsm:1.6.5
lsm:1.6.3
lsm:1.6.2
lsm:1.6.1
lsm:1.6.0
lsm:1.5.0
lsm:1.4.0
lsm:1.3.0
lsm:1.2.2
lsm:1.2.1
lsm:1.2.0
lsm:1.1.4
lsm:1.1.3
lsm:1.1.2
lsm:1.1.1
lsm:1.1.0
lsm:1.0.3
lsm:1.0.2
lsm:1.0.1
lsm:1.0.0
lsm:0.15.0
lsm:0.14.0
lsm:0.13.0
lsm:0.12.4
lsm:0.12.3
lsm:0.12.2
lsm:0.12.1
lsm:0.12.0
lsm:0.11.1
lsm:0.11.0
lsm:0.10.0
lsm:0.9.5
lsm:0.9.0
lsm:0.8.0
lsm:0.7.0

88 Commits
9.3.16 ... master

Author SHA1 Message Date
Anton Lavrenov
27fc1b1ba5
Merge pull request #1933 from konvajs/codex/resolve-mouseleave-vs-pointerleave-behavior
Some checks failed
Test Browser / build (20.x) (push) Has been cancelled
Details
Test NodeJS / build (23.x) (push) Has been cancelled
Details 
Fix pointerleave bubbling behavior
 2025-06-05 16:18:06 -05:00
Anton Lavrenov
cdd61d7179 fix pointerleave bubbling 2025-06-05 16:13:49 -05:00
Anton Lavrenov
f00fd70756
Merge pull request #1929 from MarwanFr/patch-1
Some checks failed
Test Browser / build (20.x) (push) Has been cancelled
Details
Test NodeJS / build (23.x) (push) Has been cancelled
Details 
Fix url of docs and api
 2025-05-05 12:51:58 -05:00
Marwan
faa2203da7
Fix url of docs and api 2025-05-03 14:11:59 +02:00
Anton Lavrenov
3442071bdd
Merge pull request #1919 from tbo47/typescript-improve
Some checks failed
Test Browser / build (20.x) (push) Has been cancelled
Details
Test NodeJS / build (23.x) (push) Has been cancelled
Details 
typescript improvments
 2025-04-10 17:59:50 -05:00
tbo47
9c59566a9b typescript improvments 2025-04-10 13:05:36 +00:00
Anton Lavrenov
ca9be838a8
Merge pull request #1915 from tbo47/master 
add types
 2025-04-08 11:10:29 -05:00
tbo47
09f2838d43 add types 2025-04-08 14:59:13 +00:00
tbo47
a4980fccdc add types 2025-04-08 14:46:18 +00:00
Anton Lavrenov
35873586db
Merge pull request #1913 from tbo47/master 
var let const
 2025-04-04 20:15:30 -05:00
tbo47
88e3d2a088 var let const 2025-04-04 13:01:18 +00:00
Anton Lavrevov
791a786c81 Merge branch 'master' of github.com:konvajs/konva 2025-04-03 17:21:20 -05:00
Anton Lavrevov
a29157a528 FINALLY FIX THAT DAMN NODE TEST! 2025-04-03 17:21:13 -05:00
Anton Lavrenov
dc8b9df1f5
Merge pull request #1910 from tbo47/master 
let var const
 2025-04-03 14:36:23 -05:00
Anton Lavrevov
1ff1885de9 changes 2025-04-03 13:04:23 -05:00
Anton Lavrevov
3d5a216f23 Merge branch 'master' of github.com:konvajs/konva 2025-04-03 13:03:32 -05:00
Anton Lavrevov
2e08f7319f fix caching when buffer is used. close #1886 
fix svg length calculation. close #1869
 2025-04-03 13:03:06 -05:00
tbo47
e12365f14f let var const 2025-03-31 16:30:12 +00:00
Anton Lavrenov
fe80a44407
Merge pull request #1905 from tbo47/master 
refactor const let
 2025-03-28 14:19:03 -05:00
Anton Lavrevov
8211db3233 update justify option 2025-03-28 14:13:08 -05:00
Anton Lavrevov
f32a416e03 Fixed tween destroy memory leak. close #1898 2025-03-28 13:08:04 -05:00
Anton Lavrevov
fd77f305d1 fix buffer usage in export for stage and layer. fix #1903 2025-03-28 12:52:40 -05:00
tbo47
53a4b494ee better let const var variable 2025-03-27 10:16:05 +00:00
tbo47
9f5a7f0e2d better let const var variable 2025-03-27 08:58:12 +00:00
Anton Lavrevov
4eddaf813d update cdn link
Some checks failed
Test Browser / build (20.x) (push) Has been cancelled
Details
Test NodeJS / build (23.x) (push) Has been cancelled
Details
2025-03-20 15:40:18 -05:00
Anton Lavrevov
e9c4387159 build for 9.3.20 2025-03-20 15:40:18 -05:00
Anton Lavrevov
244fb2448a update CHANGELOG with new version 2025-03-20 15:40:15 -05:00
Anton Lavrevov
bdd43b239c fix test 2025-03-20 14:27:08 -05:00
Anton Lavrevov
1fb391d551 better text calculations on ellipsis config 2025-03-20 14:26:01 -05:00
Anton Lavrevov
224e60e32d update cdn link
Some checks failed
Test Browser / build (20.x) (push) Has been cancelled
Details
Test NodeJS / build (23.x) (push) Has been cancelled
Details
2025-03-12 07:52:05 -07:00
Anton Lavrevov
bc0e4edc07 build for 9.3.19 2025-03-12 07:52:04 -07:00
Anton Lavrevov
acb19bd552 update CHANGELOG with new version 2025-03-12 07:52:02 -07:00
Anton Lavrevov
2f5f0557cc changes 2025-03-12 07:51:46 -07:00
Anton Lavrevov
538c422f9d Merge branch 'master' of github.com:konvajs/konva 2025-03-12 07:48:55 -07:00
Anton Lavrevov
48ce5e9712 fix memory leak. close #1896 2025-03-12 07:48:47 -07:00
Anton Lavrevov
3e8f0dff8f docs fix 2025-03-12 07:29:07 -07:00
Anton Lavrenov
bd5482766a
Merge pull request #1888 from tonyzhou1890/master
Some checks failed
Test Browser / build (20.x) (push) Has been cancelled
Details
Test NodeJS / build (23.x) (push) Has been cancelled
Details 
fix: Transformer doesn't change when the angle of Arc changes #1871
 2025-02-17 09:21:58 -05:00
tonyzhou1890
13fc7da406 fix: Transformer doesn't change when the angle of Arc changes 2025-02-17 19:54:44 +08:00
Anton Lavrevov
dd19e32ba8 docs fixes
Some checks failed
Test Browser / build (20.x) (push) Has been cancelled
Details
Test NodeJS / build (23.x) (push) Has been cancelled
Details
2025-02-13 11:21:34 -05:00
Anton Lavrevov
ff8632e099 try another way
Some checks failed
Test Browser / build (20.x) (push) Has been cancelled
Details
Test NodeJS / build (23.x) (push) Has been cancelled
Details
2025-01-23 13:52:05 -05:00
Anton Lavrevov
f8d2d0a624 change parce build 2025-01-23 13:46:53 -05:00
Anton Lavrevov
3d561edf37 restore test 2025-01-23 13:43:37 -05:00
Anton Lavrevov
cb98acd0e3 try another node version 2025-01-23 13:43:25 -05:00
Anton Lavrevov
56a8ca7cdc rollback ubuntu 2025-01-23 13:40:33 -05:00
Anton Lavrevov
88578bae63 try build 2025-01-23 13:37:27 -05:00
Anton Lavrevov
8a9933484c try to add a flag 2025-01-23 12:51:37 -05:00
Anton Lavrevov
c2942a8927 update deps
Some checks are pending
Test Browser / build (23.x) (push) Waiting to run
Details
Test NodeJS / build (23.x) (push) Waiting to run
Details
2025-01-23 12:03:01 -05:00
Anton Lavrevov
9b989b41aa Enhance Transformer event handling and add unit test for cleanup of subscriptions. Ensure event listeners are properly managed on transformer destruction. fix #1872
Some checks are pending
Test Browser / build (23.x) (push) Waiting to run
Details
Test NodeJS / build (23.x) (push) Waiting to run
Details
2025-01-22 09:02:12 -05:00
Anton Lavrevov
9e790a36ee typescript fixes. close #1866
Some checks failed
Test Browser / build (23.x) (push) Has been cancelled
Details
Test NodeJS / build (23.x) (push) Has been cancelled
Details
2024-12-23 14:16:19 -05:00
Anton Lavrevov
6e28a2a93b update cdn link 2024-12-23 12:32:56 -05:00
Anton Lavrevov
10f382d465 build for 9.3.18 2024-12-23 12:32:56 -05:00
Anton Lavrevov
52b48fb662 update CHANGELOG with new version 2024-12-23 12:32:53 -05:00
Anton Lavrevov
765258d69f add changes 2024-12-23 12:32:32 -05:00
Anton Lavrevov
adba0073e3 fixes in emoji rendering 2024-12-23 12:29:30 -05:00
Anton Lavrevov
f2ed14fa08 update cdn link 2024-12-23 10:07:58 -05:00
Anton Lavrevov
c7d11caa29 build for 9.3.17 2024-12-23 10:07:57 -05:00
Anton Lavrevov
fe32305d6d update CHANGELOG with new version 2024-12-23 10:07:55 -05:00
Anton Lavrevov
c23e8f9b6b fix tests in node.js 2024-12-23 09:46:43 -05:00
Anton Lavrevov
a94b63f3ec try to fix mocha 2024-12-23 09:42:12 -05:00
Anton Lavrevov
535edd8145 new canvas version 2024-12-23 09:36:35 -05:00
Anton Lavrevov
682dbdb47f update node version on test 2024-12-23 09:32:41 -05:00
Anton Lavrevov
96bbbc4b72 Merge branch 'Adam-Greenan-master' 2024-12-23 09:26:06 -05:00
Anton Lavrevov
7e174b075c adjust tests 2024-12-23 09:25:58 -05:00
Anton Lavrevov
a8395cad5c Merge branch 'master' of https://github.com/Adam-Greenan/konva into Adam-Greenan-master 2024-12-23 09:10:37 -05:00
Anton Lavrevov
855e7fa40d Fix emoji rendering with letterSpacing. close #1642 2024-12-16 19:46:41 -05:00
Adam Greenan
de0503814b Merge branch 'master' of https://github.com/Adam-Greenan/konva 
# Conflicts:
#	src/shapes/Text.ts
 2024-12-11 13:41:38 +00:00
Adam Greenan
505348099d Remove personal prettier changes 
remove more personal prettier changes

remove personal prettier changes
 2024-12-11 13:40:46 +00:00
Adam Greenan
3e092392cc remove more personal prettier changes 2024-12-11 13:39:27 +00:00
Adam Greenan
9e39485e00 Remove personal prettier changes 2024-12-11 13:37:28 +00:00
Adam Greenan
a24b30b110 Add calculation for letter spacing to better align with css letter-spacing properties 2024-12-11 13:35:24 +00:00
Adam Greenan
09445e0880 init 2024-12-11 11:00:09 +00:00
Adam Greenan
13f88d6b72 init 2024-12-11 11:00:02 +00:00
Anton Lavrevov
cbbc9921b6 Merge branch 'psychedelicious-psyche/typing-2' 2024-12-06 13:45:30 -05:00
Anton Lavrevov
5ca5fd06f6 little fixes, update deps 2024-12-06 13:45:14 -05:00
Anton Lavrevov
09485ef1db Merge branch 'psyche/typing-2' of https://github.com/psychedelicious/konva into psychedelicious-psyche/typing-2 2024-12-06 13:37:12 -05:00
Anton Lavrenov
be24e9bb8b
Merge pull request #1848 from tbo47/eslint-recommended 
Eslint recommended
 2024-12-06 13:31:55 -05:00
Anton Lavrevov
4009e6bd11 changes 2024-12-01 19:19:35 -06:00
Anton Lavrevov
00ee0846d5 fix arrow.getClientRect() calculations. fix #1851 2024-12-01 19:18:41 -06:00
Anton Lavrenov
14118054f6
Update ISSUE_TEMPLATE.md 2024-11-26 13:27:43 -05:00
lavrton
9322bfaa80 fix line-through for justify. close #1846 2024-11-05 16:02:04 -05:00
Anton Lavrenov
db71b4ba28
Merge pull request #1849 from zhengxiongwei520/master 
Resolve the issue of other canvases being unable to interact when overlapping on mobile devices.
 2024-11-05 13:41:25 -05:00
zhengxiongwei
e1edd1241f fix: Resolve the issue of other canvases being unable to interact when overlapping on mobile devices 2024-10-31 17:16:40 +08:00
Thibaut(Teebo)
3ba489fc09 eslint recommended 2024-10-29 14:48:29 +01:00
Thibaut(Teebo)
338696c691 eslint recommended 2024-10-29 14:46:32 +01:00
Thibaut(Teebo)
ae4f53b422 eslint recommended 2024-10-29 14:30:37 +01:00
Anton Lavrenov
e47d54889c
Merge pull request #1838 from tbo47/refactor-cont-let
Some checks failed
Test Browser / build (16.x) (push) Has been cancelled
Details
Test NodeJS / build (16.x) (push) Has been cancelled
Details 
refactor const let var
 2024-10-28 13:41:22 -05:00
Thibaut(Teebo)
28659eeaf2 const and let 2024-10-11 11:11:27 +00:00
psychedelicious
9c41a6eed1 feat: Factory types 2024-08-25 22:00:47 +10:00
62 changed files with 1105 additions and 746 deletions
Show Stats Expand all files Collapse all files

2
.github/ISSUE_TEMPLATE.md vendored
View File

@ -4,4 +4,4 @@ Please make sure to check current open and closed issues to see if your question
If you have just a question (not a bug or a feature request) it is better to ask it in [Stackoverflow](http://stackoverflow.com/questions/tagged/konvajs).
If you have a bug, please, try to create a reproducible example with jsfiddle (or any similar service).
You can use [this JSBIN](https://jsbin.com/tekehizuta/1/edit?html,js,output) as a template.
You can use [this JSBIN](https://jsbin.com/necojavuma/edit?js,output) as a template.

2
.github/workflows/test-browser.yml vendored
View File

@ -12,7 +12,7 @@ jobs:
strategy:
matrix:
node-version: [16.x]
node-version: [20.x]
steps:
- uses: actions/checkout@v2

2
.github/workflows/test-node.yml vendored
View File

@ -12,7 +12,7 @@ jobs:
strategy:
matrix:
node-version: [16.x]
node-version: [23.x]
steps:
- uses: actions/checkout@v2

1
.gitignore vendored
View File

@ -19,6 +19,7 @@ src_old
types
out.png
cmj
.test-temp
# Numerous always-ignore extensions
*.diff

27
CHANGELOG.md
View File

@ -3,6 +3,33 @@
All notable changes to this project will be documented in this file.
This project adheres to [Semantic Versioning](http://semver.org/).
## 9.3.21 (not released)
- Fixed memory leaks on Tween destroy
- Fixed incorrect export of stage/layer when internal nodes used buffer canvas for rendering
- Fixed incorrect render of cached node when buffer canvas is used
- Fixed incorrect path lenth calculations
## 9.3.20 (2025-03-20)
- Fix text rendering when ellipses are used
## 9.3.19 (2025-03-12)
- Typescript fixes
- Memory leak fixes
## 9.3.18 (2024-12-23)
- Fixed emoji split in multiple lines
## 9.3.17 (2024-12-23)
- Fixed `Arrow.getClientRect()`
- Fixed emoji rendering with letterSpacing
- Fixed line-through for justify text
- Changes in letter spacing width calculations to match DOM rendering
## 9.3.16 (2024-10-21)
- Fix freeze on ios on touch cancel event

2
README.md
View File

@ -16,7 +16,7 @@ You can draw things onto the stage, add event listeners to them, move them, scal
This repository began as a GitHub fork of [ericdrowell/KineticJS](https://github.com/ericdrowell/KineticJS).
- **Visit:** The [Home Page](http://konvajs.org/) and follow on [Twitter](https://twitter.com/lavrton)
- **Discover:** [Tutorials](http://konvajs.org/docs), [API Documentation](http://konvajs.org/api)
- **Discover:** [Tutorials](http://konvajs.org/docs/index.html), [API Documentation](http://konvajs.org/api/Konva.html)
- **Help:** [StackOverflow](http://stackoverflow.com/questions/tagged/konvajs), [Discord Chat](https://discord.gg/8FqZwVT)
# Quick Look

3
eslint.config.mjs Normal file
View File

@ -0,0 +1,3 @@
import tseslint from 'typescript-eslint';
export default tseslint.config(...tseslint.configs.recommended);

32
package.json
View File

@ -1,6 +1,7 @@
{
"name": "konva",
"version": "9.3.16",
"version": "9.3.20",
"description": "HTML5 2d canvas library.",
"author": "Anton Lavrenov",
"files": [
"README.md",
@ -16,12 +17,13 @@
"start": "npm run test:watch",
"compile": "npm run clean && npm run tsc && cp ./src/index-types.d.ts ./lib/index-types.d.ts && npm run rollup",
"build": "npm run compile && cp ./src/index-types.d.ts ./lib && gulp build && node ./rename-imports.mjs",
"test:import": "npm run build && node ./test/import-test.cjs &&node ./test/import-test.mjs",
"test:import": "npm run build && node ./test/import-test.cjs && node ./test/import-test.mjs",
"test": "npm run test:browser && npm run test:node",
"test:build": "parcel build ./test/unit-tests.html --dist-dir ./test-build --target none --public-url ./ --no-source-maps",
"test:browser": "npm run test:build && mocha-headless-chrome -f ./test-build/unit-tests.html -a disable-web-security",
"test:build": "PARCEL_WORKER_BACKEND=process parcel build ./test/unit-tests.html --dist-dir ./test-build --target none --public-url ./ --no-source-maps",
"test:browser": "npm run test:build && mocha-headless-chrome -f ./test-build/unit-tests.html -a disable-web-security -a no-sandbox -a disable-setuid-sandbox",
"test:watch": "rm -rf ./.parcel-cache && PARCEL_WORKERS=0 parcel serve ./test/unit-tests.html ./test/manual-tests.html ./test/sandbox.html ./test/text-paths.html ./test/bunnies.html",
"test:node": "ts-mocha -r ./test/node-global-setup.mjs -p ./test/tsconfig.json test/unit/**/*.ts --exit && npm run test:import",
"test:node:compiled": "rm -rf ./.test-temp && mkdir ./.test-temp && (tsc -p ./test/tsconfig.json --outDir ./.test-temp || true) && mocha './.test-temp/test/unit/**/*.js' -r ./test/node-global-setup.mjs --exit && rm -rf ./.test-temp && npm run test:import",
"test:node": "npm run test:node:compiled",
"tsc": "tsc --removeComments",
"rollup": "rollup -c --bundleConfigAsCjs",
"clean": "rm -rf ./lib && rm -rf ./types && rm -rf ./cmj && rm -rf ./test-build",
@ -59,13 +61,13 @@
}
],
"devDependencies": {
"@parcel/transformer-image": "2.10.1",
"@size-limit/preset-big-lib": "^11.0.1",
"@types/mocha": "^10.0.6",
"canvas": "^2.11.2",
"chai": "4.3.10",
"@parcel/transformer-image": "2.13.2",
"@size-limit/preset-big-lib": "^11.1.6",
"@types/mocha": "^10.0.10",
"canvas": "^3.1.0",
"chai": "5.1.2",
"filehound": "^1.17.6",
"gulp": "^4.0.2",
"gulp": "^5.0.0",
"gulp-concat": "^2.6.1",
"gulp-connect": "^5.7.0",
"gulp-exec": "^5.0.0",
@ -78,14 +80,14 @@
"gulp-util": "^3.0.8",
"mocha": "10.2.0",
"mocha-headless-chrome": "^4.0.0",
"parcel": "2.10.1",
"parcel": "2.13.3",
"process": "^0.11.10",
"rollup": "^4.9.1",
"rollup": "^4.31.0",
"rollup-plugin-typescript2": "^0.36.0",
"size-limit": "^11.0.1",
"size-limit": "^11.1.6",
"ts-mocha": "^10.0.0",
"ts-node": "^10.9.2",
"typescript": "^5.3.3"
"typescript": "^5.7.3"
},
"keywords": [
"canvas",

18
release.sh
View File

@ -49,7 +49,7 @@ echo "build for $1"
npm run build >/dev/null
git commit -am "build for $1" --allow-empty >/dev/null
echo "update CDN link in REAME"
echo "update CDN link in README"
perl -i -pe "s|${old_cdn_min}|${new_cdn_min}|g" ./README.md >/dev/null
git commit -am "update cdn link" --allow-empty >/dev/null
@ -61,17 +61,17 @@ git push >/dev/null
git push --tags >/dev/null
npm publish
echo "copy konva.js into konva-site"
cp ./konva.js ../konva-site/
cd ../konva-site
# echo "copy konva.js into konva-site"
# cp ./konva.js ../konva-site/
# cd ../konva-site
echo "replace CDN links"
# echo "replace CDN links"
find source themes/hexo3/layout react-demos vue-demos main-demo -name "*.json" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null
find source themes/hexo3/layout react-demos vue-demos main-demo -name "*.html" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null
# find source themes/hexo3/layout react-demos vue-demos main-demo -name "*.json" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null
# find source themes/hexo3/layout react-demos vue-demos main-demo -name "*.html" -exec perl -i -pe "s|${old_version}|${new_version}|g" {} + >/dev/null
echo "regenerate site"
./deploy.sh >/dev/null
# echo "regenerate site"
# ./deploy.sh >/dev/null
echo "DONE!"

2
rollup.config.cjs → rollup.config.mjs
View File

@ -1,8 +1,6 @@
// import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
const pkg = require('./package.json');
export default {
input: `src/index.ts`,
output: [

47
src/Canvas.ts
View File

@ -1,8 +1,6 @@
import { Util } from './Util';
import { SceneContext, HitContext, Context } from './Context';
import { Konva } from './Global';
import { Factory } from './Factory';
import { getNumberValidator } from './Validators';
// calculate pixel ratio
let _pixelRatio;
@ -82,9 +80,32 @@ export class Canvas {
getContext() {
return this.context;
}
/**
* get pixel ratio
* @method
* @name Konva.Canvas#getPixelRatio
* @returns {Number} pixel ratio
* @example
* var pixelRatio = layer.getCanvas.getPixelRatio();
*/
getPixelRatio() {
return this.pixelRatio;
}
/**
* set pixel ratio
* KonvaJS automatically handles pixel ratio adustments in order to render crisp drawings
* on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios
* of 1. Some high end tablets and phones, like iPhones and iPads have a device pixel ratio
* of 2. Some Macbook Pros, and iMacs also have a device pixel ratio of 2. Some high end Android devices have pixel
* ratios of 2 or 3. Some browsers like Firefox allow you to configure the pixel ratio of the viewport. Unless otherwise
* specificed, the pixel ratio will be defaulted to the actual device pixel ratio. You can override the device pixel
* ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.
* @method
* @name Konva.Canvas#setPixelRatio
* @param {Number} pixelRatio
* @example
* layer.getCanvas().setPixelRatio(3);
*/
setPixelRatio(pixelRatio) {
const previousRatio = this.pixelRatio;
this.pixelRatio = pixelRatio;
@ -148,28 +169,6 @@ export class Canvas {
}
}
/**
* get/set pixel ratio.
* KonvaJS automatically handles pixel ratio adustments in order to render crisp drawings
* on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios
* of 1. Some high end tablets and phones, like iPhones and iPads have a device pixel ratio
* of 2. Some Macbook Pros, and iMacs also have a device pixel ratio of 2. Some high end Android devices have pixel
* ratios of 2 or 3. Some browsers like Firefox allow you to configure the pixel ratio of the viewport. Unless otherwise
* specificed, the pixel ratio will be defaulted to the actual device pixel ratio. You can override the device pixel
* ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.
* @name Konva.Canvas#pixelRatio
* @method
* @param {Number} pixelRatio
* @returns {Number}
* @example
* // get
* var pixelRatio = layer.getCanvas.pixelRatio();
*
* // set
* layer.getCanvas().pixelRatio(3);
*/
Factory.addGetterSetter(Canvas, 'pixelRatio', undefined, getNumberValidator());
export class SceneCanvas extends Canvas {
constructor(
config: ICanvasConfig = { width: 0, height: 0, willReadFrequently: false }

30
src/Container.ts
View File

@ -1,11 +1,10 @@
import { Factory } from './Factory';
import { Node, NodeConfig } from './Node';
import { getNumberValidator } from './Validators';
import { GetSet, IRect } from './types';
import { Shape } from './Shape';
import { HitCanvas, SceneCanvas } from './Canvas';
import { SceneContext } from './Context';
import { Factory } from './Factory';
import { Node, NodeConfig } from './Node';
import { Shape } from './Shape';
import { GetSet, IRect } from './types';
import { getNumberValidator } from './Validators';
export type ClipFuncOutput =
| void
@ -51,18 +50,11 @@ export abstract class Container<
* });
*/
getChildren(filterFunc?: (item: Node) => boolean) {
if (!filterFunc) {
return this.children || [];
}
const children = this.children || [];
const results: Array<ChildType> = [];
children.forEach(function (child) {
if (filterFunc(child)) {
results.push(child);
}
});
return results;
if (filterFunc) {
return children.filter(filterFunc);
}
return children;
}
/**
* determine if node has children
@ -120,8 +112,6 @@ export abstract class Container<
* layer.add(shape1, shape2, shape3);
* // empty arrays are accepted, though each individual child must be defined
* layer.add(...shapes);
* // remember to redraw layer if you changed something
* layer.draw();
*/
add(...children: ChildType[]) {
if (children.length === 0) {
@ -235,7 +225,7 @@ export abstract class Container<
this._descendants((node) => {
const valid = node._isMatch(selector);
if (valid) {
retArr.push(node as unknown as ChildNode);
retArr.push(node as ChildNode);
}
if (valid && findOne) {
return true;

10
src/Context.ts
View File

@ -6,14 +6,12 @@ import { IRect } from './types';
import type { Node } from './Node';
function simplifyArray(arr: Array<any>) {
let retArr: Array<any> = [],
const retArr: Array<any> = [],
len = arr.length,
util = Util,
n,
val;
util = Util;
for (n = 0; n < len; n++) {
val = arr[n];
for (let n = 0; n < len; n++) {
let val = arr[n];
if (util._isNumber(val)) {
val = Math.round(val * 1000) / 1000;
} else if (!util._isString(val)) {

132
src/Factory.ts
View File

@ -1,17 +1,75 @@
import { Node } from './Node';
import { GetSet } from './types';
import { Util } from './Util';
import { getComponentValidator } from './Validators';
const GET = 'get',
SET = 'set';
const GET = 'get';
const SET = 'set';
/**
* Enforces that a type is a string.
*/
type EnforceString<T> = T extends string ? T : never;
/**
* Represents a class.
*/
type Constructor = abstract new (...args: any) => any;
/**
* An attribute of an instance of the provided class. Attributes names be strings.
*/
type Attr<T extends Constructor> = EnforceString<keyof InstanceType<T>>;
/**
* A function that is called after a setter is called.
*/
type AfterFunc<T extends Constructor> = (this: InstanceType<T>) => void;
/**
* Extracts the type of a GetSet.
*/
type ExtractGetSet<T> = T extends GetSet<infer U, any> ? U : never;
/**
* Extracts the type of a GetSet class attribute.
*/
type Value<T extends Constructor, U extends Attr<T>> = ExtractGetSet<
InstanceType<T>[U]
>;
/**
* A function that validates a value.
*/
type ValidatorFunc<T> = (val: ExtractGetSet<T>, attr: string) => T;
/**
* Extracts the "components" (keys) of a GetSet value. The value must be an object.
*/
type ExtractComponents<T extends Constructor, U extends Attr<T>> = Value<
T,
U
> extends Record<string, any>
? EnforceString<keyof Value<T, U>>[]
: never;
export const Factory = {
addGetterSetter(constructor, attr, def?, validator?, after?) {
addGetterSetter<T extends Constructor, U extends Attr<T>>(
constructor: T,
attr: U,
def?: Value<T, U>,
validator?: ValidatorFunc<Value<T, U>>,
after?: AfterFunc<T>
): void {
Factory.addGetter(constructor, attr, def);
Factory.addSetter(constructor, attr, validator, after);
Factory.addOverloadedGetterSetter(constructor, attr);
},
addGetter(constructor, attr, def?) {
addGetter<T extends Constructor, U extends Attr<T>>(
constructor: T,
attr: U,
def?: Value<T, U>
) {
const method = GET + Util._capitalize(attr);
constructor.prototype[method] =
@ -22,14 +80,25 @@ export const Factory = {
};
},
addSetter(constructor, attr, validator?, after?) {
addSetter<T extends Constructor, U extends Attr<T>>(
constructor: T,
attr: U,
validator?: ValidatorFunc<Value<T, U>>,
after?: AfterFunc<T>
) {
const method = SET + Util._capitalize(attr);
if (!constructor.prototype[method]) {
Factory.overWriteSetter(constructor, attr, validator, after);
}
},
overWriteSetter(constructor, attr, validator?, after?) {
overWriteSetter<T extends Constructor, U extends Attr<T>>(
constructor: T,
attr: U,
validator?: ValidatorFunc<Value<T, U>>,
after?: AfterFunc<T>
) {
const method = SET + Util._capitalize(attr);
constructor.prototype[method] = function (val) {
if (validator && val !== undefined && val !== null) {
@ -45,26 +114,25 @@ export const Factory = {
return this;
};
},
addComponentsGetterSetter(
constructor,
attr: string,
components: Array<string>,
validator?: Function,
after?: Function
addComponentsGetterSetter<T extends Constructor, U extends Attr<T>>(
constructor: T,
attr: U,
components: ExtractComponents<T, U>,
validator?: ValidatorFunc<Value<T, U>>,
after?: AfterFunc<T>
) {
let len = components.length,
const len = components.length,
capitalize = Util._capitalize,
getter = GET + capitalize(attr),
setter = SET + capitalize(attr),
n,
component;
setter = SET + capitalize(attr);
// getter
constructor.prototype[getter] = function () {
const ret = {};
const ret: Record<string, any> = {};
for (n = 0; n < len; n++) {
component = components[n];
for (let n = 0; n < len; n++) {
const component = components[n];
ret[component] = this.getAttr(attr + capitalize(component));
}
@ -75,18 +143,17 @@ export const Factory = {
// setter
constructor.prototype[setter] = function (val) {
let oldVal = this.attrs[attr],
key;
const oldVal = this.attrs[attr];
if (validator) {
val = validator.call(this, val);
val = validator.call(this, val, attr);
}
if (basicValidator) {
basicValidator.call(this, val, attr);
}
for (key in val) {
for (const key in val) {
if (!val.hasOwnProperty(key)) {
continue;
}
@ -109,7 +176,10 @@ export const Factory = {
Factory.addOverloadedGetterSetter(constructor, attr);
},
addOverloadedGetterSetter(constructor, attr) {
addOverloadedGetterSetter<T extends Constructor, U extends Attr<T>>(
constructor: T,
attr: U
) {
const capitalizedAttr = Util._capitalize(attr),
setter = SET + capitalizedAttr,
getter = GET + capitalizedAttr;
@ -124,7 +194,12 @@ export const Factory = {
return this[getter]();
};
},
addDeprecatedGetterSetter(constructor, attr, def, validator) {
addDeprecatedGetterSetter<T extends Constructor, U extends Attr<T>>(
constructor: T,
attr: U,
def: Value<T, U>,
validator: ValidatorFunc<Value<T, U>>
) {
Util.error('Adding deprecated ' + attr);
const method = GET + Util._capitalize(attr);
@ -142,7 +217,10 @@ export const Factory = {
});
Factory.addOverloadedGetterSetter(constructor, attr);
},
backCompat(constructor, methods) {
backCompat<T extends Constructor>(
constructor: T,
methods: Record<string, string>
) {
Util.each(methods, function (oldMethodName, newMethodName) {
const method = constructor.prototype[newMethodName];
const oldGetter = GET + Util._capitalize(oldMethodName);
@ -164,7 +242,7 @@ export const Factory = {
constructor.prototype[oldSetter] = deprecated;
});
},
afterSetFilter(this: Node) {
afterSetFilter(this: Node): void {
this._filterUpToDate = false;
},
};

2
src/FastLayer.ts
View File

@ -11,7 +11,7 @@ import { _registerNode } from './Global';
* @constructor
* @memberof Konva
* @augments Konva.Layer
* @@containerParams
@@containerParams
* @example
* var layer = new Konva.FastLayer();
*/

6
src/Layer.ts
View File

@ -114,7 +114,7 @@ export class Layer extends Container<Group | Shape> {
return this;
}
// extend Node.prototype.setZIndex
setZIndex(index) {
setZIndex(index: number) {
super.setZIndex(index);
const stage = this.getStage();
if (stage && stage.content) {
@ -385,7 +385,7 @@ export class Layer extends Container<Group | Shape> {
// empty pixel
return {};
}
drawScene(can?: SceneCanvas, top?: Node) {
drawScene(can?: SceneCanvas, top?: Node, bufferCanvas?: SceneCanvas) {
const layer = this.getLayer(),
canvas = can || (layer && layer.getCanvas());
@ -397,7 +397,7 @@ export class Layer extends Container<Group | Shape> {
canvas.getContext().clear();
}
Container.prototype.drawScene.call(this, canvas, top);
Container.prototype.drawScene.call(this, canvas, top, bufferCanvas);
this._fire(DRAW, {
node: this,

113
src/Node.ts
View File

@ -1,19 +1,19 @@
import { Util, Transform } from './Util';
import { Factory } from './Factory';
import { SceneCanvas, HitCanvas, Canvas } from './Canvas';
import { Konva } from './Global';
import { Canvas, HitCanvas, SceneCanvas } from './Canvas';
import { Container } from './Container';
import { GetSet, Vector2d, IRect } from './types';
import { Context } from './Context';
import { DD } from './DragAndDrop';
import { Factory } from './Factory';
import { Konva } from './Global';
import { Layer } from './Layer';
import { Shape } from './Shape';
import { Stage } from './Stage';
import { GetSet, IRect, Vector2d } from './types';
import { Transform, Util } from './Util';
import {
getBooleanValidator,
getNumberValidator,
getStringValidator,
getBooleanValidator,
} from './Validators';
import { Stage } from './Stage';
import { Context } from './Context';
import { Shape } from './Shape';
import { Layer } from './Layer';
export type Filter = (this: Node, imageData: ImageData) => void;
@ -88,6 +88,10 @@ const ABSOLUTE_OPACITY = 'absoluteOpacity',
LISTENING = 'listening',
MOUSEENTER = 'mouseenter',
MOUSELEAVE = 'mouseleave',
POINTERENTER = 'pointerenter',
POINTERLEAVE = 'pointerleave',
TOUCHENTER = 'touchenter',
TOUCHLEAVE = 'touchleave',
NAME = 'name',
SET = 'set',
SHAPE = 'Shape',
@ -198,7 +202,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// for transform the cache can be NOT empty
// but we still need to recalculate it if it is dirty
const isTransform = attr === TRANSFORM || attr === ABSOLUTE_TRANSFORM;
const invalid = cache === undefined || (isTransform && cache.dirty === true);
const invalid =
cache === undefined || (isTransform && cache.dirty === true);
// if not cached, we need to set it using the private getter method.
if (invalid) {
@ -247,8 +252,8 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
*/
clearCache() {
if (this._cache.has(CANVAS)) {
const { scene, filter, hit } = this._cache.get(CANVAS);
Util.releaseCanvas(scene, filter, hit);
const { scene, filter, hit, buffer } = this._cache.get(CANVAS);
Util.releaseCanvas(scene, filter, hit, buffer);
this._cache.delete(CANVAS);
}
@ -384,6 +389,18 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
sceneContext = cachedSceneCanvas.getContext(),
hitContext = cachedHitCanvas.getContext();
const bufferCanvas = new SceneCanvas({
// width and height already multiplied by pixelRatio
// so we need to revert that
// also increase size by x nd y offset to make sure content fits canvas
width:
cachedSceneCanvas.width / cachedSceneCanvas.pixelRatio + Math.abs(x),
height:
cachedSceneCanvas.height / cachedSceneCanvas.pixelRatio + Math.abs(y),
pixelRatio: cachedSceneCanvas.pixelRatio,
}),
bufferContext = bufferCanvas.getContext();
cachedHitCanvas.isCache = true;
cachedSceneCanvas.isCache = true;
@ -397,16 +414,23 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
sceneContext.save();
hitContext.save();
bufferContext.save();
sceneContext.translate(-x, -y);
hitContext.translate(-x, -y);
bufferContext.translate(-x, -y);
// hard-code offset to make sure content fits canvas
// @ts-ignore
bufferCanvas.x = x;
// @ts-ignore
bufferCanvas.y = y;
// extra flag to skip on getAbsolute opacity calc
this._isUnderCache = true;
this._clearSelfAndDescendantCache(ABSOLUTE_OPACITY);
this._clearSelfAndDescendantCache(ABSOLUTE_SCALE);
this.drawScene(cachedSceneCanvas, this);
this.drawScene(cachedSceneCanvas, this, bufferCanvas);
this.drawHit(cachedHitCanvas, this);
this._isUnderCache = false;
@ -430,6 +454,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
scene: cachedSceneCanvas,
filter: cachedFilterCanvas,
hit: cachedHitCanvas,
buffer: bufferCanvas,
x: x,
y: y,
});
@ -692,39 +717,32 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
evtStr: K,
handler: KonvaEventListener<this, NodeEventMap[K]>
) {
this._cache && this._cache.delete(ALL_LISTENERS);
if (this._cache) {
this._cache.delete(ALL_LISTENERS);
}
if (arguments.length === 3) {
return this._delegate.apply(this, arguments as any);
}
let events = (evtStr as string).split(SPACE),
len = events.length,
n,
event,
parts,
baseEvent,
name;
const events = (evtStr as string).split(SPACE);
/*
* loop through types and attach event listeners to
* each one. eg. 'click mouseover.namespace mouseout'
* will create three event bindings
*/
for (n = 0; n < len; n++) {
event = events[n];
parts = event.split('.');
baseEvent = parts[0];
name = parts[1] || '';
for (let n = 0; n < events.length; n++) {
const event = events[n];
const parts = event.split('.');
const baseEvent = parts[0];
const name = parts[1] || '';
// create events array if it doesn't exist
if (!this.eventListeners[baseEvent]) {
this.eventListeners[baseEvent] = [];
}
this.eventListeners[baseEvent].push({
name: name,
handler: handler,
});
this.eventListeners[baseEvent].push({ name, handler });
}
return this;
@ -880,13 +898,13 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* @example
* var x = node.getAttr('x');
*/
getAttr(attr: string) {
getAttr<T>(attr: string) {
const method = 'get' + Util._capitalize(attr);
if (Util._isFunction((this as any)[method])) {
return (this as any)[method]();
}
// otherwise get directly
return this.attrs[attr];
return this.attrs[attr] as T | undefined;
}
/**
* get ancestors
@ -2207,7 +2225,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* node.addName('selected');
* node.name(); // return 'red selected'
*/
addName(name) {
addName(name: string) {
if (!this.hasName(name)) {
const oldName = this.name();
const newName = oldName ? oldName + ' ' + name : name;
@ -2270,7 +2288,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
* @example
* node.setAttr('x', 5);
*/
setAttr(attr, val) {
setAttr(attr: string, val) {
const func = this[SET + Util._capitalize(attr)];
if (Util._isFunction(func)) {
@ -2287,7 +2305,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
drawNode?.batchDraw();
}
}
_setAttr(key, val) {
_setAttr(key: string, val) {
const oldVal = this.attrs[key];
if (oldVal === val && !Util.isObject(val)) {
return;
@ -2321,8 +2339,17 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
evt.target = this;
}
const nonBubbling = [
MOUSEENTER,
MOUSELEAVE,
POINTERENTER,
POINTERLEAVE,
TOUCHENTER,
TOUCHLEAVE,
];
const shouldStop =
(eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
nonBubbling.indexOf(eventType) !== -1 &&
((compareShape &&
(this === compareShape ||
(this.isAncestorOf && this.isAncestorOf(compareShape)))) ||
@ -2333,7 +2360,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// simulate event bubbling
const stopBubble =
(eventType === MOUSEENTER || eventType === MOUSELEAVE) &&
nonBubbling.indexOf(eventType) !== -1 &&
compareShape &&
compareShape.isAncestorOf &&
compareShape.isAncestorOf(this) &&
@ -2379,7 +2406,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
const topListeners = this._getProtoListeners(eventType);
if (topListeners) {
for (var i = 0; i < topListeners.length; i++) {
for (let i = 0; i < topListeners.length; i++) {
topListeners[i].handler.call(this, evt);
}
}
@ -2388,7 +2415,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
// because events can be added/removed while firing
const selfListeners = this.eventListeners[eventType];
if (selfListeners) {
for (var i = 0; i < selfListeners.length; i++) {
for (let i = 0; i < selfListeners.length; i++) {
selfListeners[i].handler.call(this, evt);
}
}
@ -2660,7 +2687,7 @@ export abstract class Node<Config extends NodeConfig = NodeConfig> {
rotation: GetSet<number, this>;
zIndex: GetSet<number, this>;
scale: GetSet<Vector2d | undefined, this>;
scale: GetSet<Vector2d, this>;
scaleX: GetSet<number, this>;
scaleY: GetSet<number, this>;
skew: GetSet<Vector2d, this>;
@ -3102,7 +3129,7 @@ addGetterSetter(Node, 'offsetY', 0, getNumberValidator());
* node.offsetY(3);
*/
addGetterSetter(Node, 'dragDistance', null, getNumberValidator());
addGetterSetter(Node, 'dragDistance', undefined, getNumberValidator());
/**
* get/set drag distance
@ -3193,7 +3220,7 @@ addGetterSetter(Node, 'listening', true, getBooleanValidator());
addGetterSetter(Node, 'preventDefault', true, getBooleanValidator());
addGetterSetter(Node, 'filters', null, function (this: Node, val) {
addGetterSetter(Node, 'filters', undefined, function (this: Node, val) {
this._filterUpToDate = false;
return val;
});

58
src/Shape.ts
View File

@ -213,10 +213,16 @@ export class Shape<
shapes[key] = this;
}
/**
* @deprecated
*/
getContext() {
Util.warn('shape.getContext() method is deprecated. Please do not use it.');
return this.getLayer()!.getContext();
}
/**
* @deprecated
*/
getCanvas() {
Util.warn('shape.getCanvas() method is deprecated. Please do not use it.');
return this.getLayer()!.getCanvas();
@ -442,7 +448,7 @@ export class Shape<
* @param {Number} point.y
* @returns {Boolean}
*/
intersects(point) {
intersects(point: Vector2d) {
const stage = this.getStage();
if (!stage) {
return false;
@ -594,15 +600,14 @@ export class Shape<
// 3 - when node is cached and we need to draw it into layer
const layer = this.getLayer();
let canvas = can || layer!.getCanvas(),
const canvas = can || layer!.getCanvas(),
context = canvas.getContext() as SceneContext,
cachedCanvas = this._getCanvasCache(),
drawFunc = this.getSceneFunc(),
hasShadow = this.hasShadow(),
stage,
bufferContext;
hasShadow = this.hasShadow();
let stage;
const skipBuffer = canvas.isCache;
const skipBuffer = false;
const cachingSelf = top === this;
if (!this.isVisible() && !cachingSelf) {
@ -628,12 +633,12 @@ export class Shape<
if (this._useBufferCanvas() && !skipBuffer) {
stage = this.getStage();
const bc = bufferCanvas || stage.bufferCanvas;
bufferContext = bc.getContext();
const bufferContext = bc.getContext();
bufferContext.clear();
bufferContext.save();
bufferContext._applyLineJoin(this);
// layer might be undefined if we are using cache before adding to layer
var o = this.getAbsoluteTransform(top).getMatrix();
const o = this.getAbsoluteTransform(top).getMatrix();
bufferContext.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
drawFunc.call(this, bufferContext, this);
@ -646,12 +651,18 @@ export class Shape<
}
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
context.drawImage(bc._canvas, 0, 0, bc.width / ratio, bc.height / ratio);
context.drawImage(
bc._canvas,
bc.x || 0,
bc.y || 0,
bc.width / ratio,
bc.height / ratio
);
} else {
context._applyLineJoin(this);
if (!cachingSelf) {
var o = this.getAbsoluteTransform(top).getMatrix();
const o = this.getAbsoluteTransform(top).getMatrix();
context.transform(o[0], o[1], o[2], o[3], o[4], o[5]);
context._applyOpacity(this);
context._applyGlobalCompositeOperation(this);
@ -722,31 +733,25 @@ export class Shape<
* shape.drawHitFromCache();
*/
drawHitFromCache(alphaThreshold = 0) {
let cachedCanvas = this._getCanvasCache(),
const cachedCanvas = this._getCanvasCache(),
sceneCanvas = this._getCachedSceneCanvas(),
hitCanvas = cachedCanvas.hit,
hitContext = hitCanvas.getContext(),
hitWidth = hitCanvas.getWidth(),
hitHeight = hitCanvas.getHeight(),
hitImageData,
hitData,
len,
rgbColorKey,
i,
alpha;
hitHeight = hitCanvas.getHeight();
hitContext.clear();
hitContext.drawImage(sceneCanvas._canvas, 0, 0, hitWidth, hitHeight);
try {
hitImageData = hitContext.getImageData(0, 0, hitWidth, hitHeight);
hitData = hitImageData.data;
len = hitData.length;
rgbColorKey = Util._hexToRgb(this.colorKey);
const hitImageData = hitContext.getImageData(0, 0, hitWidth, hitHeight);
const hitData = hitImageData.data;
const len = hitData.length;
const rgbColorKey = Util._hexToRgb(this.colorKey);
// replace non transparent pixels with color key
for (i = 0; i < len; i += 4) {
alpha = hitData[i + 3];
for (let i = 0; i < len; i += 4) {
const alpha = hitData[i + 3];
if (alpha > alphaThreshold) {
hitData[i] = rgbColorKey.r;
hitData[i + 1] = rgbColorKey.g;
@ -843,6 +848,11 @@ export class Shape<
strokeLinearGradientStartPoint: GetSet<Vector2d, this>;
strokeLinearGradientEndPoint: GetSet<Vector2d, this>;
strokeLinearGradientColorStops: GetSet<Array<number | string>, this>;
strokeLinearGradientStartPointX: GetSet<number, this>;
strokeLinearGradientStartPointY: GetSet<number, this>;
strokeLinearGradientEndPointX: GetSet<number, this>;
strokeLinearGradientEndPointY: GetSet<number, this>;
fillRule: GetSet<CanvasFillRule, this>;
}
Shape.prototype._fillFunc = _fillFunc;

22
src/Stage.ts
View File

@ -214,11 +214,11 @@ export class Stage extends Container<Layer> {
*/
setContainer(container) {
if (typeof container === STRING) {
let id;
if (container.charAt(0) === '.') {
const className = container.slice(1);
container = document.getElementsByClassName(className)[0];
} else {
var id;
if (container.charAt(0) !== '#') {
id = container;
} else {
@ -249,11 +249,10 @@ export class Stage extends Container<Layer> {
* @name Konva.Stage#clear
*/
clear() {
let layers = this.children,
len = layers.length,
n;
const layers = this.children,
len = layers.length;
for (n = 0; n < len; n++) {
for (let n = 0; n < len; n++) {
layers[n].clear();
}
return this;
@ -367,12 +366,11 @@ export class Stage extends Container<Layer> {
if (!pos) {
return null;
}
let layers = this.children,
const layers = this.children,
len = layers.length,
end = len - 1,
n;
end = len - 1;
for (n = end; n >= 0; n--) {
for (let n = end; n >= 0; n--) {
const shape = layers[n].getIntersection(pos);
if (shape) {
return shape;
@ -754,7 +752,7 @@ export class Stage extends Container<Layer> {
// TODO: are we sure we need to prevent default at all?
// do not call this function on mobile because it prevent "click" event on all parent containers
// but apps may listen to it.
if (evt.cancelable && eventType !== 'touch') {
if (evt.cancelable && eventType !== 'touch' && eventType !== 'pointer') {
evt.preventDefault();
}
}
@ -820,8 +818,8 @@ export class Stage extends Container<Layer> {
* });
*/
setPointersPositions(evt) {
let contentPosition = this._getContentPosition(),
x: number | null = null,
const contentPosition = this._getContentPosition();
let x: number | null = null,
y: number | null = null;
evt = evt ? evt : window.event;

67
src/Tween.ts
View File

@ -4,7 +4,7 @@ import { Node, NodeConfig } from './Node';
import { Konva } from './Global';
import { Line } from './shapes/Line';
let blacklist = {
const blacklist = {
node: 1,
duration: 1,
easing: 1,
@ -14,8 +14,8 @@ let blacklist = {
PAUSED = 1,
PLAYING = 2,
REVERSING = 3,
idCounter = 0,
colorAttrs = ['fill', 'stroke', 'shadowColor'];
let idCounter = 0;
class TweenEngine {
prop: string;
@ -195,13 +195,12 @@ export class Tween {
onUpdate: Function | undefined;
constructor(config: TweenConfig) {
let that = this,
const that = this,
node = config.node as any,
nodeId = node._id,
duration,
easing = config.easing || Easings.Linear,
yoyo = !!config.yoyo,
key;
yoyo = !!config.yoyo;
let duration, key;
if (typeof config.duration === 'undefined') {
duration = 0.3;
@ -266,26 +265,19 @@ export class Tween {
this.onUpdate = config.onUpdate;
}
_addAttr(key, end) {
let node = this.node,
nodeId = node._id,
start,
diff,
tweenId,
n,
len,
trueEnd,
trueStart,
endRGBA;
const node = this.node,
nodeId = node._id;
let diff, len, trueEnd, trueStart, endRGBA;
// remove conflict from tween map if it exists
tweenId = Tween.tweens[nodeId][key];
const tweenId = Tween.tweens[nodeId][key];
if (tweenId) {
delete Tween.attrs[nodeId][tweenId][key];
}
// add to tween map
start = node.getAttr(key);
let start = node.getAttr(key);
if (Util._isArray(end)) {
diff = [];
@ -310,7 +302,7 @@ export class Tween {
}
if (key.indexOf('fill') === 0) {
for (n = 0; n < len; n++) {
for (let n = 0; n < len; n++) {
if (n % 2 === 0) {
diff.push(end[n] - start[n]);
} else {
@ -326,7 +318,7 @@ export class Tween {
}
}
} else {
for (n = 0; n < len; n++) {
for (let n = 0; n < len; n++) {
diff.push(end[n] - start[n]);
}
}
@ -353,16 +345,9 @@ export class Tween {
Tween.tweens[nodeId][key] = this._id;
}
_tweenFunc(i) {
let node = this.node,
attrs = Tween.attrs[node._id][this._id],
key,
attr,
start,
diff,
newVal,
n,
len,
end;
const node = this.node,
attrs = Tween.attrs[node._id][this._id];
let key, attr, start, diff, newVal, n, len, end;
for (key in attrs) {
attr = attrs[key];
@ -525,18 +510,32 @@ export class Tween {
* @name Konva.Tween#destroy
*/
destroy() {
let nodeId = this.node._id,
const nodeId = this.node._id,
thisId = this._id,
attrs = Tween.tweens[nodeId],
key;
attrs = Tween.tweens[nodeId];
this.pause();
for (key in attrs) {
// Clean up animation
if (this.anim) {
this.anim.stop();
}
// Clean up tween entries
for (const key in attrs) {
delete Tween.tweens[nodeId][key];
}
// Clean up attrs entry
delete Tween.attrs[nodeId][thisId];
// Clean up parent objects if empty
if (Object.keys(Tween.tweens[nodeId]).length === 0) {
delete Tween.tweens[nodeId];
}
if (Object.keys(Tween.attrs[nodeId]).length === 0) {
delete Tween.attrs[nodeId];
}
}
}

13
src/Util.ts
View File

@ -260,7 +260,7 @@ export class Transform {
}
// CONSTANTS
let OBJECT_ARRAY = '[object Array]',
const OBJECT_ARRAY = '[object Array]',
OBJECT_NUMBER = '[object Number]',
OBJECT_STRING = '[object String]',
OBJECT_BOOLEAN = '[object Boolean]',
@ -423,8 +423,8 @@ let OBJECT_ARRAY = '[object Array]',
yellow: [255, 255, 0],
yellowgreen: [154, 205, 5],
},
RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/,
animQueue: Array<Function> = [];
RGB_REGEX = /rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)/;
let animQueue: Array<Function> = [];
const req =
(typeof requestAnimationFrame !== 'undefined' && requestAnimationFrame) ||
@ -904,21 +904,20 @@ export const Util = {
return pc;
},
_prepareArrayForTween(startArray, endArray, isClosed) {
let n,
start: Vector2d[] = [],
const start: Vector2d[] = [],
end: Vector2d[] = [];
if (startArray.length > endArray.length) {
const temp = endArray;
endArray = startArray;
startArray = temp;
}
for (n = 0; n < startArray.length; n += 2) {
for (let n = 0; n < startArray.length; n += 2) {
start.push({
x: startArray[n],
y: startArray[n + 1],
});
}
for (n = 0; n < endArray.length; n += 2) {
for (let n = 0; n < endArray.length; n += 2) {
end.push({
x: endArray[n],
y: endArray[n + 1],

42
src/Validators.ts
View File

@ -33,9 +33,9 @@ export function alphaComponent(val: number) {
return val;
}
export function getNumberValidator() {
export function getNumberValidator<T>() {
if (Konva.isUnminified) {
return function <T>(val: T, attr: string): T | void {
return function (val: T, attr: string): T {
if (!Util._isNumber(val)) {
Util.warn(
_formatValue(val) +
@ -49,11 +49,11 @@ export function getNumberValidator() {
}
}
export function getNumberOrArrayOfNumbersValidator(noOfElements: number) {
export function getNumberOrArrayOfNumbersValidator<T>(noOfElements: number) {
if (Konva.isUnminified) {
return function <T>(val: T, attr: string): T | void {
const isNumber = Util._isNumber(val);
const isValidArray = Util._isArray(val) && val.length == noOfElements;
return function (val: T, attr: string): T {
let isNumber = Util._isNumber(val);
let isValidArray = Util._isArray(val) && val.length == noOfElements;
if (!isNumber && !isValidArray) {
Util.warn(
_formatValue(val) +
@ -69,9 +69,9 @@ export function getNumberOrArrayOfNumbersValidator(noOfElements: number) {
}
}
export function getNumberOrAutoValidator() {
export function getNumberOrAutoValidator<T>() {
if (Konva.isUnminified) {
return function <T extends string>(val: T, attr: string): T | void {
return function (val: T, attr: string): T {
const isNumber = Util._isNumber(val);
const isAuto = val === 'auto';
@ -88,9 +88,9 @@ export function getNumberOrAutoValidator() {
}
}
export function getStringValidator() {
export function getStringValidator<T>() {
if (Konva.isUnminified) {
return function (val: any, attr: string) {
return function (val: T, attr: string): T {
if (!Util._isString(val)) {
Util.warn(
_formatValue(val) +
@ -104,13 +104,13 @@ export function getStringValidator() {
}
}
export function getStringOrGradientValidator() {
export function getStringOrGradientValidator<T>() {
if (Konva.isUnminified) {
return function (val: any, attr: string) {
return function (val: T, attr: string): T {
const isString = Util._isString(val);
const isGradient =
Object.prototype.toString.call(val) === '[object CanvasGradient]' ||
(val && val.addColorStop);
(val && val['addColorStop']);
if (!(isString || isGradient)) {
Util.warn(
_formatValue(val) +
@ -124,9 +124,9 @@ export function getStringOrGradientValidator() {
}
}
export function getFunctionValidator() {
export function getFunctionValidator<T>() {
if (Konva.isUnminified) {
return function (val: any, attr: string) {
return function (val: T, attr: string): T {
if (!Util._isFunction(val)) {
Util.warn(
_formatValue(val) +
@ -139,9 +139,9 @@ export function getFunctionValidator() {
};
}
}
export function getNumberArrayValidator() {
export function getNumberArrayValidator<T>() {
if (Konva.isUnminified) {
return function (val: any, attr: string) {
return function (val: T, attr: string): T {
// Retrieve TypedArray constructor as found in MDN (if TypedArray is available)
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#description
const TypedArray = Int8Array ? Object.getPrototypeOf(Int8Array) : null;
@ -172,9 +172,9 @@ export function getNumberArrayValidator() {
};
}
}
export function getBooleanValidator() {
export function getBooleanValidator<T>() {
if (Konva.isUnminified) {
return function (val: any, attr: string) {
return function (val: T, attr: string): T {
const isBool = val === true || val === false;
if (!isBool) {
Util.warn(
@ -188,9 +188,9 @@ export function getBooleanValidator() {
};
}
}
export function getComponentValidator(components: any) {
export function getComponentValidator<T>(components: string[]) {
if (Konva.isUnminified) {
return function (val: any, attr: string) {
return function (val: T, attr: string): T {
// ignore validation on undefined value, because it will reset to defalt
if (val === undefined || val === null) {
return val;

37
src/filters/Blur.ts
View File

@ -96,11 +96,7 @@ function filterGaussBlurRGBA(imageData, radius) {
width = imageData.width,
height = imageData.height;
let x,
y,
i,
p,
yp,
let p,
yi,
yw,
r_sum,
@ -121,20 +117,21 @@ function filterGaussBlurRGBA(imageData, radius) {
pa,
rbs;
let div = radius + radius + 1,
const div = radius + radius + 1,
widthMinus1 = width - 1,
heightMinus1 = height - 1,
radiusPlus1 = radius + 1,
sumFactor = (radiusPlus1 * (radiusPlus1 + 1)) / 2,
stackStart = new BlurStack(),
stackEnd = null,
stack = stackStart,
stackIn: any = null,
stackOut: any = null,
mul_sum = mul_table[radius],
shg_sum = shg_table[radius];
for (i = 1; i < div; i++) {
let stackEnd = null,
stack = stackStart,
stackIn: any = null,
stackOut: any = null;
for (let i = 1; i < div; i++) {
stack = stack.next = new BlurStack();
if (i === radiusPlus1) {
stackEnd = stack;
@ -145,7 +142,7 @@ function filterGaussBlurRGBA(imageData, radius) {
yw = yi = 0;
for (y = 0; y < height; y++) {
for (let y = 0; y < height; y++) {
r_in_sum =
g_in_sum =
b_in_sum =
@ -168,7 +165,7 @@ function filterGaussBlurRGBA(imageData, radius) {
stack = stackStart;
for (i = 0; i < radiusPlus1; i++) {
for (let i = 0; i < radiusPlus1; i++) {
stack.r = pr;
stack.g = pg;
stack.b = pb;
@ -176,7 +173,7 @@ function filterGaussBlurRGBA(imageData, radius) {
stack = stack.next;
}
for (i = 1; i < radiusPlus1; i++) {
for (let i = 1; i < radiusPlus1; i++) {
p = yi + ((widthMinus1 < i ? widthMinus1 : i) << 2);
r_sum += (stack.r = pr = pixels[p]) * (rbs = radiusPlus1 - i);
g_sum += (stack.g = pg = pixels[p + 1]) * rbs;
@ -193,7 +190,7 @@ function filterGaussBlurRGBA(imageData, radius) {
stackIn = stackStart;
stackOut = stackEnd;
for (x = 0; x < width; x++) {
for (let x = 0; x < width; x++) {
pixels[yi + 3] = pa = (a_sum * mul_sum) >> shg_sum;
if (pa !== 0) {
pa = 255 / pa;
@ -245,7 +242,7 @@ function filterGaussBlurRGBA(imageData, radius) {
yw += width;
}
for (x = 0; x < width; x++) {
for (let x = 0; x < width; x++) {
g_in_sum =
b_in_sum =
a_in_sum =
@ -269,7 +266,7 @@ function filterGaussBlurRGBA(imageData, radius) {
stack = stackStart;
for (i = 0; i < radiusPlus1; i++) {
for (let i = 0; i < radiusPlus1; i++) {
stack.r = pr;
stack.g = pg;
stack.b = pb;
@ -277,9 +274,9 @@ function filterGaussBlurRGBA(imageData, radius) {
stack = stack.next;
}
yp = width;
let yp = width;
for (i = 1; i <= radius; i++) {
for (let i = 1; i <= radius; i++) {
yi = (yp + x) << 2;
r_sum += (stack.r = pr = pixels[yi]) * (rbs = radiusPlus1 - i);
@ -302,7 +299,7 @@ function filterGaussBlurRGBA(imageData, radius) {
yi = x;
stackIn = stackStart;
stackOut = stackEnd;
for (y = 0; y < height; y++) {
for (let y = 0; y < height; y++) {
p = yi << 2;
pixels[p + 3] = pa = (a_sum * mul_sum) >> shg_sum;
if (pa > 0) {

7
src/filters/Brighten.ts
View File

@ -13,12 +13,11 @@ import { getNumberValidator } from '../Validators';
* node.brightness(0.8);
*/
export const Brighten: Filter = function (imageData) {
let brightness = this.brightness() * 255,
const brightness = this.brightness() * 255,
data = imageData.data,
len = data.length,
i;
len = data.length;
for (i = 0; i < len; i += 4) {
for (let i = 0; i < len; i += 4) {
// red
data[i] += brightness;
// green

11
src/filters/Contrast.ts
View File

@ -15,14 +15,13 @@ import { getNumberValidator } from '../Validators';
export const Contrast: Filter = function (imageData) {
const adjust = Math.pow((this.contrast() + 100) / 100, 2);
let data = imageData.data,
nPixels = data.length,
red = 150,
const data = imageData.data,
nPixels = data.length;
let red = 150,
green = 150,
blue = 150,
i;
blue = 150;
for (i = 0; i < nPixels; i += 4) {
for (let i = 0; i < nPixels; i += 4) {
red = data[i];
green = data[i + 1];
blue = data[i + 2];

12
src/filters/Emboss.ts
View File

@ -23,16 +23,16 @@ export const Emboss: Filter = function (imageData) {
// pixastic greyLevel is between 0 and 255. I want it between 0 and 1. Also,
// a max value of greyLevel yields a white emboss, and the min value yields a black
// emboss. Therefore, I changed greyLevel to whiteLevel
let strength = this.embossStrength() * 10,
const strength = this.embossStrength() * 10,
greyLevel = this.embossWhiteLevel() * 255,
direction = this.embossDirection(),
blend = this.embossBlend(),
dirY = 0,
dirX = 0,
data = imageData.data,
w = imageData.width,
h = imageData.height,
w4 = w * 4,
w4 = w * 4;
let dirY = 0,
dirX = 0,
y = h;
switch (direction) {
@ -174,7 +174,7 @@ Factory.addGetterSetter(
Node,
'embossDirection',
'top-left',
null,
undefined,
Factory.afterSetFilter
);
/**
@ -190,7 +190,7 @@ Factory.addGetterSetter(
Node,
'embossBlend',
false,
null,
undefined,
Factory.afterSetFilter
);
/**

41
src/filters/Enhance.ts
View File

@ -4,9 +4,8 @@ import { getNumberValidator } from '../Validators';
function remap(fromValue: number, fromMin: number, fromMax: number, toMin: number, toMax: number) {
// Compute the range of the data
let fromRange = fromMax - fromMin,
toRange = toMax - toMin,
toValue;
const fromRange = fromMax - fromMin,
toRange = toMax - toMin;
// If either range is 0, then the value can only be mapped to 1 value
if (fromRange === 0) {
@ -17,7 +16,7 @@ function remap(fromValue: number, fromMin: number, fromMax: number, toMin: numbe
}
// (1) untranslate, (2) unscale, (3) rescale, (4) retranslate
toValue = (fromValue - fromMin) / fromRange;
let toValue = (fromValue - fromMin) / fromRange;
toValue = toRange * toValue + toMin;
return toValue;
@ -38,9 +37,9 @@ function remap(fromValue: number, fromMin: number, fromMax: number, toMin: numbe
* node.enhance(0.4);
*/
export const Enhance: Filter = function (imageData) {
let data = imageData.data,
nSubPixels = data.length,
rMin = data[0],
const data = imageData.data,
nSubPixels = data.length;
let rMin = data[0],
rMax = rMin,
r,
gMin = data[1],
@ -48,8 +47,7 @@ export const Enhance: Filter = function (imageData) {
g,
bMin = data[2],
bMax = bMin,
b,
i;
b;
// If we are not enhancing anything - don't do any computation
const enhanceAmount = this.enhance();
@ -58,7 +56,7 @@ export const Enhance: Filter = function (imageData) {
}
// 1st Pass - find the min and max for each channel:
for (i = 0; i < nSubPixels; i += 4) {
for (let i = 0; i < nSubPixels; i += 4) {
r = data[i + 0];
if (r < rMin) {
rMin = r;
@ -96,15 +94,12 @@ export const Enhance: Filter = function (imageData) {
bMin = 0;
}
let rMid,
rGoalMax,
rGoalMin,
gMid,
gGoalMax,
gGoalMin,
bMid,
bGoalMax,
bGoalMin;
let rGoalMax: number,
rGoalMin: number,
gGoalMax: number,
gGoalMin: number,
bGoalMax: number,
bGoalMin: number;
// If the enhancement is positive - stretch the histogram
if (enhanceAmount > 0) {
@ -116,19 +111,19 @@ export const Enhance: Filter = function (imageData) {
bGoalMin = bMin - enhanceAmount * (bMin - 0);
// If the enhancement is negative - compress the histogram
} else {
rMid = (rMax + rMin) * 0.5;
const rMid = (rMax + rMin) * 0.5;
rGoalMax = rMax + enhanceAmount * (rMax - rMid);
rGoalMin = rMin + enhanceAmount * (rMin - rMid);
gMid = (gMax + gMin) * 0.5;
const gMid = (gMax + gMin) * 0.5;
gGoalMax = gMax + enhanceAmount * (gMax - gMid);
gGoalMin = gMin + enhanceAmount * (gMin - gMid);
bMid = (bMax + bMin) * 0.5;
const bMid = (bMax + bMin) * 0.5;
bGoalMax = bMax + enhanceAmount * (bMax - bMid);
bGoalMin = bMin + enhanceAmount * (bMin - bMid);
}
// Pass 2 - remap everything, except the alpha
for (i = 0; i < nSubPixels; i += 4) {
for (let i = 0; i < nSubPixels; i += 4) {
data[i + 0] = remap(data[i + 0], rMin, rMax, rGoalMin, rGoalMax);
data[i + 1] = remap(data[i + 1], gMin, gMax, gGoalMin, gGoalMax);
data[i + 2] = remap(data[i + 2], bMin, bMax, bGoalMin, bGoalMax);

10
src/filters/Grayscale.ts
View File

@ -10,13 +10,11 @@ import { Filter } from '../Node';
* node.filters([Konva.Filters.Grayscale]);
*/
export const Grayscale: Filter = function (imageData) {
let data = imageData.data,
len = data.length,
i,
brightness;
const data = imageData.data,
len = data.length;
for (i = 0; i < len; i += 4) {
brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
for (let i = 0; i < len; i += 4) {
const brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
// red
data[i] = brightness;
// green

7
src/filters/HSL.ts
View File

@ -59,13 +59,12 @@ Factory.addGetterSetter(
*/
export const HSL: Filter = function (imageData) {
let data = imageData.data,
const data = imageData.data,
nPixels = data.length,
v = 1,
s = Math.pow(2, this.saturation()),
h = Math.abs(this.hue() + 360) % 360,
l = this.luminance() * 127,
i;
l = this.luminance() * 127;
// Basis for the technique used:
// http://beesbuzz.biz/code/hsv_color_transforms.php
@ -94,7 +93,7 @@ export const HSL: Filter = function (imageData) {
let r: number, g: number, b: number, a: number;
for (i = 0; i < nPixels; i += 4) {
for (let i = 0; i < nPixels; i += 4) {
r = data[i + 0];
g = data[i + 1];
b = data[i + 2];

12
src/filters/HSV.ts
View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Filter, Node } from '../Node';
import { getNumberValidator } from '../Validators';
/**
@ -46,13 +46,11 @@ export const HSV: Filter = function (imageData) {
bg = 0.587 * v - 0.586 * vsu - 1.05 * vsw,
bb = 0.114 * v + 0.886 * vsu - 0.2 * vsw;
let r, g, b, a;
for (let i = 0; i < nPixels; i += 4) {
r = data[i + 0];
g = data[i + 1];
b = data[i + 2];
a = data[i + 3];
const r = data[i + 0];
const g = data[i + 1];
const b = data[i + 2];
const a = data[i + 3];
data[i + 0] = rr * r + rg * g + rb * b;
data[i + 1] = gr * r + gg * g + gb * b;

7
src/filters/Invert.ts
View File

@ -9,11 +9,10 @@ import { Filter } from '../Node';
* node.filters([Konva.Filters.Invert]);
*/
export const Invert: Filter = function (imageData) {
let data = imageData.data,
len = data.length,
i;
const data = imageData.data,
len = data.length;
for (i = 0; i < len; i += 4) {
for (let i = 0; i < len; i += 4) {
// red
data[i] = 255 - data[i];
// green

94
src/filters/Kaleidoscope.ts
View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Filter, Node } from '../Node';
import { Util } from '../Util';
import { getNumberValidator } from '../Validators';
@ -20,53 +20,41 @@ import { getNumberValidator } from '../Validators';
*/
const ToPolar = function (src, dst, opt) {
let srcPixels = src.data,
const srcPixels = src.data,
dstPixels = dst.data,
xSize = src.width,
ySize = src.height,
xMid = opt.polarCenterX || xSize / 2,
yMid = opt.polarCenterY || ySize / 2,
i,
x,
y,
r = 0,
g = 0,
b = 0,
a = 0;
yMid = opt.polarCenterY || ySize / 2;
// Find the largest radius
let rad,
rMax = Math.sqrt(xMid * xMid + yMid * yMid);
x = xSize - xMid;
y = ySize - yMid;
rad = Math.sqrt(x * x + y * y);
let rMax = Math.sqrt(xMid * xMid + yMid * yMid);
let x = xSize - xMid;
let y = ySize - yMid;
const rad = Math.sqrt(x * x + y * y);
rMax = rad > rMax ? rad : rMax;
// We'll be uisng y as the radius, and x as the angle (theta=t)
let rSize = ySize,
tSize = xSize,
radius,
theta;
const rSize = ySize,
tSize = xSize;
// We want to cover all angles (0-360) and we need to convert to
// radians (*PI/180)
let conversion = ((360 / tSize) * Math.PI) / 180,
sin,
cos;
const conversion = ((360 / tSize) * Math.PI) / 180;
// var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale;
for (theta = 0; theta < tSize; theta += 1) {
sin = Math.sin(theta * conversion);
cos = Math.cos(theta * conversion);
for (radius = 0; radius < rSize; radius += 1) {
for (let theta = 0; theta < tSize; theta += 1) {
const sin = Math.sin(theta * conversion);
const cos = Math.cos(theta * conversion);
for (let radius = 0; radius < rSize; radius += 1) {
x = Math.floor(xMid + ((rMax * radius) / rSize) * cos);
y = Math.floor(yMid + ((rMax * radius) / rSize) * sin);
i = (y * xSize + x) * 4;
r = srcPixels[i + 0];
g = srcPixels[i + 1];
b = srcPixels[i + 2];
a = srcPixels[i + 3];
let i = (y * xSize + x) * 4;
const r = srcPixels[i + 0];
const g = srcPixels[i + 1];
const b = srcPixels[i + 2];
const a = srcPixels[i + 3];
// Store it
//i = (theta * xSize + radius) * 4;
@ -97,35 +85,23 @@ const ToPolar = function (src, dst, opt) {
*/
const FromPolar = function (src, dst, opt) {
let srcPixels = src.data,
const srcPixels = src.data,
dstPixels = dst.data,
xSize = src.width,
ySize = src.height,
xMid = opt.polarCenterX || xSize / 2,
yMid = opt.polarCenterY || ySize / 2,
i,
x,
y,
dx,
dy,
r = 0,
g = 0,
b = 0,
a = 0;
yMid = opt.polarCenterY || ySize / 2;
// Find the largest radius
let rad,
rMax = Math.sqrt(xMid * xMid + yMid * yMid);
x = xSize - xMid;
y = ySize - yMid;
rad = Math.sqrt(x * x + y * y);
let rMax = Math.sqrt(xMid * xMid + yMid * yMid);
let x = xSize - xMid;
let y = ySize - yMid;
const rad = Math.sqrt(x * x + y * y);
rMax = rad > rMax ? rad : rMax;
// We'll be uisng x as the radius, and y as the angle (theta=t)
let rSize = ySize,
const rSize = ySize,
tSize = xSize,
radius,
theta,
phaseShift = opt.polarRotation || 0;
// We need to convert to degrees and we need to make sure
@ -137,18 +113,18 @@ const FromPolar = function (src, dst, opt) {
for (x = 0; x < xSize; x += 1) {
for (y = 0; y < ySize; y += 1) {
dx = x - xMid;
dy = y - yMid;
radius = (Math.sqrt(dx * dx + dy * dy) * rSize) / rMax;
theta = ((Math.atan2(dy, dx) * 180) / Math.PI + 360 + phaseShift) % 360;
const dx = x - xMid;
const dy = y - yMid;
const radius = (Math.sqrt(dx * dx + dy * dy) * rSize) / rMax;
let theta = ((Math.atan2(dy, dx) * 180) / Math.PI + 360 + phaseShift) % 360;
theta = (theta * tSize) / 360;
x1 = Math.floor(theta);
y1 = Math.floor(radius);
i = (y1 * xSize + x1) * 4;
r = srcPixels[i + 0];
g = srcPixels[i + 1];
b = srcPixels[i + 2];
a = srcPixels[i + 3];
let i = (y1 * xSize + x1) * 4;
const r = srcPixels[i + 0];
const g = srcPixels[i + 1];
const b = srcPixels[i + 2];
const a = srcPixels[i + 3];
// Store it
i = (y * xSize + x) * 4;

10
src/filters/Mask.ts
View File

@ -1,8 +1,8 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Filter, Node } from '../Node';
import { getNumberValidator } from '../Validators';
function pixelAt(idata, x, y) {
function pixelAt(idata, x: number, y: number) {
let idx = (y * idata.width + x) * 4;
const d: Array<number> = [];
d.push(
@ -137,7 +137,7 @@ function dilateMask(mask, sw, sh) {
return maskResult;
}
function smoothEdgeMask(mask, sw, sh) {
function smoothEdgeMask(mask, sw: number, sh: number) {
const weights = [1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9, 1 / 9];
const side = Math.round(Math.sqrt(weights.length));
const halfSide = Math.floor(side / 2);
@ -181,8 +181,8 @@ function smoothEdgeMask(mask, sw, sh) {
*/
export const Mask: Filter = function (imageData) {
// Detect pixels close to the background color
let threshold = this.threshold(),
mask = backgroundMask(imageData, threshold);
const threshold = this.threshold();
let mask = backgroundMask(imageData, threshold);
if (mask) {
// Erode
mask = erodeMask(mask, imageData.width, imageData.height);

2
src/filters/Noise.ts
View File

@ -1,5 +1,5 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Filter, Node } from '../Node';
import { getNumberValidator } from '../Validators';
/**

49
src/filters/Pixelate.ts
View File

@ -1,4 +1,3 @@
import { Factory } from '../Factory';
import { Util } from '../Util';
import { Node, Filter } from '../Node';
@ -22,23 +21,9 @@ export const Pixelate: Filter = function (imageData) {
let pixelSize = Math.ceil(this.pixelSize()),
width = imageData.width,
height = imageData.height,
x,
y,
i,
//pixelsPerBin = pixelSize * pixelSize,
red,
green,
blue,
alpha,
nBinsX = Math.ceil(width / pixelSize),
nBinsY = Math.ceil(height / pixelSize),
xBinStart,
xBinEnd,
yBinStart,
yBinEnd,
xBin,
yBin,
pixelsInBin,
data = imageData.data;
if (pixelSize <= 0) {
@ -46,31 +31,31 @@ export const Pixelate: Filter = function (imageData) {
return;
}
for (xBin = 0; xBin < nBinsX; xBin += 1) {
for (yBin = 0; yBin < nBinsY; yBin += 1) {
for (let xBin = 0; xBin < nBinsX; xBin += 1) {
for (let yBin = 0; yBin < nBinsY; yBin += 1) {
// Initialize the color accumlators to 0
red = 0;
green = 0;
blue = 0;
alpha = 0;
let red = 0;
let green = 0;
let blue = 0;
let alpha = 0;
// Determine which pixels are included in this bin
xBinStart = xBin * pixelSize;
xBinEnd = xBinStart + pixelSize;
yBinStart = yBin * pixelSize;
yBinEnd = yBinStart + pixelSize;
const xBinStart = xBin * pixelSize;
const xBinEnd = xBinStart + pixelSize;
const yBinStart = yBin * pixelSize;
const yBinEnd = yBinStart + pixelSize;
// Add all of the pixels to this bin!
pixelsInBin = 0;
for (x = xBinStart; x < xBinEnd; x += 1) {
let pixelsInBin = 0;
for (let x = xBinStart; x < xBinEnd; x += 1) {
if (x >= width) {
continue;
}
for (y = yBinStart; y < yBinEnd; y += 1) {
for (let y = yBinStart; y < yBinEnd; y += 1) {
if (y >= height) {
continue;
}
i = (width * y + x) * 4;
const i = (width * y + x) * 4;
red += data[i + 0];
green += data[i + 1];
blue += data[i + 2];
@ -86,15 +71,15 @@ export const Pixelate: Filter = function (imageData) {
alpha = alpha / pixelsInBin;
// Draw this bin
for (x = xBinStart; x < xBinEnd; x += 1) {
for (let x = xBinStart; x < xBinEnd; x += 1) {
if (x >= width) {
continue;
}
for (y = yBinStart; y < yBinEnd; y += 1) {
for (let y = yBinStart; y < yBinEnd; y += 1) {
if (y >= height) {
continue;
}
i = (width * y + x) * 4;
const i = (width * y + x) * 4;
data[i + 0] = red;
data[i + 1] = green;
data[i + 2] = blue;

11
src/filters/Posterize.ts
View File

@ -1,6 +1,7 @@
import { Factory } from '../Factory';
import { Node, Filter } from '../Node';
import { Filter, Node } from '../Node';
import { getNumberValidator } from '../Validators';
/**
* Posterize Filter. Adjusts the channels so that there are no more
* than n different values for that channel. This is also applied
@ -15,16 +16,14 @@ import { getNumberValidator } from '../Validators';
* node.filters([Konva.Filters.Posterize]);
* node.levels(0.8); // between 0 and 1
*/
export const Posterize: Filter = function (imageData) {
// level must be between 1 and 255
let levels = Math.round(this.levels() * 254) + 1,
const levels = Math.round(this.levels() * 254) + 1,
data = imageData.data,
len = data.length,
scale = 255 / levels,
i;
scale = 255 / levels;
for (i = 0; i < len; i += 1) {
for (let i = 0; i < len; i += 1) {
data[i] = Math.floor(data[i] / scale) * scale;
}
};

11
src/filters/RGB.ts
View File

@ -15,18 +15,15 @@ import { RGBComponent } from '../Validators';
* node.blue(120);
* node.green(200);
*/
export const RGB: Filter = function (imageData) {
let data = imageData.data,
const data = imageData.data,
nPixels = data.length,
red = this.red(),
green = this.green(),
blue = this.blue(),
i,
brightness;
blue = this.blue();
for (i = 0; i < nPixels; i += 4) {
brightness =
for (let i = 0; i < nPixels; i += 4) {
const brightness =
(0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]) / 255;
data[i] = brightness * red; // r
data[i + 1] = brightness * green; // g

16
src/filters/Sepia.ts
View File

@ -12,17 +12,13 @@ import { Filter } from '../Node';
* node.filters([Konva.Filters.Sepia]);
*/
export const Sepia: Filter = function (imageData) {
let data = imageData.data,
nPixels = data.length,
i,
r,
g,
b;
const data = imageData.data,
nPixels = data.length;
for (i = 0; i < nPixels; i += 4) {
r = data[i + 0];
g = data[i + 1];
b = data[i + 2];
for (let i = 0; i < nPixels; i += 4) {
const r = data[i + 0];
const g = data[i + 1];
const b = data[i + 2];
data[i + 0] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);

7
src/shapes/Arc.ts
View File

@ -98,7 +98,12 @@ export class Arc extends Shape<ArcConfig> {
Arc.prototype._centroid = true;
Arc.prototype.className = 'Arc';
Arc.prototype._attrsAffectingSize = ['innerRadius', 'outerRadius'];
Arc.prototype._attrsAffectingSize = [
'innerRadius',
'outerRadius',
'angle',
'clockwise',
];
_registerNode(Arc);
// add getters setters

4
src/shapes/Arrow.ts
View File

@ -151,9 +151,9 @@ export class Arrow extends Line<ArrowConfig> {
const lineRect = super.getSelfRect();
const offset = this.pointerWidth() / 2;
return {
x: lineRect.x - offset,
x: lineRect.x,
y: lineRect.y - offset,
width: lineRect.width + offset * 2,
width: lineRect.width,
height: lineRect.height + offset * 2,
};
}

24
src/shapes/Image.ts
View File

@ -40,9 +40,16 @@ export interface ImageConfig extends ShapeConfig {
* imageObj.src = '/path/to/image.jpg'
*/
export class Image extends Shape<ImageConfig> {
private _loadListener: () => void;
constructor(attrs: ImageConfig) {
super(attrs);
this.on('imageChange.konva', () => {
this._loadListener = () => {
this._requestDraw();
};
this.on('imageChange.konva', (props: any) => {
this._removeImageLoad(props.oldVal);
this._setImageLoad();
});
@ -59,11 +66,19 @@ export class Image extends Shape<ImageConfig> {
return;
}
if (image && image['addEventListener']) {
image['addEventListener']('load', () => {
this._requestDraw();
});
image['addEventListener']('load', this._loadListener);
}
}
_removeImageLoad(image: any) {
if (image && image['removeEventListener']) {
image['removeEventListener']('load', this._loadListener);
}
}
destroy() {
this._removeImageLoad(this.image());
super.destroy();
return this;
}
_useBufferCanvas() {
const hasCornerRadius = !!this.cornerRadius();
const hasShadow = this.hasShadow();
@ -148,7 +163,6 @@ export class Image extends Shape<ImageConfig> {
* Konva.Image.fromURL(imageURL, function(image){
* // image is Konva.Image instance
* layer.add(image);
* layer.draw();
* });
*/
static fromURL(

5
src/shapes/Label.ts
View File

@ -317,7 +317,10 @@ export class Tag extends Shape<TagConfig> {
};
}
pointerDirection: GetSet<'left' | 'top' | 'right' | 'bottom' | 'up' | 'down', this>;
pointerDirection: GetSet<
'left' | 'up' | 'right' | 'down' | typeof NONE,
this
>;
pointerWidth: GetSet<number, this>;
pointerHeight: GetSet<number, this>;
cornerRadius: GetSet<number, this>;

22
src/shapes/Line.ts
View File

@ -6,7 +6,15 @@ import { getNumberArrayValidator, getNumberValidator } from '../Validators';
import { Context } from '../Context';
import { GetSet } from '../types';
function getControlPoints(x0, y0, x1, y1, x2, y2, t) {
function getControlPoints(
x0: number,
y0: number,
x1: number,
y1: number,
x2: number,
y2: number,
t: number
) {
const d01 = Math.sqrt(Math.pow(x1 - x0, 2) + Math.pow(y1 - y0, 2)),
d12 = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)),
fa = (t * d01) / (d01 + d12),
@ -102,26 +110,24 @@ export class Line<
}
_sceneFunc(context: Context) {
let points = this.points(),
const points = this.points(),
length = points.length,
tension = this.tension(),
closed = this.closed(),
bezier = this.bezier(),
tp,
len,
n;
bezier = this.bezier();
if (!length) {
return;
}
let n = 0;
context.beginPath();
context.moveTo(points[0], points[1]);
// tension
if (tension !== 0 && length > 4) {
tp = this.getTensionPoints();
len = tp.length;
const tp = this.getTensionPoints();
const len = tp.length;
n = closed ? 0 : 4;
if (!closed) {

104
src/shapes/Path.ts
View File

@ -1,13 +1,13 @@
import { Factory } from '../Factory';
import { Shape, ShapeConfig } from '../Shape';
import { _registerNode } from '../Global';
import { Shape, ShapeConfig } from '../Shape';
import { GetSet, PathSegment } from '../types';
import {
getCubicArcLength,
getQuadraticArcLength,
t2length,
} from '../BezierFunctions';
import { GetSet, PathSegment } from '../types';
export interface PathConfig extends ShapeConfig {
data?: string;
@ -73,7 +73,7 @@ export class Path extends Shape<PathConfig> {
context.quadraticCurveTo(p[0], p[1], p[2], p[3]);
break;
case 'A':
var cx = p[0],
const cx = p[0],
cy = p[1],
rx = p[2],
ry = p[3],
@ -82,9 +82,9 @@ export class Path extends Shape<PathConfig> {
psi = p[6],
fs = p[7];
var r = rx > ry ? rx : ry;
var scaleX = rx > ry ? 1 : rx / ry;
var scaleY = rx > ry ? ry / rx : 1;
const r = rx > ry ? rx : ry;
const scaleX = rx > ry ? 1 : rx / ry;
const scaleY = rx > ry ? ry / rx : 1;
context.translate(cx, cy);
context.rotate(psi);
@ -217,7 +217,7 @@ export class Path extends Shape<PathConfig> {
* @example
* var point = path.getPointAtLength(10);
*/
getPointAtLength(length) {
getPointAtLength(length: number) {
return Path.getPointAtLengthOfDataArray(length, this.dataArray);
}
@ -258,11 +258,19 @@ export class Path extends Shape<PathConfig> {
}
if (length < 0.01) {
points = dataArray[i].points.slice(0, 2);
return {
x: points[0],
y: points[1],
};
const cmd = dataArray[i].command;
if (cmd === 'M') {
points = dataArray[i].points.slice(0, 2);
return {
x: points[0],
y: points[1],
};
} else {
return {
x: dataArray[i].start.x,
y: dataArray[i].start.y,
};
}
}
const cp = dataArray[i];
@ -305,13 +313,13 @@ export class Path extends Shape<PathConfig> {
p[3]
);
case 'A':
var cx = p[0],
const cx = p[0],
cy = p[1],
rx = p[2],
ry = p[3],
theta = p[4],
dTheta = p[5],
psi = p[6];
let theta = p[4];
theta += (dTheta * length) / cp.pathLength;
return Path.getPointOnEllipticalArc(cx, cy, rx, ry, theta, psi);
}
@ -362,26 +370,33 @@ export class Path extends Shape<PathConfig> {
return { x: ix + adjustedRun, y: iy + adjustedRise };
}
static getPointOnCubicBezier(pct, P1x, P1y, P2x, P2y, P3x, P3y, P4x, P4y) {
function CB1(t) {
static getPointOnCubicBezier(
pct: number,
P1x: number,
P1y: number,
P2x: number,
P2y: number,
P3x: number,
P3y: number,
P4x: number,
P4y: number
) {
function CB1(t: number) {
return t * t * t;
}
function CB2(t) {
function CB2(t: number) {
return 3 * t * t * (1 - t);
}
function CB3(t) {
function CB3(t: number) {
return 3 * t * (1 - t) * (1 - t);
}
function CB4(t) {
function CB4(t: number) {
return (1 - t) * (1 - t) * (1 - t);
}
const x = P4x * CB1(pct) + P3x * CB2(pct) + P2x * CB3(pct) + P1x * CB4(pct);
const y = P4y * CB1(pct) + P3y * CB2(pct) + P2y * CB3(pct) + P1y * CB4(pct);
return {
x: x,
y: y,
};
return { x, y };
}
static getPointOnQuadraticBezier(pct, P1x, P1y, P2x, P2y, P3x, P3y) {
function QB1(t) {
@ -396,10 +411,7 @@ export class Path extends Shape<PathConfig> {
const x = P3x * QB1(pct) + P2x * QB2(pct) + P1x * QB3(pct);
const y = P3y * QB1(pct) + P2y * QB2(pct) + P1y * QB3(pct);
return {
x: x,
y: y,
};
return { x, y };
}
static getPointOnEllipticalArc(
cx: number,
@ -483,7 +495,7 @@ export class Path extends Shape<PathConfig> {
// convert white spaces to commas
cs = cs.replace(new RegExp(' ', 'g'), ',');
// create pipes so that we can split the data
for (var n = 0; n < cc.length; n++) {
for (let n = 0; n < cc.length; n++) {
cs = cs.replace(new RegExp(cc[n], 'g'), '|' + cc[n]);
}
// create array
@ -496,7 +508,7 @@ export class Path extends Shape<PathConfig> {
const re = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:e[-+]?\d+)?)/gi;
let match;
for (n = 1; n < arr.length; n++) {
for (let n = 1; n < arr.length; n++) {
let str = arr[n];
let c = str.charAt(0);
str = str.slice(1);
@ -536,8 +548,8 @@ export class Path extends Shape<PathConfig> {
const startX = cpx,
startY = cpy;
// Move var from within the switch to up here (jshint)
var prevCmd, ctlPtx, ctlPty; // Ss, Tt
var rx, ry, psi, fa, fs, x1, y1; // Aa
let prevCmd, ctlPtx, ctlPty; // Ss, Tt
let rx, ry, psi, fa, fs, x1, y1; // Aa
// convert l, H, h, V, and v to L
switch (c) {
@ -555,8 +567,8 @@ export class Path extends Shape<PathConfig> {
break;
// Note: lineTo handlers need to be above this point
case 'm':
var dx = p.shift()!;
var dy = p.shift()!;
const dx = p.shift()!;
const dy = p.shift()!;
cpx += dx;
cpy += dy;
cmd = 'M';
@ -782,12 +794,12 @@ export class Path extends Shape<PathConfig> {
case 'A':
// Approximates by breaking curve into line segments
len = 0.0;
var start = points[4];
const start = points[4];
// 4 = theta
var dTheta = points[5];
const dTheta = points[5];
// 5 = dTheta
var end = points[4] + dTheta;
var inc = Math.PI / 180.0;
const end = points[4] + dTheta;
let inc = Math.PI / 180.0;
// 1 degree resolution
if (Math.abs(start - end) < inc) {
inc = Math.abs(start - end);
@ -846,15 +858,15 @@ export class Path extends Shape<PathConfig> {
return 0;
}
static convertEndpointToCenterParameterization(
x1,
y1,
x2,
y2,
fa,
fs,
rx,
ry,
psiDeg
x1: number,
y1: number,
x2: number,
y2: number,
fa: number,
fs: number,
rx: number,
ry: number,
psiDeg: number
) {
// Derived from: http://www.w3.org/TR/SVG/implnote.html#ArcImplementationNotes
const psi = psiDeg * (Math.PI / 180.0);

124
src/shapes/Text.ts
View File

@ -16,13 +16,19 @@ import { GetSet } from '../types';
export function stringToArray(string: string): string[] {
// Use Unicode-aware splitting
return [...string].reduce((acc, char, index, array) => {
// Handle emoji sequences (including ZWJ sequences)
if (
/\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?(?:\u200D\p{Emoji_Presentation})+/u.test(
char
)
) {
acc.push(char);
// Handle emoji with skin tone modifiers and ZWJ sequences
if (/\p{Emoji}/u.test(char)) {
// Check if next character is a modifier or ZWJ sequence
const nextChar = array[index + 1];
if (nextChar && /\p{Emoji_Modifier}|\u200D/u.test(nextChar)) {
// If we have a modifier, combine with current emoji
acc.push(char + nextChar);
// Skip the next character since we've used it
array[index + 1] = '';
} else {
// No modifier - treat as separate emoji
acc.push(char);
}
}
// Handle regional indicator symbols (flags)
else if (
@ -35,7 +41,8 @@ export function stringToArray(string: string): string[] {
acc[acc.length - 1] += char;
}
// Handle other characters
else {
else if (char) {
// Only push if not an empty string (skipped modifier)
acc.push(char);
}
return acc;
@ -164,7 +171,7 @@ function checkDefaultFill(config?: TextConfig) {
* @param {String} [config.fontVariant] can be normal or small-caps. Default is normal
* @param {String} [config.textDecoration] can be line-through, underline or empty string. Default is empty string.
* @param {String} config.text
* @param {String} [config.align] can be left, center, or right
* @param {String} [config.align] can be left, center, right or justify
* @param {String} [config.verticalAlign] can be top, middle or bottom
* @param {Number} [config.padding]
* @param {Number} [config.lineHeight] default is 1
@ -235,9 +242,6 @@ export class Text extends Shape<TextConfig> {
lineHeightPx / 2;
}
var lineTranslateX = 0;
var lineTranslateY = 0;
if (direction === RTL) {
context.setAttr('direction', direction);
}
@ -259,15 +263,12 @@ export class Text extends Shape<TextConfig> {
// draw text lines
for (n = 0; n < textArrLen; n++) {
var lineTranslateX = 0;
var lineTranslateY = 0;
var obj = textArr[n],
let lineTranslateX = 0;
let lineTranslateY = 0;
const obj = textArr[n],
text = obj.text,
width = obj.width,
lastLine = obj.lastInParagraph,
spacesNumber,
oneWord,
lineWidth;
lastLine = obj.lastInParagraph;
// horizontal alignment
context.save();
@ -287,9 +288,7 @@ export class Text extends Shape<TextConfig> {
const x = lineTranslateX;
const y = translateY + lineTranslateY + yOffset;
context.moveTo(x, y);
spacesNumber = text.split(' ').length - 1;
oneWord = spacesNumber === 0;
lineWidth =
const lineWidth =
align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
context.lineTo(x + Math.round(lineWidth), y);
@ -307,12 +306,8 @@ export class Text extends Shape<TextConfig> {
context.beginPath();
const yOffset = Konva._fixTextRendering ? -Math.round(fontSize / 4) : 0;
context.moveTo(lineTranslateX, translateY + lineTranslateY + yOffset);
spacesNumber = text.split(' ').length - 1;
oneWord = spacesNumber === 0;
lineWidth =
align === JUSTIFY && lastLine && !oneWord
? totalWidth - padding * 2
: width;
const lineWidth =
align === JUSTIFY && !lastLine ? totalWidth - padding * 2 : width;
context.lineTo(
lineTranslateX + Math.round(lineWidth),
translateY + lineTranslateY + yOffset
@ -328,7 +323,7 @@ export class Text extends Shape<TextConfig> {
// be supported otherwise.
if (direction !== RTL && (letterSpacing !== 0 || align === JUSTIFY)) {
// var words = text.split(' ');
spacesNumber = text.split(' ').length - 1;
const spacesNumber = text.split(' ').length - 1;
const array = stringToArray(text);
for (let li = 0; li < array.length; li++) {
const letter = array[li];
@ -385,7 +380,8 @@ export class Text extends Shape<TextConfig> {
return isAuto ? this.getTextWidth() + this.padding() * 2 : this.attrs.width;
}
getHeight() {
const isAuto = this.attrs.height === AUTO || this.attrs.height === undefined;
const isAuto =
this.attrs.height === AUTO || this.attrs.height === undefined;
return isAuto
? this.fontSize() * this.textArr.length * this.lineHeight() +
this.padding() * 2
@ -477,10 +473,9 @@ export class Text extends Shape<TextConfig> {
_getTextWidth(text: string) {
const letterSpacing = this.letterSpacing();
const length = text.length;
return (
getDummyContext().measureText(text).width +
(length ? letterSpacing * (length - 1) : 0)
);
// letterSpacing * length is the total letter spacing for the text
// previously we used letterSpacing * (length - 1) but it doesn't match DOM behavior
return getDummyContext().measureText(text).width + letterSpacing * length;
}
_setTextData() {
let lines = this.text().split('\n'),
@ -503,7 +498,9 @@ export class Text extends Shape<TextConfig> {
this.textArr = [];
getDummyContext().font = this._getContextFont();
const additionalWidth = shouldAddEllipsis ? this._getTextWidth(ELLIPSIS) : 0;
const additionalWidth = shouldAddEllipsis
? this._getTextWidth(ELLIPSIS)
: 0;
for (let i = 0, max = lines.length; i < max; ++i) {
let line = lines[i];
@ -519,17 +516,31 @@ export class Text extends Shape<TextConfig> {
* that would fit in the specified width
*/
let low = 0,
high = line.length,
high = stringToArray(line).length, // Convert to array for proper emoji handling
match = '',
matchWidth = 0;
while (low < high) {
const mid = (low + high) >>> 1,
substr = line.slice(0, mid + 1),
substrWidth = this._getTextWidth(substr) + additionalWidth;
if (substrWidth <= maxWidth) {
// Convert array indices to string
lineArray = stringToArray(line),
substr = lineArray.slice(0, mid + 1).join(''),
substrWidth = this._getTextWidth(substr);
// Only add ellipsis width when we need to consider truncation
// for the current line (when it might be the last visible line)
const shouldConsiderEllipsis =
shouldAddEllipsis &&
fixedHeight &&
currentHeightPx + lineHeightPx > maxHeightPx;
const effectiveWidth = shouldConsiderEllipsis
? substrWidth + additionalWidth
: substrWidth;
if (effectiveWidth <= maxWidth) {
low = mid + 1;
match = substr;
matchWidth = substrWidth;
matchWidth = substrWidth; // Store actual text width without ellipsis
} else {
high = mid;
}
@ -543,20 +554,24 @@ export class Text extends Shape<TextConfig> {
// a fitting substring was found
if (wrapAtWord) {
// try to find a space or dash where wrapping could be done
var wrapIndex;
const nextChar = line[match.length];
const lineArray = stringToArray(line);
const matchArray = stringToArray(match);
const nextChar = lineArray[matchArray.length];
const nextIsSpaceOrDash = nextChar === SPACE || nextChar === DASH;
let wrapIndex;
if (nextIsSpaceOrDash && matchWidth <= maxWidth) {
wrapIndex = match.length;
wrapIndex = matchArray.length;
} else {
wrapIndex =
Math.max(match.lastIndexOf(SPACE), match.lastIndexOf(DASH)) +
1;
// Find last space or dash in the array
const lastSpaceIndex = matchArray.lastIndexOf(SPACE);
const lastDashIndex = matchArray.lastIndexOf(DASH);
wrapIndex = Math.max(lastSpaceIndex, lastDashIndex) + 1;
}
if (wrapIndex > 0) {
// re-cut the substring found at the space/dash position
low = wrapIndex;
match = match.slice(0, low);
match = lineArray.slice(0, low).join('');
matchWidth = this._getTextWidth(match);
}
}
@ -577,13 +592,14 @@ export class Text extends Shape<TextConfig> {
*/
break;
}
line = line.slice(low);
line = line.trimLeft();
// Convert remaining text using array operations
const lineArray = stringToArray(line);
line = lineArray.slice(low).join('').trimLeft();
if (line.length > 0) {
// Check if the remaining text would fit on one line
lineWidth = this._getTextWidth(line);
if (lineWidth <= maxWidth) {
// if it does, add the line and break out of the loop
this._addTextLine(line);
currentHeightPx += lineHeightPx;
textWidth = Math.max(textWidth, lineWidth);
@ -625,7 +641,7 @@ export class Text extends Shape<TextConfig> {
* 1. the current line is the last line
* 2. wrap is NONE
* @param {Number} currentHeightPx
* @returns
* @returns {Boolean}
*/
_shouldHandleEllipsis(currentHeightPx: number): boolean {
const fontSize = +this.fontSize(),
@ -859,6 +875,8 @@ Factory.addGetterSetter(Text, 'padding', 0, getNumberValidator());
*
* // align text to right
* text.align('right');
*
* // justify text
*/
Factory.addGetterSetter(Text, 'align', LEFT);

4
src/shapes/TextPath.ts
View File

@ -551,7 +551,7 @@ Factory.addGetterSetter(TextPath, 'text', EMPTY_STRING);
* // underline text
* shape.textDecoration('underline');
*/
Factory.addGetterSetter(TextPath, 'textDecoration', null);
Factory.addGetterSetter(TextPath, 'textDecoration', '');
/**
* get/set kerning function.
@ -568,4 +568,4 @@ Factory.addGetterSetter(TextPath, 'textDecoration', null);
* return 1;
* });
*/
Factory.addGetterSetter(TextPath, 'kerningFunc', null);
Factory.addGetterSetter(TextPath, 'kerningFunc', undefined);

43
src/shapes/Transformer.ts
View File

@ -335,10 +335,12 @@ export class Transformer extends Group {
this.update();
}
};
const additionalEvents = node._attrsAffectingSize
.map((prop) => prop + 'Change.' + this._getEventNamespace())
.join(' ');
node.on(additionalEvents, onChange);
if (node._attrsAffectingSize.length) {
const additionalEvents = node._attrsAffectingSize
.map((prop) => prop + 'Change.' + this._getEventNamespace())
.join(' ');
node.on(additionalEvents, onChange);
}
node.on(
TRANSFORM_CHANGE_STR.map(
(e) => e + `.${this._getEventNamespace()}`
@ -768,11 +770,11 @@ export class Transformer extends Group {
keepProportion = this.keepRatio() || e.shiftKey;
}
var centeredScaling = this.centeredScaling() || e.altKey;
let centeredScaling = this.centeredScaling() || e.altKey;
if (this._movingAnchorName === 'top-left') {
if (keepProportion) {
var comparePoint = centeredScaling
const comparePoint = centeredScaling
? {
x: this.width() / 2,
y: this.height() / 2,
@ -786,9 +788,9 @@ export class Transformer extends Group {
Math.pow(comparePoint.y - anchorNode.y(), 2)
);
var reverseX = this.findOne('.top-left')!.x() > comparePoint.x ? -1 : 1;
const reverseX = this.findOne('.top-left')!.x() > comparePoint.x ? -1 : 1;
var reverseY = this.findOne('.top-left')!.y() > comparePoint.y ? -1 : 1;
const reverseY = this.findOne('.top-left')!.y() > comparePoint.y ? -1 : 1;
x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY;
@ -800,7 +802,7 @@ export class Transformer extends Group {
this.findOne('.top-left')!.y(anchorNode.y());
} else if (this._movingAnchorName === 'top-right') {
if (keepProportion) {
var comparePoint = centeredScaling
const comparePoint = centeredScaling
? {
x: this.width() / 2,
y: this.height() / 2,
@ -815,10 +817,10 @@ export class Transformer extends Group {
Math.pow(comparePoint.y - anchorNode.y(), 2)
);
var reverseX =
const reverseX =
this.findOne('.top-right')!.x() < comparePoint.x ? -1 : 1;
var reverseY =
const reverseY =
this.findOne('.top-right')!.y() > comparePoint.y ? -1 : 1;
x = newHypotenuse * this.cos * reverseX;
@ -836,7 +838,7 @@ export class Transformer extends Group {
this.findOne('.bottom-right')!.x(anchorNode.x());
} else if (this._movingAnchorName === 'bottom-left') {
if (keepProportion) {
var comparePoint = centeredScaling
const comparePoint = centeredScaling
? {
x: this.width() / 2,
y: this.height() / 2,
@ -851,9 +853,9 @@ export class Transformer extends Group {
Math.pow(anchorNode.y() - comparePoint.y, 2)
);
var reverseX = comparePoint.x < anchorNode.x() ? -1 : 1;
const reverseX = comparePoint.x < anchorNode.x() ? -1 : 1;
var reverseY = anchorNode.y() < comparePoint.y ? -1 : 1;
const reverseY = anchorNode.y() < comparePoint.y ? -1 : 1;
x = newHypotenuse * this.cos * reverseX;
y = newHypotenuse * this.sin * reverseY;
@ -870,7 +872,7 @@ export class Transformer extends Group {
this.findOne('.bottom-right')!.y(anchorNode.y());
} else if (this._movingAnchorName === 'bottom-right') {
if (keepProportion) {
var comparePoint = centeredScaling
const comparePoint = centeredScaling
? {
x: this.width() / 2,
y: this.height() / 2,
@ -885,10 +887,10 @@ export class Transformer extends Group {
Math.pow(anchorNode.y() - comparePoint.y, 2)
);
var reverseX =
const reverseX =
this.findOne('.bottom-right')!.x() < comparePoint.x ? -1 : 1;
var reverseY =
const reverseY =
this.findOne('.bottom-right')!.y() < comparePoint.y ? -1 : 1;
x = newHypotenuse * this.cos * reverseX;
@ -906,7 +908,7 @@ export class Transformer extends Group {
);
}
var centeredScaling = this.centeredScaling() || e.altKey;
centeredScaling = this.centeredScaling() || e.altKey;
if (centeredScaling) {
const topLeft = this.findOne('.top-left')!;
const bottomRight = this.findOne('.bottom-right')!;
@ -1745,8 +1747,6 @@ Factory.addGetterSetter(Transformer, 'ignoreStroke', false);
*/
Factory.addGetterSetter(Transformer, 'padding', 0, getNumberValidator());
Factory.addGetterSetter(Transformer, 'node');
/**
* get/set attached nodes of the Transformer. Transformer will adapt to their size and listen to their events
* @method
@ -1767,6 +1767,9 @@ Factory.addGetterSetter(Transformer, 'node');
*/
Factory.addGetterSetter(Transformer, 'nodes');
// @ts-ignore
// deprecated
Factory.addGetterSetter(Transformer, 'node');
/**
* get/set bounding box function. **IMPORTANT!** boundBondFunc operates in absolute coordinates.

2
src/types.ts
View File

@ -1,6 +1,6 @@
export interface GetSet<Type, This> {
(): Type;
(v: Type): This;
(v: Type | null | undefined): This;
}
export interface Vector2d {

67
test/sandbox.html
View File

@ -13,8 +13,13 @@
width: 100vw;
height: 100vh;
}
body {
padding: 0;
margin: 0;
}
</style>
<!-- <script src="https://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script> -->
<script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
<script>
// TouchEmulator();
</script>
@ -26,46 +31,54 @@
<body>
<div id="container"></div>
<textarea class="test" id="text">Hello</textarea>
<script type="module">
import Konva from '../src/index.ts';
var stageWidth = window.innerWidth;
var stageHeight = window.innerHeight;
Konva._fixTextRendering = true;
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: stageWidth,
height: stageHeight,
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
x: 10,
y: 10,
width: 100,
height: 100,
fill: 'green',
draggable: true,
});
layer.add(rect);
var canvas = document.createElement('canvas');
// use external library to parse and draw gif animation
function onDrawFrame(ctx, frame) {
// update canvas size
canvas.width = frame.width;
canvas.height = frame.height;
// update canvas that we are using for Konva.Image
ctx.drawImage(frame.buffer, 0, 0);
// redraw the layer
layer.draw();
}
window.addEventListener('touchend', () => {
console.log('touchend');
});
window.addEventListener('touchcancel', () => {
console.log('touchcancel');
});
window.addEventListener('lostpointercapture', () => {
console.log('lostpointercapture');
});
window.addEventListener('focusout', () => {
console.log('focusout');
});
gifler('https://konvajs.org/assets/yoda.gif').frames(canvas, onDrawFrame);
function testKonvaImage() {
setInterval(() => {
const image = new Konva.Image({
image: canvas,
x: Math.random() * width,
y: Math.random() * height,
});
layer.add(image);
setTimeout(() => {
image.image(canvas);
image.destroy();
}, 500);
}, 10);
}
testKonvaImage();
</script>
</body>
</html>

21
test/tsconfig.json
View File

@ -1,10 +1,25 @@
{
"compilerOptions": {
"target": "ES2015",
"noEmitOnError": true,
"noEmitOnError": false,
"moduleResolution": "node",
"lib": ["ES2015", "dom"],
"module": "CommonJS"
"module": "CommonJS",
"skipLibCheck": true,
"noImplicitAny": false,
"allowJs": true,
"noEmit": false,
"checkJs": false,
"allowUnreachableCode": true,
"allowUnusedLabels": true,
"noFallthroughCasesInSwitch": false,
"noImplicitReturns": false,
"noImplicitThis": false,
"noPropertyAccessFromIndexSignature": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"strict": false
},
"include": ["../src/**/*.ts"]
"include": ["../src/**/*.ts", "./**/*.ts"],
"exclude": ["../node_modules/**/*"]
}

1
test/unit-tests.html
View File

@ -11,6 +11,7 @@
<script type="module">
// CORE
import './unit/Animation-test.ts';
import './unit/Tween-test.ts';
import './unit/Canvas-test.ts';
import './unit/Container-test.ts';
import './unit/Context-test.ts';

29
test/unit/Arrow-test.ts
View File

@ -229,4 +229,33 @@ describe('Arrow', function () {
cloneAndCompareLayer(layer, 255, 50);
});
it('getClientRect', function () {
var stage = addStage();
var layer = new Konva.Layer();
var arrow = new Konva.Arrow({
points: [50, 50, 150, 50],
stroke: 'blue',
fill: 'blue',
// large stroke width will not work :(
strokeWidth: 1,
draggable: true,
tension: 0,
pointerLength: 10,
pointerWidth: 20,
});
layer.add(arrow);
stage.add(layer);
var rect = arrow.getClientRect({ skipStroke: true });
layer.add(new Konva.Rect({...rect, stroke: 'red' }));
assert.equal(rect.x, 50);
assert.equal(rect.y, 40);
assert.equal(rect.width, 100);
assert.equal(rect.height, 20);
});
});

45
test/unit/Image-test.ts
View File

@ -107,17 +107,10 @@ describe('Image', function () {
var trace = layer.getContext().getTrace();
if (isBrowser) {
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,200,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();'
);
} else {
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object Object],135,7,167,134,0,0,100,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object Object],135,7,167,134,0,0,200,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object Object],135,7,167,134,0,0,100,100);restore();'
);
}
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,200,100);restore();clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);drawImage([object HTMLImageElement],135,7,167,134,0,0,100,100);restore();'
);
done();
});
@ -241,17 +234,10 @@ describe('Image', function () {
var trace = layer.getContext().getTrace();
if (isBrowser) {
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);globalAlpha=0.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();'
);
} else {
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);globalAlpha=0.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object Object],0,0,100,100);restore();'
);
}
assert.equal(
trace,
'clearRect(0,0,578,200);save();transform(1,0,0,1,150,30);globalAlpha=0.5;shadowColor=rgba(0,0,0,0.1);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;drawImage([object HTMLImageElement],0,0,100,100);restore();'
);
done();
});
@ -285,17 +271,10 @@ describe('Image', function () {
var trace = layer.getContext().getTrace();
if (isBrowser) {
assert.equal(
trace,
'clearRect(0,0,578,200);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();'
);
} else {
assert.equal(
trace,
'clearRect(0,0,578,200);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object Object],0,0,578,200);restore();'
);
}
assert.equal(
trace,
'clearRect(0,0,578,200);save();shadowColor=rgba(0,0,0,0.5);shadowBlur=10;shadowOffsetX=20;shadowOffsetY=20;globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();'
);
done();
});

15
test/unit/Node-test.ts
View File

@ -2296,17 +2296,10 @@ describe('Node', function () {
var bufferTrace = stage.bufferCanvas.getContext().getTrace();
if (isBrowser) {
assert.equal(
sceneTrace,
'clearRect(0,0,578,200);save();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();'
);
} else {
assert.equal(
sceneTrace,
'clearRect(0,0,578,200);save();globalAlpha=0.5;drawImage([object Object],0,0,578,200);restore();'
);
}
assert.equal(
sceneTrace,
'clearRect(0,0,578,200);save();globalAlpha=0.5;drawImage([object HTMLCanvasElement],0,0,578,200);restore();'
);
assert.equal(
bufferTrace,

39
test/unit/Path-test.ts
View File

@ -1083,6 +1083,7 @@ describe('Path', function () {
it('get point at path', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
const data =
'M 300,10 L 250,100 A 100 40 30 1 0 150 150 C 160,100, 290,100, 300,150';
var path = new Konva.Path({
@ -1102,7 +1103,7 @@ describe('Path', function () {
var circle = new Konva.Circle({
x: p.x,
y: p.y,
radius: 2,
radius: 0.1,
fill: 'black',
stroke: 'black',
});
@ -1164,13 +1165,49 @@ describe('Path', function () {
{ x: 299.87435436448743, y: 149.4028482225714 },
]);
}
});
it('get point at vertical path', function () {
var stage = addStage();
var layer = new Konva.Layer();
const data = 'M 614.96002,7.5147864 611.20262,429.59529';
var path = new Konva.Path({
stroke: 'red',
strokeWidth: 3,
data,
x: -600,
});
layer.add(path);
if (isBrowser) {
const SVGPath = document.createElementNS(
'http://www.w3.org/2000/svg',
'path'
) as SVGPathElement;
SVGPath.setAttribute('d', data);
for (var i = 0.001; i < path.getLength(); i += 1) {
var p = path.getPointAtLength(i);
console.log(p);
var circle = new Konva.Circle({
x: p.x + path.x(),
y: p.y + path.y(),
radius: 2,
fill: 'black',
stroke: 'black',
});
layer.add(circle);
const position = SVGPath.getPointAtLength(i);
console.log(position);
assert(Math.abs(p.x - position.x) <= 1);
assert(Math.abs(p.y - position.y) <= 1);
}
}
stage.add(layer);
});
it('get point at path with float attrs', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
const data =
'M419.0000314094981 342.88624187900973 L419.00003140949804 577.0038889378335 L465.014001082264 577.0038889378336 Z';

77
test/unit/Shape-test.ts
View File

@ -1550,6 +1550,83 @@ describe('Shape', function () {
compareCanvases(canvas2, canvas1, 240, 110);
});
it('export stage when buffer canvas is for line', async function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
const group = new Konva.Group({
id: 'group01',
draggable: false,
opacity: 0.99,
});
layer.add(group);
const arrow = new Konva.Arrow({
x: 0,
y: 0,
points: [50, 25, 200, 25, 200, 225, 400, 225],
stroke: 'purple',
fill: 'purple',
strokeWidth: 4,
pointerAtEnding: true,
bezier: true,
});
group.add(arrow);
const bounds = layer.getClientRect({ relativeTo: stage });
const pos = stage.getPosition();
const canvas1 = layer.toCanvas({
pixelRatio: 1,
x: bounds.x + pos.x,
y: bounds.y + pos.y,
width: bounds.width,
height: bounds.height,
});
group.opacity(1);
const canvas2 = layer.toCanvas({
pixelRatio: 1,
x: bounds.x + pos.x,
y: bounds.y + pos.y,
width: bounds.width,
height: bounds.height,
});
compareCanvases(canvas1, canvas2, 240, 110);
});
it('check stroke rendering on buffer canvas', async function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
const rect = new Konva.Rect({
x: 150,
y: 50,
width: 50,
height: 50,
fill: '#039BE5',
stroke: 'yellow',
strokeWidth: 5,
shadowColor: 'black',
shadowOffset: { x: 10, y: 10 },
shadowOpacity: 0.5,
});
layer.add(rect);
const canvas1 = layer.toCanvas();
rect.cache();
const canvas2 = layer.toCanvas();
// throw new Error('stop');
compareCanvases(canvas1, canvas2);
});
// ======================================================
it('optional disable shadow for stroke', function () {
var stage = addStage();

31
test/unit/Stage-test.ts
View File

@ -8,6 +8,7 @@ import {
simulateTouchStart,
simulateTouchMove,
simulateTouchEnd,
simulatePointerMove,
compareCanvases,
createCanvas,
showHit,
@ -1222,6 +1223,36 @@ describe('Stage', function () {
assert.equal(count, 2);
});
it('stage pointerleave should not fire when leaving a child', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var circle = new Konva.Circle({
fill: 'red',
radius: 30,
x: 50,
y: 50,
});
layer.add(circle);
layer.draw();
var stageLeave = 0;
var circleLeave = 0;
stage.on('pointerleave', function () {
stageLeave += 1;
});
circle.on('pointerleave', function () {
circleLeave += 1;
});
simulatePointerMove(stage, { x: 50, y: 50 });
simulatePointerMove(stage, { x: 90, y: 50 });
assert.equal(circleLeave, 1, 'circle pointerleave should fire');
assert.equal(stageLeave, 0, 'stage pointerleave should not fire');
});
it('toDataURL with hidden layer', function () {
var stage = addStage();
var layer = new Konva.Layer();

53
test/unit/Text-test.ts
View File

@ -146,7 +146,7 @@ describe('Text', function () {
var text = new Konva.Text({
x: 10,
y: 10,
text: '😬',
text: '😬👧🏿',
fontSize: 50,
letterSpacing: 1,
});
@ -159,9 +159,42 @@ describe('Text', function () {
context.textBaseline = 'middle';
context.font = 'normal normal 50px Arial';
context.fillStyle = 'darkgrey';
context.fillText('😬', 10, 10 + 25);
context.fillText('😬👧🏿', 10, 10 + 25);
compareLayerAndCanvas(layer, canvas, 254);
if (isBrowser) {
compareLayerAndCanvas(layer, canvas, 254, 100);
}
});
it('check emoji rendering', function () {
var stage = addStage();
var layer = new Konva.Layer();
var text = new Konva.Text({
text: '😁😁😁',
x: 10,
y: 10,
fontSize: 20,
draggable: true,
width: 65,
fill: 'black',
scaleY: 0.9999999999999973,
});
layer.add(text);
stage.add(layer);
var canvas = createCanvas();
var context = canvas.getContext('2d');
context.textBaseline = 'middle';
context.font = 'normal normal 20px Arial';
context.fillStyle = 'black';
context.fillText('😁😁', 10, 10 + 10);
context.fillText('😁', 10, 10 + 30);
if (isBrowser) {
compareLayerAndCanvas(layer, canvas, 254, 100);
}
});
it('check hindi with letterSpacing', function () {
@ -282,7 +315,7 @@ describe('Text', function () {
var oldWidth = text.width();
text.letterSpacing(10);
assert.equal(text.width(), oldWidth + 40);
assert.equal(text.width(), oldWidth + 50);
layer.draw();
});
// ======================================================
@ -543,7 +576,7 @@ describe('Text', function () {
if (isBrowser) {
assert.equal(
layer.getContext().getTrace(false, true),
"clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 14px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(HEADING,18,7);restore();save();fillStyle=black;fillText(,50,21);restore();save();fillStyle=black;fillText(All the world's,7,35);restore();save();fillStyle=black;fillText(a stage,,25,49);restore();save();fillStyle=black;fillText(merely,28,63);restore();save();fillStyle=black;fillText(players. They,7,77);restore();save();fillStyle=black;fillText(have…,27,91);restore();restore();"
"clearRect(0,0,578,200);save();transform(1,0,0,1,10,10);font=normal normal 14px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=black;fillText(HEADING,18,7);restore();save();fillStyle=black;fillText(,50,21);restore();save();fillStyle=black;fillText(All the world's a,1,35);restore();save();fillStyle=black;fillText(stage, merely,7,49);restore();save();fillStyle=black;fillText(players. They,7,63);restore();save();fillStyle=black;fillText(have theirrrrrrr,5,77);restore();save();fillStyle=black;fillText(exits and…,14,91);restore();restore();"
);
}
});
@ -764,7 +797,7 @@ describe('Text', function () {
width: 380,
align: 'justify',
letterSpacing: 5,
textDecoration: 'underline',
textDecoration: 'underline line-through',
padding: 20,
draggable: true,
});
@ -780,7 +813,7 @@ describe('Text', function () {
}
var trace =
'fillText(c,69.696,77);fillStyle=#555;fillText(e,81.696,77);fillStyle=#555;fillText(s,94.482,77);fillStyle=#555;fillText(;,106.482,77);fillStyle=#555;fillText( ,117.549,77);fillStyle=#555;fillText(A,126.438,77);fillStyle=#555;fillText(n,140.776,77);fillStyle=#555;fillText(d,153.563,77);fillStyle=#555;fillText( ,168.525,77);fillStyle=#555;fillText(o,177.415,77);fillStyle=#555;fillText(n,190.201,77);fillStyle=#555;fillText(e,202.987,77);fillStyle=#555;fillText( ,217.95,77);fillStyle=#555;fillText(m,226.84,77);fillStyle=#555;fillText(a,243.502,77);fillStyle=#555;fillText(n,256.288,77);fillStyle=#555;fillText( ,271.251,77);fillStyle=#555;fillText(i,280.141,77);fillStyle=#555;fillText(n,288.251,77);fillStyle=#555;fillText( ,303.214,77);fillStyle=#555;fillText(h,312.104,77);fillStyle=#555;fillText(i,324.89,77);fillStyle=#555;fillText(s,333,77);restore();save();save();beginPath();moveTo(0,98);lineTo(245,98);stroke();restore();fillStyle=#555;fillText(t,0,91);fillStyle=#555;fillText(i,8.89,91);fillStyle=#555;fillText(m,17,91);fillStyle=#555;fillText(e,33.662,91);fillStyle=#555;fillText( ,46.448,91);fillStyle=#555;fillText(p,55.338,91);fillStyle=#555;fillText(l,68.124,91);fillStyle=#555;fillText(a,76.234,91);fillStyle=#555;fillText(y,89.021,91);fillStyle=#555;fillText(s,101.021,91);fillStyle=#555;fillText( ,113.021,91);fillStyle=#555;fillText(m,121.91,91);fillStyle=#555;fillText(a,138.572,91);fillStyle=#555;fillText(n,151.358,91);fillStyle=#555;fillText(y,164.145,91);fillStyle=#555;fillText( ,176.145,91);fillStyle=#555;fillText(p,185.034,91);fillStyle=#555;fillText(a,197.82,91);fillStyle=#555;fillText(r,210.606,91);fillStyle=#555;fillText(t,220.269,91);fillStyle=#555;fillText(s,229.158,91);fillStyle=#555;fillText(.,241.158,91);restore();restore();';
'fillText(;,106.482,77);fillStyle=#555;fillText( ,116.549,77);fillStyle=#555;fillText(A,125.438,77);fillStyle=#555;fillText(n,139.776,77);fillStyle=#555;fillText(d,152.563,77);fillStyle=#555;fillText( ,166.525,77);fillStyle=#555;fillText(o,175.415,77);fillStyle=#555;fillText(n,188.201,77);fillStyle=#555;fillText(e,200.987,77);fillStyle=#555;fillText( ,214.95,77);fillStyle=#555;fillText(m,223.84,77);fillStyle=#555;fillText(a,240.502,77);fillStyle=#555;fillText(n,253.288,77);fillStyle=#555;fillText( ,267.251,77);fillStyle=#555;fillText(i,276.141,77);fillStyle=#555;fillText(n,284.251,77);fillStyle=#555;fillText( ,298.214,77);fillStyle=#555;fillText(h,307.104,77);fillStyle=#555;fillText(i,319.89,77);fillStyle=#555;fillText(s,328,77);restore();save();save();beginPath();moveTo(0,98);lineTo(250,98);stroke();restore();save();beginPath();moveTo(0,91);lineTo(250,91);stroke();restore();fillStyle=#555;fillText(t,0,91);fillStyle=#555;fillText(i,8.89,91);fillStyle=#555;fillText(m,17,91);fillStyle=#555;fillText(e,33.662,91);fillStyle=#555;fillText( ,46.448,91);fillStyle=#555;fillText(p,55.338,91);fillStyle=#555;fillText(l,68.124,91);fillStyle=#555;fillText(a,76.234,91);fillStyle=#555;fillText(y,89.021,91);fillStyle=#555;fillText(s,101.021,91);fillStyle=#555;fillText( ,113.021,91);fillStyle=#555;fillText(m,121.91,91);fillStyle=#555;fillText(a,138.572,91);fillStyle=#555;fillText(n,151.358,91);fillStyle=#555;fillText(y,164.145,91);fillStyle=#555;fillText( ,176.145,91);fillStyle=#555;fillText(p,185.034,91);fillStyle=#555;fillText(a,197.82,91);fillStyle=#555;fillText(r,210.606,91);fillStyle=#555;fillText(t,220.269,91);fillStyle=#555;fillText(s,229.158,91);fillStyle=#555;fillText(.,241.158,91);restore();restore();';
assert.equal(layer.getContext().getTrace(), trace);
});
@ -1244,9 +1277,9 @@ describe('Text', function () {
// so we need to adjust offset
const diff = isBrowser ? 4 : 50;
assert.equal(Math.abs(Math.round(text1.width()) - 1725) < diff, true);
assert.equal(Math.abs(Math.round(text2.width()) - 2613) < diff, true);
assert.equal(Math.abs(Math.round(text3.width()) - 2005) < diff, true);
assert.equal(Math.abs(Math.round(text4.width()) - 1932) < diff, true);
assert.equal(Math.abs(Math.round(text2.width()) - 2616) < diff, true);
assert.equal(Math.abs(Math.round(text3.width()) - 2009) < diff, true);
assert.equal(Math.abs(Math.round(text4.width()) - 1936) < diff, true);
});
it('default text color should be black', function () {

45
test/unit/Transformer-test.ts
View File

@ -5088,4 +5088,49 @@ describe('Transformer', function () {
}, 100);
}, 100);
});
it('should properly clean up subscriptions on detach/destroy', function () {
var stage = addStage();
var layer = new Konva.Layer();
stage.add(layer);
var rect = new Konva.Rect({
x: 100,
y: 60,
width: 100,
height: 100,
fill: 'yellow',
});
layer.add(rect);
// draw to attach all listeners
layer.draw();
// Count initial number of event listeners
var initialListeners = Object.keys(rect.eventListeners).length;
// Create and attach first transformer
var tr1 = new Konva.Transformer({
nodes: [rect],
});
layer.add(tr1);
// Destroy first transformer
tr1.destroy();
// Create and attach second transformer
var tr2 = new Konva.Transformer({
nodes: [rect],
});
layer.add(tr2);
// Destroy second transformer
tr2.destroy();
// Check that we have same number of listeners as initially
assert.equal(
Object.keys(rect.eventListeners).length,
initialListeners,
'Event listeners should be cleaned up properly'
);
});
});

34
test/unit/Tween-test.ts
View File

@ -98,8 +98,8 @@ describe('Tween', function () {
tween.destroy();
assert.equal(Konva.Tween.tweens[circle._id].x, undefined);
assert.equal(Konva.Tween.attrs[circle._id][tween._id], undefined);
assert.equal(Konva.Tween.tweens[circle._id], undefined);
assert.equal(Konva.Tween.attrs[circle._id], undefined);
});
// ======================================================
@ -238,7 +238,7 @@ describe('Tween', function () {
duration: 0.1,
onFinish: function () {
assert.equal(circle.x(), stage.width() / 2);
assert.equal(Object.keys(Konva.Tween.attrs[circle._id]).length, 0);
assert.equal(Konva.Tween.attrs[circle._id], undefined);
done();
},
});
@ -305,16 +305,10 @@ describe('Tween', function () {
points: [100, 100, 200, 100, 200, 200, 100, 200],
duration: 0.1,
onFinish: function () {
assert.deepEqual(line.points(), [
100,
100,
200,
100,
200,
200,
100,
200,
]);
assert.deepEqual(
line.points(),
[100, 100, 200, 100, 200, 200, 100, 200]
);
done();
},
});
@ -364,16 +358,10 @@ describe('Tween', function () {
tween.reverse();
},
onReset: function () {
assert.deepEqual(line.points(), [
100,
100,
200,
100,
200,
200,
100,
200,
]);
assert.deepEqual(
line.points(),
[100, 100, 200, 100, 200, 200, 100, 200]
);
done();
},
});

77
test/unit/imagediff.ts
View File

@ -57,19 +57,16 @@ function isType(object, type) {
// Type Conversion
function copyImageData(imageData) {
var height = imageData.height,
const height = imageData.height,
width = imageData.width,
data = imageData.data,
newImageData,
newData,
i;
data = imageData.data;
canvas.width = width;
canvas.height = height;
newImageData = context.getImageData(0, 0, width, height);
newData = newImageData.data;
const newImageData = context.getImageData(0, 0, width, height);
const newData = newImageData.data;
for (i = imageData.data.length; i--; ) {
for (let i = imageData.data.length; i--; ) {
newData[i] = data[i];
}
@ -90,7 +87,7 @@ function toImageData(object) {
}
}
function toImageDataFromImage(image) {
var height = image.height,
const height = image.height,
width = image.width;
canvas.width = width;
canvas.height = height;
@ -99,7 +96,7 @@ function toImageDataFromImage(image) {
return context.getImageData(0, 0, width, height);
}
function toImageDataFromCanvas(canvas) {
var height = canvas.height,
const height = canvas.height,
width = canvas.width,
context = canvas.getContext('2d');
if (!width || !height) {
@ -109,13 +106,13 @@ function toImageDataFromCanvas(canvas) {
return context.getImageData(0, 0, width, height);
}
function toImageDataFromContext(context) {
var canvas = context.canvas,
const canvas = context.canvas,
height = canvas.height,
width = canvas.width;
return context.getImageData(0, 0, width, height);
}
function toCanvas(object) {
var data = toImageData(object),
const data = toImageData(object),
canvas = getCanvas(data.width, data.height),
context = canvas.getContext('2d');
@ -135,16 +132,15 @@ function equalDimensions(a, b) {
}
export function equal(a, b, tolerance, secondTol) {
var aData = a.data,
const aData = a.data,
bData = b.data,
length = aData.length,
i;
length = aData.length;
tolerance = tolerance || 0;
var count = 0;
let count = 0;
if (!equalDimensions(a, b)) return false;
for (i = length; i--; ) {
for (let i = length; i--; ) {
const d = Math.abs(aData[i] - bData[i]);
if (aData[i] !== bData[i] && d > tolerance) {
if (!secondTol) {
@ -168,21 +164,15 @@ function diff(a, b, options) {
return (equalDimensions(a, b) ? diffEqual : diffUnequal)(a, b, options);
}
function diffEqual(a, b, options) {
var height = a.height,
const height = a.height,
width = a.width,
c = getImageData(width, height), // c = a - b
aData = a.data,
bData = b.data,
cData = c.data,
length = cData.length,
row,
column,
i,
j,
k,
v;
length = cData.length;
for (i = 0; i < length; i += 4) {
for (let i = 0; i < length; i += 4) {
cData[i] = Math.abs(aData[i] - bData[i]);
cData[i + 1] = Math.abs(aData[i + 1] - bData[i + 1]);
cData[i + 2] = Math.abs(aData[i + 2] - bData[i + 2]);
@ -192,32 +182,26 @@ function diffEqual(a, b, options) {
return c;
}
function diffUnequal(a, b, options) {
var height = Math.max(a.height, b.height),
const height = Math.max(a.height, b.height),
width = Math.max(a.width, b.width),
c = getImageData(width, height), // c = a - b
aData = a.data,
bData = b.data,
cData = c.data,
align = options && options.align,
rowOffset,
columnOffset,
row,
column,
i,
j,
k,
v;
align = options && options.align;
var rowOffset,
columnOffset;
for (i = cData.length - 1; i > 0; i = i - 4) {
for (let i = cData.length - 1; i > 0; i = i - 4) {
cData[i] = 255;
}
// Add First Image
offsets(a);
for (row = a.height; row--; ) {
for (column = a.width; column--; ) {
i = 4 * ((row + rowOffset) * width + (column + columnOffset));
j = 4 * (row * a.width + column);
for (let row = a.height; row--; ) {
for (let column = a.width; column--; ) {
const i = 4 * ((row + rowOffset) * width + (column + columnOffset));
const j = 4 * (row * a.width + column);
cData[i + 0] = aData[j + 0]; // r
cData[i + 1] = aData[j + 1]; // g
cData[i + 2] = aData[j + 2]; // b
@ -227,10 +211,10 @@ function diffUnequal(a, b, options) {
// Subtract Second Image
offsets(b);
for (row = b.height; row--; ) {
for (column = b.width; column--; ) {
i = 4 * ((row + rowOffset) * width + (column + columnOffset));
j = 4 * (row * b.width + column);
for (let row = b.height; row--; ) {
for (let column = b.width; column--; ) {
const i = 4 * ((row + rowOffset) * width + (column + columnOffset));
const j = 4 * (row * b.width + column);
cData[i + 0] = Math.abs(cData[i + 0] - bData[j + 0]); // r
cData[i + 1] = Math.abs(cData[i + 1] - bData[j + 1]); // g
cData[i + 2] = Math.abs(cData[i + 2] - bData[j + 2]); // b
@ -253,8 +237,7 @@ function diffUnequal(a, b, options) {
// Validation
function checkType(...args) {
var i;
for (i = 0; i < args.length; i++) {
for (let i = 0; i < args.length; i++) {
if (!isImageType(args[i])) {
throw {
name: 'ImageTypeError',

8
test/unit/test-utils.ts
View File

@ -131,6 +131,14 @@ export function compareCanvases(canvas1, canvas2, tol?, secondTol?) {
b.appendChild(canvas2);
c.appendChild(diffCanvas);
div.appendChild(b);
if (!canvas1.parentNode) {
const d = get('div', '<div>Original:</div>');
canvas1.style.position = '';
canvas1.style.display = '';
d.style.float = 'left';
d.appendChild(canvas1);
div.appendChild(d);
}
div.appendChild(c);
getContainer().appendChild(div);
}