fabric 5.3.0 → 6.0.0-beta10

package/src/shapes/Object/types/BorderProps.ts

@@ -0,0 +1,40 @@
+export interface BorderProps {
+  /**
+   * Color of controlling borders of an object (when it's active)
+   * @type String
+   * @default rgb(178,204,255)
+   */
+  borderColor: string;
+
+  /**
+   * Array specifying dash pattern of an object's borders (hasBorder must be true)
+   * @since 1.6.2
+   * @type Array | null
+   * default null;
+   */
+  borderDashArray: number[] | null;
+
+  /**
+   * When set to `false`, object's controlling borders are not rendered
+   * @type Boolean
+   * @default
+   */
+  hasBorders: boolean;
+
+  /**
+   * Opacity of object's controlling borders when object is active and moving
+   * @type Number
+   * @default 0.4
+   */
+  borderOpacityWhenMoving: number;
+
+  /**
+   * Scale factor of object's controlling borders
+   * bigger number will make a thicker border
+   * border is 1, so this is basically a border thickness
+   * since there is no way to change the border itself.
+   * @type Number
+   * @default 1
+   */
+  borderScaleFactor: number;
+}

package/src/shapes/Object/types/ControlProps.ts

@@ -0,0 +1,69 @@
+export interface ControlProps {
+  /**
+   * Size of object's controlling corners (in pixels)
+   * @type Number
+   * @default 13
+   */
+  cornerSize: number;
+
+  /**
+   * Size of object's controlling corners when touch interaction is detected
+   * @type Number
+   * @default 24
+   */
+  touchCornerSize: number;
+
+  /**
+   * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill)
+   * @type Boolean
+   * @default true
+   */
+  transparentCorners: boolean;
+
+  /**
+   * Color of controlling corners of an object (when it's active)
+   * @type String
+   * @default rgb(178,204,255)
+   */
+  cornerColor: string;
+
+  /**
+   * Color of controlling corners of an object (when it's active and transparentCorners false)
+   * @since 1.6.2
+   * @type String
+   * @default null
+   */
+  cornerStrokeColor: string;
+
+  /**
+   * Specify style of control, 'rect' or 'circle'
+   * This is deprecated. In the future there will be a standard control render
+   * And you can swap it with one of the alternative proposed with the control api
+   * @since 1.6.2
+   * @type 'rect' | 'circle'
+   * @default rect
+   * @deprecated
+   */
+  cornerStyle: 'rect' | 'circle';
+
+  /**
+   * Array specifying dash pattern of an object's control (hasBorder must be true)
+   * @since 1.6.2
+   * @type Array | null
+   */
+  cornerDashArray: number[] | null;
+
+  /**
+   * Padding between object and its controlling borders (in pixels)
+   * @type Number
+   * @default 0
+   */
+  padding: number;
+
+  /**
+   * When set to `false`, object's controls are not displayed and can not be used to manipulate object
+   * @type Boolean
+   * @default
+   */
+  hasControls: boolean;
+}

package/src/shapes/Object/types/FabricObjectProps.ts

@@ -0,0 +1,111 @@
+import type { TDegree } from '../../../typedefs';
+import type { BorderProps } from './BorderProps';
+import type { ControlProps } from './ControlProps';
+import type { LockInteractionProps } from './LockInteractionProps';
+import type { ObjectProps } from './ObjectProps';
+
+export interface FabricObjectProps
+  extends ObjectProps,
+    ControlProps,
+    BorderProps,
+    LockInteractionProps {
+  /**
+   * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled
+   * too much and will be redrawn with correct details at the end of scaling.
+   * this setting is performance and application dependant.
+   * default to true
+   * since 1.7.0
+   * @type Boolean
+   * @default true
+   */
+  noScaleCache?: boolean;
+
+  /**
+   * When true, this object will use center point as the origin of transformation
+   * when being scaled via the controls.
+   * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
+   * @since 1.3.4
+   * @type Boolean
+   * @default
+   */
+  centeredScaling: false;
+
+  /**
+   * When true, this object will use center point as the origin of transformation
+   * when being rotated via the controls.
+   * <b>Backwards incompatibility note:</b> This property replaces "centerTransform" (Boolean).
+   * @since 1.3.4
+   * @type Boolean
+   * @default
+   */
+  centeredRotation: boolean;
+
+  /**
+   * The angle that an object will lock to while rotating.
+   * @type [TDegree]
+   */
+  snapAngle?: TDegree;
+
+  /**
+   * The angle difference from the current snapped angle in which snapping should occur.
+   * When undefined, the snapThreshold will default to the snapAngle.
+   * @type [TDegree]
+   */
+  snapThreshold?: TDegree;
+
+  /**
+   * Default cursor value used when hovering over this object on canvas
+   * @type CSSStyleDeclaration['cursor'] | null
+   * @default null
+   */
+  hoverCursor: CSSStyleDeclaration['cursor'] | null;
+
+  /**
+   * Default cursor value used when moving this object on canvas
+   * @type CSSStyleDeclaration['cursor'] | null
+   * @default null
+   */
+  moveCursor: CSSStyleDeclaration['cursor'] | null;
+
+  /**
+   * Selection Background color of an object. colored layer behind the object when it is active.
+   * does not mix good with globalCompositeOperation methods.
+   * @type String
+   * @deprecated
+   * @default
+   */
+  selectionBackgroundColor: string;
+
+  /**
+   * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box
+   * @type Boolean
+   * @default
+   */
+  perPixelTargetFind: boolean;
+
+  /**
+   * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection).
+   * But events still fire on it.
+   * @type Boolean
+   * @default
+   */
+  selectable: boolean;
+
+  /**
+   * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4
+   * @type Boolean
+   * @default
+   */
+  evented: boolean;
+
+  /**
+   * When 'down', object is set to active on mousedown/touchstart
+   * When 'up', object is set to active on mouseup/touchend
+   * Experimental. Let's see if this breaks anything before supporting officially
+   * @private
+   * since 4.4.0
+   * @type String
+   * @default 'down'
+   */
+  activeOn: 'down' | 'up';
+}

package/src/shapes/Object/types/FillStrokeProps.ts

@@ -0,0 +1,90 @@
+import type { TFiller } from '../../../typedefs';
+
+export interface FillStrokeProps {
+  /**
+   * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke")
+   * @type String
+   * @default
+   */
+  paintFirst: 'fill' | 'stroke';
+
+  /**
+   * Color of object's fill
+   * takes css colors https://www.w3.org/TR/css-color-3/
+   * @type String
+   * @default rgb(0,0,0)
+   */
+  fill: ReturnType<TFiller['toObject']> | string | null;
+
+  /**
+   * Fill rule used to fill an object
+   * accepted values are nonzero, evenodd
+   * <b>Backwards incompatibility note:</b> This property was used for setting globalCompositeOperation until v1.4.12 (use `globalCompositeOperation` instead)
+   * @type String
+   * @default nonzero
+   */
+  fillRule: CanvasFillRule;
+
+  /**
+   * When defined, an object is rendered via stroke and this property specifies its color
+   * takes css colors https://www.w3.org/TR/css-color-3/
+   * @type String
+   * @default null
+   */
+  stroke: ReturnType<TFiller['toObject']> | string | null;
+
+  /**
+   * Width of a stroke used to render this object
+   * @type Number
+   * @default 1
+   */
+  strokeWidth: number;
+
+  /**
+   * Array specifying dash pattern of an object's stroke (stroke must be defined)
+   * @type Array
+   * @default null;
+   */
+  strokeDashArray: number[] | null;
+
+  /**
+   * Line offset of an object's stroke
+   * @type Number
+   * @default 0
+   */
+  strokeDashOffset: number;
+
+  /**
+   * Line endings style of an object's stroke (one of "butt", "round", "square")
+   * @type String
+   * @default butt
+   */
+  strokeLineCap: CanvasLineCap;
+
+  /**
+   * Corner style of an object's stroke (one of "bevel", "round", "miter")
+   * @type String
+   * @default
+   */
+  strokeLineJoin: CanvasLineJoin;
+
+  /**
+   * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke
+   * @type Number
+   * @default 4
+   */
+  strokeMiterLimit: number;
+
+  /**
+   * When `false`, the stoke width will scale with the object.
+   * When `true`, the stroke will always match the exact pixel size entered for stroke width.
+   * this Property does not work on Text classes or drawing call that uses strokeText,fillText methods
+   * default to false
+   * @since 2.6.0
+   * @type Boolean
+   * @default false
+   * @type Boolean
+   * @default false
+   */
+  strokeUniform: boolean;
+}

package/src/shapes/Object/types/LockInteractionProps.ts

@@ -0,0 +1,57 @@
+export interface LockInteractionProps {
+  /**
+   * When `true`, object horizontal movement is locked
+   * @type Boolean
+   * @default
+   */
+  lockMovementX: boolean;
+
+  /**
+   * When `true`, object vertical movement is locked
+   * @type Boolean
+   * @default
+   */
+  lockMovementY: boolean;
+
+  /**
+   * When `true`, object rotation is locked
+   * @type Boolean
+   * @default
+   */
+  lockRotation: boolean;
+
+  /**
+   * When `true`, object horizontal scaling is locked
+   * @type Boolean
+   * @default
+   */
+  lockScalingX: boolean;
+
+  /**
+   * When `true`, object vertical scaling is locked
+   * @type Boolean
+   * @default
+   */
+  lockScalingY: boolean;
+
+  /**
+   * When `true`, object horizontal skewing is locked
+   * @type Boolean
+   * @default
+   */
+  lockSkewingX: boolean;
+
+  /**
+   * When `true`, object vertical skewing is locked
+   * @type Boolean
+   * @default
+   */
+  lockSkewingY: boolean;
+
+  /**
+   * When `true`, object cannot be flipped by scaling into negative values
+   * @type Boolean
+   * @default
+   */
+  lockScalingFlip: boolean;
+}

package/src/shapes/Object/types/ObjectProps.ts

@@ -0,0 +1,49 @@
+import type { Shadow } from '../../../Shadow';
+import type { Canvas } from '../../../canvas/Canvas';
+import type { StaticCanvas } from '../../../canvas/StaticCanvas';
+import type { TFiller } from '../../../typedefs';
+import type { FabricObject } from '../Object';
+import type {
+  ClipPathProps,
+  SerializedObjectProps,
+} from './SerializedObjectProps';
+
+export interface ObjectProps extends SerializedObjectProps, ClipPathProps {
+  clipPath?: FabricObject;
+  fill: TFiller | string | null;
+  stroke: TFiller | string | null;
+  shadow: Shadow | null;
+  canvas?: StaticCanvas | Canvas;
+
+  /**
+   * Minimum allowed scale value of an object
+   * @type Number
+   * @default 0
+   */
+  minScaleLimit: number;
+
+  /**
+   * When `true`, object is cached on an additional canvas.
+   * When `false`, object is not cached unless necessary ( clipPath )
+   * default to true
+   * @since 1.7.0
+   * @type Boolean
+   * @default true
+   */
+  objectCaching: boolean;
+
+  /**
+   * When `false`, default object's values are not included in its serialization
+   * @type Boolean
+   * @default
+   */
+  includeDefaultValues: boolean;
+
+  /**
+   * When `true`, object is not exported in OBJECT/JSON
+   * @since 1.6.3
+   * @type Boolean
+   * @default
+   */
+  excludeFromExport: boolean;
+}

package/src/shapes/Object/types/SerializedObjectProps.ts

@@ -0,0 +1,73 @@
+import type { Shadow } from '../../../Shadow';
+import type { BaseProps } from './BaseProps';
+import type { FillStrokeProps } from './FillStrokeProps';
+
+export interface SerializedObjectProps extends BaseProps, FillStrokeProps {
+  /**
+   * Opacity of an object
+   * @type Number
+   * @default 1
+   */
+  opacity: number;
+
+  /**
+   * Composite rule used for canvas globalCompositeOperation
+   * @type String
+   * @default
+   */
+  globalCompositeOperation: GlobalCompositeOperation;
+
+  /**
+   * Background color of an object.
+   * takes css colors https://www.w3.org/TR/css-color-3/
+   * @type String
+   * @default
+   */
+  backgroundColor: string;
+
+  /**
+   * Shadow object representing shadow of this shape
+   * @type Shadow
+   * @default null
+   */
+  shadow: ReturnType<Shadow['toObject']> | null;
+
+  /**
+   * When set to `false`, an object is not rendered on canvas
+   * @type Boolean
+   * @default
+   */
+  visible: boolean;
+
+  /**
+   * a fabricObject that, without stroke define a clipping area with their shape. filled in black
+   * the clipPath object gets used when the object has rendered, and the context is placed in the center
+   * of the object cacheCanvas.
+   * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center'
+   * @type FabricObject
+   */
+  clipPath?: Partial<SerializedObjectProps> & ClipPathProps;
+}
+
+export interface ClipPathProps {
+  /**
+   * Meaningful ONLY when the object is used as clipPath.
+   * if true, the clipPath will make the object clip to the outside of the clipPath
+   * since 2.4.0
+   * @type boolean
+   * @default false
+   */
+  inverted: boolean;
+
+  /**
+   * Meaningful ONLY when the object is used as clipPath.
+   * if true, the clipPath will have its top and left relative to canvas, and will
+   * not be influenced by the object transform. This will make the clipPath relative
+   * to the canvas, but clipping just a particular object.
+   * WARNING this is beta, this feature may change or be renamed.
+   * since 2.4.0
+   * @type boolean
+   * @default false
+   */
+  absolutePositioned: boolean;
+}

package/src/shapes/Object/types/index.ts

@@ -0,0 +1,8 @@
+import type { FabricObjectProps } from './FabricObjectProps';
+
+export type { SerializedObjectProps } from './SerializedObjectProps';
+export type { FabricObjectProps };
+
+export type TProps<T> = Partial<T> & Record<string, any>;
+
+export type TFabricObjectProps = TProps<FabricObjectProps>;