拖拽调整侧边栏宽度

Author: Linho1219

src/App.vue

@@ -1,18 +1,33 @@
 <template>
   <Navbar />
-  <div id="content">
-    <div id="editor">
+  <div id="content" :class="{ onresize: onResize }">
+    <div id="editor" :style="{ width: sideRatio + 'vw' }">
       <div class="editor-inner">
-        <DataBlock
-          v-for="(_dataItem, i) in graphData"
-          v-model="graphData[i]"
-          @delete="graphData.splice(i, 1)"
-        />
-        <div class="plot-data add-data" @click="graphData.push({})">+ 添加</div>
+        <VueDraggable v-model="graphData" :animation="150" handle=".datablock-drag">
+          <DataBlock
+            v-for="(dataItem, i) in graphData"
+            v-model="graphData[i]"
+            @delete="graphData.splice(i, 1)"
+            :key="dataItem.key"
+          />
+        </VueDraggable>
+        <div
+          class="plot-data add-data"
+          @click="graphData.push({ key: Math.random() })"
+        >
+          + 添加
+        </div>
       </div>
       <CodeDisplay :dataArr="cloneDeep(graphData)" />
     </div>
-    <Graph :key="graphKey" :graphData="cloneDeep(graphData)" ref="graphRef" />
+    <div id="divider" @mousedown="handleDrag"></div>
+    <div id="graph" ref="shellRef">
+      <Graph
+        :graphData="cloneDeep(graphData)"
+        :width="graphWidth"
+        :height="graphHeight"
+      />
+    </div>
   </div>
 </template>
 
@@ -21,13 +36,40 @@ import Navbar from "./components/nav.vue";
 import Graph from "./components/graph.vue";
 import DataBlock from "./components/dataBlock.vue";
 import CodeDisplay from "./components/codeDisplay.vue";
+import { VueDraggable } from "vue-draggable-plus";
 import type { FunctionPlotDatum } from "function-plot";
-import { reactive, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { cloneDeep } from "lodash-es";
-
-const graphRef = ref<InstanceType<typeof Graph>>();
-const graphData = reactive<FunctionPlotDatum[]>([{ fn: "x^2" }]);
-const graphKey = ref(0);
+const graphData = ref<(FunctionPlotDatum & { key: number })[]>([
+  { fn: "x^2", key: 1 },
+]);
+const graphWidth = ref(0),
+  graphHeight = ref(0);
+const sideRatio = ref(33);
+const onResize = ref(false);
+const shellRef = ref<HTMLDivElement>();
+function handleResize() {
+  if (shellRef.value) {
+    graphWidth.value = shellRef.value.clientWidth;
+    graphHeight.value = shellRef.value.clientHeight;
+  }
+}
+onMounted(() => {
+  window.addEventListener("resize", handleResize);
+  handleResize();
+});
+function handleDrag() {
+  onResize.value = true;
+  const xfull = outerWidth;
+  const mousemove = (event: MouseEvent) =>
+    (sideRatio.value = (event.clientX / xfull) * 100);
+  document.addEventListener("mousemove", mousemove);
+  document.addEventListener("mouseup", () => {
+    document.removeEventListener("mousemove", mousemove);
+    onResize.value = false;
+    handleResize();
+  });
+}
 </script>
 
 <style>
@@ -59,7 +101,6 @@ const graphKey = ref(0);
   flex-shrink: 0;
 }
 #editor {
-  width: 33vw;
   border-right: var(--c-border) 1px solid;
   position: relative;
 }
@@ -74,6 +115,7 @@ const graphKey = ref(0);
 #graph {
   flex-grow: 1;
   position: relative;
+  overflow: hidden;
 }
 .add-data {
   padding-top: 10px;
@@ -87,30 +129,26 @@ const graphKey = ref(0);
 .add-data:active {
   background: var(--c-bk1);
 }
-.plot-data.output {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-top: var(--c-border) 1px solid;
-  padding: 20px 15px;
-  height: 260px;
+
+#divider {
+  width: 6px;
+  background: var(--c-accent);
+  margin-left: -3px;
+  margin-right: -3px;
+  z-index: 999;
+  opacity: 0;
+  transition: opacity 0.1s;
+  cursor: w-resize;
 }
-.plot-data.output .output-title {
-  font-size: 20px;
-  font-weight: bold;
-  display: block;
-  margin-bottom: 10px;
+#divider:hover {
+  opacity: 0.8;
 }
-.plot-data.output pre {
-  position: absolute;
-  top: 60px;
-  bottom: 15px;
-  left: 15px;
-  right: 15px;
-  margin: 0;
-  overflow: scroll;
-  user-select: all;
+.onresize #divider {
+  opacity: 0.3;
+  transition: none;
+}
+.onresize {
+  cursor: w-resize;
+  user-select: none;
 }
-
 </style>

src/components/codeDisplay.vue

@@ -12,13 +12,16 @@ import prettierPluginBabel from "prettier/plugins/babel";
 import prettierPluginEstree from "prettier/plugins/estree";
 import { FunctionPlotDatum } from "function-plot";
 import { ref, watch } from "vue";
-const { dataArr } = defineProps<{ dataArr: FunctionPlotDatum[] }>();
+const { dataArr } = defineProps<{
+  dataArr: (FunctionPlotDatum & { key?: number })[];
+}>();
 const formatted = ref("");
 watch(
   () => dataArr,
   () => {
     dataArr.forEach((item) => {
       if (item.graphType === "text") delete item.fnType;
+      delete item.key;
     });
     prettier
       .format(JSON5.stringify({ data: dataArr }), {

src/components/dataBlockInner/strInputs.vue

@@ -15,6 +15,7 @@ import { FunctionPlotDatum } from "function-plot";
 const { dataItem, fnType } = defineProps<{
   dataItem: FunctionPlotDatum;
   fnType: FnType;
+  blockFolded: boolean;
 }>();
 </script>
 

src/components/graph.vue

@@ -1,50 +1,40 @@
 <template>
-  <div id="graph" ref="shellRef">
-    <div id="graphRender" ref="plotRef"></div>
-  </div>
+  <div id="graphRender" ref="plotRef"></div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { throttle } from "lodash-es";
 import type { FunctionPlotDatum } from "function-plot";
 import { findError } from "../consts";
-const { graphData } = defineProps<{ graphData: FunctionPlotDatum[] }>();
+const { graphData, width, height } = defineProps<{
+  graphData: FunctionPlotDatum[];
+  width: number;
+  height: number;
+}>();
 
-const shellRef = ref<HTMLDivElement | null>(null);
 const plotRef = ref<HTMLDivElement | null>(null);
-const width = ref(0),
-  height = ref(0);
-const handleResize = () => {
-  if (shellRef.value) {
-    width.value = shellRef.value.clientWidth;
-    height.value = shellRef.value.clientHeight;
-  }
-};
 onMounted(async () => {
   const functionPlot = (await import("function-plot")).default;
-  handleResize();
-  window.addEventListener("resize", handleResize);
   watch(
-    [width, height, graphData],
+    [() => width, () => height, () => graphData],
     throttle(() => {
       const flag = findError(graphData);
-      if (plotRef.value)
-        try {
+      try {
+        plotRef.value &&
           functionPlot({
             target: plotRef.value,
             data: flag ? graphData.slice(0, flag) : graphData,
-            width: width.value - 20,
-            height: height.value - 20,
+            width: width - 20,
+            height: height - 20,
           });
-        } catch (e) {
-          console.log(e);
-        }
+      } catch (e) {
+        console.log(e);
+      }
     }, 200),
     { immediate: true }
   );
 });
-onUnmounted(() => window.removeEventListener("resize", handleResize));
 </script>
 
 <style>
@@ -54,11 +44,21 @@ onUnmounted(() => window.removeEventListener("resize", handleResize));
   right: 0;
   left: 0;
   bottom: 0;
+  width: fit-content;
+  height: fit-content;
+  margin: auto;
   filter: invert(100%) hue-rotate(180deg) brightness(133%);
   color: black;
   user-select: none;
 }
+
+.onresize #graphRender {
+  left: 50%;
+  right: unset;
+  width: fit-content;
+  transform: translateX(-50%);
+}
 .top-right-legend {
-  transform: translateY(20px);
+  display: none;
 }
 </style>

src/style.css

@@ -19,6 +19,8 @@
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  cursor: default;
+  user-select: none;
 }
 
 :root,