Add 'anchor points' in landscape

src/main/style/atom/atom.pug

@@ -15,7 +15,7 @@ block content
     .tikui-vertical-spacing--line
       include:componentDoc(height=100) button/button.md
     .tikui-vertical-spacing--line
-      include:componentDoc(height=490) chip/chip.md
+      include:componentDoc(height=610) chip/chip.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=70) icon/icon.md
     .tikui-vertical-spacing--line

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

@@ -1,5 +1,6 @@
 .jhlite-chip {
   display: flex;
+  position: relative;
   flex-direction: column;
   gap: 5px;
   margin-bottom: 5px;
@@ -55,6 +56,51 @@
   &.-extended {
     margin-bottom: 15px;
   }
+
+  &.-left-anchor-point::before {
+    position: absolute;
+    top: calc(50% - 6px);
+    left: -6px;
+    outline: solid 1px var(--jhlite-chip-default-anchor-color);
+    border: 3px solid var(--jhlite-chip-bg-color);
+    border-radius: 50%;
+    background-color: var(--jhlite-chip-default-anchor-color);
+    width: 6px;
+    height: 6px;
+    content: '';
+  }
+
+  &.-right-anchor-point::after {
+    position: absolute;
+    top: calc(50% - 6px);
+    right: -6px;
+    outline: solid 1px var(--jhlite-chip-default-anchor-color);
+    border: 3px solid var(--jhlite-chip-bg-color);
+    border-radius: 50%;
+    background-color: var(--jhlite-chip-default-anchor-color);
+    width: 6px;
+    height: 6px;
+    content: '';
+  }
+
+  &.-selectable-highlighted::before,
+  &.-selectable-highlighted::after {
+    cursor: pointer;
+    animation: $jhlite-valid-highlight-animation;
+  }
+
+  &.-not-selectable-highlighted::before,
+  &.-not-selectable-highlighted::after {
+    background-color: $jhlite-global-color-fill-disabled-light;
+    animation: $jhlite-invalid-highlight-animation;
+  }
+
+  &.-selected::after,
+  &.-selected::before {
+    background-color: $jhlite-global-color-fill-primary-darker;
+    cursor: pointer;
+    color: $jhlite-global-color-text-light;
+  }
 }
 
 .has-emphasized-module {

src/main/style/atom/chip/chip.code.pug

@@ -8,3 +8,6 @@ include chip.mixin.pug
 +jhlite-chip({selectableHighlighted: true, extended: true})
 +jhlite-chip({notSelectableHighlighted: true, extended: true})
 +jhlite-chip({selected: true, applied:true, extended: true})
++jhlite-chip({compacted: true, hasLeftAnchorPoint: true})
++jhlite-chip({selectableHighlighted: true, compacted: true, hasLeftAnchorPoint: true, hasRightAnchorPoint: true})
++jhlite-chip({notSelectableHighlighted: true, compacted: true, hasRightAnchorPoint: true})

src/main/style/atom/chip/chip.mixin.pug

@@ -1,11 +1,13 @@
 mixin jhlite-chip(options)
-  -const { selectableHighlighted: isSelectableHighlighted, notSelectableHighlighted: isNotSelectableHighlighted, compacted: isCompacted, extended: isExtended, selected: isSelected, applied: isApplied } = options || {};
+  -const { selectableHighlighted: isSelectableHighlighted, notSelectableHighlighted: isNotSelectableHighlighted, compacted: isCompacted, extended: isExtended, selected: isSelected, applied: isApplied, hasLeftAnchorPoint, hasRightAnchorPoint } = options || {};
   -const selectabledHighlightedClass = isSelectableHighlighted ? '-selectable-highlighted' : null;
   -const notSelectableHighlightedClass = isNotSelectableHighlighted ? '-not-selectable-highlighted' : null;
   -const compactedClass = isCompacted ? '-compacted' : null;
   -const extendedClass = isExtended ? '-extended' : null;
   -const appliedClass = isApplied ? '-applied' : null;
   -const selectedClass = isSelected ? '-selected' : null;
-  .jhlite-chip(class=[selectabledHighlightedClass, notSelectableHighlightedClass, selectedClass, extendedClass])
+  -const leftAnchorPointClass = hasLeftAnchorPoint ? '-left-anchor-point' : null;
+  -const rightAnchorPointClass = hasRightAnchorPoint ? '-right-anchor-point' : null;
+  .jhlite-chip(class=[selectabledHighlightedClass, notSelectableHighlightedClass, selectedClass, extendedClass, leftAnchorPointClass, rightAnchorPointClass])
     .jhlite-chip--title(class=appliedClass) Chip title
     .jhlite-chip--description(class=compactedClass) Chip description

src/main/style/root/_root.scss

@@ -6,6 +6,7 @@
   --jhlite-bg-color: #fff;
   --jhlite-global-color-text: #1e293b;
   --jhlite-chip-bg-color: rgb(255 255 255 / 70%);
+  --jhlite-chip-default-anchor-color: #2572a7;
   --jhlite-bg-color-primary: #ebebeb;
   --jhlite-bg-color-secondary: #fafafa;
   --jhlite-accent-color: #cacaca;

src/main/webapp/app/module/domain/AnchorPointState.ts

@@ -0,0 +1,4 @@
+export interface AnchorPointState {
+  atStart: boolean;
+  atEnd: boolean;
+}

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

@@ -30,6 +30,7 @@ import { BodyCursorUpdater } from '@/common/primary/cursor/BodyCursorUpdater';
 import { LandscapeScroller } from '@/module/primary/landscape/LandscapeScroller';
 import { ModuleParametersRepository } from '@/module/domain/ModuleParametersRepository';
 import { LandscapeNavigation } from './LandscapeNavigation';
+import { AnchorPointState } from '@/module/domain/AnchorPointState';
 
 export default defineComponent({
   name: 'LandscapeVue',
@@ -60,6 +61,7 @@ export default defineComponent({
     const moduleParameters = inject('moduleParameters') as ModuleParametersRepository;
     const folderPath = ref(moduleParameters.getCurrentFolderPath());
     const moduleParametersValues = ref(moduleParameters.get(folderPath.value));
+    const anchorPointModulesMap = ref(new Map<string, AnchorPointState>());
 
     let commitModule = true;
 
@@ -132,6 +134,28 @@ export default defineComponent({
       applicationListener.addEventListener('resize', updateConnectors);
 
       canLoadMiniMap.value = true;
+      loadAnchorPointModulesMap();
+    };
+
+    const loadAnchorPointModulesMap = (): void => {
+      landscapeConnectors.value.forEach(e => {
+        const startingElementSlug = e.startingElement.get();
+        const endingElementSlug = e.endingElement.get();
+
+        const startingElementSlugExists = anchorPointModulesMap.value.get(startingElementSlug);
+        if (!startingElementSlugExists) {
+          anchorPointModulesMap.value.set(startingElementSlug, { atStart: true, atEnd: false });
+        } else {
+          anchorPointModulesMap.value.set(startingElementSlug, { atStart: true, atEnd: startingElementSlugExists.atEnd });
+        }
+
+        const endingElementSlugExists = anchorPointModulesMap.value.get(endingElementSlug);
+        if (!endingElementSlugExists) {
+          anchorPointModulesMap.value.set(endingElementSlug, { atStart: false, atEnd: true });
+        } else {
+          anchorPointModulesMap.value.set(endingElementSlug, { atStart: endingElementSlugExists.atStart, atEnd: true });
+        }
+      });
     };
 
     type Navigation = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Space';
@@ -238,14 +262,36 @@ export default defineComponent({
       await nextTick().then(updateConnectors);
     };
 
+    const anchorPointClass = (module: LandscapeElementId): string => {
+      if (module instanceof LandscapeFeatureSlug) {
+        return '';
+      }
+
+      let className = '';
+
+      const anchorPointState = anchorPointModulesMap.value.get(module.get());
+      if (anchorPointState) {
+        if (anchorPointState.atStart) {
+          className += ' -left-anchor-point';
+        }
+
+        if (anchorPointState.atEnd) {
+          className += ' -right-anchor-point';
+        }
+      }
+
+      return className;
+    };
+
     const elementFlavor = (module: LandscapeElementId): string => {
       return (
         operationInProgressClass() +
         selectionHighlightClass(module) +
         unselectionHighlightClass(module) +
         selectionClass(module) +
         applicationClass(module) +
-        flavorClass()
+        flavorClass() +
+        anchorPointClass(module)
       );
     };