diff --git a/package-lock.json b/package-lock.json
index cbe89a0..121c9a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "rdt-editor",
"version": "5.0",
"dependencies": {
+ "@vicons/ionicons5": "^0.12.0",
"ace-code": "^1.32.8",
"md5": "^2.3.0",
"naive-ui": "^2.38.1",
@@ -1737,6 +1738,11 @@
"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
"dev": true
},
+ "node_modules/@vicons/ionicons5": {
+ "version": "0.12.0",
+ "resolved": "https://registry.npmjs.org/@vicons/ionicons5/-/ionicons5-0.12.0.tgz",
+ "integrity": "sha512-Iy1EUVRpX0WWxeu1VIReR1zsZLMc4fqpt223czR+Rpnrwu7pt46nbnC2ycO7ItI/uqDLJxnbcMC7FujKs9IfFA=="
+ },
"node_modules/@vitejs/plugin-vue": {
"version": "5.0.4",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz",
diff --git a/package.json b/package.json
index f82ab06..91c87ce 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"lint": "eslint --ext .ts,.vue src"
},
"dependencies": {
+ "@vicons/ionicons5": "^0.12.0",
"ace-code": "^1.32.8",
"md5": "^2.3.0",
"naive-ui": "^2.38.1",
diff --git a/src/components/BSMap/BSCell.vue b/src/components/BSMap/BSCell.vue
index f38b110..02fec23 100644
--- a/src/components/BSMap/BSCell.vue
+++ b/src/components/BSMap/BSCell.vue
@@ -1,9 +1,13 @@
- emit('select')">
- updateRatio(index, ratio)" />
-
+ emit('select', offset, length)">
+ emit('select', 0, props.src.length)"
+ @click.right.prevent="handleRightClick">
+ updateRatio(index, ratio)" />
+
+
@@ -16,9 +20,11 @@ import {
ref,
} from 'vue';
+import splitWithOffset from '@/utils/splitWithOffset';
import styleFromParams from '@/utils/styleFromParams';
import BSSelectable from './BSSelectable.vue';
+import BSPopover from './BSPopover.vue';
import BSIcon from './BSIcon.vue';
const props = defineProps<{
@@ -27,7 +33,7 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
- (e: 'select'): void;
+ (e: 'select', offset: number, length: number): void;
}>();
const ratio = ref(1);
@@ -35,9 +41,13 @@ const ratio = ref(1);
const parts = computed(() => {
if (!props.src) return;
- const [nonParam, ...params] = props.src.trim().split('!_');
+ const match = props.src.match(/^( *)([^ ]+)( *)$/);
+ const leading = (match?.[1] || '').length;
+ const nonSpace = match?.[2] || props.src;
+
+ const [nonParam, ...params] = nonSpace.split('!_');
const [nonLink, ...links] = nonParam.split('!@');
- const icons = nonLink.split('!~').filter((icon) => !!icon);
+ const icons = splitWithOffset(nonLink, '!~', leading).filter(({ part }) => !!part);
return { icons, links, params };
});
@@ -47,6 +57,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.src.length);
+}
+
function updateRatio(layer: number, newRatio: number): void {
if (layer == 0) {
// Only ratio of the first icon affects the cell
diff --git a/src/components/BSMap/BSPopover.vue b/src/components/BSMap/BSPopover.vue
new file mode 100644
index 0000000..ed42dfd
--- /dev/null
+++ b/src/components/BSMap/BSPopover.vue
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
diff --git a/src/components/BSMap/BSPopoverIcon.vue b/src/components/BSMap/BSPopoverIcon.vue
new file mode 100644
index 0000000..1692242
--- /dev/null
+++ b/src/components/BSMap/BSPopoverIcon.vue
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/BSMap/BSPopoverLabel.vue b/src/components/BSMap/BSPopoverLabel.vue
new file mode 100644
index 0000000..d23baac
--- /dev/null
+++ b/src/components/BSMap/BSPopoverLabel.vue
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
diff --git a/src/components/BSMap/BSRow.vue b/src/components/BSMap/BSRow.vue
index 04b5232..770c0df 100644
--- a/src/components/BSMap/BSRow.vue
+++ b/src/components/BSMap/BSRow.vue
@@ -2,11 +2,11 @@
emit('select', offset, part.length)" />
+ :focused="isFocused(offset, part.length)" @select="(o, length) => emit('select', offset + o, length)" />
emit('select', offset, part.length)" />
+ :focused="isFocused(offset, part.length)" @select="(o, length) => emit('select', offset + o, length)" />
diff --git a/src/components/BSMap/BSText.vue b/src/components/BSMap/BSText.vue
index 2db86ef..f71762a 100644
--- a/src/components/BSMap/BSText.vue
+++ b/src/components/BSMap/BSText.vue
@@ -1,6 +1,7 @@
- emit('select')">
+
emit('select', 0, props.src.length)">
{{ props.src }}
@@ -18,7 +19,7 @@ const props = defineProps<{
}>();
const emit = defineEmits<{
- (e: 'select'): void;
+ (e: 'select', offset: number, length: number): void;
}>();