@yiwei016/d3timeline-plugins 1.0.0

package/dist/cursor-line/CursorLine.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cursor-line/CursorLine.js

@@ -0,0 +1,2 @@
+export {};
+// TODO: CursorLine.ts

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./zoom-slider/ZoomSlider";
+export * from "./multi-sync-v/MutiSyncV";
+export * from "./cursor-line/CursorLine";

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from "./zoom-slider/ZoomSlider";
+export * from "./multi-sync-v/MutiSyncV";
+export * from "./cursor-line/CursorLine";

package/dist/multi-sync-v/MutiSyncV.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/multi-sync-v/MutiSyncV.js

@@ -0,0 +1,2 @@
+export {};
+// TODO: MutiSyncV.ts

package/dist/zoom-slider/Slider.d.ts

@@ -0,0 +1,40 @@
+import EventEmitter from "eventemitter3";
+export type PercentData = {
+    leftPercent: number;
+    rightPercent: number;
+};
+type Events = {
+    "slider:updated": PercentData;
+};
+type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+declare class Slider extends EventEmitter<Events> {
+    #private;
+    private range?;
+    private edgeLabelConverter?;
+    get el(): HTMLDivElement | undefined;
+    get moveEl(): HTMLDivElement | undefined;
+    get showEdgeLabels(): boolean;
+    set showEdgeLabels(value: boolean);
+    get edgeLeftLabel(): string;
+    get edgeRightLabel(): string;
+    get leftPercent(): number;
+    get rightPercent(): number;
+    init(range: number[], edgeLabelConverter: (pos: number) => string): this;
+    remove(): void;
+    private initMoveDragger;
+    private initResizeDragger;
+    updateEdgeLabels(): void;
+    updateByRange(range?: number[]): void;
+    updateByRectData(rectData: Rect): PercentData;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private onSliderUpdated;
+    bindEvents(): void;
+    unbindEvents(): void;
+}
+export default Slider;

package/dist/zoom-slider/Slider.js

@@ -0,0 +1,237 @@
+import interact from "interactjs";
+import EventEmitter from "eventemitter3";
+class Slider extends EventEmitter {
+    #el;
+    #moveEl;
+    #resizeEls;
+    #showEdgeLabels = false;
+    range;
+    edgeLabelConverter;
+    get el() {
+        return this.#el;
+    }
+    get moveEl() {
+        return this.#moveEl;
+    }
+    get showEdgeLabels() {
+        return this.#showEdgeLabels;
+    }
+    set showEdgeLabels(value) {
+        this.#showEdgeLabels = value;
+        this.#resizeEls?.forEach((el) => {
+            const label = el.querySelector(".edge-label");
+            if (label) {
+                label.style.display = value ? "" : "none";
+            }
+        });
+    }
+    get edgeLeftLabel() {
+        return this.edgeLabelConverter
+            ? this.edgeLabelConverter(this.leftPercent)
+            : "";
+    }
+    get edgeRightLabel() {
+        return this.edgeLabelConverter
+            ? this.edgeLabelConverter(this.rightPercent)
+            : "";
+    }
+    get leftPercent() {
+        if (!this.#el)
+            return 0;
+        let x = Math.round(parseFloat(this.#el.getAttribute("data-x") ?? "0") || 0);
+        let containerWidth = Math.round(this.#el.parentElement?.offsetWidth ?? 1);
+        const leftPercent = parseFloat((x / containerWidth).toFixed(2));
+        return leftPercent;
+    }
+    get rightPercent() {
+        if (!this.#el)
+            return 0;
+        let x = Math.round(parseFloat(this.#el.getAttribute("data-x") ?? "0") || 0);
+        let width = Math.round(parseFloat(this.#el.getAttribute("data-width") ?? "0") || 0);
+        let containerWidth = Math.round(this.#el.parentElement?.offsetWidth ?? 1);
+        const rightPercent = parseFloat(((x + width) / containerWidth).toFixed(2));
+        return rightPercent;
+    }
+    init(range, edgeLabelConverter) {
+        this.range = range;
+        this.edgeLabelConverter = edgeLabelConverter;
+        this.showEdgeLabels = false;
+        const el = document.createElement("div");
+        el.classList.add("slider");
+        this.#el = el;
+        this.initMoveDragger();
+        this.initResizeDragger();
+        return this;
+    }
+    remove() {
+        if (this.#resizeEls) {
+            this.#resizeEls.forEach((el) => {
+                el.remove();
+            });
+        }
+        if (this.#moveEl) {
+            interact(this.#moveEl).unset();
+            this.#moveEl.remove();
+        }
+        if (this.#el) {
+            interact(this.#el).unset();
+            this.#el.remove();
+        }
+        this.#el = undefined;
+        this.#moveEl = undefined;
+        this.#resizeEls = undefined;
+    }
+    initMoveDragger() {
+        const el = document.createElement("div");
+        el.classList.add("move-dragger");
+        this.#moveEl = el;
+        this.#el?.appendChild(el);
+    }
+    initResizeDragger() {
+        // left resize dragger
+        const leftResizeEl = document.createElement("div");
+        leftResizeEl.classList.add("resize-dragger");
+        leftResizeEl.classList.add("left");
+        const leftLabel = document.createElement("label");
+        leftLabel.classList.add("edge-label");
+        leftLabel.style.display = this.showEdgeLabels ? "" : "none";
+        leftLabel.textContent = this.edgeLeftLabel;
+        leftResizeEl.appendChild(leftLabel);
+        this.#el?.appendChild(leftResizeEl);
+        // right resize dragger
+        const rightResizeEl = document.createElement("div");
+        rightResizeEl.classList.add("resize-dragger");
+        rightResizeEl.classList.add("right");
+        const rightLabel = document.createElement("label");
+        rightLabel.classList.add("edge-label");
+        rightLabel.style.display = this.showEdgeLabels ? "" : "none";
+        rightLabel.textContent = this.edgeRightLabel;
+        rightResizeEl.appendChild(rightLabel);
+        this.#el?.appendChild(rightResizeEl);
+        this.#resizeEls = [leftResizeEl, rightResizeEl];
+    }
+    updateEdgeLabels() {
+        if (!this.#resizeEls)
+            return;
+        const [leftResizeEl, rightResizeEl] = this.#resizeEls;
+        const leftLabel = leftResizeEl.querySelector(".edge-label");
+        const rightLabel = rightResizeEl.querySelector(".edge-label");
+        leftLabel.textContent = this.edgeLeftLabel;
+        rightLabel.textContent = this.edgeRightLabel;
+    }
+    updateByRange(range) {
+        range = range ?? this.range ?? [];
+        const [startPer, endPer] = range;
+        const slider = this.#el;
+        if (slider &&
+            slider.parentElement &&
+            Number.isFinite(startPer) &&
+            Number.isFinite(endPer)) {
+            const sliderContainer = slider.parentElement;
+            const x = sliderContainer.offsetWidth * startPer;
+            const width = sliderContainer.offsetWidth * endPer - x;
+            slider.style.width = width + "px";
+            slider.style.transform = `translateX(${x}px)`;
+            slider.setAttribute("data-x", String(x));
+            slider.setAttribute("data-width", String(width));
+            this.range = [startPer, endPer];
+        }
+    }
+    updateByRectData(rectData) {
+        if (this.el) {
+            this.el.style.width = rectData.width + "px";
+            this.el.style.transform = "translateX(" + rectData.x + "px)";
+            this.el.setAttribute("data-x", String(rectData.x));
+            this.el.setAttribute("data-width", String(rectData.width));
+        }
+        return { leftPercent: this.leftPercent, rightPercent: this.rightPercent };
+    }
+    handleMouseEnter = () => {
+        this.updateEdgeLabels();
+        this.showEdgeLabels = true;
+    };
+    handleMouseLeave = () => {
+        this.showEdgeLabels = false;
+    };
+    onSliderUpdated() {
+        console.log("slider updated:", {
+            leftPercent: this.leftPercent,
+            rightPercent: this.rightPercent,
+        });
+        this.emit("slider:updated", {
+            leftPercent: this.leftPercent,
+            rightPercent: this.rightPercent,
+        });
+    }
+    bindEvents() {
+        if (!this.moveEl)
+            return;
+        const _self = this;
+        interact(this.moveEl).draggable({
+            inertia: true,
+            modifiers: [
+                interact.modifiers.restrictRect({
+                    restriction: ".slider-window",
+                }),
+            ],
+            listeners: {
+                start() {
+                    _self.showEdgeLabels = true;
+                },
+                move(event) {
+                    let target = event.target.parentElement;
+                    let x = parseFloat(target.getAttribute("data-x") ?? "0") + event.dx;
+                    target.style.transform = "translateX(" + x + "px)";
+                    target.setAttribute("data-x", x);
+                    _self.updateEdgeLabels();
+                },
+                end() {
+                    _self.showEdgeLabels = false;
+                    _self.onSliderUpdated.call(_self);
+                },
+            },
+        });
+        if (!this.el)
+            return;
+        this.el.addEventListener("mouseenter", this.handleMouseEnter, false);
+        this.el.addEventListener("mouseleave", this.handleMouseLeave, false);
+        interact(this.el).resizable({
+            modifiers: [
+                interact.modifiers.restrictRect({
+                    restriction: ".slider-window",
+                }),
+            ],
+            edges: { left: true, right: true },
+            listeners: {
+                start() {
+                    _self.showEdgeLabels = true;
+                },
+                move(event) {
+                    let target = event.target;
+                    let x = parseFloat(target.getAttribute("data-x") ?? "0");
+                    target.style.width = event.rect.width + "px";
+                    x += event.deltaRect.left;
+                    target.style.transform = "translateX(" + x + "px)";
+                    target.setAttribute("data-x", String(x));
+                    target.setAttribute("data-width", event.rect.width);
+                    _self.updateEdgeLabels();
+                },
+                end() {
+                    _self.showEdgeLabels = false;
+                    _self.onSliderUpdated.call(_self);
+                },
+            },
+        });
+    }
+    unbindEvents() {
+        if (!this.moveEl)
+            return;
+        this.moveEl && interact(this.moveEl).unset();
+        if (!this.el)
+            return;
+        interact(this.el).unset();
+        this.el.removeEventListener("mouseenter", this.handleMouseEnter, false);
+        this.el.removeEventListener("mouseleave", this.handleMouseLeave, false);
+    }
+}
+export default Slider;

package/dist/zoom-slider/SparkGroup.d.ts

@@ -0,0 +1,16 @@
+export interface Spark {
+    id: string;
+    pos: number[];
+    color: string;
+    class?: string;
+}
+declare class SparkGroup {
+    #private;
+    private containerWidth;
+    get el(): HTMLDivElement | undefined;
+    init(sparks: Spark[], containerWidth: number): this;
+    remove(): void;
+    updateSparks(sparks: Spark[]): void;
+    private calcSparkStyle;
+}
+export default SparkGroup;

package/dist/zoom-slider/SparkGroup.js

@@ -0,0 +1,64 @@
+class SparkGroup {
+    #el;
+    containerWidth = 0;
+    get el() {
+        return this.#el;
+    }
+    init(sparks, containerWidth) {
+        this.containerWidth = containerWidth;
+        const el = document.createElement("div");
+        el.classList.add("spark-group");
+        this.#el = el;
+        this.updateSparks(sparks);
+        return this;
+    }
+    remove() {
+        if (this.#el) {
+            this.#el.remove();
+            this.#el = undefined;
+        }
+    }
+    updateSparks(sparks) {
+        if (!this.#el)
+            return;
+        this.#el.innerHTML = "";
+        // 更新containerWidth，防止窗口resize后spark位置不正确
+        this.containerWidth = this.#el.parentElement?.offsetWidth ?? 0;
+        sparks.forEach((spark) => {
+            const sparkEl = document.createElement("div");
+            sparkEl.classList.add("spark");
+            if (spark.class) {
+                sparkEl.classList.add(spark.class);
+            }
+            const styleObj = this.calcSparkStyle(spark);
+            for (const key of Object.keys(styleObj)) {
+                sparkEl.style[key] = styleObj[key];
+            }
+            this.#el?.appendChild(sparkEl);
+        });
+    }
+    calcSparkStyle(spark) {
+        let x0 = 0;
+        let x1 = 0;
+        const styleObj = {};
+        if (Number.isFinite(spark.pos[0])) {
+            x0 = this.containerWidth * spark.pos[0];
+            if (Number.isFinite(spark.pos[1])) {
+                x1 = this.containerWidth * spark.pos[1];
+                styleObj.borderLeft = "1px solid skyblue";
+                styleObj.borderRight = "1px solid skyblue";
+            }
+            else {
+                styleObj.borderLeft = `1px solid ${spark.color}`;
+                styleObj.borderRight = `1px solid ${spark.color}`;
+            }
+        }
+        return {
+            background: spark.color,
+            transform: `translateX(${x0}px)`,
+            width: `${x1 > 0 ? x1 - x0 : 0}px`,
+            ...styleObj,
+        };
+    }
+}
+export default SparkGroup;

package/dist/zoom-slider/ZoomSlider.d.ts

@@ -0,0 +1,27 @@
+import { type Spark } from "./SparkGroup";
+import { type D3TimelinePlugin, type D3TimelineContext } from "@yiwei016/d3timeline";
+export interface ZoomSliderOptions {
+    range: number[];
+    sparks: Spark[];
+    dateFormat?: (date: Date) => string;
+}
+export declare class ZoomSlider implements D3TimelinePlugin {
+    private readonly container;
+    private readonly options;
+    private context?;
+    private observer?;
+    private sliderWindow?;
+    private slider?;
+    private sparkGroup?;
+    constructor(container: HTMLElement, options: ZoomSliderOptions);
+    install(context: D3TimelineContext): void;
+    uninstall(): void;
+    onResize: () => void;
+    private bindEvents;
+    private unbindEvents;
+    private onSliderUpdated;
+    private handleZoomEnd;
+    private drawSliderWindow;
+    private drawSparks;
+    private drawSlider;
+}

package/dist/zoom-slider/ZoomSlider.js

@@ -0,0 +1,165 @@
+import interact from "interactjs";
+import Slider, {} from "./Slider";
+import SparkGroup, {} from "./SparkGroup";
+import {} from "@yiwei016/d3timeline";
+export class ZoomSlider {
+    container;
+    options;
+    context;
+    observer;
+    sliderWindow;
+    slider;
+    sparkGroup;
+    constructor(container, options) {
+        this.container = container;
+        this.options = options;
+    }
+    install(context) {
+        this.context = context;
+        this.observer = new ResizeObserver((entries) => {
+            const height = entries[0].contentRect.height;
+            if (height > 0) {
+                this.slider?.updateByRange(this.options.range);
+            }
+        });
+        this.drawSliderWindow();
+        this.drawSparks();
+        this.drawSlider();
+        this.bindEvents();
+    }
+    uninstall() {
+        this.observer?.disconnect();
+        this.unbindEvents();
+        this.observer = undefined;
+        this.context = undefined;
+        this.sliderWindow?.remove();
+        this.slider?.remove();
+        this.sparkGroup?.remove();
+        this.slider = undefined;
+        this.sparkGroup = undefined;
+    }
+    onResize = () => {
+        this.slider?.updateByRange();
+        this.sparkGroup?.updateSparks(this.options.sparks);
+    };
+    bindEvents() {
+        if (!this.sliderWindow)
+            return;
+        let _self = this;
+        let isSelecting = false;
+        let startPoint = null;
+        let selectRect = null;
+        let selectRectBg = null;
+        interact(this.sliderWindow).draggable({
+            cursorChecker: () => {
+                return "crosshair";
+            },
+            listeners: {
+                start(event) {
+                    isSelecting = true;
+                    selectRectBg = event.target;
+                    if (!selectRectBg)
+                        return;
+                    const rect = selectRectBg.getBoundingClientRect();
+                    startPoint = {
+                        x: event.clientX - rect.left,
+                        y: 0,
+                    };
+                    // 创建选择框
+                    selectRect = document.createElement("div");
+                    selectRect.className = "select-rect";
+                    selectRect.style.left = startPoint.x + "px";
+                    selectRect.style.top = startPoint.y + "px";
+                    selectRect.style.width = "0px";
+                    selectRect.style.height = "100%";
+                    selectRect.style.position = "absolute";
+                    selectRect.style.zIndex = "1000";
+                    selectRect.style.background = "rgba(0, 102, 204, 0.15)";
+                    selectRect.style.pointerEvents = "none";
+                    selectRectBg.appendChild(selectRect);
+                },
+                move(event) {
+                    if (!isSelecting || !selectRect || !selectRectBg || !startPoint)
+                        return;
+                    const rect = selectRectBg.getBoundingClientRect();
+                    const currentX = event.clientX - rect.left;
+                    const currentY = rect.height;
+                    const x = Math.min(startPoint.x, currentX);
+                    const y = Math.min(startPoint.y, currentY);
+                    const width = Math.abs(currentX - startPoint.x);
+                    const height = Math.abs(currentY - startPoint.y);
+                    selectRect.style.left = x + "px";
+                    selectRect.style.top = y + "px";
+                    selectRect.style.width = width + "px";
+                    selectRect.style.height = height + "px";
+                },
+                end() {
+                    if (!isSelecting)
+                        return;
+                    isSelecting = false;
+                    let rectData = null;
+                    if (selectRect) {
+                        rectData = {
+                            x: parseFloat(selectRect.style.left),
+                            y: parseFloat(selectRect.style.top),
+                            width: parseFloat(selectRect.style.width),
+                            height: parseFloat(selectRect.style.height),
+                        };
+                        const percentData = _self.slider?.updateByRectData(rectData);
+                        selectRect.remove();
+                        selectRect = null;
+                        startPoint = null;
+                        percentData && _self.onSliderUpdated(percentData);
+                    }
+                },
+            },
+        });
+        this.slider?.bindEvents();
+        this.slider?.addListener("slider:updated", this.onSliderUpdated);
+        this.context?.instance.on('zoom.end', this.handleZoomEnd);
+    }
+    unbindEvents() {
+        this.sliderWindow && interact(this.sliderWindow).unset();
+        this.slider?.unbindEvents();
+        this.slider?.removeListener("slider:updated", this.onSliderUpdated);
+        this.context?.instance.off('zoom.end', this.handleZoomEnd);
+    }
+    onSliderUpdated = ({ leftPercent, rightPercent }) => {
+        if (this.context) {
+            const { start, end } = this.context.options.maxTimeRange;
+            const newStart = +start + (+end - +start) * leftPercent;
+            const newEnd = +start + (+end - +start) * rightPercent;
+            this.context.instance.setTimeRange(new Date(newStart), new Date(newEnd));
+        }
+    };
+    handleZoomEnd = ({ timeRange }) => {
+        if (!this.context)
+            return;
+        const { start, end } = timeRange;
+        const { start: maxStart, end: maxEnd } = this.context.options.maxTimeRange;
+        const startPos = (+start - +maxStart) / (+maxEnd - +maxStart);
+        const endPos = (+end - +maxStart) / (+maxEnd - +maxStart);
+        this.slider?.updateByRange([startPos, endPos]);
+    };
+    drawSliderWindow() {
+        this.sliderWindow = document.createElement("div");
+        this.sliderWindow.classList.add("slider-window");
+        this.container.appendChild(this.sliderWindow);
+    }
+    drawSparks() {
+        this.sparkGroup = new SparkGroup().init(this.options.sparks, this.sliderWindow?.offsetWidth ?? 0);
+        this.sparkGroup?.el && this.sliderWindow?.appendChild(this.sparkGroup.el);
+    }
+    drawSlider() {
+        const edgeLabelConverter = (pos) => {
+            if (!this.context)
+                return "";
+            const { start, end } = this.context.options.maxTimeRange;
+            const time = +start + (+end - +start) * pos;
+            return this.options.dateFormat ? this.options.dateFormat(new Date(time)) : new Date(time).toLocaleString();
+        };
+        this.slider = new Slider().init(this.options.range, edgeLabelConverter);
+        this.slider?.el && this.sliderWindow?.appendChild(this.slider.el);
+        this.slider?.updateByRange();
+    }
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@yiwei016/d3timeline-plugins",
+  "version": "1.0.0",
+  "description": "D3Timeline plugins",
+  "repository": "https://github.com/ElvisWangTech/d3timeline-plugins.git",
+  "author": "Elvis Wang <yiwei016@163.com>",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./ZoomSlider.css": "./src/zoom-slider/ZoomSlider.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc"
+  },
+  "devDependencies": {
+    "@types/node": "25.2.3",
+    "typescript": "~5.9.3"
+  },
+  "dependencies": {
+    "@yiwei016/d3timeline": "../D3Timeline",
+    "eventemitter3": "5.0.4",
+    "interactjs": "1.10.27"
+  },
+  "peerDependencies": {
+    "@yiwei016/d3timeline": "../D3Timeline"
+  }
+}