duoyun-ui/elements/legend.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 _DuoyunLegendElement_instances, _DuoyunLegendElement_currentValueSet_get, _DuoyunLegendElement_onWheel, _DuoyunLegendElement_onChange;
import { adoptedStyle, customElement, emitter, property } from '@mantou/gem/lib/decorators';
import { html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
import { theme } from '../lib/theme';
import { commonColors } from '../lib/color';
import { DuoyunScrollBaseElement } from './base/scroll';
import './tooltip';
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    --color: initial;
    display: flex;
    gap: 1em;
    align-items: center;
    font-size: 0.875em;
  }
  .item {
    cursor: default;
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: var(--color);
    white-space: nowrap;
  }
  .item.unselect {
    --color: ${theme.disabledColor};
  }
  .item span {
    line-height: 1;
    width: 0.8em;
    height: 0.6em;
    border-radius: ${theme.smallRound};
    background-color: currentColor;
  }
`);
/**
 * @customElement dy-legend
 */
let DuoyunLegendElement = class DuoyunLegendElement extends DuoyunScrollBaseElement {
    constructor() {
        super();
        _DuoyunLegendElement_instances.add(this);
        this.colors = commonColors;
        this.legends = [];
        _DuoyunLegendElement_onWheel.set(this, (evt) => {
            this.scrollBy(Math.sign(evt.deltaY) * 30, 0);
        });
        _DuoyunLegendElement_onChange.set(this, (currentValue, value, exclude = false) => {
            const total = this.legends.length;
            if (total === 1)
                return;
            if (currentValue.size === total) {
                return this.change(exclude ? [...currentValue].filter((e) => e !== value) : [value]);
            }
            if (currentValue.has(value)) {
                if (currentValue.size === 1) {
                    return this.change(this.legends.map(({ label, value }) => value !== null && value !== void 0 ? value : label));
                }
                else {
                    return this.change([...currentValue].filter((e) => e !== value));
                }
            }
            return this.change([...currentValue, value]);
        });
        this.render = () => {
            var _a;
            const currentValue = __classPrivateFieldGet(this, _DuoyunLegendElement_instances, "a", _DuoyunLegendElement_currentValueSet_get);
            return html `
      ${(_a = this.legends) === null || _a === void 0 ? void 0 : _a.map(({ value, label, tooltip }, index) => html `
          <dy-tooltip .content=${tooltip}>
            <div
              class=${classMap({ item: true, unselect: !currentValue.has(value !== null && value !== void 0 ? value : label) })}
              @click=${(e) => __classPrivateFieldGet(this, _DuoyunLegendElement_onChange, "f").call(this, currentValue, value !== null && value !== void 0 ? value : label, e.metaKey || e.ctrlKey)}
            >
              <span style=${styleMap({ color: `var(--color, ${this.colors[index % this.colors.length]})` })}></span>
              ${label}
            </div>
          </dy-tooltip>
        `)}
    `;
        };
        this.addEventListener('wheel', __classPrivateFieldGet(this, _DuoyunLegendElement_onWheel, "f"));
        this.internals.ariaHidden = 'true';
    }
};
_DuoyunLegendElement_onWheel = new WeakMap(), _DuoyunLegendElement_onChange = new WeakMap(), _DuoyunLegendElement_instances = new WeakSet(), _DuoyunLegendElement_currentValueSet_get = function _DuoyunLegendElement_currentValueSet_get() {
    var _a, _b;
    return new Set((_a = this.value) !== null && _a !== void 0 ? _a : (_b = this.legends) === null || _b === void 0 ? void 0 : _b.map(({ value, label }) => value !== null && value !== void 0 ? value : label));
};
__decorate([
    property
], DuoyunLegendElement.prototype, "colors", void 0);
__decorate([
    property
], DuoyunLegendElement.prototype, "legends", void 0);
__decorate([
    property
], DuoyunLegendElement.prototype, "value", void 0);
__decorate([
    emitter
], DuoyunLegendElement.prototype, "change", void 0);
DuoyunLegendElement = __decorate([
    customElement('dy-legend'),
    adoptedStyle(style)
], DuoyunLegendElement);
export { DuoyunLegendElement };
//# sourceMappingURL=legend.js.map