diff --git a/modeler/src/views/decision/builder/element.ts b/modeler/src/views/decision/builder/element.ts index abb4b29..ad1843f 100644 --- a/modeler/src/views/decision/builder/element.ts +++ b/modeler/src/views/decision/builder/element.ts @@ -18,6 +18,7 @@ export interface DraggableElement { draggable: boolean, parent?: DraggableElement, children: DraggableElement[] + [key: string]: unknown; } diff --git a/modeler/src/views/decision/builder/graph.ts b/modeler/src/views/decision/builder/graph.ts index 55091f8..d7d371d 100644 --- a/modeler/src/views/decision/builder/graph.ts +++ b/modeler/src/views/decision/builder/graph.ts @@ -10,7 +10,7 @@ import { Edge, Graph, Path, Selection } from '@antv/x6'; import type { ModelElement } from './element'; import type { Connecting } from '@antv/x6/lib/graph/options'; -import {createLineOptions} from './line' +import { createLineOptions } from './line'; Graph.registerConnector( 'sequenceFlowConnector', @@ -55,7 +55,7 @@ export const createGraphConnectingAttributes = (): Partial => { attrs: lineOptions.attrs, animation: lineOptions.animation, markup: lineOptions.markup, - }) + }); return edge; }, validateConnection(this: Graph, { sourceCell, targetCell }) { diff --git a/modeler/src/views/decision/builder/hooks.ts b/modeler/src/views/decision/builder/hooks.ts index cc04289..1799557 100644 --- a/modeler/src/views/decision/builder/hooks.ts +++ b/modeler/src/views/decision/builder/hooks.ts @@ -13,6 +13,7 @@ import type { NodeViewPositionEventArgs } from '@antv/x6/es/view/node/type'; import { createGraphCanvas } from './graph'; import { EventListener } from '@/utils/event'; import type { ModelElement } from './element'; + // import {createLineOptions} from './line' export interface UseGraphCanvas { @@ -163,7 +164,7 @@ export const useGraphCanvas = (readonly: boolean = false): UseGraphCanvas => { router: {}, attrs: {}, target: targetNode.id, - targetName: targetData.name + targetName: targetData.name, }); sourceNode.replaceData({ ...sourceData, edges: sourceEdges }); } diff --git a/modeler/src/views/decision/builder/line.ts b/modeler/src/views/decision/builder/line.ts index 7ee5b4e..5e444d7 100644 --- a/modeler/src/views/decision/builder/line.ts +++ b/modeler/src/views/decision/builder/line.ts @@ -43,5 +43,5 @@ export const createLineOptions = (): any => { }, ], ], - } -} \ No newline at end of file + }; +}; \ No newline at end of file diff --git a/modeler/src/views/decision/builder/node.vue b/modeler/src/views/decision/builder/node.vue index a5feffe..af672d6 100644 --- a/modeler/src/views/decision/builder/node.vue +++ b/modeler/src/views/decision/builder/node.vue @@ -19,10 +19,10 @@

- {{ substring(element?.description ?? (element?.name ?? '-') ,40) }} + {{ substring(element?.description ?? (element?.name ?? '-'), 40) }}

@@ -47,7 +47,7 @@ import { elementProps } from './props'; import type { ModelElement } from './element'; import { DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue'; import type { Graph } from '@antv/x6'; -import {substring} from '@/utils/strings' +import { substring } from '@/utils/strings'; export default defineComponent({ name: 'ModelElement', @@ -133,7 +133,7 @@ export default defineComponent({ width: 100%; height: 100%; cursor: pointer; - position: relative; + position: relative; .ant-card-head { border: 0; @@ -184,6 +184,7 @@ export default defineComponent({ background: url('@/assets/icons/m-02.png') center / 100% 100%; } } + &.ks-designer-input-node { background: linear-gradient(150deg, #083058 1%, #1e5d9b 55%); diff --git a/modeler/src/views/decision/designer.vue b/modeler/src/views/decision/designer.vue index dfd3f39..a83abc5 100644 --- a/modeler/src/views/decision/designer.vue +++ b/modeler/src/views/decision/designer.vue @@ -48,12 +48,12 @@ + :node="selectedModelNode as any" + :tree="currentBehaviorTree" + :tree-editing="currentTreeEditing" + @update-element="handleUpdateElement" /> @@ -70,16 +70,16 @@ import { Wrapper } from '@/components/wrapper'; import { safePreventDefault, safeStopPropagation } from '@/utils/event'; import Header from './header.vue'; import Properties from './properties.vue'; -import { useGraphCanvas } from './builder/hooks'; -import { registerNodeElement } from './builder/register'; import type { BehaviorTree, NodeTemplate } from './types'; import type { GraphTaskElement, NodeGraph } from './builder/element'; +import { useGraphCanvas } from './builder/hooks'; +import { registerNodeElement } from './builder/register'; +import { createLineOptions } from './builder/line'; import { createTree, findOneTreeById, updateTree } from './api'; import { createGraphTaskElement, hasElements, hasRootElementNode, resolveNodeGraph } from './builder/utils'; import { createGraphTaskElementFromTemplate } from './utils/node'; import TressCard from './trees-card.vue'; import NodesCard from './nodes-card.vue'; -import { createLineOptions } from '@/views/decision/builder/line.ts'; const TeleportContainer = defineComponent(getTeleport()); @@ -241,12 +241,12 @@ export default defineComponent({ const createElements = () => { nextTick(() => { - try{ + try { graph.value?.clearCells(); - } catch (e: any){ - console.error('clear cells error, cause:',e); + } catch (e: any) { + console.error('clear cells error, cause:', e); } - setTimeout(()=> { + setTimeout(() => { if (currentBehaviorTree.value?.graph && graph.value) { if (currentBehaviorTree.value?.graph.nodes) { currentBehaviorTree.value?.graph.nodes.forEach(ele => { @@ -268,11 +268,11 @@ export default defineComponent({ }, 100); // 延迟一会儿,免得连线错位 } } - }, 100) + }, 100); }); }; - const handleCreateTree = ()=> { + const handleCreateTree = () => { currentBehaviorTree.value = { id: 0, name: '行为树', @@ -285,16 +285,16 @@ export default defineComponent({ nodes: [], }, updatedAt: null, - } + }; currentNodeGraph.value = { edges: [], nodes: [], - } + }; selectedModelNode.value = null; selectedNodeTaskElement.value = null; createElements(); - } + }; // 初始化X6画布 const initGraph = () => { @@ -362,7 +362,7 @@ export default defineComponent({ console.info('handleUpdateElement', element); // 更新本地引用 selectedNodeTaskElement.value = element; - changed.value = true + changed.value = true; }; const handleSave = () => { @@ -377,11 +377,11 @@ export default defineComponent({ graph: graphData, xmlContent: JSON.stringify(graphData), }; - if(! newTree.name){ + if (!newTree.name) { message.error('行为树名称不能为空.'); return; } - if(! newTree.englishName){ + if (!newTree.englishName) { message.error('行为树英文名称不能为空.'); return; } diff --git a/modeler/src/views/decision/nodes-card.vue b/modeler/src/views/decision/nodes-card.vue index 26c2566..332dfc3 100644 --- a/modeler/src/views/decision/nodes-card.vue +++ b/modeler/src/views/decision/nodes-card.vue @@ -7,7 +7,7 @@
- +
- + {{ nm.name }}
@@ -28,7 +28,7 @@
- +
- + {{ nm.name }}
@@ -49,7 +49,7 @@
- +
- + {{ nm.name }}
@@ -161,6 +161,6 @@ export default defineComponent({ handleDragEnd, }; }, -}) +}); \ No newline at end of file diff --git a/modeler/src/views/decision/properties.vue b/modeler/src/views/decision/properties.vue index 7798751..0789a4f 100644 --- a/modeler/src/views/decision/properties.vue +++ b/modeler/src/views/decision/properties.vue @@ -1,13 +1,13 @@
- - + + + +
- + @@ -55,7 +57,7 @@ import { deleteOneTreeById, findTreesByQuery } from './api'; import { substring } from '@/utils/strings'; export default defineComponent({ - emits: ['select-tree','create-tree'], + emits: ['select-tree', 'create-tree'], components: { CheckOutlined, PlusOutlined, @@ -69,7 +71,7 @@ export default defineComponent({ pageNum: 1, pageSize: 8, }); - const activeKey = ref(1) + const activeKey = ref(1); const totalTress = ref(0); const loadTress = () => { @@ -102,7 +104,7 @@ export default defineComponent({ const handleSelect = (record: BehaviorTree) => { emit('select-tree', record); - } + }; const customRow = (record: BehaviorTree) => { return { @@ -112,7 +114,7 @@ export default defineComponent({ }; }; - const refresh = ()=> loadTress(); + const refresh = () => loadTress(); onMounted(() => { loadTress(); @@ -133,7 +135,7 @@ export default defineComponent({ handleDelete, }; }, -}) +}); @@ -172,29 +174,33 @@ export default defineComponent({ position: relative; } - .ant-pagination{ + .ant-pagination { position: absolute; bottom: 10px; width: 100%; + .ant-pagination-disabled .ant-pagination-item-link, .ant-pagination-disabled:hover .ant-pagination-item-link, .ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link, &.ant-pagination-mini .ant-pagination-total-text, - &.ant-pagination-mini .ant-pagination-simple-pager{ + &.ant-pagination-mini .ant-pagination-simple-pager { color: rgb(255 255 255 / 95%); } + &.ant-pagination-simple .ant-pagination-simple-pager input { background-color: transparent; border: 1px solid #0f4a7c; - color:#eee; + color: #eee; } } } } -.create-tree-icon{ + +.create-tree-icon { cursor: pointer; } + .ant-list-item { padding: 3px 5px; cursor: pointer; diff --git a/modeler/src/views/decision/types/index.ts b/modeler/src/views/decision/types/index.ts index f49bae0..61decfa 100644 --- a/modeler/src/views/decision/types/index.ts +++ b/modeler/src/views/decision/types/index.ts @@ -7,5 +7,5 @@ * that was distributed with this source code. */ -export * from './tree' -export * from './template' +export * from './tree'; +export * from './template'; diff --git a/modeler/src/views/decision/utils/node.ts b/modeler/src/views/decision/utils/node.ts index 924f68b..c25b7a0 100644 --- a/modeler/src/views/decision/utils/node.ts +++ b/modeler/src/views/decision/utils/node.ts @@ -15,8 +15,8 @@ export const createGraphTaskElementFromTemplate = ( template: NodeTemplate, rect?: GraphTaskRect, ): GraphTaskElement => { - let realRect = { width: 200, height: 100, x: 0, y: 0, ...rect || {} } - console.info('rect',rect) + let realRect = { width: 200, height: 100, x: 0, y: 0, ...rect || {} }; + console.info('rect', rect); return { id: 0, key: generateKey(template.type),