@abi-software/map-utilities 0.0.0-beta.0

package/src/components/TreeControls/TreeControls.vue

@@ -0,0 +1,345 @@
+<template>
+  <div>
+    <el-row v-if="title">
+      <el-col :span="12">
+        <div class="title-text">
+          {{ title }}
+        </div>
+      </el-col>
+    </el-row>
+    <div class="tree-container">
+      <el-tree
+        ref="regionTree"
+        v-loading="!isReady"
+        element-loading-background="rgba(0, 0, 0, 0.3)"
+        show-checkbox
+        :node-key="nodeKey"
+        :data="treeData"
+        :check-strictly="false"
+        :expand-on-click-node="false"
+        :render-after-expand="false"
+        :default-expanded-keys="expandedKeys"
+        @check="checkChanged"
+      >
+        <template #default="{ node, data }">
+          <span
+            v-if="mapType === 'flatmap'"
+            class="region-tree-node"
+            :class="{
+              activeItem: nodeIsActive(data),
+              hoverItem: nodeIsHover(data),
+            }"
+            @click="changeActiveByNode(data)"
+            @mouseover="changeHoverByNode(data)"
+          >
+            <div :style="getBackgroundStyles(data)">
+              {{ node.label }}
+            </div>
+          </span>
+          <span
+            v-else-if="mapType === 'scaffold'"
+            class="region-tree-node"
+            :class="{
+              activeItem: active.includes(data.id),
+              hoverItem: hover.includes(data.id),
+            }"
+            @click="changeActiveByNode(data, true)"
+            @mouseover="changeHoverByNode(data, true)"
+          >
+            <el-color-picker
+              v-if="data.isPrimitives"
+              :class="{ 'show-picker': showColourPicker }"
+              v-model="data.activeColour"
+              size="small"
+              :popper-class="myPopperClass"
+              @change="setColour(data, $event)"
+            />
+            <span>{{ node.label }}</span>
+            <span v-if="data.isTextureSlides" class="node-options">
+              (Texture)
+            </span>
+          </span>
+        </template>
+      </el-tree>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TreeControls",
+  props: {
+    /**
+     * The type of map that the TreeControls is used. Either "flatmap" or "scaffold".
+     */
+    mapType: {
+      type: String,
+      required: true,
+    },
+    isReady: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * The title of the TreeControls.
+     */
+    title: {
+      type: String,
+    },
+    /**
+     * The data of the tree.
+     */
+    treeData: {
+      type: Array,
+      default: function () {
+        return [];
+      },
+    },
+    showColourPicker: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * The active node of the tree.
+     */
+    active: {
+      type: [String, Array],
+      required: true,
+    },
+    /**
+     * The hover node of the tree.
+     */
+    hover: {
+      type: [String, Array],
+      required: true,
+    },
+  },
+  data: function () {
+    return {
+      defaultExpandedKeys: ["All"],
+      myPopperClass: "hide-scaffold-colour-popup",
+    };
+  },
+  computed: {
+    isFlatmap: function () {
+      return this.mapType === "flatmap";
+    },
+    isScaffold: function () {
+      return this.mapType === "scaffold";
+    },
+    nodeKey: function () {
+      if (this.isFlatmap) {
+        return "key";
+      } else if (this.isScaffold) {
+        return "id";
+      }
+    },
+    expandedKeys: function () {
+      if (this.isFlatmap) {
+        return this.defaultExpandedKeys;
+      } else if (this.isScaffold) {
+        return [];
+      }
+    },
+  },
+  watch: {
+    showColourPicker: {
+      immediate: true,
+      handler: function () {
+        if (this.showColourPicker) this.myPopperClass = "showPicker";
+        else this.myPopperClass = "hide-scaffold-colour-popup";
+      },
+    },
+  },
+  methods: {
+    setColour: function (nodeData, value) {
+      this.$emit("setColour", nodeData, value);
+    },
+    getBackgroundStyles: function (node) {
+      if ("colour" in node) {
+        return { background: node.colour };
+      }
+      return {};
+    },
+    nodeIsActive: function (data) {
+      return this.active === data.models;
+    },
+    nodeIsHover: function (data) {
+      return this.hover === data.models;
+    },
+    changeActiveByNode: function (data, propagate = false) {
+      if (this.isFlatmap) {
+        if (data.models) {
+          this.$emit("changeActive", data.models);
+        }
+      } else if (this.isScaffold) {
+        if (data.isPrimitives || data.isRegion) {
+          this.$emit("changeActive", data, propagate);
+        }
+      }
+    },
+    changeHoverByNode: function (data, propagate = false) {
+      if (this.isFlatmap) {
+        if (data.models) {
+          this.$emit("changeHover", data.models);
+        }
+      } else if (this.isScaffold) {
+        if (data.isPrimitives) {
+          this.$emit("changeHover", data, propagate);
+        }
+      }
+    },
+    checkChanged: function (node, data) {
+      if (this.isFlatmap) {
+        const isChecked = data.checkedKeys.includes(node.key);
+        if (node.key === "All") {
+          this.$emit("checkAll", isChecked);
+        } else {
+          this.$emit("checkChanged", { key: node.key, value: isChecked });
+        }
+      } else if (this.isScaffold) {
+        this.$emit("checkChanged", node, data);
+      }
+    },
+  },
+  unmounted: function () {
+    this.sortedPrimitiveGroups = undefined;
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-loading-spinner) {
+  .path {
+    stroke: $app-primary-color;
+  }
+
+  .el-loading-text {
+    color: $app-primary-color;
+  }
+}
+
+.title-text {
+  width: 59px;
+  height: 20px;
+  color: rgb(48, 49, 51);
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 20px;
+  margin-left: 8px;
+}
+
+.tree-container {
+  width: 260px;
+  border: 1px solid rgb(144, 147, 153);
+  border-radius: 4px;
+  background: #ffffff;
+  margin-top: 6px;
+  scrollbar-width: thin;
+
+  :deep(.el-tree) {
+    max-height: 240px;
+    min-height: 130px;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      box-shadow: inset 0 0 6px #c0c4cc;
+    }
+  }
+
+  :deep(.el-tree-node__content) {
+    height: 22px;
+  }
+}
+
+:deep(.el-checkbox__input) {
+  &.is-indeterminate,
+  &.is-checked {
+    .el-checkbox__inner {
+      background-color: $app-primary-color;
+      border-color: $app-primary-color;
+    }
+  }
+}
+
+:deep(
+    .el-tree-node__children
+      .el-tree-node__children
+      .el-tree-node__content
+      > label.el-checkbox
+  ) {
+  display: none;
+}
+
+:deep(.el-checkbox__label) {
+  padding-left: 5px;
+  color: $app-primary-color !important;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0px;
+  line-height: 14px;
+}
+
+.activeItem {
+  background-color: #bbb !important;
+}
+
+.hoverItem {
+  background-color: #eee !important;
+}
+
+.region-tree-node {
+  flex: 1;
+  color: $app-primary-color !important;
+  display: flex;
+  font-size: 12px;
+  line-height: 14px;
+  padding-left: 0px;
+  background-color: #fff;
+  width: 100%;
+
+  :deep(.el-color-picker) {
+    height: 14px !important;
+  }
+
+  :deep(.el-color-picker__trigger) {
+    margin-left: 8px;
+    margin-right: 8px;
+    padding: 0px;
+    height: 14px;
+    width: 14px;
+    border: 0px;
+  }
+}
+
+:deep(.el-color-picker__color) {
+  border: 1px solid $app-primary-color;
+}
+
+:deep(.el-color-picker__icon) {
+  &.el-icon-arrow-down {
+    display: none;
+  }
+}
+
+:deep(.show-picker) {
+  .el-color-picker__icon {
+    &.el-icon-arrow-down {
+      display: block;
+    }
+  }
+}
+
+.hide-scaffold-colour-popup {
+  display: none;
+}
+
+.node-options {
+  text-align: right;
+}
+</style>

package/src/components/index.js

@@ -0,0 +1,6 @@
+import DrawToolbar from "./DrawToolbar/DrawToolbar.vue";
+import HelpModeDialog from "./HelpModeDialog/HelpModeDialog.vue";
+import Tooltip from "./Tooltip/Tooltip.vue";
+import TreeControls from "./TreeControls/TreeControls.vue";
+
+export { DrawToolbar, HelpModeDialog, Tooltip, TreeControls };

package/src/components.d.ts

@@ -0,0 +1,42 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AnnotationPopup: typeof import('./components/Tooltip/AnnotationPopup.vue')['default']
+    ConnectionDialog: typeof import('./components/DrawToolbar/ConnectionDialog.vue')['default']
+    DrawToolbar: typeof import('./components/DrawToolbar/DrawToolbar.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
+    ElCard: typeof import('element-plus/es')['ElCard']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElIconArrowDown: typeof import('@element-plus/icons-vue')['ArrowDown']
+    ElIconArrowUp: typeof import('@element-plus/icons-vue')['ArrowUp']
+    ElIconClose: typeof import('@element-plus/icons-vue')['Close']
+    ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
+    ElIconEdit: typeof import('@element-plus/icons-vue')['Edit']
+    ElIconFinished: typeof import('@element-plus/icons-vue')['Finished']
+    ElIconWarning: typeof import('@element-plus/icons-vue')['Warning']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElMain: typeof import('element-plus/es')['ElMain']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElTree: typeof import('element-plus/es')['ElTree']
+    ExternalResourceCard: typeof import('./components/Tooltip/ExternalResourceCard.vue')['default']
+    HelpModeDialog: typeof import('./components/HelpModeDialog/HelpModeDialog.vue')['default']
+    ProvenancePopup: typeof import('./components/Tooltip/ProvenancePopup.vue')['default']
+    Tooltip: typeof import('./components/Tooltip/Tooltip.vue')['default']
+    TreeControls: typeof import('./components/TreeControls/TreeControls.vue')['default']
+  }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
+}

package/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+const app = createApp(App);
+app.mount("#app");