Add dropdown menu to icon cells

Author: xingrz

package-lock.json

@@ -10,6 +10,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@vicons/ionicons5": "^0.12.0",
     "@vueuse/core": "^10.9.0",
     "ace-code": "^1.32.8",
     "md5": "^2.3.0",

package.json

@@ -1,9 +1,13 @@
 <template>
   <BSSelectable v-slot="{ selectable }" :focused="props.focused">
-    <div :class="[selectable, $style.cell]" :title="props.cell.src" :style="style" @click="() => emit('select')">
-      <BSIcon v-for="(icon, index) in props.cell.icons" :key="index" :class="$style.icon" :icon="icon"
-        @ratio="(ratio: number) => updateRatio(index, ratio)" />
-    </div>
+    <BSPopover v-model:show="popoverShown" :cell="props.cell" :ratio="ratio"
+      @select="(offset, length) => emit('select', offset, length)">
+      <div :class="[selectable, $style.cell]" :style="style" @click="() => emit('select', 0, props.cell.length)"
+        @click.right.prevent="handleRightClick">
+        <BSIcon v-for="(icon, index) in props.cell.icons" :key="index" :class="$style.icon" :icon="icon"
+          @ratio="(ratio: number) => updateRatio(index, ratio)" />
+      </div>
+    </BSPopover>
   </BSSelectable>
 </template>
 
@@ -14,6 +18,7 @@ import type { RDTCell } from '@/ast';
 import styleFromParams from '@/utils/styleFromParams';
 
 import BSSelectable from './BSSelectable.vue';
+import BSPopover from './BSPopover.vue';
 import BSIcon from './BSIcon.vue';
 
 const props = defineProps<{
@@ -22,7 +27,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'select'): void;
+  (e: 'select', offset: number, length: number): void;
 }>();
 
 const ratio = ref(1);
@@ -32,6 +37,13 @@ const style = computed(() => ({
   '--bs-map-cell-ratio': (ratio.value == 1 ? undefined : ratio.value),
 }) as CSSProperties);
 
+const popoverShown = ref(false);
+
+function handleRightClick(): void {
+  popoverShown.value = true;
+  emit('select', 0, props.cell.length);
+}
+
 function updateRatio(layer: number, newRatio: number): void {
   if (layer == 0) {
     // Only ratio of the first icon affects the cell

src/components/BSMap/BSCell.vue

@@ -1,7 +1,7 @@
 <template>
   <BSSelectable v-slot="{ selectable }" :focused="props.focused">
     <div :class="[selectable, $style.info]" :data-column="info.column" :title="props.info.text"
-      @click="() => emit('select')">
+      @click="() => emit('select', 0, props.info.length)">
       {{ props.info.text }}
     </div>
   </BSSelectable>
@@ -17,7 +17,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'select'): void;
+  (e: 'select', offset: number, length: number): void;
 }>();
 </script>
 

src/components/BSMap/BSInfo.vue

@@ -0,0 +1,72 @@
+<template>
+  <n-dropdown show-arrow trigger="manual" placement="right" :disabled="!enabled" :show="show" :options="options"
+    :render-icon="renderIcon" :render-label="renderLabel" @select="onSelect" @clickoutside="onClickOutside">
+    <slot />
+  </n-dropdown>
+</template>
+
+<script lang="ts" setup>
+import {
+  type VNode,
+  computed,
+  defineEmits,
+  defineProps,
+  h,
+} from 'vue';
+
+import {
+  type DropdownOption,
+  NDropdown,
+} from 'naive-ui';
+
+import type { RDTCell, RDTIcon, RDTText } from '@/ast';
+
+import BSPopoverIcon from './BSPopoverIcon.vue';
+import BSPopoverLabel from './BSPopoverLabel.vue';
+
+const props = defineProps<{
+  cell: RDTCell;
+  ratio: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'select', offset: number, length: number): void;
+}>();
+
+const show = defineModel<boolean>('show');
+
+type BSCellPopoverOption = DropdownOption & {
+  icon: RDTIcon | RDTText;
+};
+
+const enabled = computed(() => props.cell.icons.length > 0);
+
+const options = computed(() => props.cell.icons.map((icon) => ({
+  key: `${icon.offset}`,
+  icon,
+} as BSCellPopoverOption)));
+
+function renderLabel(option: DropdownOption): VNode {
+  return h(BSPopoverLabel, {
+    icon: (option as BSCellPopoverOption).icon,
+  });
+}
+
+function renderIcon(option: DropdownOption): VNode {
+  const { icon } = option as BSCellPopoverOption;
+  return h(BSPopoverIcon, {
+    icon,
+    ratio: props.ratio,
+  });
+}
+
+function onSelect(_key: string, option: DropdownOption): void {
+  const { icon } = option as BSCellPopoverOption;
+  emit('select', icon.offset - props.cell.offset, icon.length);
+  show.value = false;
+}
+
+function onClickOutside(): void {
+  show.value = false;
+}
+</script>

src/components/BSMap/BSPopover.vue

@@ -0,0 +1,34 @@
+<template>
+  <div :class="$style.cell" :style="style">
+    <BSIcon :icon="props.icon" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type CSSProperties, computed, defineProps } from 'vue';
+
+import type { RDTIcon, RDTText } from '@/ast';
+import styleFromParams from '@/utils/styleFromParams';
+
+import BSIcon from './BSIcon.vue';
+
+const props = defineProps<{
+  icon: RDTIcon | RDTText;
+  ratio: number | undefined;
+}>();
+
+const style = computed(() => ({
+  ...styleFromParams(props.icon.params, true),
+  '--bs-map-cell-ratio': (props.ratio == 1 ? undefined : props.ratio),
+}) as CSSProperties);
+</script>
+
+<style lang="scss" module>
+.cell {
+  --bs-map-size: 20;
+  width: calc(var(--bs-map-size) * var(--bs-map-cell-ratio, 1) * 1px);
+  height: calc(var(--bs-map-size) * 1px);
+  line-height: calc(var(--bs-map-size) * 1px);
+  border: 1px solid #ddd;
+}
+</style>

src/components/BSMap/BSPopoverIcon.vue

@@ -0,0 +1,58 @@
+<template>
+  <div :class="$style.item">
+    <div :class="$style.name">{{ src }}</div>
+    <n-button v-if="props.icon.kind == 'icon'" :class="$style.open" quaternary block @click.stop="onClick">
+      <n-icon>
+        <OpenOutline />
+      </n-icon>
+    </n-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineProps } from 'vue';
+
+import { NButton, NIcon } from 'naive-ui';
+import { OpenOutline } from '@vicons/ionicons5';
+
+import type { RDTIcon, RDTText } from '@/ast';
+
+const props = defineProps<{
+  icon: RDTIcon | RDTText
+}>();
+
+const src = computed(() => props.icon.kind == 'icon'
+  ? props.icon.name
+  : props.icon.text);
+
+function onClick(): void {
+  window.open(`https://commons.wikimedia.org/wiki/File:BSicon_${src.value}.svg`);
+}
+</script>
+
+<style lang="scss" module>
+.item {
+  display: flex;
+  width: auto;
+  margin-right: calc(var(--n-option-suffix-width) * -1 + 2px);
+
+  .name {
+    flex: 1 1 auto;
+    user-select: none;
+    font-family: monospace;
+    margin-right: 16px;
+  }
+
+  .open {
+    flex: 0 0 20px;
+    opacity: 0;
+    transition: opacity 200ms;
+  }
+
+  &:hover {
+    .open {
+      opacity: 1;
+    }
+  }
+}
+</style>

src/components/BSMap/BSPopoverLabel.vue

@@ -3,12 +3,12 @@
     <div :class="$style.cells" :style="rowStyle">
       <BSCell v-for="(cell, index) in props.row.cells" :key="index" :cell="cell"
         :focused="isFocused(cell.offset - props.row.offset, cell.length)"
-        @select="() => emit('select', cell.offset - props.row.offset, cell.length)" />
+        @select="(offset, length) => emit('select', cell.offset - props.row.offset + offset, length)" />
     </div>
     <div :class="$style.infos">
       <BSInfo v-for="(info, index) in props.row.rInfo.filter(({ text }) => !!text)" :key="index" :info="info"
         :focused="isFocused(info.offset - props.row.offset, info.length)"
-        @select="() => emit('select', info.offset - props.row.offset, info.length)" />
+        @select="(offset, length) => emit('select', info.offset - props.row.offset + offset, length)" />
     </div>
   </div>
 </template>