@abi-software/scaffoldvuer 1.18.0 → 1.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.18.0",
+  "version": "1.18.1",
   "license": "Apache-2.0",
   "engines": {
     "node": ">=20"
@@ -56,7 +56,7 @@
     "unplugin-vue-components": "^0.26.0",
     "vue": "^3.4.21",
     "vue-router": "^4.2.5",
-    "zincjs": "^2.0.1"
+    "zincjs": "^2.1.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.28.0",

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/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)
       );
     },
     /**

package/src/components.d.ts

@@ -31,6 +31,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']