408 lines
7.9 KiB
JavaScript
408 lines
7.9 KiB
JavaScript
/* eslint-disable sort-keys */ // Maybe later
|
|
|
|
import BaseTheme, {WavePattern} from './BaseTheme.mjs';
|
|
|
|
const FONT = 'Helvetica,Arial,Liberation Sans,sans-serif';
|
|
const LINE_HEIGHT = 1.3;
|
|
|
|
const NOTE_ATTRS = {
|
|
'font-family': FONT,
|
|
'font-size': 8,
|
|
'line-height': LINE_HEIGHT,
|
|
};
|
|
|
|
const DIVIDER_LABEL_ATTRS = {
|
|
'font-family': FONT,
|
|
'font-size': 8,
|
|
'line-height': LINE_HEIGHT,
|
|
'text-anchor': 'middle',
|
|
};
|
|
|
|
export default class BasicTheme extends BaseTheme {
|
|
constructor(svg) {
|
|
super(svg, {
|
|
'font-family': FONT,
|
|
'font-size': 8,
|
|
'line-height': LINE_HEIGHT,
|
|
});
|
|
|
|
const sharedBlockSection = {
|
|
padding: {
|
|
top: 3,
|
|
bottom: 2,
|
|
},
|
|
tag: {
|
|
padding: {
|
|
top: 1,
|
|
left: 3,
|
|
right: 3,
|
|
bottom: 0,
|
|
},
|
|
boxRenderer: this.renderTag.bind(this, {
|
|
'fill': '#FFFFFF',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
'rx': 2,
|
|
'ry': 2,
|
|
}),
|
|
labelAttrs: {
|
|
'font-family': FONT,
|
|
'font-weight': 'bold',
|
|
'font-size': 9,
|
|
'line-height': LINE_HEIGHT,
|
|
'text-anchor': 'left',
|
|
},
|
|
},
|
|
label: {
|
|
minHeight: 4,
|
|
padding: {
|
|
top: 1,
|
|
left: 5,
|
|
right: 3,
|
|
bottom: 1,
|
|
},
|
|
labelAttrs: {
|
|
'font-family': FONT,
|
|
'font-size': 8,
|
|
'line-height': LINE_HEIGHT,
|
|
'text-anchor': 'left',
|
|
},
|
|
},
|
|
};
|
|
|
|
Object.assign(this, {
|
|
titleMargin: 10,
|
|
outerMargin: 5,
|
|
agentMargin: 10,
|
|
actionMargin: 10,
|
|
minActionMargin: 3,
|
|
agentLineHighlightRadius: 4,
|
|
|
|
agentCap: {
|
|
box: {
|
|
padding: {
|
|
top: 5,
|
|
left: 10,
|
|
right: 10,
|
|
bottom: 5,
|
|
},
|
|
arrowBottom: 5 + 12 * 1.3 / 2,
|
|
boxAttrs: {
|
|
'fill': '#FFFFFF',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
},
|
|
labelAttrs: {
|
|
'font-family': FONT,
|
|
'font-size': 12,
|
|
'line-height': LINE_HEIGHT,
|
|
'text-anchor': 'middle',
|
|
},
|
|
},
|
|
person: {
|
|
padding: {
|
|
top: 20,
|
|
left: 10,
|
|
right: 10,
|
|
bottom: 5,
|
|
},
|
|
arrowBottom: 5 + 12 * 1.3 / 2,
|
|
boxRenderer: this.renderPerson.bind(this, {
|
|
iconHeight: 15,
|
|
iconWidth: 18,
|
|
}, {
|
|
'fill': '#000000',
|
|
}, {
|
|
'fill': '#FFFFFF',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
}),
|
|
labelAttrs: {
|
|
'font-family': FONT,
|
|
'font-size': 12,
|
|
'line-height': LINE_HEIGHT,
|
|
'text-anchor': 'middle',
|
|
},
|
|
},
|
|
database: {
|
|
padding: {
|
|
top: 12,
|
|
left: 10,
|
|
right: 10,
|
|
bottom: 3,
|
|
},
|
|
arrowBottom: 5 + 12 * 1.3 / 2,
|
|
boxRenderer: this.renderDB.bind(this, {tilt: 5}, {
|
|
'fill': '#FFFFFF',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
}),
|
|
labelAttrs: {
|
|
'font-family': FONT,
|
|
'font-size': 12,
|
|
'line-height': LINE_HEIGHT,
|
|
'text-anchor': 'middle',
|
|
},
|
|
},
|
|
cross: {
|
|
size: 20,
|
|
render: svg.crossFactory({
|
|
'fill': 'none',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
}),
|
|
},
|
|
bar: {
|
|
height: 4,
|
|
render: svg.boxFactory({
|
|
'fill': '#000000',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
}),
|
|
},
|
|
fade: {
|
|
width: 5,
|
|
height: 6,
|
|
extend: 1,
|
|
},
|
|
none: {
|
|
height: 10,
|
|
},
|
|
},
|
|
|
|
connect: {
|
|
loopbackRadius: 6,
|
|
arrow: {
|
|
'single': {
|
|
width: 5,
|
|
height: 10,
|
|
render: this.renderArrowHead.bind(this),
|
|
attrs: {
|
|
'fill': '#000000',
|
|
'stroke-width': 0,
|
|
'stroke-linejoin': 'miter',
|
|
},
|
|
},
|
|
'double': {
|
|
width: 4,
|
|
height: 6,
|
|
render: this.renderArrowHead.bind(this),
|
|
attrs: {
|
|
'fill': 'none',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
'stroke-linejoin': 'miter',
|
|
},
|
|
},
|
|
'fade': {
|
|
short: 2,
|
|
size: 16,
|
|
},
|
|
'cross': {
|
|
short: 7,
|
|
radius: 3,
|
|
render: svg.crossFactory({
|
|
'fill': 'none',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
}),
|
|
},
|
|
},
|
|
label: {
|
|
padding: 6,
|
|
margin: {top: 2, bottom: 1},
|
|
attrs: {
|
|
'font-family': FONT,
|
|
'font-size': 8,
|
|
'line-height': LINE_HEIGHT,
|
|
'text-anchor': 'middle',
|
|
},
|
|
loopbackAttrs: {
|
|
'font-family': FONT,
|
|
'font-size': 8,
|
|
'line-height': LINE_HEIGHT,
|
|
},
|
|
},
|
|
source: {
|
|
radius: 2,
|
|
render: svg.circleFactory({
|
|
'fill': '#000000',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
}),
|
|
},
|
|
mask: {
|
|
padding: {
|
|
top: 0,
|
|
left: 3,
|
|
right: 3,
|
|
bottom: 1,
|
|
},
|
|
},
|
|
},
|
|
|
|
agentLineAttrs: {
|
|
'': {
|
|
'fill': 'none',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
},
|
|
'red': {
|
|
'stroke': '#CC0000',
|
|
},
|
|
},
|
|
blocks: {
|
|
'ref': {
|
|
margin: {
|
|
top: 0,
|
|
bottom: 0,
|
|
},
|
|
boxRenderer: this.renderRef.bind(this, {
|
|
'fill': '#FFFFFF',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1.5,
|
|
'rx': 2,
|
|
'ry': 2,
|
|
}),
|
|
section: sharedBlockSection,
|
|
},
|
|
'': {
|
|
margin: {
|
|
top: 0,
|
|
bottom: 0,
|
|
},
|
|
boxRenderer: svg.boxFactory({
|
|
'fill': 'none',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1.5,
|
|
'rx': 2,
|
|
'ry': 2,
|
|
}),
|
|
collapsedBoxRenderer: this.renderRef.bind(this, {
|
|
'fill': '#FFFFFF',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1.5,
|
|
'rx': 2,
|
|
'ry': 2,
|
|
}),
|
|
section: sharedBlockSection,
|
|
sepRenderer: svg.lineFactory({
|
|
'stroke': '#000000',
|
|
'stroke-width': 1.5,
|
|
'stroke-dasharray': '4, 2',
|
|
}),
|
|
},
|
|
},
|
|
notes: {
|
|
'text': {
|
|
margin: {top: 0, left: 2, right: 2, bottom: 0},
|
|
padding: {top: 2, left: 2, right: 2, bottom: 2},
|
|
overlap: {left: 10, right: 10},
|
|
boxRenderer: svg.boxFactory({
|
|
'fill': '#FFFFFF',
|
|
}),
|
|
labelAttrs: NOTE_ATTRS,
|
|
},
|
|
'note': {
|
|
margin: {top: 0, left: 5, right: 5, bottom: 0},
|
|
padding: {top: 5, left: 5, right: 10, bottom: 5},
|
|
overlap: {left: 10, right: 10},
|
|
boxRenderer: svg.noteFactory({
|
|
'fill': '#FFFFFF',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
}, {
|
|
'fill': 'none',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
}),
|
|
labelAttrs: NOTE_ATTRS,
|
|
},
|
|
'state': {
|
|
margin: {top: 0, left: 5, right: 5, bottom: 0},
|
|
padding: {top: 7, left: 7, right: 7, bottom: 7},
|
|
overlap: {left: 10, right: 10},
|
|
boxRenderer: svg.boxFactory({
|
|
'fill': '#FFFFFF',
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
'rx': 10,
|
|
'ry': 10,
|
|
}),
|
|
labelAttrs: NOTE_ATTRS,
|
|
},
|
|
},
|
|
dividers: {
|
|
'': {
|
|
labelAttrs: DIVIDER_LABEL_ATTRS,
|
|
padding: {top: 2, left: 5, right: 5, bottom: 2},
|
|
extend: 0,
|
|
margin: 0,
|
|
render: () => ({}),
|
|
},
|
|
'line': {
|
|
labelAttrs: DIVIDER_LABEL_ATTRS,
|
|
padding: {top: 2, left: 5, right: 5, bottom: 2},
|
|
extend: 10,
|
|
margin: 0,
|
|
render: this.renderLineDivider.bind(this, {
|
|
lineAttrs: {
|
|
'stroke': '#000000',
|
|
},
|
|
}),
|
|
},
|
|
'delay': {
|
|
labelAttrs: DIVIDER_LABEL_ATTRS,
|
|
padding: {top: 2, left: 5, right: 5, bottom: 2},
|
|
extend: 0,
|
|
margin: 0,
|
|
render: this.renderDelayDivider.bind(this, {
|
|
dotSize: 1,
|
|
gapSize: 2,
|
|
}),
|
|
},
|
|
'tear': {
|
|
labelAttrs: DIVIDER_LABEL_ATTRS,
|
|
padding: {top: 2, left: 5, right: 5, bottom: 2},
|
|
extend: 10,
|
|
margin: 10,
|
|
render: this.renderTearDivider.bind(this, {
|
|
fadeBegin: 5,
|
|
fadeSize: 10,
|
|
zigWidth: 6,
|
|
zigHeight: 1,
|
|
lineAttrs: {
|
|
'stroke': '#000000',
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
});
|
|
|
|
this.addConnectLine('solid', {attrs: {
|
|
'stroke': '#000000',
|
|
'stroke-width': 1,
|
|
}});
|
|
this.addConnectLine('dash', {attrs: {
|
|
'stroke-dasharray': '4, 2',
|
|
}});
|
|
this.addConnectLine('wave', {
|
|
attrs: {
|
|
'stroke-linejoin': 'round',
|
|
'stroke-linecap': 'round',
|
|
},
|
|
pattern: new WavePattern(6, 0.5),
|
|
});
|
|
}
|
|
}
|
|
|
|
export class Factory {
|
|
constructor() {
|
|
this.name = 'basic';
|
|
}
|
|
|
|
build(svg) {
|
|
return new BasicTheme(svg);
|
|
}
|
|
}
|