Started layout and rendering

demos/block.html

@@ -18,14 +18,18 @@
     <pre class="mermaid">
       block-beta
 
-      block TCP_IP["TCP/IP"]
     </pre>
-<!--
+    <!--
+      blockDiagram
+      
+      classDef background stroke-width:0;    
+
+      block(""):::background
         columns H
         ApplicationLayer("Application Layer")
         block
           columns H
-          UserInterface("User Interface (WPF, HTML5/CSS3, Swing)")
+          UserInterface("User Interface (WPF, HTML5/CSS3, Swing)"):3
         end
       end
       

packages/mermaid/src/diagrams/block/blockDB.ts

@@ -14,21 +14,23 @@ import {
   clear as commonClear,
 } from '../../commonDb.js';
 
-export type TBlockColumnsDefaultValue = 'H'; // Do we support something else, like 'auto' | 0?
+// export type TBlockColumnsDefaultValue = 'H'; // Do we support something else, like 'auto' | 0?
 
-interface Block {
-  ID: string;
+// TODO: Convert to generic TreeNode type? Convert to class?
+export interface Block {
+  ID?: string;
   label?: string;
   parent?: Block;
   children?: Block[];
-  columns: number | TBlockColumnsDefaultValue;
+  columns?: number; // | TBlockColumnsDefaultValue;
 }
 
-interface Link {
+export interface Link {
   source: Block;
   target: Block;
 }
 
+let rootBlocks: Block[] = [];
 let blocks: Block[] = [];
 let links: Link[] = [];
 
@@ -38,7 +40,13 @@ const clear = (): void => {
 };
 
 type IAddBlock = (block: Block) => Block;
-const addBlock: IAddBlock = (block: Block): Block => {
+const addBlock: IAddBlock = (block: Block, parent?: Block): Block => {
+  if(parent) {
+    parent.children ??= [];
+    parent.children.push(block);
+  } else {
+    rootBlocks.push(block);
+  }
   blocks.push(block);
   return block;
 };
@@ -49,19 +57,32 @@ const addLink: IAddLink = (link: Link): Link => {
   return link;
 };
 
+type IGetBlocks = () => Block[];
+const getBlocks:IGetBlocks = () => blocks;
+
+type IGetLinks = () => Link[];
+const getLinks:IGetLinks = () => links;
+
+type IGetLogger = () => Console;
+const getLogger:IGetLogger = () => console;
+
 export interface BlockDB extends DiagramDB {
   clear: () => void;
   getConfig: () => BlockConfig | undefined;
   addBlock: IAddBlock;
   addLink: IAddLink;
-  getLogger: () => Console;
+  getLogger: IGetLogger;
+  getBlocks: IGetBlocks;
+  getLinks: IGetLinks;
 }
 
 const db: BlockDB = {
   getConfig: () => configApi.getConfig().block,
   addBlock: addBlock,
   addLink: addLink,
-  getLogger: () => console, // TODO: remove
+  getLogger, // TODO: remove
+  getBlocks,
+  getLinks,
   // getAccTitle,
   // setAccTitle,
   // getAccDescription,

packages/mermaid/src/diagrams/block/blockRenderer.ts

@@ -7,6 +7,9 @@ import {
   schemeTableau10 as d3schemeTableau10,
 } from 'd3';
 
+import { BlockDB, Block } from './blockDB.js';
+
+// import { diagram as BlockDiagram } from './blockDiagram.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import { Uid } from '../../rendering-util/uid.js';
 
@@ -39,8 +42,118 @@ export const draw = function (text: string, id: string, _version: string, diagOb
 
   // const nodeWidth = 10;
 
+  // Create rectangles for nodes
+  // const db:BlockDB = diagObj.db;
+
+  interface LayedBlock extends Block {
+    children?: LayedBlock[];
+    x?: number;
+    y?: number;
+  }
+
+  const blocks: LayedBlock[] = [
+    {
+      ID: "ApplicationLayer",
+      label: "Application Layer",
+      x: 0,
+      y: 0,
+      children: [
+        {
+          ID: "UserInterface",
+          label: "User Interface (WPF, HTML5/CSS3, Swing)",
+          x: 0,
+          y: 50,    
+        }
+      ],
+    },
+    {
+      ID: "PresentationLayer",
+      label: "Presentation Layer",
+      x: 0,
+      y: 50,
+      children: [
+        {
+          ID: "Smack",
+          label: "J2SE Mobil App (Smack)"
+        },
+        {
+          ID: "JsJAC",
+          label: "Java Script Browser App (JsJAC)",
+        },
+        {
+          ID: "babelim",
+          label: ".NET Windows App (Babel-im)",
+        },
+      ]
+    },
+    {
+      ID: "SessionLayer",
+      label: "Session Layer",
+      x: 0,
+      y: 100,
+      children: [
+        {
+          ID: "XMPP",
+          label: "XMPP Component"
+        },
+        {
+          children: [
+            {
+              ID: "Authentication",
+              label: "Authentication",
+            },
+            {
+              ID: "Authorization",
+              label: "Authorization",
+            },
+          ]
+        },
+        {
+          ID: "LDAP",
+          label: "LDAP, DB, POP",
+        },
+      ]
+    },
+    {
+      ID: "NetworkLayer",
+      label: "Network Layer",
+      x: 0,
+      y: 150,
+      children: [
+        { ID: "HTTP", label: "HTTP" },
+        { ID: "SOCK", label: "SOCK" },
+      ]
+    },
+    {
+      ID: "DataLayer",
+      label: "Data Layer",
+      x: 0,
+      y: 200,
+      children: [
+        { ID: "XMPP", label: "XMPP" },
+        { ID: "BDB", label: "Business DB" },
+        { ID: "AD", label: "Active Directory" },
+      ]
+    },
+  ];
+
   // Get color scheme for the graph
-  // const colorScheme = d3scaleOrdinal(d3schemeTableau10);
+  const colorScheme = d3scaleOrdinal(d3schemeTableau10);
+
+  svg
+    .append('g')
+    .attr('class', 'block')
+    .selectAll('.block')
+    .data(blocks)
+    .join('rect')
+    .attr('x', (d: any) => d.x || 0)
+    .attr('y', (d: any) => d.y || 0)
+    .attr('class', 'block')
+    .attr('stroke', 'black')
+    .attr('height', (d: any) => 50)
+    .attr('width', (d: any) => 100)
+    .attr('fill', (d: any) => colorScheme(d.ID));
+
 };
 
 export default {