0a5f6a8047
- Go backend (server/)
- Frontend (web/, server/static/)
- Database and deployment files
- Scripts and docs
Co-Authored-By: 狸花猫/Claude-Qwen3.6-Plus 🐾
97 lines
3.6 KiB
JavaScript
97 lines
3.6 KiB
JavaScript
"use strict";
|
||
Object.defineProperty(exports, "__esModule", { value: true });
|
||
var tslib_1 = require("tslib");
|
||
var g_base_1 = require("@antv/g-base");
|
||
var constant_1 = require("./constant");
|
||
var draw_1 = require("./util/draw");
|
||
var svg_1 = require("./util/svg");
|
||
var dom_1 = require("./util/dom");
|
||
var Shape = require("./shape");
|
||
var group_1 = require("./group");
|
||
var defs_1 = require("./defs");
|
||
var Canvas = /** @class */ (function (_super) {
|
||
tslib_1.__extends(Canvas, _super);
|
||
function Canvas(cfg) {
|
||
return _super.call(this, tslib_1.__assign(tslib_1.__assign({}, cfg), { autoDraw: true,
|
||
// 设置渲染引擎为 canvas，只读属性
|
||
renderer: 'svg' })) || this;
|
||
}
|
||
Canvas.prototype.getShapeBase = function () {
|
||
return Shape;
|
||
};
|
||
Canvas.prototype.getGroupBase = function () {
|
||
return group_1.default;
|
||
};
|
||
// 覆盖 Container 中通过遍历的方式获取 shape 对象的逻辑，直接走 SVG 的 dom 拾取即可
|
||
Canvas.prototype.getShape = function (x, y, ev) {
|
||
var target = ev.target || ev.srcElement;
|
||
if (!constant_1.SHAPE_TO_TAGS[target.tagName]) {
|
||
var parent_1 = target.parentNode;
|
||
while (parent_1 && !constant_1.SHAPE_TO_TAGS[parent_1.tagName]) {
|
||
parent_1 = parent_1.parentNode;
|
||
}
|
||
target = parent_1;
|
||
}
|
||
return this.find(function (child) { return child.get('el') === target; });
|
||
};
|
||
// 复写基类的方法生成标签
|
||
Canvas.prototype.createDom = function () {
|
||
var element = dom_1.createSVGElement('svg');
|
||
var context = new defs_1.default(element);
|
||
element.setAttribute('width', "" + this.get('width'));
|
||
element.setAttribute('height', "" + this.get('height'));
|
||
// 缓存 context 对象
|
||
this.set('context', context);
|
||
return element;
|
||
};
|
||
/**
|
||
* 一些方法调用会引起画布变化
|
||
* @param {ChangeType} changeType 改变的类型
|
||
*/
|
||
Canvas.prototype.onCanvasChange = function (changeType) {
|
||
var context = this.get('context');
|
||
var el = this.get('el');
|
||
if (changeType === 'sort') {
|
||
var children_1 = this.get('children');
|
||
if (children_1 && children_1.length) {
|
||
dom_1.sortDom(this, function (a, b) {
|
||
return children_1.indexOf(a) - children_1.indexOf(b) ? 1 : 0;
|
||
});
|
||
}
|
||
}
|
||
else if (changeType === 'clear') {
|
||
// el maybe null for canvas
|
||
if (el) {
|
||
// 清空 SVG 元素
|
||
el.innerHTML = '';
|
||
var defsEl = context.el;
|
||
// 清空 defs 元素
|
||
defsEl.innerHTML = '';
|
||
// 将清空后的 defs 元素挂载到 el 下
|
||
el.appendChild(defsEl);
|
||
}
|
||
}
|
||
else if (changeType === 'matrix') {
|
||
svg_1.setTransform(this);
|
||
}
|
||
else if (changeType === 'clip') {
|
||
svg_1.setClip(this, context);
|
||
}
|
||
else if (changeType === 'changeSize') {
|
||
el.setAttribute('width', "" + this.get('width'));
|
||
el.setAttribute('height', "" + this.get('height'));
|
||
}
|
||
};
|
||
// 复写基类的 draw 方法
|
||
Canvas.prototype.draw = function () {
|
||
var context = this.get('context');
|
||
var children = this.getChildren();
|
||
svg_1.setClip(this, context);
|
||
if (children.length) {
|
||
draw_1.drawChildren(context, children);
|
||
}
|
||
};
|
||
return Canvas;
|
||
}(g_base_1.AbstractCanvas));
|
||
exports.default = Canvas;
|
||
//# sourceMappingURL=canvas.js.map
|