import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';

const indexCss = "taro-canvas-core{display:block;position:relative;width:300px;height:150px}";

const LONG_TAP_DELAY = 500;
const Canvas = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.onLongTap = createEvent(this, "longtap", 7);
    this.onTouchStart = () => {
      this.timer = setTimeout(() => {
        this.onLongTap.emit();
      }, LONG_TAP_DELAY);
    };
    this.onTouchMove = () => {
      clearTimeout(this.timer);
    };
    this.onTouchEnd = () => {
      clearTimeout(this.timer);
    };
    this.canvasId = undefined;
    this.nativeProps = {};
  }
  render() {
    const { canvasId, nativeProps } = this;
    return (h("canvas", Object.assign({ "canvas-id": canvasId, style: {
        width: '100%',
        height: '100%'
      }, onTouchStart: this.onTouchStart, onTouchMove: this.onTouchMove, onTouchEnd: this.onTouchEnd }, nativeProps)));
  }
  get el() { return this; }
  static get style() { return indexCss; }
}, [0, "taro-canvas-core", {
    "canvasId": [1, "canvas-id"],
    "nativeProps": [16]
  }]);
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["taro-canvas-core"];
  components.forEach(tagName => { switch (tagName) {
    case "taro-canvas-core":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, Canvas);
      }
      break;
  } });
}

const TaroCanvasCore = Canvas;
const defineCustomElement = defineCustomElement$1;

export { TaroCanvasCore, defineCustomElement };

//# sourceMappingURL=taro-canvas-core.js.map