@visactor/vrender-components 0.0.38-brush.2-alpha.0

package/cjs/data-zoom/config.d.ts

@@ -0,0 +1,104 @@
+export declare enum DataZoomActiveTag {
+    startHandler = "startHandler",
+    endHandler = "endHandler",
+    middleHandler = "middleHandler",
+    background = "background"
+}
+export declare const DEFAULT_DATA_ZOOM_ATTRIBUTES: {
+    orient: string;
+    showDetail: string;
+    brushSelect: boolean;
+    backgroundStyle: {
+        fill: boolean;
+        fillColor: string;
+        strokeColor: string;
+        lineWidth: number;
+        borderRadius: number;
+    };
+    dragMaskStyle: {
+        fill: boolean;
+        fillColor: string;
+        fillOpacity: number;
+    };
+    backgroundChartStyle: {
+        area: {
+            visible: boolean;
+            strokeColor: string;
+            lineWidth: number;
+            fillColor: string;
+            fill: boolean;
+        };
+        line: {
+            visible: boolean;
+            strokeColor: string;
+            lineWidth: number;
+        };
+    };
+    selectedBackgroundStyle: {
+        fill: boolean;
+        fillColor: string;
+        fillOpacity: number;
+    };
+    selectedBackgroundChartStyle: {
+        area: {
+            visible: boolean;
+            strokeColor: string;
+            lineWidth: number;
+            fillColor: string;
+            fill: boolean;
+        };
+        line: {
+            visible: boolean;
+            strokeColor: string;
+            lineWidth: number;
+        };
+    };
+    middleHandlerStyle: {
+        visible: boolean;
+        background: {
+            size: number;
+            style: {
+                fill: boolean;
+                fillColor: string;
+                strokeColor: string;
+                borderRadius: number;
+            };
+        };
+        icon: {
+            size: number;
+            fill: boolean;
+            fillColor: string;
+            strokeColor: string;
+            symbolType: string;
+            lineWidth: number;
+        };
+    };
+    startHandlerStyle: {
+        symbolType: string;
+        fill: boolean;
+        fillColor: string;
+        strokeColor: string;
+        lineWidth: number;
+    };
+    endHandlerStyle: {
+        symbolType: string;
+        fill: boolean;
+        fillColor: string;
+        strokeColor: string;
+        lineWidth: number;
+    };
+    startTextStyle: {
+        padding: number;
+        textStyle: {
+            fontSize: number;
+            fill: string;
+        };
+    };
+    endTextStyle: {
+        padding: number;
+        textStyle: {
+            fontSize: number;
+            fill: string;
+        };
+    };
+};

package/cjs/data-zoom/config.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var DataZoomActiveTag;
+
+Object.defineProperty(exports, "__esModule", {
+    value: !0
+}), exports.DEFAULT_DATA_ZOOM_ATTRIBUTES = exports.DataZoomActiveTag = void 0, function(DataZoomActiveTag) {
+    DataZoomActiveTag.startHandler = "startHandler", DataZoomActiveTag.endHandler = "endHandler", 
+    DataZoomActiveTag.middleHandler = "middleHandler", DataZoomActiveTag.background = "background";
+}(DataZoomActiveTag = exports.DataZoomActiveTag || (exports.DataZoomActiveTag = {})), 
+exports.DEFAULT_DATA_ZOOM_ATTRIBUTES = {
+    orient: "bottom",
+    showDetail: "auto",
+    brushSelect: !0,
+    backgroundStyle: {
+        fill: !0,
+        fillColor: "white",
+        strokeColor: "#D1DBEE",
+        lineWidth: 1,
+        borderRadius: 2
+    },
+    dragMaskStyle: {
+        fill: !0,
+        fillColor: "#B0C8F9",
+        fillOpacity: .2
+    },
+    backgroundChartStyle: {
+        area: {
+            visible: !0,
+            strokeColor: "#D1DBEE",
+            lineWidth: 1,
+            fillColor: "#F6F8FC",
+            fill: !0
+        },
+        line: {
+            visible: !0,
+            strokeColor: "#D1DBEE",
+            lineWidth: 1
+        }
+    },
+    selectedBackgroundStyle: {
+        fill: !0,
+        fillColor: "#B0C8F9",
+        fillOpacity: .5
+    },
+    selectedBackgroundChartStyle: {
+        area: {
+            visible: !0,
+            strokeColor: "#B0C8F9",
+            lineWidth: 1,
+            fillColor: "#fbb934",
+            fill: !0
+        },
+        line: {
+            visible: !0,
+            strokeColor: "#fbb934",
+            lineWidth: 1
+        }
+    },
+    middleHandlerStyle: {
+        visible: !1,
+        background: {
+            size: 8,
+            style: {
+                fill: !0,
+                fillColor: "white",
+                strokeColor: "#B0C8F9",
+                borderRadius: 2
+            }
+        },
+        icon: {
+            size: 6,
+            fill: !0,
+            fillColor: "white",
+            strokeColor: "#B0C8F9",
+            symbolType: "M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z",
+            lineWidth: .5
+        }
+    },
+    startHandlerStyle: {
+        symbolType: "M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z",
+        fill: !0,
+        fillColor: "white",
+        strokeColor: "#B0C8F9",
+        lineWidth: .5
+    },
+    endHandlerStyle: {
+        symbolType: "M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z",
+        fill: !0,
+        fillColor: "white",
+        strokeColor: "#B0C8F9",
+        lineWidth: .5
+    },
+    startTextStyle: {
+        padding: 4,
+        textStyle: {
+            fontSize: 10,
+            fill: "#6F6F6F"
+        }
+    },
+    endTextStyle: {
+        padding: 4,
+        textStyle: {
+            fontSize: 10,
+            fill: "#6F6F6F"
+        }
+    }
+};
+//# sourceMappingURL=config.js.map

package/cjs/data-zoom/config.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/data-zoom/config.ts"],"names":[],"mappings":";;;AAAA,IAAY,iBAKX;AALD,WAAY,iBAAiB;IAC3B,kDAA6B,CAAA;IAC7B,8CAAyB,CAAA;IACzB,oDAA+B,CAAA;IAC/B,8CAAyB,CAAA;AAC3B,CAAC,EALW,iBAAiB,GAAjB,yBAAiB,KAAjB,yBAAiB,QAK5B;AACY,QAAA,4BAA4B,GAAG;IAC1C,MAAM,EAAE,QAAQ;IAChB,UAAU,EAAE,MAAM;IAClB,WAAW,EAAE,IAAI;IACjB,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,OAAO;QAClB,WAAW,EAAE,SAAS;QACtB,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KAChB;IACD,aAAa,EAAE;QACb,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,GAAG;KACjB;IACD,oBAAoB,EAAE;QACpB,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,WAAW,EAAE,SAAS;YACtB,SAAS,EAAE,CAAC;YACZ,SAAS,EAAE,SAAS;YACpB,IAAI,EAAE,IAAI;SACX;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,WAAW,EAAE,SAAS;YACtB,SAAS,EAAE,CAAC;SACb;KACF;IACD,uBAAuB,EAAE;QACvB,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,SAAS;QACpB,WAAW,EAAE,GAAG;KACjB;IACD,4BAA4B,EAAE;QAC5B,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,WAAW,EAAE,SAAS;YACtB,SAAS,EAAE,CAAC;YACZ,SAAS,EAAE,SAAS;YACpB,IAAI,EAAE,IAAI;SACX;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,IAAI;YACb,WAAW,EAAE,SAAS;YACtB,SAAS,EAAE,CAAC;SACb;KACF;IACD,kBAAkB,EAAE;QAClB,OAAO,EAAE,KAAK;QACd,UAAU,EAAE;YACV,IAAI,EAAE,CAAC;YACP,KAAK,EAAE;gBACL,IAAI,EAAE,IAAI;gBACV,SAAS,EAAE,OAAO;gBAClB,WAAW,EAAE,SAAS;gBACtB,YAAY,EAAE,CAAC;aAChB;SACF;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,IAAI;YACV,SAAS,EAAE,OAAO;YAClB,WAAW,EAAE,SAAS;YACtB,UAAU,EAER,8PAA8P;YAChQ,SAAS,EAAE,GAAG;SACf;KACF;IACD,iBAAiB,EAAE;QACjB,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,OAAO;QAClB,WAAW,EAAE,SAAS;QACtB,SAAS,EAAE,GAAG;KACf;IACD,eAAe,EAAE;QACf,UAAU,EAER,yiBAAyiB;QAE3iB,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,OAAO;QAClB,WAAW,EAAE,SAAS;QACtB,SAAS,EAAE,GAAG;KACf;IACD,cAAc,EAAE;QACd,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;IACD,YAAY,EAAE;QACZ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE;YACT,QAAQ,EAAE,EAAE;YACZ,IAAI,EAAE,SAAS;SAChB;KACF;CACF,CAAC","file":"config.js","sourcesContent":["export enum DataZoomActiveTag {\n  startHandler = 'startHandler',\n  endHandler = 'endHandler',\n  middleHandler = 'middleHandler',\n  background = 'background'\n}\nexport const DEFAULT_DATA_ZOOM_ATTRIBUTES = {\n  orient: 'bottom',\n  showDetail: 'auto',\n  brushSelect: true,\n  backgroundStyle: {\n    fill: true,\n    fillColor: 'white',\n    strokeColor: '#D1DBEE',\n    lineWidth: 1,\n    borderRadius: 2\n  },\n  dragMaskStyle: {\n    fill: true,\n    fillColor: '#B0C8F9',\n    fillOpacity: 0.2\n  },\n  backgroundChartStyle: {\n    area: {\n      visible: true,\n      strokeColor: '#D1DBEE',\n      lineWidth: 1,\n      fillColor: '#F6F8FC',\n      fill: true\n    },\n    line: {\n      visible: true,\n      strokeColor: '#D1DBEE',\n      lineWidth: 1\n    }\n  },\n  selectedBackgroundStyle: {\n    fill: true,\n    fillColor: '#B0C8F9',\n    fillOpacity: 0.5\n  },\n  selectedBackgroundChartStyle: {\n    area: {\n      visible: true,\n      strokeColor: '#B0C8F9',\n      lineWidth: 1,\n      fillColor: '#fbb934',\n      fill: true\n    },\n    line: {\n      visible: true,\n      strokeColor: '#fbb934',\n      lineWidth: 1\n    }\n  },\n  middleHandlerStyle: {\n    visible: false,\n    background: {\n      size: 8,\n      style: {\n        fill: true,\n        fillColor: 'white',\n        strokeColor: '#B0C8F9',\n        borderRadius: 2\n      }\n    },\n    icon: {\n      size: 6,\n      fill: true,\n      fillColor: 'white',\n      strokeColor: '#B0C8F9',\n      symbolType:\n        // eslint-disable-next-line max-len\n        'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',\n      lineWidth: 0.5\n    }\n  },\n  startHandlerStyle: {\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: true,\n    fillColor: 'white',\n    strokeColor: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  endHandlerStyle: {\n    symbolType:\n      // eslint-disable-next-line max-len\n      'M -0.0544 0.25 C -0.0742 0.25 -0.0901 0.234 -0.0901 0.2143 L -0.0901 -0.1786 C -0.0901 -0.1983 -0.0742 -0.2143 -0.0544 -0.2143 L -0.0187 -0.2143 L -0.0187 -0.5 L 0.017 -0.5 L 0.017 -0.2143 L 0.0527 -0.2143 C 0.0724 -0.2143 0.0884 -0.1983 0.0884 -0.1786 L 0.0884 0.2143 C 0.0884 0.234 0.0724 0.25 0.0527 0.25 L 0.017 0.25 L 0.017 0.5 L -0.0187 0.5 L -0.0187 0.25 L -0.0544 0.25 Z M -0.0187 -0.1429 L -0.0544 -0.1429 L -0.0544 0.1786 L -0.0187 0.1786 L -0.0187 -0.1429 Z M 0.0527 -0.1429 L 0.017 -0.1429 L 0.017 0.1786 L 0.0527 0.1786 L 0.0527 -0.1429 Z',\n    // size: 40,\n    fill: true,\n    fillColor: 'white',\n    strokeColor: '#B0C8F9',\n    lineWidth: 0.5\n  },\n  startTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  },\n  endTextStyle: {\n    padding: 4,\n    textStyle: {\n      fontSize: 10,\n      fill: '#6F6F6F'\n    }\n  }\n};\n"]}

package/cjs/data-zoom/data-zoom.d.ts

@@ -0,0 +1,193 @@
+import { FederatedPointerEvent, IGroup } from '@visactor/vrender';
+import { IPointLike } from '@visactor/vutils';
+import { AbstractComponent } from '../core/base';
+import { Tag, TagAttributes } from '../tag';
+import { DataZoomAttributes } from './type';
+export declare class DataZoom extends AbstractComponent<Required<DataZoomAttributes>> {
+    name: string;
+    static defaultAttributes: {
+        orient: string;
+        showDetail: string;
+        brushSelect: boolean;
+        backgroundStyle: {
+            fill: boolean;
+            fillColor: string;
+            strokeColor: string;
+            lineWidth: number;
+            borderRadius: number;
+        };
+        dragMaskStyle: {
+            fill: boolean;
+            fillColor: string;
+            fillOpacity: number;
+        };
+        backgroundChartStyle: {
+            area: {
+                visible: boolean;
+                strokeColor: string;
+                lineWidth: number;
+                fillColor: string;
+                fill: boolean;
+            };
+            line: {
+                visible: boolean;
+                strokeColor: string;
+                lineWidth: number;
+            };
+        };
+        selectedBackgroundStyle: {
+            fill: boolean;
+            fillColor: string;
+            fillOpacity: number;
+        };
+        selectedBackgroundChartStyle: {
+            area: {
+                visible: boolean;
+                strokeColor: string;
+                lineWidth: number;
+                fillColor: string;
+                fill: boolean;
+            };
+            line: {
+                visible: boolean;
+                strokeColor: string;
+                lineWidth: number;
+            };
+        };
+        middleHandlerStyle: {
+            visible: boolean;
+            background: {
+                size: number;
+                style: {
+                    fill: boolean;
+                    fillColor: string;
+                    strokeColor: string;
+                    borderRadius: number;
+                };
+            };
+            icon: {
+                size: number;
+                fill: boolean;
+                fillColor: string;
+                strokeColor: string;
+                symbolType: string;
+                lineWidth: number;
+            };
+        };
+        startHandlerStyle: {
+            symbolType: string;
+            fill: boolean;
+            fillColor: string;
+            strokeColor: string;
+            lineWidth: number;
+        };
+        endHandlerStyle: {
+            symbolType: string;
+            fill: boolean;
+            fillColor: string;
+            strokeColor: string;
+            lineWidth: number;
+        };
+        startTextStyle: {
+            padding: number;
+            textStyle: {
+                fontSize: number;
+                fill: string;
+            };
+        };
+        endTextStyle: {
+            padding: number;
+            textStyle: {
+                fontSize: number;
+                fill: string;
+            };
+        };
+    };
+    private _isHorizontal;
+    private _background;
+    private _container;
+    private _startHandler;
+    private _middleHandlerSymbol;
+    private _middleHandlerRect;
+    private _endHandler;
+    private _selectedBackground;
+    private _dragMask;
+    private _startText;
+    private _endText;
+    private _startValue;
+    private _endValue;
+    private _showText;
+    private _previewData;
+    private _previewGroup;
+    private _previewLine;
+    private _previewArea;
+    private _selectedPreviewGroupClip;
+    private _selectedPreviewGroup;
+    private _selectedPreviewLine;
+    private _selectedPreviewArea;
+    protected _activeTag: string;
+    protected _activeItem: any;
+    protected _activeState: boolean;
+    protected _activeCache: {
+        startPos: IPointLike;
+        lastPos: IPointLike;
+    };
+    protected _layoutCache: {
+        attPos: 'x' | 'y';
+        attSize: 'width' | 'height';
+        max: number;
+    };
+    readonly state: {
+        start: number;
+        end: number;
+    };
+    private _previewCallbackX;
+    private _previewCallbackY;
+    private _previewCallbackX1;
+    private _previewCallbackY1;
+    private _updateStateCallback;
+    private _statePointToData;
+    constructor(attributes: DataZoomAttributes);
+    protected bindEvents(): void;
+    protected dragMaskSize(): number;
+    protected eventPosToStagePos(e: FederatedPointerEvent): {
+        x: number;
+        y: number;
+    };
+    private _onHandlerPointerDown;
+    private _onHandlerPointerMove;
+    private _onHandlerPointerUp;
+    private _onHandlerPointerEnter;
+    private _onHandlerPointerLeave;
+    protected backgroundDragZoom(startPos: IPointLike, endPos: IPointLike): void;
+    protected moveZoomWithMiddle(middle: number): void;
+    protected renderDragMask(): void;
+    protected renderText(): void;
+    protected getLayoutAttrFromConfig(): {
+        position: IPointLike;
+        width: number;
+        height: number;
+    };
+    protected render(): void;
+    computeBasePoints(): {
+        basePointStart: any;
+        basePointEnd: any;
+    };
+    protected getPreviewLinePoints(): any;
+    protected getPreviewAreaPoints(): any;
+    protected setPreviewAttributes(type: 'line' | 'area', group: IGroup): void;
+    protected setSelectedPreviewAttributes(type: 'area' | 'line', group: IGroup): void;
+    protected maybeAddLabel(container: IGroup, attributes: TagAttributes, name: string): Tag;
+    setStartAndEnd(start?: number, end?: number): void;
+    setPreviewData(data: any[]): void;
+    setText(text: string, tag: 'start' | 'end'): void;
+    getStartValue(): string | number;
+    getEndTextValue(): string | number;
+    getMiddleHandlerSize(): number;
+    setUpdateStateCallback(callback: (start: number, end: number) => void): void;
+    setPreviewCallbackX(callback: (d: any) => number): void;
+    setPreviewCallbackY(callback: (d: any) => number): void;
+    setPreviewCallbackX1(callback: (d: any) => number): void;
+    setPreviewCallbackY1(callback: (d: any) => number): void;
+    setStatePointToData(callback: (state: number) => any): void;
+}