UNPKG

@antv/g6

Version:

A Graph Visualization Framework in JavaScript

262 lines 9.33 kB
"use strict"; var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.Timebar = void 0; const component_1 = require("@antv/component"); const util_1 = require("@antv/util"); const id_1 = require("../utils/id"); const padding_1 = require("../utils/padding"); const base_plugin_1 = require("./base-plugin"); const canvas_1 = require("./utils/canvas"); const prospectiveTimeKeys = ['timestamp', 'time', 'date', 'datetime']; /** * <zh/> 时间组件 * * <en/> Timebar */ class Timebar extends base_plugin_1.BasePlugin { get padding() { return (0, padding_1.parsePadding)(this.options.padding); } constructor(context, options) { super(context, Object.assign({}, Timebar.defaultOptions, options)); this.backup(); this.upsertTimebar(); } /** * <zh/> 播放 * * <en/> Play */ play() { var _a; (_a = this.timebar) === null || _a === void 0 ? void 0 : _a.play(); } /** * <zh/> 暂停 * * <en/> Pause */ pause() { var _a; (_a = this.timebar) === null || _a === void 0 ? void 0 : _a.pause(); } /** * <zh/> 前进 * * <en/> Forward */ forward() { var _a; (_a = this.timebar) === null || _a === void 0 ? void 0 : _a.forward(); } /** * <zh/> 后退 * * <en/> Backward */ backward() { var _a; (_a = this.timebar) === null || _a === void 0 ? void 0 : _a.backward(); } /** * <zh/> 重置 * * <en/> Reset */ reset() { var _a; (_a = this.timebar) === null || _a === void 0 ? void 0 : _a.reset(); } /** * <zh/> 更新时间条配置项 * * <en/> Update timebar configuration options * @param options - <zh/> 配置项 | <en/> Options * @internal */ update(options) { super.update(options); this.backup(); this.upsertTimebar(); } /** * <zh/> 备份数据 * * <en/> Backup data */ backup() { this.originalData = shallowCopy(this.context.graph.getData()); } upsertTimebar() { const { canvas } = this.context; const _a = this.options, { onChange, timebarType, data, x, y, width, height, mode } = _a, restOptions = __rest(_a, ["onChange", "timebarType", "data", "x", "y", "width", "height", "mode"]); const canvasSize = canvas.getSize(); const [top] = this.padding; this.upsertCanvas().ready.then(() => { var _a; const style = Object.assign(Object.assign({ x: canvasSize[0] / 2 - width / 2, y: top, onChange: (value) => { const range = ((0, util_1.isArray)(value) ? value : [value, value]).map((time) => (0, util_1.isDate)(time) ? time.getTime() : time); if (this.options.mode === 'modify') this.filterElements(range); else this.hiddenElements(range); onChange === null || onChange === void 0 ? void 0 : onChange(range); } }, restOptions), { data: data.map((datum) => ((0, util_1.isNumber)(datum) ? { time: datum, value: 0 } : datum)), width, height, type: timebarType }); if (!this.timebar) { this.timebar = new component_1.Timebar({ style }); (_a = this.canvas) === null || _a === void 0 ? void 0 : _a.appendChild(this.timebar); } else { this.timebar.update(style); } }); } upsertCanvas() { if (this.canvas) return this.canvas; const { className, height, position } = this.options; const graphCanvas = this.context.canvas; const [width] = graphCanvas.getSize(); const [top, , bottom] = this.padding; const [$container, canvas] = (0, canvas_1.createPluginCanvas)({ width, height: height + top + bottom, graphCanvas, className: 'timebar', placement: position, }); this.container = $container; if (className) $container.classList.add(className); this.canvas = canvas; return this.canvas; } filterElements(range) { return __awaiter(this, void 0, void 0, function* () { var _a; if (!this.originalData) return; const { elementTypes, getTime } = this.options; const { graph, element } = this.context; const newData = shallowCopy(this.originalData); elementTypes.forEach((type) => { const key = `${type}s`; newData[key] = (this.originalData[key] || []).filter((datum) => { const time = getTime(datum); if (match(time, range)) return true; return false; }); }); const nodeLikeIds = [...newData.nodes, ...newData.combos].map((datum) => (0, id_1.idOf)(datum)); newData.edges = newData.edges.filter((edge) => { const source = edge.source; const target = edge.target; return nodeLikeIds.includes(source) && nodeLikeIds.includes(target); }); graph.setData(newData); yield ((_a = element.draw({ animation: false, silence: true })) === null || _a === void 0 ? void 0 : _a.finished); }); } hiddenElements(range) { const { graph } = this.context; const { elementTypes, getTime } = this.options; const hideElementId = []; const showElementId = []; elementTypes.forEach((elementType) => { var _a; const key = `${elementType}s`; const elementData = ((_a = this.originalData) === null || _a === void 0 ? void 0 : _a[key]) || []; elementData.forEach((elementDatum) => { const id = (0, id_1.idOf)(elementDatum); const time = getTime(elementDatum); if (match(time, range)) showElementId.push(id); else hideElementId.push(id); }); }); graph.hideElement(hideElementId, false); graph.showElement(showElementId, false); } /** * <zh/> 销毁时间条 * * <en/> Destroy the timebar * @internal */ destroy() { var _a, _b, _c; const { graph } = this.context; this.originalData && graph.setData(Object.assign({}, this.originalData)); (_a = this.timebar) === null || _a === void 0 ? void 0 : _a.destroy(); (_b = this.canvas) === null || _b === void 0 ? void 0 : _b.destroy(); (_c = this.container) === null || _c === void 0 ? void 0 : _c.remove(); this.originalData = undefined; this.container = undefined; this.timebar = undefined; this.canvas = undefined; super.destroy(); } } exports.Timebar = Timebar; Timebar.defaultOptions = { position: 'bottom', enable: true, timebarType: 'time', className: 'g6-timebar', width: 450, height: 60, zIndex: 3, elementTypes: ['node'], padding: 10, mode: 'modify', getTime: (datum) => inferTime(datum, prospectiveTimeKeys, undefined), loop: false, }; const shallowCopy = (data) => { const { nodes = [], edges = [], combos = [] } = data; return { nodes: [...nodes], edges: [...edges], combos: [...combos], }; }; const match = (time, range) => { if ((0, util_1.isNumber)(range)) return time === range; const [start, end] = range; return time >= start && time <= end; }; const inferTime = (datum, optionsKeys, defaultValue) => { var _a; for (let i = 0; i < optionsKeys.length; i++) { const key = optionsKeys[i]; const val = (_a = datum.data) === null || _a === void 0 ? void 0 : _a[key]; if (val) return val; } return defaultValue; }; //# sourceMappingURL=timebar.js.map