50 changed files with 1154 additions and 452 deletions
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,34 @@ |
|||
import type { FormField } from "@/components/data-form/DataFormTypes.ts"; |
|||
|
|||
interface PropertyFieldSetter extends FormField { |
|||
} |
|||
|
|||
interface PropertyFlattenSetter { |
|||
/** label宽度 */ |
|||
labelWidth?: string | number; |
|||
/** 表单字段大小 */ |
|||
size?: "" | "small" | "default" | "large"; |
|||
/** 设置器集合 */ |
|||
fields: Array<PropertyFieldSetter>; |
|||
} |
|||
|
|||
interface PropertySetterGroup extends PropertyFlattenSetter { |
|||
/** 分组标题 */ |
|||
title: string; |
|||
/** 是否展开状态(默认为true) */ |
|||
expand?: boolean; |
|||
} |
|||
|
|||
interface PropertySetter { |
|||
/** 最上面平铺的设置器 */ |
|||
flatten?: PropertyFlattenSetter; |
|||
/** 设置器分组集合 */ |
|||
groups?: Array<PropertySetterGroup>; |
|||
} |
|||
|
|||
export type { |
|||
PropertyFieldSetter, |
|||
PropertyFlattenSetter, |
|||
PropertySetterGroup, |
|||
PropertySetter, |
|||
} |
|||
@ -0,0 +1,112 @@ |
|||
<script setup lang="ts"> |
|||
import { computed, reactive } from "vue"; |
|||
import { ElCollapse, ElCollapseItem } from "element-plus"; |
|||
import DataForm from "@/components/data-form/DataForm.vue"; |
|||
import type { PropertyFlattenSetter, PropertySetterGroup } from "@/core/base/PropertyTypes.ts"; |
|||
import type { DataFormProps } from "@/components/data-form/DataFormTypes.ts"; |
|||
import { defDataFormProps } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
defineOptions({ |
|||
name: 'PropertyPanel', |
|||
}); |
|||
|
|||
// 定义 Props 类型 |
|||
interface PropertyPanelProps { |
|||
/** 待编辑数据 */ |
|||
data?: any; |
|||
/** 默认的DataFormProps */ |
|||
defDataFormProps?: DataFormProps; |
|||
/** 最上面平铺的设置器 */ |
|||
flatten?: PropertyFlattenSetter; |
|||
/** 设置器分组集合 */ |
|||
groups?: Array<PropertySetterGroup>; |
|||
} |
|||
|
|||
// 读取组件 props 属性 |
|||
const props = withDefaults(defineProps<PropertyPanelProps>(), {}); |
|||
|
|||
// 定义 State 类型 |
|||
interface PropertyPanelState { |
|||
expandGroups: Array<string>; |
|||
} |
|||
|
|||
// state 属性 |
|||
const state = reactive<PropertyPanelState>({ |
|||
expandGroups: [], |
|||
}); |
|||
|
|||
// 定义 Data 类型 |
|||
interface PropertyPanelData { |
|||
} |
|||
|
|||
// 内部数据 |
|||
const data: PropertyPanelData = {}; |
|||
const flattenFormProps = computed(() => getDefFormProps(props.flatten)); |
|||
|
|||
function getDefFormProps(setter?: PropertyFlattenSetter) { |
|||
const formProps: DataFormProps = { |
|||
...defDataFormProps, |
|||
...props.defDataFormProps, |
|||
}; |
|||
fillFormProps(setter); |
|||
return formProps; |
|||
} |
|||
|
|||
function fillFormProps(formProps: DataFormProps, setter?: PropertyFlattenSetter) { |
|||
if (!setter) return; |
|||
if (setter.size) formProps.size = setter.size; |
|||
if (setter.labelWidth) formProps.labelWidth = setter.labelWidth; |
|||
} |
|||
|
|||
function getCollapseItemId(group: PropertySetterGroup, idx: number) { |
|||
return `_${idx}_${group.title}`; |
|||
} |
|||
|
|||
interface PropertyPanelExpose { |
|||
state: PropertyPanelState; |
|||
data: PropertyPanelData; |
|||
} |
|||
|
|||
const expose: PropertyPanelExpose = { |
|||
state, |
|||
data, |
|||
}; |
|||
// 定义组件公开内容 |
|||
defineExpose(expose); |
|||
|
|||
export type { |
|||
PropertyPanelProps, |
|||
PropertyPanelState, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="property-panel"> |
|||
<DataForm |
|||
v-if="props.flatten" |
|||
class="property-panel-form" |
|||
v-bind="flattenFormProps" |
|||
:data="props.data" |
|||
:formFields="props.flatten.fields" |
|||
/> |
|||
<ElCollapse v-if="props.groups" v-model="state.expandGroups"> |
|||
<ElCollapseItem |
|||
v-for="(group, idx) in props.groups" |
|||
:name="getCollapseItemId(group, idx)" |
|||
:title="group.title" |
|||
> |
|||
<DataForm |
|||
v-if="group" |
|||
class="property-panel-form" |
|||
v-bind="getDefFormProps(group)" |
|||
:data="props.data" |
|||
:formFields="props.flatten.fields" |
|||
/> |
|||
</ElCollapseItem> |
|||
</ElCollapse> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
import type { DataFormProps } from "@/components/data-form/DataFormTypes.ts"; |
|||
import type { PropertyFieldSetter } from "@/core/base/PropertyTypes.ts"; |
|||
|
|||
const defDataFormProps: DataFormProps = { |
|||
columnCount: 1, |
|||
layout: "onlyLabelFixed", |
|||
labelWidth: "100px", |
|||
size: "small", |
|||
}; |
|||
|
|||
const basicFieldsSetter: Array<PropertyFieldSetter> = [ |
|||
{ |
|||
dataPath: 'id', label: '唯一ID', input: 'Input', |
|||
inputProps: { |
|||
readonly: true, |
|||
}, |
|||
}, |
|||
{ |
|||
dataPath: 'name', label: '名称', input: 'Input', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'visible', label: '可见', input: 'Checkbox', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.selectable', label: '可选中', input: 'Checkbox', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.protected', label: '受保护', input: 'Checkbox', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.label', label: '标签', input: 'Input', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.color', label: '颜色', input: 'ColorPicker', |
|||
inputProps: {}, |
|||
}, |
|||
// {
|
|||
// dataPath: 'tf', input: 'TransformEditor',
|
|||
// inputProps: {
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// dataPath: 'dt', input: 'InOutCenterEditor',
|
|||
// inputProps: {
|
|||
// },
|
|||
// },
|
|||
]; |
|||
|
|||
|
|||
export { |
|||
defDataFormProps, |
|||
basicFieldsSetter, |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
interface PropertyPanelProps { |
|||
|
|||
} |
|||
|
|||
export type { |
|||
PropertyPanelProps, |
|||
} |
|||
@ -1,188 +1,164 @@ |
|||
<template> |
|||
<div class="title"> |
|||
<template v-if="!!t"> |
|||
属性 |
|||
<el-tag type="primary">{{ t }}</el-tag> |
|||
<el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search"> |
|||
<template #prefix> |
|||
<component :is="renderIcon('element Search')"></component> |
|||
<div class="title"> |
|||
<template v-if="!!t"> |
|||
属性 |
|||
<el-tag type="primary">{{ t }}</el-tag> |
|||
<el-input v-model="searchKeyword" size="small" style="width: 240px" placeholder="Search"> |
|||
<template #prefix> |
|||
<component :is="renderIcon('element Search')"></component> |
|||
</template> |
|||
</el-input> |
|||
<span class="close" @click="closeMe()"> |
|||
<component :is="renderIcon('element Close')"/> |
|||
</span> |
|||
</template> |
|||
</el-input> |
|||
<span class="close" @click="closeMe()"> |
|||
<component :is="renderIcon('element Close')" /> |
|||
</span> |
|||
</template> |
|||
</div> |
|||
<div class="calc-right-panel"> |
|||
<el-empty v-if="!t" description="未选中"> |
|||
</el-empty> |
|||
<el-form v-else |
|||
label-position="right" |
|||
label-width="60" |
|||
class="property-panel-form" |
|||
size="default" |
|||
@submit.native.prevent> |
|||
<template v-for="(itemMeta, idx) in selectedObjectMeta"> |
|||
<el-divider v-if="itemMeta.editor === '-'" /> |
|||
|
|||
<TextInput |
|||
v-else-if="itemMeta.editor === 'TextInput'" |
|||
:prop="itemMeta" |
|||
:viewport="viewport" |
|||
/> |
|||
|
|||
<Transform |
|||
v-else-if="itemMeta.editor === 'TransformEditor'" |
|||
:prop="itemMeta" |
|||
:viewport="viewport" |
|||
</div> |
|||
<div class="calc-right-panel"> |
|||
<el-empty v-if="!t" description="未选中"/> |
|||
<PropertyPanel |
|||
v-else-if="propertyPanelProps" |
|||
v-bind="propertyPanelProps" |
|||
/> |
|||
|
|||
<SwitchItem |
|||
v-else-if="itemMeta.editor === 'Switch'" |
|||
:prop="itemMeta" |
|||
:viewport="viewport" |
|||
/> |
|||
|
|||
<ColorItem v-else-if="itemMeta.editor === 'Color'" :prop="itemMeta" :viewport="viewport" /> |
|||
|
|||
<UUIDItem v-else-if="itemMeta.editor === 'UUID'" :prop="itemMeta" :viewport="viewport" /> |
|||
|
|||
<NumberInput |
|||
v-else-if="itemMeta.editor === 'Number'" |
|||
:prop="itemMeta" |
|||
:viewport="viewport" |
|||
/> |
|||
|
|||
<template v-else> 未知编辑器: {{ itemMeta.editor }}</template> |
|||
</template> |
|||
</el-form> |
|||
</div> |
|||
<el-empty v-else description="节点未配置设置器"/> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import IWidgets from '../IWidgets.js' |
|||
import TextInput from '../../propEditors/TextInput.vue' |
|||
import Transform from '../../propEditors/Transform.vue' |
|||
import SwitchItem from '../../propEditors/SwitchItem.vue' |
|||
import ColorItem from '../../propEditors/ColorItem.vue' |
|||
import UUIDItem from '../../propEditors/UUIDItem.vue' |
|||
import NumberInput from '../../propEditors/NumberInput.vue' |
|||
import EventBus from '../../../runtime/EventBus.js' |
|||
import PropertyPanel from "@/editor/widgets/property/PropertyPanel.vue"; |
|||
|
|||
export default { |
|||
name: 'PropertyView', |
|||
components: { |
|||
NumberInput, |
|||
UUIDItem, |
|||
ColorItem, |
|||
SwitchItem, |
|||
TextInput, Transform |
|||
}, |
|||
mixins: [IWidgets], |
|||
data() { |
|||
return { |
|||
itemTypeMeta: null, |
|||
searchKeyword: '' |
|||
} |
|||
}, |
|||
computed: { |
|||
t() { |
|||
return this.selectedItem ? this.selectedItem.t : '' |
|||
name: 'PropertyView', |
|||
components: { |
|||
PropertyPanel, |
|||
}, |
|||
selectedItem() { |
|||
return this.state?.selectedItem |
|||
mixins: [IWidgets], |
|||
data() { |
|||
return { |
|||
searchKeyword: '', |
|||
propertySetter: undefined, |
|||
} |
|||
}, |
|||
selectedObject() { |
|||
return this.state?.selectedObject |
|||
computed: { |
|||
t() { |
|||
return this.selectedItem ? this.selectedItem.t : '' |
|||
}, |
|||
selectedItem() { |
|||
return this.state?.selectedItem |
|||
}, |
|||
// selectedObject() { |
|||
// return this.state?.selectedObject |
|||
// }, |
|||
// selectedObjectSetter() { |
|||
// return this.state?.selectedObjectSetter |
|||
// }, |
|||
propertyPanelProps() { |
|||
const state = this.state; |
|||
if (!state) return; |
|||
const { selectedObjectSetter, selectedItem } = state; |
|||
if (!selectedObjectSetter || !selectedItem) return; |
|||
const data = _.find(this.viewport.stateManager.vdata.items, item => item.id === selectedItem.id); |
|||
if (!data) return; |
|||
return { |
|||
key: data.id, |
|||
data: data, |
|||
flatten: selectedObjectSetter.flatten, |
|||
groups: selectedObjectSetter.groups, |
|||
}; |
|||
}, |
|||
}, |
|||
selectedObjectMeta() { |
|||
return this.state?.selectedObjectMeta |
|||
} |
|||
}, |
|||
methods: { |
|||
selectedObjectChanged(state) { |
|||
const data = state.selectedItem |
|||
console.log('selectedObjectChanged data', data) |
|||
if (data) { |
|||
this.viewport.stateManager.beginStateUpdate() |
|||
const item = _.find(this.viewport.stateManager.vdata.items, item => item.id === data.id) |
|||
// item.tf[0][0] = item.tf[0][0] / 2; |
|||
console.log('selectedObjectChanged item', item) |
|||
// _.extend(item, data) |
|||
this.viewport.stateManager.endStateUpdate() |
|||
} |
|||
watch: { |
|||
// selectedItem(newV, oldV) { |
|||
// console.log("selectedItem", arguments) |
|||
// }, |
|||
// selectedObject(newV, oldV) { |
|||
// console.log("selectedObject", arguments) |
|||
// }, |
|||
}, |
|||
methods: { |
|||
selectedObjectChanged(state) { |
|||
const data = state.selectedItem |
|||
console.log('selectedObjectChanged data', data) |
|||
if (data) { |
|||
this.viewport.stateManager.beginStateUpdate() |
|||
const item = _.find(this.viewport.stateManager.vdata.items, item => item.id === data.id) |
|||
// item.tf[0][0] = item.tf[0][0] / 2; |
|||
console.log('selectedObjectChanged item', item) |
|||
// _.extend(item, data) |
|||
this.viewport.stateManager.endStateUpdate() |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
// EventBus.on('selectedObjectChanged', this.selectedObjectChanged) |
|||
}, |
|||
unmounted() { |
|||
// EventBus.off('selectedObjectChanged', this.selectedObjectChanged) |
|||
} |
|||
}, |
|||
mounted() { |
|||
EventBus.on('selectedObjectChanged', this.selectedObjectChanged) |
|||
}, |
|||
unmounted() { |
|||
EventBus.off('selectedObjectChanged', this.selectedObjectChanged) |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="less"> |
|||
.property-panel-form { |
|||
margin: 0; |
|||
font-size: 14px; |
|||
color: #606266; |
|||
|
|||
.el-form-item--default { |
|||
margin: 5px 3px 0 0; |
|||
|
|||
.el-form-item__label { |
|||
height: 20px; |
|||
line-height: 22px; |
|||
} |
|||
} |
|||
margin: 0; |
|||
font-size: 14px; |
|||
color: #606266; |
|||
|
|||
.gui-toolbar { |
|||
color: #333; |
|||
background: #ffffff; |
|||
border-top: 1px solid #dcdcdc; |
|||
margin-top: 5px; |
|||
.el-form-item--default { |
|||
margin: 5px 3px 0 0; |
|||
|
|||
.el-input-number.is-without-controls .el-input__wrapper { |
|||
padding-left: 2px; |
|||
padding-right: 2px; |
|||
.el-form-item__label { |
|||
height: 20px; |
|||
line-height: 22px; |
|||
} |
|||
} |
|||
|
|||
.gui-row { |
|||
display: flex; |
|||
flex-direction: row; |
|||
gap: 3px; |
|||
padding: 3px 3px 3px 0; |
|||
|
|||
.gui-item-name { |
|||
width: 26px; |
|||
align-self: stretch; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
.gui-toolbar { |
|||
color: #333; |
|||
background: #ffffff; |
|||
border-top: 1px solid #dcdcdc; |
|||
margin-top: 5px; |
|||
|
|||
.el-icon { |
|||
font-size: 16px; |
|||
.el-input-number.is-without-controls .el-input__wrapper { |
|||
padding-left: 2px; |
|||
padding-right: 2px; |
|||
} |
|||
} |
|||
|
|||
.gui-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
|
|||
.el-input-number { |
|||
width: 100%; |
|||
|
|||
.el-input__wrapper { |
|||
background-color: #efefef; |
|||
box-shadow: none; |
|||
} |
|||
.gui-row { |
|||
display: flex; |
|||
flex-direction: row; |
|||
gap: 3px; |
|||
padding: 3px 3px 3px 0; |
|||
|
|||
.gui-item-name { |
|||
width: 26px; |
|||
align-self: stretch; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.el-icon { |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
|
|||
.gui-item { |
|||
flex: 1; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
|
|||
.el-input-number { |
|||
width: 100%; |
|||
|
|||
.el-input__wrapper { |
|||
background-color: #efefef; |
|||
box-shadow: none; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-divider { |
|||
margin: 5px 0; |
|||
} |
|||
.el-divider { |
|||
margin: 5px 0; |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,5 @@ |
|||
import BaseEntity from '@/core/base/BaseItemEntity.ts' |
|||
|
|||
export default class ChargerEntity extends BaseEntity { |
|||
|
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
import BaseInteraction from '@/core/base/BaseInteraction.ts' |
|||
import * as THREE from 'three' |
|||
|
|||
export default class ChargerInteraction extends BaseInteraction { |
|||
|
|||
get isSinglePointMode(): boolean { |
|||
return true |
|||
} |
|||
|
|||
constructor(itemTypeName: string) { |
|||
super(itemTypeName) |
|||
} |
|||
|
|||
createPointOfItem(item: ItemJson, point: THREE.Vector3): ItemJson { |
|||
item = super.createPointOfItem(item, point) |
|||
|
|||
// 创建一个地堆货架
|
|||
item.dt.palletWidth = 1 // 宽度
|
|||
item.dt.palletDepth = 1.2 // 深度
|
|||
return item |
|||
} |
|||
} |
|||
@ -0,0 +1,97 @@ |
|||
import * as THREE from 'three' |
|||
import BaseRenderer from '@/core/base/BaseRenderer.ts' |
|||
import { Line2 } from 'three/examples/jsm/lines/Line2.js' |
|||
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js' |
|||
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js' |
|||
import {decimalSumBy} from "@/core/ModelUtils"; |
|||
import Constract from '@/core/Constract.ts' |
|||
import chargerUrl from '@/assets/images/ptr/charger.png' |
|||
|
|||
/** |
|||
* 充电器渲染器 |
|||
*/ |
|||
export default class ChargerRenderer extends BaseRenderer { |
|||
static POINT_NAME = 'charger' |
|||
|
|||
pointMaterial: THREE.Material |
|||
|
|||
/** |
|||
* 默认点的高度, 防止和地面重合 |
|||
*/ |
|||
readonly defulePositionY: number = Constract.HEIGHT_WAY |
|||
readonly defaultScale: THREE.Vector3 = new THREE.Vector3(1, 1, 1) |
|||
readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(0, 0, 0) |
|||
readonly defaultLineWidth: number = 0.15 |
|||
|
|||
constructor(itemTypeName: string) { |
|||
super(itemTypeName) |
|||
} |
|||
|
|||
/** |
|||
* 所有的点，必须使用 storeWidth/storeDepth, 改TF无效 |
|||
*/ |
|||
override afterCreateOrUpdatePoint(item: ItemJson, option: RendererCudOption, objects: THREE.Object3D[]) { |
|||
super.afterCreateOrUpdatePoint(item, option, objects) |
|||
|
|||
const point = objects[0] |
|||
// point.position.y = this.defulePositionY
|
|||
// point.scale.set(_.sumBy(item.dt.bays, b=>b.bayWidth), this.defaultScale.y, item.dt.rackDepth)
|
|||
point.rotation.set( |
|||
THREE.MathUtils.degToRad(item.tf[1][0]), |
|||
THREE.MathUtils.degToRad(item.tf[1][1]), |
|||
THREE.MathUtils.degToRad(item.tf[1][2]) |
|||
) |
|||
} |
|||
|
|||
|
|||
createLineBasic(start: ItemJson, end: ItemJson, type: LinkType): THREE.Object3D[] { |
|||
throw new Error('not allow store line.') |
|||
} |
|||
|
|||
updateLine(start: ItemJson, end: ItemJson, type: LinkType, option?: RendererCudOption) { |
|||
throw new Error('not allow store line.') |
|||
} |
|||
|
|||
|
|||
createPoint(item: ItemJson, option?: RendererCudOption): THREE.Object3D[] { |
|||
// 创建平面几何体
|
|||
if (!item.dt.chargerWidth || !item.dt.chargerDepth) { |
|||
return [] |
|||
} |
|||
|
|||
const textureLoader = new THREE.TextureLoader() |
|||
const texture = textureLoader.load(chargerUrl) |
|||
|
|||
const group = new THREE.Group() |
|||
group.name = ChargerRenderer.POINT_NAME |
|||
|
|||
// 绘制背景矩形框
|
|||
const planeGeometry = new THREE.PlaneGeometry(item.dt.chargerWidth, item.dt.chargerDepth); |
|||
planeGeometry.rotateX(-Math.PI / 2) |
|||
const planeMaterial = new THREE.MeshLambertMaterial({ |
|||
map: texture, // 颜色贴图
|
|||
transparent: true, // 允许透明纹理
|
|||
}); |
|||
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); |
|||
group.add(planeMesh) |
|||
|
|||
// 设置位置
|
|||
group.position.set(item.tf[0][0], item.tf[0][1], item.tf[0][2]) |
|||
|
|||
const points = [group] |
|||
this.fillObjectUserDataFromItem(item, ...points) |
|||
this.afterCreateOrUpdatePoint(item, option, points) |
|||
this.tempViewport.entityManager.appendObject(item.id, points) |
|||
this.appendToScene(...points) |
|||
return points |
|||
} |
|||
|
|||
dispose() { |
|||
super.dispose() |
|||
this.pointMaterial?.dispose() |
|||
} |
|||
|
|||
createPointBasic(item: ItemJson, option?: RendererCudOption): Object3D[] { |
|||
return []; |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
import { defineModule } from '@/core/manager/ModuleManager.ts' |
|||
import ChargerRenderer from './ChargerRenderer.ts' |
|||
import ChargerEntity from './ChargerEntity.ts' |
|||
import ChargerMeta from './ChargerMeta.ts' |
|||
import ChargerInteraction from './ChargerInteraction.ts' |
|||
|
|||
export const ITEM_TYPE_NAME = 'charger' |
|||
|
|||
export default defineModule({ |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new ChargerRenderer(ITEM_TYPE_NAME), |
|||
interaction: new ChargerInteraction(ITEM_TYPE_NAME), |
|||
meta: ChargerMeta, |
|||
entity: ChargerEntity |
|||
}) |
|||
@ -0,0 +1,5 @@ |
|||
import BaseEntity from '@/core/base/BaseItemEntity.ts' |
|||
|
|||
export default class ClxEntity extends BaseEntity { |
|||
|
|||
} |
|||
@ -0,0 +1,22 @@ |
|||
import BaseInteraction from '@/core/base/BaseInteraction.ts' |
|||
import * as THREE from 'three' |
|||
|
|||
export default class ClxInteraction extends BaseInteraction { |
|||
|
|||
get isSinglePointMode(): boolean { |
|||
return true |
|||
} |
|||
|
|||
constructor(itemTypeName: string) { |
|||
super(itemTypeName) |
|||
} |
|||
|
|||
createPointOfItem(item: ItemJson, point: THREE.Vector3): ItemJson { |
|||
item = super.createPointOfItem(item, point) |
|||
|
|||
// 创建一个地堆货架
|
|||
item.dt.palletWidth = 1 // 宽度
|
|||
item.dt.palletDepth = 1.2 // 深度
|
|||
return item |
|||
} |
|||
} |
|||
@ -0,0 +1,97 @@ |
|||
import * as THREE from 'three' |
|||
import BaseRenderer from '@/core/base/BaseRenderer.ts' |
|||
import { Line2 } from 'three/examples/jsm/lines/Line2.js' |
|||
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js' |
|||
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js' |
|||
import {decimalSumBy} from "@/core/ModelUtils"; |
|||
import Constract from '@/core/Constract.ts' |
|||
import clxUrl from '@/assets/images/ptr/clx.png' |
|||
|
|||
/** |
|||
* clx渲染器 |
|||
*/ |
|||
export default class ClxRenderer extends BaseRenderer { |
|||
static POINT_NAME = 'clx' |
|||
|
|||
pointMaterial: THREE.Material |
|||
|
|||
/** |
|||
* 默认点的高度, 防止和地面重合 |
|||
*/ |
|||
readonly defulePositionY: number = Constract.HEIGHT_WAY |
|||
readonly defaultScale: THREE.Vector3 = new THREE.Vector3(1, 1, 1) |
|||
readonly defaultRotation: THREE.Vector3 = new THREE.Vector3(0, 0, 0) |
|||
readonly defaultLineWidth: number = 0.15 |
|||
|
|||
constructor(itemTypeName: string) { |
|||
super(itemTypeName) |
|||
} |
|||
|
|||
/** |
|||
* 所有的点，必须使用 storeWidth/storeDepth, 改TF无效 |
|||
*/ |
|||
override afterCreateOrUpdatePoint(item: ItemJson, option: RendererCudOption, objects: THREE.Object3D[]) { |
|||
super.afterCreateOrUpdatePoint(item, option, objects) |
|||
|
|||
const point = objects[0] |
|||
// point.position.y = this.defulePositionY
|
|||
// point.scale.set(_.sumBy(item.dt.bays, b=>b.bayWidth), this.defaultScale.y, item.dt.rackDepth)
|
|||
point.rotation.set( |
|||
THREE.MathUtils.degToRad(item.tf[1][0]), |
|||
THREE.MathUtils.degToRad(item.tf[1][1]), |
|||
THREE.MathUtils.degToRad(item.tf[1][2]) |
|||
) |
|||
} |
|||
|
|||
|
|||
createLineBasic(start: ItemJson, end: ItemJson, type: LinkType): THREE.Object3D[] { |
|||
throw new Error('not allow store line.') |
|||
} |
|||
|
|||
updateLine(start: ItemJson, end: ItemJson, type: LinkType, option?: RendererCudOption) { |
|||
throw new Error('not allow store line.') |
|||
} |
|||
|
|||
|
|||
createPoint(item: ItemJson, option?: RendererCudOption): THREE.Object3D[] { |
|||
// 创建平面几何体
|
|||
if (!item.dt.clxWidth || !item.dt.clxDepth) { |
|||
return [] |
|||
} |
|||
|
|||
const textureLoader = new THREE.TextureLoader() |
|||
const texture = textureLoader.load(clxUrl) |
|||
|
|||
const group = new THREE.Group() |
|||
group.name = ClxRenderer.POINT_NAME |
|||
|
|||
// 绘制背景矩形框
|
|||
const planeGeometry = new THREE.PlaneGeometry(item.dt.clxWidth, item.dt.clxDepth); |
|||
planeGeometry.rotateX(-Math.PI / 2) |
|||
const planeMaterial = new THREE.MeshLambertMaterial({ |
|||
map: texture, // 颜色贴图
|
|||
transparent: true, // 允许透明纹理
|
|||
}); |
|||
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); |
|||
group.add(planeMesh) |
|||
|
|||
// 设置位置
|
|||
group.position.set(item.tf[0][0], item.tf[0][1], item.tf[0][2]) |
|||
|
|||
const points = [group] |
|||
this.fillObjectUserDataFromItem(item, ...points) |
|||
this.afterCreateOrUpdatePoint(item, option, points) |
|||
this.tempViewport.entityManager.appendObject(item.id, points) |
|||
this.appendToScene(...points) |
|||
return points |
|||
} |
|||
|
|||
dispose() { |
|||
super.dispose() |
|||
this.pointMaterial?.dispose() |
|||
} |
|||
|
|||
createPointBasic(item: ItemJson, option?: RendererCudOption): Object3D[] { |
|||
return []; |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
import { defineModule } from '@/core/manager/ModuleManager.ts' |
|||
import ClxRenderer from './ClxRenderer.ts' |
|||
import ClxEntity from './ClxEntity.ts' |
|||
import ClxMeta from './ClxMeta.ts' |
|||
import ClxInteraction from './ClxInteraction.ts' |
|||
|
|||
export const ITEM_TYPE_NAME = 'clx' |
|||
|
|||
export default defineModule({ |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new ClxRenderer(ITEM_TYPE_NAME), |
|||
interaction: new ClxInteraction(ITEM_TYPE_NAME), |
|||
meta: ClxMeta, |
|||
entity: ClxEntity |
|||
}) |
|||
@ -1,14 +0,0 @@ |
|||
import type { IMeta } from '@/core/base/IMeta.ts' |
|||
|
|||
export default [ |
|||
{ field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' }, |
|||
{ field: 'name', editor: 'TextInput', label: '名称', category: 'basic' }, |
|||
{ field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' }, |
|||
{ editor: 'TransformEditor', category: 'basic' }, |
|||
{ field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' }, |
|||
{ editor: '-', category: 'basic' }, |
|||
{ field: 'tf', editor: 'InOutCenterEditor', category: 'basic' }, |
|||
{ field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' }, |
|||
{ field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' }, |
|||
{ field: 'visible', editor: 'Switch', label: '可见', category: 'basic' } |
|||
] as IMeta |
|||
@ -0,0 +1,12 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
@ -1,15 +1,15 @@ |
|||
import { defineModule } from '@/core/manager/ModuleManager.ts' |
|||
import GstoreRenderer from './GstoreRenderer.ts' |
|||
import GstoreEntity from './GstoreEntity.ts' |
|||
import GstoreMeta from './GstoreMeta.ts' |
|||
import GstoreInteraction from './GstoreInteraction.ts' |
|||
import propertySetter from "@/modules/gstore/GstorePropertySetter.ts"; |
|||
|
|||
export const ITEM_TYPE_NAME = 'gstore' |
|||
|
|||
export default defineModule({ |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new GstoreRenderer(ITEM_TYPE_NAME), |
|||
interaction: new GstoreInteraction(ITEM_TYPE_NAME), |
|||
meta: GstoreMeta, |
|||
entity: GstoreEntity |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new GstoreRenderer(ITEM_TYPE_NAME), |
|||
interaction: new GstoreInteraction(ITEM_TYPE_NAME), |
|||
setter: propertySetter, |
|||
entity: GstoreEntity, |
|||
}) |
|||
@ -1,15 +0,0 @@ |
|||
import type { IMeta } from '@/core/base/IMeta.ts' |
|||
|
|||
const MeasureMeta: IMeta = [ |
|||
{ field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' }, |
|||
{ field: 'name', editor: 'TextInput', label: '名称', category: 'basic' }, |
|||
{ field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' }, |
|||
{ editor: 'TransformEditor', category: 'basic' }, |
|||
{ field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' }, |
|||
{ editor: '-', category: 'basic' }, |
|||
{ field: 'tf', editor: 'InOutCenterEditor', category: 'basic' }, |
|||
{ field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' }, |
|||
{ field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' }, |
|||
{ field: 'visible', editor: 'Switch', label: '可见', category: 'basic' } |
|||
] |
|||
export default MeasureMeta |
|||
@ -0,0 +1,12 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
@ -1,15 +1,15 @@ |
|||
import { defineModule } from '@/core/manager/ModuleManager.ts' |
|||
import MeasureRenderer from './MeasureRenderer.ts' |
|||
import MeasureEntity from './MeasureEntity.ts' |
|||
import MeasureMeta from './MeasureMeta.ts' |
|||
import MeasureInteraction from './MeasureInteraction.ts' |
|||
import propertySetter from "@/modules/measure/MeasurePropertySetter.ts"; |
|||
|
|||
export const ITEM_TYPE_NAME = 'measure' |
|||
|
|||
export default defineModule({ |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new MeasureRenderer(ITEM_TYPE_NAME), |
|||
interaction: new MeasureInteraction(ITEM_TYPE_NAME), |
|||
meta: MeasureMeta, |
|||
entity: MeasureEntity |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new MeasureRenderer(ITEM_TYPE_NAME), |
|||
interaction: new MeasureInteraction(ITEM_TYPE_NAME), |
|||
setter: propertySetter, |
|||
entity: MeasureEntity, |
|||
}) |
|||
@ -0,0 +1,20 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
{ |
|||
dataPath: 'dt.palletWidth', label: '托盘宽度', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.palletDepth', label: '托盘深度', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
@ -1,15 +1,15 @@ |
|||
import { defineModule } from '@/core/manager/ModuleManager.ts' |
|||
import PalletRenderer from './PalletRenderer.ts' |
|||
import PalletEntity from './PalletEntity.ts' |
|||
import PalletMeta from './PalletMeta.ts' |
|||
import PalletInteraction from './PalletInteraction.ts' |
|||
import propertySetter from "@/modules/pallet/PalletPropertySetter.ts"; |
|||
|
|||
export const ITEM_TYPE_NAME = 'pallet' |
|||
|
|||
export default defineModule({ |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new PalletRenderer(ITEM_TYPE_NAME), |
|||
interaction: new PalletInteraction(ITEM_TYPE_NAME), |
|||
meta: PalletMeta, |
|||
entity: PalletEntity |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new PalletRenderer(ITEM_TYPE_NAME), |
|||
interaction: new PalletInteraction(ITEM_TYPE_NAME), |
|||
setter: propertySetter, |
|||
entity: PalletEntity, |
|||
}) |
|||
|
|||
@ -0,0 +1,20 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
{ |
|||
dataPath: 'dt.palletWidth', label: '托盘宽度', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.palletDepth', label: '托盘深度', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
@ -1,15 +1,15 @@ |
|||
import { defineModule } from '@/core/manager/ModuleManager.ts' |
|||
import PtrRenderer from './PtrRenderer.ts' |
|||
import PtrEntity from './PtrEntity.ts' |
|||
import PtrMeta from './PtrMeta.ts' |
|||
import PtrInteraction from './PtrInteraction.ts' |
|||
import propertySetter from "@/modules/ptr/PtrPropertySetter.ts"; |
|||
|
|||
export const ITEM_TYPE_NAME = 'ptr' |
|||
|
|||
export default defineModule({ |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new PtrRenderer(ITEM_TYPE_NAME), |
|||
interaction: new PtrInteraction(ITEM_TYPE_NAME), |
|||
meta: PtrMeta, |
|||
entity: PtrEntity |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new PtrRenderer(ITEM_TYPE_NAME), |
|||
interaction: new PtrInteraction(ITEM_TYPE_NAME), |
|||
setter: propertySetter, |
|||
entity: PtrEntity, |
|||
}) |
|||
|
|||
@ -0,0 +1,64 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
{ |
|||
dataPath: 'dt.rackDepth', label: '货架深度', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.levelCount', label: '总层数', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.bayCount', label: '总列数', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.hideFloor', label: '隐藏底板', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.extendColumns', label: '扩展挡板', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.columnSpacing', label: '支脚跨越', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
// {
|
|||
// dataPath: 'dt.bays', input: 'BayEditor',
|
|||
// inputProps: {
|
|||
// },
|
|||
// },
|
|||
/** |
|||
* dt.bays 5列3层货架示例 |
|||
* { |
|||
* dt: { |
|||
* rackDepth: 1.1, // 货架深度
|
|||
* levelCount: 3, // 总层数
|
|||
* bayCount: 5, // 总列数
|
|||
* hideFloor: false, // 隐藏底板
|
|||
* extendColumns: true, // 扩展挡板
|
|||
* columnSpacing: 1, // 支脚跨越
|
|||
* bays: [ // 每列的配置
|
|||
* { |
|||
* bayWidth: 1.6, // 列的宽度
|
|||
* levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
|
|||
* }, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* ] |
|||
* } |
|||
* } |
|||
*/ |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
@ -1,15 +1,15 @@ |
|||
import { defineModule } from '@/core/manager/ModuleManager.ts' |
|||
import RackRenderer from './RackRenderer.ts' |
|||
import RackEntity from './RackEntity.ts' |
|||
import RackMeta from './RackMeta.ts' |
|||
import RackInteraction from './RackInteraction.ts' |
|||
import propertySetter from "@/modules/rack/RackPropertySetter.ts"; |
|||
|
|||
export const ITEM_TYPE_NAME = 'rack' |
|||
|
|||
export default defineModule({ |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new RackRenderer(ITEM_TYPE_NAME), |
|||
interaction: new RackInteraction(ITEM_TYPE_NAME), |
|||
meta: RackMeta, |
|||
entity: RackEntity |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new RackRenderer(ITEM_TYPE_NAME), |
|||
interaction: new RackInteraction(ITEM_TYPE_NAME), |
|||
setter: propertySetter, |
|||
entity: RackEntity, |
|||
}) |
|||
|
|||
@ -1,14 +0,0 @@ |
|||
import type { IMeta } from '@/core/base/IMeta.ts' |
|||
|
|||
export default [ |
|||
{ field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' }, |
|||
{ field: 'name', editor: 'TextInput', label: '名称', category: 'basic' }, |
|||
{ field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' }, |
|||
{ editor: 'TransformEditor', category: 'basic' }, |
|||
{ field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' }, |
|||
{ editor: '-', category: 'basic' }, |
|||
{ field: 'tf', editor: 'InOutCenterEditor', category: 'basic' }, |
|||
{ field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' }, |
|||
{ field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' }, |
|||
{ field: 'visible', editor: 'Switch', label: '可见', category: 'basic' } |
|||
] as IMeta |
|||
@ -0,0 +1,12 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
@ -1,15 +1,15 @@ |
|||
import { defineModule } from '@/core/manager/ModuleManager.ts' |
|||
import WayRenderer from './WayRenderer.ts' |
|||
import WayEntity from './WayEntity.ts' |
|||
import WayMeta from './WayMeta.ts' |
|||
import WayInteraction from './WayInteraction.ts' |
|||
import propertySetter from "@/modules/way/WayPropertySetter.ts"; |
|||
|
|||
export const ITEM_TYPE_NAME = 'way' |
|||
|
|||
export default defineModule({ |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new WayRenderer(ITEM_TYPE_NAME), |
|||
interaction: new WayInteraction(ITEM_TYPE_NAME), |
|||
meta: WayMeta, |
|||
entity: WayEntity |
|||
name: ITEM_TYPE_NAME, |
|||
renderer: new WayRenderer(ITEM_TYPE_NAME), |
|||
interaction: new WayInteraction(ITEM_TYPE_NAME), |
|||
setter: propertySetter, |
|||
entity: WayEntity, |
|||
}) |
|||
Loading…
Reference in new issue