Method connectedCallback

packages/element-shade/src/index.ts:66–113

()

  }

  protected connectedCallback(): void {
    super.connectedCallback();

    const $canvas: CropperCanvas | null = this.closest(this.$getTagNameOf(CROPPER_CANVAS));

    if ($canvas) {
      this.$canvas = $canvas;
      this.style.position = 'absolute';

      const $selection: CropperSelection | null = $canvas.querySelector(
        this.$getTagNameOf(CROPPER_SELECTION),
      );

      if ($selection) {
        this.$onWindowResize = this.$render.bind(this);
        this.$onCanvasActionStart = (event) => {
          if ($selection.hidden && (event as CustomEvent).detail.action === ACTION_SELECT) {
            this.hidden = false;
          }
        };
        this.$onCanvasActionEnd = (event) => {
          if ($selection.hidden && (event as CustomEvent).detail.action === ACTION_SELECT) {
            this.hidden = true;
          }
        };
        this.$onSelectionChange = (event) => {
          const {
            x,
            y,
            width,
            height,
          } = event.defaultPrevented ? $selection : (event as CustomEvent).detail;

          this.$change(x, y, width, height);

          if ($selection.hidden || (x === 0 && y === 0 && width === 0 && height === 0)) {
            this.hidden = true;
          }
        };
        on(window, EVENT_RESIZE, this.$onWindowResize);
        on($canvas, EVENT_ACTION_START, this.$onCanvasActionStart);
        on($canvas, EVENT_ACTION_END, this.$onCanvasActionEnd);
        on($canvas, EVENT_CHANGE, this.$onSelectionChange);
      }
    }

    this.$render();
  }

  protected disconnectedCallback(): void {
    const { $canvas } = this;