duoyun-ui/elements/map.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 __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m") throw new TypeError("Private method is not writable");
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
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 _DuoyunMapElement_projection, _DuoyunMapElement_areas, _DuoyunMapElement_onPan, _DuoyunMapElement_onEnd, _DuoyunMapElement_onLeaveArea, _DuoyunMapElement_onLeaveNode, _DuoyunMapElement_renderArea, _DuoyunMapElement_renderName, _DuoyunMapElement_renderNode;
var DuoyunMapElement_1;
import { adoptedStyle, customElement, emitter, property, state, part } from '@mantou/gem/lib/decorators';
import { html, svg } from '@mantou/gem/lib/element';
import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
import { geoProjection, geoMercatorRaw, geoEquirectangularRaw, geoPath } from 'd3-geo';
import { theme } from '../lib/theme';
import { DuoyunLoadableBaseElement } from './base/loadable';
import './gesture';
// https://github.com/d3/d3-geo/blob/main/src/projection/equirectangular.js
// https://github.com/d3/d3-geo/blob/main/src/projection/mercator.js
const customProjectionRaw = (lambda, phi) => {
    const limit = (Math.PI / 180) * 53;
    const maxPhi = (Math.PI / 180) * 95;
    const total = maxPhi - limit;
    const [, y1] = geoEquirectangularRaw(lambda, phi);
    const [, y2] = geoMercatorRaw(lambda, phi);
    const phiAbs = Math.abs(phi);
    const ratio = phiAbs > limit ? (phiAbs - limit) / total : 0;
    const y = y1 * ratio + y2 * (1 - ratio);
    return [lambda, y];
};
// TODO: implement `invert`
export const geoCommonProjection = () => geoProjection(customProjectionRaw).scale(152.63);
// viewbox 1
// https://www.zhangxinxu.com/sp/svgo/
export const shapes = [
    // 圆
    {
        strokeScale: 1,
        scale: 2,
        d: 'M1 .36A.5.5 0 0 1 .64 1 .5.5 0 0 1 0 .64a.42.42 0 0 1 0-.27A.49.49 0 0 1 .63 0 .51.51 0 0 1 1 .29z',
    },
    // 三边形
    {
        strokeScale: 0.9,
        scale: 2,
        d: 'M.5109 0.01L.0087 .88h1.0046L.5109 .01z',
    },
    // 菱形
    {
        strokeScale: 0.8,
        scale: 2,
        d: 'M0.00704 0.5071l0.5-0.5 0.5 0.5-0.5 0.5z',
    },
    // 五边形
    {
        strokeScale: 0.8,
        scale: 2,
        d: 'M0.5030.0062L0.0059 0.3674l0.1899 0.5844h0.6145l0.19-0.5844L0.5030.0062z',
    },
    // 六角
    {
        strokeScale: 0.7,
        scale: 2.5,
        d: 'M.73.48L.86.25H.6L.43 0 .3.23H0l.13.25L0 .75h.26L.43 1 .56.77h.3L.73.52V.48z',
    },
    // 四角
    {
        strokeScale: 0.7,
        scale: 3,
        d: 'M0.4974 0L0.3709 0.3726 0 0.4988l0.3692 0.1286L0.4974 1l0.1255-0.372L0.9972 0.5 0.6263 0.3744z',
    },
    // 五角
    {
        strokeScale: 0.7,
        scale: 2.5,
        d: 'M0.5107 0.8l-0.309 0.1624 0.059-0.344-0.25-0.2437 0.3455-0.0502L0.5107 0.0113l0.1546 0.3131 0.3454 0.0502-0.25 0.2437 0.0591 0.344-0.3091-0.1624z',
    },
    // 正方形
    {
        strokeScale: 0.9,
        scale: 2,
        d: 'M0 0L0 1L1 1L1 0z',
    },
];
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: block;
    border-radius: ${theme.normalRound};
    background-color: ${theme.lightBackgroundColor};
    aspect-ratio: 2 / 1;
  }
  svg {
    overflow: visible;
  }
  .area {
    stroke: ${theme.backgroundColor};
    transition: opacity 0.3s ${theme.timingFunction};
  }
  .area.current:not(.disabled):hover {
    opacity: 0.8;
  }
  .name {
    fill: ${theme.textColor};
    stroke: ${theme.backgroundColor};
    paint-order: stroke;
    pointer-events: none;
    text-anchor: middle;
  }
  .node {
    paint-order: stroke;
    transform-origin: center;
    transform-box: fill-box;
    stroke-opacity: 0.4;
    --translate: calc(-50% + var(--x)), calc(-50% + var(--y));
    transform: translate(var(--translate)) scale(var(--scale));
    /* await chrome implement */
    transition: scale 0.3s ${theme.timingFunction};
  }
  .node.current:hover {
    transform: translate(var(--translate)) scale(calc(var(--scale) * 1.5));
  }
`);
/**
 * @customElement dy-map
 * @fire nodehover
 * @fire nodeleave
 * @fire nodeclick
 * @fire areahover
 * @fire arealeave
 * @fire areaclick
 */
let DuoyunMapElement = DuoyunMapElement_1 = class DuoyunMapElement extends DuoyunLoadableBaseElement {
    constructor() {
        super();
        this.scale = 1;
        this.translate2D = [0, 0];
        this.state = {};
        _DuoyunMapElement_projection.set(this, void 0);
        _DuoyunMapElement_areas.set(this, void 0);
        _DuoyunMapElement_onPan.set(this, ({ detail }) => {
            this.grabbing = true;
            this.pan(detail);
        });
        _DuoyunMapElement_onEnd.set(this, () => {
            this.grabbing = false;
        });
        _DuoyunMapElement_onLeaveArea.set(this, (detail) => {
            this.arealeave(detail);
            this.setState({ currentArea: undefined });
        });
        _DuoyunMapElement_onLeaveNode.set(this, (detail) => {
            this.nodeleave(detail);
            this.setState({ currentNode: undefined });
        });
        this.willMount = () => {
            this.memo(() => {
                var _a, _b;
                __classPrivateFieldSet(this, _DuoyunMapElement_projection, ((_a = this.getProjection) === null || _a === void 0 ? void 0 : _a.call(this, geoCommonProjection)) || geoCommonProjection(), "f");
                const pathFn = geoPath().projection(__classPrivateFieldGet(this, _DuoyunMapElement_projection, "f"));
                __classPrivateFieldSet(this, _DuoyunMapElement_areas, (_b = this.geo) === null || _b === void 0 ? void 0 : _b.features.map(({ geometry, properties }) => {
                    return {
                        path: pathFn(geometry),
                        center: pathFn.centroid(geometry),
                        name: (properties && (properties.name || properties.NAME)) || '',
                    };
                }), "f");
            }, () => [this.geo, this.getProjection]);
        };
        _DuoyunMapElement_renderArea.set(this, (area, isCurrent) => {
            var _a;
            const { name, path } = area;
            const color = (_a = this.getAreaColor) === null || _a === void 0 ? void 0 : _a.call(this, name, isCurrent);
            const onMouseover = (originEvent) => {
                if (isCurrent) {
                    this.areahover({ name, originEvent });
                }
                else {
                    this.setState({ currentArea: area });
                }
            };
            return svg `
      <path
        class=${classMap({ area: true, disabled: !color, current: isCurrent })}
        d=${path}
        stroke-width=${0.1 / this.scale}
        fill=${color || theme.disabledColor}
        @click=${(originEvent) => this.areaclick({ name, originEvent })}
        @mouseover=${onMouseover}
        @mouseout=${(originEvent) => isCurrent && __classPrivateFieldGet(this, _DuoyunMapElement_onLeaveArea, "f").call(this, { name, originEvent })}
      ></path>
    `;
        });
        _DuoyunMapElement_renderName.set(this, ({ name, center: [x, y] }, isCurrent) => {
            var _a;
            return svg `
      <text
        class=${classMap({ name: true, current: isCurrent })}
        x=${x}
        y=${y}
        font-size=${2.5 / this.scale}
        stroke-width=${0.5 / this.scale}>
        ${(_a = this.getAreaName) === null || _a === void 0 ? void 0 : _a.call(this, name, isCurrent)}
      </text>
    `;
        });
        _DuoyunMapElement_renderNode.set(this, (node, isCurrent) => {
            var _a;
            const { id, type = '0', position: pos } = node;
            const position = __classPrivateFieldGet(this, _DuoyunMapElement_projection, "f").call(this, pos) || [0, 0];
            const color = ((_a = this.getNodeColor) === null || _a === void 0 ? void 0 : _a.call(this, id, isCurrent)) || theme.textColor;
            const shape = shapes[type];
            const scale = shape.scale / this.scale;
            const onMouseover = (originEvent) => {
                if (isCurrent) {
                    this.nodehover({ id, originEvent });
                }
                else {
                    this.setState({ currentNode: node });
                }
            };
            return svg `
      <path
        class=${classMap({ node: true, current: isCurrent })}
        style=${`--x: ${position[0]}px; --y: ${position[1]}px; --scale: ${scale}`}
        d=${shape.d}
        fill=${color}
        stroke=${theme.backgroundColor}
        stroke-width=${(2 / scale) * shape.strokeScale}
        @click=${(originEvent) => this.nodeclick({ id, originEvent })}
        @mouseover=${onMouseover}
        @mouseout=${(originEvent) => isCurrent && __classPrivateFieldGet(this, _DuoyunMapElement_onLeaveNode, "f").call(this, { id, originEvent })}
      ></path>
    `;
        });
        this.render = () => {
            var _a, _b, _c;
            const { currentArea, currentNode } = this.state;
            return html `
      <dy-gesture @pan=${__classPrivateFieldGet(this, _DuoyunMapElement_onPan, "f")} @end=${__classPrivateFieldGet(this, _DuoyunMapElement_onEnd, "f")}>
        ${svg `
          <svg
            part=${DuoyunMapElement_1.map}
            xmlns="http://www.w3.org/2000/svg"
            viewBox="-180 -90 360 180"
            aria-hidden="true"
            style=${styleMap({
                transform: `scale(${this.scale}) translate(${this.translate2D[0]}px, ${this.translate2D[1]}px)`,
            })}>
            ${(_a = __classPrivateFieldGet(this, _DuoyunMapElement_areas, "f")) === null || _a === void 0 ? void 0 : _a.map((area) => (area === currentArea ? '' : __classPrivateFieldGet(this, _DuoyunMapElement_renderArea, "f").call(this, area, false)))}
            ${currentArea ? __classPrivateFieldGet(this, _DuoyunMapElement_renderArea, "f").call(this, currentArea, true) : ''}
            ${(_b = __classPrivateFieldGet(this, _DuoyunMapElement_areas, "f")) === null || _b === void 0 ? void 0 : _b.map((area) => __classPrivateFieldGet(this, _DuoyunMapElement_renderName, "f").call(this, area, false))}
            ${currentArea ? __classPrivateFieldGet(this, _DuoyunMapElement_renderName, "f").call(this, currentArea, true) : ''}
            ${__classPrivateFieldGet(this, _DuoyunMapElement_areas, "f") && ((_c = this.nodes) === null || _c === void 0 ? void 0 : _c.map((node) => (node === currentNode ? '' : __classPrivateFieldGet(this, _DuoyunMapElement_renderNode, "f").call(this, node, false))))}
            ${currentNode ? __classPrivateFieldGet(this, _DuoyunMapElement_renderNode, "f").call(this, currentNode, true) : ''}
          </svg>
        `}
      </dy-gesture>
    `;
        };
        this.internals.role = 'img';
    }
};
_DuoyunMapElement_projection = new WeakMap(), _DuoyunMapElement_areas = new WeakMap(), _DuoyunMapElement_onPan = new WeakMap(), _DuoyunMapElement_onEnd = new WeakMap(), _DuoyunMapElement_onLeaveArea = new WeakMap(), _DuoyunMapElement_onLeaveNode = new WeakMap(), _DuoyunMapElement_renderArea = new WeakMap(), _DuoyunMapElement_renderName = new WeakMap(), _DuoyunMapElement_renderNode = new WeakMap();
__decorate([
    property
], DuoyunMapElement.prototype, "getProjection", void 0);
__decorate([
    property
], DuoyunMapElement.prototype, "geo", void 0);
__decorate([
    property
], DuoyunMapElement.prototype, "getAreaColor", void 0);
__decorate([
    property
], DuoyunMapElement.prototype, "getAreaName", void 0);
__decorate([
    property
], DuoyunMapElement.prototype, "nodes", void 0);
__decorate([
    property
], DuoyunMapElement.prototype, "getNodeColor", void 0);
__decorate([
    property
], DuoyunMapElement.prototype, "scale", void 0);
__decorate([
    property
], DuoyunMapElement.prototype, "translate2D", void 0);
__decorate([
    state
], DuoyunMapElement.prototype, "grabbing", void 0);
__decorate([
    emitter
], DuoyunMapElement.prototype, "pan", void 0);
__decorate([
    emitter
], DuoyunMapElement.prototype, "nodehover", void 0);
__decorate([
    emitter
], DuoyunMapElement.prototype, "nodeleave", void 0);
__decorate([
    emitter
], DuoyunMapElement.prototype, "nodeclick", void 0);
__decorate([
    emitter
], DuoyunMapElement.prototype, "areahover", void 0);
__decorate([
    emitter
], DuoyunMapElement.prototype, "arealeave", void 0);
__decorate([
    emitter
], DuoyunMapElement.prototype, "areaclick", void 0);
__decorate([
    part
], DuoyunMapElement, "map", void 0);
DuoyunMapElement = DuoyunMapElement_1 = __decorate([
    customElement('dy-map'),
    adoptedStyle(style)
], DuoyunMapElement);
export { DuoyunMapElement };
//# sourceMappingURL=map.js.map