From 92e400f26524efeb9d644eb3bca8b521c51814a5 Mon Sep 17 00:00:00 2001
From: koehr <n@koehr.in>
Date: Tue, 4 Jan 2022 16:25:18 +0100
Subject: [PATCH] select objects via system diagram
---
src/App.vue | 5 ++++-
src/app.css | 5 +++--
src/components/SystemDiagram.vue | 24 ++++++++++++++++++++++--
3 files changed, 29 insertions(+), 5 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index e833e94..cacdae4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,7 +4,7 @@
@select:font="setFont($event)"
@select:theme="setTheme($event)"
/>
- <SystemDiagram v-bind="{ star, objects }" />
+ <SystemDiagram v-bind="{ star, objects, selectedObject }" @select="selectObject" />
<section id="settings">
<ObjectSettings v-if="selectedObject"
@@ -62,6 +62,9 @@ function editObject (object) {
}
selectedObject.value = object
}
+function selectObject (object) {
+ selectedObject.value = object
+}
function deleteObject (object) {
if (deletedObject.value) {
diff --git a/src/app.css b/src/app.css
index 40cc61b..0f644e9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -128,8 +128,9 @@ text.tilted { transform: rotate(-45deg) translate(0, 100%); transform-origin: le
.object > line { stroke-width: .5; }
.satellite { text-anchor: start; font-size: .7em; }
.rings { stroke: var(--fg-graphic); fill: none; transform: skew(-45deg); transform-origin: 50%; }
-.object:hover { fill: var(--hl-graphic); }
-.object:hover > line, .object:hover .rings { stroke: var(--hl-graphic); }
+.object:hover, .object.selected { fill: var(--hl-graphic); }
+.object:hover > line, .object:hover .rings,
+.object.selected > line, .object.selected .rings { stroke: var(--hl-graphic); }
h1 {
font-family: xolonium;
diff --git a/src/components/SystemDiagram.vue b/src/components/SystemDiagram.vue
index 64d527c..49aa4ed 100644
--- a/src/components/SystemDiagram.vue
+++ b/src/components/SystemDiagram.vue
@@ -3,7 +3,13 @@
<line id="axis" x1="0" y1="150" x2="1000" y2="150" />
<circle id="star" :r="star.radius" :cx="starCX" cy="150" />
- <g class="object" :id="o.name" v-for="o in objects">
+ <g v-for="o in objects"
+ class="object"
+ :class="{ selected: o === selectedObject }"
+ :id="o.name"
+ @mousedown.left="startDragging(o)"
+ @mouseup.left="stopDragging"
+ >
<g class="rings" v-for="i in o.rings">
<circle :r="o.radius - 5 + 2*i" :cx="o.distance" cy="150" />
</g>
@@ -25,16 +31,30 @@
</template>
<script setup>
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
import steepCurve from '../steep-curve'
const props = defineProps({
star: Object,
objects: Array,
+ selectedObject: Object,
})
+const emit = defineEmits([ 'select' ])
+
const starCX = computed(() => {
const r = props.star.radius
return -1 * r * steepCurve(r, 50, 0.955)
})
+
+const draggedObject = ref(null)
+
+function startDragging (object) {
+ emit('select', object)
+ draggedObject.value = object
+}
+function stopDragging () {
+ draggedObject.value = null
+}
+
</script>