change bleed color again

konvajs · Feb 13, 2025 · 1e9a9ff · 1e9a9ff
1 parent 755a256
commit 1e9a9ff
Showing 1 changed file with 76 additions and 0 deletions.
diff --git a/test/react-konva-test.tsx b/test/react-konva-test.tsx
@@ -14,6 +14,7 @@ import {
   Group,
   Text,
   Image,
+  Circle,
 } from '../src/ReactKonva';
 
 global.IS_REACT_ACT_ENVIRONMENT = true;
@@ -916,6 +917,81 @@ describe('test reconciler', () => {
     expect(stage.findOne('Rect').isDragging()).to.equal(true);
     expect(stage.findOne('Rect').fill()).to.equal('red');
   });
+
+  console.log(React.version);
+  it.only('check render priority', async function () {
+    const Canvas = () => {
+      const [position, setPosition] = React.useState({
+        x: 600 / 2,
+        y: 600 / 2,
+      });
+      console.log('canvas render');
+
+      return (
+        <Layer
+          onClick={() => {
+            console.log('before layer click');
+            setPosition({
+              x: position.x + Math.random(),
+              y: position.y,
+            });
+            console.log('after layer click');
+          }}
+        >
+          <Circle
+            x={position.x}
+            y={position.y}
+            radius={80}
+            fill="yellow"
+            listening={false}
+            stroke="black"
+          />
+          <Circle
+            x={position.x}
+            y={position.y}
+            radius={70}
+            fill="red"
+            stroke="black"
+            strokeWidth={4}
+            draggable
+            onDragMove={(e) => {
+              console.log('before set');
+              const newPos = e.target.position();
+              // e.target.setPosition(position);
+              setPosition({
+                x: newPos.x,
+                y: newPos.y,
+              });
+              console.log('after set');
+            }}
+          />
+        </Layer>
+      );
+    };
+
+    const App = () => {
+      const [fill, setColor] = React.useState('black');
+
+      return (
+        <Stage width={600} height={600}>
+          <Canvas />
+        </Stage>
+      );
+    };
+    const { stage } = await render(<App />);
+
+    // expect(stage.findOne('Rect').fill()).to.equal('black');
+
+    // await React.act(() => {
+    //   stage.simulateMouseDown({ x: 50, y: 50 });
+    // });
+    // await React.act(() => {
+    //   stage.simulateMouseMove({ x: 55, y: 55 });
+    // });
+    // window.stage = stage;
+    // expect(stage.findOne('Rect').isDragging()).to.equal(true);
+    // expect(stage.findOne('Rect').fill()).to.equal('red');
+  });
 });
 
 describe('Test context API', async function () {