5 changed files with 287 additions and 0 deletions
@ -0,0 +1,146 @@ |
|||
<template> |
|||
<div ref="containerRef" style="width: 100%"></div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, onMounted } from 'vue'; |
|||
import { InternalEvent, Graph, Geometry, Cell } from '@maxgraph/core'; |
|||
import type { VertexParameterType } from './types/VertexParameterType'; |
|||
|
|||
const containerRef = ref(); |
|||
let graph: Graph | null = null; |
|||
let parent: Cell | null = null; |
|||
let entries: VertexParameterType[] = []; |
|||
const cellTitleMap = {}; |
|||
|
|||
class ComponentsGraph extends Graph { |
|||
getTooltipForCell(cell) { |
|||
return cellTitleMap[cell.id]; |
|||
} |
|||
} |
|||
|
|||
onMounted(() => { |
|||
InternalEvent.disableContextMenu(containerRef.value); |
|||
graph = new ComponentsGraph(containerRef.value); |
|||
graph.setPanning(true); |
|||
graph.setHtmlLabels(true); |
|||
graph.setTooltips(true); |
|||
parent = graph.getDefaultParent(); |
|||
addEntry({ |
|||
id: 'start', |
|||
title: '开始', |
|||
value: `<div class="w-full h-full align-middle text-center" style="width:47px">开始</div>`, |
|||
width: 50, |
|||
height: 50, |
|||
style: { shape: 'ellipse' }, |
|||
}); |
|||
addEntry({ |
|||
id: 'decide', |
|||
title: '条件判断', |
|||
value: `<div class="w-full h-full align-middle text-center" style="width:97px">条件判断</div>`, |
|||
width: 100, |
|||
height: 50, |
|||
style: { shape: 'rhombus' }, |
|||
}); |
|||
addEntry({ |
|||
id: 'commandSet', |
|||
title: '指令集', |
|||
value: `<div class="w-full h-full align-middle text-center" style="width:47px">指令集</div>`, |
|||
width: 50, |
|||
height: 50, |
|||
style: { shape: 'rectangle' }, |
|||
}); |
|||
addEntry({ |
|||
id: 'resource', |
|||
title: '资源', |
|||
value: `<div class="w-full h-full align-middle text-center" style="width:47px">资源</div>`, |
|||
width: 50, |
|||
height: 50, |
|||
style: { shape: 'rectangle' }, |
|||
}); |
|||
|
|||
addEntry({ |
|||
id: 'resource', |
|||
title: '指令资源', |
|||
value: `<div class="w-full h-full align-middle text-center" style="width:47px">指令资源</div>`, |
|||
width: 50, |
|||
height: 50, |
|||
style: { shape: 'rectangle' }, |
|||
}); |
|||
|
|||
addEntry({ |
|||
id: 'subModel', |
|||
title: '子模型', |
|||
value: `<div class="w-full h-full align-middle text-center" style="width:47px">子模型</div>`, |
|||
width: 50, |
|||
height: 50, |
|||
style: { shape: 'rectangle' }, |
|||
}); |
|||
|
|||
refresh(); |
|||
}); |
|||
|
|||
const addVertexWithDefaultStyle = (parameter: VertexParameterType): Cell | undefined => { |
|||
addVertex({ |
|||
id: parameter.id, |
|||
title: parameter.title, |
|||
value: parameter.value, |
|||
geometry: parameter.geometry, |
|||
style: { |
|||
//'rectangle' | 'ellipse' | 'doubleEllipse' | 'rhombus' | 'line' | 'image' | 'arrow' | 'arrowConnector' | 'label' | 'cylinder' | 'swimlane' | 'connector' | 'actor' | 'cloud' | 'triangle' | 'hexagon'; |
|||
shape: parameter.style?.shape, |
|||
verticalAlign: parameter.style?.verticalAlign || 'middle', |
|||
verticalLabelPosition: parameter.style?.verticalLabelPosition || 'middle', |
|||
align: parameter.style?.align || 'left', |
|||
fontSize: parameter.style?.fontSize || 12, |
|||
rounded: parameter.style?.rounded || true, |
|||
whiteSpace: parameter.style?.whiteSpace || 'wrap', |
|||
fillColor: parameter.style?.fillColor || '#F7F2E0', |
|||
strokeColor: parameter.style?.strokeColor || 'black', |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
const addVertex = (parameter: VertexParameterType): Cell | undefined => { |
|||
const vertex = graph?.insertVertex({ |
|||
id: parameter.id, |
|||
parent: parent, |
|||
position: [parameter.geometry?.x || 0, parameter.geometry?.y || 0], |
|||
size: [parameter.geometry?.width || 10, parameter.geometry?.height || 10], |
|||
style: parameter.style, |
|||
value: parameter.value, |
|||
}); |
|||
cellTitleMap[parameter.id] = parameter.title; |
|||
return vertex; |
|||
}; |
|||
|
|||
const addEntry = (entry: VertexParameterType) => { |
|||
entry.geometry = new Geometry(0, 0, entry.width, entry.height); |
|||
entries.push(entry); |
|||
}; |
|||
|
|||
const refresh = () => { |
|||
let availableWidth = containerRef.value.clientWidth; |
|||
let currentWidth = 0; |
|||
for (const entry of entries) { |
|||
if (currentWidth + entry.width > availableWidth) { |
|||
entry.geometry.x = 0; |
|||
} else { |
|||
entry.geometry.x = currentWidth; |
|||
} |
|||
currentWidth += entry.width; |
|||
} |
|||
|
|||
graph.batchUpdate(() => { |
|||
for (const entry of entries) { |
|||
entry.geometry = new Geometry(70, 80, entry.width, entry.height); |
|||
} |
|||
for (const entry of entries) { |
|||
addVertexWithDefaultStyle(entry); |
|||
} |
|||
}); |
|||
}; |
|||
|
|||
defineExpose({ |
|||
addEntry, |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,53 @@ |
|||
<template> |
|||
<div ref="containerRef"></div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref, onMounted } from 'vue'; |
|||
import { type CellStyle, Graph, InternalEvent } from '@maxgraph/core'; |
|||
|
|||
const containerRef = ref(); |
|||
|
|||
onMounted(() => { |
|||
//const container = <HTMLElement>document.getElementById('graph-container'); |
|||
// Disables the built-in context menu |
|||
InternalEvent.disableContextMenu(containerRef.value); |
|||
|
|||
const graph = new Graph(containerRef.value); |
|||
graph.setPanning(true); // Use mouse right button for panning |
|||
// Gets the default parent for inserting new cells. This |
|||
// is normally the first child of the root (ie. layer 0). |
|||
const parent = graph.getDefaultParent(); |
|||
|
|||
// Adds cells to the model in a single step |
|||
graph.batchUpdate(() => { |
|||
const vertex01 = graph.insertVertex({ |
|||
parent, |
|||
position: [10, 10], |
|||
size: [100, 100], |
|||
value: 'rectangle', |
|||
}); |
|||
const vertex02 = graph.insertVertex({ |
|||
parent, |
|||
position: [350, 90], |
|||
size: [50, 50], |
|||
style: { |
|||
fillColor: 'orange', |
|||
shape: 'ellipse', |
|||
verticalAlign: 'top', |
|||
verticalLabelPosition: 'bottom', |
|||
}, |
|||
value: 'ellipse', |
|||
}); |
|||
graph.insertEdge({ |
|||
parent, |
|||
source: vertex01, |
|||
target: vertex02, |
|||
value: 'edge', |
|||
style: { |
|||
edgeStyle: 'orthogonalEdgeStyle', |
|||
rounded: true, |
|||
}, |
|||
}); |
|||
}); |
|||
}); |
|||
</script> |
|||
@ -0,0 +1,22 @@ |
|||
<template> |
|||
<div style="height: 100%" class="px-1"> |
|||
<q-tabs model-value="currentSelectedTabRef" align="left" dense inline-label shrink outside-arrows mobile-arrows :breakpoint="0" no-caps> |
|||
<q-tab name="setting" label="设置" /> |
|||
<q-tab name="style" label="样式" /> |
|||
<q-tab name="text" label="文本" /> |
|||
<q-tab name="arrange" label="排列" /> |
|||
</q-tabs> |
|||
|
|||
<q-tab-panels v-model="currentSelectedTabRef" animated swipeable keep-alive style="height: calc(100% - 48px)"> |
|||
<q-tab-panel name="setting" class="px-0 pb-0" style="height: 100%"> </q-tab-panel> |
|||
<q-tab-panel name="style" class="px-0 pb-0" style="height: 100%"> </q-tab-panel> |
|||
<q-tab-panel name="text" class="px-0 pb-0" style="height: 100%"> </q-tab-panel> |
|||
<q-tab-panel name="arrange" class="px-0 pb-0" style="height: 100%"> </q-tab-panel> |
|||
</q-tab-panels> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { ref } from 'vue'; |
|||
|
|||
const currentSelectedTabRef = ref('style'); |
|||
</script> |
|||
@ -0,0 +1,19 @@ |
|||
<template> |
|||
<q-list class="rounded-borders"> |
|||
<q-expansion-item label="可用组件" default-opened switch-toggle-side header-style="padding-left:8px;padding-right:8px; " expand-icon-class="px-0"> |
|||
<Components></Components> |
|||
</q-expansion-item> |
|||
<q-expansion-item label="Account settings" switch-toggle-side header-style="padding-left:8px;padding-right:8px; " expand-icon-class="px-0"> |
|||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti commodi magni quaerat ex numquam, dolorum officiis modi |
|||
facere maiores architecto suscipit iste eveniet doloribus ullam aliquid. |
|||
</q-expansion-item> |
|||
</q-list> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import Components from './Components.vue'; |
|||
</script> |
|||
<style> |
|||
.q-item__section--avatar { |
|||
min-width: 36px !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,47 @@ |
|||
<template> |
|||
<q-toolbar class="w-full border-b rounded-sm gap-x-1"> |
|||
<q-btn outline icon="bi-floppy" /> |
|||
<q-separator vertical /> |
|||
<q-btn-dropdown label="100%" outline> |
|||
<q-list> |
|||
<q-item v-close-popup clickable> |
|||
<q-item-section> |
|||
<q-item-label>Reset View</q-item-label> |
|||
</q-item-section> |
|||
</q-item> |
|||
|
|||
<q-separator vertical /> |
|||
|
|||
<q-item v-close-popup clickable> |
|||
<q-item-section> |
|||
<q-item-label>25%</q-item-label> |
|||
</q-item-section> |
|||
</q-item> |
|||
|
|||
<q-item v-close-popup clickable> |
|||
<q-item-section> |
|||
<q-item-label>50%</q-item-label> |
|||
</q-item-section> |
|||
</q-item> |
|||
</q-list> |
|||
</q-btn-dropdown> |
|||
<q-separator vertical /> |
|||
<q-btn outline icon="bi-zoom-in" /> |
|||
<q-btn outline icon="bi-zoom-out" /> |
|||
<q-separator vertical /> |
|||
<q-btn outline icon="undo" /> |
|||
<q-btn outline icon="redo" /> |
|||
<q-separator vertical /> |
|||
<q-btn outline icon="bi-trash" /> |
|||
<q-separator vertical /> |
|||
<q-btn outline icon="bi-layers" /> |
|||
<q-btn outline icon="bi-layers-half" /> |
|||
<q-separator vertical /> |
|||
<q-btn outline icon="bi-paint-bucket" /> |
|||
<q-separator vertical /> |
|||
<q-btn outline icon="bi-palette" /> |
|||
<q-separator vertical /> |
|||
<q-btn outline icon="bi-bezier2" /> |
|||
</q-toolbar> |
|||
</template> |
|||
<script setup lang="ts"></script> |
|||
Loading…
Reference in new issue