97 lines
2.2 KiB
JavaScript
97 lines
2.2 KiB
JavaScript
import BaseComponent, {register} from './BaseComponent.mjs';
|
|
|
|
const OUTLINE_ATTRS = {
|
|
'class': 'outline',
|
|
'fill': 'transparent',
|
|
};
|
|
|
|
export default class Divider extends BaseComponent {
|
|
prepareMeasurements({mode, formattedLabel}, env) {
|
|
const config = env.theme.getDivider(mode);
|
|
env.textSizer.expectMeasure(config.labelAttrs, formattedLabel);
|
|
}
|
|
|
|
separation({mode, formattedLabel}, env) {
|
|
const config = env.theme.getDivider(mode);
|
|
|
|
const width = (
|
|
env.textSizer.measure(config.labelAttrs, formattedLabel).width +
|
|
config.padding.left +
|
|
config.padding.right
|
|
);
|
|
|
|
env.addSeparation('[', ']', width);
|
|
env.addSpacing('[', {left: config.extend, right: 0});
|
|
env.addSpacing(']', {left: 0, right: config.extend});
|
|
}
|
|
|
|
renderPre() {
|
|
return {
|
|
agentIDs: ['[', ']'],
|
|
};
|
|
}
|
|
|
|
render({mode, height, formattedLabel}, env) {
|
|
const config = env.theme.getDivider(mode);
|
|
|
|
const left = env.agentInfos.get('[');
|
|
const right = env.agentInfos.get(']');
|
|
|
|
let labelWidth = 0;
|
|
let labelHeight = 0;
|
|
if(formattedLabel) {
|
|
labelHeight = env.textSizer.measureHeight(
|
|
config.labelAttrs,
|
|
formattedLabel
|
|
);
|
|
}
|
|
|
|
const fullHeight = Math.max(height, labelHeight) + config.margin;
|
|
|
|
let labelText = null;
|
|
if(formattedLabel) {
|
|
const boxed = env.svg.boxedText({
|
|
boxAttrs: {'fill': '#000000'},
|
|
labelAttrs: config.labelAttrs,
|
|
padding: config.padding,
|
|
}, formattedLabel, {
|
|
x: (left.x + right.x) / 2,
|
|
y: (
|
|
env.primaryY +
|
|
(fullHeight - labelHeight) / 2 -
|
|
config.padding.top
|
|
),
|
|
});
|
|
env.fullMaskLayer.add(boxed.box);
|
|
labelText = boxed.label;
|
|
labelWidth = boxed.width;
|
|
}
|
|
|
|
const {shape, mask} = config.render({
|
|
env,
|
|
height,
|
|
labelHeight,
|
|
labelWidth,
|
|
width: right.x - left.x + config.extend * 2,
|
|
x: left.x - config.extend,
|
|
y: env.primaryY + (fullHeight - height) / 2,
|
|
});
|
|
env.fullMaskLayer.add(mask);
|
|
|
|
env.makeRegion({unmasked: true}).add(
|
|
env.svg.box(OUTLINE_ATTRS, {
|
|
'height': fullHeight,
|
|
'width': right.x - left.x + config.extend * 2,
|
|
'x': left.x - config.extend,
|
|
'y': env.primaryY,
|
|
}),
|
|
shape,
|
|
labelText
|
|
);
|
|
|
|
return env.primaryY + fullHeight + env.theme.actionMargin;
|
|
}
|
|
}
|
|
|
|
register('divider', new Divider());
|