You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
4.7 KiB
121 lines
4.7 KiB
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.GridLine = void 0;
|
|
const util_1 = require("@antv/util");
|
|
const constants_1 = require("../constants");
|
|
const vector_1 = require("../utils/vector");
|
|
const base_plugin_1 = require("./base-plugin");
|
|
const dom_1 = require("./utils/dom");
|
|
/**
|
|
* <zh/> 网格线
|
|
*
|
|
* <en/> Grid line
|
|
* @remarks
|
|
* <zh/> 网格线插件，多用于辅助绘图
|
|
*
|
|
* <en/> Grid line plugin, often used to auxiliary drawing
|
|
*/
|
|
class GridLine extends base_plugin_1.BasePlugin {
|
|
constructor(context, options) {
|
|
super(context, Object.assign({}, GridLine.defaultOptions, options));
|
|
this.$element = (0, dom_1.createPluginContainer)('grid-line', true);
|
|
this.offset = [0, 0];
|
|
this.currentScale = 1;
|
|
this.followZoom = (event) => {
|
|
const { data: { scale, origin }, } = event;
|
|
if (!scale || (origin === undefined && this.context.viewport === undefined))
|
|
return;
|
|
const prevScale = this.currentScale;
|
|
this.currentScale = scale;
|
|
const deltaScale = scale / prevScale;
|
|
const positionOffset = (0, vector_1.multiply)(origin || this.context.graph.getCanvasCenter(), 1 - deltaScale);
|
|
const scaledSize = this.baseSize * scale;
|
|
const scaledOffset = (0, vector_1.multiply)(this.offset, deltaScale);
|
|
const modulatedOffset = (0, vector_1.mod)(scaledOffset, scaledSize);
|
|
const newOffset = (0, vector_1.add)(modulatedOffset, positionOffset);
|
|
this.$element.style.backgroundSize = `${scaledSize}px ${scaledSize}px`;
|
|
this.$element.style.backgroundPosition = `${newOffset[0]}px ${newOffset[1]}px`;
|
|
this.offset = (0, vector_1.mod)(newOffset, scaledSize);
|
|
};
|
|
this.followTranslate = (event) => {
|
|
if (!this.options.follow)
|
|
return;
|
|
const { data: { translate }, } = event;
|
|
if (translate)
|
|
this.updateOffset(translate);
|
|
};
|
|
this.onTransform = (event) => {
|
|
const follow = this.parseFollow(this.options.follow);
|
|
if (follow.zoom)
|
|
this.followZoom(event);
|
|
if (follow.translate)
|
|
this.followTranslate(event);
|
|
};
|
|
const $container = this.context.canvas.getContainer();
|
|
$container.prepend(this.$element);
|
|
this.baseSize = this.options.size;
|
|
this.updateStyle();
|
|
this.bindEvents();
|
|
}
|
|
/**
|
|
* <zh/> 更新网格线配置
|
|
*
|
|
* <en/> Update the configuration of the grid line
|
|
* @param options - <zh/> 配置项 | <en/> options
|
|
* @internal
|
|
*/
|
|
update(options) {
|
|
super.update(options);
|
|
if (options.size !== undefined) {
|
|
this.baseSize = options.size;
|
|
}
|
|
this.updateStyle();
|
|
}
|
|
bindEvents() {
|
|
const { graph } = this.context;
|
|
graph.on(constants_1.GraphEvent.AFTER_TRANSFORM, this.onTransform);
|
|
}
|
|
updateStyle() {
|
|
const { stroke, lineWidth, border, borderLineWidth, borderStroke, borderStyle } = this.options;
|
|
const scaledSize = this.baseSize * this.currentScale;
|
|
Object.assign(this.$element.style, {
|
|
border: border ? `${borderLineWidth}px ${borderStyle} ${borderStroke}` : 'none',
|
|
backgroundImage: `linear-gradient(${stroke} ${lineWidth}px, transparent ${lineWidth}px), linear-gradient(90deg, ${stroke} ${lineWidth}px, transparent ${lineWidth}px)`,
|
|
backgroundSize: `${scaledSize}px ${scaledSize}px`,
|
|
backgroundRepeat: 'repeat',
|
|
});
|
|
}
|
|
updateOffset(delta) {
|
|
const scaledSize = this.baseSize * this.currentScale;
|
|
this.offset = (0, vector_1.mod)((0, vector_1.add)(this.offset, delta), scaledSize);
|
|
this.$element.style.backgroundPosition = `${this.offset[0]}px ${this.offset[1]}px`;
|
|
}
|
|
parseFollow(follow) {
|
|
var _a, _b;
|
|
return (0, util_1.isBoolean)(follow)
|
|
? { translate: follow, zoom: follow }
|
|
: { translate: (_a = follow === null || follow === void 0 ? void 0 : follow.translate) !== null && _a !== void 0 ? _a : false, zoom: (_b = follow === null || follow === void 0 ? void 0 : follow.zoom) !== null && _b !== void 0 ? _b : false };
|
|
}
|
|
/**
|
|
* <zh/> 销毁网格线
|
|
*
|
|
* <en/> Destroy the grid line
|
|
* @internal
|
|
*/
|
|
destroy() {
|
|
this.context.graph.off(constants_1.GraphEvent.AFTER_TRANSFORM, this.onTransform);
|
|
this.$element.remove();
|
|
super.destroy();
|
|
}
|
|
}
|
|
exports.GridLine = GridLine;
|
|
GridLine.defaultOptions = {
|
|
border: true,
|
|
borderLineWidth: 1,
|
|
borderStroke: '#eee',
|
|
borderStyle: 'solid',
|
|
lineWidth: 1,
|
|
size: 20,
|
|
stroke: '#eee',
|
|
};
|
|
//# sourceMappingURL=grid-line.js.map
|