chore(TS): filters #8474

ShaMan123 · 2022-11-28T00:15:25Z

Motivation

Description

This PR took a lot more time than I intended for it

Changes

IMO filters should not reside on Image, they should be standalone

Gist

In Action

github-actions · 2022-11-28T00:17:46Z

Build Stats

file / KB (diff)	bundled	minified
fabric	1004.709 (-37.739)	312.154 (+0.907)

github-actions · 2022-11-28T00:18:08Z

Coverage after merging ts-filters1 into master will be

82.76%

Coverage Report

File	Stmts	Branches	Funcs	Lines	Uncovered Lines
HEADER.js	54%	48.15%	0%	63.64%	12, 14, 14, 14, 14, 14, 16–17, 21, 21–22, 22, 22, 24, 24, 26, 28, 30–31, 77, 77, 77
src
cache.ts	97.06%	90%	100%	100%	56
canvas.class.ts	93.36%	90.22%	94.12%	95.54%	1047, 1047–1048, 1051, 1071, 1071, 1106, 1139–1140, 1168–1169, 1202, 1210, 1320–1321, 1323–1324, 1344–1345, 1506, 1511, 1521, 1525, 474–475, 480, 489, 638–640, 685–686, 735–736, 739, 741, 784–786, 828, 833–834, 862–863
config.ts	77.27%	66.67%	66.67%	84.62%	130, 138–140, 151–153
constants.ts	100%	100%	100%	100%
intersection.class.ts	100%	100%	100%	100%
pattern.class.ts	92.19%	85.71%	100%	96.30%	109, 115, 126, 135, 87
point.class.ts	100%	100%	100%	100%
shadow.class.ts	98.51%	96%	100%	100%	156
static_canvas.class.ts	90.15%	83.90%	96.70%	92.73%	1112–1113, 1113, 1113–1114, 1248, 1314–1315, 1318, 1367–1368, 1461, 1476, 1480, 1506–1507, 1536–1537, 1570–1571, 1612–1613, 1616, 1618, 1618, 1618, 1618, 1622, 1622, 1622–1624, 1646–1647, 1688–1689, 1692, 1694, 1694, 1694, 1694, 1698, 1698, 1698–1700, 1771, 1771–1772, 1830, 1832, 1832, 1832, 1832, 1832–1833, 1836–1837, 1837, 1837–1838, 1841, 1841, 1841, 1843, 1846, 1852, 1854–1855, 1855, 1855, 1858–1859, 1859, 1859, 1862, 319–320, 322–323, 325–326, 339–340, 342–343, 57, 658–661, 861
src/brushes
base_brush.class.ts	100%	100%	100%	100%
circle_brush.class.ts	1.52%	0%	0%	2%	101, 103–105, 114, 114, 114, 116, 118, 120–122, 124–127, 135, 142, 144, 24, 29–30, 38–42, 46–50, 57–60, 68–72, 74, 82, 82, 82, 82, 82–83, 85, 85, 85–88, 90, 98–99
pattern_brush.class.ts	97.14%	87.50%	100%	100%	22
pencil_brush.class.ts	91.91%	85.42%	100%	93.64%	123–124, 153, 153–155, 277, 281, 286–287, 69–70, 85–86
spray_brush.class.ts	1.16%	0%	0%	1.56%	100–102, 104–105, 113, 113, 113, 113, 113–114, 116–117, 124–125, 127, 129–133, 142, 146–147, 147, 155, 155, 155–158, 160–163, 167–168, 170, 172–175, 178, 185–186, 188, 190–191, 193, 200–201, 203–204, 207, 207, 214, 214, 218, 23–24, 26–28, 28, 28–30, 34, 43, 50, 57, 64, 71, 78, 90–92
src/color
color.class.ts	91.67%	84.51%	100%	94.44%	325–326, 330–331, 334–335, 41, 45, 72–73, 73, 75, 75, 75–76, 78–79
color_map.ts	100%	100%	100%	100%
constants.ts	100%	100%	100%	100%
index.ts	100%	100%	100%	100%
util.ts	100%	100%	100%	100%
src/controls
actions.ts	100%	100%	100%	100%
changeWidth.ts	100%	100%	100%	100%
control.class.ts	93.98%	88.89%	90.91%	97.78%	235, 319, 319, 354
controls.render.ts	81.63%	78%	100%	84.78%	106, 111, 121, 121, 45, 50, 61, 61, 65–72, 81–82
default_controls.ts	86.67%	66.67%	100%	100%	125, 132
drag.ts	100%	100%	100%	100%
rotate.ts	20%	12.50%	50%	22.22%	45, 51, 51, 51–52, 55–57, 59, 59, 59, 59, 59–61, 61, 61–63, 65, 65, 65–67, 67, 67–68, 73, 73, 73–74, 76, 78, 80–81
scale.ts	94.41%	94.74%	100%	93.59%	129–130, 132–134, 181–183, 42
scaleSkew.ts	80.56%	66.67%	100%	92.31%	14, 28, 30, 30, 30, 32, 34
skew.ts	91.03%	79.31%	100%	97.67%	130–131, 162–163, 170, 176, 178
util.ts	100%	100%	100%	100%
wrapWithFireEvent.ts	100%	100%	100%	100%
wrapWithFixedAnchor.ts	100%	100%	100%	100%
src/filters
2d_backend.class.ts	92%	83.33%	100%	93.75%	35–36
FilterBackend.ts	88.89%	83.33%	100%	90%	11–12
WebGLProbe.ts	40.54%	40%	60%	36.36%	28–30, 30, 30–31, 33–35, 43, 46–48, 48, 48–51, 53, 58
base_filter.class.ts	20.47%	20.41%	31.82%	18%	100–102, 102, 102–103, 110–112, 112, 112–113, 120–123, 123, 123–124, 130, 130, 130–133, 151, 181–186, 190–191, 191, 191–194, 194, 194, 194, 194–196, 202, 211–212, 217–221, 264–267, 276, 287–288, 288, 288–289, 291, 307–309, 309, 309, 309, 309–310, 312, 314–315, 317–318, 320–322, 330–331, 333, 337–339, 343, 343, 343, 347, 347, 347–348, 370, 370, 370–374, 402, 58–59, 81–82, 84, 84, 84–85, 85, 88, 93–95, 97, 97, 97, 97, 97, 97–98
blendcolor_filter.class.ts	6.82%	0%	25%	6.35%	101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 101, 103–106, 108–111, 113–116, 119–122, 124–127, 129–132, 134–137, 139–140, 140, 143–144, 144, 147–148, 148, 151, 153–156, 158–160, 175, 190–195, 60, 76, 80, 90–94, 96–99
blendimage_filter.class.ts	52.86%	70%	9.09%	59.18%	130, 138–139, 154, 170–172, 180,

ShaMan123

🤢

I added fromObject on each filter

ShaMan123 · 2022-11-28T00:19:10Z

src/filters/blendimage_filter.class.ts

-          1,
-        ];
-      },
+  createTexture(backend: WebGLFilterBackend, image: Image) {


ShaMan123 · 2022-11-28T00:20:23Z

src/filters/blur_filter.class.ts

-      type: 'Blur',
-
-      /*
-'gl_FragColor = vec4(0.0);',


what is this?

i don't remember. either a different blur or a more performant version of the same blur

ShaMan123 · 2022-11-28T00:22:47Z

src/filters/colormatrix_filter.class.ts


-      mainParameter: 'matrix',
+  setOptions({ matrix, ...options }: Record<string, any>) {


I don't like this but until default values are settled this seems the best option

ShaMan123 · 2022-11-28T00:23:24Z

src/filters/composed_filter.class.ts

+   * @param {Number} options.passes The number of filters remaining to be applied.
+   */
+  applyTo(options: TWebGLPipelineState | T2DPipelineState) {
+    if (isWebGLPipelineState(options)) {


this is a change supposedly

i think is fine. the code before was adding a useless passes property to the 2d pipeline.

ShaMan123 · 2022-11-28T00:23:53Z

src/filters/composed_filter.class.ts

-})(typeof exports !== 'undefined' ? exports : window);
+      ((object.subFilters || []) as AbstractBaseFilter[]).map((filter) =>
+        Object.values(filters)
+          .find((klass) => klass.prototype?.type === filter.type)!


some ugly hack since type is not static
I/O registry will handle it

ShaMan123 · 2022-11-28T00:26:43Z

src/filters/gamma_filter.class.ts

-       */
-      type: 'Gamma',
+  gamma: GammaInput;
+  rgbValues?: {


breaking change supposedly but not really since it is private

ShaMan123

ready

asturur · 2022-11-28T20:18:49Z

Yes filters should be standalone and will be probably soon, this in an export only issue and we can fix that easily.

asturur · 2022-11-28T20:39:51Z

src/filters/blendcolor_filter.class.ts

+  fragmentSource: {
+    multiply: 'gl_FragColor.rgb *= uColor.rgb;\n',
+    screen:
+      'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n',
+    add: 'gl_FragColor.rgb += uColor.rgb;\n',
+    diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n',
+    subtract: 'gl_FragColor.rgb -= uColor.rgb;\n',
+    lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n',
+    darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n',
+    exclusion:
+      'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n',
+    overlay: `
+      if (uColor.r < 0.5) {
+        gl_FragColor.r *= 2.0 * uColor.r;
+      } else {
+        gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);
+      }
+      if (uColor.g < 0.5) {
+        gl_FragColor.g *= 2.0 * uColor.g;
+      } else {
+        gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);
+      }
+      if (uColor.b < 0.5) {
+        gl_FragColor.b *= 2.0 * uColor.b;
+      } else {
+        gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);
+      }
+      `,
+    tint: `
+      gl_FragColor.rgb *= (1.0 - uColor.a);
+      gl_FragColor.rgb += uColor.rgb;
+      `,
+  },
+};


this can probably be a const outside the default definition. I can move it

asturur · 2022-11-28T21:01:57Z

src/filters/index.ts

+export * from './base_filter.class';
+export * from './blendcolor_filter.class';
+export * from './blendimage_filter.class';
+export * from './blur_filter.class';
+export * from './brightness_filter.class';
+export * from './colormatrix_filter.class';
+export * from './composed_filter.class';
+export * from './contrast_filter.class';
+export * from './convolute_filter.class';
+export * from './filter_generator';
+export * from './gamma_filter.class';
+export * from './grayscale_filter.class';
+export * from './hue_rotation.class';
+export * from './invert_filter.class';
+export * from './noise_filter.class';
+export * from './pixelate_filter.class';
+export * from './removecolor_filter.class';
+export * from './resize_filter.class';
+export * from './saturate_filter.class';
+export * from './vibrance_filter.class';


in general i would like to avoid barrel imports.
The reason for me is that they don't give me anything and they mask to me where the file is and what name it has.
For now it does not matter since this is still needeed for the bundle i suppose

asturur · 2022-11-28T21:05:00Z

🤢

I added fromObject on each filter

Oh was it a TS problem or something else?
We can find a way to avoid it but isn't a priority i guess

ShaMan123 added 30 commits November 28, 2022 01:14

transform

f6d99c8

Update colormatrix_filter.class.ts

fb981eb

Update contrast_filter.class.ts

bd46b34

Update colormatrix_filter.class.ts

91cbd55

Update blendcolor_filter.class.ts

baf0cf5

Update blendimage_filter.class.ts

723ed67

Update base_filter.class.ts

22d6483

Update brightness_filter.class.ts

3f97435

Update blur_filter.class.ts

1b2f07e

Update blur_filter.class.ts

7f18f98

abstractify

59b52e0

Update base_filter.class.ts

16558e9

Update blur_filter.class.ts

0aea676

Update base_filter.class.ts

7205448

Update convolute_filter.class.ts

939dab6

Update image.class.ts

7fef1d1

Update filter_boilerplate.ts

153edd1

Update filter_generator.ts

e70ef24

Update gamma_filter.class.ts

c944836

Update grayscale_filter.class.ts

3b04916

Update grayscale_filter.class.ts

1f2f7cd

Update hue_rotation.class.ts

25ed001

Update invert_filter.class.ts

93249c7

Update noise_filter.class.ts

d07ccab

Update pixelate_filter.class.ts

985f25f

Update removecolor_filter.class.ts

b163df3

Update resize_filter.class.ts

48621b1

Update saturate_filter.class.ts

2a6cc5e

Update vibrance_filter.class.ts

53b0fc1

Update composed_filter.class.ts

cd1bd59

ShaMan123 added 5 commits November 28, 2022 01:36

fix mane conflict

b7e70e7

Update gamma_filter.class.ts

2470c4e

Update pattern.class.ts

8bb4ee7

Update composed_filter.class.ts

e68e041

Update composed_filter.class.ts

fa209cd

ShaMan123 commented Nov 28, 2022

View reviewed changes

ShaMan123 added 13 commits November 28, 2022 02:34

Update blendcolor_filter.class.ts

0ccf0bd

Update blendimage_filter.class.ts

e465f36

Update composed_filter.class.ts

9cfdf92

not var

dc720ae

Update resize_filter.class.ts

cd980b3

Update blendcolor_filter.class.ts

9b475a2

Update resize_filter.class.ts

88a5162

Update resize_filter.class.ts

19f617b

Update convolute_filter.class.ts

f8f82d1

template string

5aac217

Update CHANGELOG.md

8664d48

base class

a3249b5

redo

63c8cab

ShaMan123 commented Nov 28, 2022

View reviewed changes

asturur reviewed Nov 28, 2022

View reviewed changes

asturur approved these changes Nov 28, 2022

View reviewed changes

asturur merged commit ac25717 into master Nov 28, 2022

frankrousseau pushed a commit to cgwire/fabric.js that referenced this pull request Jan 6, 2023

chore(TS): convert filters (fabricjs#8474)

fa99050

ShaMan123 deleted the ts-filters1 branch February 5, 2023 05:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(TS): filters #8474

chore(TS): filters #8474

ShaMan123 commented Nov 28, 2022 •

edited

Loading

github-actions bot commented Nov 28, 2022 •

edited

Loading

github-actions bot commented Nov 28, 2022 •

edited

Loading

ShaMan123 left a comment •

edited

Loading

ShaMan123 Nov 28, 2022

ShaMan123 Nov 28, 2022

asturur Nov 28, 2022

ShaMan123 Nov 28, 2022 •

edited

Loading

ShaMan123 Nov 28, 2022

asturur Nov 28, 2022

ShaMan123 Nov 28, 2022

ShaMan123 Nov 28, 2022 •

edited

Loading

ShaMan123 left a comment

asturur commented Nov 28, 2022

asturur Nov 28, 2022

asturur Nov 28, 2022

asturur commented Nov 28, 2022


		mainParameter: 'matrix',
		setOptions({ matrix, ...options }: Record<string, any>) {

chore(TS): filters #8474

chore(TS): filters #8474

Conversation

ShaMan123 commented Nov 28, 2022 • edited Loading

Motivation

Description

Changes

Gist

In Action

github-actions bot commented Nov 28, 2022 • edited Loading

github-actions bot commented Nov 28, 2022 • edited Loading

ShaMan123 left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ShaMan123 Nov 28, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ShaMan123 Nov 28, 2022 • edited Loading

Choose a reason for hiding this comment

ShaMan123 left a comment

Choose a reason for hiding this comment

asturur commented Nov 28, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

asturur commented Nov 28, 2022

ShaMan123 commented Nov 28, 2022 •

edited

Loading

github-actions bot commented Nov 28, 2022 •

edited

Loading

github-actions bot commented Nov 28, 2022 •

edited

Loading

ShaMan123 left a comment •

edited

Loading

ShaMan123 Nov 28, 2022 •

edited

Loading

ShaMan123 Nov 28, 2022 •

edited

Loading