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.
137 lines
6.4 KiB
137 lines
6.4 KiB
import { __assign, __extends } from "tslib";
|
|
import { get, isEqual } from '@antv/util';
|
|
import { Component } from '../../core';
|
|
import { select } from '../../util';
|
|
import { Tag } from '../tag';
|
|
import { SIZE_STYLE } from './constant';
|
|
// 开启颜色 默认
|
|
var OPTION_COLOR = '#1890FF';
|
|
// 关闭颜色 默认
|
|
var CLOSE_COLOR = '#00000040';
|
|
function getHandleShapeStyle(shape, spacing, checked) {
|
|
if (spacing === void 0) { spacing = 0; }
|
|
if (checked === void 0) { checked = true; }
|
|
var size = Number(shape.style.height) - spacing * 2;
|
|
return {
|
|
x: checked ? Number(shape.style.width) + Number(shape.style.x) - spacing - size : Number(shape.style.x) + spacing,
|
|
y: Number(shape.style.y) + spacing,
|
|
width: size,
|
|
height: size,
|
|
radius: size / 2,
|
|
};
|
|
}
|
|
function getTagShapeStyle(backgroundStyle, _a, spacing, checked) {
|
|
var width = _a.width, height = _a.height;
|
|
if (spacing === void 0) { spacing = 0; }
|
|
if (checked === void 0) { checked = true; }
|
|
return {
|
|
x: checked
|
|
? Number(backgroundStyle.x) + spacing
|
|
: Number(backgroundStyle.width) + Number(backgroundStyle.x) - width,
|
|
y: Number(backgroundStyle.y) + (Number(backgroundStyle.height) - height) / 2,
|
|
};
|
|
}
|
|
var Switch = /** @class */ (function (_super) {
|
|
__extends(Switch, _super);
|
|
function Switch(options) {
|
|
return _super.call(this, options, {
|
|
x: 0,
|
|
y: 0,
|
|
size: 'default',
|
|
spacing: 2,
|
|
checked: true,
|
|
disabled: false,
|
|
}) || this;
|
|
}
|
|
Switch.prototype.render = function (attributes, container) {
|
|
var _this = this;
|
|
var size = attributes.size, spacing = attributes.spacing, disabled = attributes.disabled, checked = attributes.checked, unCheckedChildren = attributes.unCheckedChildren, checkedChildren = attributes.checkedChildren;
|
|
var group = select(container).maybeAppendByClassName('switch-content', 'g').node();
|
|
var bounds = group.getLocalBounds();
|
|
var _a = get(SIZE_STYLE, size, SIZE_STYLE.default), sizeStyle = _a.sizeStyle, tagStyle = _a.tagStyle;
|
|
// 其他统一属性
|
|
var cursor = disabled ? 'no-drop' : 'pointer';
|
|
var color = checked ? OPTION_COLOR : CLOSE_COLOR;
|
|
// 背景位置大小配置
|
|
var backgroundStyle = sizeStyle;
|
|
// Tag 配置, 创建
|
|
var tagCfg = checked ? checkedChildren : unCheckedChildren;
|
|
if (checkedChildren || unCheckedChildren) {
|
|
select(group)
|
|
.maybeAppendByClassName('switch-tag', function () { return new Tag({}); })
|
|
.call(function (selection) {
|
|
var tagShape = selection.node();
|
|
tagShape.update(__assign(__assign({ cursor: cursor, backgroundStyle: null, text: false, marker: false }, tagStyle), tagCfg));
|
|
// 增加 整体宽度 需要对 tag 提前渲染获得 width 然后通过 width 计算 x 的位置
|
|
// @ts-ignore
|
|
var _a = (tagShape === null || tagShape === void 0 ? void 0 : tagShape.getLocalBounds()) || {}, max = _a.max, min = _a.min;
|
|
var width = max[0] - min[0] + sizeStyle.radius;
|
|
var height = max[1] - min[1];
|
|
// 计算获得背景宽度
|
|
var backgroundWidth = Math.max(width + sizeStyle.height + 2, sizeStyle.width);
|
|
backgroundStyle = __assign(__assign({}, sizeStyle), { width: backgroundWidth });
|
|
tagShape.update(getTagShapeStyle({
|
|
x: bounds.min[0],
|
|
y: bounds.min[1],
|
|
width: backgroundWidth,
|
|
height: backgroundStyle.height,
|
|
}, { width: width, height: height }, backgroundStyle.radius, checked));
|
|
});
|
|
}
|
|
// 背景 组件
|
|
var backgroundShape = select(group)
|
|
.maybeAppendByClassName('switch-background', 'rect')
|
|
.styles(__assign({ zIndex: (group.style.zIndex || 0) - 1, x: bounds.min[0], y: bounds.min[1], fill: color, cursor: cursor, fillOpacity: disabled ? 0.4 : 1 }, backgroundStyle))
|
|
.node();
|
|
// 背景阴影动效 组件
|
|
var backgroundStrokeShape = select(group)
|
|
.maybeAppendByClassName('switch-background-stroke', 'rect')
|
|
.styles(__assign({ zIndex: (group.style.zIndex || 0) - 2, x: bounds.min[0], y: bounds.min[1], stroke: color, lineWidth: 0 }, backgroundStyle))
|
|
.node();
|
|
// 控件 组件
|
|
select(group)
|
|
.maybeAppendByClassName('switch-handle', 'rect')
|
|
.styles({
|
|
fill: '#fff',
|
|
cursor: cursor,
|
|
})
|
|
.call(function (selection) {
|
|
var _a, _b;
|
|
var handleShape = selection.node();
|
|
// 动画添加 通过获取 开启 和 关闭的 x 来实现动画效果
|
|
var newHandleShapeStyle = getHandleShapeStyle(backgroundShape, spacing, checked);
|
|
var oldHandleShapeStyle = getHandleShapeStyle(backgroundShape, spacing, !checked);
|
|
if (handleShape.attr('x') && !isEqual(newHandleShapeStyle, oldHandleShapeStyle) && _this.checked !== checked) {
|
|
// 调整控件 和 tag 位置
|
|
handleShape.attr(oldHandleShapeStyle);
|
|
// 清理之前的动画
|
|
(_a = handleShape.getAnimations()[0]) === null || _a === void 0 ? void 0 : _a.cancel();
|
|
(_b = backgroundStrokeShape.getAnimations()[0]) === null || _b === void 0 ? void 0 : _b.cancel();
|
|
// 控件组建变化添加动画 动画为 原 x -> 新 x
|
|
handleShape.animate([{ x: oldHandleShapeStyle.x }, { x: newHandleShapeStyle.x }], {
|
|
duration: 120,
|
|
fill: 'both',
|
|
});
|
|
// 动效组件变化添加动画 动画为 由内向外的 渐淡扩散
|
|
backgroundStrokeShape.animate([
|
|
{ lineWidth: 0, strokeOpacity: 0.5 },
|
|
{ lineWidth: 14, strokeOpacity: 0 },
|
|
], {
|
|
duration: 400,
|
|
easing: 'ease-on',
|
|
});
|
|
}
|
|
else {
|
|
handleShape.attr(newHandleShapeStyle);
|
|
}
|
|
});
|
|
this.checked = !!checked;
|
|
};
|
|
/**
|
|
* 组件 switch
|
|
*/
|
|
Switch.tag = 'switch';
|
|
return Switch;
|
|
}(Component));
|
|
export { Switch };
|
|
//# sourceMappingURL=index.js.map
|