Skip to content

Commit cf7aa33

Browse files
Linho1219Linho1219
committed
组件代码初始化
1 parent eaeb623 commit cf7aa33

File tree

14 files changed

+713
-72
lines changed

14 files changed

+713
-72
lines changed

‎package-lock.json‎

Lines changed: 477 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"dotenv": "^16.5.0",
3535
"patch-package": "^8.0.0",
3636
"rollup-plugin-visualizer": "^5.14.0",
37+
"sass-embedded": "^1.87.0",
3738
"typescript": "~5.6.2",
3839
"vite": "^6.1.0",
3940
"vue-tsc": "^2.1.10"

‎src/consts.ts‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type {
33
FunctionPlotDatum,
44
FunctionPlotOptions,
55
} from "function-plot";
6-
import { cloneDeep } from "lodash-es";
6+
import cloneDeep from "lodash-es/cloneDeep";
77

88
export type ValueLabel = { value: string; label: string; default?: boolean };
99

@@ -105,7 +105,9 @@ export function toOriginalDatum(items: InternalDatum[], forExport?: boolean) {
105105
const graphType = item.graphType;
106106
const graphTypeObj = getAllowedGraphType(fnType).find(
107107
(item) => item.value === graphType
108-
)!;
108+
);
109+
if (!graphTypeObj) throw new Error("graphType not found: " + graphType);
110+
console.log(fnType, graphTypeObj);
109111
if (getFnType(fnType).default) {
110112
delete (<any>item).fnType;
111113
}
@@ -150,10 +152,17 @@ export const getFnType = (fnType: string = "linear") =>
150152
<FnType>fnTypeArr.find(({ value }) => value === fnType);
151153

152154
/** graphType 字段选项 */
153-
export const getAllowedGraphType = (fnType?: string) =>
154-
fnType
155-
? (fnTypeArr.find(({ value }) => value === fnType)?.allowedGraphType ?? [])
156-
: [];
155+
export const getAllowedGraphType = (fnType: string) => {
156+
console.log(
157+
fnType,
158+
fnTypeArr.find(({ value }) => value === fnType),
159+
fnTypeArr.find(({ value }) => value === fnType)?.allowedGraphType
160+
);
161+
162+
const fnTypeObj = fnTypeArr.find(({ value }) => value === fnType);
163+
if (!fnTypeObj) throw new Error("fnType not found: " + fnType);
164+
return fnTypeObj.allowedGraphType;
165+
};
157166

158167
export const fnTypeArr = [
159168
{

‎src/editor/data.vue‎

Lines changed: 67 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,11 @@ ToDo: Refactor data editor to sigle component per fnType, instead of generating
33
The UI is so deeply coupled with the data structure that it makes nosense to make a component for 'general' data
44
-->
55
<template>
6-
<div
7-
class="plot-data"
8-
ref="block"
9-
:class="{ hidden: dataItem.hidden }"
10-
v-if="dataItem"
11-
>
6+
<div class="plot-data" :class="{ hidden: dataItem.hidden }">
127
<div class="selectors">
138
<s-picker
149
:label="t('inputs.fnType')"
15-
v-model.lazy="dataItem.fnType"
16-
@change="fnTypeChange(dataItem)"
10+
v-model.lazy="fnType"
1711
:key="selectKey"
1812
>
1913
<s-picker-item v-for="type in fnTypeArr" :value="type.value">
@@ -23,7 +17,7 @@ ToDo: Refactor data editor to sigle component per fnType, instead of generating
2317
<s-picker
2418
:label="t('inputs.graphType')"
2519
v-model.lazy="dataItem.graphType"
26-
v-if="dataItem.graphType !== 'text'"
20+
v-show="dataItem.graphType !== 'text'"
2721
:key="selectKey"
2822
>
2923
<s-picker-item v-for="type in allowedGraphType" :value="type.value">
@@ -53,16 +47,10 @@ ToDo: Refactor data editor to sigle component per fnType, instead of generating
5347
{{ t("buttons.hide") }}
5448
</s-tooltip>
5549
<s-tooltip>
56-
<s-icon-button
57-
slot="trigger"
58-
@click="
59-
blockFolded = !blockFolded;
60-
"
61-
>
62-
<s-icon :name="blockFolded ? 'chevron_down' : 'chevron_up'">
63-
</s-icon>
50+
<s-icon-button slot="trigger" @click="folded = !folded">
51+
<s-icon :name="folded ? 'chevron_down' : 'chevron_up'"> </s-icon>
6452
</s-icon-button>
65-
{{ t(blockFolded ? "buttons.expand" : "buttons.collapse") }}
53+
{{ t(folded ? "buttons.expand" : "buttons.collapse") }}
6654
</s-tooltip>
6755
<span class="datablock-drag drag-icon">
6856
<SIconDrag />
@@ -76,7 +64,7 @@ ToDo: Refactor data editor to sigle component per fnType, instead of generating
7664
v-if="fnType.coord"
7765
:dataItem="dataItem"
7866
:fnType="fnType"
79-
:blockFolded="false"
67+
:folded="false"
8068
/>
8169
<CoordArrInputs
8270
v-if="fnType.coordArr"
@@ -87,17 +75,17 @@ ToDo: Refactor data editor to sigle component per fnType, instead of generating
8775
v-if="fnType.switches"
8876
:dataItem="dataItem"
8977
:fnType="fnType"
90-
:blockFolded="false"
78+
:folded="false"
9179
/>
9280
</div>
93-
<s-fold :folded="blockFolded">
81+
<s-fold :folded="folded">
9482
<div class="inputs optional">
9583
<s-divider>{{ t("title.moreOptions") }}</s-divider>
9684
<CoordInputs
9785
v-if="fnType.coord"
9886
:dataItem="dataItem"
9987
:fnType="fnType"
100-
:blockFolded="true"
88+
:folded="true"
10189
/>
10290
<OptInputs
10391
v-if="fnType.optInput"
@@ -108,35 +96,33 @@ ToDo: Refactor data editor to sigle component per fnType, instead of generating
10896
v-if="fnType.switches"
10997
:dataItem="dataItem"
11098
:fnType="fnType"
111-
:blockFolded="true"
99+
:folded="true"
112100
/>
113101
</div>
114102
</s-fold> -->
115-
<component
116-
:is="components[dataItem.fnType]"
117-
:dataItem="dataItem"
118-
:fnType="fnType"
119-
:blockFolded="blockFolded"
120-
/>
103+
<div class="relative">
104+
<Transition name="input-component">
105+
<component
106+
:is="components[fnType]"
107+
v-model="dataItem"
108+
:folded="folded"
109+
/>
110+
</Transition>
111+
</div>
121112
</div>
122113
</template>
123114
<script setup lang="ts">
124115
import { useI18n } from "vue-i18n";
125116
const { t, locale } = useI18n();
126117
127-
import {
128-
fnTypeArr,
129-
getAllowedGraphType,
130-
inputTypeArr,
131-
getFnType,
132-
InternalDatum,
133-
} from "../consts";
118+
import { fnTypeArr, getAllowedGraphType, InternalDatum } from "../consts";
134119
import { ref, computed } from "vue";
135-
import StrInputs from "./legacyInputs/strInputs.vue";
136-
import CoordInputs from "./legacyInputs/coordInputs.vue";
137-
import SwitchInputs from "./legacyInputs/switchInputs.vue";
138-
import CoordArrInputs from "./legacyInputs/coordArrInputs.vue";
139-
import OptInputs from "./legacyInputs/optInputs.vue";
120+
121+
// import StrInputs from "./legacyInputs/strInputs.vue";
122+
// import CoordInputs from "./legacyInputs/coordInputs.vue";
123+
// import SwitchInputs from "./legacyInputs/switchInputs.vue";
124+
// import CoordArrInputs from "./legacyInputs/coordArrInputs.vue";
125+
// import OptInputs from "./legacyInputs/optInputs.vue";
140126
141127
import linear from "./inputs/linear.vue";
142128
import implicit from "./inputs/implicit.vue";
@@ -160,14 +146,15 @@ import SIconDelete from "@/ui/icons/delete.vue";
160146
import SIconHide from "@/ui/icons/hide.vue";
161147
import SIconDrag from "@/ui/icons/drag.vue";
162148
163-
const dataItem = defineModel<InternalDatum>();
149+
const dataItem = defineModel<InternalDatum>({ required: true });
164150
const props = defineProps<{ index: number }>();
165-
const block = ref<HTMLDivElement>();
166-
const blockFolded = ref(true);
151+
const folded = ref(true);
167152
168153
import { Snackbar } from "sober";
169154
import { useProfile } from "@/states";
170155
const profile = useProfile();
156+
157+
import cloneDeep from "lodash-es/cloneDeep";
171158
function deleteDatum() {
172159
const backup = cloneDeep(dataItem.value)!;
173160
profile.data.splice(props.index, 1);
@@ -182,31 +169,28 @@ function deleteDatum() {
182169
});
183170
}
184171
185-
function fnTypeChange(dataItem: InternalDatum) {
186-
console.log(dataItem);
187-
inputTypeArr.forEach((key) => delete dataItem[key]);
188-
if (dataItem.fnType === "text") {
189-
dataItem.graphType = "text";
190-
} else {
191-
if (dataItem.fnType === "implicit") dataItem.graphType = "interval";
192-
dataItem.graphType = getAllowedGraphType(dataItem.fnType)[0].value;
193-
if (dataItem.fnType === "vector") dataItem.vector = [0, 0];
194-
if (dataItem.fnType === "points") dataItem.points = [];
195-
if (block.value)
196-
block.value.querySelectorAll("input").forEach((ele) => (ele.value = ""));
197-
}
198-
}
199-
200-
import { cloneDeep } from "lodash-es";
172+
// function fnTypeChange(dataItem: InternalDatum) {
173+
// console.log(dataItem);
174+
// inputTypeArr.forEach((key) => delete dataItem[key]);
175+
// if (dataItem.fnType === "text") {
176+
// dataItem.graphType = "text";
177+
// } else {
178+
// if (dataItem.fnType === "implicit") dataItem.graphType = "interval";
179+
// dataItem.graphType = getAllowedGraphType(dataItem.fnType)[0].value;
180+
// if (dataItem.fnType === "vector") dataItem.vector = [0, 0];
181+
// if (dataItem.fnType === "points") dataItem.points = [];
182+
// }
183+
// }
201184
202-
const fnType = computed(() => getFnType(dataItem.value?.fnType));
203185
const allowedGraphType = computed(() =>
204186
getAllowedGraphType(dataItem.value?.fnType)
205187
);
206188
207189
import { watch } from "vue";
208190
const selectKey = ref(0);
209191
watch(locale, () => selectKey.value++);
192+
193+
const fnType = ref(dataItem.value!.fnType);
210194
</script>
211195

212196
<style>
@@ -227,7 +211,7 @@ watch(locale, () => selectKey.value++);
227211
.plot-data {
228212
position: relative;
229213
padding: 20px 15px;
230-
overflow-x: hidden;
214+
overflow: hidden;
231215
transition:
232216
opacity 0.15s,
233217
filter 0.15s;
@@ -271,3 +255,24 @@ watch(locale, () => selectKey.value++);
271255
z-index: 999;
272256
}
273257
</style>
258+
259+
<style lang="scss">
260+
.input-component {
261+
&-enter-from,
262+
&-leave-to {
263+
opacity: 0;
264+
}
265+
&-enter-active {
266+
transition: opacity 0.3s 0.05s;
267+
}
268+
&-leave-active {
269+
transition: opacity 0.15s;
270+
}
271+
&-leave-active {
272+
position: absolute;
273+
left: 0;
274+
top: 0;
275+
right: 0;
276+
}
277+
}
278+
</style>

‎src/editor/inputs/implicit.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,35 @@
11
<template>
22
<s-empty>Implicit</s-empty>
33
</template>
4+
5+
<script setup lang="ts">
6+
import { InternalDatum } from "@/consts";
7+
import { onMounted } from "vue";
8+
import { useI18n } from "vue-i18n";
9+
const { t } = useI18n();
10+
11+
const dataItem = defineModel<InternalDatum>({ required: true });
12+
const prop = defineProps<{
13+
folded: boolean;
14+
}>();
15+
16+
const allowedGraphType = ["interval"] as const;
17+
type AllowedGraphType = typeof allowedGraphType[number];
18+
function isAllowedGraphType(type: string): type is AllowedGraphType {
19+
return (allowedGraphType as readonly string[]).includes(type);
20+
}
21+
22+
23+
onMounted(() => {
24+
if (dataItem.value.fnType !== "implicit") {
25+
dataItem.value = {
26+
fnType: "implicit",
27+
graphType: isAllowedGraphType(dataItem.value.graphType)
28+
? dataItem.value.graphType
29+
: allowedGraphType[0],
30+
fn: "x-y",
31+
key: dataItem.value.key,
32+
};
33+
}
34+
});
35+
</script>

‎src/editor/inputs/linear.vue‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,32 @@
11
<template>
2-
<s-empty>linear</s-empty>
2+
<div class="input-inner">
3+
<span class="input-title styled">y=</span>
4+
<s-text-field class="styled" ref="inputBox" label="f(x)"> </s-text-field>
5+
<s-fold :folded="prop.folded">
6+
<s-divider>{{ t("title.moreOptions") }}</s-divider>
7+
<p>
8+
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora ab hic
9+
accusamus iure natus expedita laborum ea nam, reiciendis obcaecati animi
10+
voluptatem nisi assumenda ipsam nihil fuga minima? Id, ab?
11+
</p>
12+
</s-fold>
13+
</div>
314
</template>
15+
16+
<script setup lang="ts">
17+
import { InternalDatum } from "@/consts";
18+
import { onMounted } from "vue";
19+
import { useI18n } from "vue-i18n";
20+
const { t } = useI18n();
21+
22+
const dataItem = defineModel<InternalDatum>({ required: true });
23+
const prop = defineProps<{
24+
folded: boolean;
25+
}>();
26+
27+
onMounted(() => {
28+
if (dataItem.value.fnType !== "linear") {
29+
console.log("format to linear");
30+
}
31+
});
32+
</script>

‎src/editor/inputs/parametric.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
11
<template>
22
<s-empty>parametric</s-empty>
33
</template>
4+
5+
<script setup lang="ts">
6+
import { InternalDatum } from "@/consts";
7+
import { onMounted } from "vue";
8+
import { useI18n } from "vue-i18n";
9+
const { t } = useI18n();
10+
11+
const dataItem = defineModel<InternalDatum>({ required: true });
12+
const prop = defineProps<{
13+
folded: boolean;
14+
}>();
15+
16+
onMounted(() => {
17+
if (dataItem.value.fnType !== "parametric") {
18+
}
19+
});
20+
</script>

‎src/editor/inputs/points.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
11
<template>
22
<s-empty>points</s-empty>
33
</template>
4+
5+
<script setup lang="ts">
6+
import { InternalDatum } from "@/consts";
7+
import { onMounted } from "vue";
8+
import { useI18n } from "vue-i18n";
9+
const { t } = useI18n();
10+
11+
const dataItem = defineModel<InternalDatum>({ required: true });
12+
const prop = defineProps<{
13+
folded: boolean;
14+
}>();
15+
16+
onMounted(() => {
17+
if (dataItem.value.fnType !== "points") {
18+
}
19+
});
20+
</script>

0 commit comments

Comments
 (0)