Add interactive roadmap setup

lib/renderer/constants.ts

@@ -0,0 +1,18 @@
+export const FONT_SIZE = '13px';
+export const BORDER_WIDTH = 2.7;
+export const ARROW_WIDTH = 4;
+export const RECT_RADIUS = 2;
+
+export const DEFAULT_COLORS: Record<string, any> = {
+  black: ['#000'],
+  gray: ['#000', '#333', '#666', '#999', '#ccc', '#ddd', '#eee'],
+  white: ['#fff'],
+  red: ['#cf2a27', '#ea9999', '#eo6666', '#cc0000', '#990000', '#660000'],
+  orange: ['#ff9900', '#f9cb9c', '#f6b26b', '#e69138', '#b45f06', '#783f04'],
+  yellow: ['#ffff00', '#ffe599', '#ffd966', '#f1c232', '#bf9000', '#7f6000'],
+  green: ['#009e0f', '#b6d7a8', '#93c47d', '#6aa84f', '#38761d', '#274e13'],
+  cyan: ['#00ffff', '#a2c4c9', '#76a5af', '#45818e', '#134f5c', '#0c343d'],
+  blue: ['#2b78e4', '#9fc5f8', '#6fa8dc', '#597eaa', '#085394', '#073763'],
+  purple: ['#9900ff', '#b4a7d6', '#8e7cc3', '#674ea7', '#351c75', '#20124d'],
+  pink: ['#ff00ff', '#d5a6bd', '#c27ba0', '#a64d79', '#741b47', '#4c1130'],
+};

lib/renderer/index.ts

@@ -0,0 +1,54 @@
+import { Renderer } from './renderer';
+import { makeSVGElement } from './utils';
+
+/**
+ * @param {Object} wireframe - Wireframe JSON
+ * @param {Object} options - Config object
+ * @param {number} [options.padding=5] - Padding for the SVG element
+ * @param {string} [options.fontFamily=balsamiq]
+ * @param {string} [options.fontURL=https://fonts.gstatic.com/s/balsamiqsans/v3/P5sEzZiAbNrN8SB3lQQX7Pncwd4XIA.woff2]
+ * @returns {Promise} Resolves SVG element
+ */
+export async function wireframeJSONToSVG(
+  wireframe: any,
+  options: { padding?: number; fontFamily?: string; fontURL?: string } = {}
+) {
+  options = {
+    padding: 5,
+    fontFamily: 'balsamiq',
+    fontURL: '/fonts/balsamiq.woff2',
+    ...options,
+  };
+
+  if (options.fontURL) {
+    let font = new FontFace(options.fontFamily!, `url(${options.fontURL})`);
+    await font.load();
+    document.fonts.add(font);
+  }
+
+  let mockup = wireframe.mockup;
+
+  let x = mockup.measuredW - mockup.mockupW - options.padding!;
+  let y = mockup.measuredH - mockup.mockupH - options.padding!;
+  let width = parseInt(mockup.mockupW) + options.padding! * 2;
+  let height = parseInt(mockup.mockupH) + options.padding! * 2;
+
+  let svgRoot = makeSVGElement('svg', {
+    xmlns: 'http://www.w3.org/2000/svg',
+    'xmlns:xlink': 'http://www.w3.org/1999/xlink',
+    viewBox: `${x} ${y} ${width} ${height}`,
+    style: 'font-family: balsamiq',
+  });
+
+  let renderer = new Renderer(svgRoot, options.fontFamily!);
+
+  mockup.controls.control
+    .sort((a: any, b: any) => {
+      return a.zOrder - b.zOrder;
+    })
+    .forEach((control: any) => {
+      renderer.render(control, svgRoot);
+    });
+
+  return svgRoot;
+}

lib/renderer/renderer.ts

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

lib/renderer/utils.ts

@@ -0,0 +1,28 @@
+export function getRGBFromDecimalColor(color: number) {
+  let red = (color >> 16) & 0xff;
+  let green = (color >> 8) & 0xff;
+  let blue = color & 0xff;
+  return `rgb(${red},${green},${blue})`;
+}
+
+export function makeSVGElement(
+  type: string,
+  attributes: Record<string, any> = {},
+  parent?: any
+): SVGElement {
+  let element = document.createElementNS('http://www.w3.org/2000/svg', type);
+
+  for (let prop in attributes) {
+    if (!attributes.hasOwnProperty(prop)) {
+      continue;
+    }
+
+    element.setAttribute(prop, attributes[prop]);
+  }
+
+  if (parent) {
+    parent.appendChild(element);
+  }
+
+  return element;
+}