Thai Street Designer

เว็บออกแบบแนวคิดทางแยกและวงเวียน สำหรับการจราจรชิดซ้าย

ทิศทางปัจจุบัน (13 ต.ค. 2569)

repository นี้เป็นฐานเดียวของผลิตภัณฑ์ โดยรวมแนวคิดจาก street-concept-designer และ road-concept-builder เข้ามาในรูปแบบสเปก ไม่ใช่โค้ด เป้าหมายคือ workspace เดียวแบบ road-first ที่วิศวกรใช้งานได้โดยไม่ต้องอ่านคู่มือ ระหว่างนี้งดเพิ่มฟีเจอร์ใหม่จนกว่า workspace ใหม่จะผ่านการยอมรับ

• เหตุผลการตัดสินใจ: ADR-0001
• แผนงาน: Consolidation Roadmap
• สเปก: UX Architecture · Golden Workflows · Selection & Snapping · Pavement Marking · Glossary · Standards
• สำหรับ coding agent: AGENTS.md

รายละเอียดการปรับปรุงก่อนหน้าและข้อจำกัด: Remediation report

สำหรับการรับช่วงพัฒนาต่อ ให้เริ่มจาก AGENTS.md และ Project Context แล้วอ่าน HANDOFF.md, Architecture, Slip Lane Design Basis และ Product v1 Release Audit ก่อนแก้โค้ด โดย repository/branch/commit/PR เป็น source of truth ไม่ใช่ความจำจากบทสนทนาเดิม

Product v1 workflow

หน้าหลักคือ หน้าออกแบบ (/ และ /design) แบบวาดถนนก่อน (road-first): ถนนเป็นเจ้าของแนวและหน้าตัด ทางแยกเกิดเองตรงที่ถนนตัดกัน

1. วาดถนน (ดูดเข้าปลายถนน/แนวถนน ล็อกมุม 15° พิมพ์ความยาว) และเลือกหน้าตัดสำเร็จรูปหรือพิมพ์ค่า
2. ทางแยกสร้างให้อัตโนมัติพร้อมแจ้งเตือน ย้อนกลับได้ หรือเปลี่ยนเป็นทางต่างระดับ
3. คลิกปากทางเพื่อเพิ่มเลนเลี้ยวขวา/ซ้ายหรือ Slip lane และลากจุดบนแบบปรับระยะเก็บรถและรัศมีมุม
4. “แก้ทางแยกขั้นสูง” เปิด /junction สำหรับ 3 มิติของทางแยก ทางข้าม สัญญาณไฟ วงเวียน ช่องเปิดเกาะกลาง ลูกศร และ Slip lane ขั้นสูง แล้วนำค่ากลับมาเป็นขั้นตอนเดียวที่ย้อนได้
5. สภาพเดิม / ทางเลือก A, B… เปรียบเทียบพร้อมไฮไลต์จุดที่ต่าง
6. มุมมอง 3 มิติ ภาพอ้างอิงพร้อมตั้งมาตราส่วน แผนที่พื้นหลัง หน้าตัดตามระยะทาง
7. ส่งออกรูป PNG/SVG สำหรับรายงาน และรายงานสรุปแบบ (HTML) · บันทึก/เปิดไฟล์โครงการ (เปิดไฟล์จากหน้า Network เดิมได้)

หน้า /network เดิมปลดแล้ว (URL พาไปหน้าออกแบบ) งานที่เคยบันทึกไว้ในเบราว์เซอร์นำเข้าเป็นทางเลือกเพิ่มได้ ส่วน /roads ยังเป็นห้องทดลองแนวถนน ไม่ใช่ส่วนหลักของผลิตภัณฑ์ ดูรายการความสามารถที่ย้ายหรือตัดออกใน docs/spec/RETIREMENT_PARITY.md

Product v1 ได้รับการยอมรับและ merge เข้า main ผ่าน PR #1 แล้วเมื่อ 2026-09-30 (merge commit 98198c443b4aee96fcb25c64d5c426aa03bb8d0b). รายละเอียด release gate และข้อจำกัดที่ตั้งใจไว้บันทึกใน docs/PRODUCT_V1_RELEASE_AUDIT.md

แก้ทางแยกขั้นสูง (/junction)

เลือกทางแยกหรือวงเวียน เปิด/ปิดขาถนนให้เหลือ 3 หรือ 4 ขา จากนั้นคลิกขาถนนบนแบบเพื่อแก้ไข

• ถนน: เปลี่ยนชื่อ มุม ความยาว เลน ทางเท้า Slip lane และแถบหน้าตัด
• เส้นจราจร: เกาะกลาง ทางม้าลาย สัญญาณไฟ เส้นหยุด และลูกศร
• ริมทาง: ต้นไม้และเสาไฟ ระยะห่าง ระยะเยื้อง และการสลับฝั่ง
• ลากจุดสีเขียวปลายขาที่เลือกเพื่อเปลี่ยนมุมและความยาว ใช้การจับมุม 1/5/15 องศา หรือล็อกความยาว
• ตัวเลขยืนยันเมื่อกด Enter หรือออกจากช่อง ลากพื้นที่ว่างเพื่อเลื่อนภาพ
• Undo ย้อนการลากทั้งครั้ง บันทึกอัตโนมัติบนเบราว์เซอร์เครื่องเดิม และบันทึก/เปิด JSON เพื่อย้ายเครื่อง
• 3D: ลากปุ่มซ้ายเพื่อเลื่อน ลากปุ่มกลางเพื่อหมุน เลื่อนล้อเพื่อซูม มีระดับทางเท้า เกาะกลาง ต้นไม้ และเสาไฟ
• การแสดงผล / ส่งออก: เปิดปิดชื่อถนน สเกล ลูกศร PNG โปร่งใส JPEG พื้นขาวไม่มีกริด SVG คงพื้นหลังแบบเดิม SVG เป็นผัง 2D; PNG/JPEG ส่งออกตามมุมมอง 2D หรือ 3D ที่เลือก

ขอบเขตรุ่นนี้

ขาถนนเป็นเส้นตรงแยกมุมได้ มีระยะห่างมุมขั้นต่ำ 40 องศาเพื่อกันแบบซ้อนกัน กรณีที่พื้นที่ไม่พอสำหรับโค้ง Slip lane หรือเส้นทึบ 30 เมตรจะคงแบบเดิมและแสดงเหตุผล

หน้าตัดใช้กติกาคงที่ ซ้าย = ขาเข้าแยก / กลาง = เกาะกลาง / ขวา = ขาออกแยก ไม่กลับด้านตามทิศภูมิศาสตร์ ผู้ใช้เลือกองค์ประกอบจากผังหรือหน้าตัดและแก้ความกว้างจากหน้าตัดได้โดยตรง เลนหลักของแต่ละทิศทางใช้ความกว้างร่วมกัน ส่วนเลนเสริม/เลนรับสามารถกำหนดความกว้างแยกได้ แถบเพิ่มเติม ได้แก่ ไหล่ทาง เลนจักรยาน เลนมอเตอร์ไซค์ และพื้นที่คั่น

3D เป็นแบบฉายขนานจากพิกัดสามมิติ ใช้ Canvas และผัง SVG ชุดเดียวกัน ถนนอยู่ระดับเดียว ยังไม่มีภูมิประเทศ ความลาดชัน สะพาน การจำลองรถ การคำนวณแสง หรือการส่งออกโมเดล 3D ต้นไม้/เสาไฟเป็นชุดอัตโนมัติ ยังไม่มีการย้ายวัตถุทีละชิ้น

แบบนี้สำหรับสื่อสารแนวคิด ยังไม่ใช่แบบรับรองมาตรฐานวิศวกรรม

Source

• core/junction/model.ts: ข้อมูลแบบหลัก, schema v6, validation ระดับข้อมูล และ migration JSON รุ่นเก่า
• core/junction/geometry.ts: base junction geometry เท่านั้น — ขอบถนน ทางเท้า ปากแยก median/pocket datums; ห้ามนำ Slip logic กลับเข้ามา
• core/junction/slip-model.ts: source of truth ของ Design.slips: SlipLane[] และ lifecycle เพิ่ม/ลบ/แก้ Slip
• core/junction/slip-geometry.ts: Slip overlay geometry, tangent/width transition, approach auxiliary, departure/acceleration, crossing และ validation เฉพาะ Slip
• core/junction/design-validation.ts: รวม base-junction validation กับ Slip-overlay validation
• app/junction/drawing.tsx: ผัง SVG; render base junction และ Slip overlay แยกกัน
• core/junction/selection.ts / object-layer.tsx: selection และ drag interaction ที่อ้าง geometry ชุดเดียวกับ renderer
• app/junction/section-view.tsx / scene3d.tsx: หน้าตัดและ 3D ที่ consume Slip overlay โดยไม่แก้ base road
• core/junction/objects.ts: ตำแหน่งต้นไม้/เสาไฟร่วม 2D/3D และหลบพื้นที่ Slip overlay
• app/junction/page.tsx: เครื่องมือ ประวัติการแก้ไข autosave และส่งออก
• app/roads/page.tsx: พื้นที่ทำงานวาดถนนอิสระ (Free Draw / Network)

Slip lane architecture (schema v6)

Slip lane เป็น design-level overlay ไม่ใช่ field ใน Arm และไม่ใช้ generic Pocket เป็น source of truth อีกต่อไป กฎเหล็กคือการเพิ่ม/ลบ/ปรับ Slip ต้องไม่เปลี่ยน edges(d) ของ base junction; regression test ตรวจ edges(withSlip) === edges(base) แบบโครงสร้างตรงกัน

Baseline Slip ไม่มีทางข้าม, auxiliary lane หรือ acceleration lane โดยอัตโนมัติ Treatment ต่าง ๆ ต้องเปิดอย่าง explicit ผ่าน SlipLane.approach, SlipLane.departure และ SlipLane.crossing. ดูรายละเอียดและข้อห้ามใน docs/ARCHITECTURE.md และหลักวิศวกรรมใน docs/SLIP_LANE_DESIGN_BASIS.md

Development

Node >= 22.13 และ pnpm ตาม packageManager ใน package.json

pnpm install --frozen-lockfile
pnpm dev
pnpm exec tsc --noEmit
pnpm test
pnpm lint
pnpm test:builds

การทดสอบ geometry สร้างภาพตรวจในโฟลเดอร์ชั่วคราวที่ไม่บันทึกลง Git

Validation

• TypeScript ผ่าน
• Geometry/render: ตั้งฉาก, 3 ขาทั้ง 4 แบบ, มุมเฉียงร่วมกับ Slip lane และถนนกว้างต่างกัน, Slip lane ทุกมุม, วงเวียนมุมเฉียง, แถบหน้าตัดและวัตถุริมทาง
• เส้นแบ่งเลนขาเข้าอ้างจากแนวควบคุม/เส้นหยุด ส่วนขาออกอ้างจาก datum ด้านออกของปากแยกหรือแนวสัมผัสทางออกวงเวียน และรองรับช่วงเส้นทึบแยกกันตามทิศทาง
• การย้ายข้อมูล JSON เดิม การปฏิเสธข้อมูลผิดและมุมแคบเกินไป
• Regression: median-first Auto allocation, explicit retained-median override, independent auxiliary widths, receiving-lane departure datum, lane-level selection/markings, fixed cross-section orientation, Free Draw shared allocation and schema migration
• Browser PNG/JPEG: ส่งออก 2400×2400 พิกเซล PNG มุมภาพ alpha 0; JPEG มุมภาพ RGB 255,255,255

ยังไม่ได้ทดสอบทุกขนาดหน้าจอหรือทุกชุดค่าทางเรขาคณิต

Audit fixes

• SVG masks now follow each arm's length and full width, including long roads and wide sections.
• Validation rejects intersecting road/sidewalk outlines and splitter-island polygons before accepting an edit or imported file. This is a geometric validity check, not engineering certification.
• Slip crossing controls and file validation use a shared supported limit; existing 125 m designs can be reopened.
• Rejected imports retain the existing design and display the actual reason.
• Failed autosave recovery pauses automatic writes and offers the original raw data for download, preserving it for recovery.
• Unchanged number fields and no-op edits do not consume undo history.
• Sidewalk widths remain constant along straight approaches, transitioning through the joining curve.
• The SVG median, crossing mask and raised 3D median now share one sampled quadratic polygon.
• Regression tests cover long-road raster markings, narrow roundabouts, 125 m JSON round trips, sidewalk dimensions and median geometry. Browser checks confirm import rejection, successful 125 m import and unchanged-field undo.

Touch, reset and image export

• รีเซ็ตเป็นสี่แยก restores the four-arm default design and camera. Undo restores the previous design.
• 2D: drag one finger to pan, drag the enlarged endpoint handle to edit the road, use two fingers to pan and pinch zoom. Adding a second finger while editing an endpoint cancels that unfinished edit and switches to camera gestures.
• 3D: choose Rotate or Pan for one-finger dragging; two fingers pan and pinch zoom. Zoom buttons and Fit View work without a mouse wheel.
• PNG / JPEG: preview before download; choose 1200, 2400 or 3600 pixels wide. 2D can export the whole design or the zoomed region. 3D exports the current camera framing and aspect ratio, without controls. PNG is transparent; JPEG is white without grid. SVG stays 2D vector output. Export size and 2D region preferences are remembered on the same browser.
• Copy: under Markings, choose section, markings, arrows or slip-lane properties and a destination arm or all active arms. Names, angles and lengths stay with their destination roads.
• Opposite-arm alignment: enabling the switch aligns the opposite indexed arm; later numeric angle edits and endpoint drags move the paired arm together.
• Keyboard: Ctrl/Cmd+Z undo, Ctrl/Cmd+Shift+Z redo, Ctrl/Cmd+S save JSON, except while typing in an input.

Browser verification covers reset/undo, 3D zoom buttons, opposite-arm alignment, copying markings and image preview/download. Pure pointer tests cover pinch ratio, anchoring, continuing with one finger and clearing cancelled pointers. Physical multi-touch devices have not yet been tested.

Per-side roadside and 3D furniture

• New page sessions open a four-way junction. เปิดแบบล่าสุด restores the previous autosaved design; starting a new edit resumes autosave. Invalid previous data is still protected.
• Roadside settings belong to each arm and its incoming/outgoing sidewalk. Choose one side or both, or apply the displayed values to the same sides of all enabled arms. Existing global-setting JSON files retain their old appearance until edited.
• Tree height/crown diameter, pole height/diameter/arm reach, spacing, start setback and curb-to-center offset are editable. New curb offsets default to 0.5 m. Object centers are clamped 0.35 m inside sidewalk edges; sidewalks narrower than 0.75 m omit objects.
• Streetlights have arms pointing toward the road and downward-facing luminaires. Traffic signals are raised cantilever models with horizontal red-yellow-green lenses facing incoming traffic; the flat 2D symbol is removed from the 3D texture. The model does not simulate illumination or signal cycles.
• Each arm can use dashed lane dividers or a configurable solid segment (default 30 m), followed by dashes. Incoming dividers begin from the incoming control datum; outgoing dividers begin from the departure-side road-mouth/tangency datum. Increase road length when needed to fit the selected segment and its dashed continuation.
• Verified model migration, independent side settings, 0.5 m curb positioning, inward arms on four road directions, signal meshes, configurable divider lengths and all previous geometry regressions. Browser checks cover independent offsets, solid/dashed changes, 3D furniture and PNG export preview/download.

Lane divider controls now select incoming, outgoing or both directions within the selected arm. Each direction retains its own mode and solid length; changing incoming values does not change outgoing values. Legacy files without outgoing overrides inherit their former shared settings. Markings-copy includes both directions, and road-length checks consider directions that actually contain lane dividers. Regression coverage includes independent modes, lengths, other-arm isolation, legacy imports and rendered SVG paths.

3D occlusion correction

Replaced average-depth face sorting with a cached BSP visibility tree. Surfaces crossing another surface's plane are split, then traversed back-to-front for the current orthographic camera. Long sidewalk faces therefore cannot incorrectly cover nearer trees, lamps or traffic signals. Canvas previews and PNG/JPEG exports share this ordering. No design-file changes are required.

Regression: node scripts/verify-junction.cjs then node scripts/verify-visibility.cjs. The latter compares painted visibility with independently calculated nearest-surface depths at 8,505 overlap probes across 36 yaw/pitch combinations, using four-arm sidewalks and furniture. Browser checks cover rotation and PNG preview.

Skew-junction approach datums

Each approach now measures setbacks from the farther of its own two curb tangencies instead of the largest junction-wide node extent. An acute corner only changes its two incident approaches. Median noses, crossings, stop/divider lines, arrows, section bands, selection extents, roadside placement and 3D furniture use that local datum consistently. The markings panel displays the selected approach datum; zero setback means its own mouth, not the intersection center. Roundabout datums are unchanged.

Tests cover the reported 315°/90°/180°/270° layout, unaffected west/south approaches, zero offsets, rotated designs, SVG placement, existing geometry cases and shared 3D visibility. Browser checks cover the skew layout, zero median/crosswalk offsets and disabling the crossing then setting the stop offset to zero.

3D mouse controls and image menu

• Left drag pans regardless of the touch-mode toggle. Middle drag orbits around the ground point under the initial click; dragging left increases yaw (scene turns right), and vertical drag tilts within 10–78 degrees. Right drag never moves the camera.
• Wheel zoom is anchored to the cursor and suppresses page scrolling. Mouse actions suppress middle-button auto-scroll. Pointer capture and cancellation clear unfinished gestures.
• Right-click opens the accessible image menu: transparent PNG, white JPEG, copy transparent PNG (2400 px wide), and reset view. Save opens the existing export preview. Copy starts the clipboard write during the user gesture and reports unsupported browsers or denied permission without claiming success.
• Touch retains one-finger pan/orbit selection (pan by default), with two-finger pan/pinch. Mouse button mapping is independent of the touch selector.
• Verified pure camera mapping, reversed yaw, fixed orbit pivot and cursor zoom anchor; browser checks cover left-drag pan, wheel zoom, context menu and export preview. The HTTP preview does not expose image clipboard APIs, so its unsupported-browser message was verified; successful clipboard image writing requires a supporting browser on HTTPS. Middle-button drag is covered by the camera tests; the browser automation supports only left-button dragging.

Directional sections and pocket lanes

Select an arm, open ถนน, then select ทิศทางหน้าตัด. Incoming and outgoing directions independently retain lane width, sidewalk width and ordered shoulder/bicycle/motorcycle/separator bands. Existing designs inherit their original shared dimensions until edited.

Each direction supports 0–3 additional lanes on either side: left is curb-side and right is median-side, relative to travel. Incoming additions are turning pockets; outgoing additions are receiving lanes. Incoming full-width/storage length is referenced from the incoming control datum. Outgoing receiving length is referenced from the actual departure-side road-mouth/tangency datum, followed by its merge taper.

Auto space allocation is feature-driven. A median-side auxiliary lane uses available median width first and widens outward only by the actual deficit. A curb-side auxiliary lane widens outward by default. Shoulder/buffer reallocation and retained-median constraints are explicit choices rather than hidden Auto rules. A narrow residual median produces feedback; it does not silently force widening. Schema-4 imports preserve their former visual result through explicit migrated allocation settings.

Main and auxiliary lanes have lane identity and editable arrow markings. Outgoing receiving lanes default to a semantic merge-to-main arrow that is mirrored from local lane geometry rather than geographic screen direction. These remain conceptual geometric lanes without vehicle routing, capacity simulation or standards certification.

Verification: node scripts/verify-junction.cjs followed by node scripts/verify-pockets.cjs. Tests cover independent dimensions, legacy defaults, JSON validation, insufficient length, both pocket sides, outgoing receiving lanes, skew approaches, slip lanes and roundabouts. Browser checks cover independent directional controls, six added lanes, and 2D/3D rendering.

Current verification commands

Release candidate ใช้ชุด gate เดียวกับ GitHub Quality workflow:

pnpm install --frozen-lockfile
pnpm test
pnpm exec tsc --noEmit
pnpm lint
pnpm test:builds
pnpm test:browser

pnpm test:browser ครอบคลุม Network create/edit/review/compare, Project File recovery, keyboard destructive safety, export/report, 2D/3D และ golden Junction cases.

Deployment

Vercel / Next.js only. See VERCEL.md. pnpm test:builds runs the production build and the TypeScript check.