Skip to content

Commit

Permalink
Add arrows for just one side
Browse files Browse the repository at this point in the history
  • Loading branch information
pb10005 committed Sep 1, 2019
1 parent 237d431 commit 4baf1d7
Show file tree
Hide file tree
Showing 6 changed files with 138 additions and 48 deletions.
48 changes: 31 additions & 17 deletions src/Diagram.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,20 @@
:height="height * scale"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<marker
id="m_atr"
markerUnits="userSpaceOnUse"
orient="auto"
markerWidth="15"
markerHeight="15"
viewBox="0 0 10 10"
refX="5"
refY="5"
>
<polygon points="0,0 0,10 10,5 " fill="black" />
</marker>
</defs>
<g :transform="scaleStr">
<rect
x="0"
Expand All @@ -15,23 +29,6 @@
:fill="background"
@click="reset"
/>
<Link
:width="width"
:height="height"
:link="item"
v-for="item in linkList"
:selected="item.id === selectedLink"
:key="item.id"
:source="findNode(item.source)"
:destination="findNode(item.destination)"
:editable="editable"
:labels="labels"
:scale="scale"
@editLink="editLink"
@select="selectLink"
@updateLocation="updateLinkLocation"
@remove="removeLink"
/>
<Node
:width="width"
:height="height"
Expand All @@ -50,6 +47,23 @@
@commitDest="commitDest"
@remove="removeNode"
/>
<Link
:width="width"
:height="height"
:link="item"
v-for="item in linkList"
:selected="item.id === selectedLink"
:key="item.id"
:source="findNode(item.source)"
:destination="findNode(item.destination)"
:editable="editable"
:labels="labels"
:scale="scale"
@editLink="editLink"
@select="selectLink"
@updateLocation="updateLinkLocation"
@remove="removeLink"
/>
</g>
</svg>
</div>
Expand Down
5 changes: 4 additions & 1 deletion src/DiagramEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,8 @@ export default {
id: "",
content: {
color: "",
pattern: "solid"
pattern: "solid",
hasArrow: false
}
}
};
Expand Down Expand Up @@ -194,12 +195,14 @@ export default {
this.tmpLink.id = item.id;
this.tmpLink.content.color = item.content.color;
this.tmpLink.content.pattern = item.content.pattern;
this.tmpLink.content.hasArrow = item.content.hasArrow;
this.isEditLinkModalActive = true;
},
editLink(item) {
let tmp = this.graphData.links.find(x => x.id === item.id);
tmp.color = item.content.color;
tmp.pattern = item.content.pattern;
tmp.hasArrow = item.content.hasArrow;
this.isEditLinkModalActive = false;
},
endEdit() {
Expand Down
6 changes: 4 additions & 2 deletions src/demo/data.json
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,8 @@
"source": "167efaa2c59c27a1",
"destination": "167efa699c7863ac",
"point": { "x": 1156.5, "y": 172.62461249002126 },
"color": "#55efc4"
"color": "#55efc4",
"hasArrow": true
},
{
"id": "167efabd659483de",
Expand Down Expand Up @@ -212,7 +213,8 @@
"source": "1680e259f7a6775b",
"destination": "167efabc40ee0852",
"point": { "x": 500.5, "y": 109.49883251758314 },
"color": "#74b9ff"
"color": "#74b9ff",
"hasArrow": true
}
]
}
12 changes: 8 additions & 4 deletions src/lib/EditLinkModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
<option value="dash">Dash</option>
<option value="dot">Dot</option> </VSelect
><br />
<input v-model="content.hasArrow" type="checkbox" id="has-arrow" />
<label for="has-arrow">Has arrow</label><br />
<VButton @click="ok">OK</VButton>
<VButton class="danger" @click="cancel">Cancel</VButton>
</div>
Expand All @@ -25,7 +27,8 @@ export default {
id: "0",
content: {
color: "#ecf0f1",
pattern: "solid"
pattern: "solid",
hasArrow: false
}
};
}
Expand All @@ -34,7 +37,8 @@ export default {
data() {
return {
content: this.link.content,
pattern: this.link.pattern || "solid"
pattern: this.link.pattern || "solid",
hasArrow: this.link.hasArrow
};
},
methods: {
Expand All @@ -43,7 +47,8 @@ export default {
id: this.link.id,
content: {
color: this.content.color,
pattern: this.content.pattern
pattern: this.content.pattern,
hasArrow: this.content.hasArrow
}
});
},
Expand All @@ -55,7 +60,6 @@ export default {
</script>
<style lang="scss" scoped>
input {
width: 95%;
margin-bottom: 5px;
}
.item-enter-active {
Expand Down
111 changes: 89 additions & 22 deletions src/lib/Link.vue
Original file line number Diff line number Diff line change
@@ -1,68 +1,68 @@
<template>
<svg>
<g>
<path
v-if="!link.pattern"
:d="
`M${source.point.x + source.width / 2} ${source.point.y +
source.height / 2} Q ${point.x} ${point.y} ${destination.point.x +
destination.width / 2} ${destination.point.y +
destination.height / 2}`
`M${calcSource().x} ${calcSource().y}
Q ${point.x} ${point.y}
${calcDestination().x} ${calcDestination().y}`
"
:stroke="link.color || '#ffeaa7'"
stroke-width="3"
fill="none"
:marker-end="link.hasArrow ? 'url(#m_atr)' : ''"
/>
<path
v-if="link.pattern === 'solid'"
:d="
`M${source.point.x + source.width / 2} ${source.point.y +
source.height / 2} Q ${point.x} ${point.y} ${destination.point.x +
destination.width / 2} ${destination.point.y +
destination.height / 2}`
`M${calcSource().x} ${calcSource().y}
Q ${point.x} ${point.y}
${calcDestination().x} ${calcDestination().y}`
"
:stroke="link.color || '#ffeaa7'"
stroke-width="3"
fill="none"
:marker-end="link.hasArrow ? 'url(#m_atr)' : ''"
/>
<path
v-if="link.pattern === 'dash'"
:d="
`M${source.point.x + source.width / 2} ${source.point.y +
source.height / 2} Q ${point.x} ${point.y} ${destination.point.x +
destination.width / 2} ${destination.point.y +
destination.height / 2}`
`M${calcSource().x} ${calcSource().y}
Q ${point.x} ${point.y}
${calcDestination().x} ${calcDestination().y}`
"
:stroke="link.color || '#ffeaa7'"
stroke-width="3"
stroke-dasharray="10"
fill="none"
:marker-end="link.hasArrow ? 'url(#m_atr)' : ''"
/>
<path
v-if="link.pattern === 'dot'"
:d="
`M${source.point.x + source.width / 2} ${source.point.y +
source.height / 2} Q ${point.x} ${point.y} ${destination.point.x +
destination.width / 2} ${destination.point.y +
destination.height / 2}`
`M${calcSource().x} ${calcSource().y}
Q ${point.x} ${point.y}
${calcDestination().x} ${calcDestination().y}`
"
:stroke="link.color || '#ffeaa7'"
stroke-width="3"
fill="none"
stroke-dasharray="2"
:marker-end="link.hasArrow ? 'url(#m_atr)' : ''"
/>
<g v-if="editable">
<line
:x1="source.point.x + source.width / 2"
:y1="source.point.y + source.height / 2"
:x1="calcSource().x"
:y1="calcSource().y"
:x2="point.x"
:y2="point.y"
stroke="lightgray"
/>
<line
:x1="point.x"
:y1="point.y"
:x2="destination.point.x + destination.width / 2"
:y2="destination.point.y + destination.height / 2"
:x2="calcDestination().x"
:y2="calcDestination().y"
stroke="lightgray"
/>
<ellipse
Expand Down Expand Up @@ -105,7 +105,7 @@
{{ labels.remove || "Remove" }}
</text>
</g>
</svg>
</g>
</template>
<script>
import mouseLocation from "../mouseLocation";
Expand Down Expand Up @@ -139,6 +139,7 @@ export default {
labels: Object,
scale: String
},
computed: {},
data() {
return {
startPosition: null,
Expand Down Expand Up @@ -194,6 +195,72 @@ export default {
color: this.link.color
}
});
},
calcSource() {
let dx = this.point.x - this.source.point.x - this.source.width / 2;
let dy = this.point.y - this.source.point.y - this.source.height / 2;
if (dx === 0) {
dx = 0.01;
}
if (Math.abs(dy / dx) <= 1) {
if (dx >= 0) {
return {
x: this.source.point.x + this.source.width,
y: this.source.point.y + this.source.height / 2
};
} else {
return {
x: this.source.point.x,
y: this.source.point.y + this.source.height / 2
};
}
} else {
if (dy >= 0) {
return {
x: this.source.point.x + this.source.width / 2,
y: this.source.point.y + this.source.height
};
} else {
return {
x: this.source.point.x + this.source.width / 2,
y: this.source.point.y
};
}
}
},
calcDestination() {
let dx =
this.point.x - this.destination.point.x - this.destination.width / 2;
let dy =
this.point.y - this.destination.point.y - this.destination.height / 2;
if (dx === 0) {
dx = 0.01;
}
if (Math.abs(dy / dx) <= 1) {
if (dx >= 0) {
return {
x: this.destination.point.x + this.destination.width,
y: this.destination.point.y + this.destination.height / 2
};
} else {
return {
x: this.destination.point.x,
y: this.destination.point.y + this.destination.height / 2
};
}
} else {
if (dy >= 0) {
return {
x: this.destination.point.x + this.destination.width / 2,
y: this.destination.point.y + this.destination.height
};
} else {
return {
x: this.destination.point.x + this.destination.width / 2,
y: this.destination.point.y
};
}
}
}
}
};
Expand Down
4 changes: 2 additions & 2 deletions src/lib/Node.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<svg>
<g>
<g v-if="selected">
<text
:x="x + 5"
Expand Down Expand Up @@ -91,7 +91,7 @@
</text>
</a>
</svg>
</svg>
</g>
</template>
<script>
import mouseLocation from "../mouseLocation";
Expand Down

0 comments on commit 4baf1d7

Please sign in to comment.