spike(exam): tldraw 3.6.1 custom shape/tool proof (S4-9.spike)
Recovered from cc-worker WIP left uncommitted in the dev-centre clone (card t_fbe15cad, marked done but never committed/pushed). Adds ExamMarkerSpikePage + exam-marker-spike util/test proving custom box shape + tool + hit-testing on tldraw 3.6.1. Isolated on this branch (NOT master); reference for S4-9a. Includes incidental edits to S4-8 files made during the spike — review before reuse. Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
CC Worker
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
adc7a2a05b
commit
e5f073eb91
@@ -0,0 +1,91 @@
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
||||
import {
|
||||
Editor,
|
||||
createTLStore,
|
||||
createTLSchemaFromUtils,
|
||||
defaultBindingUtils,
|
||||
defaultShapeUtils,
|
||||
} from '@tldraw/tldraw'
|
||||
import {
|
||||
EXAM_MARKER_BOX_TYPE,
|
||||
ExamMarkerBoxShapeUtil,
|
||||
ExamMarkerBoxTool,
|
||||
activateExamMarkerTool,
|
||||
buildExamMarkerSvgDataUrl,
|
||||
getExamMarkerHitTestPoints,
|
||||
insertExamMarkerBox,
|
||||
} from './exam-marker-spike'
|
||||
|
||||
const spikeShapeUtils = [ExamMarkerBoxShapeUtil]
|
||||
const spikeSchema = createTLSchemaFromUtils({
|
||||
shapeUtils: [...defaultShapeUtils, ...spikeShapeUtils],
|
||||
bindingUtils: defaultBindingUtils,
|
||||
})
|
||||
|
||||
if (typeof globalThis.matchMedia !== 'function') {
|
||||
vi.stubGlobal('matchMedia', () => ({
|
||||
matches: false,
|
||||
media: '',
|
||||
onchange: null,
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
addListener: () => {},
|
||||
removeListener: () => {},
|
||||
dispatchEvent: () => false,
|
||||
} as unknown as MediaQueryList))
|
||||
}
|
||||
|
||||
function makeEditor() {
|
||||
const store = createTLStore({
|
||||
schema: spikeSchema,
|
||||
shapeUtils: spikeShapeUtils,
|
||||
bindingUtils: defaultBindingUtils,
|
||||
})
|
||||
;(store as unknown as { ensureStoreIsUsable(): void }).ensureStoreIsUsable()
|
||||
|
||||
return new Editor({
|
||||
shapeUtils: spikeShapeUtils,
|
||||
bindingUtils: defaultBindingUtils,
|
||||
tools: [ExamMarkerBoxTool],
|
||||
store,
|
||||
getContainer: () => document.body,
|
||||
})
|
||||
}
|
||||
|
||||
describe('exam-marker spike tldraw helpers', () => {
|
||||
let editor: Editor
|
||||
|
||||
beforeEach(() => {
|
||||
editor = makeEditor()
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
editor.dispose()
|
||||
})
|
||||
|
||||
it('creates a custom box shape and supports point hit-testing + page bounds', () => {
|
||||
const boxId = insertExamMarkerBox(editor)
|
||||
const box = editor.getShape(boxId)
|
||||
|
||||
expect(box?.type).toBe(EXAM_MARKER_BOX_TYPE)
|
||||
expect(editor.getShapePageBounds(boxId)).toBeTruthy()
|
||||
|
||||
const boxPoint = getExamMarkerHitTestPoints(editor, boxId)
|
||||
expect(boxPoint?.bounds).toBeTruthy()
|
||||
expect(editor.getShapesAtPoint(boxPoint!.center).some((shape) => shape.id === boxId)).toBe(true)
|
||||
|
||||
const viewport = editor.getViewportPageBounds()
|
||||
expect(viewport.w).toBeGreaterThan(0)
|
||||
expect(viewport.h).toBeGreaterThan(0)
|
||||
expect(() => editor.zoomToBounds(boxPoint!.bounds)).not.toThrow()
|
||||
})
|
||||
|
||||
it('registers the custom BaseBoxShapeTool and emits a locked svg asset URL', () => {
|
||||
expect(activateExamMarkerTool(editor)).toBe(EXAM_MARKER_BOX_TYPE)
|
||||
expect(editor.getCurrentToolId()).toBe(EXAM_MARKER_BOX_TYPE)
|
||||
|
||||
const svgUrl = buildExamMarkerSvgDataUrl()
|
||||
expect(svgUrl.startsWith('data:image/svg+xml;charset=utf-8,')).toBe(true)
|
||||
expect(decodeURIComponent(svgUrl.split(',')[1])).toContain('Exam scan')
|
||||
})
|
||||
})
|
||||
@@ -0,0 +1,197 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
BaseBoxShapeTool,
|
||||
BaseBoxShapeUtil,
|
||||
Editor,
|
||||
HTMLContainer,
|
||||
T,
|
||||
TLBaseBoxShape,
|
||||
TLShapeId,
|
||||
createShapeId,
|
||||
toDomPrecision,
|
||||
} from '@tldraw/tldraw'
|
||||
|
||||
export const EXAM_MARKER_BOX_TYPE = 'exam-marker-box' as const
|
||||
|
||||
export type ExamMarkerBoxShape = TLBaseBoxShape & {
|
||||
type: typeof EXAM_MARKER_BOX_TYPE
|
||||
}
|
||||
|
||||
export class ExamMarkerBoxShapeUtil extends BaseBoxShapeUtil<ExamMarkerBoxShape> {
|
||||
static override type = EXAM_MARKER_BOX_TYPE
|
||||
static override props = {
|
||||
w: T.number,
|
||||
h: T.number,
|
||||
}
|
||||
|
||||
override getDefaultProps(): ExamMarkerBoxShape['props'] {
|
||||
return {
|
||||
w: 320,
|
||||
h: 180,
|
||||
}
|
||||
}
|
||||
|
||||
override component(shape: ExamMarkerBoxShape) {
|
||||
return (
|
||||
<HTMLContainer
|
||||
id={shape.id}
|
||||
style={{
|
||||
width: toDomPrecision(shape.props.w),
|
||||
height: toDomPrecision(shape.props.h),
|
||||
border: '2px solid #b91c1c',
|
||||
borderRadius: 14,
|
||||
background: 'linear-gradient(180deg, rgba(255, 251, 235, 0.96), rgba(254, 242, 242, 0.96))',
|
||||
boxShadow: '0 12px 24px rgba(185, 28, 28, 0.18)',
|
||||
boxSizing: 'border-box',
|
||||
overflow: 'hidden',
|
||||
pointerEvents: 'all',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 8,
|
||||
padding: 12,
|
||||
fontFamily: 'Inter, system-ui, sans-serif',
|
||||
color: '#7f1d1d',
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.8 }}>
|
||||
Exam marker spike
|
||||
</div>
|
||||
<div style={{ fontSize: 14, lineHeight: 1.35 }}>
|
||||
This custom box shape uses the app's tldraw schema + BaseBoxShapeTool path.
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
marginTop: 'auto',
|
||||
padding: '6px 8px',
|
||||
borderRadius: 999,
|
||||
alignSelf: 'flex-start',
|
||||
background: 'rgba(185, 28, 28, 0.12)',
|
||||
fontSize: 12,
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Drag to resize · use the spike tool to create more
|
||||
</div>
|
||||
</div>
|
||||
</HTMLContainer>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export class ExamMarkerBoxTool extends BaseBoxShapeTool {
|
||||
static override id = EXAM_MARKER_BOX_TYPE
|
||||
static override initial = 'pointing'
|
||||
shapeType = EXAM_MARKER_BOX_TYPE
|
||||
}
|
||||
|
||||
export function buildExamMarkerSvgDataUrl(label = 'Exam scan') {
|
||||
const svg = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="720" viewBox="0 0 960 720">
|
||||
<defs>
|
||||
<linearGradient id="g" x1="0" x2="1" y1="0" y2="1">
|
||||
<stop offset="0%" stop-color="#ffffff"/>
|
||||
<stop offset="100%" stop-color="#f4f7fb"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="960" height="720" rx="32" fill="url(#g)" stroke="#cbd5e1" stroke-width="6"/>
|
||||
<rect x="72" y="56" width="816" height="88" rx="18" fill="#1f2937" opacity="0.92"/>
|
||||
<text x="116" y="108" fill="#fff" font-size="42" font-family="Inter, Arial, sans-serif" font-weight="700">${label}</text>
|
||||
<rect x="72" y="176" width="816" height="120" rx="16" fill="#eef2ff" stroke="#c7d2fe"/>
|
||||
<text x="106" y="224" fill="#1e3a8a" font-size="30" font-family="Inter, Arial, sans-serif" font-weight="700">Question 1</text>
|
||||
<text x="106" y="266" fill="#334155" font-size="24" font-family="Inter, Arial, sans-serif">Show your working and annotate the image.</text>
|
||||
<rect x="72" y="332" width="816" height="250" rx="16" fill="#fff7ed" stroke="#fed7aa"/>
|
||||
<text x="106" y="384" fill="#9a3412" font-size="30" font-family="Inter, Arial, sans-serif" font-weight="700">Answer space</text>
|
||||
<rect x="106" y="420" width="700" height="18" rx="9" fill="#fdba74" opacity="0.75"/>
|
||||
<rect x="106" y="470" width="640" height="18" rx="9" fill="#fdba74" opacity="0.55"/>
|
||||
<rect x="106" y="520" width="570" height="18" rx="9" fill="#fdba74" opacity="0.4"/>
|
||||
<text x="106" y="644" fill="#475569" font-size="20" font-family="Inter, Arial, sans-serif">Inserted as a built-in tldraw image shape.</text>
|
||||
</svg>
|
||||
`.trim()
|
||||
|
||||
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
|
||||
}
|
||||
|
||||
function getViewportAnchor(editor: Editor) {
|
||||
const bounds = editor.getViewportPageBounds()
|
||||
return {
|
||||
x: bounds.x + bounds.w / 2,
|
||||
y: bounds.y + bounds.h / 2,
|
||||
}
|
||||
}
|
||||
|
||||
export function insertExamMarkerImage(editor: Editor) {
|
||||
const anchor = getViewportAnchor(editor)
|
||||
const imageId = createShapeId()
|
||||
|
||||
editor.createShape({
|
||||
id: imageId,
|
||||
type: 'image',
|
||||
x: anchor.x - 320,
|
||||
y: anchor.y - 240,
|
||||
props: {
|
||||
url: buildExamMarkerSvgDataUrl(),
|
||||
w: 640,
|
||||
h: 480,
|
||||
name: 'exam-marker-sample.svg',
|
||||
},
|
||||
})
|
||||
|
||||
return imageId
|
||||
}
|
||||
|
||||
export function insertExamMarkerBox(editor: Editor) {
|
||||
const anchor = getViewportAnchor(editor)
|
||||
const boxId = createShapeId()
|
||||
|
||||
editor.createShape<ExamMarkerBoxShape>({
|
||||
id: boxId,
|
||||
type: EXAM_MARKER_BOX_TYPE,
|
||||
x: anchor.x + 180,
|
||||
y: anchor.y - 120,
|
||||
props: {
|
||||
w: 320,
|
||||
h: 180,
|
||||
},
|
||||
})
|
||||
|
||||
return boxId
|
||||
}
|
||||
|
||||
export function placeExamMarkerSpike(editor: Editor) {
|
||||
const imageId = insertExamMarkerImage(editor)
|
||||
const boxId = insertExamMarkerBox(editor)
|
||||
|
||||
const box = editor.getShape(boxId)
|
||||
if (box) {
|
||||
const bounds = editor.getShapePageBounds(box)
|
||||
if (bounds) editor.zoomToBounds(bounds)
|
||||
}
|
||||
|
||||
return { imageId, boxId }
|
||||
}
|
||||
|
||||
export function activateExamMarkerTool(editor: Editor) {
|
||||
editor.setCurrentTool(EXAM_MARKER_BOX_TYPE)
|
||||
return editor.getCurrentToolId()
|
||||
}
|
||||
|
||||
export function getExamMarkerHitTestPoints(editor: Editor, shapeId: TLShapeId) {
|
||||
const shape = editor.getShape(shapeId)
|
||||
if (!shape) return null
|
||||
|
||||
const bounds = editor.getShapePageBounds(shape)
|
||||
if (!bounds) return null
|
||||
|
||||
return {
|
||||
center: {
|
||||
x: bounds.x + bounds.w / 2,
|
||||
y: bounds.y + bounds.h / 2,
|
||||
},
|
||||
bounds,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user