CropperElement

The CropperElement interface represents any Cropper element, extends the HTMLElementopen in new window interface.

Specifications

  • The name of public properties should start with an alphabetic character.
  • The name of private properties should start with $.
  • The name of public/private custom methods should start with $.
  • The name of private custom listeners should start with $on.

Example

import { CropperElement } from 'cropperjs';
// Or
// import CropperElement from '@cropper/element';

class MyCropperElement extends CropperElement {
  myStringProperty = '';
  myNumberProperty = NaN;
  myBooleanProperty = false;

  static get observedAttributes() {
    return super.observedAttributes.concat([
      'my-boolean-property',
      'my-number-property',
      'my-string-property',
    ]);
  }

  // ...
}

MyCropperElement.$define();
<my-cropper-element my-string-property="foo" my-number-property="1" my-boolean-property></my-cropper-element>

Properties

Inherits properties from its parent, HTMLElementopen in new window, and implements the following properties:

NameTypeDefaultOptionsDescription
shadowRootModestring"open""closed" | "open"Indicates the encapsulation mode for the shadow DOM tree.
slottablebooleantrue-Indicates whether this element contains a <slot> element.
themeColorstring--Indicates the theme color of this element and its children.

Methods

$getShadowRoot

  • Syntax: $getShadowRoot()
  • Returns:
    • Type: ShadowRoot
    • The shadow root.

Outputs the shadow root of the element, even if its mode is "closed".

$addStyles

  • Syntax: $addStyles(styles)

  • Arguments:

    • styles:
      • Type: string
      • The styles to add.
  • Returns:

    • Type: CSSStyleSheet | HTMLStyleElement
    • The generated style sheet.
  • Example:

    const canvas = new CropperCanvas();
    
    canvas.$addStyles(`
      :host {
        border: 1px solid #39f;
      }
    `);
    

Adds styles to the shadow root.

$emit

  • Syntax:

    • $emit(type)
    • $emit(type, detail)
    • $emit(type, detail, options)
  • Arguments:

    • type:
      • Type: string
      • The name of the event.
    • detail:
      • Type: *
      • Default: undefined
      • The data passed when initializing the event.
    • options:
      • Type: CustomEventInit
      • Default: { bubbles: true, cancelable: true, composed: true }
      • The other event options.
  • Returns:

    • Type: boolean
    • The result value.
  • Example:

    const selection = new CropperSelection();
    
    selection.$emit('change', {
      x: 10,
      y: 5,
      width: 160,
      height: 90,
    });
    

Dispatches an event at the current element.

$nextTick

  • Syntax:
    • $nextTick()
    • $nextTick(callback)
  • Arguments:
    • callback:
      • Type: Function
      • The callback to execute after the next DOM update cycle.
  • Returns:
    • Type: Promise
    • A promise that resolves to nothing.

Defers the callback to be executed after the next DOM update cycle.

Static Properties

NameTypeDescription
$namestringThe name of the custom element.
$versionstringThe version of the package.

Static methods

$define

Defines the constructor as a new custom element. It is just a shortcut to call CustomElementRegistry.define()open in new window.

  • Syntax:

    • $define()
    • $define(name)
    • $define(options)
    • $define(name, options)
  • Alternatives:

    • customElements.define(name, constructor)
    • customElements.define(name, constructor, options)
  • Arguments:

    • name:
      • Type: string
      • The element name. Defaults to the $name static property of the constructor.
    • options:
      • Type: Object
      • The element definition options.
  • Example:

    // Define as a autonomous custom element: `<my-cropper-element></my-cropper-element>`.
    CropperElement.$define('my-cropper-element');