chore(react):start porting note map

apps/client/src/widgets/note_map.ts

@@ -13,85 +13,18 @@ import type FNote from "../entities/fnote.js";
 const esc = utils.escapeHtml;
 
 const TPL = /*html*/`<div class="note-map-widget">
-    <style>
-        .note-detail-note-map {
-            height: 100%;
-            overflow: hidden;
-        }
-
-        /* Style Ui Element to Drag Nodes */
-        .fixnodes-type-switcher {
-            display: flex;
-            align-items: center;
-            z-index: 10; /* should be below dropdown (note actions) */
-            border-radius: .2rem;
-        }
-
-        .fixnodes-type-switcher button.toggled {
-            background: var(--active-item-background-color);
-            color: var(--active-item-text-color);
-        }
-
-        /* Start of styling the slider */
-        .fixnodes-type-switcher input[type="range"] {
-
-            /* removing default appearance */
-            -webkit-appearance: none;
-            appearance: none;
-            margin-left: 15px;
-            width: 150px;
-        }
-
-        /* Changing slider tracker */
-        .fixnodes-type-switcher input[type="range"]::-webkit-slider-runnable-track {
-            height: 4px;
-            background-color: var(--main-border-color);
-            border-radius: 4px;
-        }
-
-        /* Changing Slider Thumb */
-        .fixnodes-type-switcher input[type="range"]::-webkit-slider-thumb {
-            /* removing default appearance */
-            -webkit-appearance: none;
-            appearance: none;
-            /* creating a custom design */
-            height: 15px;
-            width: 15px;
-            margin-top:-5px;
-            background-color: var(--accented-background-color);
-            border: 1px solid var(--main-text-color);
-            border-radius: 50%;
-        }
-
-        .fixnodes-type-switcher input[type="range"]::-moz-range-track {
-            background-color: var(--main-border-color);
-            border-radius: 4px;
-        }
-
-        .fixnodes-type-switcher input[type="range"]::-moz-range-thumb {
-            background-color: var(--accented-background-color);
-            border-color: var(--main-text-color);
-            height: 10px;
-            width: 10px;
-        }
-
-        /* End of styling the slider */
-
-    </style>
-
     <div class="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group">
       <button type="button" class="btn bx bx-network-chart tn-tool-button" title="${t("note-map.button-link-map")}" data-type="link"></button>
       <button type="button" class="btn bx bx-sitemap tn-tool-button" title="${t("note-map.button-tree-map")}" data-type="tree"></button>
     </div>
 
-    <! UI for dragging Notes and link force >
+    <!-- UI for dragging Notes and link force -->
 
     <div class="btn-group-sm fixnodes-type-switcher content-floating-buttons bottom-left" role="group">
       <button type="button" data-toggle="button" class="btn bx bx-lock-alt tn-tool-button" title="${t("note_map.fix-nodes")}" data-type="moveable"></button>
       <input type="range" class="slider" min="1" title="${t("note_map.link-distance")}" max="100" value="40" >
     </div>
 
-    <div class="style-resolver"></div>
 
     <div class="note-map-container"></div>
 </div>`;
@@ -148,12 +81,6 @@ interface GroupedLink {
     names: string[];
 }
 
-interface CssData {
-    fontFamily: string;
-    textColor: string;
-    mutedTextColor: string;
-}
-
 export default class NoteMapWidget extends NoteContextAwareWidget {
 
     private fixNodes: boolean;
@@ -220,12 +147,6 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
     async refreshWithNote(note: FNote) {
         this.$widget.show();
 
-        this.cssData = {
-            fontFamily: this.$container.css("font-family"),
-            textColor: this.rgb2hex(this.$container.css("color")),
-            mutedTextColor: this.rgb2hex(this.$styleResolver.css("color"))
-        };
-
         this.mapType = note.getLabelValue("mapType") === "tree" ? "tree" : "link";
 
         //variables for the hover effekt. We have to save the neighbours of a hovered node in a set. Also we need to save the links as well as the hovered node itself
@@ -397,13 +318,6 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
         return color;
     }
 
-    rgb2hex(rgb: string) {
-        return `#${(rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) || [])
-            .slice(1)
-            .map((n) => parseInt(n, 10).toString(16).padStart(2, "0"))
-            .join("")}`;
-    }
-
     setZoomLevel(level: number) {
         this.zoomLevel = level;
     }

apps/client/src/widgets/note_map/NoteMap.css

@@ -0,0 +1,62 @@
+.note-detail-note-map {
+            height: 100%;
+    overflow: hidden;
+}
+
+/* Style Ui Element to Drag Nodes */
+.fixnodes-type-switcher {
+    display: flex;
+    align-items: center;
+    z-index: 10; /* should be below dropdown (note actions) */
+    border-radius: .2rem;
+}
+
+.fixnodes-type-switcher button.toggled {
+    background: var(--active-item-background-color);
+    color: var(--active-item-text-color);
+}
+
+/* Start of styling the slider */
+.fixnodes-type-switcher input[type="range"] {
+
+    /* removing default appearance */
+    -webkit-appearance: none;
+    appearance: none;
+    margin-left: 15px;
+    width: 150px;
+}
+
+/* Changing slider tracker */
+.fixnodes-type-switcher input[type="range"]::-webkit-slider-runnable-track {
+    height: 4px;
+    background-color: var(--main-border-color);
+    border-radius: 4px;
+}
+
+/* Changing Slider Thumb */
+.fixnodes-type-switcher input[type="range"]::-webkit-slider-thumb {
+    /* removing default appearance */
+    -webkit-appearance: none;
+    appearance: none;
+    /* creating a custom design */
+    height: 15px;
+    width: 15px;
+    margin-top:-5px;
+    background-color: var(--accented-background-color);
+    border: 1px solid var(--main-text-color);
+    border-radius: 50%;
+}
+
+.fixnodes-type-switcher input[type="range"]::-moz-range-track {
+    background-color: var(--main-border-color);
+    border-radius: 4px;
+}
+
+.fixnodes-type-switcher input[type="range"]::-moz-range-thumb {
+    background-color: var(--accented-background-color);
+    border-color: var(--main-text-color);
+    height: 10px;
+    width: 10px;
+}
+
+/* End of styling the slider */

apps/client/src/widgets/note_map/NoteMap.tsx

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import "./NoteMap.css";
+import { rgb2hex } from "./utils";
+
+interface CssData {
+    fontFamily: string;
+    textColor: string;
+    mutedTextColor: string;
+}
+
+export default function NoteMap() {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const styleResolverRef = useRef<HTMLDivElement>(null);
+    const [ cssData, setCssData ] = useState<CssData>();
+    console.log("Got CSS ", cssData);
+
+    useEffect(() => {
+        if (!containerRef.current || !styleResolverRef.current) return;
+        setCssData(getCssData(containerRef.current, styleResolverRef.current));
+    }, []);
+
+    return (
+        <div className="note-map-widget">
+            <div ref={styleResolverRef} class="style-resolver" />
+
+            <div ref={containerRef} className="note-map-container">
+                Container goes here.
+            </div>
+        </div>
+    )
+}
+
+function getCssData(container: HTMLElement, styleResolver: HTMLElement): CssData {
+    const containerStyle = window.getComputedStyle(container);
+    const styleResolverStyle = window.getComputedStyle(styleResolver);
+
+    return {
+        fontFamily: containerStyle.fontFamily,
+        textColor: rgb2hex(containerStyle.color),
+        mutedTextColor: rgb2hex(styleResolverStyle.color)
+    }
+}

apps/client/src/widgets/note_map/utils.ts

@@ -0,0 +1,6 @@
+export function rgb2hex(rgb: string) {
+    return `#${(rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) || [])
+        .slice(1)
+        .map((n) => parseInt(n, 10).toString(16).padStart(2, "0"))
+        .join("")}`;
+}

apps/client/src/widgets/ribbon/NoteMapTab.tsx

@@ -1,9 +1,9 @@
 import { TabContext } from "./ribbon-interface";
-import NoteMapWidget from "../note_map";
 import { useElementSize, useLegacyWidget, useWindowSize } from "../react/hooks";
 import ActionButton from "../react/ActionButton";
 import { t } from "../../services/i18n";
 import { useEffect, useRef, useState } from "preact/hooks";
+import NoteMap from "../note_map/NoteMap";
 
 const SMALL_SIZE_HEIGHT = "300px";
 
@@ -14,11 +14,6 @@ export default function NoteMapTab({ noteContext }: TabContext) {
     const { windowHeight } = useWindowSize();
     const containerSize = useElementSize(containerRef);
 
-    const [ noteMapContainer, noteMapWidget ] = useLegacyWidget(() => new NoteMapWidget("ribbon"), {
-        noteContext,
-        containerClassName: "note-map-container"
-    });
-    
     useEffect(() => {
         if (isExpanded && containerRef.current && containerSize) {
             const height = windowHeight - containerSize.top;
@@ -27,11 +22,11 @@ export default function NoteMapTab({ noteContext }: TabContext) {
             setHeight(SMALL_SIZE_HEIGHT);
         }
     }, [ isExpanded, containerRef, windowHeight, containerSize?.top ]);
-    useEffect(() => noteMapWidget.setDimensions(), [ containerSize?.width, height ]);    
+    // useEffect(() => noteMapWidget.setDimensions(), [ containerSize?.width, height ]);
 
     return (
         <div className="note-map-ribbon-widget" style={{ height }} ref={containerRef}>
-            {noteMapContainer}
+            <NoteMap />
 
             {!isExpanded ? (
                 <ActionButton
@@ -50,4 +45,4 @@ export default function NoteMapTab({ noteContext }: TabContext) {
             )}
         </div>
     );
-}
+}