@edadma/logo 0.2.3 → 0.2.5

package/package.json

@@ -1,29 +1,22 @@
 {
   "name": "@edadma/logo",
-  "version": "0.2.3",
-  "description": "Logo programming language interpreter with React component",
+  "version": "0.2.5",
+  "description": "Logo programming language interpreter",
   "main": "dist/main.js",
   "module": "dist/main.js",
   "types": "src/index.d.ts",
   "files": [
     "dist",
-    "src",
-    "react"
+    "src"
   ],
   "exports": {
     ".": {
       "import": "./dist/main.js",
       "types": "./src/index.d.ts"
-    },
-    "./react": {
-      "import": "./react/index.ts",
-      "types": "./react/index.ts"
     }
   },
   "scripts": {
-    "build": "npm run build:scala && npm run build:react",
-    "build:scala": "cd .. && sbt logoJS/fullLinkJS && cp js/target/scala-3.7.4/logo-opt/main.js js/target/scala-3.7.4/logo-opt/main.js.map js/dist/",
-    "build:react": "tsc --project tsconfig.react.json",
+    "build": "cd .. && sbt logoJS/fullLinkJS && cp js/target/scala-3.7.4/logo-opt/main.js js/target/scala-3.7.4/logo-opt/main.js.map js/dist/",
     "prepublishOnly": "npm run build"
   },
   "keywords": [
@@ -32,7 +25,6 @@
     "turtle",
     "graphics",
     "education",
-    "react",
     "canvas"
   ],
   "author": "Edward A. Maxedon, Sr.",
@@ -44,17 +36,5 @@
   "bugs": {
     "url": "https://github.com/edadma/logo/issues"
   },
-  "homepage": "https://github.com/edadma/logo#readme",
-  "peerDependencies": {
-    "react": ">=17.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "typescript": "^5.0.0"
-  }
+  "homepage": "https://github.com/edadma/logo#readme"
 }

package/src/main/scala/io/github/edadma/logo/LogoJS.scala

@@ -57,6 +57,7 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
   private var autoRender: Boolean = true
   private var initialized: Boolean = false
   private var backgroundColor: String = "white"
+  private var foregroundColor: (Int, Int, Int) = (0, 0, 0) // RGB for theme-aware drawing
   private var eventHandler: Option[js.Function0[Unit]] = None
 
   private val logo = new Logo:
@@ -100,9 +101,10 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
     backgroundColor = color
     render()
 
-  /** Set the default pen color (used after clear) */
+  /** Set the default pen color (used after clear and for theme-aware drawing) */
   def setForegroundColor(color: String): Unit =
     val rgb = parseColor(color)
+    foregroundColor = rgb
     logo.setDefaultColor(rgb)
     render()
 
@@ -172,21 +174,33 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
     val lines = js.Array[LineData]()
     val labels = js.Array[LabelData]()
     val arcs = js.Array[ArcData]()
+    var currentColor: (Int, Int, Int) = foregroundColor
+    var currentWidth: Double = 1.0
 
     logo.drawing.foreach {
-      case DrawLine(x1, y1, x2, y2, (r, g, b), width) =>
+      case DrawSetColor(colorOpt) =>
+        currentColor = colorOpt.getOrElse(foregroundColor)
+
+      case DrawSetWidth(width) =>
+        currentWidth = width
+
+      case DrawLine(x1, y1, x2, y2) =>
+        val (r, g, b) = currentColor
         lines.push(js.Dynamic.literal(
           x1 = x1, y1 = y1, x2 = x2, y2 = y2,
-          color = s"rgb($r,$g,$b)", width = width
+          color = s"rgb($r,$g,$b)", width = currentWidth
         ).asInstanceOf[LineData])
+
       case DrawLabel(x, y, heading, text) =>
         labels.push(js.Dynamic.literal(
           x = x, y = y, heading = heading, text = text
         ).asInstanceOf[LabelData])
-      case DrawArc(x, y, heading, angle, radius, (r, g, b), width) =>
+
+      case DrawArc(x, y, heading, angle, radius) =>
+        val (r, g, b) = currentColor
         arcs.push(js.Dynamic.literal(
           x = x, y = y, heading = heading, angle = angle, radius = radius,
-          color = s"rgb($r,$g,$b)", width = width
+          color = s"rgb($r,$g,$b)", width = currentWidth
         ).asInstanceOf[ArcData])
     }
 
@@ -203,6 +217,8 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
   private def renderWithPaths(): Unit =
     case class Style(color: (Int, Int, Int), width: Double)
 
+    var currentColor: (Int, Int, Int) = foregroundColor
+    var currentWidth: Double = 1.0
     var currentStyle: Option[Style] = None
     var pathStarted = false
     var lastX: Double = 0
@@ -220,8 +236,14 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
         currentStyle = None
 
     logo.drawing.foreach {
-      case DrawLine(x1, y1, x2, y2, color, width) =>
-        val style = Style(color, width)
+      case DrawSetColor(colorOpt) =>
+        currentColor = colorOpt.getOrElse(foregroundColor)
+
+      case DrawSetWidth(width) =>
+        currentWidth = width
+
+      case DrawLine(x1, y1, x2, y2) =>
+        val style = Style(currentColor, currentWidth)
 
         if !currentStyle.contains(style) then
           flushPath()
@@ -243,9 +265,9 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
         lastX = x2
         lastY = y2
 
-      case DrawArc(x, y, heading, angleDeg, radius, color, width) =>
+      case DrawArc(x, y, heading, angleDeg, radius) =>
         flushPath()
-        renderArc(x, y, heading, angleDeg, radius, color, width)
+        renderArc(x, y, heading, angleDeg, radius, currentColor, currentWidth)
 
       case DrawLabel(x, y, heading, text) =>
         flushPath()
@@ -255,17 +277,27 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
     flushPath()
 
   private def renderWithLines(): Unit =
+    var currentColor: (Int, Int, Int) = foregroundColor
+    var currentWidth: Double = 1.0
+
     logo.drawing.foreach {
-      case DrawLine(x1, y1, x2, y2, (r, g, b), width) =>
+      case DrawSetColor(colorOpt) =>
+        currentColor = colorOpt.getOrElse(foregroundColor)
+
+      case DrawSetWidth(width) =>
+        currentWidth = width
+
+      case DrawLine(x1, y1, x2, y2) =>
+        val (r, g, b) = currentColor
         ctx.strokeStyle = s"rgb($r,$g,$b)"
-        ctx.lineWidth = width
+        ctx.lineWidth = currentWidth
         ctx.beginPath()
         ctx.moveTo(x1, y1)
         ctx.lineTo(x2, y2)
         ctx.stroke()
 
-      case DrawArc(x, y, heading, angleDeg, radius, (r, g, b), width) =>
-        renderArc(x, y, heading, angleDeg, radius, (r, g, b), width)
+      case DrawArc(x, y, heading, angleDeg, radius) =>
+        renderArc(x, y, heading, angleDeg, radius, currentColor, currentWidth)
 
       case DrawLabel(x, y, heading, text) =>
         renderLabel(x, y, heading, text)
@@ -312,22 +344,72 @@ class LogoJS(canvas: html.Canvas) extends js.Object:
     ctx.stroke()
 
   private def drawTurtle(x: Double, y: Double, heading: Double): Unit =
-    val w = 15.0
-    val h = 20.0
-
     ctx.save()
     ctx.translate(x, y)
-    ctx.rotate(heading - Pi / 2)
+    ctx.rotate(heading + Pi / 2)
 
+    // Tail (behind shell)
     ctx.beginPath()
-    ctx.moveTo(0, 0)
-    ctx.lineTo(-w / 2, h / 2)
-    ctx.lineTo(0, h)
-    ctx.lineTo(w / 2, h / 2)
-    ctx.closePath()
-
-    ctx.strokeStyle = "green"
+    ctx.moveTo(0, 10)
+    ctx.lineTo(0, 14)
+    ctx.strokeStyle = "#4a7a44"
     ctx.lineWidth = 2
+    ctx.lineCap = "round"
+    ctx.stroke()
+
+    // Legs (behind shell)
+    ctx.fillStyle = "#4a7a44"
+    ctx.strokeStyle = "#1a3a18"
+    ctx.lineWidth = 1
+    // Front legs
+    ctx.beginPath()
+    ctx.ellipse(-7, -6, 3, 5, 0.4, 0, 2 * Pi)
+    ctx.fill()
+    ctx.stroke()
+    ctx.beginPath()
+    ctx.ellipse(7, -6, 3, 5, -0.4, 0, 2 * Pi)
+    ctx.fill()
+    ctx.stroke()
+    // Back legs
+    ctx.beginPath()
+    ctx.ellipse(-6, 6, 3, 4, 0.3, 0, 2 * Pi)
+    ctx.fill()
+    ctx.stroke()
+    ctx.beginPath()
+    ctx.ellipse(6, 6, 3, 4, -0.3, 0, 2 * Pi)
+    ctx.fill()
+    ctx.stroke()
+
+    // Head (behind shell)
+    ctx.beginPath()
+    ctx.ellipse(0, -14, 4, 5, 0, 0, 2 * Pi)
+    ctx.fillStyle = "#4a7a44"
+    ctx.fill()
+    ctx.strokeStyle = "#1a3a18"
+    ctx.lineWidth = 1.5
+    ctx.stroke()
+
+    // Eyes
+    ctx.fillStyle = "black"
+    ctx.beginPath()
+    ctx.arc(-1.5, -15, 1, 0, 2 * Pi)
+    ctx.arc(1.5, -15, 1, 0, 2 * Pi)
+    ctx.fill()
+
+    // Shell (on top)
+    ctx.beginPath()
+    ctx.ellipse(0, 0, 8, 10, 0, 0, 2 * Pi)
+    ctx.fillStyle = "#2d5a27"
+    ctx.fill()
+    ctx.strokeStyle = "#1a3a18"
+    ctx.lineWidth = 1.5
+    ctx.stroke()
+
+    // Shell pattern
+    ctx.strokeStyle = "#3d7a37"
+    ctx.lineWidth = 1
+    ctx.beginPath()
+    ctx.ellipse(0, 0, 5, 6, 0, 0, 2 * Pi)
     ctx.stroke()
 
     ctx.restore()

package/dist/react/LogoCanvas.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
-export const LogoCanvas = forwardRef(({ width = 600, height = 400, program, pathRendering = true, onError, onComplete, className, style, }, ref) => {
-    const canvasRef = useRef(null);
-    const logoRef = useRef(null);
-    // Initialize Logo instance
-    useEffect(() => {
-        if (canvasRef.current && typeof Logo !== 'undefined') {
-            logoRef.current = new Logo(canvasRef.current);
-            logoRef.current.setPathRendering(pathRendering);
-        }
-    }, []);
-    // Update path rendering setting
-    useEffect(() => {
-        if (logoRef.current) {
-            logoRef.current.setPathRendering(pathRendering);
-        }
-    }, [pathRendering]);
-    // Run program when it changes
-    useEffect(() => {
-        if (logoRef.current && program !== undefined) {
-            try {
-                logoRef.current.clear();
-                logoRef.current.run(program);
-                onComplete?.();
-            }
-            catch (e) {
-                onError?.(e instanceof Error ? e : new Error(String(e)));
-            }
-        }
-    }, [program, onError, onComplete]);
-    // Expose methods via ref
-    useImperativeHandle(ref, () => ({
-        execute: (command) => {
-            if (logoRef.current) {
-                try {
-                    logoRef.current.execute(command);
-                }
-                catch (e) {
-                    onError?.(e instanceof Error ? e : new Error(String(e)));
-                }
-            }
-        },
-        run: (prog) => {
-            if (logoRef.current) {
-                try {
-                    logoRef.current.run(prog);
-                    onComplete?.();
-                }
-                catch (e) {
-                    onError?.(e instanceof Error ? e : new Error(String(e)));
-                }
-            }
-        },
-        clear: () => {
-            logoRef.current?.clear();
-        },
-        getDrawing: () => {
-            return logoRef.current?.getDrawing() ?? { lines: [], labels: [] };
-        },
-        getTurtle: () => {
-            return (logoRef.current?.getTurtle() ?? {
-                x: 0,
-                y: 0,
-                heading: Math.PI / 2,
-                visible: true,
-            });
-        },
-        getLogo: () => logoRef.current,
-    }));
-    return (_jsx("canvas", { ref: canvasRef, width: width, height: height, className: className, style: { backgroundColor: 'white', ...style } }));
-});
-LogoCanvas.displayName = 'LogoCanvas';
-export default LogoCanvas;

package/dist/react/index.js

@@ -1,2 +0,0 @@
-export { LogoCanvas } from './LogoCanvas';
-export { LogoCanvas as default } from './LogoCanvas';

package/react/LogoCanvas.tsx

@@ -1,174 +0,0 @@
-import React, { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';
-
-// Type definitions for the Logo class from Scala.js
-interface LogoDrawing {
-  lines: Array<{
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-    color: string;
-    width: number;
-  }>;
-  labels: Array<{
-    x: number;
-    y: number;
-    heading: number;
-    text: string;
-  }>;
-}
-
-interface TurtleState {
-  x: number;
-  y: number;
-  heading: number;
-  visible: boolean;
-}
-
-interface LogoInstance {
-  run(program: string): void;
-  execute(command: string): void;
-  clear(): void;
-  render(): void;
-  setPathRendering(enabled: boolean): void;
-  setAutoRender(enabled: boolean): void;
-  getDrawing(): LogoDrawing;
-  getTurtle(): TurtleState;
-}
-
-declare const Logo: new (canvas: HTMLCanvasElement) => LogoInstance;
-
-export interface LogoCanvasProps {
-  /** Width of the canvas in pixels */
-  width?: number;
-  /** Height of the canvas in pixels */
-  height?: number;
-  /** Logo program to run */
-  program?: string;
-  /** Whether to use path-based rendering (smoother curves) */
-  pathRendering?: boolean;
-  /** Callback when an error occurs */
-  onError?: (error: Error) => void;
-  /** Callback when program execution completes */
-  onComplete?: () => void;
-  /** Additional CSS class for the canvas */
-  className?: string;
-  /** Additional inline styles for the canvas */
-  style?: React.CSSProperties;
-}
-
-export interface LogoCanvasRef {
-  /** Execute a Logo command */
-  execute: (command: string) => void;
-  /** Run a full Logo program */
-  run: (program: string) => void;
-  /** Clear the canvas and reset turtle */
-  clear: () => void;
-  /** Get the current drawing data */
-  getDrawing: () => LogoDrawing;
-  /** Get the current turtle state */
-  getTurtle: () => TurtleState;
-  /** Get the underlying Logo instance */
-  getLogo: () => LogoInstance | null;
-}
-
-export const LogoCanvas = forwardRef<LogoCanvasRef, LogoCanvasProps>(
-  (
-    {
-      width = 600,
-      height = 400,
-      program,
-      pathRendering = true,
-      onError,
-      onComplete,
-      className,
-      style,
-    },
-    ref
-  ) => {
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    const logoRef = useRef<LogoInstance | null>(null);
-
-    // Initialize Logo instance
-    useEffect(() => {
-      if (canvasRef.current && typeof Logo !== 'undefined') {
-        logoRef.current = new Logo(canvasRef.current);
-        logoRef.current.setPathRendering(pathRendering);
-      }
-    }, []);
-
-    // Update path rendering setting
-    useEffect(() => {
-      if (logoRef.current) {
-        logoRef.current.setPathRendering(pathRendering);
-      }
-    }, [pathRendering]);
-
-    // Run program when it changes
-    useEffect(() => {
-      if (logoRef.current && program !== undefined) {
-        try {
-          logoRef.current.clear();
-          logoRef.current.run(program);
-          onComplete?.();
-        } catch (e) {
-          onError?.(e instanceof Error ? e : new Error(String(e)));
-        }
-      }
-    }, [program, onError, onComplete]);
-
-    // Expose methods via ref
-    useImperativeHandle(ref, () => ({
-      execute: (command: string) => {
-        if (logoRef.current) {
-          try {
-            logoRef.current.execute(command);
-          } catch (e) {
-            onError?.(e instanceof Error ? e : new Error(String(e)));
-          }
-        }
-      },
-      run: (prog: string) => {
-        if (logoRef.current) {
-          try {
-            logoRef.current.run(prog);
-            onComplete?.();
-          } catch (e) {
-            onError?.(e instanceof Error ? e : new Error(String(e)));
-          }
-        }
-      },
-      clear: () => {
-        logoRef.current?.clear();
-      },
-      getDrawing: () => {
-        return logoRef.current?.getDrawing() ?? { lines: [], labels: [] };
-      },
-      getTurtle: () => {
-        return (
-          logoRef.current?.getTurtle() ?? {
-            x: 0,
-            y: 0,
-            heading: Math.PI / 2,
-            visible: true,
-          }
-        );
-      },
-      getLogo: () => logoRef.current,
-    }));
-
-    return (
-      <canvas
-        ref={canvasRef}
-        width={width}
-        height={height}
-        className={className}
-        style={{ backgroundColor: 'white', ...style }}
-      />
-    );
-  }
-);
-
-LogoCanvas.displayName = 'LogoCanvas';
-
-export default LogoCanvas;

package/react/index.ts

@@ -1,2 +0,0 @@
-export { LogoCanvas, type LogoCanvasProps, type LogoCanvasRef } from './LogoCanvas';
-export { LogoCanvas as default } from './LogoCanvas';