Initial commit

modeler/src/style.less

@@ -986,6 +986,7 @@
     width: 300px;
     float: left;
     margin-left: -1px;
+    background: #041b36db;
 
     .observation-items{
       //height: 160px;

modeler/src/views/decision/designer.vue

@@ -47,6 +47,8 @@
           <Properties
             v-if="graph"
             @update-element="handleUpdateElement"
+            :tree="currentBehaviorTree"
+            :tree-editing="currentTreeEditing"
             :element="selectedNodeTaskElement"
             :graph="graph as any"
             :node="selectedModelNode as any" />
@@ -100,6 +102,7 @@ export default defineComponent({
     const currentZoom = ref<number>(1);
     const draggedNodeData = ref<NodeTemplate | null>(null);
     const isDraggingOver = ref(false);
+    const currentTreeEditing = ref<boolean>(false);
     const currentBehaviorTree = ref<BehaviorTree | null>(null);
     const currentNodeGraph = ref<NodeGraph | null>(null);
     const selectedModelNode = ref<Node<NodeProperties> | null>(null);
@@ -154,6 +157,7 @@ export default defineComponent({
       safePreventDefault(e);
       safeStopPropagation(e);
       isDraggingOver.value = false;
+      currentTreeEditing.value = false;
 
       if (!currentBehaviorTree.value) {
         message.error('请先选择或者创建行为树.');
@@ -224,6 +228,7 @@ export default defineComponent({
             ...r.data,
             graph: nodeGraph,
           };
+          currentTreeEditing.value = true;
           createElements();
         } else {
           message.error(r.msg ?? '行为树不存在.');
@@ -275,6 +280,12 @@ export default defineComponent({
           currentZoom.value = sx;
         });
 
+        handleGraphEvent('blank:click', () => {
+          selectedModelNode.value = null;
+          selectedNodeTaskElement.value = null;
+          currentTreeEditing.value = null !== currentBehaviorTree.value;
+        });
+
         handleGraphEvent('node:click', (args: any) => {
           const node = args.node as Node<NodeProperties>;
           const newElement = node.getData() as GraphTaskElement;
@@ -368,6 +379,7 @@ export default defineComponent({
     });
 
     return {
+      currentTreeEditing,
       currentBehaviorTree,
       currentNodeGraph,
       selectedNodeTaskElement,

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,
     };
   },