feat: limit visible levels optionally

davidenke · Oct 23, 2024 · 927c5d7 · 927c5d7
1 parent 3ec7f77
commit 927c5d7
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 5 deletions.
diff --git a/src/components/root/root.component.ts b/src/components/root/root.component.ts
@@ -26,6 +26,7 @@ export class Root extends LitElement {
 
   @state()
   conversionOptions: ConversionOptions = {
+    useUntilLevel: Infinity,
     useHeadlinesUntilLevel: 2,
     useOrderedListsUntilLevel: 4,
     useUnorderedListsUntilLevel: Infinity,
@@ -63,9 +64,22 @@ export class Root extends LitElement {
     this.#listeners.forEach(remove => remove());
   }
 
+  @eventOptions({ passive: true })
+  setVisibilityLevel({ detail: value }: CustomEvent<number>) {
+    const useUntilLevel = Math.max(1, value ?? Infinity);
+    this.conversionOptions = {
+      ...this.conversionOptions,
+      useUntilLevel,
+      useHeadlinesUntilLevel: Math.min(useUntilLevel, this.conversionOptions.useHeadlinesUntilLevel) as 0,
+      useOrderedListsUntilLevel: Math.min(useUntilLevel, this.conversionOptions.useOrderedListsUntilLevel),
+      useUnorderedListsUntilLevel: Math.min(useUntilLevel, this.conversionOptions.useUnorderedListsUntilLevel),
+    };
+    this.renderContents();
+  }
+
   @eventOptions({ passive: true })
   setHeadlineLevel({ detail: value }: CustomEvent<number>) {
-    const useHeadlinesUntilLevel = (value as 0) ?? 2;
+    const useHeadlinesUntilLevel = Math.min(this.conversionOptions.useUntilLevel, value ?? 2) as 0;
     this.conversionOptions = {
       ...this.conversionOptions,
       useHeadlinesUntilLevel,
@@ -77,13 +91,19 @@ export class Root extends LitElement {
 
   @eventOptions({ passive: true })
   setOrderedListLevel({ detail: value }: CustomEvent<number>) {
-    this.conversionOptions = { ...this.conversionOptions, useOrderedListsUntilLevel: value ?? 4 };
+    this.conversionOptions = {
+      ...this.conversionOptions,
+      useOrderedListsUntilLevel: Math.min(this.conversionOptions.useUntilLevel, value ?? 4),
+    };
     this.renderContents();
   }
 
   @eventOptions({ passive: true })
   setUnorderedListLevel({ detail: value }: CustomEvent<number>) {
-    this.conversionOptions = { ...this.conversionOptions, useUnorderedListsUntilLevel: value ?? Infinity };
+    this.conversionOptions = {
+      ...this.conversionOptions,
+      useUnorderedListsUntilLevel: Math.min(this.conversionOptions.useUntilLevel, value ?? Infinity),
+    };
     this.renderContents();
   }
 
@@ -132,10 +152,18 @@ export class Root extends LitElement {
           () => html`
             <xlp-preview>${unsafeHTML(this.contents)}</xlp-preview>
             <xlp-tool-bar role="navigation" hide-after="2000">
+              <xlp-numeric-stepper
+                @change="${this.setVisibilityLevel}"
+                min="1"
+                value="${this.conversionOptions.useUntilLevel}"
+              >
+                <xlp-icon>visibility</xlp-icon>
+              </xlp-numeric-stepper>
+
               <xlp-numeric-stepper
                 @change="${this.setHeadlineLevel}"
                 min="0"
-                max="6"
+                max="${Math.max(this.conversionOptions.useUntilLevel, 6)}"
                 value="${this.conversionOptions.useHeadlinesUntilLevel}"
               >
                 <xlp-icon>title</xlp-icon>
@@ -144,6 +172,7 @@ export class Root extends LitElement {
               <xlp-numeric-stepper
                 @change="${this.setOrderedListLevel}"
                 min="${this.conversionOptions.useHeadlinesUntilLevel}"
+                max="${this.conversionOptions.useUntilLevel}"
                 value="${this.conversionOptions.useOrderedListsUntilLevel}"
               >
                 <xlp-icon>format_list_numbered</xlp-icon>
@@ -152,6 +181,7 @@ export class Root extends LitElement {
               <xlp-numeric-stepper
                 @change="${this.setUnorderedListLevel}"
                 min="${this.conversionOptions.useHeadlinesUntilLevel}"
+                max="${this.conversionOptions.useUntilLevel}"
                 value="${this.conversionOptions.useUnorderedListsUntilLevel}"
               >
                 <xlp-icon>format_list_bulleted</xlp-icon>

diff --git a/src/utils/conversion.utils.ts b/src/utils/conversion.utils.ts
@@ -6,6 +6,13 @@ import type { Sheet, Topic, Workbook } from 'xmind-model';
 export type MindMap = Workbook;
 
 export type ConversionOptions = {
+  /**
+   * Topics until this level will be visible.
+   * Minimum value is 1, no maximum value, default is Infinity.
+   * @default Infinity
+   */
+  useUntilLevel: number;
+
   /**
    * Topics until this level will be rendered as headlines.
    * Minimum value is 0, maximum value is 6, default is 2.
@@ -30,6 +37,7 @@ export type ConversionOptions = {
 
 export function conversionOptionsWithDefaults(options: Partial<ConversionOptions> = {}): ConversionOptions {
   return {
+    useUntilLevel: Infinity,
     useHeadlinesUntilLevel: 2,
     useOrderedListsUntilLevel: 4,
     useUnorderedListsUntilLevel: Infinity,
@@ -59,12 +67,14 @@ export function convertSheetToMarkdown(sheet: Sheet, options: ConversionOptions)
  * Convert a single given topic into markdown.
  */
 export function convertTopicToMarkdown(topic: Topic, level: number, options: ConversionOptions): string {
+  const { useUntilLevel } = options;
   const text = convertTopicByLevel(topic, level, options);
+  if (level >= useUntilLevel) return text;
+
   const attachedTopics = topic
     .getChildrenByType(['attached'])
     .map(child => convertTopicToMarkdown(child, level + 1, options))
     .join('');
-
   return `${text}${attachedTopics}`;
 }