-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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
Changes from all commits
Commits
Show all changes
24 commits
Select commit
Hold shift + click to select a range
796b12d
chore(TS): mv `TProps` to typedefs
ShaMan123 778271b
rename(): TProps => TOptions
ShaMan123 ad643c9
update CHANGELOG.md
github-actions[bot] 81672c2
Update fabric.ts
ShaMan123 63b1fa0
Merge branch 'mv-TProps' of https://github.com/fabricjs/fabric.js int…
ShaMan123 336bc33
revert
ShaMan123 250a6cf
Update index.ts
ShaMan123 98a4560
init
ShaMan123 06d6c1e
ugly little hack
ShaMan123 b3c0f0a
Delete staticCanvasOptions.ts
ShaMan123 f62cb4d
rename
ShaMan123 ab135c2
Update canvas_static.js
ShaMan123 86927bd
extract static canvas jsdoc
ShaMan123 71eb2f7
Update StaticCanvas.ts
ShaMan123 6791d74
extract canvas options jsdoc
ShaMan123 0d0ce13
rm `Canvas#interactive` flag
ShaMan123 c8cb4fe
comments
ShaMan123 2fcea6e
Merge branch 'master' into ts-canvas-options
asturur 9d2d8d2
renamed changelog
asturur 5ff2ba4
Update canvas_static.js
asturur 283b150
Update canvas_static.js
asturur 16eeccd
Update canvas_static.js
asturur 3d06fe6
restored failed test
asturur d44d539
Update CHANGELOG.md
asturur File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,296 @@ | ||
import type { ModifierKey, TOptionalModifierKey } from '../EventTypeDefs'; | ||
import type { TOptions } from '../typedefs'; | ||
import type { StaticCanvasOptions } from './StaticCanvasOptions'; | ||
|
||
export interface CanvasTransformOptions { | ||
/** | ||
* When true, objects can be transformed by one side (unproportionally) | ||
* when dragged on the corners that normally would not do that. | ||
* @type Boolean | ||
* @default | ||
* @since fabric 4.0 // changed name and default value | ||
*/ | ||
uniformScaling: boolean; | ||
|
||
/** | ||
* Indicates which key switches uniform scaling. | ||
* values: 'altKey', 'shiftKey', 'ctrlKey'. | ||
* If `null` or 'none' or any other string that is not a modifier key | ||
* feature is disabled. | ||
* totally wrong named. this sounds like `uniform scaling` | ||
* if Canvas.uniformScaling is true, pressing this will set it to false | ||
* and viceversa. | ||
* @since 1.6.2 | ||
* @type ModifierKey | ||
* @default | ||
*/ | ||
uniScaleKey: TOptionalModifierKey; | ||
|
||
/** | ||
* When true, objects use center point as the origin of scale transformation. | ||
* <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean). | ||
* @since 1.3.4 | ||
* @type Boolean | ||
* @default | ||
*/ | ||
centeredScaling: boolean; | ||
|
||
/** | ||
* When true, objects use center point as the origin of rotate transformation. | ||
* <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean). | ||
* @since 1.3.4 | ||
* @type Boolean | ||
* @default | ||
*/ | ||
centeredRotation: boolean; | ||
|
||
/** | ||
* Indicates which key enable centered Transform | ||
* values: 'altKey', 'shiftKey', 'ctrlKey'. | ||
* If `null` or 'none' or any other string that is not a modifier key | ||
* feature is disabled feature disabled. | ||
* @since 1.6.2 | ||
* @type ModifierKey | ||
* @default | ||
*/ | ||
centeredKey: TOptionalModifierKey; | ||
|
||
/** | ||
* Indicates which key enable alternate action on corner | ||
* values: 'altKey', 'shiftKey', 'ctrlKey'. | ||
* If `null` or 'none' or any other string that is not a modifier key | ||
* feature is disabled feature disabled. | ||
* @since 1.6.2 | ||
* @type ModifierKey | ||
* @default | ||
*/ | ||
altActionKey: TOptionalModifierKey; | ||
} | ||
|
||
export interface CanvasSelectionOptions { | ||
/** | ||
* Indicates whether group selection should be enabled | ||
* @type Boolean | ||
* @default | ||
*/ | ||
selection: boolean; | ||
|
||
/** | ||
* Indicates which key or keys enable multiple click selection | ||
* Pass value as a string or array of strings | ||
* values: 'altKey', 'shiftKey', 'ctrlKey'. | ||
* If `null` or empty or containing any other string that is not a modifier key | ||
* feature is disabled. | ||
* @since 1.6.2 | ||
* @type ModifierKey|ModifierKey[] | ||
* @default | ||
*/ | ||
selectionKey: TOptionalModifierKey | ModifierKey[]; | ||
|
||
/** | ||
* Indicates which key enable alternative selection | ||
* in case of target overlapping with active object | ||
* values: 'altKey', 'shiftKey', 'ctrlKey'. | ||
* For a series of reason that come from the general expectations on how | ||
* things should work, this feature works only for preserveObjectStacking true. | ||
* If `null` or 'none' or any other string that is not a modifier key | ||
* feature is disabled. | ||
* @since 1.6.5 | ||
* @type null|ModifierKey | ||
* @default | ||
*/ | ||
altSelectionKey: TOptionalModifierKey; | ||
|
||
/** | ||
* Color of selection | ||
* @type String | ||
* @default | ||
*/ | ||
selectionColor: string; | ||
|
||
/** | ||
* Default dash array pattern | ||
* If not empty the selection border is dashed | ||
* @type Array | ||
*/ | ||
selectionDashArray: number[]; | ||
|
||
/** | ||
* Color of the border of selection (usually slightly darker than color of selection itself) | ||
* @type String | ||
* @default | ||
*/ | ||
selectionBorderColor: string; | ||
|
||
/** | ||
* Width of a line used in object/group selection | ||
* @type Number | ||
* @default | ||
*/ | ||
selectionLineWidth: number; | ||
|
||
/** | ||
* Select only shapes that are fully contained in the dragged selection rectangle. | ||
* @type Boolean | ||
* @default | ||
*/ | ||
selectionFullyContained: boolean; | ||
} | ||
|
||
export interface CanvasCursorOptions { | ||
/** | ||
* Default cursor value used when hovering over an object on canvas | ||
* @type CSSStyleDeclaration['cursor'] | ||
* @default move | ||
*/ | ||
hoverCursor: CSSStyleDeclaration['cursor']; | ||
|
||
/** | ||
* Default cursor value used when moving an object on canvas | ||
* @type CSSStyleDeclaration['cursor'] | ||
* @default move | ||
*/ | ||
moveCursor: CSSStyleDeclaration['cursor']; | ||
|
||
/** | ||
* Default cursor value used for the entire canvas | ||
* @type String | ||
* @default default | ||
*/ | ||
defaultCursor: CSSStyleDeclaration['cursor']; | ||
|
||
/** | ||
* Cursor value used during free drawing | ||
* @type String | ||
* @default crosshair | ||
*/ | ||
freeDrawingCursor: CSSStyleDeclaration['cursor']; | ||
|
||
/** | ||
* Cursor value used for disabled elements ( corners with disabled action ) | ||
* @type String | ||
* @since 2.0.0 | ||
* @default not-allowed | ||
*/ | ||
notAllowedCursor: CSSStyleDeclaration['cursor']; | ||
} | ||
|
||
export interface TargetFindOptions { | ||
/** | ||
* When true, object detection happens on per-pixel basis rather than on per-bounding-box | ||
* @type Boolean | ||
* @default | ||
*/ | ||
perPixelTargetFind: boolean; | ||
|
||
/** | ||
* Number of pixels around target pixel to tolerate (consider active) during object detection | ||
* @type Number | ||
* @default | ||
*/ | ||
targetFindTolerance: number; | ||
|
||
/** | ||
* When true, target detection is skipped. Target detection will return always undefined. | ||
* click selection won't work anymore, events will fire with no targets. | ||
* if something is selected before setting it to true, it will be deselected at the first click. | ||
* area selection will still work. check the `selection` property too. | ||
* if you deactivate both, you should look into staticCanvas. | ||
* @type Boolean | ||
* @default | ||
*/ | ||
skipTargetFind: boolean; | ||
} | ||
|
||
export interface CanvasEventsOptions { | ||
/** | ||
* Indicates if the right click on canvas can output the context menu or not | ||
* @type Boolean | ||
* @since 1.6.5 | ||
* @default | ||
*/ | ||
stopContextMenu: boolean; | ||
|
||
/** | ||
* Indicates if the canvas can fire right click events | ||
* @type Boolean | ||
* @since 1.6.5 | ||
* @default | ||
*/ | ||
fireRightClick: boolean; | ||
|
||
/** | ||
* Indicates if the canvas can fire middle click events | ||
* @type Boolean | ||
* @since 1.7.8 | ||
* @default | ||
*/ | ||
fireMiddleClick: boolean; | ||
|
||
/** | ||
* When the option is enabled, PointerEvent is used instead of TPointerEvent. | ||
* @type Boolean | ||
* @default | ||
*/ | ||
enablePointerEvents: boolean; | ||
} | ||
|
||
export interface CanvasOptions | ||
extends StaticCanvasOptions, | ||
CanvasTransformOptions, | ||
CanvasSelectionOptions, | ||
CanvasCursorOptions, | ||
TargetFindOptions, | ||
CanvasEventsOptions { | ||
/** | ||
* Default element class that's given to wrapper (div) element of canvas | ||
* @type String | ||
* @default | ||
* @deprecated customize {@link CanvasDOMManager} instead or access {@link elements} directly | ||
*/ | ||
containerClass: string; | ||
|
||
/** | ||
* Indicates whether objects should remain in current stack position when selected. | ||
* When false objects are brought to top and rendered as part of the selection group | ||
* @type Boolean | ||
* @default | ||
*/ | ||
preserveObjectStacking: boolean; | ||
} | ||
|
||
export const canvasDefaults: TOptions<CanvasOptions> = { | ||
uniformScaling: true, | ||
uniScaleKey: 'shiftKey', | ||
centeredScaling: false, | ||
centeredRotation: false, | ||
centeredKey: 'altKey', | ||
altActionKey: 'shiftKey', | ||
|
||
selection: true, | ||
selectionKey: 'shiftKey', | ||
selectionColor: 'rgba(100, 100, 255, 0.3)', | ||
selectionDashArray: [], | ||
selectionBorderColor: 'rgba(255, 255, 255, 0.3)', | ||
selectionLineWidth: 1, | ||
selectionFullyContained: false, | ||
|
||
hoverCursor: 'move', | ||
moveCursor: 'move', | ||
defaultCursor: 'default', | ||
freeDrawingCursor: 'crosshair', | ||
notAllowedCursor: 'not-allowed', | ||
|
||
perPixelTargetFind: false, | ||
targetFindTolerance: 0, | ||
skipTargetFind: false, | ||
|
||
stopContextMenu: false, | ||
fireRightClick: false, | ||
fireMiddleClick: false, | ||
enablePointerEvents: false, | ||
|
||
containerClass: 'canvas-container', | ||
|
||
preserveObjectStacking: false, | ||
}; |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.