fl-web-component 0.1.0 → 0.1.1

package/packages/components/com-treeDynamic/index.vue

@@ -0,0 +1,207 @@
+<!--
+ * @Author: fengyang9326@163.com
+ * @Date: 2024-05-15 15:22:52
+ * @LastEditors: fengyang9326@163.com
+ * @LastEditTime: 2024-05-16 10:27:18
+ * @FilePath: /web/framework/src/views/system/temporary/tree-dynamic.vue
+ * @Description:
+-->
+<template>
+  <div class="tree_dynamic">
+    <!-- 搜索框 -->
+    <el-input
+      v-if="hasSearch"
+      v-model="filterText"
+      class="filter_input"
+      clearable
+      :size="inputSize"
+      :placeholder="filterPlaceholder"
+    />
+    <!-- 树结构 -->
+    <el-tree
+      ref="dynamicTree"
+      :class="hasSearch ? 'whole_tree' : 'part_tree'"
+      :data="treeData"
+      :props="treeProps"
+      :style="{ height: treeHeight }"
+      :expand-on-click-node="expandOnClickNode"
+      :node-key="nodeKey"
+      :default-expand-all="defaultExpandAll"
+      :filter-node-method="filterNode"
+      highlight-current
+      @node-click="treeNodeClick"
+    >
+      <span slot-scope="{ node, data }" class="custom-tree-node" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
+        <span :title="node.label" class="tree_node_span">
+          <template id="">
+            <i class="el-icon-folder-opened" style="margin-right:3px" />
+          </template>
+          <span :title="node.label" class="title_tree">{{ node.label }}</span>
+        </span>
+        <span class="tree_operation" style=" display: inline-block; width: 80px; text-align: right; ">
+          <slot v-if="treeNodeHandle" class="fr_text" :data="data">
+            操作按钮
+          </slot>
+
+        </span>
+      </span>
+    </el-tree>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TreeDynamic',
+  components: {},
+  props: {
+    /* 是否可搜索 */
+    hasSearch: {
+      type: Boolean,
+      default: true
+    },
+    /* 搜索框文字提示 */
+    filterPlaceholder: {
+      type: String,
+      default: '输入关键字进行过滤'
+    },
+    // 搜索框大小
+    inputSize: {
+      type: String,
+      default: 'small'
+    },
+    /* 树结构数据 */
+    treeData: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    /* 树结构 props */
+    treeProps: {
+      type: Object,
+      default: () => {},
+      required: true
+    },
+    /* 是否默认展开所有节点 */
+    defaultExpandAll: {
+      type: Boolean,
+      default: true
+    },
+    /* 是否在点击节点的时候展开或者收缩节点 */
+    expandOnClickNode: {
+      type: Boolean,
+      default: false
+    },
+    /* 树节点 nodeKey */
+    nodeKey: {
+      type: String,
+      default: 'id'
+    },
+    /* 树结构节点操作 */
+    treeNodeHandle: {
+      type: Boolean,
+      default: true
+    }
+
+  },
+  data() {
+    return {
+      /* 搜索字段 */
+      filterText: '',
+      treeHeight: ''
+    }
+  },
+  computed: {},
+  watch: {
+    filterText(val) {
+      this.$refs.dynamicTree.filter(val)
+    },
+    deep: true
+  },
+  created() {},
+  mounted() {
+    /* 获取搜索框样式，动态赋值树高度 */
+    if (this.hasSearch) {
+      const that = this
+      this.$nextTick(() => {
+        const inputDom = document.getElementsByClassName('filter_input')[0]
+        if (inputDom) {
+          const inputDomHeight = inputDom.scrollHeight + 8
+          if (inputDomHeight) {
+            const treeCalcHeight = `calc(100% - ${inputDomHeight}px)`
+            that.$set(that, 'treeHeight', treeCalcHeight)
+          }
+        }
+      })
+    } else {
+      this.$set(this, 'treeHeight', '100%')
+    }
+  },
+  methods: {
+    /* 搜索 */
+    filterNode(value, data) {
+      if (!value) return true
+      const label = this.treeProps.label
+      return data[label].indexOf(value) !== -1
+    },
+    /* 树结构 点击节点 */
+    treeNodeClick(node) {
+      this.$emit('treeNodeClick', node)
+    },
+    /** 树节点鼠标移入移出 */
+    mouseenter(data) {
+      this.$set(data, 'show', true)
+    },
+    mouseleave(data) {
+      this.$set(data, 'show', false)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.tree_dynamic {
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  padding-right: 1px;
+  overflow: hidden;
+}
+/* 搜索框样式 */
+.filter_input {
+  margin-bottom: 8px;
+}
+/* 树结构样式 */
+.el-tree {
+  width: 100%;
+  overflow-y: auto;
+  .custom-tree-node{
+    display: flex;
+    align-items: center;
+    width: calc(100% - 24px)!important;
+    font-size: 14px;
+  }
+  .custom-tree-node .tree_node_span{
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    width: calc(100% - 80px)!important;
+    i {
+      display: inline-block;
+    }
+    .title_tree{
+      display: inline-block;
+      width: calc(100% - 18px)!important;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      height: 100%;
+    }
+  }
+}
+.part_tree {
+  height: 100%;
+}
+.whole_tree {
+  height: v-bind(treeHeight);
+}
+
+</style>

package/patches/camera-controls+2.9.0.patch

@@ -0,0 +1,63 @@
+diff --git a/node_modules/camera-controls/dist/camera-controls.module.js b/node_modules/camera-controls/dist/camera-controls.module.js
+index 08a8fd6..76089cb 100644
+--- a/node_modules/camera-controls/dist/camera-controls.module.js
++++ b/node_modules/camera-controls/dist/camera-controls.module.js
+@@ -1395,7 +1395,7 @@ class CameraControls extends EventDispatcher {
+      * @category Methods
+      */
+     dolly(distance, enableTransition = false) {
+-        return this.dollyTo(this._sphericalEnd.radius - distance, enableTransition);
++        return this.dollyTo(this._sphericalEnd.radius - distance, this.minDistance, enableTransition);
+     }
+     /**
+      * Dolly in/out camera position to given distance.
+@@ -1403,11 +1403,11 @@ class CameraControls extends EventDispatcher {
+      * @param enableTransition Whether to move smoothly or immediately.
+      * @category Methods
+      */
+-    dollyTo(distance, enableTransition = false) {
++    dollyTo(distance, minDistance, enableTransition = false) {
+         this._isUserControllingDolly = false;
+         this._lastDollyDirection = DOLLY_DIRECTION.NONE;
+         this._changedDolly = 0;
+-        return this._dollyToNoClamp(clamp(distance, this.minDistance, this.maxDistance), enableTransition);
++        return this._dollyToNoClamp(clamp(distance, minDistance, this.maxDistance), enableTransition);
+     }
+     _dollyToNoClamp(distance, enableTransition = false) {
+         const lastRadius = this._sphericalEnd.radius;
+@@ -1635,7 +1635,7 @@ class CameraControls extends EventDispatcher {
+         if (isPerspectiveCamera(this._camera)) {
+             const distance = this.getDistanceToFitBox(bbSize.x, bbSize.y, bbSize.z, cover);
+             promises.push(this.moveTo(center.x, center.y, center.z, enableTransition));
+-            promises.push(this.dollyTo(distance, enableTransition));
++            promises.push(this.dollyTo(distance, this.minDistance, enableTransition));
+             promises.push(this.setFocalOffset(0, 0, 0, enableTransition));
+         }
+         else if (isOrthographicCamera(this._camera)) {
+@@ -1664,7 +1664,7 @@ class CameraControls extends EventDispatcher {
+         promises.push(this.moveTo(boundingSphere.center.x, boundingSphere.center.y, boundingSphere.center.z, enableTransition));
+         if (isPerspectiveCamera(this._camera)) {
+             const distanceToFit = this.getDistanceToFitSphere(boundingSphere.radius);
+-            promises.push(this.dollyTo(distanceToFit, enableTransition));
++            promises.push(this.dollyTo(distanceToFit, this.minDistance, enableTransition));
+         }
+         else if (isOrthographicCamera(this._camera)) {
+             const width = this._camera.right - this._camera.left;
+@@ -1831,7 +1831,7 @@ class CameraControls extends EventDispatcher {
+         _zColumn.multiplyScalar(cameraToPoint.z);
+         _v3A.copy(_xColumn).add(_yColumn).add(_zColumn);
+         _v3A.z = _v3A.z + distance;
+-        this.dollyTo(distance, false);
++        this.dollyTo(distance, Number.EPSILON, false);
+         this.setFocalOffset(-_v3A.x, _v3A.y, -_v3A.z, false);
+         this.moveTo(targetX, targetY, targetZ, false);
+     }
+@@ -2283,7 +2283,7 @@ class CameraControls extends EventDispatcher {
+         this.moveTo(obj.target[0], obj.target[1], obj.target[2], enableTransition);
+         _sphericalA.setFromVector3(_v3A.fromArray(obj.position).sub(this._targetEnd).applyQuaternion(this._yAxisUpSpace));
+         this.rotateTo(_sphericalA.theta, _sphericalA.phi, enableTransition);
+-        this.dollyTo(_sphericalA.radius, enableTransition);
++        this.dollyTo(_sphericalA.radius, this.minDistance, enableTransition);
+         this.zoomTo(obj.zoom, enableTransition);
+         this.setFocalOffset(obj.focalOffset[0], obj.focalOffset[1], obj.focalOffset[2], enableTransition);
+         this._needsUpdate = true;

package/{packages/index.js → src/main.js}

@@ -1,8 +1,8 @@
-// import GraphicModel from './components/model/index.vue';
-import MyButton from './components/button/index.vue';
+import Model from '../packages/components/com-graphics/index.vue';
+import MyButton from '../packages/components/button/index.vue';
 
 const components = [
-    // GraphicModel,
+    Model,
     MyButton,
 ];
 
@@ -17,8 +17,8 @@ if (typeof window !== 'undefined' && window.Vue) {
     install(window.Vue);
 }
 
-export default { 
+export default {
     install, 
-    // GraphicModel,
+    Model,
     MyButton,
 };