@abi-software/scaffoldvuer 2.1.0 → 2.1.1-demo.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "2.1.0",
+  "version": "2.1.1-demo.0",
   "license": "Apache-2.0",
   "engines": {
     "node": "^24.20.0"
@@ -48,7 +48,7 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "^1.13.0",
+    "@abi-software/map-utilities": "^1.13.1-demo.0",
     "@abi-software/sparc-annotation": "^0.3.2",
     "@abi-software/svg-sprite": "1.4.0",
     "@element-plus/icons-vue": "^2.3.2",

package/src/App.vue

@@ -12,12 +12,6 @@
         :flatmapAPI="flatmapAPI"
         :display-u-i="displayUI"
         :url="url"
-        :help-mode="helpMode"
-        :helpModeDialog="useHelpModeDialog"
-        :helpModeActiveItem="helpModeActiveItem"
-        @help-mode-last-item="onHelpModeLastItem"
-        @shown-tooltip="onTooltipShown"
-        @shown-map-tooltip="onMapTooltipShown"
         :display-latest-changes="false"
         :display-minimap="displayMinimap"
         :display-markers="displayMarkers"
@@ -44,14 +38,8 @@
       ></ScaffoldVuer>
     </drop-zone>
 
-    <HelpModeDialog
-      v-if="helpMode && useHelpModeDialog"
-      ref="scaffoldHelp"
-      :scaffoldRef="scaffoldRef"
-      :lastItem="helpModeLastItem"
-      @show-next="onHelpModeShowNext"
-      @finish-help-mode="onFinishHelpMode"
-    />
+    <HelpModeTour v-model="helpTourOpen" :steps="helpTourSteps" />
+    <HelpModeHover v-model="helpHoverOpen" :steps="helpTourSteps" />
     <el-popover
       popper-class="options-container"
       placement="bottom"
@@ -146,7 +134,8 @@
 
         <el-row :gutter="20" justify="center" align="middle">
           <el-col :span="auto">
-            <el-button size="small" @click="helpMode = !helpMode">Help Mode</el-button>
+            <el-button size="small" @click="startHelpTour">Help Tour</el-button>
+            <el-button size="small" @click="startHelpHover">Hover Help</el-button>
           </el-col>
           <el-col :span="auto">
             <el-button type="primary" size="small" @click="screenshotDialog = true">
@@ -433,7 +422,7 @@ import {
   ElSwitch,
 } from 'element-plus';
 import { useRoute, useRouter } from 'vue-router';
-import { HelpModeDialog } from '@abi-software/map-utilities';
+import { HelpModeHover, HelpModeTour } from '@abi-software/map-utilities';
 import '@abi-software/map-utilities/dist/style.css';
 
 let texture_prefix = undefined;
@@ -462,7 +451,8 @@ export default {
     DropZone,
     ScaffoldVuer,
     ModelsTable,
-    HelpModeDialog,
+    HelpModeTour,
+    HelpModeHover,
   },
   provide() {
     return {
@@ -477,7 +467,6 @@ export default {
       input: undefined,
       displayUI: true,
       selectedCoordinates: undefined,
-      helpMode: false,
       displayMarkers: false,
       onClickMarkers: false,
       wireframe: false,
@@ -508,9 +497,9 @@ export default {
       loadTextureVolumeOnReady: false,
       readyCallback: undefined,
       flatmapAPI: 'https://mapcore-demo.org/devel/flatmap/v4/',
-      helpModeActiveItem: 0,
-      helpModeLastItem: false,
-      useHelpModeDialog: true,
+      helpTourOpen: false,
+      helpTourSteps: [],
+      helpHoverOpen: false,
       scaffoldRef: null,
       screenshotDialog: false,
       route: useRoute(),
@@ -583,11 +572,6 @@ export default {
       deep: true,
       immediate: true,
     },
-    helpMode: function (newVal) {
-      if (!newVal) {
-        this.helpModeActiveItem = 0;
-      }
-    },
   },
   mounted: function () {
     this._objects = [];
@@ -972,29 +956,13 @@ export default {
         }
       });
     },
-    onHelpModeShowNext: function () {
-      this.helpModeActiveItem += 1;
-    },
-    onHelpModeLastItem: function (isLastItem) {
-      if (isLastItem) {
-        this.helpModeLastItem = true;
-      }
+    startHelpTour: function () {
+      this.helpTourSteps = this.$refs.scaffold.getHelpModeSteps();
+      this.helpTourOpen = true;
     },
-    onFinishHelpMode: function () {
-      this.helpMode = false;
-      // reset help mode to default values
-      this.helpModeActiveItem = 0;
-      this.helpModeLastItem = false;
-    },
-    onTooltipShown: function () {
-      if (this.$refs.scaffold && this.$refs.scaffoldHelp) {
-        this.$refs.scaffoldHelp.toggleTooltipHighlight();
-      }
-    },
-    onMapTooltipShown: function () {
-      if (this.$refs.scaffold && this.$refs.scaffoldHelp) {
-        this.$refs.scaffoldHelp.toggleTooltipPinHighlight();
-      }
+    startHelpHover: function () {
+      this.helpTourSteps = this.$refs.scaffold.getHelpModeSteps();
+      this.helpHoverOpen = true;
     },
   },
 };