duoyun-ui/elements/chart-zoom.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _DuoyunChartZoomElement_getMovement, _DuoyunChartZoomElement_getCurrent, _DuoyunChartZoomElement_panAdjust, _DuoyunChartZoomElement_adjust, _DuoyunChartZoomElement_onPanStart, _DuoyunChartZoomElement_onPanStop, _DuoyunChartZoomElement_onNewStart, _DuoyunChartZoomElement_onNewChange, _DuoyunChartZoomElement_onNewEnd, _DuoyunChartZoomElement_onGrabStart, _DuoyunChartZoomElement_onPan, _DuoyunChartZoomElement_onGrabEnd;
import { adoptedStyle, customElement, emitter, property } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
import { clamp } from '../lib/number';
import { theme } from '../lib/theme';
import './gesture';
import './area-chart';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    position: relative;
    display: block;
    border-radius: ${theme.normalRound};
    border: 1px solid ${theme.borderColor};
  }
  dy-area-chart {
    aspect-ratio: 30;
    pointer-events: none;
    opacity: 0.4;
    background: ${theme.lightBackgroundColor};
  }
  .bg {
    cursor: crosshair;
    position: absolute;
    inset: 0;
  }
  .new-range,
  .range {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
    background: #2680eb22;
    border: 1px solid ${theme.describeColor};
    border-width: 0 1px;
    border-radius: inherit;
  }
  .grab {
    cursor: grab;
    height: 50%;
  }
  .crosshair {
    cursor: crosshair;
    height: 50%;
  }
  .grabbing {
    cursor: grabbing;
  }
  .start,
  .stop {
    cursor: col-resize;
    position: absolute;
    top: 50%;
    background: ${theme.backgroundColor};
    height: 1em;
    width: 3px;
    border-radius: 10em;
    border: 1px solid ${theme.describeColor};
  }
  .start {
    left: 0;
    transform: translate(-50%, -50%);
  }
  .stop {
    right: 0;
    transform: translate(50%, -50%);
  }
`);
/**
 * @customElement dy-chart-zoom
 */
let DuoyunChartZoomElement = class DuoyunChartZoomElement extends GemElement {
    constructor() {
        super();
        this.value = [0, 1];
        this.state = {
            grabbing: false,
        };
        _DuoyunChartZoomElement_getMovement.set(this, (detail) => {
            const { left, right, width } = this.getBoundingClientRect();
            if (detail.clientX < left || detail.clientX > right)
                return 0;
            return detail.x / width;
        });
        _DuoyunChartZoomElement_getCurrent.set(this, (clientX) => {
            const { left, width } = this.getBoundingClientRect();
            return clamp(0, (clientX - left) / width, 1);
        });
        _DuoyunChartZoomElement_panAdjust.set(this, ([start, stop], detail) => {
            const movement = __classPrivateFieldGet(this, _DuoyunChartZoomElement_getMovement, "f").call(this, detail);
            const m = movement < 0 ? Math.max(0 - start, movement) : Math.min(1 - stop, movement);
            return [start + m, stop + m];
        });
        _DuoyunChartZoomElement_adjust.set(this, (detail, isStop) => {
            let [start, stop] = this.value;
            if (isStop)
                [stop, start] = [start, stop];
            const { left, width } = this.getBoundingClientRect();
            const newStart = clamp(0, (detail.clientX - left) / width, 1);
            const newValue = [Math.min(newStart, stop), Math.max(newStart, stop)];
            if (newValue[1] - newValue[0] < 0.01)
                return __classPrivateFieldGet(this, _DuoyunChartZoomElement_panAdjust, "f").call(this, this.value, detail);
            return newValue;
        });
        _DuoyunChartZoomElement_onPanStart.set(this, (evt) => {
            const newValue = __classPrivateFieldGet(this, _DuoyunChartZoomElement_adjust, "f").call(this, evt.detail, false);
            this.change(newValue);
        });
        _DuoyunChartZoomElement_onPanStop.set(this, (evt) => {
            const newValue = __classPrivateFieldGet(this, _DuoyunChartZoomElement_adjust, "f").call(this, evt.detail, true);
            this.change(newValue);
        });
        _DuoyunChartZoomElement_onNewStart.set(this, ({ clientX }) => {
            const v = __classPrivateFieldGet(this, _DuoyunChartZoomElement_getCurrent, "f").call(this, clientX);
            this.setState({ newValue: [v, v] });
        });
        _DuoyunChartZoomElement_onNewChange.set(this, ({ detail }) => {
            const v = __classPrivateFieldGet(this, _DuoyunChartZoomElement_getCurrent, "f").call(this, detail.clientX);
            this.setState({ newValue: [this.state.newValue[0], v] });
        });
        _DuoyunChartZoomElement_onNewEnd.set(this, () => {
            const { newValue } = this.state;
            this.change([Math.min(...newValue), Math.max(...newValue)]);
            this.setState({ newValue: undefined });
        });
        _DuoyunChartZoomElement_onGrabStart.set(this, () => {
            this.setState({ grabbing: true });
        });
        _DuoyunChartZoomElement_onPan.set(this, ({ detail }) => {
            const newValue = __classPrivateFieldGet(this, _DuoyunChartZoomElement_panAdjust, "f").call(this, this.value, detail);
            this.change(newValue);
        });
        _DuoyunChartZoomElement_onGrabEnd.set(this, () => {
            this.setState({ grabbing: false });
        });
        this.render = () => {
            var _a;
            const { grabbing, newValue } = this.state;
            const [start, stop] = this.value;
            return html `
      <dy-area-chart
        .smooth=${Number((_a = this.values) === null || _a === void 0 ? void 0 : _a.length) < 100}
        .stageHeight=${12}
        .colors=${[theme.informativeColor]}
        .xAxi=${null}
        .yAxi=${null}
        .sequences=${this.values && [{ label: '', values: this.values }]}
      ></dy-area-chart>
      <dy-gesture class="bg" @pointerdown=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewStart, "f")} @pan=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewChange, "f")} @end=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewEnd, "f")}>
        ${newValue
                ? html `
              <div
                class="new-range"
                style=${styleMap({
                    left: `calc(${Math.min(...newValue) * 100}% - 1px)`,
                    right: `calc(${(1 - Math.max(...newValue)) * 100}% - 2px)`,
                })}
              ></div>
            `
                : ''}
      </dy-gesture>
      <div
        class=${classMap({ range: true, grabbing })}
        style=${styleMap({ left: `calc(${start * 100}% - 1px)`, right: `calc(${(1 - stop) * 100}% - 2px)` })}
      >
        <dy-gesture
          class=${classMap({ grab: true, grabbing })}
          @pointerdown=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onGrabStart, "f")}
          @pan=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onPan, "f")}
          @end=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onGrabEnd, "f")}
        ></dy-gesture>
        <dy-gesture
          class="crosshair"
          @pointerdown=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewStart, "f")}
          @pan=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewChange, "f")}
          @end=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onNewEnd, "f")}
        ></dy-gesture>
        <dy-gesture class="start" @pan=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onPanStart, "f")}></dy-gesture>
        <dy-gesture class="stop" @pan=${__classPrivateFieldGet(this, _DuoyunChartZoomElement_onPanStop, "f")}></dy-gesture>
      </div>
    `;
        };
        this.addEventListener('dblclick', () => this.change([0, 1]));
    }
};
_DuoyunChartZoomElement_getMovement = new WeakMap(), _DuoyunChartZoomElement_getCurrent = new WeakMap(), _DuoyunChartZoomElement_panAdjust = new WeakMap(), _DuoyunChartZoomElement_adjust = new WeakMap(), _DuoyunChartZoomElement_onPanStart = new WeakMap(), _DuoyunChartZoomElement_onPanStop = new WeakMap(), _DuoyunChartZoomElement_onNewStart = new WeakMap(), _DuoyunChartZoomElement_onNewChange = new WeakMap(), _DuoyunChartZoomElement_onNewEnd = new WeakMap(), _DuoyunChartZoomElement_onGrabStart = new WeakMap(), _DuoyunChartZoomElement_onPan = new WeakMap(), _DuoyunChartZoomElement_onGrabEnd = new WeakMap();
__decorate([
    property
], DuoyunChartZoomElement.prototype, "values", void 0);
__decorate([
    property
], DuoyunChartZoomElement.prototype, "value", void 0);
__decorate([
    emitter
], DuoyunChartZoomElement.prototype, "change", void 0);
DuoyunChartZoomElement = __decorate([
    customElement('dy-chart-zoom'),
    adoptedStyle(style)
], DuoyunChartZoomElement);
export { DuoyunChartZoomElement };
//# sourceMappingURL=chart-zoom.js.map