Add interactive roadmap setup
This commit is contained in:
Kamran Ahmed
282
lib/renderer/renderer.ts
Normal file
282
lib/renderer/renderer.ts
Normal file
@ -0,0 +1,282 @@
|
||||
import { getRGBFromDecimalColor, makeSVGElement } from './utils';
|
||||
import {
|
||||
ARROW_WIDTH,
|
||||
BORDER_WIDTH,
|
||||
DEFAULT_COLORS,
|
||||
RECT_RADIUS,
|
||||
} from './constants';
|
||||
|
||||
export class Renderer {
|
||||
private svgRoot: SVGElement;
|
||||
private readonly fontFamily: string;
|
||||
private canvasRenderingContext2D: CanvasRenderingContext2D;
|
||||
|
||||
constructor(svgRoot: SVGElement, fontFamily: string) {
|
||||
this.svgRoot = svgRoot;
|
||||
this.fontFamily = fontFamily;
|
||||
this.canvasRenderingContext2D = document
|
||||
.createElement('canvas')
|
||||
.getContext('2d')!;
|
||||
}
|
||||
|
||||
render(control: any, container: any) {
|
||||
let typeID = control.typeID;
|
||||
if (typeID in this) {
|
||||
(this as any)[typeID](control, container);
|
||||
} else {
|
||||
console.log(`'${typeID}' control type not implemented`);
|
||||
}
|
||||
}
|
||||
|
||||
parseColor(color: any, defaultColor: any) {
|
||||
return color === undefined
|
||||
? `rgb(${defaultColor})`
|
||||
: getRGBFromDecimalColor(color);
|
||||
}
|
||||
|
||||
parseFontProperties(control: any) {
|
||||
return {
|
||||
style: control.properties?.italic ? 'italic' : 'normal',
|
||||
weight: control.properties?.bold ? 'bold' : 'normal',
|
||||
size: control.properties?.size ? control.properties.size + 'px' : '13px',
|
||||
family: this.fontFamily,
|
||||
};
|
||||
}
|
||||
|
||||
measureText(text: string, font: string) {
|
||||
this.canvasRenderingContext2D.font = font;
|
||||
|
||||
return this.canvasRenderingContext2D.measureText(text);
|
||||
}
|
||||
|
||||
drawRectangle(control: any, container: HTMLElement | undefined) {
|
||||
makeSVGElement(
|
||||
'rect',
|
||||
{
|
||||
x: parseInt(control.x) + BORDER_WIDTH / 2,
|
||||
y: parseInt(control.y) + BORDER_WIDTH / 2,
|
||||
width: parseInt(control.w ?? control.measuredW) - BORDER_WIDTH,
|
||||
height: parseInt(control.h ?? control.measuredH) - BORDER_WIDTH,
|
||||
rx: RECT_RADIUS,
|
||||
fill: this.parseColor(control.properties?.color, '255,255,255'),
|
||||
'fill-opacity': control.properties?.backgroundAlpha ?? 1,
|
||||
stroke: this.parseColor(control.properties?.borderColor, '0,0,0'),
|
||||
'stroke-width': BORDER_WIDTH,
|
||||
},
|
||||
container
|
||||
);
|
||||
}
|
||||
|
||||
addText(
|
||||
control: {
|
||||
properties: { text: string };
|
||||
x: string;
|
||||
y: string;
|
||||
w: any;
|
||||
measuredW: any;
|
||||
measuredH: number;
|
||||
},
|
||||
container: HTMLElement | undefined,
|
||||
textColor: string,
|
||||
align: string
|
||||
) {
|
||||
let text = control.properties.text ?? '';
|
||||
let x = parseInt(control.x);
|
||||
let y = parseInt(control.y);
|
||||
|
||||
let font = this.parseFontProperties(control);
|
||||
let textMetrics = this.measureText(
|
||||
text,
|
||||
`${font.style} ${font.weight} ${font.size} ${font.family}`
|
||||
);
|
||||
|
||||
let textX =
|
||||
align === 'center'
|
||||
? x + (control.w ?? control.measuredW) / 2 - textMetrics.width / 2
|
||||
: x;
|
||||
let textY =
|
||||
y + control.measuredH / 2 + textMetrics.actualBoundingBoxAscent / 2;
|
||||
|
||||
let textElement = makeSVGElement(
|
||||
'text',
|
||||
{
|
||||
x: textX,
|
||||
y: textY,
|
||||
fill: textColor,
|
||||
'font-style': font.style,
|
||||
'font-weight': font.weight,
|
||||
'font-size': font.size,
|
||||
},
|
||||
container
|
||||
);
|
||||
|
||||
if (!text.includes('{color:')) {
|
||||
let tspan = makeSVGElement('tspan', {}, textElement);
|
||||
tspan.textContent = text;
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
let split = text.split(/{color:|{color}/);
|
||||
split.forEach((str) => {
|
||||
if (str.includes('}')) {
|
||||
let [color, textPart] = str.split('}');
|
||||
|
||||
if (!color.startsWith('#')) {
|
||||
let index = parseInt(color.slice(-1));
|
||||
color = isNaN(index)
|
||||
? DEFAULT_COLORS[color][0]
|
||||
: DEFAULT_COLORS[color][index];
|
||||
}
|
||||
|
||||
let tspan = makeSVGElement('tspan', { fill: color }, textElement);
|
||||
tspan.textContent = textPart;
|
||||
} else {
|
||||
let tspan = makeSVGElement('tspan', {}, textElement);
|
||||
tspan.textContent = str;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
TextArea(control: any, container: HTMLElement | undefined) {
|
||||
this.drawRectangle(control, container);
|
||||
}
|
||||
|
||||
Canvas(control: any, container: HTMLElement | undefined) {
|
||||
this.drawRectangle(control, container);
|
||||
}
|
||||
|
||||
Label(control: any, container: HTMLElement | undefined) {
|
||||
this.addText(
|
||||
control,
|
||||
container,
|
||||
this.parseColor(control.properties?.color, '0,0,0'),
|
||||
'left'
|
||||
);
|
||||
}
|
||||
|
||||
TextInput(control: any, container: any) {
|
||||
this.drawRectangle(control, container);
|
||||
|
||||
this.addText(
|
||||
control,
|
||||
container,
|
||||
this.parseColor(control.properties?.textColor, '0,0,0'),
|
||||
'center'
|
||||
);
|
||||
}
|
||||
|
||||
Arrow(control: any, container: any) {
|
||||
let x = parseInt(control.x);
|
||||
let y = parseInt(control.y);
|
||||
let { p0, p1, p2 } = control.properties;
|
||||
|
||||
let lineDash;
|
||||
if (control.properties?.stroke === 'dotted') lineDash = '0.8 12';
|
||||
else if (control.properties?.stroke === 'dashed') lineDash = '28 46';
|
||||
|
||||
let xVector = { x: (p2.x - p0.x) * p1.x, y: (p2.y - p0.y) * p1.x };
|
||||
|
||||
makeSVGElement(
|
||||
'path',
|
||||
{
|
||||
d: `M${x + p0.x} ${y + p0.y}Q${
|
||||
x + p0.x + xVector.x + xVector.y * p1.y * 3.6
|
||||
} ${y + p0.y + xVector.y + -xVector.x * p1.y * 3.6} ${x + p2.x} ${
|
||||
y + p2.y
|
||||
}`,
|
||||
fill: 'none',
|
||||
stroke: this.parseColor(control.properties?.color, '0,0,0'),
|
||||
'stroke-width': ARROW_WIDTH,
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
'stroke-dasharray': lineDash,
|
||||
},
|
||||
container
|
||||
);
|
||||
}
|
||||
|
||||
Icon(control: any, container: any) {
|
||||
let x = parseInt(control.x);
|
||||
let y = parseInt(control.y);
|
||||
let radius = 10;
|
||||
|
||||
makeSVGElement(
|
||||
'circle',
|
||||
{
|
||||
cx: x + radius,
|
||||
cy: y + radius,
|
||||
r: radius,
|
||||
fill: this.parseColor(control.properties?.color, '0,0,0'),
|
||||
},
|
||||
container
|
||||
);
|
||||
|
||||
if (control.properties.icon.ID !== 'check-circle') {
|
||||
return;
|
||||
}
|
||||
|
||||
makeSVGElement(
|
||||
'path',
|
||||
{
|
||||
d: `M${x + 4.5} ${y + radius}L${x + 8.5} ${y + radius + 4} ${x + 15} ${
|
||||
y + radius - 2.5
|
||||
}`,
|
||||
fill: 'none',
|
||||
stroke: '#fff',
|
||||
'stroke-width': 3.5,
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
},
|
||||
container
|
||||
);
|
||||
}
|
||||
|
||||
HRule(control: any, container: any) {
|
||||
let x = parseInt(control.x);
|
||||
let y = parseInt(control.y);
|
||||
|
||||
let lineDash;
|
||||
if (control.properties?.stroke === 'dotted') lineDash = '0.8, 8';
|
||||
else if (control.properties?.stroke === 'dashed') lineDash = '18, 30';
|
||||
|
||||
makeSVGElement(
|
||||
'path',
|
||||
{
|
||||
d: `M${x} ${y}L${x + parseInt(control.w ?? control.measuredW)} ${y}`,
|
||||
fill: 'none',
|
||||
stroke: this.parseColor(control.properties?.color, '0,0,0'),
|
||||
'stroke-width': BORDER_WIDTH,
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
'stroke-dasharray': lineDash,
|
||||
},
|
||||
container
|
||||
);
|
||||
}
|
||||
|
||||
__group__(control: any, container: any) {
|
||||
const controlName = control?.properties?.controlName;
|
||||
|
||||
let group = makeSVGElement(
|
||||
'g',
|
||||
{
|
||||
...(controlName
|
||||
? { class: 'clickable-group', 'data-group-name': controlName }
|
||||
: {}),
|
||||
},
|
||||
container
|
||||
);
|
||||
|
||||
control.children.controls.control
|
||||
.sort((a: any, b: any) => {
|
||||
return a.zOrder - b.zOrder;
|
||||
})
|
||||
.forEach((childControl: any) => {
|
||||
childControl.x = parseInt(childControl.x, 10) + parseInt(control.x, 10);
|
||||
childControl.y = parseInt(childControl.y, 10) + parseInt(control.y, 10);
|
||||
|
||||
this.render(childControl, group);
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user