v0.1.1 — bendable lines (midpoint anchor), fix ungrabbable bend handle on straight arrows

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: nmndwivedi

.claude/launch.json

@@ -4,26 +4,50 @@
     {
       "name": "react-demo",
       "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev", "--workspace=quickdraw-react-demo", "--", "--port", "5199", "--strictPort"],
-      "port": 5199
+      "runtimeArgs": [
+        "run",
+        "dev",
+        "--workspace=quickdraw-react-demo"
+      ],
+      "port": 5199,
+      "autoPort": true
     },
     {
       "name": "website",
       "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev", "--workspace=quickdraw-website", "--", "--port", "4399"],
+      "runtimeArgs": [
+        "run",
+        "dev",
+        "--workspace=quickdraw-website",
+        "--",
+        "--port",
+        "4399"
+      ],
       "port": 4399
     },
     {
       "name": "app",
       "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev", "--workspace=quickdraw-app", "--", "--port", "5299", "--strictPort"],
+      "runtimeArgs": [
+        "run",
+        "dev",
+        "--workspace=quickdraw-app",
+        "--",
+        "--port",
+        "5299",
+        "--strictPort"
+      ],
       "port": 5299
     },
     {
       "name": "docs",
       "runtimeExecutable": "npm",
-      "runtimeArgs": ["run", "dev", "--workspace=quickdraw-docs"],
+      "runtimeArgs": [
+        "run",
+        "dev",
+        "--workspace=quickdraw-docs"
+      ],
       "port": 4499
     }
   ]
-}
+}

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to the `@quickdrawjs/*` packages are documented here.
 The project follows [semver](https://semver.org); the three packages are
 versioned in lockstep.
 
+## 0.1.1 — 2026-08-01
+
+- Lines are now bendable: drag the new midpoint anchor to curve a line,
+  exactly like arrows. Lines and arrows both show three anchors
+  (start, midpoint, end).
+- Fixed: straight arrows could not be bent — the midpoint anchor
+  collapsed onto the end anchor when `bend` was 0, making it ungrabbable.
+
 ## 0.1.0 — 2026-08-01
 
 First public release.

apps/app/package.json

@@ -2,15 +2,15 @@
   "name": "quickdraw-app",
   "private": true,
   "version": "0.0.0",
-  "description": "app.tryquickdraw.com — the hosted Quickdraw whiteboard.",
+  "description": "app.tryquickdraw.com \u2014 the hosted Quickdraw whiteboard.",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "@quickdrawjs/core": "0.1.0"
+    "@quickdrawjs/core": "0.1.1"
   },
   "devDependencies": {
     "vite": "^6.3.0"

apps/website/package.json

@@ -2,7 +2,7 @@
   "name": "quickdraw-website",
   "private": true,
   "version": "0.0.0",
-  "description": "tryquickdraw.com — the Quickdraw marketing site and blog.",
+  "description": "tryquickdraw.com \u2014 the Quickdraw marketing site and blog.",
   "type": "module",
   "scripts": {
     "dev": "astro dev",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@astrojs/sitemap": "^3.3.0",
-    "@quickdrawjs/core": "0.1.0",
+    "@quickdrawjs/core": "0.1.1",
     "astro": "^5.7.0"
   }
 }

examples/react-demo/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@quickdrawjs/react": "0.1.0",
+    "@quickdrawjs/react": "0.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

examples/react-demo/vite.config.mjs

@@ -3,4 +3,5 @@ import react from '@vitejs/plugin-react'
 
 export default defineConfig({
   plugins: [react()],
+  server: process.env.PORT ? { port: Number(process.env.PORT), strictPort: true } : {},
 })

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@quickdrawjs/core",
-  "version": "0.1.0",
-  "description": "Framework-free infinite-canvas whiteboard engine — the heart of Quickdraw, the MIT-licensed drawing SDK.",
+  "version": "0.1.1",
+  "description": "Framework-free infinite-canvas whiteboard engine \u2014 the heart of Quickdraw, the MIT-licensed drawing SDK.",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",

packages/core/package.json

@@ -22,6 +22,15 @@ const DEFAULT_STYLES = { color: 'black', size: 'm', dash: 'draw', fill: 'none',
 
 export const TOOLS = ['select', 'hand', 'draw', 'highlight', 'eraser', 'laser', 'arrow', 'line', 'geo', 'text', 'note']
 
+// local position of the bend handle: the curve's midpoint (chord midpoint
+// when straight — sampleLinePts collapses to the two endpoints at bend 0)
+const bendMidpoint = (pr) => {
+  if (!pr.bend) return { x: pr.dx / 2, y: pr.dy / 2 }
+  const mid = sampleLinePts(pr, pr.bend)
+  const mi = Math.floor(mid.length / 4) * 2
+  return { x: mid[mi], y: mid[mi + 1] }
+}
+
 export class Editor {
   constructor({ container, store, theme = 'light', grid = 'none', readonly = false, camera, styles, geoKind } = {}) {
     this.container = container
@@ -772,7 +781,7 @@ export class Editor {
     this.store.put({
       id, typeName: 'shape', type, x: p.x, y: p.y, rot: 0, z: this.store.maxZ() + 1,
       props: {
-        dx: 0.01, dy: 0.01, ...(type === 'arrow' ? { bend: 0 } : {}),
+        dx: 0.01, dy: 0.01, bend: 0,
         color: this.styles.color, size: this.styles.size,
         dash: this.styles.dash === 'draw' ? 'solid' : this.styles.dash,
       },
@@ -1146,11 +1155,8 @@ export class Editor {
         { which: 'start', x: one.x, y: one.y },
         { which: 'end', x: one.x + pr.dx, y: one.y + pr.dy },
       ]
-      if (one.type === 'arrow') {
-        const mid = sampleLinePts(pr, pr.bend || 0)
-        const mi = Math.floor(mid.length / 4) * 2
-        pts.push({ which: 'bend', x: one.x + mid[mi], y: one.y + mid[mi + 1] })
-      }
+      const bm = bendMidpoint(pr)
+      pts.push({ which: 'bend', x: one.x + bm.x, y: one.y + bm.y })
       for (const h of pts) {
         const s = this.pageToScreen(h.x, h.y)
         if (Math.hypot(s.x - sx, s.y - sy) <= HANDLE + 3) return { kind: 'handle', which: h.which, id: one.id }
@@ -1601,11 +1607,8 @@ export class Editor {
           this.pageToScreen(one.x, one.y),
           this.pageToScreen(one.x + pr.dx, one.y + pr.dy),
         ]
-        if (one.type === 'arrow') {
-          const mid = sampleLinePts(pr, pr.bend || 0)
-          const mi = Math.floor(mid.length / 4) * 2
-          hs.push(this.pageToScreen(one.x + mid[mi], one.y + mid[mi + 1]))
-        }
+        const bm = bendMidpoint(pr)
+        hs.push(this.pageToScreen(one.x + bm.x, one.y + bm.y))
         for (const p2 of hs) {
           ctx.beginPath()
           ctx.arc(p2.x, p2.y, 5, 0, Math.PI * 2)

packages/core/src/editor.js

@@ -35,7 +35,7 @@ export function localBounds(shape) {
     }
     case 'arrow':
     case 'line': {
-      const bend = shape.type === 'arrow' ? p.bend || 0 : 0
+      const bend = p.bend || 0
       const x = Math.min(0, p.dx) - Math.abs(bend)
       const y = Math.min(0, p.dy) - Math.abs(bend)
       return { x, y, w: Math.abs(p.dx) + Math.abs(bend) * 2, h: Math.abs(p.dy) + Math.abs(bend) * 2 }
@@ -378,7 +378,7 @@ export function drawShape(ctx, shape, opts) {
       const w = SIZES[p.size]
       ctx.strokeStyle = col.stroke
       strokeStyled(ctx, p.dash, w)
-      const bend = shape.type === 'arrow' ? p.bend || 0 : 0
+      const bend = p.bend || 0
       const len = Math.hypot(p.dx, p.dy) || 1
       const nx = -p.dy / len, ny = p.dx / len
       const cx2 = p.dx / 2 + nx * bend * 2 // control point: bend*2 puts the CURVE at bend offset
@@ -499,8 +499,7 @@ export function hitShape(shape, px, py, tol, store) {
     }
     case 'arrow':
     case 'line': {
-      const bend = shape.type === 'arrow' ? p.bend || 0 : 0
-      const pts = sampleLinePts(p, bend)
+      const pts = sampleLinePts(p, p.bend || 0)
       return distToPolyline(l.x, l.y, pts, 2) <= tol + SIZES[p.size]
     }
     case 'text':
@@ -549,7 +548,7 @@ export function marqueeHits(shape, rect) {
   const local = { x: rect.x - shape.x, y: rect.y - shape.y, w: rect.w, h: rect.h }
   let pts, stride = 2
   if (shape.type === 'draw' || shape.type === 'highlight') { pts = p.pts; stride = 3 }
-  else if (shape.type === 'arrow' || shape.type === 'line') pts = sampleLinePts(p, shape.type === 'arrow' ? p.bend || 0 : 0)
+  else if (shape.type === 'arrow' || shape.type === 'line') pts = sampleLinePts(p, p.bend || 0)
   else if (shape.type === 'geo') { pts = geoPolygon(p.geo, p.w, p.h); if (pointInPolygon(local.x + local.w / 2, local.y + local.h / 2, pts)) return true }
   if (!pts) return true
   const n = Math.floor(pts.length / stride)