From 796b12dc91bc25ad339bc28aa3ea49fa0589e374 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 11:38:50 +0530 Subject: [PATCH 01/22] chore(TS): mv `TProps` to typedefs --- src/filters/BaseFilter.ts | 2 +- src/shapes/Circle.ts | 8 ++------ src/shapes/Ellipse.ts | 8 ++------ src/shapes/Group.ts | 8 ++------ src/shapes/IText/IText.ts | 3 +-- src/shapes/IText/ITextBehavior.ts | 2 +- src/shapes/IText/ITextClickBehavior.ts | 2 +- src/shapes/IText/ITextKeyBehavior.ts | 2 +- src/shapes/Image.ts | 15 ++++++++------- src/shapes/Line.ts | 8 ++------ src/shapes/Object/Object.ts | 2 +- src/shapes/Object/types/index.ts | 3 +-- src/shapes/Path.ts | 8 ++------ src/shapes/Polyline.ts | 8 ++------ src/shapes/Rect.ts | 8 ++------ src/shapes/Text/StyledText.ts | 7 ++----- src/shapes/Text/Text.ts | 7 ++----- src/shapes/Textbox.ts | 3 +-- src/shapes/Triangle.ts | 7 ++----- src/typedefs.ts | 2 ++ 20 files changed, 38 insertions(+), 75 deletions(-) diff --git a/src/filters/BaseFilter.ts b/src/filters/BaseFilter.ts index 7f06174d28b..16c15eb9ed2 100644 --- a/src/filters/BaseFilter.ts +++ b/src/filters/BaseFilter.ts @@ -6,6 +6,7 @@ import type { TWebGLPipelineState, TWebGLProgramCacheItem, TWebGLUniformLocationMap, + Abortable, } from './typedefs'; import { isWebGLPipelineState } from './utils'; import { @@ -13,7 +14,6 @@ import { identityFragmentShader, vertexSource, } from './shaders/baseFilter'; -import type { Abortable } from '../typedefs'; export class BaseFilter { /** diff --git a/src/shapes/Circle.ts b/src/shapes/Circle.ts index 05059125896..fd5e93cefac 100644 --- a/src/shapes/Circle.ts +++ b/src/shapes/Circle.ts @@ -6,12 +6,8 @@ import { degreesToRadians } from '../util/misc/radiansDegreesConversion'; import { sin } from '../util/misc/sin'; import { classRegistry } from '../ClassRegistry'; import { FabricObject, cacheProperties } from './Object/FabricObject'; -import type { Abortable, TClassProperties } from '../typedefs'; -import type { - FabricObjectProps, - SerializedObjectProps, - TProps, -} from './Object/types'; +import type { Abortable, TClassProperties, TProps } from '../typedefs'; +import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; import type { CSSRules } from '../parser/typedefs'; interface UniqueCircleProps { diff --git a/src/shapes/Ellipse.ts b/src/shapes/Ellipse.ts index 866750a8dee..f8846684f58 100644 --- a/src/shapes/Ellipse.ts +++ b/src/shapes/Ellipse.ts @@ -1,14 +1,10 @@ import { twoMathPi } from '../constants'; import { SHARED_ATTRIBUTES } from '../parser/attributes'; import { parseAttributes } from '../parser/parseAttributes'; -import type { Abortable, TClassProperties } from '../typedefs'; +import type { Abortable, TClassProperties, TProps } from '../typedefs'; import { classRegistry } from '../ClassRegistry'; import { FabricObject, cacheProperties } from './Object/FabricObject'; -import type { - FabricObjectProps, - SerializedObjectProps, - TProps, -} from './Object/types'; +import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; import type { ObjectEvents } from '../EventTypeDefs'; import type { CSSRules } from '../parser/typedefs'; diff --git a/src/shapes/Group.ts b/src/shapes/Group.ts index d373e7e2f71..78ae14aff98 100644 --- a/src/shapes/Group.ts +++ b/src/shapes/Group.ts @@ -3,7 +3,7 @@ import { createCollectionMixin } from '../Collection'; import { resolveOrigin } from '../util/misc/resolveOrigin'; import { Point } from '../Point'; import { cos } from '../util/misc/cos'; -import type { TClassProperties, TSVGReviver } from '../typedefs'; +import type { TClassProperties, TSVGReviver, TProps } from '../typedefs'; import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints'; import { invertTransform, @@ -20,11 +20,7 @@ import { sin } from '../util/misc/sin'; import { FabricObject } from './Object/FabricObject'; import { Rect } from './Rect'; import { classRegistry } from '../ClassRegistry'; -import type { - FabricObjectProps, - SerializedObjectProps, - TProps, -} from './Object/types'; +import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; import { CENTER } from '../constants'; export type LayoutContextType = diff --git a/src/shapes/IText/IText.ts b/src/shapes/IText/IText.ts index cb52c6c9f7f..cb849e84912 100644 --- a/src/shapes/IText/IText.ts +++ b/src/shapes/IText/IText.ts @@ -7,7 +7,7 @@ import { keysMap, keysMapRtl, } from './constants'; -import type { TFiller } from '../../typedefs'; +import type { TFiller, TProps } from '../../typedefs'; import { classRegistry } from '../../ClassRegistry'; import type { SerializedTextProps, TextProps } from '../Text/Text'; import { @@ -17,7 +17,6 @@ import { JUSTIFY_RIGHT, } from '../Text/constants'; import { CENTER, LEFT, RIGHT } from '../../constants'; -import type { TProps } from '../Object/types'; type CursorBoundaries = { left: number; diff --git a/src/shapes/IText/ITextBehavior.ts b/src/shapes/IText/ITextBehavior.ts index ae685def422..84707c6b101 100644 --- a/src/shapes/IText/ITextBehavior.ts +++ b/src/shapes/IText/ITextBehavior.ts @@ -11,7 +11,7 @@ import type { TOnAnimationChangeCallback } from '../../util/animation/types'; import type { ValueAnimation } from '../../util/animation/ValueAnimation'; import type { TextStyleDeclaration } from '../Text/StyledText'; import type { SerializedTextProps, TextProps } from '../Text/Text'; -import type { TProps } from '../Object/types'; +import type { TProps } from '../../typedefs'; import { getDocumentFromElement } from '../../util/dom_misc'; import { LEFT, RIGHT, reNewline } from '../../constants'; diff --git a/src/shapes/IText/ITextClickBehavior.ts b/src/shapes/IText/ITextClickBehavior.ts index f0fbbbf4ac3..f15b7bae99f 100644 --- a/src/shapes/IText/ITextClickBehavior.ts +++ b/src/shapes/IText/ITextClickBehavior.ts @@ -7,7 +7,7 @@ import { invertTransform } from '../../util/misc/matrix'; import { DraggableTextDelegate } from './DraggableTextDelegate'; import type { ITextEvents } from './ITextBehavior'; import { ITextKeyBehavior } from './ITextKeyBehavior'; -import type { TProps } from '../Object/types'; +import type { TProps } from '../../typedefs'; import type { TextProps, SerializedTextProps } from '../Text/Text'; // TODO: this code seems wrong. diff --git a/src/shapes/IText/ITextKeyBehavior.ts b/src/shapes/IText/ITextKeyBehavior.ts index 6c55b9dbc9f..4bc0147fd2f 100644 --- a/src/shapes/IText/ITextKeyBehavior.ts +++ b/src/shapes/IText/ITextKeyBehavior.ts @@ -4,7 +4,7 @@ import { capValue } from '../../util/misc/capValue'; import type { ITextEvents } from './ITextBehavior'; import { ITextBehavior } from './ITextBehavior'; import type { TKeyMapIText } from './constants'; -import type { TProps } from '../Object/types'; +import type { TProps } from '../../typedefs'; import type { TextProps, SerializedTextProps } from '../Text/Text'; import { getDocumentFromElement } from '../../util/dom_misc'; import { LEFT, RIGHT } from '../../constants'; diff --git a/src/shapes/Image.ts b/src/shapes/Image.ts index c7cf92de8aa..c8f3ea42c79 100644 --- a/src/shapes/Image.ts +++ b/src/shapes/Image.ts @@ -3,8 +3,13 @@ import type { BaseFilter } from '../filters/BaseFilter'; import { getFilterBackend } from '../filters/FilterBackend'; import { SHARED_ATTRIBUTES } from '../parser/attributes'; import { parseAttributes } from '../parser/parseAttributes'; -import type { TClassProperties, TCrossOrigin, TSize } from '../typedefs'; -import type { Abortable } from '../typedefs'; +import type { + TClassProperties, + TCrossOrigin, + TSize, + Abortable, + TProps, +} from '../typedefs'; import { uid } from '../util/internals/uid'; import { createCanvasElement } from '../util/misc/dom'; import { findScaleToCover, findScaleToFit } from '../util/misc/findScaleTo'; @@ -17,11 +22,7 @@ import { import { parsePreserveAspectRatioAttribute } from '../util/misc/svgParsing'; import { classRegistry } from '../ClassRegistry'; import { FabricObject, cacheProperties } from './Object/FabricObject'; -import type { - FabricObjectProps, - SerializedObjectProps, - TProps, -} from './Object/types'; +import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; import type { ObjectEvents } from '../EventTypeDefs'; import { WebGLFilterBackend } from '../filters/WebGLFilterBackend'; import { NONE } from '../constants'; diff --git a/src/shapes/Line.ts b/src/shapes/Line.ts index 5b293d89a2c..6cdbbbfd558 100644 --- a/src/shapes/Line.ts +++ b/src/shapes/Line.ts @@ -1,15 +1,11 @@ import { SHARED_ATTRIBUTES } from '../parser/attributes'; import { parseAttributes } from '../parser/parseAttributes'; -import type { Abortable, TClassProperties } from '../typedefs'; +import type { Abortable, TClassProperties, TProps } from '../typedefs'; import { classRegistry } from '../ClassRegistry'; import { FabricObject, cacheProperties } from './Object/FabricObject'; import { Point } from '../Point'; import { isFiller } from '../util/typeAssertions'; -import type { - FabricObjectProps, - SerializedObjectProps, - TProps, -} from './Object/types'; +import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; import type { ObjectEvents } from '../EventTypeDefs'; import { makeBoundingBoxFromPoints } from '../util'; import { CENTER, LEFT, TOP } from '../constants'; diff --git a/src/shapes/Object/Object.ts b/src/shapes/Object/Object.ts index 3ca895cd0ae..6fcf8802aa5 100644 --- a/src/shapes/Object/Object.ts +++ b/src/shapes/Object/Object.ts @@ -18,6 +18,7 @@ import type { TSize, TCacheCanvasDimensions, Abortable, + TProps, } from '../../typedefs'; import { classRegistry } from '../../ClassRegistry'; import { runningAnimations } from '../../util/animation/AnimationRegistry'; @@ -51,7 +52,6 @@ import type { Pattern } from '../../Pattern'; import type { Canvas } from '../../canvas/Canvas'; import type { SerializedObjectProps } from './types/SerializedObjectProps'; import type { ObjectProps } from './types/ObjectProps'; -import type { TProps } from './types'; import { getEnv } from '../../env'; export type TCachedFabricObject = T & diff --git a/src/shapes/Object/types/index.ts b/src/shapes/Object/types/index.ts index bbf4a578ea3..1da1c43478a 100644 --- a/src/shapes/Object/types/index.ts +++ b/src/shapes/Object/types/index.ts @@ -1,8 +1,7 @@ import type { FabricObjectProps } from './FabricObjectProps'; +import { TProps } from '../../../typedefs'; export type { SerializedObjectProps } from './SerializedObjectProps'; export type { FabricObjectProps }; -export type TProps = Partial & Record; - export type TFabricObjectProps = TProps; diff --git a/src/shapes/Path.ts b/src/shapes/Path.ts index 963de6dcd57..07158c33e1c 100644 --- a/src/shapes/Path.ts +++ b/src/shapes/Path.ts @@ -18,13 +18,9 @@ import type { TPathSegmentInfo, TSimplePathData, } from '../util/path/typedefs'; -import type { - FabricObjectProps, - SerializedObjectProps, - TProps, -} from './Object/types'; +import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; import type { ObjectEvents } from '../EventTypeDefs'; -import type { TBBox, TClassProperties, TSVGReviver } from '../typedefs'; +import type { TBBox, TClassProperties, TSVGReviver, TProps } from '../typedefs'; import { cloneDeep } from '../util/internals/cloneDeep'; import { CENTER, LEFT, TOP } from '../constants'; import type { CSSRules } from '../parser/typedefs'; diff --git a/src/shapes/Polyline.ts b/src/shapes/Polyline.ts index 52f22cef45c..3e073aea623 100644 --- a/src/shapes/Polyline.ts +++ b/src/shapes/Polyline.ts @@ -4,7 +4,7 @@ import { parseAttributes } from '../parser/parseAttributes'; import { parsePointsAttribute } from '../parser/parsePointsAttribute'; import type { XY } from '../Point'; import { Point } from '../Point'; -import type { Abortable, TClassProperties } from '../typedefs'; +import type { Abortable, TClassProperties, TProps } from '../typedefs'; import { classRegistry } from '../ClassRegistry'; import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints'; import { calcDimensionsMatrix, transformPoint } from '../util/misc/matrix'; @@ -13,11 +13,7 @@ import type { TProjectStrokeOnPointsOptions } from '../util/misc/projectStroke/t import { degreesToRadians } from '../util/misc/radiansDegreesConversion'; import { toFixed } from '../util/misc/toFixed'; import { FabricObject, cacheProperties } from './Object/FabricObject'; -import type { - FabricObjectProps, - SerializedObjectProps, - TProps, -} from './Object/types'; +import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; import type { ObjectEvents } from '../EventTypeDefs'; import { cloneDeep } from '../util/internals/cloneDeep'; import { CENTER, LEFT, TOP } from '../constants'; diff --git a/src/shapes/Rect.ts b/src/shapes/Rect.ts index 1e7bce12714..0dcd0b4eaa1 100644 --- a/src/shapes/Rect.ts +++ b/src/shapes/Rect.ts @@ -1,14 +1,10 @@ import { kRect } from '../constants'; import { SHARED_ATTRIBUTES } from '../parser/attributes'; import { parseAttributes } from '../parser/parseAttributes'; -import type { Abortable, TClassProperties } from '../typedefs'; +import type { Abortable, TClassProperties, TProps } from '../typedefs'; import { classRegistry } from '../ClassRegistry'; import { FabricObject, cacheProperties } from './Object/FabricObject'; -import type { - FabricObjectProps, - SerializedObjectProps, - TProps, -} from './Object/types'; +import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; import type { ObjectEvents } from '../EventTypeDefs'; import type { CSSRules } from '../parser/typedefs'; diff --git a/src/shapes/Text/StyledText.ts b/src/shapes/Text/StyledText.ts index 1028dd4102f..c00560013c9 100644 --- a/src/shapes/Text/StyledText.ts +++ b/src/shapes/Text/StyledText.ts @@ -1,9 +1,6 @@ import type { ObjectEvents } from '../../EventTypeDefs'; -import type { - FabricObjectProps, - SerializedObjectProps, - TProps, -} from '../Object/types'; +import type { FabricObjectProps, SerializedObjectProps } from '../Object/types'; +import type { TProps } from '../../typedefs'; import { FabricObject } from '../Object/FabricObject'; import { styleProperties } from './constants'; import type { StylePropertiesType } from './constants'; diff --git a/src/shapes/Text/Text.ts b/src/shapes/Text/Text.ts index 7aa58d94d00..b5a1953e2dc 100644 --- a/src/shapes/Text/Text.ts +++ b/src/shapes/Text/Text.ts @@ -14,6 +14,7 @@ import type { TCacheCanvasDimensions, TClassProperties, TFiller, + TProps, } from '../../typedefs'; import { classRegistry } from '../../ClassRegistry'; import { graphemeSplit } from '../../util/lang_string'; @@ -29,11 +30,7 @@ import { cacheProperties } from '../Object/FabricObject'; import type { Path } from '../Path'; import { TextSVGExportMixin } from './TextSVGExportMixin'; import { applyMixins } from '../../util/applyMixins'; -import type { - FabricObjectProps, - SerializedObjectProps, - TProps, -} from '../Object/types'; +import type { FabricObjectProps, SerializedObjectProps } from '../Object/types'; import type { StylePropertiesType } from './constants'; import { additionalProps, diff --git a/src/shapes/Textbox.ts b/src/shapes/Textbox.ts index feecc3a6efe..e4d7360088a 100644 --- a/src/shapes/Textbox.ts +++ b/src/shapes/Textbox.ts @@ -1,10 +1,9 @@ -import type { TClassProperties } from '../typedefs'; +import type { TClassProperties, TProps } from '../typedefs'; import { IText } from './IText/IText'; import { classRegistry } from '../ClassRegistry'; import { createTextboxDefaultControls } from '../controls/commonControls'; import { JUSTIFY } from './Text/constants'; import type { TextStyleDeclaration } from './Text/StyledText'; -import type { TProps } from './Object/types'; import type { SerializedITextProps, ITextProps } from './IText/IText'; import type { ITextEvents } from './IText/ITextBehavior'; import type { TextLinesInfo } from './Text/Text'; diff --git a/src/shapes/Triangle.ts b/src/shapes/Triangle.ts index 0012cdc36d0..24fb9a442f2 100644 --- a/src/shapes/Triangle.ts +++ b/src/shapes/Triangle.ts @@ -1,10 +1,7 @@ import { classRegistry } from '../ClassRegistry'; import { FabricObject } from './Object/FabricObject'; -import type { - FabricObjectProps, - SerializedObjectProps, - TProps, -} from './Object/types'; +import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; +import type { TProps } from '../typedefs'; import type { ObjectEvents } from '../EventTypeDefs'; export const triangleDefaultValues = { diff --git a/src/typedefs.ts b/src/typedefs.ts index 26591645abd..b63b255ec38 100644 --- a/src/typedefs.ts +++ b/src/typedefs.ts @@ -122,3 +122,5 @@ export type Abortable = { */ signal?: AbortSignal; }; + +export type TProps = Partial & Record; From 778271b59737a83519996bf5849b71d155becc87 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 11:39:37 +0530 Subject: [PATCH 02/22] rename(): TProps => TOptions --- src/shapes/Circle.ts | 6 +++--- src/shapes/Ellipse.ts | 4 ++-- src/shapes/Group.ts | 4 ++-- src/shapes/IText/IText.ts | 4 ++-- src/shapes/IText/ITextBehavior.ts | 4 ++-- src/shapes/IText/ITextClickBehavior.ts | 4 ++-- src/shapes/IText/ITextKeyBehavior.ts | 4 ++-- src/shapes/Image.ts | 8 ++++---- src/shapes/Line.ts | 6 +++--- src/shapes/Object/Object.ts | 6 +++--- src/shapes/Object/types/index.ts | 4 ++-- src/shapes/Path.ts | 11 ++++++++--- src/shapes/Polyline.ts | 6 +++--- src/shapes/Rect.ts | 4 ++-- src/shapes/Text/StyledText.ts | 4 ++-- src/shapes/Text/Text.ts | 6 +++--- src/shapes/Textbox.ts | 4 ++-- src/shapes/Triangle.ts | 4 ++-- src/typedefs.ts | 2 +- 19 files changed, 50 insertions(+), 45 deletions(-) diff --git a/src/shapes/Circle.ts b/src/shapes/Circle.ts index fd5e93cefac..cb233364800 100644 --- a/src/shapes/Circle.ts +++ b/src/shapes/Circle.ts @@ -6,7 +6,7 @@ import { degreesToRadians } from '../util/misc/radiansDegreesConversion'; import { sin } from '../util/misc/sin'; import { classRegistry } from '../ClassRegistry'; import { FabricObject, cacheProperties } from './Object/FabricObject'; -import type { Abortable, TClassProperties, TProps } from '../typedefs'; +import type { Abortable, TClassProperties, TOptions } from '../typedefs'; import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; import type { CSSRules } from '../parser/typedefs'; @@ -50,7 +50,7 @@ export const circleDefaultValues: UniqueCircleProps = { }; export class Circle< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedCircleProps = SerializedCircleProps, EventSpec extends ObjectEvents = ObjectEvents > @@ -232,7 +232,7 @@ export class Circle< /** * @todo how do we declare this?? */ - static fromObject>(object: T) { + static fromObject>(object: T) { return super._fromObject(object); } } diff --git a/src/shapes/Ellipse.ts b/src/shapes/Ellipse.ts index f8846684f58..d76edbbe8b8 100644 --- a/src/shapes/Ellipse.ts +++ b/src/shapes/Ellipse.ts @@ -1,7 +1,7 @@ import { twoMathPi } from '../constants'; import { SHARED_ATTRIBUTES } from '../parser/attributes'; import { parseAttributes } from '../parser/parseAttributes'; -import type { Abortable, TClassProperties, TProps } from '../typedefs'; +import type { Abortable, TClassProperties, TOptions } from '../typedefs'; import { classRegistry } from '../ClassRegistry'; import { FabricObject, cacheProperties } from './Object/FabricObject'; import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; @@ -27,7 +27,7 @@ export interface EllipseProps extends FabricObjectProps, UniqueEllipseProps {} const ELLIPSE_PROPS = ['rx', 'ry'] as const; export class Ellipse< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedEllipseProps = SerializedEllipseProps, EventSpec extends ObjectEvents = ObjectEvents > diff --git a/src/shapes/Group.ts b/src/shapes/Group.ts index 78ae14aff98..2f00e5fa54c 100644 --- a/src/shapes/Group.ts +++ b/src/shapes/Group.ts @@ -3,7 +3,7 @@ import { createCollectionMixin } from '../Collection'; import { resolveOrigin } from '../util/misc/resolveOrigin'; import { Point } from '../Point'; import { cos } from '../util/misc/cos'; -import type { TClassProperties, TSVGReviver, TProps } from '../typedefs'; +import type { TClassProperties, TSVGReviver, TOptions } from '../typedefs'; import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints'; import { invertTransform, @@ -1088,7 +1088,7 @@ export class Group extends createCollectionMixin( * @param {Object} object Object to create a group from * @returns {Promise} */ - static fromObject>({ + static fromObject>({ objects = [], ...options }: T) { diff --git a/src/shapes/IText/IText.ts b/src/shapes/IText/IText.ts index cb849e84912..117c2d88344 100644 --- a/src/shapes/IText/IText.ts +++ b/src/shapes/IText/IText.ts @@ -7,7 +7,7 @@ import { keysMap, keysMapRtl, } from './constants'; -import type { TFiller, TProps } from '../../typedefs'; +import type { TFiller, TOptions } from '../../typedefs'; import { classRegistry } from '../../ClassRegistry'; import type { SerializedTextProps, TextProps } from '../Text/Text'; import { @@ -103,7 +103,7 @@ export interface ITextProps extends TextProps, UniqueITextProps {} * ``` */ export class IText< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedITextProps = SerializedITextProps, EventSpec extends ITextEvents = ITextEvents > diff --git a/src/shapes/IText/ITextBehavior.ts b/src/shapes/IText/ITextBehavior.ts index 84707c6b101..64e1d0c8665 100644 --- a/src/shapes/IText/ITextBehavior.ts +++ b/src/shapes/IText/ITextBehavior.ts @@ -11,7 +11,7 @@ import type { TOnAnimationChangeCallback } from '../../util/animation/types'; import type { ValueAnimation } from '../../util/animation/ValueAnimation'; import type { TextStyleDeclaration } from '../Text/StyledText'; import type { SerializedTextProps, TextProps } from '../Text/Text'; -import type { TProps } from '../../typedefs'; +import type { TOptions } from '../../typedefs'; import { getDocumentFromElement } from '../../util/dom_misc'; import { LEFT, RIGHT, reNewline } from '../../constants'; @@ -39,7 +39,7 @@ export type ITextEvents = ObjectEvents & { }; export abstract class ITextBehavior< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedTextProps = SerializedTextProps, EventSpec extends ITextEvents = ITextEvents > extends Text { diff --git a/src/shapes/IText/ITextClickBehavior.ts b/src/shapes/IText/ITextClickBehavior.ts index f15b7bae99f..63936986abd 100644 --- a/src/shapes/IText/ITextClickBehavior.ts +++ b/src/shapes/IText/ITextClickBehavior.ts @@ -7,7 +7,7 @@ import { invertTransform } from '../../util/misc/matrix'; import { DraggableTextDelegate } from './DraggableTextDelegate'; import type { ITextEvents } from './ITextBehavior'; import { ITextKeyBehavior } from './ITextKeyBehavior'; -import type { TProps } from '../../typedefs'; +import type { TOptions } from '../../typedefs'; import type { TextProps, SerializedTextProps } from '../Text/Text'; // TODO: this code seems wrong. @@ -18,7 +18,7 @@ function notALeftClick(e: MouseEvent) { } export abstract class ITextClickBehavior< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedTextProps = SerializedTextProps, EventSpec extends ITextEvents = ITextEvents > diff --git a/src/shapes/IText/ITextKeyBehavior.ts b/src/shapes/IText/ITextKeyBehavior.ts index 4bc0147fd2f..1549c0650c7 100644 --- a/src/shapes/IText/ITextKeyBehavior.ts +++ b/src/shapes/IText/ITextKeyBehavior.ts @@ -4,7 +4,7 @@ import { capValue } from '../../util/misc/capValue'; import type { ITextEvents } from './ITextBehavior'; import { ITextBehavior } from './ITextBehavior'; import type { TKeyMapIText } from './constants'; -import type { TProps } from '../../typedefs'; +import type { TOptions } from '../../typedefs'; import type { TextProps, SerializedTextProps } from '../Text/Text'; import { getDocumentFromElement } from '../../util/dom_misc'; import { LEFT, RIGHT } from '../../constants'; @@ -12,7 +12,7 @@ import type { IText } from './IText'; import type { TextStyleDeclaration } from '../Text/StyledText'; export abstract class ITextKeyBehavior< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedTextProps = SerializedTextProps, EventSpec extends ITextEvents = ITextEvents > extends ITextBehavior { diff --git a/src/shapes/Image.ts b/src/shapes/Image.ts index c8f3ea42c79..9457b016456 100644 --- a/src/shapes/Image.ts +++ b/src/shapes/Image.ts @@ -8,7 +8,7 @@ import type { TCrossOrigin, TSize, Abortable, - TProps, + TOptions, } from '../typedefs'; import { uid } from '../util/internals/uid'; import { createCanvasElement } from '../util/misc/dom'; @@ -75,7 +75,7 @@ const IMAGE_PROPS = ['cropX', 'cropY'] as const; * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images} */ export class Image< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedImageProps = SerializedImageProps, EventSpec extends ObjectEvents = ObjectEvents > @@ -788,7 +788,7 @@ export class Image< * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal * @returns {Promise} */ - static fromObject>( + static fromObject>( { filters: f, resizeFilter: rf, src, crossOrigin, ...object }: T, options: Abortable = {} ) { @@ -817,7 +817,7 @@ export class Image< * @param {LoadImageOptions} [options] Options object * @returns {Promise} */ - static fromURL>( + static fromURL>( url: string, { crossOrigin = null, signal }: LoadImageOptions = {}, imageOptions: T diff --git a/src/shapes/Line.ts b/src/shapes/Line.ts index 6cdbbbfd558..953a3af8340 100644 --- a/src/shapes/Line.ts +++ b/src/shapes/Line.ts @@ -1,6 +1,6 @@ import { SHARED_ATTRIBUTES } from '../parser/attributes'; import { parseAttributes } from '../parser/parseAttributes'; -import type { Abortable, TClassProperties, TProps } from '../typedefs'; +import type { Abortable, TClassProperties, TOptions } from '../typedefs'; import { classRegistry } from '../ClassRegistry'; import { FabricObject, cacheProperties } from './Object/FabricObject'; import { Point } from '../Point'; @@ -27,7 +27,7 @@ export interface SerializedLineProps UniqueLineProps {} export class Line< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedLineProps = SerializedLineProps, EventSpec extends ObjectEvents = ObjectEvents > @@ -263,7 +263,7 @@ export class Line< * @param {Object} object Object to create an instance from * @returns {Promise} */ - static fromObject>({ + static fromObject>({ x1, y1, x2, diff --git a/src/shapes/Object/Object.ts b/src/shapes/Object/Object.ts index 6fcf8802aa5..3a531f3af94 100644 --- a/src/shapes/Object/Object.ts +++ b/src/shapes/Object/Object.ts @@ -18,7 +18,7 @@ import type { TSize, TCacheCanvasDimensions, Abortable, - TProps, + TOptions, } from '../../typedefs'; import { classRegistry } from '../../ClassRegistry'; import { runningAnimations } from '../../util/animation/AnimationRegistry'; @@ -98,7 +98,7 @@ export type TCachedFabricObject = T & * @fires drop */ export class FabricObject< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedObjectProps = SerializedObjectProps, EventSpec extends ObjectEvents = ObjectEvents > @@ -1577,7 +1577,7 @@ export class FabricObject< * @param {AbortSignal} [options.signal] handle aborting, see https://developer.mozilla.org/en-US/docs/Web/API/AbortController/signal * @returns {Promise} */ - static fromObject>( + static fromObject>( object: T, options?: Abortable ) { diff --git a/src/shapes/Object/types/index.ts b/src/shapes/Object/types/index.ts index 1da1c43478a..d8c0e746df2 100644 --- a/src/shapes/Object/types/index.ts +++ b/src/shapes/Object/types/index.ts @@ -1,7 +1,7 @@ import type { FabricObjectProps } from './FabricObjectProps'; -import { TProps } from '../../../typedefs'; +import { TOptions } from '../../../typedefs'; export type { SerializedObjectProps } from './SerializedObjectProps'; export type { FabricObjectProps }; -export type TFabricObjectProps = TProps; +export type TFabricObjectProps = TOptions; diff --git a/src/shapes/Path.ts b/src/shapes/Path.ts index 07158c33e1c..c9789a15a94 100644 --- a/src/shapes/Path.ts +++ b/src/shapes/Path.ts @@ -20,7 +20,12 @@ import type { } from '../util/path/typedefs'; import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; import type { ObjectEvents } from '../EventTypeDefs'; -import type { TBBox, TClassProperties, TSVGReviver, TProps } from '../typedefs'; +import type { + TBBox, + TClassProperties, + TSVGReviver, + TOptions, +} from '../typedefs'; import { cloneDeep } from '../util/internals/cloneDeep'; import { CENTER, LEFT, TOP } from '../constants'; import type { CSSRules } from '../parser/typedefs'; @@ -43,7 +48,7 @@ export interface IPathBBox extends TBBox { } export class Path< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedPathProps = SerializedPathProps, EventSpec extends ObjectEvents = ObjectEvents > extends FabricObject { @@ -397,7 +402,7 @@ export class Path< * @param {Object} object * @returns {Promise} */ - static fromObject>(object: T) { + static fromObject>(object: T) { return this._fromObject(object, { extraParam: 'path', }); diff --git a/src/shapes/Polyline.ts b/src/shapes/Polyline.ts index 3e073aea623..7efeed755a3 100644 --- a/src/shapes/Polyline.ts +++ b/src/shapes/Polyline.ts @@ -4,7 +4,7 @@ import { parseAttributes } from '../parser/parseAttributes'; import { parsePointsAttribute } from '../parser/parsePointsAttribute'; import type { XY } from '../Point'; import { Point } from '../Point'; -import type { Abortable, TClassProperties, TProps } from '../typedefs'; +import type { Abortable, TClassProperties, TOptions } from '../typedefs'; import { classRegistry } from '../ClassRegistry'; import { makeBoundingBoxFromPoints } from '../util/misc/boundingBoxFromPoints'; import { calcDimensionsMatrix, transformPoint } from '../util/misc/matrix'; @@ -28,7 +28,7 @@ export interface SerializedPolylineProps extends SerializedObjectProps { } export class Polyline< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedPolylineProps = SerializedPolylineProps, EventSpec extends ObjectEvents = ObjectEvents > extends FabricObject { @@ -400,7 +400,7 @@ export class Polyline< * @param {Object} object Object to create an instance from * @returns {Promise} */ - static fromObject>(object: T) { + static fromObject>(object: T) { return this._fromObject(object, { extraParam: 'points', }); diff --git a/src/shapes/Rect.ts b/src/shapes/Rect.ts index 0dcd0b4eaa1..711f69cde3a 100644 --- a/src/shapes/Rect.ts +++ b/src/shapes/Rect.ts @@ -1,7 +1,7 @@ import { kRect } from '../constants'; import { SHARED_ATTRIBUTES } from '../parser/attributes'; import { parseAttributes } from '../parser/parseAttributes'; -import type { Abortable, TClassProperties, TProps } from '../typedefs'; +import type { Abortable, TClassProperties, TOptions } from '../typedefs'; import { classRegistry } from '../ClassRegistry'; import { FabricObject, cacheProperties } from './Object/FabricObject'; import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; @@ -27,7 +27,7 @@ export interface RectProps extends FabricObjectProps, UniqueRectProps {} const RECT_PROPS = ['rx', 'ry'] as const; export class Rect< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedRectProps = SerializedRectProps, EventSpec extends ObjectEvents = ObjectEvents > diff --git a/src/shapes/Text/StyledText.ts b/src/shapes/Text/StyledText.ts index c00560013c9..5a73472a801 100644 --- a/src/shapes/Text/StyledText.ts +++ b/src/shapes/Text/StyledText.ts @@ -1,6 +1,6 @@ import type { ObjectEvents } from '../../EventTypeDefs'; import type { FabricObjectProps, SerializedObjectProps } from '../Object/types'; -import type { TProps } from '../../typedefs'; +import type { TOptions } from '../../typedefs'; import { FabricObject } from '../Object/FabricObject'; import { styleProperties } from './constants'; import type { StylePropertiesType } from './constants'; @@ -16,7 +16,7 @@ export type TextStyle = { }; export abstract class StyledText< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedObjectProps = SerializedObjectProps, EventSpec extends ObjectEvents = ObjectEvents > extends FabricObject { diff --git a/src/shapes/Text/Text.ts b/src/shapes/Text/Text.ts index b5a1953e2dc..33f1be7aa16 100644 --- a/src/shapes/Text/Text.ts +++ b/src/shapes/Text/Text.ts @@ -14,7 +14,7 @@ import type { TCacheCanvasDimensions, TClassProperties, TFiller, - TProps, + TOptions, } from '../../typedefs'; import { classRegistry } from '../../ClassRegistry'; import { graphemeSplit } from '../../util/lang_string'; @@ -120,7 +120,7 @@ export interface TextProps extends FabricObjectProps, UniqueTextProps { * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#text} */ export class Text< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedTextProps = SerializedTextProps, EventSpec extends ObjectEvents = ObjectEvents > @@ -1895,7 +1895,7 @@ export class Text< * @param {Object} object plain js Object to create an instance from * @returns {Promise} */ - static fromObject, S extends Text>( + static fromObject, S extends Text>( object: T ) { return this._fromObject( diff --git a/src/shapes/Textbox.ts b/src/shapes/Textbox.ts index e4d7360088a..6ad7a168b20 100644 --- a/src/shapes/Textbox.ts +++ b/src/shapes/Textbox.ts @@ -1,4 +1,4 @@ -import type { TClassProperties, TProps } from '../typedefs'; +import type { TClassProperties, TOptions } from '../typedefs'; import { IText } from './IText/IText'; import { classRegistry } from '../ClassRegistry'; import { createTextboxDefaultControls } from '../controls/commonControls'; @@ -51,7 +51,7 @@ export interface TextboxProps extends ITextProps, UniqueTextboxProps {} * wrapping of lines. */ export class Textbox< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedTextboxProps = SerializedTextboxProps, EventSpec extends ITextEvents = ITextEvents > diff --git a/src/shapes/Triangle.ts b/src/shapes/Triangle.ts index 24fb9a442f2..f9c3b8e529a 100644 --- a/src/shapes/Triangle.ts +++ b/src/shapes/Triangle.ts @@ -1,7 +1,7 @@ import { classRegistry } from '../ClassRegistry'; import { FabricObject } from './Object/FabricObject'; import type { FabricObjectProps, SerializedObjectProps } from './Object/types'; -import type { TProps } from '../typedefs'; +import type { TOptions } from '../typedefs'; import type { ObjectEvents } from '../EventTypeDefs'; export const triangleDefaultValues = { @@ -10,7 +10,7 @@ export const triangleDefaultValues = { }; export class Triangle< - Props extends TProps = Partial, + Props extends TOptions = Partial, SProps extends SerializedObjectProps = SerializedObjectProps, EventSpec extends ObjectEvents = ObjectEvents > diff --git a/src/typedefs.ts b/src/typedefs.ts index b63b255ec38..002558a94c7 100644 --- a/src/typedefs.ts +++ b/src/typedefs.ts @@ -123,4 +123,4 @@ export type Abortable = { signal?: AbortSignal; }; -export type TProps = Partial & Record; +export type TOptions = Partial & Record; From ad643c975860b9dbf944189bec4d337bcf348e9e Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Thu, 3 Aug 2023 06:12:33 +0000 Subject: [PATCH 03/22] update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 079f6256937..974be7166b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## [next] +- chore(TS): mv + rename `TProps` => `TOptions` [#9139](https://github.com/fabricjs/fabric.js/pull/9139) - test(playwright): Use embedded eval from playwright [#9133](https://github.com/fabricjs/fabric.js/pull/9133) - chore(TS): Fix event types and .once this binding [#9119](https://github.com/fabricjs/fabric.js/pull/9130) - docs(): rm `canvas2pdf` [#9135](https://github.com/fabricjs/fabric.js/pull/9135) From 81672c23f8e37fd6a3114ca29b24ed1960372233 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 11:48:36 +0530 Subject: [PATCH 04/22] Update fabric.ts --- fabric.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/fabric.ts b/fabric.ts index de15e7bb33e..e92328b59d5 100644 --- a/fabric.ts +++ b/fabric.ts @@ -41,7 +41,6 @@ export { PatternBrush } from './src/brushes/PatternBrush'; export { FabricObject as Object } from './src/shapes/Object/FabricObject'; export type { - TProps, TFabricObjectProps, FabricObjectProps, SerializedObjectProps, From 336bc3348cd4925d59c6a86f26e4d73fa8e6fe03 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 12:08:23 +0530 Subject: [PATCH 05/22] revert --- src/filters/BaseFilter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/filters/BaseFilter.ts b/src/filters/BaseFilter.ts index 16c15eb9ed2..7f06174d28b 100644 --- a/src/filters/BaseFilter.ts +++ b/src/filters/BaseFilter.ts @@ -6,7 +6,6 @@ import type { TWebGLPipelineState, TWebGLProgramCacheItem, TWebGLUniformLocationMap, - Abortable, } from './typedefs'; import { isWebGLPipelineState } from './utils'; import { @@ -14,6 +13,7 @@ import { identityFragmentShader, vertexSource, } from './shaders/baseFilter'; +import type { Abortable } from '../typedefs'; export class BaseFilter { /** From 250a6cfa5aec91af35677a47568fc42d97742e47 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 12:13:09 +0530 Subject: [PATCH 06/22] Update index.ts --- src/shapes/Object/types/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shapes/Object/types/index.ts b/src/shapes/Object/types/index.ts index d8c0e746df2..d4085ac60ef 100644 --- a/src/shapes/Object/types/index.ts +++ b/src/shapes/Object/types/index.ts @@ -1,5 +1,5 @@ import type { FabricObjectProps } from './FabricObjectProps'; -import { TOptions } from '../../../typedefs'; +import type { TOptions } from '../../../typedefs'; export type { SerializedObjectProps } from './SerializedObjectProps'; export type { FabricObjectProps }; From 98a4560ef2fbf1b9127f8b703146d728828daa47 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 12:13:54 +0530 Subject: [PATCH 07/22] init --- fabric.ts | 2 + src/canvas/Canvas.ts | 7 +++- src/canvas/CanvasOptions.ts | 64 +++++++++++++++++++++++++++++++ src/canvas/SelectableCanvas.ts | 56 +++++++++------------------ src/canvas/StaticCanvas.ts | 50 ++++++++++-------------- src/canvas/staticCanvasOptions.ts | 39 +++++++++++++++++++ 6 files changed, 150 insertions(+), 68 deletions(-) create mode 100644 src/canvas/CanvasOptions.ts create mode 100644 src/canvas/staticCanvasOptions.ts diff --git a/fabric.ts b/fabric.ts index e92328b59d5..3285a2e4f91 100644 --- a/fabric.ts +++ b/fabric.ts @@ -14,8 +14,10 @@ export type { TCanvasSizeOptions, TSVGExportOptions, } from './src/canvas/StaticCanvas'; +export type { StaticCanvasOptions } from './src/canvas/staticCanvasOptions'; export { StaticCanvas } from './src/canvas/StaticCanvas'; export { Canvas } from './src/canvas/Canvas'; +export type { CanvasOptions } from './src/canvas/CanvasOptions'; export { CanvasDOMManager } from './src/canvas/DOMManagers/CanvasDOMManager'; export { StaticCanvasDOMManager } from './src/canvas/DOMManagers/StaticCanvasDOMManager'; diff --git a/src/canvas/Canvas.ts b/src/canvas/Canvas.ts index 72511cd2ec4..b2923d4e9ae 100644 --- a/src/canvas/Canvas.ts +++ b/src/canvas/Canvas.ts @@ -12,6 +12,7 @@ import { Point } from '../Point'; import type { Group } from '../shapes/Group'; import type { IText } from '../shapes/IText/IText'; import type { FabricObject } from '../shapes/Object/FabricObject'; +import type { TOptions } from '../typedefs'; import { isTouchEvent, stopEvent } from '../util/dom_event'; import { getDocumentFromElement, getWindowFromElement } from '../util/dom_misc'; import { sendPointToPlane } from '../util/misc/planeChange'; @@ -19,6 +20,7 @@ import { isFabricObjectWithDragSupport, isInteractiveTextObject, } from '../util/typeAssertions'; +import type { CanvasOptions } from './CanvasOptions'; import { SelectableCanvas } from './SelectableCanvas'; import { TextEditingManager } from './TextEditingManager'; @@ -117,7 +119,10 @@ export class Canvas extends SelectableCanvas { textEditingManager = new TextEditingManager(this); - constructor(el: string | HTMLCanvasElement, options = {}) { + constructor( + el: string | HTMLCanvasElement, + options: TOptions = {} + ) { super(el, options); // bind event handlers ( diff --git a/src/canvas/CanvasOptions.ts b/src/canvas/CanvasOptions.ts new file mode 100644 index 00000000000..2db06936001 --- /dev/null +++ b/src/canvas/CanvasOptions.ts @@ -0,0 +1,64 @@ +import type { ModifierKey, TOptionalModifierKey } from '../EventTypeDefs'; +import type { TColorArg } from '../color/typedefs'; +import type { TOptions } from '../typedefs'; +import type { StaticCanvasOptions } from './staticCanvasOptions'; + +export interface CanvasOptions extends StaticCanvasOptions { + uniformScaling: boolean; + uniScaleKey: TOptionalModifierKey; + centeredScaling: boolean; + centeredRotation: boolean; + centeredKey: TOptionalModifierKey; + altActionKey: TOptionalModifierKey; + selection: boolean; + selectionKey: TOptionalModifierKey | ModifierKey[]; + selectionColor: TColorArg; + selectionDashArray: number[]; + selectionBorderColor: TColorArg; + selectionLineWidth: number; + selectionFullyContained: boolean; + hoverCursor: CSSStyleDeclaration['cursor']; + moveCursor: CSSStyleDeclaration['cursor']; + defaultCursor: CSSStyleDeclaration['cursor']; + freeDrawingCursor: CSSStyleDeclaration['cursor']; + notAllowedCursor: CSSStyleDeclaration['cursor']; + containerClass: string; + perPixelTargetFind: boolean; + targetFindTolerance: number; + skipTargetFind: boolean; + preserveObjectStacking: boolean; + stopContextMenu: boolean; + fireRightClick: boolean; + fireMiddleClick: boolean; + enablePointerEvents: boolean; +} + +export const canvasDefaults: TOptions = { + 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', + containerClass: 'canvas-container', + perPixelTargetFind: false, + targetFindTolerance: 0, + skipTargetFind: false, + preserveObjectStacking: false, + stopContextMenu: false, + fireRightClick: false, + fireMiddleClick: false, + enablePointerEvents: false, +}; diff --git a/src/canvas/SelectableCanvas.ts b/src/canvas/SelectableCanvas.ts index 8f8fc5c6919..aa5b74e6ab1 100644 --- a/src/canvas/SelectableCanvas.ts +++ b/src/canvas/SelectableCanvas.ts @@ -19,48 +19,26 @@ import { StaticCanvas } from './StaticCanvas'; import { isCollection } from '../util/typeAssertions'; import { invertTransform, transformPoint } from '../util/misc/matrix'; import { isTransparent } from '../util/misc/isTransparent'; -import type { TMat2D, TOriginX, TOriginY, TSize } from '../typedefs'; +import type { + TMat2D, + TOriginX, + TOriginY, + TSize, + TSVGReviver, + TOptions, +} from '../typedefs'; import { degreesToRadians } from '../util/misc/radiansDegreesConversion'; import { getPointer, isTouchEvent } from '../util/dom_event'; import type { IText } from '../shapes/IText/IText'; import type { BaseBrush } from '../brushes/BaseBrush'; import { pick } from '../util/misc/pick'; -import type { TSVGReviver } from '../typedefs'; import { sendPointToPlane } from '../util/misc/planeChange'; import { ActiveSelection } from '../shapes/ActiveSelection'; import { createCanvasElement } from '../util'; import { CanvasDOMManager } from './DOMManagers/CanvasDOMManager'; import { BOTTOM, CENTER, LEFT, RIGHT, TOP } from '../constants'; - -export const DefaultCanvasProperties = { - uniformScaling: true, - uniScaleKey: 'shiftKey', - centeredScaling: false, - centeredRotation: false, - centeredKey: 'altKey', - altActionKey: 'shiftKey', - selection: true, - selectionKey: 'shiftKey', - selectionColor: 'rgba(100, 100, 255, 0.3)', // blue - selectionDashArray: [], - selectionBorderColor: 'rgba(255, 255, 255, 0.3)', - selectionLineWidth: 1, - selectionFullyContained: false, - hoverCursor: 'move', - moveCursor: 'move', - defaultCursor: 'default', - freeDrawingCursor: 'crosshair', - notAllowedCursor: 'not-allowed', - containerClass: 'canvas-container', - perPixelTargetFind: false, - targetFindTolerance: 0, - skipTargetFind: false, - preserveObjectStacking: false, - stopContextMenu: false, - fireRightClick: false, - fireMiddleClick: false, - enablePointerEvents: false, -}; +import type { CanvasOptions } from './CanvasOptions'; +import { canvasDefaults } from './CanvasOptions'; /** * Canvas class @@ -156,9 +134,10 @@ export const DefaultCanvasProperties = { * }); * */ -export class SelectableCanvas< - EventSpec extends CanvasEvents = CanvasEvents -> extends StaticCanvas { +export class SelectableCanvas + extends StaticCanvas + implements CanvasOptions +{ declare _objects: FabricObject[]; /** * When true, objects can be transformed by one side (unproportionally) @@ -492,7 +471,7 @@ export class SelectableCanvas< */ protected declare _target?: FabricObject; - static ownDefaults: Record = DefaultCanvasProperties; + static ownDefaults: Record = canvasDefaults; static getDefaults(): Record { return { ...super.getDefaults(), ...SelectableCanvas.ownDefaults }; @@ -516,7 +495,10 @@ export class SelectableCanvas< declare _activeObject?: FabricObject; protected readonly _activeSelection: ActiveSelection; - constructor(el: string | HTMLCanvasElement, options = {}) { + constructor( + el: string | HTMLCanvasElement, + options: TOptions = {} + ) { super(el, options); this._activeSelection = new ActiveSelection([], { canvas: this }); } diff --git a/src/canvas/StaticCanvas.ts b/src/canvas/StaticCanvas.ts index de18ed2fa1e..c8ed850822a 100644 --- a/src/canvas/StaticCanvas.ts +++ b/src/canvas/StaticCanvas.ts @@ -1,5 +1,5 @@ import { config } from '../config'; -import { CENTER, iMatrix, VERSION } from '../constants'; +import { CENTER, VERSION } from '../constants'; import type { CanvasEvents, StaticCanvasEvents } from '../EventTypeDefs'; import type { Gradient } from '../gradient/Gradient'; import { createCollectionMixin } from '../Collection'; @@ -18,6 +18,7 @@ import type { TSVGReviver, TToCanvasElementOptions, TValidToObjectMethod, + TOptions, } from '../typedefs'; import { cancelAnimFrame, @@ -43,6 +44,8 @@ import { import { StaticCanvasDOMManager } from './DOMManagers/StaticCanvasDOMManager'; import type { CSSDimensions } from './DOMManagers/util'; import type { FabricObject } from '../shapes/Object/FabricObject'; +import type { StaticCanvasOptions } from './staticCanvasOptions'; +import { staticCanvasDefaults } from './staticCanvasOptions'; export type TCanvasSizeOptions = { backstoreOnly?: boolean; @@ -63,25 +66,6 @@ export type TSVGExportOptions = { reviver?: TSVGReviver; }; -export const StaticCanvasDefaults = { - backgroundColor: '', - backgroundImage: null, - overlayColor: '', - overlayImage: null, - includeDefaultValues: true, - renderOnAddRemove: true, - controlsAboveOverlay: false, - allowTouchScrolling: false, - imageSmoothingEnabled: true, - viewportTransform: iMatrix.concat(), - backgroundVpt: true, - overlayVpt: true, - enableRetinaScaling: true, - svgViewportTransformation: true, - skipOffscreen: true, - clipPath: undefined, -}; - /** * Static canvas class * @see {@link http://fabricjs.com/static_canvas|StaticCanvas demo} @@ -93,8 +77,11 @@ export const StaticCanvasDefaults = { */ // TODO: fix `EventSpec` inheritance https://github.com/microsoft/TypeScript/issues/26154#issuecomment-1366616260 export class StaticCanvas< - EventSpec extends StaticCanvasEvents = StaticCanvasEvents -> extends createCollectionMixin(CommonMethods) { + EventSpec extends StaticCanvasEvents = StaticCanvasEvents + > + extends createCollectionMixin(CommonMethods) + implements StaticCanvasOptions +{ /** * Background color of canvas instance. * @type {(String|TFiller)} @@ -110,7 +97,7 @@ export class StaticCanvas< * @type FabricObject * @default */ - declare backgroundImage: FabricObject | null; + declare backgroundImage?: FabricObject; /** * Overlay color of canvas instance. @@ -128,7 +115,7 @@ export class StaticCanvas< * @type FabricObject * @default */ - declare overlayImage: FabricObject | null; + declare overlayImage?: FabricObject; /** * Indicates whether toObject/toDatalessObject should include default values @@ -284,7 +271,7 @@ export class StaticCanvas< declare elements: StaticCanvasDOMManager; - static ownDefaults: Record = StaticCanvasDefaults; + static ownDefaults = staticCanvasDefaults; // reference to protected declare __cleanupTask?: { @@ -296,7 +283,10 @@ export class StaticCanvas< return StaticCanvas.ownDefaults; } - constructor(el: string | HTMLCanvasElement, options = {}) { + constructor( + el: string | HTMLCanvasElement, + options: TOptions = {} + ) { super(); Object.assign( this, @@ -585,8 +575,8 @@ export class StaticCanvas< */ clear() { this.remove(...this.getObjects()); - this.backgroundImage = null; - this.overlayImage = null; + this.backgroundImage = undefined; + this.overlayImage = undefined; this.backgroundColor = ''; this.overlayColor = ''; this.clearContext(this.getContext()); @@ -1615,11 +1605,11 @@ export class StaticCanvas< if (this.backgroundImage) { this.backgroundImage.dispose(); } - this.backgroundImage = null; + this.backgroundImage = undefined; if (this.overlayImage) { this.overlayImage.dispose(); } - this.overlayImage = null; + this.overlayImage = undefined; this.elements.dispose(); } diff --git a/src/canvas/staticCanvasOptions.ts b/src/canvas/staticCanvasOptions.ts new file mode 100644 index 00000000000..7f7e398e4a0 --- /dev/null +++ b/src/canvas/staticCanvasOptions.ts @@ -0,0 +1,39 @@ +import { iMatrix } from '../constants'; +import type { FabricObject } from '../shapes/Object/FabricObject'; +import type { TFiller, TMat2D, TOptions } from '../typedefs'; + +export interface StaticCanvasOptions { + backgroundVpt: boolean; + backgroundColor: TFiller | string; + backgroundImage?: FabricObject; + overlayVpt: boolean; + overlayColor: TFiller | string; + overlayImage?: FabricObject; + includeDefaultValues: boolean; + renderOnAddRemove: boolean; + controlsAboveOverlay: boolean; + allowTouchScrolling: boolean; + imageSmoothingEnabled: boolean; + viewportTransform: TMat2D; + enableRetinaScaling: boolean; + svgViewportTransformation: boolean; + skipOffscreen: boolean; + clipPath?: FabricObject; +} + +export const staticCanvasDefaults: TOptions = { + backgroundVpt: true, + backgroundColor: '', + overlayVpt: true, + overlayColor: '', + includeDefaultValues: true, + renderOnAddRemove: true, + controlsAboveOverlay: false, + allowTouchScrolling: false, + imageSmoothingEnabled: true, + viewportTransform: [...iMatrix], + enableRetinaScaling: true, + svgViewportTransformation: true, + skipOffscreen: true, + clipPath: undefined, +}; From 06d6c1e1d580814c9e2e32d86ed7fe8d0a2f1155 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 12:16:50 +0530 Subject: [PATCH 08/22] ugly little hack --- src/canvas/Canvas.ts | 2 +- src/canvas/SelectableCanvas.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/canvas/Canvas.ts b/src/canvas/Canvas.ts index b2923d4e9ae..d18ceeee0c2 100644 --- a/src/canvas/Canvas.ts +++ b/src/canvas/Canvas.ts @@ -66,7 +66,7 @@ type TSyntheticEventContext = { drag: DragEventData; }; -export class Canvas extends SelectableCanvas { +export class Canvas extends SelectableCanvas implements CanvasOptions { /** * Contains the id of the touch event that owns the fabric transform * @type Number diff --git a/src/canvas/SelectableCanvas.ts b/src/canvas/SelectableCanvas.ts index aa5b74e6ab1..952fbf5b576 100644 --- a/src/canvas/SelectableCanvas.ts +++ b/src/canvas/SelectableCanvas.ts @@ -136,7 +136,7 @@ import { canvasDefaults } from './CanvasOptions'; */ export class SelectableCanvas extends StaticCanvas - implements CanvasOptions + implements Omit { declare _objects: FabricObject[]; /** From b3c0f0a9d2c7f390d76700158356af5059fc9257 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 12:20:32 +0530 Subject: [PATCH 09/22] Delete staticCanvasOptions.ts --- src/canvas/staticCanvasOptions.ts | 39 ------------------------------- 1 file changed, 39 deletions(-) delete mode 100644 src/canvas/staticCanvasOptions.ts diff --git a/src/canvas/staticCanvasOptions.ts b/src/canvas/staticCanvasOptions.ts deleted file mode 100644 index 7f7e398e4a0..00000000000 --- a/src/canvas/staticCanvasOptions.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { iMatrix } from '../constants'; -import type { FabricObject } from '../shapes/Object/FabricObject'; -import type { TFiller, TMat2D, TOptions } from '../typedefs'; - -export interface StaticCanvasOptions { - backgroundVpt: boolean; - backgroundColor: TFiller | string; - backgroundImage?: FabricObject; - overlayVpt: boolean; - overlayColor: TFiller | string; - overlayImage?: FabricObject; - includeDefaultValues: boolean; - renderOnAddRemove: boolean; - controlsAboveOverlay: boolean; - allowTouchScrolling: boolean; - imageSmoothingEnabled: boolean; - viewportTransform: TMat2D; - enableRetinaScaling: boolean; - svgViewportTransformation: boolean; - skipOffscreen: boolean; - clipPath?: FabricObject; -} - -export const staticCanvasDefaults: TOptions = { - backgroundVpt: true, - backgroundColor: '', - overlayVpt: true, - overlayColor: '', - includeDefaultValues: true, - renderOnAddRemove: true, - controlsAboveOverlay: false, - allowTouchScrolling: false, - imageSmoothingEnabled: true, - viewportTransform: [...iMatrix], - enableRetinaScaling: true, - svgViewportTransformation: true, - skipOffscreen: true, - clipPath: undefined, -}; From f62cb4df7bb0bc9c06a4782ff5d3b9166ae2bc15 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 12:20:57 +0530 Subject: [PATCH 10/22] rename --- fabric.ts | 2 +- src/canvas/CanvasOptions.ts | 2 +- src/canvas/StaticCanvas.ts | 4 +-- src/canvas/StaticCanvasOptions.ts | 41 +++++++++++++++++++++++++++++++ 4 files changed, 45 insertions(+), 4 deletions(-) create mode 100644 src/canvas/StaticCanvasOptions.ts diff --git a/fabric.ts b/fabric.ts index 3285a2e4f91..583e2929155 100644 --- a/fabric.ts +++ b/fabric.ts @@ -14,7 +14,7 @@ export type { TCanvasSizeOptions, TSVGExportOptions, } from './src/canvas/StaticCanvas'; -export type { StaticCanvasOptions } from './src/canvas/staticCanvasOptions'; +export type { StaticCanvasOptions } from './src/canvas/StaticCanvasOptions'; export { StaticCanvas } from './src/canvas/StaticCanvas'; export { Canvas } from './src/canvas/Canvas'; export type { CanvasOptions } from './src/canvas/CanvasOptions'; diff --git a/src/canvas/CanvasOptions.ts b/src/canvas/CanvasOptions.ts index 2db06936001..e0640ea3020 100644 --- a/src/canvas/CanvasOptions.ts +++ b/src/canvas/CanvasOptions.ts @@ -1,7 +1,7 @@ import type { ModifierKey, TOptionalModifierKey } from '../EventTypeDefs'; import type { TColorArg } from '../color/typedefs'; import type { TOptions } from '../typedefs'; -import type { StaticCanvasOptions } from './staticCanvasOptions'; +import type { StaticCanvasOptions } from './StaticCanvasOptions'; export interface CanvasOptions extends StaticCanvasOptions { uniformScaling: boolean; diff --git a/src/canvas/StaticCanvas.ts b/src/canvas/StaticCanvas.ts index c8ed850822a..df4f99fe182 100644 --- a/src/canvas/StaticCanvas.ts +++ b/src/canvas/StaticCanvas.ts @@ -44,8 +44,8 @@ import { import { StaticCanvasDOMManager } from './DOMManagers/StaticCanvasDOMManager'; import type { CSSDimensions } from './DOMManagers/util'; import type { FabricObject } from '../shapes/Object/FabricObject'; -import type { StaticCanvasOptions } from './staticCanvasOptions'; -import { staticCanvasDefaults } from './staticCanvasOptions'; +import type { StaticCanvasOptions } from './StaticCanvasOptions'; +import { staticCanvasDefaults } from './StaticCanvasOptions'; export type TCanvasSizeOptions = { backstoreOnly?: boolean; diff --git a/src/canvas/StaticCanvasOptions.ts b/src/canvas/StaticCanvasOptions.ts new file mode 100644 index 00000000000..cac4e55822d --- /dev/null +++ b/src/canvas/StaticCanvasOptions.ts @@ -0,0 +1,41 @@ +import { iMatrix } from '../constants'; +import type { FabricObject } from '../shapes/Object/FabricObject'; +import type { TFiller, TMat2D, TOptions } from '../typedefs'; + +export interface StaticCanvasOptions { + width: number; + height: number; + backgroundVpt: boolean; + backgroundColor: TFiller | string; + backgroundImage?: FabricObject; + overlayVpt: boolean; + overlayColor: TFiller | string; + overlayImage?: FabricObject; + includeDefaultValues: boolean; + renderOnAddRemove: boolean; + controlsAboveOverlay: boolean; + allowTouchScrolling: boolean; + imageSmoothingEnabled: boolean; + viewportTransform: TMat2D; + enableRetinaScaling: boolean; + svgViewportTransformation: boolean; + skipOffscreen: boolean; + clipPath?: FabricObject; +} + +export const staticCanvasDefaults: TOptions = { + backgroundVpt: true, + backgroundColor: '', + overlayVpt: true, + overlayColor: '', + includeDefaultValues: true, + renderOnAddRemove: true, + controlsAboveOverlay: false, + allowTouchScrolling: false, + imageSmoothingEnabled: true, + viewportTransform: [...iMatrix], + enableRetinaScaling: true, + svgViewportTransformation: true, + skipOffscreen: true, + clipPath: undefined, +}; From ab135c21e11a751d8ff207182111da13f6c09c80 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 13:05:42 +0530 Subject: [PATCH 11/22] Update canvas_static.js --- test/unit/canvas_static.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index 5b4aa08fee6..b027b3b4dd9 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -192,8 +192,6 @@ var canvas = new fabric.StaticCanvas(); assert.ok('backgroundColor' in canvas); assert.ok('overlayColor' in canvas); - assert.ok('backgroundImage' in canvas); - assert.ok('overlayImage' in canvas); assert.ok('includeDefaultValues' in canvas); assert.ok('renderOnAddRemove' in canvas); assert.ok('controlsAboveOverlay' in canvas); From 86927bd928cd311183c89528eaef0f166f6485d6 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 13:06:17 +0530 Subject: [PATCH 12/22] extract static canvas jsdoc --- src/canvas/StaticCanvas.ts | 150 +++--------------------- src/canvas/StaticCanvasOptions.ts | 186 +++++++++++++++++++++++++++--- 2 files changed, 188 insertions(+), 148 deletions(-) diff --git a/src/canvas/StaticCanvas.ts b/src/canvas/StaticCanvas.ts index df4f99fe182..9c460dd851d 100644 --- a/src/canvas/StaticCanvas.ts +++ b/src/canvas/StaticCanvas.ts @@ -82,118 +82,39 @@ export class StaticCanvas< extends createCollectionMixin(CommonMethods) implements StaticCanvasOptions { - /** - * Background color of canvas instance. - * @type {(String|TFiller)} - * @default - */ - declare backgroundColor: TFiller | string; + declare width: number; + declare height: number; - /** - * Background image of canvas instance. - * since 2.4.0 image caching is active, please when putting an image as background, add to the - * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom - * vale. As an alternative you can disable image objectCaching - * @type FabricObject - * @default - */ + // background + declare backgroundVpt: boolean; + declare backgroundColor: TFiller | string; declare backgroundImage?: FabricObject; - - /** - * Overlay color of canvas instance. - * @since 1.3.9 - * @type {(String|TFiller)} - * @default - */ + // overlay + declare overlayVpt: boolean; declare overlayColor: TFiller | string; - - /** - * Overlay image of canvas instance. - * since 2.4.0 image caching is active, please when putting an image as overlay, add to the - * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom - * vale. As an alternative you can disable image objectCaching - * @type FabricObject - * @default - */ declare overlayImage?: FabricObject; - /** - * Indicates whether toObject/toDatalessObject should include default values - * if set to false, takes precedence over the object value. - * @type Boolean - * @default - */ + declare clipPath?: FabricObject; + declare includeDefaultValues: boolean; - /** - * Indicates whether {@link add}, {@link insertAt} and {@link remove}, - * {@link moveTo}, {@link clear} and many more, should also re-render canvas. - * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once - * since the renders are queued and executed one per frame. - * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() ) - * Left default to true to do not break documentation and old app, fiddles. - * @type Boolean - * @default - */ + // rendering config declare renderOnAddRemove: boolean; + declare skipOffscreen: boolean; + declare enableRetinaScaling: boolean; + declare imageSmoothingEnabled: boolean; /** - * Indicates whether object controls (borders/controls) are rendered above overlay image - * @type Boolean - * @default + * @todo move to Canvas */ declare controlsAboveOverlay: boolean; /** - * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas - * @type Boolean - * @default + * @todo move to Canvas */ declare allowTouchScrolling: boolean; - /** - * Indicates whether this canvas will use image smoothing, this is on by default in browsers - * @type Boolean - * @default - */ - declare imageSmoothingEnabled: boolean; - - /** - * The transformation (a Canvas 2D API transform matrix) which focuses the viewport - * @type Array - * @example Default transform - * canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; - * @example Scale by 70% and translate toward bottom-right by 50, without skewing - * canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50]; - * @default - */ declare viewportTransform: TMat2D; - - /** - * if set to false background image is not affected by viewport transform - * @since 1.6.3 - * @type Boolean - * @todo we should really find a different way to do this - * @default - */ - declare backgroundVpt: boolean; - - /** - * if set to false overlya image is not affected by viewport transform - * @since 1.6.3 - * @type Boolean - * @todo we should really find a different way to do this - * @default - */ - declare overlayVpt: boolean; - - /** - * When true, canvas is scaled by devicePixelRatio for better rendering on retina screens - * @type Boolean - * @default - */ - declare enableRetinaScaling: boolean; - /** * Describe canvas element extension over design * properties are tl,tr,bl,br. @@ -204,26 +125,6 @@ export class StaticCanvas< */ declare vptCoords: TCornerPoint; - /** - * Based on vptCoords and object.aCoords, skip rendering of objects that - * are not included in current viewport. - * May greatly help in applications with crowded canvas and use of zoom/pan - * If One of the corner of the bounding box of the object is on the canvas - * the objects get rendered. - * @type Boolean - * @default true - */ - declare skipOffscreen: boolean; - - /** - * a fabricObject that, without stroke define a clipping area with their shape. filled in black - * the clipPath object gets used when the canvas has rendered, and the context is placed in the - * top left corner of the canvas. - * clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true - * @type FabricObject - */ - declare clipPath: FabricObject; - /** * A reference to the canvas actual HTMLCanvasElement. * Can be use to read the raw pixels, but never write or manipulate @@ -237,20 +138,6 @@ export class StaticCanvas< return this.elements.lower?.ctx; } - /** - * Width in virtual/logical pixels of the canvas. - * The canvas can be larger than width if retina scaling is active - * @type number - */ - declare width: number; - - /** - * Height in virtual/logical pixels of the canvas. - * The canvas can be taller than width if retina scaling is active - * @type height - */ - declare height: number; - /** * If true the Canvas is in the process or has been disposed/destroyed. * No more rendering operation will be executed on this canvas. @@ -1050,12 +937,7 @@ export class StaticCanvas< } /* _TO_SVG_START_ */ - /** - * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, - * a zoomed canvas will then produce zoomed SVG output. - * @type Boolean - * @default - */ + declare svgViewportTransformation: boolean; /** diff --git a/src/canvas/StaticCanvasOptions.ts b/src/canvas/StaticCanvasOptions.ts index cac4e55822d..112cae12f35 100644 --- a/src/canvas/StaticCanvasOptions.ts +++ b/src/canvas/StaticCanvasOptions.ts @@ -1,26 +1,175 @@ import { iMatrix } from '../constants'; import type { FabricObject } from '../shapes/Object/FabricObject'; import type { TFiller, TMat2D, TOptions } from '../typedefs'; +import type { StaticCanvas } from './StaticCanvas'; -export interface StaticCanvasOptions { - width: number; - height: number; +interface CanvasDrawableOptions { + /** + * if set to false background image is not affected by viewport transform + * @since 1.6.3 + * @type Boolean + * @todo we should really find a different way to do this + * @default + */ backgroundVpt: boolean; + + /** + * Background color of canvas instance. + * @type {(String|TFiller)} + * @default + */ backgroundColor: TFiller | string; + + /** + * Background image of canvas instance. + * since 2.4.0 image caching is active, please when putting an image as background, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching + * @type FabricObject + * @default + */ backgroundImage?: FabricObject; + + /** + * if set to false overlya image is not affected by viewport transform + * @since 1.6.3 + * @type Boolean + * @todo we should really find a different way to do this + * @default + */ overlayVpt: boolean; + + /** + * Overlay color of canvas instance. + * @since 1.3.9 + * @type {(String|TFiller)} + * @default + */ overlayColor: TFiller | string; + + /** + * Overlay image of canvas instance. + * since 2.4.0 image caching is active, please when putting an image as overlay, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching + * @type FabricObject + * @default + */ overlayImage?: FabricObject; - includeDefaultValues: boolean; +} + +interface CanvasRenderingOptions { + /** + * Indicates whether {@link StaticCanvas#add}, {@link StaticCanvas#insertAt} and {@link StaticCanvas#remove}, + * {@link StaticCanvas#moveTo}, {@link StaticCanvas#clear} and many more, should also re-render canvas. + * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once + * since the renders are queued and executed one per frame. + * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() ) + * Left default to true to do not break documentation and old app, fiddles. + * @type Boolean + * @default + */ renderOnAddRemove: boolean; + + /** + * Based on vptCoords and object.aCoords, skip rendering of objects that + * are not included in current viewport. + * May greatly help in applications with crowded canvas and use of zoom/pan + * If One of the corner of the bounding box of the object is on the canvas + * the objects get rendered. + * @type Boolean + * @default true + */ + skipOffscreen: boolean; + + /** + * When true, canvas is scaled by devicePixelRatio for better rendering on retina screens + * @type Boolean + * @default + */ + enableRetinaScaling: boolean; + + /** + * Indicates whether this canvas will use image smoothing, this is on by default in browsers + * @type Boolean + * @default + */ + imageSmoothingEnabled: boolean; + + /** + * a fabricObject that, without stroke define a clipping area with their shape. filled in black + * the clipPath object gets used when the canvas has rendered, and the context is placed in the + * top left corner of the canvas. + * clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true + * @type FabricObject + */ + clipPath?: FabricObject; +} + +export interface CanvasExportOptions { + /** + * Indicates whether toObject/toDatalessObject should include default values + * if set to false, takes precedence over the object value. + * @type Boolean + * @default + */ + includeDefaultValues: boolean; + + /** + * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, + * a zoomed canvas will then produce zoomed SVG output. + * @type Boolean + * @default + */ + svgViewportTransformation: boolean; +} + +export interface StaticCanvasOptions + extends CanvasDrawableOptions, + CanvasRenderingOptions, + CanvasExportOptions { + /** + * Width in virtual/logical pixels of the canvas. + * The canvas can be larger than width if retina scaling is active + * @type number + */ + width: number; + + /** + * Height in virtual/logical pixels of the canvas. + * The canvas can be taller than width if retina scaling is active + * @type height + */ + height: number; + + /** + * Indicates whether object controls (borders/controls) are rendered above overlay image + * @type Boolean + * @default + * + * @todo move to Canvas + */ controlsAboveOverlay: boolean; + + /** + * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas + * @type Boolean + * @default + * + * @todo move to Canvas + */ allowTouchScrolling: boolean; - imageSmoothingEnabled: boolean; + + /** + * The transformation (a Canvas 2D API transform matrix) which focuses the viewport + * @type Array + * @example Default transform + * canvas.viewportTransform = [1, 0, 0, 1, 0, 0]; + * @example Scale by 70% and translate toward bottom-right by 50, without skewing + * canvas.viewportTransform = [0.7, 0, 0, 0.7, 50, 50]; + * @default + */ viewportTransform: TMat2D; - enableRetinaScaling: boolean; - svgViewportTransformation: boolean; - skipOffscreen: boolean; - clipPath?: FabricObject; } export const staticCanvasDefaults: TOptions = { @@ -28,14 +177,23 @@ export const staticCanvasDefaults: TOptions = { backgroundColor: '', overlayVpt: true, overlayColor: '', + includeDefaultValues: true, + svgViewportTransformation: true, + renderOnAddRemove: true, + skipOffscreen: true, + enableRetinaScaling: true, + imageSmoothingEnabled: true, + + /** + * @todo move to Canvas + */ controlsAboveOverlay: false, + /** + * @todo move to Canvas + */ allowTouchScrolling: false, - imageSmoothingEnabled: true, + viewportTransform: [...iMatrix], - enableRetinaScaling: true, - svgViewportTransformation: true, - skipOffscreen: true, - clipPath: undefined, }; From 71eb2f713838744adc2393b0ddf38339dc875a7f Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 13:19:23 +0530 Subject: [PATCH 13/22] Update StaticCanvas.ts --- src/canvas/StaticCanvas.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/canvas/StaticCanvas.ts b/src/canvas/StaticCanvas.ts index 9c460dd851d..28543ae0419 100644 --- a/src/canvas/StaticCanvas.ts +++ b/src/canvas/StaticCanvas.ts @@ -1068,13 +1068,9 @@ export class StaticCanvas< const clipPath = this.clipPath; if (clipPath) { clipPath.clipPathId = `CLIPPATH_${uid()}`; - return ( - '\n' + - this.clipPath.toClipPathSVG(options.reviver) + - '\n' - ); + return `\n${clipPath.toClipPathSVG( + options.reviver + )}\n`; } return ''; } From 6791d74cc6a84c31aa41695d625e194b9e832c26 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 13:20:06 +0530 Subject: [PATCH 14/22] extract canvas options jsdoc --- src/canvas/Canvas.ts | 5 - src/canvas/CanvasOptions.ts | 248 +++++++++++++++++++++++++++++++-- src/canvas/SelectableCanvas.ts | 199 +------------------------- 3 files changed, 241 insertions(+), 211 deletions(-) diff --git a/src/canvas/Canvas.ts b/src/canvas/Canvas.ts index d18ceeee0c2..fed586de42b 100644 --- a/src/canvas/Canvas.ts +++ b/src/canvas/Canvas.ts @@ -74,11 +74,6 @@ export class Canvas extends SelectableCanvas implements CanvasOptions { */ declare mainTouchId: null | number; - /** - * When the option is enabled, PointerEvent is used instead of TPointerEvent. - * @type Boolean - * @default - */ declare enablePointerEvents: boolean; /** diff --git a/src/canvas/CanvasOptions.ts b/src/canvas/CanvasOptions.ts index e0640ea3020..abde375945a 100644 --- a/src/canvas/CanvasOptions.ts +++ b/src/canvas/CanvasOptions.ts @@ -1,38 +1,264 @@ import type { ModifierKey, TOptionalModifierKey } from '../EventTypeDefs'; -import type { TColorArg } from '../color/typedefs'; import type { TOptions } from '../typedefs'; import type { StaticCanvasOptions } from './StaticCanvasOptions'; -export interface CanvasOptions extends 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. + * Backwards incompatibility note: 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. + * Backwards incompatibility note: 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[]; - selectionColor: TColorArg; + + /** + * 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[]; - selectionBorderColor: TColorArg; + + /** + * 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']; - containerClass: string; +} + +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; - preserveObjectStacking: 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 = { uniformScaling: true, uniScaleKey: 'shiftKey', @@ -40,6 +266,7 @@ export const canvasDefaults: TOptions = { centeredRotation: false, centeredKey: 'altKey', altActionKey: 'shiftKey', + selection: true, selectionKey: 'shiftKey', selectionColor: 'rgba(100, 100, 255, 0.3)', @@ -47,18 +274,23 @@ export const canvasDefaults: TOptions = { selectionBorderColor: 'rgba(255, 255, 255, 0.3)', selectionLineWidth: 1, selectionFullyContained: false, + hoverCursor: 'move', moveCursor: 'move', defaultCursor: 'default', freeDrawingCursor: 'crosshair', notAllowedCursor: 'not-allowed', - containerClass: 'canvas-container', + perPixelTargetFind: false, targetFindTolerance: 0, skipTargetFind: false, - preserveObjectStacking: false, + stopContextMenu: false, fireRightClick: false, fireMiddleClick: false, enablePointerEvents: false, + + containerClass: 'canvas-container', + + preserveObjectStacking: false, }; diff --git a/src/canvas/SelectableCanvas.ts b/src/canvas/SelectableCanvas.ts index 952fbf5b576..98d9ba0bcea 100644 --- a/src/canvas/SelectableCanvas.ts +++ b/src/canvas/SelectableCanvas.ts @@ -139,67 +139,12 @@ export class SelectableCanvas implements Omit { declare _objects: FabricObject[]; - /** - * 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 - */ - declare 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 - */ + declare uniformScaling: boolean; declare uniScaleKey: TOptionalModifierKey; - - /** - * When true, objects use center point as the origin of scale transformation. - * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). - * @since 1.3.4 - * @type Boolean - * @default - */ declare centeredScaling: boolean; - - /** - * When true, objects use center point as the origin of rotate transformation. - * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). - * @since 1.3.4 - * @type Boolean - * @default - */ declare 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 - */ declare 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 - */ declare altActionKey: TOptionalModifierKey; /** @@ -209,141 +154,25 @@ export class SelectableCanvas */ interactive = true; - /** - * Indicates whether group selection should be enabled - * @type Boolean - * @default - */ declare 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 - */ declare 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 - */ declare altSelectionKey: TOptionalModifierKey; - - /** - * Color of selection - * @type String - * @default - */ declare selectionColor: string; - - /** - * Default dash array pattern - * If not empty the selection border is dashed - * @type Array - */ declare selectionDashArray: number[]; - - /** - * Color of the border of selection (usually slightly darker than color of selection itself) - * @type String - * @default - */ declare selectionBorderColor: string; - - /** - * Width of a line used in object/group selection - * @type Number - * @default - */ declare selectionLineWidth: number; - - /** - * Select only shapes that are fully contained in the dragged selection rectangle. - * @type Boolean - * @default - */ declare selectionFullyContained: boolean; - /** - * Default cursor value used when hovering over an object on canvas - * @type CSSStyleDeclaration['cursor'] - * @default move - */ declare hoverCursor: CSSStyleDeclaration['cursor']; - - /** - * Default cursor value used when moving an object on canvas - * @type CSSStyleDeclaration['cursor'] - * @default move - */ declare moveCursor: CSSStyleDeclaration['cursor']; - - /** - * Default cursor value used for the entire canvas - * @type String - * @default default - */ declare defaultCursor: CSSStyleDeclaration['cursor']; - - /** - * Cursor value used during free drawing - * @type String - * @default crosshair - */ declare freeDrawingCursor: CSSStyleDeclaration['cursor']; - - /** - * Cursor value used for disabled elements ( corners with disabled action ) - * @type String - * @since 2.0.0 - * @default not-allowed - */ declare notAllowedCursor: CSSStyleDeclaration['cursor']; - /** - * 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 - */ declare containerClass: string; - /** - * When true, object detection happens on per-pixel basis rather than on per-bounding-box - * @type Boolean - * @default - */ declare perPixelTargetFind: boolean; - - /** - * Number of pixels around target pixel to tolerate (consider active) during object detection - * @type Number - * @default - */ declare 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 - */ declare skipTargetFind: boolean; /** @@ -356,36 +185,10 @@ export class SelectableCanvas */ declare isDrawingMode: boolean; - /** - * 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 - */ declare preserveObjectStacking: boolean; - /** - * Indicates if the right click on canvas can output the context menu or not - * @type Boolean - * @since 1.6.5 - * @default - */ declare stopContextMenu: boolean; - - /** - * Indicates if the canvas can fire right click events - * @type Boolean - * @since 1.6.5 - * @default - */ declare fireRightClick: boolean; - - /** - * Indicates if the canvas can fire middle click events - * @type Boolean - * @since 1.7.8 - * @default - */ declare fireMiddleClick: boolean; /** From 0d0ce13920fb4448fc76d253c7a06bc498016277 Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 13:23:38 +0530 Subject: [PATCH 15/22] rm `Canvas#interactive` flag --- src/canvas/SelectableCanvas.ts | 7 ------- src/shapes/Object/InteractiveObject.ts | 1 - test/unit/canvas.js | 5 ----- 3 files changed, 13 deletions(-) diff --git a/src/canvas/SelectableCanvas.ts b/src/canvas/SelectableCanvas.ts index 98d9ba0bcea..a3ba1fb59c1 100644 --- a/src/canvas/SelectableCanvas.ts +++ b/src/canvas/SelectableCanvas.ts @@ -147,13 +147,6 @@ export class SelectableCanvas declare centeredKey: TOptionalModifierKey; declare altActionKey: TOptionalModifierKey; - /** - * Indicates that canvas is interactive. This property should not be changed. - * @type Boolean - * @default - */ - interactive = true; - declare selection: boolean; declare selectionKey: TOptionalModifierKey | ModifierKey[]; declare altSelectionKey: TOptionalModifierKey; diff --git a/src/shapes/Object/InteractiveObject.ts b/src/shapes/Object/InteractiveObject.ts index 283ced531ce..92586d8860c 100644 --- a/src/shapes/Object/InteractiveObject.ts +++ b/src/shapes/Object/InteractiveObject.ts @@ -352,7 +352,6 @@ export class InteractiveFabricObject< drawSelectionBackground(ctx: CanvasRenderingContext2D): void { if ( !this.selectionBackgroundColor || - (this.canvas && !this.canvas.interactive) || (this.canvas && (this.canvas._activeObject as unknown as this) !== this) ) { return; diff --git a/test/unit/canvas.js b/test/unit/canvas.js index dc73edb6490..c886759dbe5 100644 --- a/test/unit/canvas.js +++ b/test/unit/canvas.js @@ -182,11 +182,6 @@ assert.equal(canvas.altActionKey, 'shiftKey', 'default is shift'); }); - QUnit.test('interactive', function(assert) { - assert.ok(typeof canvas.interactive === 'boolean'); - assert.ok(canvas.interactive, 'default is true'); - }); - QUnit.test('selection', function(assert) { assert.ok(typeof canvas.selection === 'boolean'); assert.ok(canvas.selection, 'default is true'); From c8cb4fec94136e7f1b753a496494f6088b34ca7b Mon Sep 17 00:00:00 2001 From: ShaMan123 Date: Thu, 3 Aug 2023 13:32:24 +0530 Subject: [PATCH 16/22] comments --- src/canvas/SelectableCanvas.ts | 5 +++++ src/canvas/StaticCanvasOptions.ts | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/canvas/SelectableCanvas.ts b/src/canvas/SelectableCanvas.ts index a3ba1fb59c1..df5bc0d2e80 100644 --- a/src/canvas/SelectableCanvas.ts +++ b/src/canvas/SelectableCanvas.ts @@ -140,6 +140,7 @@ export class SelectableCanvas { declare _objects: FabricObject[]; + // transform config declare uniformScaling: boolean; declare uniScaleKey: TOptionalModifierKey; declare centeredScaling: boolean; @@ -147,6 +148,7 @@ export class SelectableCanvas declare centeredKey: TOptionalModifierKey; declare altActionKey: TOptionalModifierKey; + // selection config declare selection: boolean; declare selectionKey: TOptionalModifierKey | ModifierKey[]; declare altSelectionKey: TOptionalModifierKey; @@ -156,6 +158,7 @@ export class SelectableCanvas declare selectionLineWidth: number; declare selectionFullyContained: boolean; + // cursors declare hoverCursor: CSSStyleDeclaration['cursor']; declare moveCursor: CSSStyleDeclaration['cursor']; declare defaultCursor: CSSStyleDeclaration['cursor']; @@ -164,6 +167,7 @@ export class SelectableCanvas declare containerClass: string; + // target find config declare perPixelTargetFind: boolean; declare targetFindTolerance: number; declare skipTargetFind: boolean; @@ -180,6 +184,7 @@ export class SelectableCanvas declare preserveObjectStacking: boolean; + // event config declare stopContextMenu: boolean; declare fireRightClick: boolean; declare fireMiddleClick: boolean; diff --git a/src/canvas/StaticCanvasOptions.ts b/src/canvas/StaticCanvasOptions.ts index 112cae12f35..032e735ac7b 100644 --- a/src/canvas/StaticCanvasOptions.ts +++ b/src/canvas/StaticCanvasOptions.ts @@ -31,7 +31,7 @@ interface CanvasDrawableOptions { backgroundImage?: FabricObject; /** - * if set to false overlya image is not affected by viewport transform + * if set to false overlay image is not affected by viewport transform * @since 1.6.3 * @type Boolean * @todo we should really find a different way to do this From 9d2d8d2ecadf96678429de8a7eed94f0e3602931 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 3 Aug 2023 15:53:38 +0200 Subject: [PATCH 17/22] renamed changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 974be7166b5..2b612a8b32d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ ## [next] -- chore(TS): mv + rename `TProps` => `TOptions` [#9139](https://github.com/fabricjs/fabric.js/pull/9139) +- chore(TS): BREAKING PREVIOUS BETA mv + rename `TProps` => `TOptions` [#9139](https://github.com/fabricjs/fabric.js/pull/9139) - test(playwright): Use embedded eval from playwright [#9133](https://github.com/fabricjs/fabric.js/pull/9133) - chore(TS): Fix event types and .once this binding [#9119](https://github.com/fabricjs/fabric.js/pull/9130) - docs(): rm `canvas2pdf` [#9135](https://github.com/fabricjs/fabric.js/pull/9135) From 5ff2ba468ddcfda8bea4238c035cb28eaf171820 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 3 Aug 2023 20:40:26 +0200 Subject: [PATCH 18/22] Update canvas_static.js --- test/unit/canvas_static.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index b027b3b4dd9..ccfb84ed93c 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -192,6 +192,7 @@ var canvas = new fabric.StaticCanvas(); assert.ok('backgroundColor' in canvas); assert.ok('overlayColor' in canvas); + assert.ok(canvas.hasOwnProperty('backgroundImage')); assert.ok('includeDefaultValues' in canvas); assert.ok('renderOnAddRemove' in canvas); assert.ok('controlsAboveOverlay' in canvas); From 283b150f3eb273b88a1e5e461eebabff60ad8d35 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 3 Aug 2023 20:41:33 +0200 Subject: [PATCH 19/22] Update canvas_static.js --- test/unit/canvas_static.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index ccfb84ed93c..08cc05c2019 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -192,6 +192,7 @@ var canvas = new fabric.StaticCanvas(); assert.ok('backgroundColor' in canvas); assert.ok('overlayColor' in canvas); + assert.ok('overlayImage' in canvas); assert.ok(canvas.hasOwnProperty('backgroundImage')); assert.ok('includeDefaultValues' in canvas); assert.ok('renderOnAddRemove' in canvas); From 16eeccd50ece56a981ed21aa2cc449c63e3a1926 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 3 Aug 2023 22:29:58 +0200 Subject: [PATCH 20/22] Update canvas_static.js --- test/unit/canvas_static.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index 08cc05c2019..759345993a4 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -192,7 +192,7 @@ var canvas = new fabric.StaticCanvas(); assert.ok('backgroundColor' in canvas); assert.ok('overlayColor' in canvas); - assert.ok('overlayImage' in canvas); + assert.ok(canvas.hasOwnProperty('overlayImage')); assert.ok(canvas.hasOwnProperty('backgroundImage')); assert.ok('includeDefaultValues' in canvas); assert.ok('renderOnAddRemove' in canvas); From 3d06fe6b8a89561b1b0f18b043712b428e6a9a9a Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 3 Aug 2023 23:01:28 +0200 Subject: [PATCH 21/22] restored failed test --- test/unit/canvas_static.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/unit/canvas_static.js b/test/unit/canvas_static.js index 759345993a4..b027b3b4dd9 100644 --- a/test/unit/canvas_static.js +++ b/test/unit/canvas_static.js @@ -192,8 +192,6 @@ var canvas = new fabric.StaticCanvas(); assert.ok('backgroundColor' in canvas); assert.ok('overlayColor' in canvas); - assert.ok(canvas.hasOwnProperty('overlayImage')); - assert.ok(canvas.hasOwnProperty('backgroundImage')); assert.ok('includeDefaultValues' in canvas); assert.ok('renderOnAddRemove' in canvas); assert.ok('controlsAboveOverlay' in canvas); From d44d539342e4c3fe369c2ae4b32648fbbcd100a2 Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 3 Aug 2023 23:07:06 +0200 Subject: [PATCH 22/22] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2b612a8b32d..c672dbd2b88 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ # Changelog ## [next] - +- chore(TS): BREAKING remove canvas.interactive, added typings for canvas options [#9140](https://github.com/fabricjs/fabric.js/pull/9140) - chore(TS): BREAKING PREVIOUS BETA mv + rename `TProps` => `TOptions` [#9139](https://github.com/fabricjs/fabric.js/pull/9139) - test(playwright): Use embedded eval from playwright [#9133](https://github.com/fabricjs/fabric.js/pull/9133) - chore(TS): Fix event types and .once this binding [#9119](https://github.com/fabricjs/fabric.js/pull/9130)