Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(TS): canvas options #9140

Merged
merged 24 commits into from
Aug 3, 2023
Merged

chore(TS): canvas options #9140

merged 24 commits into from
Aug 3, 2023

Conversation

ShaMan123
Copy link
Contributor

@ShaMan123 ShaMan123 commented Aug 3, 2023

Motivation

Description

First merge #9139

Typing canvas options

Changes

  • rm interactive flag 0d0ce13
  • typed backgroundImage, overlay as undefined instead of null and removed from default values with clipPath

Gist

2 difficult commits 86927bd 6791d74

In Action

@ShaMan123 ShaMan123 requested a review from asturur August 3, 2023 06:54
@github-actions
Copy link
Contributor

github-actions bot commented Aug 3, 2023

Build Stats

file / KB (diff) bundled minified
fabric 914.572 (-5.728) 305.403 (-0.108)

@github-actions
Copy link
Contributor

github-actions bot commented Aug 3, 2023

Coverage after merging ts-canvas-options into master will be

82.95%

Coverage Report
FileStmtsBranchesFuncsLinesUncovered Lines
index.node.ts7.69%100%0%14.29%17, 20, 23, 35, 38, 41
src
   ClassRegistry.ts100%100%100%100%
   Collection.ts94.71%94.64%86.67%97.09%101, 104, 207–208, 233–234
   CommonMethods.ts96.55%87.50%100%100%9
   Intersection.ts100%100%100%100%
   Observable.ts87.76%85.29%87.50%89.58%134–135, 160–161, 32–33, 41, 50, 78, 89
   Point.ts100%100%100%100%
   Shadow.ts98.36%95.65%100%100%178
   cache.ts97.06%90%100%100%57
   config.ts75%66.67%66.67%82.76%130, 138, 138, 138, 138, 138–140, 151–153
   constants.ts100%100%100%100%
src/Pattern
   Pattern.ts92.31%91.89%90%93.55%118, 129, 138, 31, 94
src/brushes
   BaseBrush.ts100%100%100%100%
   CircleBrush.ts0%0%0%0%108, 108, 108, 110, 112, 114–116, 118–121, 128–129, 13, 136, 138, 23–24, 32–36, 40–44, 51–54, 62–66, 68, 76, 76, 76, 76, 76–77, 79, 79, 79–82, 84, 92–93, 95, 97–99
   PatternBrush.ts97.06%87.50%100%100%21
   PencilBrush.ts91.06%82.35%100%93.81%122–123, 152, 152–154, 176, 176, 276, 280, 285–286, 68–69, 84–85
   SprayBrush.ts0%0%0%0%107, 107, 107, 107, 107–108, 110–111, 118–119, 121, 123–127, 136, 140–141, 141, 149, 149, 149–152, 154–157, 161–162, 164, 166–169, 17, 172, 179, 18, 180, 182, 184–185, 187, 194–195, 197–198, 20, 201, 201, 208, 208, 21, 212, 22, 22, 22–24, 28, 32, 39, 46, 53, 60, 67, 84–86, 94–96, 98–99
src/canvas
   Canvas.ts79.05%77.54%83.05%79.57%1000–1001, 1001, 1001–1003, 1005–1006, 1006, 1006, 1008, 1016, 1016, 1016–1018, 1018, 1018, 1024–1025, 1033–1034, 1034, 1034–1035, 1040, 1042, 1073–1075, 1078–1079, 1083–1084, 1197–1199, 1202–1203, 1276, 1395, 1515, 161, 186, 296–297, 300–304, 309, 332–333, 338–343, 363, 363, 363–364, 364, 364–365, 373, 378–379, 379, 379, 38, 380, 382, 391, 397–398, 398, 398, 42, 441, 449, 453, 453, 453–454, 456, 538–539, 539, 539–540, 546, 546, 546–548, 568, 570, 570, 570–571, 571, 571, 574, 574, 574–575, 578, 587–588, 590–591, 593, 593–594, 596–597, 609–610, 610, 610–611, 613–618, 624, 631, 668, 668, 668, 670, 672–677, 683, 689, 689, 689–690, 692, 695, 700, 713, 741, 741, 799–800, 800, 800–801, 803, 806–807, 807, 807–808, 810–811, 814, 814–816, 819–820, 890, 902, 909, 930, 962, 983–984
   CanvasOptions.ts100%100%100%100%
   SelectableCanvas.ts94.41%92.24%94.23%96.14%1098, 1100, 1102–1103, 301, 477–478, 480–481, 481, 481, 530–531, 592–593, 646–648, 680, 685–686, 713–714, 898, 898–899, 902, 922, 922, 971, 979
   StaticCanvas.ts96.78%93.09%100%98.53%1030, 1040, 1092–1093, 1096, 1131–1132, 1208, 1217, 1217, 1221, 1221, 1268–1269, 185–186, 202, 570, 582–583, 913–914, 914, 914–915
   StaticCanvasOptions.ts100%100%100%100%
   TextEditingManager.ts84.31%71.43%91.67%88%17–18, 18, 18–19, 19, 19
src/canvas/DOMManagers
   CanvasDOMManager.ts95.52%70%100%100%21–22, 29
   StaticCanvasDOMManager.ts100%100%100%100%
   util.ts86.67%80.56%83.33%93.94%14, 26, 63–64, 67, 67, 74, 93–94
src/color
   Color.ts94.96%91.67%96.30%96.05%233, 258–259, 267–268, 48
   color_map.ts100%100%100%100%
   constants.ts100%100%100%100%
   util.ts85.71%76.92%100%89.74%55–56, 56, 58, 58, 58–59, 61–62, 89
src/controls
   Control.ts93.33%87.88%91.67%97.78%175, 240, 327, 327, 362
   changeWidth.ts100%100%100%100%
   commonControls.ts100%100%100%100%
   controlRendering.ts81.63%78%100%84.78%106, 111, 121, 121, 45, 50, 61, 61, 65–72, 81–82
   drag.ts100%100%100%100%
   fireEvent.ts88.89%75%100%100%13
   polyControl.ts5.97%0%0%11.11%100, 105, 119, 119, 119, 119, 119, 121–124, 124, 127, 134, 17, 25–29, 29, 29, 29, 29, 29, 29, 29, 50–56, 56, 56, 56, 56, 58, 63–64, 66, 76, 82–83, 83, 83–84, 88–90, 90, 90, 90, 90, 92
   rotate.ts19.57%12.50%50%21.43%41, 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.ts93.57%92.94%100%93.67%129–130, 132–134, 148–149, 181–183, 42
   scaleSkew.ts78.79%64.29%100%85.71%27, 29, 29, 29, 31, 33, 35
   skew.ts91.03%79.31%100%97.67%131–132, 163–164, 171, 177, 179
   util.ts100%100%100%100%
   wrapWithFireEvent.ts100%100%100%100%
   wrapWithFixedAnchor.ts100%100%100%100%
src/env
   browser.ts</

Copy link
Contributor Author

@ShaMan123 ShaMan123 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

stable

@ShaMan123 ShaMan123 added the types Typescript related label Aug 3, 2023
Comment on lines -195 to -196
assert.ok('backgroundImage' in canvas);
assert.ok('overlayImage' in canvas);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do you know why those are not true anymore?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe canvas.hasOwnProperty would work? how do wecheck we don't accidentally remove stuff from the classes? this was meant to do this only

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just making a test....

Copy link
Contributor Author

@ShaMan123 ShaMan123 Aug 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need
I wrote in the description that I changed the type from null to undefined.
So there was no sense in setting these fields to undefined in default props so I removed them.
That is all.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah if are not set the class doesn't know about them. that is bad and rise some questions.
If the class are better because differently from objects they are all predefined and so the compiler has no surprises on members and methods, i wonder what the optional properties do. Those are just added at runtime?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure.
But that is the point of declare, isn't it?
Without declare it is defined as void 0.
But then we have problems in initialization.
That can be fixed of coursr but will require a lot if refactoring

* @default
* @since fabric 4.0 // changed name and default value
*/
uniformScaling: boolean;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In retrospective i don't like the idea of moving the documentation out of the classes themselves. I understand it makes files shorter but it seems the wrong solution.
\I know we did this already and is not new, but now i really dislike it.

Opening a class and being able to read is important to me

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you hover over a prop it shows the jsdoc.
I like it but that is why I kept it in separate commits... because I wanted to give you an easy way out.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no if we go out we change them all. For now we keep consistency.
I know hovering works but reading is reading. It is also a vscode thing not an universal one

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So should I revert or not?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should the jsdoc exist on the options as well?
For a dev the important place is on options so when creating a canvas ir object they see what it can do.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @asturur, better a big module with everything related than death-by-thousand-files. While vscode hover documentation helps, there are many other occasions where it's useful to have things colocated in the same file, e.g. PR reviewing or debugging.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd recommend this book where the topic of "deep" modules is explained: https://www.amazon.com/Philosophy-Software-Design-John-Ousterhout/dp/1732102201, i.e. a deep module with the relevant implementations all together (as far as the exposed public API is small) is better than many shallow modules that you need to put together in your mind in order to understand.

asturur
asturur previously approved these changes Aug 3, 2023
@asturur asturur merged commit 142ce40 into master Aug 3, 2023
23 of 24 checks passed
@asturur asturur deleted the ts-canvas-options branch August 3, 2023 21:48
@jiayihu
Copy link
Contributor

jiayihu commented Aug 10, 2023

Why was this flag removed @ShaMan123 ? We use it for instance so that when generating a snapshot of the canvas, some elements like the grid are not rendered because the canvas is not interactive

@ShaMan123
Copy link
Contributor Author

ShaMan123 commented Aug 14, 2023

I removed the interactive flag because fabric doesn't use it or need.
It has expectations we do not want to accomodate and was there in the first place because of old patterns (mainly usage of canvas mixins) which are dead. In other words, this is part of the v6 cleanup.
Regarding moving back all the jsdoc, 2 vs. 1, I lost. Is there a third option? Moving it back makes the interface concept a bit missing IMO.

@jiayihu
Copy link
Contributor

jiayihu commented Aug 14, 2023

Moving it back makes the interface concept a bit missing IMO.

What do you mean? In TS (and JS) the interface keyword has no strong OOP meaning and indeed I believe some naming in TS is misleading people to bad OOP habits. For me an interface is treated like a type, just with some technical differences in what you can do with them (declaration merging, type manipulation etc), but not in their semantic.
To make another example, Generics is also a bad name compared to "Type parameters" which much better represent the correct view.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
types Typescript related
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants