jinyoung
commented
4 years ago Hexagonal 도형 컴포넌트 예시
<template>
<g v-bind:transform="transform" fill="none" stroke="#000">
<path fill="#92d050" d="m56.472443 112.9422l-56.472416 -33.210083l0 -46.493217l56.472416 -33.210087l56.472412 33.210087l0 46.493217z" fill-rule="evenodd"/><path stroke="#42719b" stroke-width="1.3333333333333333" stroke-miterlimit="800.0" stroke-linecap="butt" d="m56.472443 112.9422l-56.472416 -33.210083l0 -46.493217l56.472416 -33.210087l56.472412 33.210087l0 46.493217z" fill-rule="evenodd"/><path fill="#ffff00" d="m56.462296 93.679276l-34.80313 -20.472603l0 -33.47999l34.80313 -20.472603l34.80313 20.472603l0 33.47999z" fill-rule="evenodd"/><path stroke="#42719b" stroke-width="1.3333333333333333" stroke-miterlimit="800.0" stroke-linecap="butt" d="m56.462296 93.679276l-34.80313 -20.472603l0 -33.47999l34.80313 -20.472603l34.80313 20.472603l0 33.47999z" fill-rule="evenodd"/>
<text x="55" y="54" text-anchor="middle" font="10px 'serif'" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 12px; line-height: normal; font-family: serif; cursor: move; background-color: rgb(255, 255, 255);" fill-r="1" fill-cx="0.1" fill-cy="0.1" fill-opacity="1" stroke-width="1.2" r="10" font-size="12px" id="Task_1_LABELFO">
<tspan dy="3.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
{{ value.name.text }}
</tspan>
</text>
<g v-if="value.inboundPorts" v-bind:transform="inboundPortTransform(index)" v-for="(port, index) in value.inboundPorts">
<rect x="0" y="0" width="50" height="15" fill="#fafafa"/>
<text x="25" y="5" text-anchor="middle" font="10px 'serif'" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 7px; line-height: normal; font-family: serif; cursor: move; background-color: rgb(255, 255, 255);" fill-r="1" fill-cx="0.1" fill-cy="0.1" fill-opacity="1" stroke-width="1.2" r="10" font-size="12px">
<tspan dy="3.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
{{ port.name }}
</tspan>
</text>
</g>
<g v-if="value.outboundPorts" v-bind:transform="outboundPortTransform(index)" v-for="(port, index) in value.outboundPorts">
<rect x="0" y="0" width="50" height="15" fill="#fafafa"/>
<text x="25" y="5" text-anchor="middle" font="10px 'serif'" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 7px; line-height: normal; font-family: serif; cursor: move; background-color: rgb(255, 255, 255);" fill-r="1" fill-cx="0.1" fill-cy="0.1" fill-opacity="1" stroke-width="1.2" r="10" font-size="12px">
<tspan dy="3.75" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
{{ port.name }}
</tspan>
</text>
</g>
</g>
</template>
<script>
export default{
name: 'Microservice',
props: {
value: Object
},
watch: {
activity:{
handler: function move(){
},
deep: true
}
},
created: function(){
},
computed: {
transform: function(){
var x = this.value.elementView.x;
var y = this.value.elementView.y;
return "translate("+x+","+y+") rotate(0)";
},
x: function(){
return this.value.elementView.x;
},
y: function(){
return this.value.elementView.y;
}
},
methods: {
inboundPortTransform: function(index){
//return "translate(-20, " + (index * 20) + ")";
return "translate(-20, " + ((index+1) * 70 / (this.value.inboundPorts.length+1)) + ")";
},
outboundPortTransform: function(index){
return "translate(100, " + (20+ ((index+1) * 70 / (this.value.outboundPorts.length+1))) + ")";
}
}
}
</script>
용례)
<template>
<svg height="1448" version="1.1" width="1704" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative; background-color: rgb(247, 247, 247); user-select: none; background-image: url("/static/image/grid.gif");" id="OG_5264" >
<microservice v-for="(child, index) in childs[1]" v-model="childs[1][index]" />
</svg>
</template>
....
childs:[
{
name: {text: "Order"},
elementView: {x:100, y:100},
_type: "org.uengine.msa.BoundedContext",
inboundPorts: [
{_type: "org.uengine.msa.ports.Command", name: "Place an order"},
{_type: "org.uengine.msa.ports.Command", name: "Cancel an order"},
],
outboundPorts: [
{_type: "org.uengine.msa.ports.Event", name: "OrderPlaced"},
{_type: "org.uengine.msa.ports.Event", name: "OrderChanged"},
{_type: "org.uengine.msa.ports.Event", name: "OrderCancelled"},
]
},
]
4) 작업방법
- 출력하고자 하는 포맷이 단순 이미지 인 경우는 해당 예상 이미지의 SVG 를 먼저 생성한다. 예) https://docs.google.com/presentation/d/1mrYBKbFFjuW2OeBNrk_eNR239qw3pg13jHXedAGlAAw/edit?usp=sharing
- 이 때 파워포인트로 된 템플릿을 사다가 Google slides에 업로드한후 SVG 내용을 쉽게 얻어낼 수 있다.
- 얻어낸 SVG 에서 위치이동이나 변경이 필요한 부분만 vue.js 의 calculate 나 function 을 사용하여 대치시킨다.
다음과 같은 결과를 얻을 수 있다:
정교한 Meta Model 설계를 통한 다양한 표준 노테이션 출력 기능 EventStorming Mode에서만 편집 Only UML Diagram, Hexagonal Architecture, BPMN Notation convert 지원