emitter 添加来源

Author: Linho1219

src/editor/datum.vue

@@ -181,12 +181,12 @@ function graphTypeChange(dataItem: InternalDatum) {
   if (dataItem.graphType === "scatter") {
     if (!scatteredSet.has(dataItem)) {
       scatteredSet.add(dataItem);
-      emitter.emit("require-full-update");
+      emitter.emit("require-full-update",'scatter appear');
     }
   } else {
     if (scatteredSet.has(dataItem)) {
       scatteredSet.delete(dataItem);
-      emitter.emit("require-full-update");
+      emitter.emit("require-full-update",'scatter disappear');
     }
   }
 }

src/graph/graph.vue

@@ -4,7 +4,7 @@
     <s-tooltip align="right">
       <s-icon-button
         slot="trigger"
-        @click="emitter.emit('require-full-update')"
+        @click="emitter.emit('require-full-update', 'manual')"
       >
         <SIconRefresh />
       </s-icon-button>
@@ -27,15 +27,17 @@ import SIconRefresh from "@/ui/icons/refresh.vue";
 import SIconWarn from "@/ui/icons/warn.vue";
 
 import { onMounted, ref, watch } from "vue";
-import { cloneDeep, throttle } from "lodash-es";
+import { throttle } from "lodash-es";
 import type { FunctionPlotDatum } from "function-plot";
 import { getFnType } from "../consts";
-const { data, width, height } = defineProps<{
-  data: FunctionPlotDatum[];
+const { width, height } = defineProps<{
   width: number;
   height: number;
 }>();
 
+import { useProfile } from "@/states";
+const profile = useProfile();
+
 import emitter from "@/mitt";
 const fullUpdateState = defineModel<boolean>();
 
@@ -55,9 +57,10 @@ function findError(graphData: FunctionPlotDatum[]) {
 onMounted(async () => {
   const functionPlot = (await import("function-plot")).default;
   watch(
-    [() => width, () => height, () => data],
+    [() => width, () => height, profile],
     throttle(() => {
-      const graphData = cloneDeep(data);
+      if (import.meta.env.DEV) console.log("graph update");
+      const graphData = profile.getOriginalData();
       const flag = findError(graphData);
       if (flag) {
         errorMsg.value = `Invalid input in function ${flag + 1}`;
@@ -67,20 +70,19 @@ onMounted(async () => {
         plotRef.value &&
           functionPlot({
             target: plotRef.value,
-            data: <FunctionPlotDatum[]>(
-              // (flag ? graphData.slice(0, flag) : graphData)
-              graphData
-            ),
+            data: <FunctionPlotDatum[]>graphData,
             width: width - 20,
             height: height - 20,
+            annotations: profile.getOriginalAnnotaion(),
           });
         if (fullUpdateState.value) {
           fullUpdateState.value = false;
-          emitter.emit("require-post-update");
+          emitter.emit("require-post-update", "once after error");
         } else errorMsg.value = undefined;
       } catch (e) {
         // console.log(e);
-        if (!fullUpdateState.value) emitter.emit("require-full-update");
+        if (!fullUpdateState.value)
+          emitter.emit("require-full-update", "error");
         errorMsg.value = (e as Error).message;
       }
     }, 200),
@@ -104,13 +106,17 @@ onMounted(async () => {
   transition: filter 1ms;
 }
 
+:root {
+  --graph-filter: invert(100%) hue-rotate(180deg) contrast(0.8) brightness(1.3);
+}
+
 @media (prefers-color-scheme: dark) {
   s-page.auto #graphRender {
-    filter: invert(100%) hue-rotate(180deg) brightness(133%);
+    filter: var(--graph-filter);
   }
 }
 s-page.dark #graphRender {
-  filter: invert(100%) hue-rotate(180deg) brightness(133%);
+  filter: var(--graph-filter);
 }
 
 .onresize #graphRender {

src/graph/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="graph" ref="shellRef">
     <Graph
-      :data="graphData"
       :width="graphWidth"
       :height="graphHeight"
       :key="graphKey"
@@ -12,9 +11,8 @@
 
 <script setup lang="ts">
 import Graph from "./graph.vue";
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { throttle } from "lodash-es";
-import { useProfile } from "@/states";
 
 const graphWidth = ref(0),
   graphHeight = ref(0);
@@ -32,20 +30,17 @@ onMounted(() => {
   observer.observe(shellRef.value!);
 });
 
-const profile = useProfile();
-
-const graphData = computed(() => {
-  void profile.data;
-  return profile.getOriginalCopy();
-});
-
 import emitter from "@/mitt";
 
-emitter.on("require-full-update", () => {
+emitter.on("require-full-update", (str) => {
   fullUpdateState.value = true;
   graphKey.value++;
+  if (import.meta.env.DEV)
+    console.log(`fullUpdateState: ${fullUpdateState.value}, ${str}`);
 });
-emitter.on("require-post-update", () => {
+emitter.on("require-post-update", (str) => {
   graphKey.value++;
+  if (import.meta.env.DEV)
+    console.log(`postUpdateState: ${fullUpdateState.value}, ${str}`);
 });
 </script>

src/mitt.ts

@@ -2,7 +2,7 @@ import mitt from "mitt";
 
 const emitter = mitt<Events>();
 type Events = {
-  "require-full-update": void;
-  "require-post-update": void;
+  "require-full-update": string;
+  "require-post-update": string;
 };
 export default emitter;