readonly select mouseMove cursor

src/designer/Viewport.ts

@@ -289,7 +289,7 @@ export default class Viewport {
     controlsNew.enableDamping = false
     controlsNew.enableZoom = true
     controlsNew.enableRotate = false
-    controlsNew.mouseButtons = { LEFT: THREE.MOUSE.PAN } // 鼠标中键平移
+    controlsNew.mouseButtons = { LEFT: THREE.MOUSE.PAN, RIGHT: THREE.MOUSE.PAN } // 鼠标中键平移
     controlsNew.screenSpacePanning = false // 定义平移时如何平移相机的位置 控制不上下移动
     controlsNew.listenToKeyEvents(viewerDom) // 监听键盘事件
     controlsNew.keys = { LEFT: 'KeyA', UP: 'KeyW', RIGHT: 'KeyD', BOTTOM: 'KeyS' }

src/designer/metaComponents/IMetaProp.ts

@@ -17,6 +17,14 @@ export default defineComponent({
         this.refreshValue()
       }
     })
+
+    this.$nextTick(() => {
+      //@ts-ignore
+      if (typeof this.refreshValue === 'function') {
+        //@ts-ignore
+        this.refreshValue()
+      }
+    })
   },
   computed: {
     object3D(): THREE.Object3D {

src/designer/metaComponents/NumberInput.vue

@@ -5,7 +5,8 @@
         {{ prop.label }}
       </div>
     </template>
-    <el-input v-model="value" class="prop-editor" type="number" clearable size="small" />
+    <el-input v-model="value" class="prop-editor" type="number" clearable size="small"
+              :readonly="prop.readonly" />
   </el-form-item>
 </template>
 <script>

src/designer/metaComponents/SwitchItem.vue

@@ -5,7 +5,8 @@
         {{ prop.label }}
       </div>
     </template>
-    <el-switch v-model="value" class="prop-editor" clearable size="small" />
+    <el-switch v-model="value" class="prop-editor" clearable size="small"
+               :readonly="prop.readonly" />
   </el-form-item>
 </template>
 <script>

src/designer/metaComponents/TextInput.vue

@@ -1,11 +1,12 @@
 <template>
   <el-form-item :label-width="prop.labelWidth">
     <template #label>
-      <div :title="prop.label + ' - ' + prop.field" >
+      <div :title="prop.label + ' - ' + prop.field">
         {{ prop.label }}
       </div>
     </template>
-    <el-input v-model="value" class="prop-editor" type="text" clearable size="small" />
+    <el-input v-model="value" class="prop-editor" type="text" clearable size="small"
+              :readonly="prop.readonly" />
   </el-form-item>
 </template>
 <script>

src/designer/metaComponents/UUIDItem.vue

@@ -5,7 +5,8 @@
         {{ prop.label }}
       </div>
     </template>
-    <el-input v-model="value" class="prop-editor" type="text" clearable size="small" />
+    <el-input v-model="value" class="prop-editor" type="text" clearable size="small"
+              :readonly="prop.readonly" />
   </el-form-item>
 </template>
 <script>

src/designer/model2DEditor/DragControls.js

@@ -30,7 +30,7 @@ class DragControls extends EventDispatcher {
     //
 
     let isMove = false
-
+    let isMouseDownClicked = false
     const scope = this
 
     function activate() {
@@ -66,33 +66,27 @@ class DragControls extends EventDispatcher {
     }
 
     function onPointerMove(event) {
-
       if (!scope.enabled || !scope.enabledMove) return
 
-      isMove = true
+      if (isMouseDownClicked) {
+        _domElement.style.cursor = 'move'
+      }
 
+      isMove = true
       updatePointer(event)
-
       _raycaster.setFromCamera(_pointer, _camera)
 
       if (_selected) {
-
         if (_raycaster.ray.intersectPlane(_plane, _intersection)) {
-
           const pos = _intersection.sub(_offset).applyMatrix4(_inverseMatrix)
           const newIntersection = calcPositionUseSnap(event, pos)
           _selected.position.copy(newIntersection)
-
         }
-
         scope.dispatchEvent({ type: 'drag', object: _selected })
-
         return
-
       }
 
       // hover support
-
       if (event.pointerType === 'mouse' || event.pointerType === 'pen') {
 
         _intersections.length = 0
@@ -127,12 +121,9 @@ class DragControls extends EventDispatcher {
         } else {
 
           if (_hovered !== null) {
-
             scope.dispatchEvent({ type: 'hoveroff', object: _hovered })
-
             _domElement.style.cursor = 'auto'
             _hovered = null
-
           }
 
         }
@@ -163,7 +154,10 @@ class DragControls extends EventDispatcher {
             _offset.copy(_intersection).sub(_worldPosition.setFromMatrixPosition(_selected.matrixWorld))
           }
 
-          _domElement.style.cursor = 'move'
+          // setTimeout(() => {
+          //   _domElement.style.cursor = 'move'
+          // }, 20)
+          isMouseDownClicked = true
         }
         scope.dispatchEvent({ type: 'dragstart', object: _selected, e: event })
       }
@@ -183,6 +177,7 @@ class DragControls extends EventDispatcher {
       }
 
       _domElement.style.cursor = _hovered ? 'pointer' : 'auto'
+      isMouseDownClicked = false
     }
 
     function updatePointer(event) {

src/designer/model2DEditor/EsDragControls.ts

@@ -121,6 +121,10 @@ export default class EsDragControls {
       }
       if (e.object.userData.selectable) {
         this.viewport.state.selectedObject = markRaw(e.object)
+        EventBus.$emit('objectChanged', {
+          viewport: this,
+          object: e.object
+        })
       }
     }
 

src/designer/model2DEditor/tools/SelectInspect.ts

@@ -25,7 +25,7 @@ export default class SelectInspect implements ITool {
    */
   rectMaterial: THREE.MeshBasicMaterial = new THREE.MeshBasicMaterial({
     color: 0x000000,
-    opacity: 0.5,
+    opacity: 0.3,
     transparent: true
   })
 

src/model/itemType/ItemTypeDefine.ts

@@ -33,8 +33,9 @@ export function getAllItemTypes(): ItemTypeDefineOption[] {
  * "点"对象类型的，基础元数据
  */
 export const BASIC_META_OF_POINT: ItemTypeMeta = [
-  { field: 'uuid', editor: 'UUID', label: 'uuid' },
-  { field: 'name', editor: 'TextInput', label: '名称'},
+  { field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true },
+  { field: 'name', editor: 'TextInput', label: '名称' },
+  { field: 'userData.label', editor: 'TextInput', label: '标签' },
   { editor: 'Transform' },
   { field: 'color', editor: 'Color', label: '颜色' },
   { editor: '-' },
@@ -97,6 +98,8 @@ export type ItemTypeMeta = ItemTypeMetaItem[]
 export type ItemTypeMetaItem = {
   field?: string
   label?: string
+  labelWidth?: number
+  readonly?: boolean
   editor: '-' |
     'TextInput' | 'Number' | 'Switch' | 'Select' | 'ButtonGroup' |
     'UUID' | 'Color' | 'Transform' | 'IN_OUT_CENTER'