add search module bar into landscape screen

src/main/style/atom/chip/_chip.scss

@@ -7,6 +7,7 @@ $jhlite-anchor-point-border-size: 3px;
 %anchor-point {
   position: absolute;
   top: calc(50% - $jhlite-anchor-point-size);
+  z-index: 2;
   outline: solid 1px var(--jhlite-chip-default-anchor-color);
   border: $jhlite-anchor-point-border-size solid var(--jhlite-chip-bg-color);
   border-radius: $jhlite-anchor-point-size;

src/main/style/organism/landscape/_landscape.scss

@@ -1,4 +1,6 @@
+@use '../../token/breakpoint';
 @use '../../token/colors';
+@use '../../token/size';
 
 $jhlite-landscape-padding: 20px;
 $jhipster-landscape-preset-selection-top-position: 85px;
@@ -38,6 +40,26 @@ $jhlite-landscape-primary-alternative-color: colors.$jhlite-global-primary-alter
     background: var(--jhlite-chip-bg-color);
   }
 
+  .jhipster-landscape-content {
+    &--header {
+      display: none;
+    }
+  }
+
+  .jhipster-landscape-search-container {
+    display: flex;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
+  .jhipster-landscape-search {
+    display: flex;
+    align-items: center;
+    border-radius: size.$jhlite-global-size-field-radius;
+    box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
+    padding: 10px;
+  }
+
   .jhipster-landscape-connectors {
     position: absolute;
     top: $jhlite-landscape-padding;
@@ -157,8 +179,36 @@ $jhlite-landscape-primary-alternative-color: colors.$jhlite-global-primary-alter
       margin-bottom: 15px;
     }
   }
+
+  .-search-highlighted {
+    border-radius: size.$jhlite-global-size-field-radius;
+    box-shadow: 0 0 0 size.$jhlite-global-size-field-border-focus colors.$jhlite-attention-highlight-color;
+  }
 }
 
 .jhipster-landscape {
   position: relative;
 }
+
+@media screen and (min-width: breakpoint.$jhlite-global-breakpoint-small-medium) {
+  .jhipster-landscape {
+    .jhipster-landscape-content {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+
+      &--header {
+        display: flex;
+        align-items: center;
+        padding: 20px 0;
+      }
+
+      &--modules {
+        display: flex;
+        flex-grow: 1;
+        min-height: 0;
+        overflow: auto;
+      }
+    }
+  }
+}

src/main/style/token/_colors.scss

@@ -84,3 +84,4 @@ $jhlite-valid-highlight-start-color: #3ebf5a;
 $jhlite-valid-highlight-end-color: $jhlite-global-color-success;
 $jhlite-invalid-highlight-start-color: #bf3e3e;
 $jhlite-invalid-highlight-end-color: $jhlite-global-color-error;
+$jhlite-attention-highlight-color: #ffd700;

src/main/webapp/app/module/primary/landscape/Landscape.component.ts

@@ -87,6 +87,8 @@ export default defineComponent({
     const selectedPreset = ref<Preset | null>(null);
     const selectedPresetName = computed(() => selectedPreset.value?.name ?? '');
 
+    const highlightedModule = ref<ModuleSlug | null>(null);
+
     onMounted(() => {
       modules
         .landscape()
@@ -262,7 +264,7 @@ export default defineComponent({
 
     const landscapeClass = (): string => {
       const hasEmphasizedModule = emphasizedModule.value !== undefined;
-      return `jhipster-landscape-map jhlite-menu-content-template--content${hasEmphasizedModule ? ' has-emphasized-module' : ''}`;
+      return `jhipster-landscape-map jhipster-landscape-content--modules ${hasEmphasizedModule ? ' has-emphasized-module' : ''}`;
     };
 
     const modeSwitchClass = (mode: DisplayMode): string => {
@@ -308,7 +310,8 @@ export default defineComponent({
         selectionClass(module) +
         applicationClass(module) +
         flavorClass() +
-        anchorPointClass(module)
+        anchorPointClass(module) +
+        searchHighlightClass(module)
       );
     };
 
@@ -384,6 +387,13 @@ export default defineComponent({
       return ' ' + modeClass();
     };
 
+    const searchHighlightClass = (module: LandscapeElementId): string => {
+      if (highlightedModule.value && module.get() === highlightedModule.value.get()) {
+        return ' -search-highlighted';
+      }
+      return '';
+    };
+
     const modeClass = (): string => {
       switch (selectedMode.value) {
         case 'COMPACTED':
@@ -463,11 +473,7 @@ export default defineComponent({
         return true;
       }
 
-      if (missingMandatoryProperty()) {
-        return true;
-      }
-
-      return false;
+      return missingMandatoryProperty();
     };
 
     const selectedNewModulesCount = (): number => {
@@ -592,6 +598,44 @@ export default defineComponent({
       return document?.activeElement?.tagName === 'INPUT';
     };
 
+    const performSearch = (query: string) => {
+      highlightModule(query);
+    };
+
+    const highlightModule = (query: string) => {
+      if (!query) {
+        highlightedModule.value = null;
+        nextTick().then(resetLandscapeContainerPosition);
+        return;
+      }
+
+      const foundModule = findModule(query);
+      highlightedModule.value = foundModule ? new ModuleSlug(foundModule) : null;
+
+      if (foundModule) {
+        const moduleElement = landscapeElements.value.get(foundModule)!;
+        nextTick().then(() => scrollToHighlightedModule(moduleElement));
+      }
+    };
+
+    const findModule = (query: string): string | null => {
+      return [...landscapeElements.value.keys()].find(key => key.toLowerCase().includes(query.toLowerCase())) || null;
+    };
+
+    const resetLandscapeContainerPosition = (): void | PromiseLike<void> => landscapeScroller.scrollSmooth(landscapeContainer.value, 0, 0);
+
+    const scrollToHighlightedModule = (moduleElement: HTMLElement): void => {
+      const rect = moduleElement.getBoundingClientRect();
+      const containerRect = landscapeContainer.value.getBoundingClientRect();
+
+      const verticallyOutOfView = rect.top < containerRect.top || rect.bottom > containerRect.bottom;
+      const horizontallyOutOfView = rect.left < containerRect.left || rect.right > containerRect.right;
+
+      if (verticallyOutOfView || horizontallyOutOfView) {
+        landscapeScroller.scrollIntoView(moduleElement);
+      }
+    };
+
     return {
       levels,
       isFeature,
@@ -633,6 +677,7 @@ export default defineComponent({
       grabbing,
       canLoadMiniMap,
       selectedPresetName,
+      performSearch,
     };
   },
 });

src/main/webapp/app/module/primary/landscape/Landscape.html

@@ -25,68 +25,87 @@
   <div class="jhipster-landscape-preset-selection">
     <LandscapePresetConfigurationVue :selectedPresetName="selectedPresetName" @selected="selectModulesFromPreset" />
   </div>
-
-  <div
-    :class="landscapeClass()"
-    ref="landscapeContainer"
-    data-selector="landscape-container"
-    @mousedown="startGrabbing"
-    @mousemove="grabbing"
-    @mouseup="stopGrabbing"
-    @mouseleave="stopGrabbing"
-  >
-    <div class="jhipster-landscape-levels">
-      <ul class="jhipster-landscape-levels--level" :class="modeClass()" v-for="level in levels.value()">
-        <li class="jhipster-landscape-element" v-for="element in level.elements" :class="modeClass()">
-          <div
-            class="jhipster-landscape-feature"
-            :class="elementFlavor(element.slug())"
-            :data-selector="`${element.slugString()}-feature`"
-            v-if="isFeature(element)"
-            :ref="el => landscapeElements.set(element.slugString(), el)"
-          >
-            <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.slugString() }}</h2>
-            <ul class="jhipster-landscape-feature--modules">
-              <li class="jhipster-landscape-feature--module" v-for="module in element.modules">
-                <LandscapeModuleVue
-                  :module="module"
-                  :landscapeElements="landscapeElements"
-                  :moduleFlavor="elementFlavor(module.slug())"
-                  @over="emphasizeModule(module.slug())"
-                  @out="deEmphasizeModule()"
-                  @clicked="toggleModule(module.slug())"
-                  @apply="applyModule(module.slug())"
-                />
-              </li>
-            </ul>
+  <div class="jhlite-menu-content-template--content">
+    <div class="jhipster-landscape-content">
+      <div class="jhipster-landscape-content--header">
+        <div class="jhipster-landscape-search-container">
+          <div class="jhipster-landscape-search">
+            <div class="jhlite-field--field">
+              <input
+                type="text"
+                class="jhlite-input-text"
+                placeholder="Search modules..."
+                @input="performSearch($event.target.value)"
+                data-selector="landscape-search-input"
+              />
+            </div>
           </div>
+        </div>
+      </div>
 
-          <LandscapeModuleVue
-            :module="element"
-            :landscapeElements="landscapeElements"
-            :moduleFlavor="elementFlavor(element.slug())"
-            @over="emphasizeModule(element.slug())"
-            @out="deEmphasizeModule()"
-            @clicked="toggleModule(element.slug())"
-            @apply="applyModule(element.slug())"
-            v-else
+      <div
+        :class="landscapeClass()"
+        ref="landscapeContainer"
+        data-selector="landscape-container"
+        @mousedown="startGrabbing"
+        @mousemove="grabbing"
+        @mouseup="stopGrabbing"
+        @mouseleave="stopGrabbing"
+      >
+        <div class="jhipster-landscape-levels">
+          <ul class="jhipster-landscape-levels--level" :class="modeClass()" v-for="level in levels.value()">
+            <li class="jhipster-landscape-element" v-for="element in level.elements" :class="modeClass()">
+              <div
+                class="jhipster-landscape-feature"
+                :class="elementFlavor(element.slug())"
+                :data-selector="`${element.slugString()}-feature`"
+                v-if="isFeature(element)"
+                :ref="el => landscapeElements.set(element.slugString(), el)"
+              >
+                <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.slugString() }}</h2>
+                <ul class="jhipster-landscape-feature--modules">
+                  <li class="jhipster-landscape-feature--module" v-for="module in element.modules">
+                    <LandscapeModuleVue
+                      :module="module"
+                      :landscapeElements="landscapeElements"
+                      :moduleFlavor="elementFlavor(module.slug())"
+                      @over="emphasizeModule(module.slug())"
+                      @out="deEmphasizeModule()"
+                      @clicked="toggleModule(module.slug())"
+                      @apply="applyModule(module.slug())"
+                    />
+                  </li>
+                </ul>
+              </div>
+
+              <LandscapeModuleVue
+                :module="element"
+                :landscapeElements="landscapeElements"
+                :moduleFlavor="elementFlavor(element.slug())"
+                @over="emphasizeModule(element.slug())"
+                @out="deEmphasizeModule()"
+                @clicked="toggleModule(element.slug())"
+                @apply="applyModule(element.slug())"
+                v-else
+              />
+            </li>
+          </ul>
+        </div>
+
+        <svg
+          class="jhipster-landscape-connectors"
+          :style="`width: ${landscapeSize.width}px; height: ${landscapeSize.height}px`"
+          data-selector="landscape-connectors"
+        >
+          <path
+            v-for="connector in landscapeConnectors"
+            class="jhipster-landscape-connectors--line"
+            :class="elementFlavor(connector.startingElement)"
+            :d="connector.path"
           />
-        </li>
-      </ul>
+        </svg>
+      </div>
     </div>
-
-    <svg
-      class="jhipster-landscape-connectors"
-      :style="`width: ${landscapeSize.width}px; height: ${landscapeSize.height}px`"
-      data-selector="landscape-connectors"
-    >
-      <path
-        v-for="connector in landscapeConnectors"
-        class="jhipster-landscape-connectors--line"
-        :class="elementFlavor(connector.startingElement)"
-        :d="connector.path"
-      />
-    </svg>
   </div>
 
   <div class="jhlite-menu-content-template--menu">

src/main/webapp/app/module/primary/landscape/LandscapeScroller.ts

@@ -2,4 +2,12 @@ export class LandscapeScroller {
   scroll(element: HTMLElement, scrollX: number, scrollY: number) {
     element.scroll(scrollX, scrollY);
   }
+
+  scrollSmooth(element: HTMLElement, scrollX: number, scrollY: number) {
+    element.scroll({ left: scrollX, top: scrollY, behavior: 'smooth' });
+  }
+
+  scrollIntoView(element: HTMLElement) {
+    element.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
+  }
 }