@antv/x6
Version:
JavaScript diagramming library that uses SVG and HTML for rendering.
158 lines • 5.27 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Cylinder = void 0;
var util_1 = require("../../util");
var util_2 = require("./util");
var base_1 = require("../base");
var geometry_1 = require("../../geometry");
var CYLINDER_TILT = 10;
exports.Cylinder = base_1.Base.define({
shape: 'cylinder',
markup: [
{
tagName: 'path',
selector: 'body',
},
{
tagName: 'ellipse',
selector: 'top',
},
{
tagName: 'text',
selector: 'label',
},
],
attrs: {
body: __assign(__assign({}, util_2.bodyAttr), { lateral: CYLINDER_TILT }),
top: __assign(__assign({}, util_2.bodyAttr), { refCx: '50%', refRx: '50%', cy: CYLINDER_TILT, ry: CYLINDER_TILT }),
},
attrHooks: {
lateral: {
set: function (t, _a) {
var refBBox = _a.refBBox;
var isPercentage = util_1.NumberExt.isPercentage(t);
if (isPercentage) {
// tslint:disable-next-line
t = parseFloat(t) / 100;
}
var x = refBBox.x;
var y = refBBox.y;
var w = refBBox.width;
var h = refBBox.height;
// curve control point variables
var rx = w / 2;
var ry = isPercentage ? h * t : t;
var kappa = 0.551784;
var cx = kappa * rx;
var cy = kappa * ry;
// shape variables
var xLeft = x;
var xCenter = x + w / 2;
var xRight = x + w;
var ySideTop = y + ry;
var yCurveTop = ySideTop - ry;
var ySideBottom = y + h - ry;
var yCurveBottom = y + h;
// return calculated shape
var data = [
'M',
xLeft,
ySideTop,
'L',
xLeft,
ySideBottom,
'C',
x,
ySideBottom + cy,
xCenter - cx,
yCurveBottom,
xCenter,
yCurveBottom,
'C',
xCenter + cx,
yCurveBottom,
xRight,
ySideBottom + cy,
xRight,
ySideBottom,
'L',
xRight,
ySideTop,
'C',
xRight,
ySideTop - cy,
xCenter + cx,
yCurveTop,
xCenter,
yCurveTop,
'C',
xCenter - cx,
yCurveTop,
xLeft,
ySideTop - cy,
xLeft,
ySideTop,
'Z',
];
return { d: data.join(' ') };
},
},
},
knob: {
enabled: true,
update: function (_a) {
var node = _a.node, knob = _a.knob;
var ctm = this.matrix();
var bbox = node.getBBox();
var lateral = node.attr('body/lateral');
var left = bbox.x * ctm.a + ctm.e;
var top = (bbox.y + lateral) * ctm.d + ctm.f;
var angle = geometry_1.Angle.normalize(node.getAngle());
var transform = angle !== 0 ? "rotate(" + angle + "deg)" : '';
var style = knob.container.style;
style.transform = transform;
style.left = left + "px";
style.top = top + "px";
},
onMouseMove: function (_a) {
var e = _a.e, node = _a.node, data = _a.data;
var y = e.clientY;
if (data.lastY == null) {
data.lastY = y;
return;
}
var dy = y - data.lastY;
if (dy !== 0) {
var ctm = this.matrix();
var bbox = node.getBBox();
var previous = node.attr('body/lateral');
var delta = dy / ctm.d;
var min = 0;
var max = bbox.height / 2;
var current = util_1.NumberExt.clamp(previous + delta, min, max);
if (current !== previous) {
node.attr({
body: { lateral: current },
top: {
cy: current,
ry: current,
},
});
data.lastY = y;
}
}
},
},
});
//# sourceMappingURL=cylinder.js.map