@abi-software/scaffoldvuer 1.0.1 → 1.1.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abi-software/scaffoldvuer",
-  "version": "1.0.1",
+  "version": "1.1.0-beta.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -41,7 +41,8 @@
     "*.js"
   ],
   "dependencies": {
-    "@abi-software/flatmapvuer": "^1.0.1",
+    "@abi-software/flatmapvuer": "^1.1.0-beta.2",
+    "@abi-software/sparc-annotation": "^0.3.1",
     "@abi-software/svg-sprite": "^1.0.0",
     "@element-plus/icons-vue": "^2.3.1",
     "@vue/compat": "^3.4.15",
@@ -54,7 +55,7 @@
     "vue": "^3.4.15",
     "vue-router": "^4.2.5",
     "vue3-component-svg-sprite": "^0.0.1",
-    "zincjs": "^1.5.1-beta.1"
+    "zincjs": "^1.5.1-beta.6"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.6.2",

package/src/App.vue

@@ -242,7 +242,8 @@ export default {
       route: useRoute(),
       router: useRouter(),
       ElIconSetting: shallowRef(ElIconSetting),
-      ElIconFolderOpened: shallowRef(ElIconFolderOpened)
+      ElIconFolderOpened: shallowRef(ElIconFolderOpened),
+      coordinatesClicked: [],
     };
   },
   watch: {
@@ -297,6 +298,8 @@ export default {
       });
     },
     objectAdded: function (zincObject) {
+      console.log(zincObject)
+      console.log(this.$refs.scaffold.$module.scene.getBoundingBox())
       if (this._objects.length === 0) {
         zincObject.setMarkerMode("on");
       }
@@ -427,6 +430,7 @@ export default {
       });
     },
     onReady: function () {
+      console.log(this.$refs.scaffold)
       if (this.readyCallback) {
         this.readyCallback(this.$refs.scaffold, texture_prefix);
         this.readyCallback = undefined;
@@ -438,10 +442,41 @@ export default {
         }
       }
     },
+    addLines: function (coord) {
+      if (this.coordinatesClicked.length === 1) {
+        const returned = this.$refs.scaffold.$module.scene.createLines(
+            "test",
+            "lines",
+            [this.coordinatesClicked[0], coord],
+            0x00ee22,
+          );
+          this.coordinatesClicked.length = 0;
+          console.log(returned);
+      } else {
+        this.coordinatesClicked.push(coord);
+      }
+    },
     onSelected: function (data) {
+
       if (data && data.length > 0 && data[0].data.group) {
+        console.log(data[0].data.group)
+              /*
+        if (data[0].worldCoords) {
+          console.log(data[0].data);
+          const returned = this.$refs.scaffold.$module.scene.createPoints(
+            "test",
+            "points",
+            [data[0].worldCoords],
+            undefined,
+            0x0022ee,
+          );
+
+          console.log(data[0].worldCoords)
+          this.addLines(data[0].worldCoords);
+        }
+        */
         delete this.route.query["viewURL"];
-        this.$refs.scaffold.showRegionTooltipWithAnnotations(data, true, true);
+        this.$refs.scaffold.showRegionTooltipWithAnnotations(data, false, true);
         if (this.onClickMarkers) this.$refs.scaffold.setMarkerModeForObjectsWithName(data[0].data.group, "on");
       }
     },

package/src/components/CreateTooltipContent.vue

@@ -0,0 +1,201 @@
+<template>
+  <el-container class="create-container">
+    <el-header height="30px" class="header">
+      <div>Create {{ createData.shape }}</div>
+    </el-header>
+    <el-main class="slides-block">
+      <span class="create-text">
+        Primitives will be created in the
+        <br>
+        __annotation region
+      </span>
+      <el-row class="row" v-show="showPoint">
+        <el-col :offset="0" :span="8">
+          Position:
+        </el-col>
+        <el-col :offset="0" :span="16">
+          <el-row v-for="{ value, i } in createData.points" :key="i" class="value">
+            {{ i }}
+          </el-row>
+        </el-col>
+      </el-row>
+      <el-row class="row">
+        <el-col :offset="0" :span="8">
+          Region:
+        </el-col>
+        <el-col :offset="0" :span="16">
+          <el-input
+            v-model="region"
+            placeholder="__annotation"
+            size="small"
+          />
+        </el-col>
+      </el-row>
+      <el-row class="row">
+        <el-col :offset="0" :span="8">
+          Group:
+        </el-col>
+        <el-col :offset="0" :span="16">
+          <el-input
+            v-model="group"
+            :placeholder="createData.shape"
+            size="small"
+          />
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :offset="0" :span="12">
+          <el-button
+            type="primary"
+            plain
+            @click="confirm"
+          >
+            {{ confirmText }}
+          </el-button>
+        </el-col>
+        <el-col :offset="0" :span="12">
+          <el-button
+            type="primary"
+            plain
+            @click="cancel"
+          >
+            Cancel
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+
+import {
+  ElButton as Button,
+  ElCol as Col,
+  ElContainer as Container,
+  ElHeader as Header,
+  ElInput as Input,
+  ElMain as Main,
+
+} from "element-plus";
+
+/**
+ * A component to control the opacity of the target object.
+ */
+export default {
+  name: "CreateTooltipContent",
+  components: {
+    Button,
+    Col,
+    Container,
+    Header,
+    Input,
+    Main,
+  },
+  props: {
+    createData: {
+      type: Object,
+    },
+  },
+  watch: {
+    "createData.shape": {
+      handler: function (value) {
+        this.group = value;
+        this.$emit("cancel-create");
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    confirmText: function () {
+      if (this.createData.editingIndex > -1) {
+        return "Edit";
+      }
+      return "Confirm";
+    },
+  },
+  data: function () {
+    return {
+      group: "default",
+      region: "",
+      showPoint: false,
+    }
+  },
+  methods: {
+    confirm: function () {
+      this.$emit(
+        "confirm-create", 
+        { 
+          region: "__annotation/" + this.region, 
+          group: this.group,
+          shape: this.createData.shape,
+          editingIndex: this.createData.editingIndex,
+        }
+      );
+      this.group = this.createData.shape;
+    },
+    cancel: function () {
+      this.$emit("cancel-create");
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+.header {
+  color: #606266;
+  line-height: 1;
+  padding: 8px 17px 1px 15px;
+  border-bottom: 1px solid #ebeef5;
+  font-size: 14px;
+}
+
+.row {
+  margin: 4px;
+  text-align: left;
+}
+
+:deep(.create-text) {
+  max-width: 220px;
+  height:35px;
+  font-size: 12px;
+}
+
+
+.create-container {
+  width: 250px;
+  height: auto;
+  border-radius: 4px;
+  border: solid 1px #d8dce6;
+  background-color: #fff;
+  overflow-y: none;
+  user-select: auto;
+  pointer-events: auto;
+}
+
+.value {
+  font-size: 12px;
+}
+
+.input-box {
+  width: 42px;
+  border-radius: 4px;
+  border: 1px solid rgb(144, 147, 153);
+  background-color: var(--white);
+  font-weight: 500;
+  color: rgb(48, 49, 51);
+  margin-left: 8px;
+  height: 24px;
+
+  &.number-input {
+    width: 42px;
+    :deep(.el-input__wrapper) {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+  }
+}
+
+</style>

package/src/components/LinesControls.vue

@@ -0,0 +1,196 @@
+<template>
+  <el-container class="lines-container">
+    <el-main class="slides-block">
+      <el-row>
+        <el-col :offset="0" :span="6">
+          Width:
+        </el-col>
+        <el-col :offset="0" :span="10">
+          <el-slider
+            v-model="width"
+            class="my-slider"
+            :step="1"
+            :min="1"
+            :max="100"
+            :show-tooltip="false"
+            @input="modifyWidth"
+          />
+        </el-col>
+        <el-col :offset="0" :span="6">
+          <el-input-number
+            v-model="width"
+            :step="1"
+            :min="1"
+            :max="100"
+            :controls="false"
+            class="input-box number-input"
+          />
+        </el-col>
+      </el-row>
+      <el-row v-if="createData.faceIndex > -1">
+        <el-col :offset="0" :span="4">
+          <el-button :icon="ElIconArrowLeft" @click="onMoveClick(-unit)"/>
+        </el-col>
+        <el-col :offset="3" :span="3">
+          Move
+        </el-col>
+        <el-col :offset="0" :span="7">
+          <el-input-number
+            v-model="unit"
+            :controls="false"
+            class="input-box number-input"
+          />
+        </el-col>
+        <el-col :offset="2" :span="2">
+          <el-button :icon="ElIconArrowRight" @click="onMoveClick(unit)"/>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+/* eslint-disable no-alert, no-console */
+// This is not in use at this moment, due to
+// limited support to line width
+import { shallowRef } from 'vue';
+import {
+  moveLine,
+} from "../scripts/Utilities.js";
+import {
+  ElButton as Button,
+  ElCol as Col,
+  ElContainer as Container,
+  ElInputNumber as InputNumber,
+  ElMain as Main,
+  ElSelect as Select,
+  ElSlider as Slider,
+  ElOption as Option,
+} from "element-plus";
+import {
+  ArrowLeft as ElIconArrowLeft,
+  ArrowRight as ElIconArrowRight,
+} from '@element-plus/icons-vue';
+
+/**
+ * A component to control the opacity of the target object.
+ */
+export default {
+  name: "LinesControls",
+  components: {
+    Button,
+    Col,
+    Container,
+    InputNumber,
+    Main,
+    Select,
+    Slider,
+    Option,
+    ElIconArrowLeft,
+    ElIconArrowRight,
+  },
+  props: {
+    createData: {
+      type: Object,
+    },
+  },
+  data: function () {
+    return {
+      width: 1,
+      unit: 0.1,
+      ElIconArrowLeft: shallowRef(ElIconArrowLeft),
+      ElIconArrowRight: shallowRef(ElIconArrowRight),
+    };
+  },
+  mounted: function () {
+    this._zincObject = undefined;
+  },
+  methods: {
+    onMoveClick: function(unit) {
+      moveLine(this._zincObject, this.createData.faceIndex, unit);
+    },
+    setObject: function (object) {
+      if (object.isLines) {
+        this._zincObject = object;
+        this.width = this._zincObject.getMorph().material.linewidth;
+      } else {
+        this._zincObject = undefined;
+        this.linewidth = 10;
+      }
+    },
+    modifyWidth: function () {
+      this._zincObject.setWidth(this.width);
+    },
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+.slides-block {
+  pointer-events: auto;
+  &.el-main {
+    padding: 5px;
+    &::-webkit-scrollbar {
+      width: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      box-shadow: inset 0 0 6px #c0c4cc;
+    }
+  }
+}
+
+.my-slider {
+  top: -6px;
+  position: relative;
+}
+
+.lines-container {
+  width: 250px;
+  overflow-y: none;
+}
+
+.input-box {
+  width: 42px;
+  border-radius: 4px;
+  border: 1px solid rgb(144, 147, 153);
+  background-color: var(--white);
+  font-weight: 500;
+  color: rgb(48, 49, 51);
+  margin-left: 8px;
+  height: 24px;
+
+  &.number-input {
+    width: 42px;
+    :deep(.el-input__wrapper) {
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+  }
+
+  :deep(.el-select__wrapper) {
+    height: 24px;
+    padding: 0;
+    min-height: unset;
+  }
+
+  :deep(.el-select__selection) {
+    color: $app-primary-color;
+    height: 22px;
+    padding-left: 4px;
+    padding-right: 8px;
+    border: none;
+    font-family: "Asap", sans-serif;
+    line-height: 22px;
+  }
+
+  :deep(.el-select__suffix),
+  :deep(.el-icon) {
+    line-height: 22px;
+  }
+}
+
+</style>

package/src/components/OpacityControls.vue

@@ -1,25 +1,17 @@
 <template>
   <el-container v-if="material" class="opacity-container">
-    <el-header
-      height="37px"
-      class="header"
-    >
-      <div>Opacity</div>
-    </el-header>
-    <el-main class="main">
-      <div class="block">
-        <span class="display">{{ displayString }}</span>
-        <el-slider
-          v-model="material.opacity"
-          class="my-slider"
-          :step="0.01"
-          :min="0"
-          :max="1"
-          :format-tooltip="formatTooltip"
-          :show-tooltip="false"
-        />
-      </div>
-    </el-main>
+    <div class="block">
+      <span class="display">{{ displayString }}</span>
+      <el-slider
+        v-model="material.opacity"
+        class="my-slider"
+        :step="0.01"
+        :min="0"
+        :max="1"
+        :format-tooltip="formatTooltip"
+        :show-tooltip="false"
+      />
+    </div>
   </el-container>
 </template>
 
@@ -70,13 +62,6 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.header {
-  color: #606266;
-  line-height: 1;
-  padding: 9px 17px 0 15px;
-  border-bottom: 1px solid #ebeef5;
-  font-size: 14px;
-}
 
 .display {
   width: 44px;
@@ -97,17 +82,14 @@ export default {
 .my-slider {
   position: absolute;
   width: 135px;
-  top: -12px;
   left: 50px;
+  top: -8px;
   pointer-events: auto;
 }
 
 .opacity-container {
   width: 250px;
-  height: 93px;
-  border-radius: 4px;
-  border: solid 1px #d8dce6;
-  background-color: #fff;
+  height: 30px;
 }
 
 :deep(.el-slider__bar) {