Initial commit

modeler/src/views/decision/properties.vue

@@ -1,12 +1,31 @@
 <template>
   <div class="ks-model-builder-right">
-    <template v-if="currentElement">
+    <template  v-if="currentElement || tree">
 
       <a-tabs v-model:activeKey="activeTopTabsKey" class="ks-model-builder-tabs settings-tab">
         <template #leftExtra>
           <span class="ks-model-builder-title-icon icon-input"></span>
         </template>
-        <a-tab-pane key="1" tab="节点属性">
+
+        <a-tab-pane key="1" tab="行为树属性" v-if="tree">
+          <a-form
+            autocomplete="off"
+            layout="vertical"
+            name="basic"
+            style="padding-bottom:15px;"
+          >
+            <a-form-item label="行为树名称">
+              <a-input size="small" v-model:value="tree.name" placeholder="行为树名称" />
+            </a-form-item>
+
+            <a-form-item label="行为树说明">
+              <a-textarea size="small" v-model:value="tree.description" placeholder="行为树说明" />
+            </a-form-item>
+
+          </a-form>
+        </a-tab-pane>
+
+        <a-tab-pane key="2" tab="节点属性" v-if="currentElement">
           <a-form
             autocomplete="off"
             layout="vertical"
@@ -42,7 +61,7 @@
 
       </a-tabs>
 
-      <a-tabs v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs parameters-tabs">
+      <a-tabs  v-if="currentElement" v-model:activeKey="activeBottomTabsKey" class="ks-model-builder-tabs parameters-tabs">
         <template #leftExtra>
           <span class="ks-model-builder-title-icon icon-input"></span>
         </template>
@@ -106,6 +125,7 @@
 import { defineComponent, onMounted, type PropType, ref, watch } from 'vue';
 import { CheckOutlined } from '@ant-design/icons-vue';
 import type { ElementVariable, GraphTaskElement } from './builder/element';
+import type {BehaviorTree} from './types'
 import type { Graph, Node, NodeProperties } from '@antv/x6';
 import { generateKey } from '@/utils/strings';
 
@@ -120,15 +140,19 @@ const actionSpaceColumns = [
 export default defineComponent({
   components: { CheckOutlined },
   props: {
+    tree: { type: [Object, null] as PropType<BehaviorTree | null | undefined>, required: false },
+    treeEditing: { type: Boolean as PropType<boolean>, required: true, default: false, },
     node: { type: [Object, null] as PropType<Node<NodeProperties> | null | undefined>, required: false },
     graph: { type: [Object, null] as PropType<Graph | null | undefined>, required: true }
   },
-  emits: ['update-element'],
+  emits: ['update-element', 'update-tree'],
   setup(props, { emit }) {
     const activeTopTabsKey = ref<string>('1');
     const activeBottomTabsKey = ref<string>('1');
     const activeBottomTabs2Key = ref<string>('1');
 
+    const currentTree = ref<BehaviorTree| null>(props.tree ?? null);
+    const treeEditing = ref<boolean>(props.treeEditing);
     const currentNode = ref<Node | null>(props.node ?? null);
     const currentElement = ref<GraphTaskElement | null>(null);
 
@@ -186,6 +210,22 @@ export default defineComponent({
       { deep: true, immediate: true },
     );
 
+    watch(
+      () => props.tree,
+      (n?: BehaviorTree | null | undefined) => {
+        currentTree.value = n ?? null;
+      },
+      { deep: true, immediate: true },
+    );
+
+    watch(
+      () => props.treeEditing,
+      (n?: boolean | null | undefined) => {
+        treeEditing.value = n === true;
+      },
+      { deep: true, immediate: true },
+    );
+
     watch(() => currentElement.value, () => updateNode(), { deep: true });
 
     onMounted(() => load());
@@ -198,6 +238,8 @@ export default defineComponent({
       currentElement,
       addVariable,
       removeVariable,
+      currentTree,
+      treeEditing,
       // currentElementParameters,
     };
   },