Make input fancier catch a weird caching bug

mcnuttandrew · Jul 18, 2023 · cbbb47b · cbbb47b
1 parent a0dc278
commit cbbb47b
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 13 deletions.
diff --git a/packages/prong-editor/src/components/Editor.tsx b/packages/prong-editor/src/components/Editor.tsx
@@ -105,7 +105,7 @@ export default function Editor(props: {
     // hack :(
     setTimeout(() => {
       view?.dispatch({ effects: [setProjections.of(projections || [])] });
-    }, 300);
+    }, 100);
   }, [projections, view]);
 
   useEffect(() => {

diff --git a/packages/prong-editor/src/lib/projections.ts b/packages/prong-editor/src/lib/projections.ts
@@ -87,13 +87,11 @@ function widgetBuilder(
 ) {
   const widgets: Range<Decoration>[] = [];
   const { schemaTypings, codeUpdateHook } = state.field(cmStatePlugin);
-  const logger = new Set();
   syntaxTree(state).iterate({
     from: 0,
     to: state.doc.length,
     enter: ({ node, from, to }) => {
       const currentCodeSlice = codeStringState(state, from, to);
-      logger.add(`${from}-${to}`);
       projectionsInUse
         .filter((x) => x.from === from && x.to === to)
         .forEach((projection) => {
@@ -104,7 +102,6 @@ function widgetBuilder(
             schemaTypings[`${node.from}-${node.to}`],
             codeUpdateHook
           );
-
           projWidget
             .addNode(state, from, to, node)
             .forEach((w) => widgets.push(w));
@@ -148,7 +145,10 @@ export const projectionView = ViewPlugin.fromClass(
         update.startState.field(projectionState),
         update.state.field(projectionState)
       );
-      if (update.viewportChanged || stateValuesChanged) {
+      const codeUpdated =
+        codeStringState(update.view.state, 0) !==
+        codeStringState(update.startState, 0);
+      if (update.viewportChanged || stateValuesChanged || codeUpdated) {
         const { projectionsInUse } = update.view.state.field(projectionState);
         this.decorations = widgetBuilder(projectionsInUse, update.view.state);
       }

diff --git a/packages/prong-editor/src/projections/NumberSlider.tsx b/packages/prong-editor/src/projections/NumberSlider.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Projection, ProjectionProps } from "../lib/projections";
 import { setIn, maybeTrim } from "../lib/utils";
 
@@ -11,14 +11,49 @@ function FancySlider(props: ProjectionProps) {
   const value = maybeTrim(props.currentValue) || 0;
   const [dragging, setDragging] = useState(false);
   const [val, setVal] = useState(value);
-  const order = orderOfMag(Number(value) || 0);
-  const min = Math.pow(10, order - 1);
-  const max = Math.pow(10, order + 1) * 1.1;
+  const [min, setMin] = useState(0);
+  const [max, setMax] = useState(0);
+  const order = orderOfMag(Number(val) || 0);
+
+  useEffect(() => {
+    const localVal = maybeTrim(props.currentValue) || 0;
+    const isNegative = Number(localVal) < 0;
+    const localOrder = orderOfMag(Number(localVal) || 0);
+    let localMin = Math.pow(10, localOrder - 1);
+    let localMax = Math.pow(10, localOrder + 1);
+    const isZero = localMin === localMax && localMax === 0;
+    if (isZero) {
+      localMax = 1;
+    }
+    if (isNegative) {
+      const temp = localMin;
+      localMin = -localMax;
+      localMax = -temp;
+    }
+    setMax(localMax);
+    setMin(localMin);
+  }, [props.currentValue]);
+  const pos = ((Number(val) - min) / (max - min)) * 90;
+
   return (
     <div className="cm-number-slider">
+      <div className="cm-slider-dropzone" style={{ left: 0 }}></div>
+      <div className="cm-slider-dropzone" style={{ right: 0 }}></div>
+      <span
+        className="cm-number-slider-magnitude-label"
+        style={{ left: "-2px", textAlign: "right" }}
+      >
+        {min}
+      </span>
+      <span
+        className="cm-number-slider-magnitude-label"
+        style={{ right: "2px", textAlign: "left" }}
+      >
+        {max}
+      </span>
       <span
         className="cm-number-slider-label"
-        style={{ left: `${(Number(val) / (max - min)) * 100}%` }}
+        style={{ left: `calc(${pos}%)`, top: "-15px" }}
       >
         {val}
       </span>
@@ -28,7 +63,7 @@ function FancySlider(props: ProjectionProps) {
         min={min}
         max={max}
         value={val}
-        step={Math.pow(10, order - 1)}
+        step={min === max && max === 0 ? 0.01 : Math.pow(10, order - 1)}
         onMouseUp={() => {
           setDragging(false);
           props.setCode(setIn(props.keyPath, val, props.fullCode));

diff --git a/packages/prong-editor/src/stylesheets/style.css b/packages/prong-editor/src/stylesheets/style.css
@@ -130,16 +130,41 @@
 
 .cm-number-slider {
     position: relative;
+    /* width: 120px */
+    margin: 0 15px;
+}
+
+.cm-number-slider input {
+    position: relative;
 }
 
 .cm-number-slider-label {
     position: absolute;
     font-size: 8px;
-    top: -5px;
+    /* top: -5px; */
     pointer-events: none;
 }
 
 
+
+.cm-number-slider-magnitude-label {
+    position: absolute;
+    font-size: 8px;
+    bottom: -8px;
+    pointer-events: none;
+}
+
+
+
+.cm-slider-dropzone {
+    position: absolute;
+    background-color: white;
+    border: dotted 1px gray;
+    height: 15px;
+    width: 10px;
+    top: 1px;
+}
+
 /* DOCK */
 
 .cm-dock {

diff --git a/sites/docs/src/examples/SimpleExample.tsx b/sites/docs/src/examples/SimpleExample.tsx
@@ -11,7 +11,7 @@ const exampleData = `{
       "c": true,
     },
     "d": null,
-    "e": [{ "f": 4, "g": 5 }],
+    "e": [{ "f": -4, "g": 0 }],
     "I": "example",
   }`;