diff --git a/index.html b/index.html index 57f528f..982af9c 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@ Craftbase - minimal whiteboard for builders diff --git a/src/App.css b/src/App.css index 2909780..7a8a9b2 100644 --- a/src/App.css +++ b/src/App.css @@ -1,8 +1,9 @@ :root { --font-ui: 'Geist', system-ui, sans-serif; --font-display: 'Fraunces', Georgia, serif; - --font-sketch: 'Caveat', cursive; + --font-sketch: 'Caveat Brush'; --font-mono: 'Geist Mono', monospace; + --font-caveat-brush: 'Caveat Brush', cursive; --color-canvas: #f5f0e8; --color-sidebar: #ede8dc; @@ -18,6 +19,12 @@ --color-border-card: #c4b89a; } +.caveat-brush-regular { + font-family: 'Caveat Brush', cursive; + font-weight: 400; + font-style: normal; +} + body { margin: 0; font-family: var(--font-ui); diff --git a/src/components/canvasContextMenu.tsx b/src/components/canvasContextMenu.tsx new file mode 100644 index 0000000..905a0ec --- /dev/null +++ b/src/components/canvasContextMenu.tsx @@ -0,0 +1,107 @@ +import { useEffect, useRef, useState } from 'react' +import type { ReactElement } from 'react' + +import Portal from './common/portal' + +interface CanvasContextMenuProps { + x: number + y: number + onClose: () => void + onExportSvg: () => void +} + +const MENU_WIDTH = 220 +const MENU_MARGIN = 8 + +/** + * Small fixed-position menu opened on canvas right-click / two-finger tap. + * Closes on outside click or Escape. Positioned at the cursor and clamped to + * the viewport so it never overflows off-screen. + */ +const CanvasContextMenu = ({ + x, + y, + onClose, + onExportSvg, +}: CanvasContextMenuProps): ReactElement => { + const refNode = useRef(null) + const [height, setHeight] = useState(0) + + useEffect(() => { + if (refNode.current) setHeight(refNode.current.offsetHeight) + }, []) + + useEffect(() => { + const handleClick = (e: MouseEvent): void => { + if (refNode.current?.contains(e.target as Node)) return + onClose() + } + const handleKey = (e: KeyboardEvent): void => { + if (e.key === 'Escape') onClose() + } + document.addEventListener('mousedown', handleClick, false) + document.addEventListener('keydown', handleKey, false) + return (): void => { + document.removeEventListener('mousedown', handleClick, false) + document.removeEventListener('keydown', handleKey, false) + } + }, [onClose]) + + const left = Math.min(x, window.innerWidth - MENU_WIDTH - MENU_MARGIN) + const top = Math.min( + y, + window.innerHeight - (height || 60) - MENU_MARGIN + ) + + return ( + +
+ +
+ + ) +} + +export default CanvasContextMenu diff --git a/src/components/elements/circle.tsx b/src/components/elements/circle.tsx index ede7799..aaa8d27 100644 --- a/src/components/elements/circle.tsx +++ b/src/components/elements/circle.tsx @@ -34,10 +34,11 @@ function Circle(props: ElementProps): ReactElement { }) const { group, circle } = elementFactory.createElement() group.elementData = { ...props.itemData, ...props } - circle.opacity = props.metadata?.opacity ?? 1 + const opacityValue = props.metadata?.opacity ?? 1 if (props.parentGroup) { const parentGroup = props.parentGroup + circle.opacity = opacityValue circle.translation.x = props.properties.x circle.translation.y = props.properties.y parentGroup.add(circle) @@ -57,6 +58,10 @@ function Circle(props: ElementProps): ReactElement { meta ) + // Group-level opacity so shape + embedded text dim uniformly and + // actually repaint (see rectangle.tsx for the unshift rationale). + group.opacity = opacityValue + two.update() const groupEl = document.getElementById(group.id) diff --git a/src/components/elements/diamond.tsx b/src/components/elements/diamond.tsx index d72dead..0a5529a 100644 --- a/src/components/elements/diamond.tsx +++ b/src/components/elements/diamond.tsx @@ -29,10 +29,11 @@ function Diamond(props: ElementProps): ReactElement { }) const { group, diamond } = elementFactory.createElement() group.elementData = { ...props.itemData, ...props } - diamond.opacity = props.metadata?.opacity ?? 1 + const opacityValue = props.metadata?.opacity ?? 1 if (props.parentGroup) { const parentGroup = props.parentGroup + diamond.opacity = opacityValue parentGroup.add(diamond) two.update() } else { @@ -50,6 +51,10 @@ function Diamond(props: ElementProps): ReactElement { meta ) + // Group-level opacity so shape + embedded text dim uniformly and + // actually repaint (see rectangle.tsx for the unshift rationale). + group.opacity = opacityValue + two.update() const groupEl = document.getElementById(group.id) diff --git a/src/components/elements/geoText.tsx b/src/components/elements/geoText.tsx index a629f60..d72d64a 100644 --- a/src/components/elements/geoText.tsx +++ b/src/components/elements/geoText.tsx @@ -14,7 +14,10 @@ import { import { lineHeightFor } from '../../utils/textLayout' import { useMediaQueryUtils } from '../../constants/exportHooks' import { computeCounterScale } from '../../utils/counterScale' -import { DEFAULT_GEO_RESIST } from '../../constants/misc' +import { + DEFAULT_GEO_RESIST, + DEFAULT_TEXT_FONT_FAMILY, +} from '../../constants/misc' // GeoText is a clone of NewText (it reuses the same NewTextFactory for // rendering) with one extra behavior: like a point pin, the whole group is @@ -367,7 +370,7 @@ function GeoText(props: ElementProps): ReactElement { input.style.padding = `${vertPad}px 8px` input.style.color = twoText.fill || '#3A342C' input.style.fontSize = `${cssFontSize}px` - input.style.fontFamily = twoText.family || 'Caveat' + input.style.fontFamily = twoText.family || DEFAULT_TEXT_FONT_FAMILY input.style.fontWeight = twoText.weight || 'normal' input.style.lineHeight = `${lineH}px` input.style.letterSpacing = '0px' @@ -390,7 +393,8 @@ function GeoText(props: ElementProps): ReactElement { measureSpan.style.visibility = 'hidden' measureSpan.style.whiteSpace = 'pre' measureSpan.style.fontSize = `${cssFontSize}px` - measureSpan.style.fontFamily = twoText.family || 'Caveat' + measureSpan.style.fontFamily = + twoText.family || DEFAULT_TEXT_FONT_FAMILY measureSpan.style.fontWeight = twoText.weight || 'normal' measureSpan.style.lineHeight = `${lineH}px` measureSpan.style.letterSpacing = '0px' diff --git a/src/components/elements/groupobject.tsx b/src/components/elements/groupobject.tsx index 2095078..e216764 100644 --- a/src/components/elements/groupobject.tsx +++ b/src/components/elements/groupobject.tsx @@ -8,6 +8,7 @@ import Two from 'two.js' import { useBoardContext } from '../../views/Board/boardContext' import getEditComponents from '../utils/editWrapper' import { elementOnBlurHandler } from '../../utils/misc' +import { DEFAULT_TEXT_FONT_FAMILY } from '../../constants/misc' // eslint-disable-next-line @typescript-eslint/no-explicit-any type ElementProps = any @@ -61,7 +62,15 @@ function GroupedObjectWrapper(props: ElementProps): ReactElement { if (!element.elementData) return if (childrenIdsOfTheGroup.includes(element.elementData.id)) { foundOriginalCount++ - element.opacity = 1 + // Restore the element's own (group-level) opacity rather than + // forcing 1 — it was hidden at 0 while the group was selected, + // and per-element opacity now lives on the group. metadata may + // be a pencil vertex array, so guard the `.opacity` read. + const elMeta = element.elementData.metadata + element.opacity = + elMeta && !Array.isArray(elMeta) + ? (elMeta.opacity ?? 1) + : 1 if (!groupMoved) { return @@ -369,7 +378,9 @@ function GroupedObjectWrapper(props: ElementProps): ReactElement { twoText.alignment = 'center' twoText.baseline = meta.textBaseLine || 'middle' twoText.family = - meta.textFontFamily || meta.textFamily || 'Caveat' + meta.textFontFamily || + meta.textFamily || + DEFAULT_TEXT_FONT_FAMILY coreObject.add(twoText) } diff --git a/src/components/elements/newText.tsx b/src/components/elements/newText.tsx index 3505396..a7e3a91 100644 --- a/src/components/elements/newText.tsx +++ b/src/components/elements/newText.tsx @@ -12,6 +12,8 @@ import { MOBILE_TEXT_SIZES_OBJECT, } from '../../utils/constants' import { lineHeightFor } from '../../utils/textLayout' +import { htmlToBulletText } from '../../utils/htmlToBulletText' +import { DEFAULT_TEXT_FONT_FAMILY } from '../../constants/misc' import { useMediaQueryUtils } from '../../constants/exportHooks' // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -337,7 +339,7 @@ function NewText(props: ElementProps): ReactElement { input.style.padding = `${vertPad}px 8px` input.style.color = twoText.fill || '#3A342C' input.style.fontSize = `${cssFontSize}px` - input.style.fontFamily = twoText.family || 'Caveat' + input.style.fontFamily = twoText.family || DEFAULT_TEXT_FONT_FAMILY input.style.fontWeight = twoText.weight || 'normal' input.style.lineHeight = `${lineH}px` input.style.letterSpacing = '0px' @@ -360,7 +362,8 @@ function NewText(props: ElementProps): ReactElement { measureSpan.style.visibility = 'hidden' measureSpan.style.whiteSpace = 'pre' measureSpan.style.fontSize = `${cssFontSize}px` - measureSpan.style.fontFamily = twoText.family || 'Caveat' + measureSpan.style.fontFamily = + twoText.family || DEFAULT_TEXT_FONT_FAMILY measureSpan.style.fontWeight = twoText.weight || 'normal' measureSpan.style.lineHeight = `${lineH}px` measureSpan.style.letterSpacing = '0px' @@ -395,6 +398,30 @@ function NewText(props: ElementProps): ReactElement { input.addEventListener('input', autoSizeAndCenter) + // Pasting a bulleted list from a rich-text source (Docs, Notion, + // Notes) into this plain textarea would otherwise drop the bullet + // markers — the source's `text/plain` projection omits them. Read + // the `text/html` flavor and rebuild `• `-prefixed lines so list + // structure survives the paste. + input.addEventListener('paste', (event: ClipboardEvent) => { + const html = event.clipboardData?.getData('text/html') + if (!html) return + const converted = htmlToBulletText(html) + if (converted == null) return + + event.preventDefault() + const start = input.selectionStart ?? input.value.length + const end = input.selectionEnd ?? input.value.length + input.value = + input.value.slice(0, start) + + converted + + input.value.slice(end) + const caret = start + converted.length + input.selectionStart = caret + input.selectionEnd = caret + autoSizeAndCenter() + }) + input.onfocus = function (): void { const bRect = blockRect() selectorInstance.update( diff --git a/src/components/elements/rectangle.tsx b/src/components/elements/rectangle.tsx index 5fa5a88..d147005 100644 --- a/src/components/elements/rectangle.tsx +++ b/src/components/elements/rectangle.tsx @@ -29,10 +29,11 @@ function Rectangle(props: ElementProps): ReactElement { }) const { group, rectangle } = elementFactory.createElement() group.elementData = { ...props.itemData, ...props } - rectangle.opacity = props.metadata?.opacity ?? 1 + const opacityValue = props.metadata?.opacity ?? 1 if (props.parentGroup) { const parentGroup = props.parentGroup + rectangle.opacity = opacityValue parentGroup.add(rectangle) two.update() } else { @@ -50,6 +51,12 @@ function Rectangle(props: ElementProps): ReactElement { meta ) + // Apply opacity at the group level so the shape and any embedded + // text dim uniformly, and so it actually repaints (the rounded-rect + // path is double-referenced in group.children via the unshift above, + // which leaves leaf-level opacity flags unprocessed on render). + group.opacity = opacityValue + two.update() const groupEl = document.getElementById(group.id) diff --git a/src/components/sidebar/elementProperties.tsx b/src/components/sidebar/elementProperties.tsx index 4497456..cb03252 100644 --- a/src/components/sidebar/elementProperties.tsx +++ b/src/components/sidebar/elementProperties.tsx @@ -377,6 +377,7 @@ const FontFamilyRow = ({ const families = [ { label: 'Caveat', family: 'Caveat' }, { label: 'Geist', family: 'Geist' }, + { label: 'Caveat Brush', family: 'Caveat Brush' }, ] return (
@@ -516,7 +517,7 @@ const ElementPropertiesToolbar = () => { const sections = SETS[setKey as keyof typeof SETS] // eslint-disable-next-line @typescript-eslint/no-explicit-any const handle = - (key: string) => + (key: string, opts?: { preview?: boolean }) => (val: any): void => { // eslint-disable-next-line @typescript-eslint/no-explicit-any setValues((prev: any) => ({ ...prev, [key]: val })) @@ -533,13 +534,13 @@ const ElementPropertiesToolbar = () => { ? entry.mobileValue : entry.value : val - applyGroupProperty?.(key, numeric) + applyGroupProperty?.(key, numeric, opts) } else { - applyGroupProperty?.(key, val) + applyGroupProperty?.(key, val, opts) } return } - applyProperty?.(key, val) + applyProperty?.(key, val, opts) } return ( @@ -652,11 +653,10 @@ const ElementPropertiesToolbar = () => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - setValues((prev: any) => ({ - ...prev, - opacity: arr[0], - })) + // Live preview while dragging: applies to the scene + // only (no store/history write) so the element fades + // in real time. The release (handleOnChange) commits. + handle('opacity', { preview: true })(arr[0]) } handleOnChange={(arr) => handle('opacity')(arr[0])} /> diff --git a/src/components/sidebar/primary.tsx b/src/components/sidebar/primary.tsx index b0f4162..85c38b6 100644 --- a/src/components/sidebar/primary.tsx +++ b/src/components/sidebar/primary.tsx @@ -59,7 +59,6 @@ const PrimarySidebar = (): ReactElement => { defaultStrokeType, defaultFill, defaultStrokeColor, - defaultOpacity, defaultTextFontFamily, } = useBoardContext() const [hintText, setHintText] = useState( @@ -128,7 +127,7 @@ const PrimarySidebar = (): ReactElement => { createdAt: null, metadata: { ...((item.metadata as Record) ?? {}), - opacity: defaultOpacity ?? 1, + opacity: 1, ...(defaultTextFontFamily && { textFontFamily: defaultTextFontFamily, }), @@ -167,7 +166,7 @@ const PrimarySidebar = (): ReactElement => { isDummy: null, createdAt: null, metadata: { - opacity: defaultOpacity ?? 1, + opacity: 1, ...(defaultTextFontFamily && { textFontFamily: defaultTextFontFamily, }), @@ -406,7 +405,7 @@ const PrimarySidebar = (): ReactElement => { string, unknown >) ?? {}), - opacity: defaultOpacity ?? 1, + opacity: 1, ...(defaultTextFontFamily && { textFontFamily: defaultTextFontFamily, }), @@ -456,7 +455,7 @@ const PrimarySidebar = (): ReactElement => { isDummy: null, createdAt: null, metadata: { - opacity: defaultOpacity ?? 1, + opacity: 1, ...(defaultTextFontFamily && { textFontFamily: defaultTextFontFamily, }), diff --git a/src/components/utils/colorPicker.tsx b/src/components/utils/colorPicker.tsx index 06fa0f6..472d4ac 100644 --- a/src/components/utils/colorPicker.tsx +++ b/src/components/utils/colorPicker.tsx @@ -135,7 +135,7 @@ const ColorPicker = ({
{title && ( - + {title} )} diff --git a/src/constants/misc.ts b/src/constants/misc.ts index 27f0546..5f12ea1 100644 --- a/src/constants/misc.ts +++ b/src/constants/misc.ts @@ -1,5 +1,13 @@ export const offsetHeight = 0 export const GROUP_COMPONENT = 'groupobject' + +// Default canvas text font (single source of truth). Kept in sync with the +// `--font-sketch` / `--font-caveat-brush` vars in App.css, the Tailwind +// `sketch` token, and the Google Fonts in index.html. Every canvas-text +// fallback (`family || DEFAULT_TEXT_FONT_FAMILY`) references this so the default +// lives in exactly one place. Only the Regular 400 weight is loaded/used. +export const DEFAULT_TEXT_FONT_FAMILY = 'Caveat Brush' + export const RUBBER_MODE_KEY = 'rubberMode' export const VIEWPORT_KEY_PREFIX = 'craftbase_viewport_' export const MOBILE_VIEWPORT_KEY_PREFIX = 'craftbase_mobile_viewport_' diff --git a/src/factory/newText.ts b/src/factory/newText.ts index 4e23566..58fba0a 100644 --- a/src/factory/newText.ts +++ b/src/factory/newText.ts @@ -1,4 +1,5 @@ import Main from './main' +import { DEFAULT_TEXT_FONT_FAMILY } from '../constants/misc' export interface NewTextMetadata { content?: string @@ -23,7 +24,7 @@ export default class NewTextFactory extends Main { const { content = '', fontSize = 36, - textFontFamily = 'Caveat', + textFontFamily = DEFAULT_TEXT_FONT_FAMILY, } = this.properties?.metadata ?? {} // Use native Two.js text instead of a foreignObject wrapper diff --git a/src/hooks/useComponentHistory.ts b/src/hooks/useComponentHistory.ts index 20724f0..ad315f9 100644 --- a/src/hooks/useComponentHistory.ts +++ b/src/hooks/useComponentHistory.ts @@ -174,9 +174,18 @@ function applyPropertyToTwoJSGroup( Object.entries(value as Record).forEach( ([k, v]) => { if (k === 'opacity') { - // Opacity lives on the leaf shape (children[0]) by - // codebase convention; matches applyGroupProperty. - shape.opacity = v + // Opacity is applied at the GROUP level (see + // applyProperty and the *-with-text components) so + // the shape + text dim uniformly and repaint + // reliably. Reset the leaf/text so they don't + // compound with the group's opacity. + group.opacity = v + shape.opacity = 1 + if (textNodes.length > 0) { + textNodes.forEach( + (n: ShapeLike) => (n.opacity = 1) + ) + } } else if ( k === 'textFontSize' || k === 'fontSize' @@ -760,6 +769,18 @@ export function useComponentHistory({ // Only UPDATE_VERTICES and UPDATE_BULK need extra capture — for // ADD/DELETE/BATCH the original entry already contains everything redo needs. const captureNextState = (entry: HistoryEntry): HistoryEntry => { + if (entry.action === 'ADD') { + // The ADD entry's componentInfo is snapshotted at create time. For + // arrows (and any element whose post-create geometry is applied with + // skipHistory), that snapshot is stale — e.g. an arrow is pre-created + // off-screen at -9999 with zero-length vertices, then drawn later. + // Re-read the live store here (still present, since undo's + // applyRemove runs after this) so redo re-inserts the final geometry. + const current = stateRefForComponentStore.current[entry.id] + return current + ? { ...entry, componentInfo: { ...current } } + : entry + } if (entry.action === 'UPDATE_VERTICES') { const current = stateRefForComponentStore.current[entry.id] return { diff --git a/src/hooks/useElementDefaults.ts b/src/hooks/useElementDefaults.ts index 10bf788..516fd22 100644 --- a/src/hooks/useElementDefaults.ts +++ b/src/hooks/useElementDefaults.ts @@ -1,5 +1,6 @@ import { useEffect, useRef, useState } from 'react' import type { Dispatch, SetStateAction } from 'react' +import { DEFAULT_TEXT_FONT_FAMILY } from '../constants/misc' const STORAGE_KEY = 'craftbase:elementDefaults' @@ -26,7 +27,7 @@ const INITIAL_DEFAULTS: ElementDefaultsState = { defaultOpacity: 1, defaultTextColor: '#1A1612', defaultTextSize: 'M', - defaultTextFontFamily: 'Caveat', + defaultTextFontFamily: DEFAULT_TEXT_FONT_FAMILY, } function loadFromStorage(): ElementDefaultsState { @@ -59,6 +60,9 @@ export interface ElementDefaultsApi extends ElementDefaultsState { setDefaultTextColorInBoard: (val: string) => void setDefaultTextSizeInBoard: (val: TextSizeLabel) => void setDefaultTextFontFamilyInBoard: (val: string) => void + // Restore every default to its factory value (used by "clear canvas" so a + // leaked default like linewidth:0 doesn't carry over to the next drawing). + resetDefaults: () => void } export function useElementDefaults(): ElementDefaultsApi { @@ -137,6 +141,19 @@ export function useElementDefaults(): ElementDefaultsApi { const setDefaultTextFontFamilyInBoard = (val: string): void => setDefaultTextFontFamily(val) + // Reset all defaults to INITIAL_DEFAULTS. The persistence effect above then + // rewrites localStorage to the factory values on the resulting state change. + const resetDefaults = (): void => { + setDefaultFill(INITIAL_DEFAULTS.defaultFill) + setDefaultStrokeColor(INITIAL_DEFAULTS.defaultStrokeColor) + setDefaultLinewidth(INITIAL_DEFAULTS.defaultLinewidth) + setDefaultStrokeType(INITIAL_DEFAULTS.defaultStrokeType) + setDefaultOpacity(INITIAL_DEFAULTS.defaultOpacity) + setDefaultTextColor(INITIAL_DEFAULTS.defaultTextColor) + setDefaultTextSize(INITIAL_DEFAULTS.defaultTextSize) + setDefaultTextFontFamily(INITIAL_DEFAULTS.defaultTextFontFamily) + } + return { defaultFill, defaultStrokeColor, @@ -162,5 +179,6 @@ export function useElementDefaults(): ElementDefaultsApi { setDefaultTextColorInBoard, setDefaultTextSizeInBoard, setDefaultTextFontFamilyInBoard, + resetDefaults, } } diff --git a/src/newCanvas.tsx b/src/newCanvas.tsx index 20866c1..3315ef6 100644 --- a/src/newCanvas.tsx +++ b/src/newCanvas.tsx @@ -12,6 +12,7 @@ import React, { useEffect, useState, useRef, + useCallback, Suspense, type MutableRefObject, type ReactNode, @@ -49,6 +50,7 @@ import { GEO_DRAW_PROPS_KEY, GEO_POINT_PLACE_MODE_KEY, GEO_MIN_VERTICES, + DEFAULT_TEXT_FONT_FAMILY, } from './constants/misc' import Spinner from './components/common/spinner' @@ -78,6 +80,8 @@ import { growShapeToFitText, usableTextWidth } from './utils/shapeTextFit' import { isSelectPanMode, isPanMode } from './utils/drawModeUtils' import { createDiamondPath } from './factory/diamond' import { useCanvasClipboard } from './hooks/useCanvasClipboard' +import { exportSelectionAsSvg } from './utils/exportSelectionAsSvg' +import CanvasContextMenu from './components/canvasContextMenu' import { ElementRenderWrapper, GroupRenderWrapper, @@ -627,7 +631,7 @@ function addZUI( input.style.padding = `${vertPad}px 8px` input.style.color = textStyle.fill || '#3A342C' input.style.fontSize = `${cssFontSize}px` - input.style.fontFamily = textStyle.family || 'Caveat' + input.style.fontFamily = textStyle.family || DEFAULT_TEXT_FONT_FAMILY input.style.fontWeight = String(textStyle.weight ?? 'normal') input.style.lineHeight = `${lineH}px` input.style.letterSpacing = '0px' @@ -682,7 +686,8 @@ function addZUI( measureSpan.style.overflowWrap = 'anywhere' measureSpan.style.width = `${usableScreenW}px` measureSpan.style.fontSize = `${cssFontSize}px` - measureSpan.style.fontFamily = textStyle.family || 'Caveat' + measureSpan.style.fontFamily = + textStyle.family || DEFAULT_TEXT_FONT_FAMILY measureSpan.style.fontWeight = String(textStyle.weight ?? 'normal') measureSpan.style.lineHeight = `${lineH}px` measureSpan.style.letterSpacing = '0px' @@ -2339,7 +2344,19 @@ function addZUI( lastTouch.clientY ) - if (!handleHit) { + // A multi-element group uses the older objectSelector path (not + // selectionController), so handleHit is false for it. Without this, + // the clearSelector below hides the group's dashed box the instant + // the drag begins on mobile. Skip the clear when the finger lands on + // the group object so its selector stays visible through the drag. + const groupHit = ( + document.elementFromPoint( + lastTouch.clientX, + lastTouch.clientY + ) as Element | null + )?.closest('[data-label="groupobject_coord"]') + + if (!handleHit && !groupHit) { // Clear any previous selection before processing the new tap. // On desktop this happens via focus/blur, but synthetic mouse events // don't transfer browser focus on mobile, so we do it explicitly here @@ -2685,6 +2702,10 @@ const Canvas: React.FC = (props) => { const [zuiInstance, setZuiInstance] = useState(null) // eslint-disable-next-line @typescript-eslint/no-explicit-any const [onGroup, setOnGroup] = useState(null) + // Right-click / two-finger context menu position (null = closed). + const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number } | null>( + null + ) const [componentsToRender, setComponentsToRender] = useState< React.ComponentType[] >([]) @@ -3067,6 +3088,56 @@ const Canvas: React.FC = (props) => { } }, [undoLastAction, redoLastAction, enableTextDrawMode]) + // Export the active selection (marquee group or single element) as a + // standalone .svg. getSelectedGroup() unifies both selection mechanisms. + const exportActiveSelection = useCallback(async () => { + const group = zuiInstanceRef.current?.getSelectedGroup?.() + if (!group) return + try { + await exportSelectionAsSvg(group) + } catch (err) { + console.warn('Export selection as SVG failed', err) + } + }, []) + + // Right-click (mouse) and two-finger trackpad tap both fire the native + // 'contextmenu' event. Suppress the OS menu; if something is selected, open + // our menu at the cursor. Cmd/Ctrl+Shift+D triggers the same export. + useEffect(() => { + const root = document.getElementById('main-two-root') + if (!root) return + + const onContextMenu = (evt: MouseEvent) => { + evt.preventDefault() + const group = zuiInstanceRef.current?.getSelectedGroup?.() + if (group) { + setCtxMenu({ x: evt.clientX, y: evt.clientY }) + } else { + setCtxMenu(null) + } + } + + const onExportKeyDown = (evt: KeyboardEvent) => { + if ( + evt.key.toLowerCase() !== 'd' || + !(evt.ctrlKey || evt.metaKey) || + !evt.shiftKey + ) + return + const tag = document.activeElement?.tagName + if (tag === 'INPUT' || tag === 'TEXTAREA') return + evt.preventDefault() + void exportActiveSelection() + } + + root.addEventListener('contextmenu', onContextMenu) + window.addEventListener('keydown', onExportKeyDown) + return () => { + root.removeEventListener('contextmenu', onContextMenu) + window.removeEventListener('keydown', onExportKeyDown) + } + }, [exportActiveSelection]) + // eslint-disable-next-line @typescript-eslint/no-explicit-any const setOnGroupHandler = (obj: any) => { setOnGroup(obj) @@ -3229,6 +3300,17 @@ const Canvas: React.FC = (props) => { ))} + {ctxMenu && ( + setCtxMenu(null)} + onExportSvg={() => { + setCtxMenu(null) + void exportActiveSelection() + }} + /> + )} ) } diff --git a/src/types/board.ts b/src/types/board.ts index 4b0715a..c4569db 100644 --- a/src/types/board.ts +++ b/src/types/board.ts @@ -205,8 +205,16 @@ export interface BoardContextValue { stateRefForComponentStore: MutableRefObject // Property application - applyProperty: (name: string, value: unknown) => void - applyGroupProperty: (name: string, value: unknown) => void + applyProperty: ( + name: string, + value: unknown, + opts?: { preview?: boolean } + ) => void + applyGroupProperty: ( + name: string, + value: unknown, + opts?: { preview?: boolean } + ) => void // Element defaults (read sites: ElementPropertiesToolbar, primary sidebar, factories) defaultFill: string diff --git a/src/utils/applyGroupProperty.ts b/src/utils/applyGroupProperty.ts index 6269728..13affb5 100644 --- a/src/utils/applyGroupProperty.ts +++ b/src/utils/applyGroupProperty.ts @@ -205,7 +205,11 @@ export function createApplyGroupProperty(deps: ApplyGroupPropertyDeps) { return function applyGroupProperty( propertyKey: GroupPropertyKey | string, // eslint-disable-next-line @typescript-eslint/no-explicit-any - value: any + value: any, + // `preview` applies the change to the live Two.js scene only, skipping + // the store/history writes — used for continuous slider drags. The final + // value commits normally (no preview) on release. + opts?: { preview?: boolean } ): void { const { selectedGroup, @@ -323,11 +327,20 @@ export function createApplyGroupProperty(deps: ApplyGroupPropertyDeps) { if (propertyKey === 'opacity') { const sceneLeaf = sceneEl?.children?.[0] if (sceneLeaf) sceneLeaf.opacity = value + // Dim embedded text alongside the shape leaf (rect/diamond/ + // circle-with-text keep text in a separate text-layer node). + findTextNodesInside(sceneEl).forEach((t) => (t.opacity = value)) if (coreObj) { coreObj.opacity = 1 const coreLeaf = coreObj?.children?.[0] if (coreLeaf) coreLeaf.opacity = value + findTextNodesInside(coreObj).forEach( + (t) => (t.opacity = value) + ) } + // Live drag preview: scene only, defer the store/history write + // to the commit on release. + if (opts?.preview) return const existingMeta = sceneEl?.elementData?.metadata const safeMeta = existingMeta && !Array.isArray(existingMeta) diff --git a/src/utils/applyProperty.ts b/src/utils/applyProperty.ts index 3772075..49d8c2f 100644 --- a/src/utils/applyProperty.ts +++ b/src/utils/applyProperty.ts @@ -73,7 +73,12 @@ export function createApplyProperty(deps: ApplyPropertyDeps) { return function applyProperty( propertyKey: PropertyKey | string, // eslint-disable-next-line @typescript-eslint/no-explicit-any - value: any + value: any, + // `preview` applies the change to the live Two.js scene only, skipping + // the store/history/default writes — used for continuous slider drags so + // the element updates in real time without spamming the undo stack. The + // final value is committed normally (no preview) on release. + opts?: { preview?: boolean } ): void { const { selectedComponent, @@ -88,23 +93,26 @@ export function createApplyProperty(deps: ApplyPropertyDeps) { setDefaultStrokeColor, setDefaultLinewidth, setDefaultStrokeType, - setDefaultOpacity, setDefaultTextColor, setDefaultTextSize, setDefaultTextFontFamily, } = deps - // 1. Update the matching default. - if (propertyKey === 'fill') setDefaultFill(value) - else if (propertyKey === 'stroke') setDefaultStrokeColor(value) - else if (propertyKey === 'linewidth') setDefaultLinewidth(value) - else if (propertyKey === 'strokeType') - setDefaultStrokeType(value === 'solid' ? null : value) - else if (propertyKey === 'opacity') setDefaultOpacity(value) - else if (propertyKey === 'textColor') setDefaultTextColor(value) - else if (propertyKey === 'textSize') setDefaultTextSize(value) - else if (propertyKey === 'textFontFamily') - setDefaultTextFontFamily(value) + // 1. Update the matching default. Opacity is deliberately excluded — it + // is a per-element property only and must never persist as a default, + // otherwise drawing a new shape after dimming one (e.g. to 0%) would + // produce an invisible shape. Skipped entirely in preview mode. + if (!opts?.preview) { + if (propertyKey === 'fill') setDefaultFill(value) + else if (propertyKey === 'stroke') setDefaultStrokeColor(value) + else if (propertyKey === 'linewidth') setDefaultLinewidth(value) + else if (propertyKey === 'strokeType') + setDefaultStrokeType(value === 'solid' ? null : value) + else if (propertyKey === 'textColor') setDefaultTextColor(value) + else if (propertyKey === 'textSize') setDefaultTextSize(value) + else if (propertyKey === 'textFontFamily') + setDefaultTextFontFamily(value) + } // 2. If nothing is selected, we're done. if (!selectedComponent) return @@ -232,13 +240,32 @@ export function createApplyProperty(deps: ApplyPropertyDeps) { strokeType: dbValue, }) } else if (propertyKey === 'opacity') { - if (shapeData) shapeData.opacity = value - const existingMeta = elementData?.metadata ?? {} - const updatedMeta = { ...existingMeta, opacity: value } - if (elementData) elementData.metadata = updatedMeta - updateComponentBulkPropertiesInLocalStore(id, { - metadata: updatedMeta, - }) + // Apply opacity at the GROUP level, not the shape leaf. The leaf + // path is double-referenced in group.children (the *-with-text + // components unshift the factory's already-added shape), which + // leaves leaf-level opacity flags unprocessed on render — so a leaf + // write only appears after the next full repaint (e.g. on deselect). + // The group's own opacity always repaints, and it uniformly dims the + // shape plus any embedded text-layer nodes in one shot. + const groupObj = selectedComponent?.group?.data + if (groupObj) groupObj.opacity = value + // Neutralize any leaf/text opacity so it doesn't compound with the + // group's (e.g. shapes mounted before this change carried leaf-level + // opacity). + if (shapeData) shapeData.opacity = 1 + getShapeTextNodes(selectedComponent?.group?.data).forEach( + (n) => (n.opacity = 1) + ) + // Preview = live drag: mutate the scene only, defer the + // store/history write to the commit on release. + if (!opts?.preview) { + const existingMeta = elementData?.metadata ?? {} + const updatedMeta = { ...existingMeta, opacity: value } + if (elementData) elementData.metadata = updatedMeta + updateComponentBulkPropertiesInLocalStore(id, { + metadata: updatedMeta, + }) + } } twoJSInstance?.update() diff --git a/src/utils/canvasUtils.ts b/src/utils/canvasUtils.ts index 5c5d6cf..cd9b904 100644 --- a/src/utils/canvasUtils.ts +++ b/src/utils/canvasUtils.ts @@ -1,4 +1,7 @@ -import { SHAPE_DEFAULT_STROKE } from '../constants/misc' +import { + SHAPE_DEFAULT_STROKE, + DEFAULT_TEXT_FONT_FAMILY, +} from '../constants/misc' import { generateUUID } from './misc' import { lineHeightFor, measureTextWidth, type FontSpec } from './textLayout' import { reflowTextForShape } from './shapeTextFit' @@ -276,7 +279,15 @@ export function getShapeTextNodes(group: ShapeLike): ShapeLike[] { const layer = findShapeTextLayer(group) const source = layer ? layer.children : group?.children if (!source) return [] - return source.filter( + // `source` is a Two.js `Children` collection (a custom Array subclass with + // no Symbol.species). Calling `.filter` on it directly routes through + // `ArraySpeciesCreate(new Children(0))`, whose constructor mishandles the + // numeric length and seeds the result with a spurious `0`. When there are + // no text nodes that `0` survives, so the filter returns `[0]` instead of + // `[]` — and any caller dereferencing the result (`n.opacity`, `n.fill`) + // throws `Cannot create property … on number '0'`. Copy to a plain array + // first so the filter is well-behaved and returns `[]` for text-less shapes. + return Array.from(source as ArrayLike).filter( (c: ShapeLike) => typeof c?.value === 'string' ) } @@ -360,7 +371,8 @@ export function shapeTextStyleFromMeta(meta: ShapeLike): { style: ShapeTextStyle font: FontSpec } { - const family = meta?.textFontFamily || meta?.textFamily || 'Caveat' + const family = + meta?.textFontFamily || meta?.textFamily || DEFAULT_TEXT_FONT_FAMILY const size = meta?.textFontSize || 24 const weight = meta?.textWeight || 'normal' return { diff --git a/src/utils/exportSelectionAsSvg.ts b/src/utils/exportSelectionAsSvg.ts new file mode 100644 index 0000000..5f8e49e --- /dev/null +++ b/src/utils/exportSelectionAsSvg.ts @@ -0,0 +1,103 @@ +// Export the currently-selected element(s) as a standalone, tightly-cropped +// .svg file with a transparent background and no watermark. +// +// Two.js runs the SVG renderer, so the selected group already has a live +// rendered node at group._renderer.elem. We clone that , drop it inside a +// fresh , and crop to its content via getBBox() on a transform-free wrapper +// — this sidesteps the ZUI zoom/pan transform entirely: the clone keeps its own +// (unzoomed, scene-space) transform, getBBox reports its bounds in that same +// space, and using those bounds as the viewBox yields a 1:1 portable asset. + +import { SVG_NS, embedFonts } from './svgExportShared' + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +type GroupLike = any + +/** + * Export a Two.js group (or single-element group) as a downloaded .svg file. + * Throws if the group has no rendered SVG node or has zero size. + */ +export async function exportSelectionAsSvg(group: GroupLike): Promise { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + const gEl: SVGGElement | undefined = (group as any)?._renderer?.elem + if (!gEl) throw new Error('No rendered SVG node found for the selection') + + const clone = gEl.cloneNode(true) as SVGGElement + + // A marquee group's also contains the transparent marquee-sized rect and + // the visible selection border/handles (added as children of the group). For + // a single-element selection the group's is already clean (its selection + // UI lives separately in the scene), so we only prune marquee groups. Keep + // only the direct children that map to real content elements (those carrying + // elementData.id); everything else is selection chrome. + // eslint-disable-next-line @typescript-eslint/no-explicit-any + if ((group as any)?.elementData?.isGroupSelector) { + const keepIds = new Set( + // eslint-disable-next-line @typescript-eslint/no-explicit-any + ((group as any).children || []) + // eslint-disable-next-line @typescript-eslint/no-explicit-any + .filter((c: any) => c?.elementData?.id) + // eslint-disable-next-line @typescript-eslint/no-explicit-any + .map((c: any) => c?._renderer?.elem?.id) + .filter((id: unknown): id is string => typeof id === 'string') + ) + Array.from(clone.children).forEach((node) => { + if (!keepIds.has(node.id)) node.remove() + }) + } + + const svg = document.createElementNS(SVG_NS, 'svg') + svg.setAttribute('xmlns', SVG_NS) + // Transform-free wrapper so getBBox reports bounds in the svg's user space, + // accounting for the clone's own transform via descendant geometry. + const wrapper = document.createElementNS(SVG_NS, 'g') + wrapper.appendChild(clone) + svg.appendChild(wrapper) + + // getBBox requires the node be laid out (in the DOM, not display:none). + svg.setAttribute( + 'style', + 'position:fixed;left:-99999px;top:-99999px;opacity:0;pointer-events:none' + ) + document.body.appendChild(svg) + + try { + const bb = wrapper.getBBox() + if (bb.width === 0 || bb.height === 0) { + throw new Error('Selection has zero size; nothing to export') + } + + svg.setAttribute('width', String(bb.width)) + svg.setAttribute('height', String(bb.height)) + svg.setAttribute( + 'viewBox', + `${bb.x} ${bb.y} ${bb.width} ${bb.height}` + ) + + // Font fetch is async; keep the element hidden (style attr) until the + // synchronous serialize below so it never flashes on-screen. + await embedFonts(svg) + + // Strip the off-screen hiding style only from the serialized output. + svg.removeAttribute('style') + const svgString = new XMLSerializer().serializeToString(svg) + downloadSvg(svgString) + } finally { + if (svg.parentNode) svg.parentNode.removeChild(svg) + } +} + +/** Trigger a browser download of the SVG markup as a .svg file. */ +function downloadSvg(svgString: string): void { + const blob = new Blob([svgString], { + type: 'image/svg+xml;charset=utf-8', + }) + const url = URL.createObjectURL(blob) + const a = document.createElement('a') + a.href = url + a.download = `craftbase-selection-${Date.now()}.svg` + document.body.appendChild(a) + a.click() + document.body.removeChild(a) + URL.revokeObjectURL(url) +} diff --git a/src/utils/exportViewport.ts b/src/utils/exportViewport.ts index 9de346c..e833ebb 100644 --- a/src/utils/exportViewport.ts +++ b/src/utils/exportViewport.ts @@ -9,14 +9,13 @@ // stamp a screen-space watermark, then draw the SVG onto a and // download it as PNG. -const SVG_NS = 'http://www.w3.org/2000/svg' +import { SVG_NS, embedFonts } from './svgExportShared' +import { DEFAULT_TEXT_FONT_FAMILY } from '../constants/misc' + const CANVAS_BG = '#f5f0e8' // --color-canvas (App.css) const DOT_COLOR = '#c4b89a' // radial-gradient dot color (App.css) const DOT_TILE = 24 // background-size: 24px 24px (App.css) const WATERMARK_TEXT = 'Made with craftbase.org' -// Fonts used for canvas text. --font-sketch: 'Caveat' (App.css). Embedded so -// rasterized text matches the screen instead of falling back to a system font. -const FONT_FAMILIES = ['Caveat'] const MAX_DPR = 2 // cap device-pixel scaling to bound output file size /** @@ -100,7 +99,7 @@ function appendWatermark( text.setAttribute('x', String(width - 16)) text.setAttribute('y', String(height - 14)) text.setAttribute('text-anchor', 'end') - text.setAttribute('font-family', 'Caveat') + text.setAttribute('font-family', DEFAULT_TEXT_FONT_FAMILY) text.setAttribute('font-size', '20') text.setAttribute('fill', '#8C7E6A') text.setAttribute('fill-opacity', '0.8') @@ -109,60 +108,6 @@ function appendWatermark( svg.appendChild(text) } -/** - * Inline the Google web font(s) as base64 inside a
    ` items become `•`/`◦`/`▪` per nesting depth; `
      ` items become +// `1.`, `2.`, … Nested lists are indented two spaces per level. Non-list block +// elements (`p`, `div`, headings, `br`) become line breaks so paragraphs keep +// their structure. Returns `null` when the HTML has no list at all, so callers +// can fall back to the browser's default plain-text paste. + +const UL_MARKERS = ['•', '◦', '▪'] +const BLOCK_TAGS = new Set([ + 'p', + 'div', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'section', + 'article', + 'header', + 'footer', + 'tr', +]) + +const INDENT = ' ' + +function inlineText(node: Node): string { + // Text of a node EXCLUDING any nested lists (those are emitted separately). + let out = '' + node.childNodes.forEach((child) => { + if (child.nodeType === Node.TEXT_NODE) { + out += child.textContent ?? '' + } else if (child.nodeType === Node.ELEMENT_NODE) { + const tag = (child as Element).tagName.toLowerCase() + if (tag === 'ul' || tag === 'ol') return + if (tag === 'br') { + out += '\n' + return + } + out += inlineText(child) + } + }) + return out.replace(/[ \t\f\v]+/g, ' ').trim() +} + +function emitList(listEl: Element, depth: number, lines: string[]): void { + const ordered = listEl.tagName.toLowerCase() === 'ol' + let index = 1 + listEl.childNodes.forEach((li) => { + if ( + li.nodeType !== Node.ELEMENT_NODE || + (li as Element).tagName.toLowerCase() !== 'li' + ) { + return + } + const marker = ordered + ? `${index}.` + : (UL_MARKERS[depth % UL_MARKERS.length] ?? '•') + const text = inlineText(li) + lines.push(`${INDENT.repeat(depth)}${marker} ${text}`.trimEnd()) + index += 1 + // Emit nested lists below the item; the item's own inline text is + // already in the line above (inlineText excludes nested lists). + li.childNodes.forEach((sub) => { + if (sub.nodeType !== Node.ELEMENT_NODE) return + const subTag = (sub as Element).tagName.toLowerCase() + if (subTag === 'ul' || subTag === 'ol') { + emitList(sub as Element, depth + 1, lines) + } + }) + }) +} + +function walk(node: Node, depth: number, lines: string[]): void { + node.childNodes.forEach((child) => { + if (child.nodeType === Node.TEXT_NODE) { + const t = (child.textContent ?? '').replace(/\s+/g, ' ').trim() + if (t) lines.push(t) + return + } + if (child.nodeType !== Node.ELEMENT_NODE) return + + const el = child as Element + const tag = el.tagName.toLowerCase() + + if (tag === 'ul' || tag === 'ol') { + emitList(el, depth, lines) + return + } + + if (tag === 'br') { + lines.push('') + return + } + + if (BLOCK_TAGS.has(tag)) { + const before = lines.length + walk(el, depth, lines) + // Keep paragraph separation between consecutive block siblings. + if (lines.length > before) lines.push('') + return + } + + // Inline wrapper (span, a, strong, …) — descend without a new line. + walk(el, depth, lines) + }) +} + +export function htmlToBulletText(html: string): string | null { + if (!html) return null + const doc = new DOMParser().parseFromString(html, 'text/html') + if (!doc.querySelector('li')) return null + + const lines: string[] = [] + walk(doc.body, 0, lines) + + return lines + .join('\n') + .replace(/\n{3,}/g, '\n\n') + .replace(/^\n+|\n+$/g, '') +} diff --git a/src/utils/svgExportShared.ts b/src/utils/svgExportShared.ts new file mode 100644 index 0000000..f565022 --- /dev/null +++ b/src/utils/svgExportShared.ts @@ -0,0 +1,67 @@ +// Shared helpers for the SVG-based export flows (viewport PNG export and +// selection SVG export). Two.js runs the SVG renderer, so both flows clone the +// live SVG and need to inline the canvas web font(s) — the SVG→ +// rasterizer and any standalone .svg consumer have no access to the document's +// loaded fonts, so without embedding, canvas text falls back to a system font. + +import { DEFAULT_TEXT_FONT_FAMILY } from '../constants/misc' + +export const SVG_NS = 'http://www.w3.org/2000/svg' + +// Fonts used for canvas text, embedded so exported text matches the screen +// instead of falling back to a system font. Only the Regular 400 weight is +// requested (canvas text is always 400) — and the default font (Caveat Brush) +// ships a single weight, so requesting a range would 400 the whole CSS fetch. +const FONT_FAMILIES = [DEFAULT_TEXT_FONT_FAMILY] + +/** + * Inline the Google web font(s) as base64 inside a