|
@@ -60,28 +60,51 @@ const getStepSize = (step: any) => {
|
|
|
);
|
|
|
|
|
|
if (step.hosts?.length) {
|
|
|
- const hostSize = step.hosts.reduce(
|
|
|
- (t: any, host: any) => {
|
|
|
- const size = getTextBound(
|
|
|
- host.host,
|
|
|
- props.hostPadding,
|
|
|
- props.hostMargin,
|
|
|
- `${props.hostFontSize}px normal ${props.fontFamily}`
|
|
|
- );
|
|
|
- t.width += size.width;
|
|
|
- t.height = Math.max(t.height, size.height);
|
|
|
- host.bound = size;
|
|
|
+ const hostsGroup = [];
|
|
|
+ const numGroup = 1;
|
|
|
+ for (let i = 0; i < step.hosts.length; i += numGroup) {
|
|
|
+ hostsGroup.push(step.hosts.slice(i, i + numGroup));
|
|
|
+ }
|
|
|
+ let top = 0;
|
|
|
+ const hostSizeGroup = hostsGroup.map((hosts) => {
|
|
|
+ let left = 0;
|
|
|
+ const hostSize = hosts.reduce(
|
|
|
+ (t: any, host: any) => {
|
|
|
+ const size = getTextBound(
|
|
|
+ host.host,
|
|
|
+ props.hostPadding,
|
|
|
+ props.hostMargin,
|
|
|
+ `${props.hostFontSize}px normal ${props.fontFamily}`
|
|
|
+ );
|
|
|
+ t.width += size.width;
|
|
|
+ t.height = Math.max(t.height, size.height);
|
|
|
+ host.bound = {
|
|
|
+ ...size,
|
|
|
+ left,
|
|
|
+ top,
|
|
|
+ };
|
|
|
+ left += size.width;
|
|
|
+ return t;
|
|
|
+ },
|
|
|
+ { width: 0, height: 0 }
|
|
|
+ );
|
|
|
+ top += hostSize.height;
|
|
|
+ return hostSize;
|
|
|
+ });
|
|
|
+
|
|
|
+ const hostSize = hostSizeGroup.reduceRight(
|
|
|
+ (t, hostSize) => {
|
|
|
+ t.width = Math.max(hostSize.width, t.width);
|
|
|
+ t.height += hostSize.height;
|
|
|
return t;
|
|
|
},
|
|
|
{ width: 0, height: 0 }
|
|
|
);
|
|
|
-
|
|
|
step.hostSize = hostSize;
|
|
|
size.width = Math.max(
|
|
|
size.width,
|
|
|
hostSize.width + (props.padding[1] + props.margin[1]) * 2
|
|
|
);
|
|
|
- console.log(hostSize, size);
|
|
|
size.height += hostSize.height;
|
|
|
}
|
|
|
|