Skip to content

Commit 2976fc7

Browse files
Linho1219Linho1219
committed
图像类型切换处理
1 parent e46e9aa commit 2976fc7

9 files changed

Lines changed: 148 additions & 207 deletions

File tree

‎src/editor/data.vue‎

Lines changed: 23 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
<!--
2-
ToDo: Refactor data editor to sigle component per fnType, instead of generating elements from consts
3-
The UI is so deeply coupled with the data structure that it makes nosense to make a component for 'general' data
4-
-->
51
<template>
62
<div class="plot-data" :class="{ hidden: props.self.hidden }">
73
<div class="selectors">
@@ -68,57 +64,13 @@ ToDo: Refactor data editor to sigle component per fnType, instead of generating
6864
</div>
6965
</div>
7066

71-
<!-- <div class="inputs">
72-
<StrInputs :dataItem="dataItem" :fnType="fnType" />
73-
<CoordInputs
74-
v-if="fnType.coord"
75-
:dataItem="dataItem"
76-
:fnType="fnType"
77-
:folded="false"
78-
/>
79-
<CoordArrInputs
80-
v-if="fnType.coordArr"
81-
:dataItem="dataItem"
82-
:fnType="fnType"
83-
/>
84-
<SwitchInputs
85-
v-if="fnType.switches"
86-
:dataItem="dataItem"
87-
:fnType="fnType"
88-
:folded="false"
89-
/>
90-
</div>
91-
<s-fold :folded="folded">
92-
<div class="inputs optional">
93-
<s-divider>{{ t("title.moreOptions") }}</s-divider>
94-
<CoordInputs
95-
v-if="fnType.coord"
96-
:dataItem="dataItem"
97-
:fnType="fnType"
98-
:folded="true"
99-
/>
100-
<OptInputs
101-
v-if="fnType.optInput"
102-
:dataItem="dataItem"
103-
:fnType="fnType"
104-
/>
105-
<SwitchInputs
106-
v-if="fnType.switches"
107-
:dataItem="dataItem"
108-
:fnType="fnType"
109-
:folded="true"
110-
/>
111-
</div>
112-
</s-fold> -->
11367
<div class="relative">
114-
<Transition name="input-component">
115-
<component
116-
:is="components[fnType]"
117-
:self="props.self"
118-
:index="props.index"
119-
:folded="folded"
120-
/>
121-
</Transition>
68+
<component
69+
:is="components[props.self.fnType]"
70+
:self="<PrivateDataTypes.Full>props.self"
71+
:index="props.index"
72+
:folded="folded"
73+
/>
12274
</div>
12375
</div>
12476
</template>
@@ -127,13 +79,7 @@ import { useI18n } from "vue-i18n";
12779
const { t, locale } = useI18n();
12880
12981
import { fnTypeArr, getAllowedGraphType } from "../consts";
130-
import { ref, computed } from "vue";
131-
132-
// import StrInputs from "./legacyInputs/strInputs.vue";
133-
// import CoordInputs from "./legacyInputs/coordInputs.vue";
134-
// import SwitchInputs from "./legacyInputs/switchInputs.vue";
135-
// import CoordArrInputs from "./legacyInputs/coordArrInputs.vue";
136-
// import OptInputs from "./legacyInputs/optInputs.vue";
82+
import { ref, computed, toRef } from "vue";
13783
13884
import linear from "./inputs/linear.vue";
13985
import implicit from "./inputs/implicit.vue";
@@ -151,7 +97,7 @@ const components = {
15197
points,
15298
vector,
15399
text,
154-
};
100+
} as const;
155101
156102
import SIconDelete from "@/ui/icons/delete.vue";
157103
import SIconHide from "@/ui/icons/hide.vue";
@@ -178,27 +124,28 @@ function deleteDatum() {
178124
});
179125
}
180126
181-
// function fnTypeChange(dataItem: InternalDatum) {
182-
// console.log(dataItem);
183-
// inputTypeArr.forEach((key) => delete dataItem[key]);
184-
// if (dataItem.fnType === "text") {
185-
// dataItem.graphType = "text";
186-
// } else {
187-
// if (dataItem.fnType === "implicit") dataItem.graphType = "interval";
188-
// dataItem.graphType = getAllowedGraphType(dataItem.fnType)[0].value;
189-
// if (dataItem.fnType === "vector") dataItem.vector = [0, 0];
190-
// if (dataItem.fnType === "points") dataItem.points = [];
191-
// }
192-
// }
193-
194127
const allowedGraphType = computed(() => getAllowedGraphType(props.self.fnType));
195128
196129
import { watch } from "vue";
197-
import { PrivateData } from "@/types/data";
130+
import { PrivateData, PrivateDataTypes, toPrivateData } from "@/types/data";
198131
const selectKey = ref(0);
199132
watch(locale, () => selectKey.value++);
200133
134+
const self = toRef(profile.datum, props.index);
135+
201136
const fnType = ref(props.self.fnType);
137+
watch(fnType, (newFnType) => {
138+
const newGraphType = (<readonly string[]>(
139+
PrivateDataTypes.allowedGraphTypes[newFnType]
140+
)).includes(props.self.graphType)
141+
? props.self.graphType
142+
: PrivateDataTypes.allowedGraphTypes[newFnType][0];
143+
self.value = toPrivateData({
144+
key: self.value.key,
145+
fnType: newFnType,
146+
graphType: newGraphType,
147+
});
148+
});
202149
</script>
203150

204151
<style>
@@ -263,24 +210,3 @@ const fnType = ref(props.self.fnType);
263210
z-index: 999;
264211
}
265212
</style>
266-
267-
<style lang="scss">
268-
.input-component {
269-
&-enter-from,
270-
&-leave-to {
271-
opacity: 0;
272-
}
273-
&-enter-active {
274-
transition: opacity 0.3s 0.05s;
275-
}
276-
&-leave-active {
277-
transition: opacity 0.15s;
278-
}
279-
&-leave-active {
280-
position: absolute;
281-
left: 0;
282-
top: 0;
283-
right: 0;
284-
}
285-
}
286-
</style>

‎src/editor/inputs/implicit.vue‎

Lines changed: 8 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,20 @@
11
<template>
2-
<s-empty>Implicit</s-empty>
2+
<span class="input-title styled">0=</span>
3+
<s-text-field class="styled" ref="inputBox" label="f(x,y)" v-model="self.fn">
4+
</s-text-field>
5+
<s-divider>{{ t("title.moreOptions") }}</s-divider>
36
</template>
47

58
<script setup lang="ts">
6-
import { PrivateData, PrivateDataTypes } from "@/types/data";
7-
import { onMounted, Ref, toRef } from "vue";
9+
import { PrivateDataTypes } from "@/types/data";
10+
import { toRef } from "vue";
811
import { useI18n } from "vue-i18n";
912
const { t } = useI18n();
1013
1114
const props = defineProps<{
1215
folded: boolean;
13-
self: PrivateData;
16+
self: PrivateDataTypes.Implicit;
1417
index: number;
1518
}>();
16-
const self = toRef(props, "self") as Ref<PrivateDataTypes.Implicit>;
17-
onMounted(() => {
18-
const original = self.value as PrivateData;
19-
if (original.fnType !== "implicit") {
20-
const isAllowedGraphType = (
21-
value: string
22-
): value is PrivateDataTypes.Implicit["graphType"] =>
23-
["interval"].includes(value);
24-
const graphType = isAllowedGraphType(original.graphType)
25-
? original.graphType
26-
: "interval";
27-
self.value = {
28-
skipTip: false,
29-
nSamples: undefined,
30-
closed: false,
31-
...original,
32-
fnType: "implicit",
33-
fn: "",
34-
graphType,
35-
};
36-
}
37-
});
19+
const self = toRef(props, "self");
3820
</script>

‎src/editor/inputs/linear.vue‎

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,36 +15,15 @@
1515
</template>
1616

1717
<script setup lang="ts">
18-
import { PrivateData, PrivateDataTypes } from "@/types/data";
19-
import { onMounted, Ref, toRef } from "vue";
18+
import { PrivateDataTypes } from "@/types/data";
19+
import { toRef } from "vue";
2020
import { useI18n } from "vue-i18n";
2121
const { t } = useI18n();
2222
2323
const props = defineProps<{
2424
folded: boolean;
25-
self: PrivateData;
25+
self: PrivateDataTypes.Linear;
2626
index: number;
2727
}>();
28-
const self = toRef(props, "self") as Ref<PrivateDataTypes.Linear>;
29-
onMounted(() => {
30-
const original = self.value as PrivateData;
31-
if (original.fnType !== "linear") {
32-
const isAllowedGraphType = (
33-
value: string
34-
): value is PrivateDataTypes.Linear["graphType"] =>
35-
["interval", "polyline", "scatter"].includes(value);
36-
const graphType = isAllowedGraphType(original.graphType)
37-
? original.graphType
38-
: "polyline";
39-
self.value = {
40-
skipTip: false,
41-
nSamples: undefined,
42-
closed: false,
43-
...original,
44-
fnType: "linear",
45-
fn: "",
46-
graphType,
47-
};
48-
}
49-
});
28+
const self = toRef(props, "self");
5029
</script>

‎src/editor/inputs/parametric.vue‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,23 @@
11
<template>
2-
<s-empty>parametric</s-empty>
2+
<span class="input-title styled">x=</span>
3+
<s-text-field class="styled" ref="inputBox" label="f(x,y)" v-model="self.x">
4+
</s-text-field>
5+
<span class="input-title styled">y=</span>
6+
<s-text-field class="styled" ref="inputBox" label="f(x,y)" v-model="self.y">
7+
</s-text-field>
8+
<s-divider>{{ t("title.moreOptions") }}</s-divider>
39
</template>
410

511
<script setup lang="ts">
6-
import { InternalDatum } from "@/consts";
7-
import { onMounted } from "vue";
12+
import { PrivateDataTypes } from "@/types/data";
13+
import { toRef } from "vue";
814
import { useI18n } from "vue-i18n";
915
const { t } = useI18n();
1016
11-
const dataItem = defineModel<InternalDatum>({ required: true });
12-
const prop = defineProps<{
17+
const props = defineProps<{
1318
folded: boolean;
19+
self: PrivateDataTypes.Parametric;
20+
index: number;
1421
}>();
15-
16-
onMounted(() => {
17-
if (dataItem.value.fnType !== "parametric") {
18-
}
19-
});
20-
</script>
22+
const self = toRef(props, "self");
23+
</script>

‎src/editor/inputs/points.vue‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,18 @@
11
<template>
2-
<s-empty>points</s-empty>
2+
Points
3+
<s-divider>{{ t("title.moreOptions") }}</s-divider>
34
</template>
45

56
<script setup lang="ts">
6-
import { InternalDatum } from "@/consts";
7-
import { onMounted } from "vue";
7+
import { PrivateDataTypes } from "@/types/data";
8+
import { toRef } from "vue";
89
import { useI18n } from "vue-i18n";
910
const { t } = useI18n();
1011
11-
const dataItem = defineModel<InternalDatum>({ required: true });
12-
const prop = defineProps<{
12+
const props = defineProps<{
1313
folded: boolean;
14+
self: PrivateDataTypes.Points;
15+
index: number;
1416
}>();
15-
16-
onMounted(() => {
17-
if (dataItem.value.fnType !== "points") {
18-
}
19-
});
17+
const self = toRef(props, "self");
2018
</script>

‎src/editor/inputs/polar.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
<template>
2-
<s-empty>polar</s-empty>
2+
<span class="input-title styled">r=</span>
3+
<s-text-field class="styled" ref="inputBox" label="f(x,y)" v-model="self.r">
4+
</s-text-field>
5+
<s-divider>{{ t("title.moreOptions") }}</s-divider>
36
</template>
47

58
<script setup lang="ts">
6-
import { InternalDatum } from "@/consts";
7-
import { onMounted } from "vue";
9+
import { PrivateDataTypes } from "@/types/data";
10+
import { toRef } from "vue";
811
import { useI18n } from "vue-i18n";
912
const { t } = useI18n();
1013
11-
const dataItem = defineModel<InternalDatum>({ required: true });
12-
const prop = defineProps<{
14+
const props = defineProps<{
1315
folded: boolean;
16+
self: PrivateDataTypes.Polar;
17+
index: number;
1418
}>();
15-
16-
onMounted(() => {
17-
if (dataItem.value.fnType !== "polar") {
18-
}
19-
});
19+
const self = toRef(props, "self");
2020
</script>

‎src/editor/inputs/text.vue‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,36 @@
11
<template>
2-
<s-empty>text</s-empty>
2+
<span class="input-title styled">r=</span>
3+
<s-text-field
4+
class="styled"
5+
ref="inputBox"
6+
label="f(x,y)"
7+
v-model="self.text"
8+
></s-text-field>
9+
<s-text-field
10+
class="styled"
11+
ref="inputBox"
12+
label="x"
13+
v-model="self.location[0]"
14+
></s-text-field>
15+
<s-text-field
16+
class="styled"
17+
ref="inputBox"
18+
label="y"
19+
v-model="self.location[1]"
20+
></s-text-field>
21+
<s-divider>{{ t("title.moreOptions") }}</s-divider>
322
</template>
423

524
<script setup lang="ts">
6-
import { InternalDatum } from "@/consts";
7-
import { onMounted } from "vue";
25+
import { PrivateDataTypes } from "@/types/data";
26+
import { toRef } from "vue";
827
import { useI18n } from "vue-i18n";
928
const { t } = useI18n();
1029
11-
const dataItem = defineModel<InternalDatum>({ required: true });
12-
const prop = defineProps<{
30+
const props = defineProps<{
1331
folded: boolean;
32+
self: PrivateDataTypes.Text;
33+
index: number;
1434
}>();
15-
16-
onMounted(() => {
17-
if (dataItem.value.fnType !== "text") {
18-
}
19-
});
35+
const self = toRef(props, "self");
2036
</script>

0 commit comments

Comments
 (0)