diff --git a/apps/client/src/widgets/note_map.ts b/apps/client/src/widgets/note_map.ts index d0274fc86..6259157c6 100644 --- a/apps/client/src/widgets/note_map.ts +++ b/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*/`
- -
- +
-
`; @@ -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; } diff --git a/apps/client/src/widgets/note_map/NoteMap.css b/apps/client/src/widgets/note_map/NoteMap.css new file mode 100644 index 000000000..836444883 --- /dev/null +++ b/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 */ \ No newline at end of file diff --git a/apps/client/src/widgets/note_map/NoteMap.tsx b/apps/client/src/widgets/note_map/NoteMap.tsx new file mode 100644 index 000000000..a53893cb3 --- /dev/null +++ b/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(null); + const styleResolverRef = useRef(null); + const [ cssData, setCssData ] = useState(); + console.log("Got CSS ", cssData); + + useEffect(() => { + if (!containerRef.current || !styleResolverRef.current) return; + setCssData(getCssData(containerRef.current, styleResolverRef.current)); + }, []); + + return ( +
+
+ +
+ Container goes here. +
+
+ ) +} + +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) + } +} diff --git a/apps/client/src/widgets/note_map/utils.ts b/apps/client/src/widgets/note_map/utils.ts new file mode 100644 index 000000000..70d1caab6 --- /dev/null +++ b/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("")}`; +} diff --git a/apps/client/src/widgets/ribbon/NoteMapTab.tsx b/apps/client/src/widgets/ribbon/NoteMapTab.tsx index de7470141..93317bef7 100644 --- a/apps/client/src/widgets/ribbon/NoteMapTab.tsx +++ b/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 (
- {noteMapContainer} + {!isExpanded ? ( ); -} \ No newline at end of file +}