Roadmap to becoming a developer in 2022
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

283 lines
7.3 KiB

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);
});
}
}