Skip to main content

Class: ImageColorsExtension

Hierarchy​

  • BaseExtension

    ↳ ImageColorsExtension

Implements​

Constructors​

constructor​

• new ImageColorsExtension(designState, designExtensionSystem)

Parameters​

NameType
designStateDesignState
designExtensionSystemDesignExtensionSystem

Overrides​

BaseExtension.constructor

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:86

Properties​

colorAdjustment​

• colorAdjustment: ColorAdjustment

A local store of an image item's colorAdjustment property that can be used and updated without having to update the cimDoc on every change of a slider.

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:77


designExtensionSystem​

• Private designExtensionSystem: DesignExtensionSystem

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:86


designState​

• designState: ItemState<ImageItem>

Overrides​

BaseExtension.designState

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:56


disposeColorCommitReaction​

• Private disposeColorCommitReaction: IReactionDisposer

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:83


disposeImageReplaceReaction​

• Private disposeImageReplaceReaction: IReactionDisposer

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:82


disposeSelectionChangeReaction​

• Private disposeSelectionChangeReaction: IReactionDisposer

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:84


initialColor​

• Optional initialColor: HSL

The intialColor serves different purposes depending on whether the image contains a single color.

  • For single-color images (e.g. clip-art), it represents the base color of the image before it is modified (e.g. via a color palette component)
  • For multi-colored images, it's mostly used to get an intial hue to be used on a color sliders component for tinting the HSL values.

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:69


isSingleColor​

• Optional isSingleColor: boolean

Images with only one color, like clip-art, will have this boolean set to true.

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:73


pendingColorRead​

• Private pendingColorRead: CancellablePromise<void>

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:81


status​

• Private status: ImageColorsStatus = 'loading'

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:79


inject​

▪ Static Optional inject: string[]

Overrides​

BaseExtension.inject

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:58

Accessors​

currentHsl​

• get currentHsl(): undefined | HSL

Returns the current HSL values for the color adjustment, accounting for differences in business logic for images containing a single color (e.g. clip-art)

Returns​

undefined | HSL

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:189


enabled​

• get enabled(): boolean

Returns​

boolean

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:248


hasColorAdjustment​

• get hasColorAdjustment(): boolean

Returns​

boolean

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:228


hasUnsavedChanges​

• get hasUnsavedChanges(): boolean

Returns​

boolean

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:233


isFailed​

• get isFailed(): boolean

Returns​

boolean

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:243


isLoading​

• get isLoading(): boolean

Returns​

boolean

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:238


isSelected​

• Private get isSelected(): boolean

Returns​

boolean

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:263

Methods​

[decorateItemPreviewModel]​

▸ [decorateItemPreviewModel](previewModel): void

Parameters​

NameType
previewModelItem

Returns​

void

Implementation of​

ItemPreviewModelDecorator.__@decorateItemPreviewModel@41120

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:254


dispose​

▸ dispose(): void

Returns​

void

Overrides​

BaseExtension.dispose

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:273


extractImageColors​

▸ Private extractImageColors(): Generator<Promise<HTMLImageElement>, void, HTMLImageElement>

Uses the getColorPaletteFromImage function (powered by color thief) to calculate the dominant colors in the image.

Returns​

Generator<Promise<HTMLImageElement>, void, HTMLImageElement>

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:147


setColorAdjustment​

▸ setColorAdjustment(__namedParameters): void

Parameters​

NameType
__namedParametersHSL

Returns​

void

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:171


supports​

▸ Static supports(state): boolean

Parameters​

NameType
stateDesignState

Returns​

boolean

Overrides​

BaseExtension.supports

Defined in​

packages/design-engine-react-components/src/extensions/imageColors/ImageColorsExtension.ts:60