Skip to content

Commit 3f08bda

Browse files
Linho1219Linho1219
committed
标线设置完全实现
1 parent f4f6d84 commit 3f08bda

File tree

10 files changed

+131
-54
lines changed

10 files changed

+131
-54
lines changed

‎src/editor/annotation.vue‎

Lines changed: 82 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,56 @@
11
<template>
2-
<div class="plot-data">
3-
<s-segmented-button v-model.lazy="props.annotation.axis">
4-
<s-segmented-button-item value="y">{{
5-
t("annotation.horizontal")
6-
}}</s-segmented-button-item>
7-
<s-segmented-button-item value="x">
8-
{{ t("annotation.vertical") }}
9-
</s-segmented-button-item>
10-
</s-segmented-button>
11-
12-
<s-tooltip>
13-
<s-icon-button
14-
slot="trigger"
15-
@click="deleteAnnotation"
16-
style="color: var(--s-color-error)"
17-
>
18-
<SIconDelete />
19-
</s-icon-button>
20-
{{ t("buttons.del") }}
21-
</s-tooltip>
22-
23-
<s-text-field
24-
class="styled"
25-
type="number"
26-
v-model="props.annotation.value"
27-
></s-text-field>
28-
<s-text-field
29-
:label="t('annotation.text')"
30-
v-model.lazy="props.annotation.text"
31-
></s-text-field>
2+
<div class="plot-data annotation">
3+
<div class="selectors">
4+
<s-segmented-button v-model.lazy="props.annotation.axis">
5+
<s-segmented-button-item value="y">{{
6+
t("annotation.horizontal")
7+
}}</s-segmented-button-item>
8+
<s-segmented-button-item value="x">
9+
{{ t("annotation.vertical") }}
10+
</s-segmented-button-item>
11+
</s-segmented-button>
12+
<div class="grow"></div>
13+
<div class="dataBlockBtns">
14+
<s-tooltip>
15+
<s-icon-button
16+
slot="trigger"
17+
@click="deleteAnnotation"
18+
style="color: var(--s-color-error)"
19+
>
20+
<SIconDelete />
21+
</s-icon-button>
22+
{{ t("buttons.del") }}
23+
</s-tooltip>
24+
<s-tooltip>
25+
<s-icon-button
26+
slot="trigger"
27+
:type="showText ? 'filled-tonal' : 'standard'"
28+
@click="showText = !showText"
29+
>
30+
<SIconTextfield />
31+
</s-icon-button>
32+
{{ t("annotation.text") }}
33+
</s-tooltip>
34+
<span class="annotation-drag drag-icon">
35+
<SIconDrag />
36+
</span>
37+
</div>
38+
</div>
39+
40+
<div class="annotation-texts" :class="{ showText }">
41+
<s-text-field
42+
class="styled annotation-value"
43+
type="number"
44+
v-model="props.annotation.value"
45+
:label="props.annotation.axis + '='"
46+
></s-text-field>
47+
<s-text-field
48+
v-if="showText"
49+
class="annotation-textfield"
50+
:label="t('annotation.text')"
51+
v-model.lazy="props.annotation.text"
52+
></s-text-field>
53+
</div>
3254
</div>
3355
</template>
3456

@@ -43,15 +65,43 @@ const props = defineProps<{
4365
}>();
4466
4567
import emitter from "@/mitt";
46-
import { watch } from "vue";
68+
import { ref, watch } from "vue";
4769
watch([() => props.annotation.axis, () => props.annotation.text], () =>
48-
emitter.emit("require-post-update", "anntaions axis change")
70+
emitter.emit("require-post-update", "annotations axis change")
4971
);
5072
5173
import SIconDelete from "@/ui/icons/delete.vue";
74+
import SIconDrag from "@/ui/icons/drag.vue";
75+
import SIconTextfield from "@/ui/icons/textfield.vue";
76+
5277
import { useProfile } from "@/states";
5378
const profile = useProfile();
5479
function deleteAnnotation() {
80+
emitter.emit("require-post-update", "annotations axis change");
5581
profile.annotations.splice(props.index, 1);
5682
}
83+
84+
const showText = ref(false);
5785
</script>
86+
87+
<style>
88+
.plot-data.annotation {
89+
display: flex;
90+
flex-direction: column;
91+
gap: 5px;
92+
}
93+
.annotation-value {
94+
font-size: 20px;
95+
}
96+
.annotation-textfield {
97+
font-size: 16px;
98+
}
99+
.annotation-texts {
100+
display: flex;
101+
gap: 10px;
102+
}
103+
.annotation-texts s-text-field {
104+
width: 0;
105+
flex-grow: 1;
106+
}
107+
</style>

‎src/editor/annotationList.vue‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
<template>
22
<s-scroll-view>
3-
<AnimatedList>
4-
<AnimatedListItem
5-
v-for="(item, index) in profile.annotations"
6-
:key="item.key"
7-
>
8-
<Annotation
9-
:index="index"
10-
:annotation="item"
11-
class="datumFolder"
3+
<VueDraggable
4+
v-model="profile.annotations"
5+
:animation="200"
6+
handle=".annotation-drag"
7+
@end="afterDragged"
8+
>
9+
<AnimatedList>
10+
<AnimatedListItem
11+
v-for="(item, index) in profile.annotations"
1212
:key="item.key"
13-
/>
14-
</AnimatedListItem>
15-
</AnimatedList>
13+
>
14+
<Annotation :index="index" :annotation="item" class="datumFolder" />
15+
</AnimatedListItem>
16+
</AnimatedList>
17+
</VueDraggable>
1618
<div class="plot-data add-data" @click="profile.addAnnotation">
1719
<s-icon name="add" />
1820
{{ t("buttons.add") }}
@@ -27,8 +29,13 @@ const { t } = useI18n();
2729
2830
import AnimatedList from "@/ui/animatedList/animatedList.vue";
2931
import AnimatedListItem from "@/ui/animatedList/animatedListItem.vue";
32+
import { VueDraggable } from "vue-draggable-plus";
3033
import Annotation from "./annotation.vue";
3134
3235
import { useProfile } from "@/states";
3336
const profile = useProfile();
37+
38+
import emitter from "@/mitt";
39+
const afterDragged = () =>
40+
emitter.emit("require-post-update", "annotations order change");
3441
</script>

‎src/editor/datum.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
</s-icon-button>
6363
{{ t(blockFolded ? "buttons.expand" : "buttons.collapse") }}
6464
</s-tooltip>
65-
<span class="datablock-drag">
65+
<span class="datablock-drag drag-icon">
6666
<SIconDrag />
6767
</span>
6868
</div>
@@ -245,7 +245,7 @@ watch(locale, () => selectKey.value++);
245245
.dataBlockBtns {
246246
display: flex;
247247
}
248-
.datablock-drag {
248+
.drag-icon {
249249
width: 40px;
250250
height: 40px;
251251
text-align: center;
@@ -255,7 +255,7 @@ watch(locale, () => selectKey.value++);
255255
justify-content: center;
256256
}
257257
258-
.sortable-chosen .datablock-drag {
258+
.sortable-chosen .drag-icon {
259259
background: var(--s-color-outline-variant);
260260
}
261261
.sortable-chosen {

‎src/editor/import.vue‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,5 @@ function handleImport() {
7575
width: 40vw;
7676
max-width: 500px;
7777
}
78-
.inner-tip {
79-
font-size: 18px;
80-
font-family: var(--font-mono);
81-
}
78+
8279
</style>

‎src/editor/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const currentTabIndex = computed(() => Number(currentTab.value));
3232
const transitionName = ref("");
3333
const tabs = [
3434
{ caption: "title.functions", component: DatumList },
35-
{ caption: "title.annotaions", component: AnnotaionList },
35+
{ caption: "title.annotations", component: AnnotaionList },
3636
{ caption: "title.graphOptions", component: GraphOptions },
3737
];
3838
watch(currentTabIndex, (newVal, oldVal) => {

‎src/graph/graph.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,4 +142,13 @@ s-page.dark #graphRender {
142142
padding: 0;
143143
font-size: 14px;
144144
}
145+
146+
.inner-tip {
147+
font-size: 18px;
148+
font-family: var(--font-mono);
149+
}
150+
.annotations,
151+
.fn-text {
152+
font-size: 20px;
153+
}
145154
</style>

‎src/graph/index.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ emitter.on("require-full-update", (str) => {
3939
console.log(`fullUpdateState: ${fullUpdateState.value}, ${str}`);
4040
});
4141
emitter.on("require-post-update", (str) => {
42+
fullUpdateState.value = false;
4243
graphKey.value++;
4344
if (import.meta.env.DEV)
4445
console.log(`postUpdateState: ${fullUpdateState.value}, ${str}`);

‎src/i18n.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export default {
8585
global: "全局",
8686
horizontalAxis: "横轴",
8787
verticalAxis: "纵轴",
88-
annotaions: "标线列表",
88+
annotations: "标线列表",
8989
},
9090
annotation: {
9191
horizontal: "水平",
@@ -160,7 +160,7 @@ export default {
160160
global: "Global",
161161
horizontalAxis: "Horizontal Axis",
162162
verticalAxis: "Vertical Axis",
163-
annotaions: "Annotation list",
163+
annotations: "Annotation list",
164164
},
165165
annotation: {
166166
horizontal: "Horizontal",

‎src/public.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@ input[type="number"] {
5959
}
6060
}
6161

62+
.grow {
63+
flex-grow: 1;
64+
}
65+
6266
s-page {
6367
--s-color-scrim: #000000;
6468
--s-color-primary: #00639a;

‎src/ui/icons/textfield.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<s-icon>
3+
<svg viewBox="0 -960 960 960">
4+
<path
5+
d="M280-160v-520H80v-120h520v120H400v520H280Zm360 0v-320H520v-120h360v120H760v320H640Z"
6+
></path>
7+
</svg>
8+
</s-icon>
9+
</template>

0 commit comments

Comments
 (0)