faet: drop background

dprint.json

@@ -6,6 +6,7 @@
     "useTabs": false,
     "trailingCommas": "never",
     "module.sortImportDeclarations": "maintain",
+    "importDeclaration.sortNamedImports": "maintain",
     "operatorPosition": "maintain",
     "jsx.quoteStyle": "preferDouble",
     "functionDeclaration.spaceBeforeParentheses": false

src/client/components/treemap/interface.ts

@@ -2,12 +2,13 @@ import { Module as _Module } from '../../interface'
 
 export interface Module extends _Module {
   layout?: [number, number, number, number]
-  [prop: string]: any
   groups: Module[]
+  size: number
+  [prop: string]: any
 }
 
 export interface SquarifiedModule {
-  node: Omit<Module, 'groups'>
+  node: Omit<_Module, 'groups'>
   layout: [number, number, number, number]
   children: SquarifiedModule[]
 }

src/client/components/treemap/shared.ts

@@ -9,3 +9,10 @@ export function hueAngleToColor(hueAngle: number) {
   const lightness = 0.5 + 0.2 * Math.max(0, Math.cos(hueAngle + Math.PI * 2 / 3))
   return 'hsl(' + hueAngle * 180 / Math.PI + 'deg, ' + Math.round(100 * saturation) + '%, ' + Math.round(100 * lightness) + '%)'
 }
+
+export const STYLES = {
+  PADDING: 5,
+  HEAD_HEIGHT: 20,
+  INSET_X: 10,
+  INSET_Y: 20 + 5
+}

src/client/components/treemap/squared.ts

@@ -1,3 +1,4 @@
+import { STYLES } from './shared'
 import type { Module, SquarifiedModule } from './interface'
 
 function recursion<T extends Module>(data: T[], x: number, y: number, w: number, h: number): SquarifiedModule[] {
@@ -34,7 +35,6 @@ function recursion<T extends Module>(data: T[], x: number, y: number, w: number,
         oldWorst = newWorst
         end++
       }
-
       const split = Math.round(areaInRun / shortSide)
       let areaInLayout = 0
       for (let i = start; i < end; i++) {
@@ -48,9 +48,9 @@ function recursion<T extends Module>(data: T[], x: number, y: number, w: number,
         const { groups, ...rest } = node
         squarifiedData.push({
           node: rest,
-          layout: [cx + 4, cy + 20, cw - 8, ch - 24],
-          children: cw > 8 && ch > 24
-            ? recursion(groups, cx, cy, cw, ch)
+          layout: [cx, cy, cw, ch],
+          children: cw > STYLES.INSET_X && ch > STYLES.INSET_Y
+            ? recursion(groups, cx + STYLES.PADDING, cy + STYLES.HEAD_HEIGHT, cw - STYLES.INSET_X, ch - STYLES.INSET_Y)
             : []
         })
         areaInLayout += area

src/client/components/treemap/treemap.ts

@@ -6,7 +6,7 @@
 // https://www.win.tue.nl/~vanwijk/stm.pdf
 
 import type { Module, SquarifiedModule } from './interface'
-import { assignColorMaapings, hueAngleToColor } from './shared'
+import { STYLES, hueAngleToColor } from './shared'
 import { squarify } from './squared'
 
 interface Shape {
@@ -39,29 +39,26 @@ export class Paint {
   }
 
   private drawNodeBackground(node: SquarifiedModule) {
-    //
     const [x, y, w, h] = node.layout
     for (const child of node.children) {
       this.drawNodeBackground(child)
     }
+    this.context.fillStyle = this.colorMapping[node.node.filename]
     if (node.children.length) {
-      //
-      this.context.fillStyle = 'hsl(180deg, 100%, 50%)'
-      this.context.fillRect(x, y, w, 20)
-      this.context.fillRect(x, y + h - 4, w, 4)
-      this.context.fillRect(x, y + 20, 4, h - 24)
-      this.context.fillRect(x + w - 4, y + 20, 4, h - 24)
+      this.context.fillRect(x, y, w, STYLES.HEAD_HEIGHT)
+      this.context.fillRect(x, y + h - STYLES.PADDING, w, STYLES.PADDING)
+      this.context.fillRect(x, y + STYLES.HEAD_HEIGHT, STYLES.PADDING, h - STYLES.INSET_Y)
+      this.context.fillRect(x + w - STYLES.PADDING, y + STYLES.HEAD_HEIGHT, STYLES.PADDING, h - STYLES.INSET_Y)
     } else {
-      this.context.fillStyle = this.colorMapping[node.node.filename]
+      // this.context.fillStyle = this.colorMapping[node.node.filename]
       this.context.fillRect(x, y, w, h)
       // console.log(this.colorMapping[node.node.filename], node.node.filename)
     }
   }
 
   private draw() {
-    // cleanup layout
-    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
     console.log(this.layoutNodes)
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
     for (const node of this.layoutNodes) {
       this.drawNodeBackground(node)
       // this.context.fillStyle = this.colorMapping[node.node.filename]
@@ -122,7 +119,13 @@ export class Paint {
     this.canvas.style.cssText = `width: ${w}px; height: ${h}px`
     this.context.scale(ratio, ratio)
     if (w !== prviousShape.width || h !== prviousShape.height) {
-      this.layoutNodes = squarify(this.data, 0, 0, this.shape.width, this.shape.height)
+      this.layoutNodes = squarify(
+        this.data,
+        STYLES.PADDING,
+        STYLES.PADDING,
+        this.shape.width - STYLES.INSET_X,
+        this.shape.height - STYLES.INSET_X
+      )
     }
     this.draw()
   }