feat: adding support for Markdown / latex / block strings / code in s…

…hapes and icons

README.md

@@ -67,8 +67,8 @@ alphabet -> google
 - [x] Containers (nodes/links in nodes)
 - [x] Shapes in shapes
 - [x] Arrow directions
-- [ ] Markdown / block strings / code in shapes
-- [ ] Icons in shapes
+- [x] Markdown / latex / block strings / code in shapes
+- [x] Icons in shapes
 - [ ] SQL table shapes
 - [ ] Class shapes
 - [ ] Comments

dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.D2Connection = exports.D2Shape = exports.D2Diagram = exports.Direction = exports.Shape = void 0;
+exports.D2Connection = exports.D2Text = exports.D2Shape = exports.D2Diagram = exports.Direction = exports.Shape = void 0;
 const Shape_1 = __importDefault(require("./src/Enum/Shape"));
 exports.Shape = Shape_1.default;
 const Direction_1 = __importDefault(require("./src/Enum/Direction"));
@@ -12,5 +12,7 @@ const D2Diagram_1 = __importDefault(require("./src/D2Diagram"));
 exports.D2Diagram = D2Diagram_1.default;
 const D2Shape_1 = __importDefault(require("./src/D2Shape"));
 exports.D2Shape = D2Shape_1.default;
+const D2Text_1 = __importDefault(require("./src/D2Text"));
+exports.D2Text = D2Text_1.default;
 const D2Connection_1 = __importDefault(require("./src/D2Connection"));
 exports.D2Connection = D2Connection_1.default;

dist/src/D2Shape.js

@@ -10,6 +10,8 @@ class D2Shape {
         this.connections = [];
         this.style = style;
         this.near = near;
+        this.texts = [];
+        this.icon = "";
     }
     addShape(shape) {
         // @ts-ignore
@@ -19,12 +21,25 @@ class D2Shape {
         // @ts-ignore
         this.connections.push(connection);
     }
+    setIcon(icon) {
+        this.icon = icon;
+    }
+    addText(text) {
+        // @ts-ignore
+        this.texts.push(text);
+    }
     lines() {
         // @ts-ignore
         let shapes = (0, helpers_1.flatten)(this.shapes.map(shape => shape.lines()));
         // @ts-ignore
         let connections = (0, helpers_1.flatten)(this.connections.map(connection => connection.lines()));
+        // @ts-ignore
+        let texts = (0, helpers_1.flatten)(this.texts.map(text => text.lines()));
         let properties = shapes.concat(connections);
+        properties = texts.concat(properties);
+        if (this.icon !== "") {
+            properties.push(`icon: ${this.icon}`);
+        }
         if (this.shape) {
             properties.push(`shape: ${this.shape}`);
         }
@@ -34,8 +49,7 @@ class D2Shape {
         if (this.style) {
             properties.push(...this.style.lines());
         }
-        let lines = (0, helpers_1.addLabelAndProperties)(this.name, this.label, properties);
-        return lines;
+        return (0, helpers_1.addLabelAndProperties)(this.name, this.label, properties);
     }
     toString() {
         return this.lines().join("\n");

dist/src/D2Text.js

@@ -1,14 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 class D2Text {
-    constructor(text, format, pipes = 1) {
+    constructor(property, text, format, pipes = 1) {
+        this.property = property;
         this.text = text;
         this.format = format;
         this.pipes = pipes;
     }
     lines() {
         let sep = "|".repeat(this.pipes);
-        return [`${sep}${this.format}`, ...this.text.split("\n"), sep];
+        return [`${this.property}:${sep}${this.format}`, ...this.text.split("\n"), sep];
     }
     toString() {
         return this.lines().join("\n");

index.ts

@@ -3,6 +3,7 @@ import Direction from "./src/Enum/Direction";
 
 import D2Diagram from "./src/D2Diagram";
 import D2Shape from "./src/D2Shape";
+import D2Text from "./src/D2Text";
 import D2Connection from "./src/D2Connection";
 
-export {Shape, Direction, D2Diagram, D2Shape, D2Connection};
+export {Shape, Direction, D2Diagram, D2Shape, D2Text, D2Connection};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "d2lang-js",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "An unofficial interface for building D2 diagram files in javascript",
   "keywords": [
     "d2lang",
@@ -22,7 +22,7 @@
   },
   "main": "./dist/index.js",
   "devDependencies": {
-    "@types/node": "^18.11.18",
-    "typescript": "^4.9.4"
+    "@types/node": "^20.3.1",
+    "typescript": "^5.1.3"
   }
 }

src/D2Shape.ts

@@ -2,21 +2,25 @@ import Shape from "./Enum/Shape";
 import D2Connection from "./D2Connection";
 import D2Style from "./D2Style";
 import {addLabelAndProperties, flatten} from "./helpers";
+import D2Text from "./D2Text";
+
 class D2Shape {
     name: string;
     label?: string;
     shape?: Shape;
+    icon?: string;
     shapes?: D2Shape[];
     connections?: D2Connection[];
     style?: D2Style;
     near?: string;
+    texts?: D2Text[];
 
     constructor(
         name: string,
         label?: string,
         shape?: Shape,
         style?: D2Style,
-        near?: string,
+        near?: string
     ) {
         this.name = name;
         this.label = label;
@@ -25,6 +29,8 @@ class D2Shape {
         this.connections = [];
         this.style = style;
         this.near = near;
+        this.texts = [];
+        this.icon = "";
     }
     addShape(shape: D2Shape): void {
         // @ts-ignore
@@ -36,14 +42,32 @@ class D2Shape {
         this.connections.push(connection);
     }
 
+    setIcon(icon: string): void {
+        this.icon = icon;
+    }
+
+    addText(text: D2Text): void {
+        // @ts-ignore
+        this.texts.push(text);
+    }
+
     lines(): string[] {
         // @ts-ignore
         let shapes = flatten(this.shapes.map(shape => shape.lines()));
         // @ts-ignore
         let connections = flatten(this.connections.map(connection => connection.lines()));
 
+        // @ts-ignore
+        let texts = flatten(this.texts.map(text => text.lines()));
+
         let properties = shapes.concat(connections);
 
+        properties = texts.concat(properties);
+
+        if (this.icon !== "") {
+            properties.push(`icon: ${this.icon}`);
+        }
+
         if (this.shape) {
             properties.push(`shape: ${this.shape}`);
         }
@@ -56,9 +80,7 @@ class D2Shape {
             properties.push(...this.style.lines());
         }
 
-        let lines = addLabelAndProperties(this.name, this.label, properties);
-
-        return lines;
+        return addLabelAndProperties(this.name, this.label, properties);
     }
     toString(): string {
         return this.lines().join("\n");

src/D2Text.ts

@@ -1,17 +1,19 @@
 class D2Text {
+    property: string;
     text: string;
     format: string;
     pipes: number;
 
-    constructor(text: string, format: string, pipes: number = 1) {
+    constructor(property: string, text: string, format: string, pipes: number = 1) {
+        this.property = property;
         this.text = text;
         this.format = format;
         this.pipes = pipes;
     }
 
     lines(): string[] {
         let sep = "|".repeat(this.pipes);
-        return [`${sep}${this.format}`, ...this.text.split("\n"), sep];
+        return [`${this.property}:${sep}${this.format}`, ...this.text.split("\n"), sep];
     }
 
     toString(): string {