@abi-software/scaffoldvuer 1.18.0 → 1.19.0

package/eslint.config.js

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import vue from "eslint-plugin-vue";
+import globals from "globals";
+
+export default [
+  {
+    ignores: ["dist/**", "docs/.vitepress/**", "docs/components/**"],
+  },
+  js.configs.recommended,
+  ...vue.configs["flat/essential"],
+  {
+    files: ["**/*.{js,vue}"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+    },
+    rules: {},
+  },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "license": "Apache-2.0",
   "engines": {
     "node": ">=20"
@@ -13,6 +13,7 @@
     "serve": "vite --host --force",
     "build-bundle": "vite build",
     "build-static": "vite build -c vite.static-build.js",
+    "lint": "eslint .",
     "vuese-gen": "node vuese-generator.js",
     "vuese-watch": "node vuese-generator.js watch",
     "changelog": "auto-changelog -p --output CHANGELOG.md --template keepachangelog",
@@ -44,54 +45,44 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/map-utilities": "1.9.0",
+    "@abi-software/map-utilities": "1.10.0",
     "@abi-software/sparc-annotation": "^0.3.2",
-    "@abi-software/svg-sprite": "1.1.0",
-    "@element-plus/icons-vue": "^2.3.1",
-    "core-js": "^3.22.5",
-    "element-plus": "2.8.4",
-    "minisearch": "^6.0.1",
-    "pinia": "^2.1.7",
+    "@abi-software/svg-sprite": "1.2.0",
+    "@element-plus/icons-vue": "^2.3.2",
+    "core-js": "^3.50.0",
+    "element-plus": "^2.14.5",
+    "minisearch": "^7.2.0",
+    "pinia": "^4.0.3",
     "simple-dropzone": "^0.8.3",
-    "unplugin-vue-components": "^0.26.0",
-    "vue": "^3.4.21",
-    "vue-router": "^4.2.5",
-    "zincjs": "^2.0.1"
+    "vue": "^3.5.41",
+    "vue-router": "^5.2.0",
+    "zincjs": "^2.2.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.28.0",
-    "@vitejs/plugin-vue": "^4.6.2",
+    "@eslint/js": "^10.0.1",
+    "@babel/eslint-parser": "^8.0.1",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "unplugin-vue-components": "^32.1.0",
     "@vuese/markdown-render": "^2.11.3",
-    "auto-changelog": "^2.4.0",
+    "auto-changelog": "^2.6.0",
     "babel-plugin-component": "^1.1.1",
-    "chokidar": "^3.6.0",
-    "concurrently": "^8.2.2",
-    "eslint": "^9.34.0",
-    "eslint-plugin-vue": "^9.19.2",
-    "sass": "^1.69.5",
-    "vite": "^5.0.10",
-    "vite-plugin-node-polyfills": "^0.21.0",
-    "vitepress": "^1.0.0-rc.42",
+    "chokidar": "^5.0.0",
+    "concurrently": "^9.2.4",
+    "eslint": "^10.9.1",
+    "eslint-plugin-vue": "^10.10.0",
+    "globals": "^17.11.0",
+    "sass": "^1.103.1",
+    "vite": "^8.2.1",
+    "vite-plugin-node-polyfills": "^0.28.0",
+    "vitepress": "^1.6.4",
     "vue-docgen-api": "^4.79.2"
   },
   "optionalDependencies": {
-    "@rollup/rollup-darwin-arm64": "4.62.3",
-    "@rollup/rollup-linux-x64-gnu": "4.62.3",
-    "@rollup/rollup-win32-x64-msvc": "4.62.3"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
+    "@esbuild/darwin-arm64": "0.28.2",
+    "@esbuild/linux-x64": "0.28.2",
+    "@rollup/rollup-darwin-arm64": "4.63.0",
+    "@rollup/rollup-linux-x64-gnu": "4.63.0",
+    "@rollup/rollup-win32-x64-msvc": "4.63.0"
   },
   "browserslist": [
     "> 1%",

package/src/App.vue

@@ -50,7 +50,7 @@
       @show-next="onHelpModeShowNext"
       @finish-help-mode="onFinishHelpMode"
     />
-    <el-popover popper-class="options-container" placement="bottom" trigger="click" width="500" :teleported="false">
+    <el-popover popper-class="options-container" placement="bottom" trigger="hover" width="500" :teleported="false">
       <div>
         <el-row :gutter="20">
           <el-col>
@@ -115,7 +115,9 @@
             </el-button>
           </el-col>
           <el-col :span="auto">
-            <el-button size="small" @click="screenCapture()"> Capture </el-button>
+            <el-button type="primary" size="small" @click="screenshotDialog = true">
+              Screenshot
+            </el-button>
           </el-col>
         </el-row>
 
@@ -299,7 +301,7 @@
         </el-button>
       </template>
     </el-popover>
-    <el-popover placement="bottom" trigger="click" width="800" popper-class="table-popover" :teleported="false">
+    <el-popover placement="bottom" trigger="hover" width="800" popper-class="table-popover" :teleported="false">
       <template #default>
         <Suspense>
           <ModelsTable @viewModelClicked="viewModelClicked" />
@@ -320,6 +322,64 @@
         </div>
       </template>
     </el-autocomplete>
+    <el-dialog
+      v-model="screenshotDialog"
+      title="Screenshot Settings"
+      width="450px"
+      destroy-on-close
+    >
+    <el-form
+      ref="formRef"-
+      :model="screenshotData"
+      :rules="rules"
+      label-width="100px"
+      status-icon
+    >
+      <!-- Filename Field -->
+      <el-form-item label="Filename" prop="filename">
+        <el-input
+          v-model="screenshotData.filename"
+          placeholder="scaffold"
+        >
+          <template #append>.png</template>
+        </el-input>
+      </el-form-item>
+
+      <!-- Width Field -->
+      <el-form-item label="Width (px)" prop="width">
+        <el-input-number
+          v-model="screenshotData.width"
+          :min="100"
+          :max="7680"
+          :step="100"
+          controls-position="right"
+          style="width: 100%"
+        />
+      </el-form-item>
+
+      <!-- Height Field -->
+      <el-form-item label="Height (px)" prop="height">
+        <el-input-number
+          v-model="screenshotData.height"
+          :min="100"
+          :max="4320"
+          :step="100"
+          controls-position="right"
+          style="width: 100%"
+        />
+        </el-form-item>
+      </el-form>
+
+      <!-- Dialog Footer Action Buttons -->
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="screenCancel">Cancel</el-button>
+          <el-button type="primary" :loading="loading" @click="screenCapture">
+            Capture
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -435,6 +495,7 @@ export default {
       helpModeLastItem: false,
       useHelpModeDialog: true,
       scaffoldRef: null,
+      screenshotDialog: false,
       route: useRoute(),
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
@@ -443,9 +504,24 @@ export default {
       annotator: markRaw(new AnnotationService(`https://mapcore-demo.org/devel/flatmap/v4/annotator`)),
       fitBoundingBox: false,
       usageConfig: {
+        tubeLines: false,
         showTubeLinesControls: true
       },
-    };
+      screenshotData: {
+        filename: "screenshot",
+        width: 1920,
+        height: 1080
+      },
+      wholeBody: false,
+      rules: {
+        filename: [
+          { required: true, message: 'Please enter a filename', trigger: 'blur' },
+          { pattern: /^[a-zA-Z0-9_-]+$/, message: 'Filename can only contain letters, numbers, hyphens, and underscores', trigger: 'blur' } ],
+          width: [ { required: true, message: 'Please specify width', trigger: 'change' } ],
+          height: [ { required: true, message: 'Please specify height', trigger: 'change' }
+        ]
+      }
+    }
   },
   watch: {
     input: function () {
@@ -544,6 +620,12 @@ export default {
       if (zincObject.isGeometry) {
         zincObject._lod._material.wireframe = this.wireframe;
       }
+      if (this.wholeBody) {
+        if (zincObject.getRegion().getName() === "Nerves") {
+          zincObject.setGreyScale(true);
+        }
+      }
+
       this._objects.push(zincObject);
     },
     openMap: function (map) {
@@ -671,8 +753,16 @@ export default {
     userPrimitivesUpdated: function (event) {
       console.log(event);
     },
+    screenCancel: function () {
+      this.screenshotDialog = false;
+    },
     screenCapture: function () {
-      this.$refs.scaffold.captureScreenshot("capture.png");
+      this.$refs.scaffold.captureScreenshot(
+        this.screenshotData.filename,
+        this.screenshotData.width,
+        this.screenshotData.height,
+      );
+      this.screenshotDialog = false;
     },
     setSceneToWindo: function () {
       window.scene = this.$refs.scaffold.$module.scene;
@@ -839,6 +929,12 @@ export default {
         } else {
           this.viewURL = "";
         }
+
+        if (query.wholeBody && query.wholeBody === "true") {
+          console.log("wholebody", query.wholeBody)
+          this.wholeBody = true;
+          this.usageConfig.tubeLines = true;
+        }
       })
     },
     onHelpModeShowNext: function () {

package/src/assets/styles.scss

@@ -1,6 +1,7 @@
-@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
+@use '_variables' as *;
+@forward '_variables';
 
-@import '_variables';
+@import url('https://fonts.googleapis.com/css?family=Asap:400,400i,500,600,700&display=swap');
 
 /* icon font path, required */
 $--color-primary: $app-primary-color !default;

package/src/components/GlyphsControls.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-container class="glyph-container">
+    <el-checkbox
+      v-model="displayLabels"
+      class="block"
+    >
+      Display labels
+    </el-checkbox>
+  </el-container>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+import { markRaw } from 'vue';
+import {
+  ElCheckbox as Checkbox,
+  ElContainer as Container,
+  ElMain as Main,
+} from "element-plus";
+
+/**
+ * A component to control the opacity of the target object.
+ */
+export default {
+  name: "GlyphsControls",
+  components: {
+    Checkbox,
+    Container,
+    Main,
+  },
+  data: function () {
+    return {
+      displayLabels: true,
+    };
+  },
+  watch: {
+    displayLabels: {
+      handler: function (value) {
+        if (value) {
+          this.zincObject.showLabel();
+        } else {
+          this.zincObject.hideLabel();
+        }
+      },
+    },
+  },
+  methods: {
+    reset: function() {
+      this.displayLabels = true;
+    },
+    setObject: function (object) {
+      if (object.isGlyphset) {
+        this.zincObject = markRaw(object);
+        this.displayLabels = this.zincObject.isLabelDisplayed();
+      } else {
+        this.zincObject = undefined;
+      }
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+.block {
+  left: 40px;
+  :deep(.el-checkbox__label) {
+    font-size: 13px;
+  }
+}
+
+.glyph-container {
+  width: 250px;
+  height: auto;
+  overflow-y: none;
+}
+
+
+
+</style>

package/src/components/PrimitiveControls.vue

@@ -24,6 +24,13 @@
           @primitivesUpdated="$emit('primitivesUpdated', $event)"
         />
       </el-collapse-item>
+      <el-collapse-item v-show="isGlyph" title="Glyphset" name="gControls">
+        <glyphs-controls
+          class="glyph-controls"
+          ref="glyphControls"
+          @primitivesUpdated="$emit('primitivesUpdated', $event)"
+        />
+      </el-collapse-item>
       <el-collapse-item v-show="isLines" title="Lines" name="lControls">
         <lines-controls
           class="lines-controls"
@@ -51,6 +58,7 @@ import {
 import OpacityControls from "./OpacityControls.vue";
 import PointsControls from "./PointsControls.vue";
 import LinesControls from "./LinesControls.vue";
+import GlyphsControls from "./GlyphsControls.vue";
 import TextureSlidesControls from "./TextureSlidesControls.vue";
 import TransformationControls from "./TransformationControls.vue";
 
@@ -62,6 +70,7 @@ export default {
   components: {
     Collapse,
     CollapseItem,
+    GlyphsControls,
     LinesControls,
     OpacityControls,
     PointsControls,
@@ -88,7 +97,7 @@ export default {
       isTextureSlides: false,
       isPointset: false,
       isLines: false,
-
+      isGlyph: false,
       zincObject: undefined,
       isEditable: false,
       displayString: "100%"
@@ -117,6 +126,7 @@ export default {
       this.isPointset = false;
       this.isTextureSlides = false;
       this.isLines = false;
+      this.isGlyph = false,
       this.activeName  = "trControls";
       if (object) {
         if (object.isTextureSlides) {
@@ -132,6 +142,12 @@ export default {
           this.isLines = true;
           this.$refs.linesControls.setObject(object);
           this.activeName = "lControls";
+        } else if (object.isGlyphset) {
+          if (object.canShowLabel()) {
+            this.isGlyph = true;
+            this.$refs.glyphControls.setObject(object);
+            this.activeName = "gControls";
+          }
         }
         this.$refs.transformationControls.setObject(object);
       }

package/src/components/ScaffoldVuer.vue

@@ -1288,21 +1288,47 @@ export default {
      * This is called by captueeScreenshot and after the last render
      * loop, it download a screenshot of the current scene with no UI.
      */
-    captureScreenshotCallback: function () {
+    captureScreenshotCallback: function (filename, width, height) {
+      return () => {
       //Remove the callback, only needs to happen once
-      this.$module.zincRenderer.removePostRenderCallbackFunction(
-        this.captureID
-      );
-      let screenshot = this.$module.zincRenderer
-        .getThreeJSRenderer()
-        .domElement.toDataURL("image/png");
-      let hrefElement = document.createElement("a");
-      document.body.append(hrefElement);
-      if (!this.captureFilename) hrefElement.download = `screenshot.png`;
-      else hrefElement.download = this.captureFilename;
-      hrefElement.href = screenshot;
-      hrefElement.click();
-      hrefElement.remove();
+        this.$module.zincRenderer.removePostRenderCallbackFunction(
+          this.captureID
+        );
+
+        const renderer = this.$module.zincRenderer.getThreeJSRenderer();
+        const camera = this.$module.scene.camera;
+
+        const originalWidth = renderer.domElement.width;
+        const originalHeight = renderer.domElement.height;
+        const originalAspect = camera.aspect;
+        const originalPixelRatio = renderer.getPixelRatio();
+
+        renderer.setPixelRatio(1);
+        renderer.setSize(width, height, false);
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+        //this.$module.zincRenderer.onWindowResize();
+        this.$module.zincRenderer.render();
+        //renderer.render(this.$module.scene, camera);
+
+        let screenshot = renderer.domElement.toDataURL("image/png");
+
+        renderer.setPixelRatio(originalPixelRatio);
+        renderer.setSize(originalWidth, originalHeight, false);
+        camera.aspect = originalAspect;
+        camera.updateProjectionMatrix();
+        //this.$module.zincRenderer.onWindowResize();
+        this.$module.zincRenderer.render();
+        //renderer.render(this.$module.scene, camera);
+
+        let hrefElement = document.createElement("a");
+        //document.body.append(hrefElement);
+        if (!filename) hrefElement.download = `screenshot.png`;
+        else hrefElement.download = filename;
+        hrefElement.href = screenshot;
+        hrefElement.click();
+        hrefElement.remove();
+      }
     },
     /**
      * @public
@@ -1310,10 +1336,9 @@ export default {
      *
      * @arg {String} "filename given to the screenshot."
      */
-    captureScreenshot: function (filename) {
-      this.captureFilename = filename;
+    captureScreenshot: function (filename, width = 1920, height = 1080) {
       this.captureID = this.$module.zincRenderer.addPostRenderCallbackFunction(
-        this.captureScreenshotCallback
+        this.captureScreenshotCallback(filename, width, height)
       );
     },
     /**
@@ -2851,10 +2876,10 @@ export default {
         this._slides = this.$module.scene.addSlicesPrimitive(
           "_helper", ["x-plane", "y-plane", "z-plane"], [0xFF5555, 0x55FF55, 0x5555FF],
           0.5);
-        this.calculateBoundingBox();
         //this.$module.scene.createAxisDisplay(false);
         //this.$module.scene.enableAxisDisplay(true, true);
         this.isReady = true;
+        this.calculateBoundingBox();
         //console.log(`found ${foundNerves}`);
         this.$nextTick(() => {
           this.restoreSettings(options);

package/src/components.d.ts

@@ -1,10 +1,14 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
@@ -31,6 +35,7 @@ declare module 'vue' {
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    GlyphsControls: typeof import('./components/GlyphsControls.vue')['default']
     LinesControls: typeof import('./components/LinesControls.vue')['default']
     OpacityControls: typeof import('./components/OpacityControls.vue')['default']
     PointsControls: typeof import('./components/PointsControls.vue')['default']
@@ -44,7 +49,7 @@ declare module 'vue' {
     TextureSlidesControls: typeof import('./components/TextureSlidesControls.vue')['default']
     TransformationControls: typeof import('./components/TransformationControls.vue')['default']
   }
-  export interface ComponentCustomProperties {
+  export interface GlobalDirectives {
     vLoading: typeof import('element-plus/es')['ElLoadingDirective']
   }
 }

package/vite.config.js

@@ -11,7 +11,8 @@ export default defineConfig(({ command, mode }) => {
     css: {
         preprocessorOptions: {
           scss: {
-            additionalData: `@use './src/assets/styles' as *;`
+            api: 'modern-compiler',
+            additionalData: `@use '@/assets/styles' as *;`
           },
         },
     },
@@ -35,12 +36,12 @@ export default defineConfig(({ command, mode }) => {
     ],
     resolve: {
       alias: {
-        '@': path.resolve(__dirname, './src'),
+        '@': path.resolve(import.meta.dirname, './src'),
       }
     },
     build: {
       lib: {
-        entry: path.resolve(__dirname, "./src/components/index.js"),
+        entry: path.resolve(import.meta.dirname, "./src/components/index.js"),
         name: "ScaffoldVuer",
         fileName: 'scaffoldvuer',
       },
@@ -54,6 +55,11 @@ export default defineConfig(({ command, mode }) => {
             "@abi-software/map-utilities": "@abi-software/map-utilities",
             "pinia": "pinia"
           },
+          // keep css output name stable for the "./dist/style.css" export/import paths
+          assetFileNames: (assetInfo) =>
+            assetInfo.name?.endsWith(".css")
+              ? "style.css"
+              : "assets/[name][extname]",
         },
       },
     },

package/.eslintrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-  env: {
-    node: true,
-    es2020: true,
-  },
-  parser: '@babel/eslint-parser', // Use the modern parser
-}