cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
107 lines (106 loc) • 2.68 kB
JavaScript
import { defaults } from "../../../zrender/lib/core/util.mjs";
import Group from "../../../zrender/lib/graphic/Group.mjs";
import Rect from "../../../zrender/lib/graphic/shape/Rect.mjs";
import ZRText from "../../../zrender/lib/graphic/Text.mjs";
import Arc from "../../../zrender/lib/graphic/shape/Arc.mjs";
var PI = Math.PI;
function defaultLoading(api, opts) {
opts = opts || {};
defaults(opts, {
text: "loading",
textColor: "#000",
fontSize: 12,
fontWeight: "normal",
fontStyle: "normal",
fontFamily: "sans-serif",
maskColor: "rgba(255, 255, 255, 0.8)",
showSpinner: true,
color: "#5470c6",
spinnerRadius: 10,
lineWidth: 5,
zlevel: 0
});
var group = new Group();
var mask = new Rect({
style: {
fill: opts.maskColor
},
zlevel: opts.zlevel,
z: 1e4
});
group.add(mask);
var textContent = new ZRText({
style: {
text: opts.text,
fill: opts.textColor,
fontSize: opts.fontSize,
fontWeight: opts.fontWeight,
fontStyle: opts.fontStyle,
fontFamily: opts.fontFamily
},
zlevel: opts.zlevel,
z: 10001
});
var labelRect = new Rect({
style: {
fill: "none"
},
textContent,
textConfig: {
position: "right",
distance: 10
},
zlevel: opts.zlevel,
z: 10001
});
group.add(labelRect);
var arc;
if (opts.showSpinner) {
arc = new Arc({
shape: {
startAngle: -PI / 2,
endAngle: -PI / 2 + 0.1,
r: opts.spinnerRadius
},
style: {
stroke: opts.color,
lineCap: "round",
lineWidth: opts.lineWidth
},
zlevel: opts.zlevel,
z: 10001
});
arc.animateShape(true).when(1e3, {
endAngle: PI * 3 / 2
}).start("circularInOut");
arc.animateShape(true).when(1e3, {
startAngle: PI * 3 / 2
}).delay(300).start("circularInOut");
group.add(arc);
}
group.resize = function() {
var textWidth = textContent.getBoundingRect().width;
var r = opts.showSpinner ? opts.spinnerRadius : 0;
var cx = (api.getWidth() - r * 2 - (opts.showSpinner && textWidth ? 10 : 0) - textWidth) / 2 - (opts.showSpinner && textWidth ? 0 : 5 + textWidth / 2) + (opts.showSpinner ? 0 : textWidth / 2) + (textWidth ? 0 : r);
var cy = api.getHeight() / 2;
opts.showSpinner && arc.setShape({
cx,
cy
});
labelRect.setShape({
x: cx - r,
y: cy - r,
width: r * 2,
height: r * 2
});
mask.setShape({
x: 0,
y: 0,
width: api.getWidth(),
height: api.getHeight()
});
};
group.resize();
return group;
}
export { defaultLoading as default };