Merge branch 'main' of https://github.com/aidenybai/million

packages/kitchen-sink/package.json

@@ -14,6 +14,7 @@
     "vite-plugin-inspect": "^0.7.37"
   },
   "dependencies": {
+    "@material-ui/core": "^4.12.4",
     "@reduxjs/toolkit": "^1.9.6",
     "@tanstack/react-query": "^4.32.6",
     "@tanstack/react-virtual": "3.0.0-beta.54",
@@ -24,6 +25,7 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.11",
     "react-icons": "^4.11.0",
+    "react-qr-code": "^2.0.12",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.15.0",
     "styled-components": "^6.0.7",

packages/kitchen-sink/src/examples/canvas.jsx

@@ -0,0 +1,185 @@
+import React, { useRef, useState, useEffect } from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { block } from 'million/react';
+
+
+const useStyles = makeStyles({
+  canvascover: {
+    opacity: "1",
+  },
+});
+
+
+const Canvas=block(() =>{
+  const classes = useStyles();
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [color, setColor] = useState("#3B3B3B");
+  const [size, setSize] = useState("3");
+  const canvasRef = useRef(null);
+  const ctx = useRef(null);
+  const timeout = useRef(null);
+  const [cursor, setCursor] = useState("default");
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    ctx.current = canvas.getContext("2d");
+
+    //Resizing
+    canvas.height = window.innerHeight;
+    canvas.width = window.innerWidth;
+
+    //Load from locastorage
+    const canvasimg = localStorage.getItem("canvasimg");
+    if (canvasimg) {
+      var image = new Image();
+      ctx.current = canvas.getContext("2d");
+      image.onload = function () {
+        ctx.current.drawImage(image, 0, 0);
+        setIsDrawing(false);
+      };
+      image.src = canvasimg;
+    }else{
+      const context = canvas.getContext("2d");
+      context.fillStyle = "white";
+      context.fillRect(0, 0, canvas.width, canvas.height);
+    }
+
+
+  }, [ctx]);
+
+  const startPosition = ({ nativeEvent }) => {
+    setIsDrawing(true);
+    draw(nativeEvent);
+  };
+
+  const finishedPosition = () => {
+    setIsDrawing(false);
+    ctx.current.beginPath();
+  };
+
+  const draw = ({ nativeEvent }) => {
+    if (!isDrawing) {
+      return;
+    }
+    const canvas = canvasRef.current;
+    ctx.current = canvas.getContext("2d");
+    ctx.current.lineWidth = size;
+    ctx.current.lineCap = "round";
+    ctx.current.strokeStyle = color;
+
+    ctx.current.lineTo(nativeEvent.clientX, nativeEvent.clientY);
+    ctx.current.stroke();
+    ctx.current.beginPath();
+    ctx.current.moveTo(nativeEvent.clientX, nativeEvent.clientY);
+
+    if (timeout.current !== undefined) clearTimeout(timeout.current);
+    timeout.current = setTimeout(function () {
+      var base64ImageData = canvas.toDataURL("image/png");
+      localStorage.setItem("canvasimg", base64ImageData);
+    }, 400);
+  };
+
+  const clearCanvas = () => {
+    localStorage.removeItem("canvasimg");
+    const canvas = canvasRef.current;
+    const context = canvas.getContext("2d");
+    context.fillStyle = "white";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+
+    //Passing clear screen
+    if (timeout.current !== undefined) clearTimeout(timeout.current);
+    timeout.current = setTimeout(function () {
+      var base64ImageData = canvas.toDataURL("image/png");
+      localStorage.setItem("canvasimg", base64ImageData);
+    }, 400);
+  };
+
+  const getPen = () => {
+    setCursor("default");
+    setSize("3");
+    setColor("#3B3B3B");
+  };
+
+  const eraseCanvas = () => {
+    setCursor("grab");
+    setSize("20");
+    setColor("#FFFFFF");
+    const circularCursor = document.getElementById("circularcursor");
+
+    document.addEventListener("DOMContentLoaded", () => {
+      document.addEventListener("mousemove", (e) => {
+        if (circularCursor) {
+          circularCursor.style.left = e.pageX + "px";
+          circularCursor.style.top = e.pageY + "px";
+        }
+      });
+    });
+
+    if (!isDrawing) {
+      return;
+    }
+  };
+
+  return (
+    <div>
+      <div className="canvas-btn" 
+      style={{
+        position: "absolute",
+        marginLeft: "10px",
+        marginTop: "10px",
+        borderRadius: "5px",
+        borderStyle: "solid",
+        padding: "5px 5px",
+        borderColor: "gray",
+        borderWidth: "thin",
+      }}>
+      <button onClick={getPen} className="btn-width" style={{ minWidth: "50px" }}>
+          Pencil
+        </button>
+        <div className="btn-width" style={{ minWidth: "50px" }}>
+          <input
+            type="color"
+            value={color}
+            onChange={(e) => setColor(e.target.value)}
+          />
+        </div>
+        <div>
+          <select
+            className="btn-width"
+            style={{ minWidth: "50px" }}
+            value={size}
+            onChange={(e) => setSize(e.target.value)}
+          >
+            <option> 1 </option>
+            <option> 3 </option>
+            <option> 5 </option>
+            <option> 10 </option>
+            <option> 15 </option>
+            <option> 20 </option>
+            <option> 25 </option>
+            <option> 30 </option>
+          </select>
+        </div>
+        <button onClick={clearCanvas} className="btn-width" style={{ minWidth: "50px" }}>
+          Clear
+        </button>
+        <div>
+          <button onClick={eraseCanvas} className="btn-width" style={{ minWidth: "50px" }}>
+            Erase
+          </button>
+        </div>
+      </div>
+      <canvas
+       style={{ cursor: cursor ,height:"100%",width:"100%"}}
+        onMouseDown={startPosition}
+        onMouseUp={finishedPosition}
+        onMouseMove={draw}
+        ref={canvasRef}
+        className={classes.canvascover}
+      />
+
+    </div>
+  );
+})
+
+export default Canvas

packages/kitchen-sink/src/examples/qr-code-generator.tsx

@@ -0,0 +1,38 @@
+import { block } from 'million/react';
+import { useState, useRef } from 'react';
+import QRCode from 'react-qr-code';
+
+const QRCodeGenerator = block(() => {
+  const [data, setData] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  return (
+    <div>
+      <h1>QR Code Generator</h1>
+      <div>
+        <input
+          placeholder="Enter text or URL"
+          style={{ width: '40%' }}
+          ref={inputRef}
+          type="text"
+        />
+        <button
+          style={{ marginLeft: 10 }}
+          onClick={() => {
+            if (inputRef.current) {
+              setData(inputRef.current.value);
+            }
+          }}
+        >
+          Generate
+        </button>
+      </div>
+      {data && (
+        <div className="qr-code-wrapper">
+          <QRCode value={data} />
+        </div>
+      )}
+    </div>
+  );
+});
+
+export default QRCodeGenerator;

packages/kitchen-sink/src/style.css

@@ -135,4 +135,12 @@ input[type="range"] {
   }
 }
 
-/*  */
+/*  */
+
+/* QR code styles */
+.qr-code-wrapper {
+  display: inline-flex;
+  background: white;
+  margin-top: 2rem;
+  padding: 1rem;
+}

packages/million/block.ts

@@ -299,7 +299,8 @@ const getCurrentElement = (
 ): HTMLElement => {
   const pathLength = path.length;
   if (!pathLength) return root;
-  if (cache && key !== undefined && cache[key]) {
+  const isCacheAndKeyExists = cache && key !== undefined;
+  if (isCacheAndKeyExists && cache[key]) {
     return cache[key]!;
   }
   // path is an array of indices to traverse the DOM tree
@@ -310,7 +311,7 @@ const getCurrentElement = (
     const siblings = path[i]!;
     root = childAt(root, siblings);
   }
-  if (cache && key !== undefined) cache[key] = root;
+  if (isCacheAndKeyExists) cache[key] = root;
   return root;
 };