@bigbluebutton/tldraw 2.0.0-alpha.19

package/src/lib/shapes/geo/components/DrawStylePolygon.tsx

@@ -0,0 +1,263 @@
+import { TLDefaultColorTheme, TLGeoShape, VecLike } from '@bigbluebutton/editor'
+import * as React from 'react'
+import {
+	ShapeFill,
+	getShapeFillSvg,
+	getSvgWithShapeFill,
+	useDefaultColorTheme,
+} from '../../shared/ShapeFill'
+import { getRoundedInkyPolygonPath, getRoundedPolygonPoints } from '../../shared/polygon-helpers'
+
+export const DrawStylePolygon = React.memo(function DrawStylePolygon({
+	id,
+	outline,
+	lines,
+	fill,
+	color,
+	strokeWidth,
+}: Pick<TLGeoShape['props'], 'fill' | 'color'> & {
+	id: TLGeoShape['id']
+	outline: VecLike[]
+	strokeWidth: number
+	lines?: VecLike[][]
+}) {
+	const theme = useDefaultColorTheme()
+	const polygonPoints = getRoundedPolygonPoints(id, outline, strokeWidth / 3, strokeWidth * 2, 2)
+	let strokePathData = getRoundedInkyPolygonPath(polygonPoints)
+
+	if (lines) {
+		for (const [A, B] of lines) {
+			strokePathData += `M${A.x},${A.y}L${B.x},${B.y}`
+		}
+	}
+
+	const innerPolygonPoints = getRoundedPolygonPoints(id, outline, 0, strokeWidth * 2, 1)
+	const innerPathData = getRoundedInkyPolygonPath(innerPolygonPoints)
+
+	return (
+		<>
+			<ShapeFill d={innerPathData} fill={fill} color={color} theme={theme} />
+			<path d={strokePathData} stroke={theme[color].solid} strokeWidth={strokeWidth} fill="none" />
+		</>
+	)
+})
+
+export function DrawStylePolygonSvg({
+	id,
+	outline,
+	lines,
+	fill,
+	color,
+	theme,
+	strokeWidth,
+}: Pick<TLGeoShape['props'], 'fill' | 'color'> & {
+	id: TLGeoShape['id']
+	outline: VecLike[]
+	lines?: VecLike[][]
+	strokeWidth: number
+	theme: TLDefaultColorTheme
+}) {
+	const polygonPoints = getRoundedPolygonPoints(id, outline, strokeWidth / 3, strokeWidth * 2, 2)
+
+	let strokePathData = getRoundedInkyPolygonPath(polygonPoints)
+
+	if (lines) {
+		for (const [A, B] of lines) {
+			strokePathData += `M${A.x},${A.y}L${B.x},${B.y}`
+		}
+	}
+
+	const innerPolygonPoints = getRoundedPolygonPoints(id, outline, 0, strokeWidth * 2, 1)
+	const innerPathData = getRoundedInkyPolygonPath(innerPolygonPoints)
+
+	const strokeElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+	strokeElement.setAttribute('d', strokePathData)
+	strokeElement.setAttribute('fill', 'none')
+	strokeElement.setAttribute('stroke', theme[color].solid)
+	strokeElement.setAttribute('stroke-width', strokeWidth.toString())
+
+	// Get the fill element, if any
+	const fillElement = getShapeFillSvg({
+		d: innerPathData,
+		fill,
+		color,
+		theme,
+	})
+
+	return getSvgWithShapeFill(strokeElement, fillElement)
+}
+
+// function getPolygonDrawPoints(id: string, outline: VecLike[], strokeWidth: number) {
+// 	const points: Vec2d[] = []
+
+// 	const getRandom = rng(id)
+
+// 	const start = Math.round(Math.abs(getRandom()) * outline.length)
+
+// 	const corners = outline.map((p) =>
+// 		Vec2d.AddXY(p, (getRandom() * strokeWidth) / 4, (getRandom() * strokeWidth) / 4)
+// 	)
+
+// 	const len = corners.length
+
+// 	for (let i = 0, n = len + 1; i < n; i++) {
+// 		const At = corners[(start + i) % len]
+// 		const Bt = corners[(start + i + 1) % len]
+
+// 		const dist = Math.min(Vec2d.Dist(At, Bt) / 2, strokeWidth / 2)
+// 		const A = Vec2d.Nudge(At, Bt, dist)
+
+// 		const D = Vec2d.Med(At, Bt)
+
+// 		if (i === 0) {
+// 			Bt.z = 0.7
+// 			points.push(new Vec2d(D.x, D.y, 0.7), Bt)
+// 		} else if (i === outline.length) {
+// 			const lastSegPoints = Vec2d.PointsBetween(A, D, 4)
+// 			lastSegPoints.forEach((p) => (p.z = 0.7))
+// 			points.push(...lastSegPoints)
+// 		} else {
+// 			points.push(...Vec2d.PointsBetween(A, Bt, 6))
+// 		}
+// 	}
+
+// 	return points
+// }
+
+// export function getPolygonIndicatorPath(id: string, outline: VecLike[], strokeWidth: number) {
+// 	const points = getPolygonDrawPoints(id, outline, strokeWidth)
+// 	const options = getPolygonStrokeOptions(strokeWidth)
+// 	const strokePoints = getStrokePoints(points, options)
+
+// 	return getSvgPathFromStrokePoints(strokePoints, true)
+// }
+
+// function getPolygonStrokeOptions(strokeWidth: number) {
+// 	return {
+// 		size: 1 + strokeWidth * 0.618,
+// 		last: true,
+// 		simulatePressure: false,
+// 		streamline: 0.25,
+// 		thinning: 0.9,
+// 	}
+// }
+
+// function getPolygonstrokePathData(id: string, outline: VecLike[], strokeWidth: number) {
+// 	// draw a line between all of the points
+// 	let d = `M${outline[0].x},${outline[0].y}`
+// 	d += 'Z'
+
+// 	for (const { x, y } of outline) {
+// 		d += `${x},${y}`
+// 	}
+
+// 	return d
+// }
+
+// function SimpleInkyPolygon(id: string, outline: VecLike[], offset: number) {
+// 	const random = rng(id)
+// 	let p = outline[0]
+
+// 	let ox = random() * offset
+// 	let oy = random() * offset
+
+// 	let polylineA = `M${p.x - ox},${p.y - oy}L`
+// 	let polylineB = `${p.x + ox},${p.y + oy} `
+
+// 	for (let i = 1, n = outline.length; i < n; i++) {
+// 		p = outline[i]
+// 		ox = random() * offset
+// 		oy = random() * offset
+
+// 		polylineA += `${p.x - ox},${p.y - oy} `
+// 		polylineB += `${p.x + ox},${p.y + oy} `
+// 	}
+
+// 	polylineB += 'Z'
+
+// 	polylineA += polylineB
+
+// 	return polylineA
+// }
+
+// function CubicInkyPolygon(id: string, outline: VecLike[], offset: number) {
+// 	const random = rng(id)
+// 	let p0 = outline[0]
+// 	let p1 = p0
+
+// 	let ox: number
+// 	let oy: number
+
+// 	let polylineA = `M${p0.x},${p0.y} L`
+// 	let polylineB = `M${p0.x},${p0.y}`
+
+// 	for (let i = 0, n = outline.length; i < n; i++) {
+// 		p0 = outline[i]
+// 		p1 = outline[(i + 1) % n]
+
+// 		polylineA += `${p1.x},${p1.y} `
+
+// 		ox = random() * offset
+// 		oy = random() * offset
+// 		const c1 = Vec2d.Lrp(p0, p1, 0.25)
+// 		const c2 = Vec2d.Lrp(p0, p1, 0.75)
+
+// 		polylineB += `C${c1.x + ox},${c1.y + oy} ${c2.x - ox},${c2.y - oy} ${p1.x},${p1.y}`
+// 	}
+
+// 	polylineB += 'Z'
+
+// 	polylineA += polylineB
+
+// 	return polylineA
+// }
+
+// function QuadraticInkyPolygon(id: string, outline: VecLike[], offset: number) {
+// 	const random = rng(id)
+// 	let p0 = outline[0]
+// 	let p1 = p0
+
+// 	let polylineA = `M${p0.x},${p0.y} Q`
+
+// 	const len = outline.length
+
+// 	for (let i = 0, n = len * 2; i < n; i++) {
+// 		p0 = outline[i % len]
+// 		p1 = outline[(i + 1) % len]
+// 		const dist = Vec2d.Dist(p0, p1)
+
+// 		const c1 = Vec2d.Lrp(p0, p1, 0.5 + random() / 2)
+// 		polylineA += `${c1.x + random() * Math.min(dist / 10, offset)},${
+// 			c1.y + random() * Math.min(dist / 10, offset)
+// 		} ${p1.x + (random() * offset) / 2},${p1.y + (random() * offset) / 2} `
+// 	}
+
+// 	polylineA += 'Z'
+
+// 	return polylineA
+// }
+
+// function GlobyInkyPolygon(id: string, outline: VecLike[], offset: number) {
+// 	const random = rng(id)
+// 	let p0 = outline[0]
+// 	let p1 = p0
+
+// 	let polylineA = `M${p0.x},${p0.y} Q`
+
+// 	const len = outline.length
+
+// 	for (let i = 0, n = len * 2; i < n; i++) {
+// 		p0 = outline[i % len]
+// 		p1 = outline[(i + 1) % len]
+// 		const dist = Vec2d.Dist(p0, p1)
+
+// 		const c1 = Vec2d.Lrp(p0, p1, 0.5 + random() / 2)
+// 		polylineA += `${c1.x + random() * Math.min(dist / 10, offset)},${
+// 			c1.y + random() * Math.min(dist / 10, offset)
+// 		} ${p1.x + (random() * offset) / 2},${p1.y + (random() * offset) / 2} `
+// 	}
+
+// 	polylineA += 'Z'
+
+// 	return polylineA
+// }

package/src/lib/shapes/geo/components/SolidStyleCloud.tsx

@@ -0,0 +1,65 @@
+import { TLDefaultColorTheme, TLGeoShape, TLShapeId } from '@bigbluebutton/editor'
+import * as React from 'react'
+import {
+	ShapeFill,
+	getShapeFillSvg,
+	getSvgWithShapeFill,
+	useDefaultColorTheme,
+} from '../../shared/ShapeFill'
+import { cloudSvgPath } from '../cloudOutline'
+
+export const SolidStyleCloud = React.memo(function SolidStyleCloud({
+	fill,
+	color,
+	strokeWidth,
+	w,
+	h,
+	id,
+	size,
+}: Pick<TLGeoShape['props'], 'fill' | 'color' | 'w' | 'h' | 'size'> & {
+	strokeWidth: number
+	id: TLShapeId
+}) {
+	const theme = useDefaultColorTheme()
+	const path = cloudSvgPath(w, h, id, size)
+
+	return (
+		<>
+			<ShapeFill theme={theme} d={path} fill={fill} color={color} />
+			<path d={path} stroke={theme[color].solid} strokeWidth={strokeWidth} fill="none" />
+		</>
+	)
+})
+
+export function SolidStyleCloudSvg({
+	fill,
+	color,
+	strokeWidth,
+	theme,
+	w,
+	h,
+	id,
+	size,
+}: Pick<TLGeoShape['props'], 'fill' | 'color' | 'w' | 'h' | 'size'> & {
+	strokeWidth: number
+	theme: TLDefaultColorTheme
+	id: TLShapeId
+}) {
+	const pathData = cloudSvgPath(w, h, id, size)
+
+	const strokeElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+	strokeElement.setAttribute('d', pathData)
+	strokeElement.setAttribute('stroke-width', strokeWidth.toString())
+	strokeElement.setAttribute('stroke', theme[color].solid)
+	strokeElement.setAttribute('fill', 'none')
+
+	// Get the fill element, if any
+	const fillElement = getShapeFillSvg({
+		d: pathData,
+		fill,
+		color,
+		theme,
+	})
+
+	return getSvgWithShapeFill(strokeElement, fillElement)
+}

package/src/lib/shapes/geo/components/SolidStyleEllipse.tsx

@@ -0,0 +1,68 @@
+import { TLDefaultColorTheme, TLGeoShape } from '@bigbluebutton/editor'
+import * as React from 'react'
+import {
+	ShapeFill,
+	getShapeFillSvg,
+	getSvgWithShapeFill,
+	useDefaultColorTheme,
+} from '../../shared/ShapeFill'
+
+export const SolidStyleEllipse = React.memo(function SolidStyleEllipse({
+	w,
+	h,
+	strokeWidth: sw,
+	fill,
+	color,
+}: Pick<TLGeoShape['props'], 'w' | 'h' | 'fill' | 'color'> & { strokeWidth: number }) {
+	const theme = useDefaultColorTheme()
+	const cx = w / 2
+	const cy = h / 2
+	const rx = Math.max(0, cx)
+	const ry = Math.max(0, cy)
+
+	const d = `M${cx - rx},${cy}a${rx},${ry},0,1,1,${rx * 2},0a${rx},${ry},0,1,1,-${rx * 2},0`
+
+	return (
+		<>
+			<ShapeFill d={d} color={color} fill={fill} theme={theme} />
+			<path d={d} stroke={theme[color].solid} strokeWidth={sw} fill="none" />
+		</>
+	)
+})
+
+export function SolidStyleEllipseSvg({
+	w,
+	h,
+	strokeWidth: sw,
+	fill,
+	color,
+	theme,
+}: Pick<TLGeoShape['props'], 'w' | 'h' | 'fill' | 'color'> & {
+	strokeWidth: number
+	theme: TLDefaultColorTheme
+}) {
+	const cx = w / 2
+	const cy = h / 2
+	const rx = Math.max(0, cx)
+	const ry = Math.max(0, cy)
+
+	const d = `M${cx - rx},${cy}a${rx},${ry},0,1,1,${rx * 2},0a${rx},${ry},0,1,1,-${rx * 2},0`
+
+	const strokeElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+	strokeElement.setAttribute('d', d)
+	strokeElement.setAttribute('stroke-width', sw.toString())
+	strokeElement.setAttribute('width', w.toString())
+	strokeElement.setAttribute('height', h.toString())
+	strokeElement.setAttribute('fill', 'none')
+	strokeElement.setAttribute('stroke', theme[color].solid)
+
+	// Get the fill element, if any
+	const fillElement = getShapeFillSvg({
+		d,
+		fill,
+		color,
+		theme,
+	})
+
+	return getSvgWithShapeFill(strokeElement, fillElement)
+}

package/src/lib/shapes/geo/components/SolidStyleOval.tsx

@@ -0,0 +1,83 @@
+import { TLDefaultColorTheme, TLGeoShape } from '@bigbluebutton/editor'
+import * as React from 'react'
+import {
+	ShapeFill,
+	getShapeFillSvg,
+	getSvgWithShapeFill,
+	useDefaultColorTheme,
+} from '../../shared/ShapeFill'
+
+export const SolidStyleOval = React.memo(function SolidStyleOval({
+	w,
+	h,
+	strokeWidth: sw,
+	fill,
+	color,
+}: Pick<TLGeoShape['props'], 'w' | 'h' | 'fill' | 'color'> & {
+	strokeWidth: number
+}) {
+	const theme = useDefaultColorTheme()
+	const d = getOvalIndicatorPath(w, h)
+	return (
+		<>
+			<ShapeFill d={d} color={color} fill={fill} theme={theme} />
+			<path d={d} stroke={theme[color].solid} strokeWidth={sw} fill="none" />
+		</>
+	)
+})
+
+export function SolidStyleOvalSvg({
+	w,
+	h,
+	strokeWidth: sw,
+	fill,
+	color,
+	theme,
+}: Pick<TLGeoShape['props'], 'w' | 'h' | 'fill' | 'color'> & {
+	strokeWidth: number
+	theme: TLDefaultColorTheme
+}) {
+	const d = getOvalIndicatorPath(w, h)
+	const strokeElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+	strokeElement.setAttribute('d', d)
+	strokeElement.setAttribute('stroke-width', sw.toString())
+	strokeElement.setAttribute('width', w.toString())
+	strokeElement.setAttribute('height', h.toString())
+	strokeElement.setAttribute('fill', 'none')
+	strokeElement.setAttribute('stroke', theme[color].solid)
+
+	// Get the fill element, if any
+	const fillElement = getShapeFillSvg({
+		d,
+		fill,
+		color,
+		theme,
+	})
+
+	return getSvgWithShapeFill(strokeElement, fillElement)
+}
+
+export function getOvalIndicatorPath(w: number, h: number) {
+	let d: string
+
+	if (h > w) {
+		const offset = w / 2
+		d = `
+    M0,${offset}
+    a${offset},${offset},0,1,1,${offset * 2},0
+    L${w},${h - offset}
+    a${offset},${offset},0,1,1,-${offset * 2},0
+    Z`
+	} else {
+		const offset = h / 2
+		d = `
+    M${offset},0
+    L${w - offset},0
+    a${offset},${offset},0,1,1,0,${offset * 2}
+    L${offset},${h}
+    a${offset},${offset},0,1,1,0,${-offset * 2}
+    Z`
+	}
+
+	return d
+}

package/src/lib/shapes/geo/components/SolidStylePolygon.tsx

@@ -0,0 +1,77 @@
+import { TLDefaultColorTheme, TLGeoShape, VecLike } from '@bigbluebutton/editor'
+import * as React from 'react'
+import {
+	ShapeFill,
+	getShapeFillSvg,
+	getSvgWithShapeFill,
+	useDefaultColorTheme,
+} from '../../shared/ShapeFill'
+
+export const SolidStylePolygon = React.memo(function SolidStylePolygon({
+	outline,
+	lines,
+	fill,
+	color,
+	strokeWidth,
+}: Pick<TLGeoShape['props'], 'fill' | 'color'> & {
+	outline: VecLike[]
+	lines?: VecLike[][]
+	strokeWidth: number
+}) {
+	const theme = useDefaultColorTheme()
+	let path = 'M' + outline[0] + 'L' + outline.slice(1) + 'Z'
+
+	if (lines) {
+		for (const [A, B] of lines) {
+			path += `M${A.x},${A.y}L${B.x},${B.y}`
+		}
+	}
+
+	return (
+		<>
+			<ShapeFill d={path} fill={fill} color={color} theme={theme} />
+			<path d={path} stroke={theme[color].solid} strokeWidth={strokeWidth} fill="none" />
+		</>
+	)
+})
+
+export function SolidStylePolygonSvg({
+	outline,
+	lines,
+	fill,
+	color,
+	strokeWidth,
+	theme,
+}: Pick<TLGeoShape['props'], 'fill' | 'color'> & {
+	outline: VecLike[]
+	strokeWidth: number
+	theme: TLDefaultColorTheme
+	lines?: VecLike[][]
+}) {
+	const pathData = 'M' + outline[0] + 'L' + outline.slice(1) + 'Z'
+
+	const fillPathData = pathData
+	let strokePathData = pathData
+
+	if (lines) {
+		for (const [A, B] of lines) {
+			strokePathData += `M${A.x},${A.y}L${B.x},${B.y}`
+		}
+	}
+
+	const strokeElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+	strokeElement.setAttribute('d', strokePathData)
+	strokeElement.setAttribute('stroke-width', strokeWidth.toString())
+	strokeElement.setAttribute('stroke', theme[color].solid)
+	strokeElement.setAttribute('fill', 'none')
+
+	// Get the fill element, if any
+	const fillElement = getShapeFillSvg({
+		d: fillPathData,
+		fill,
+		color,
+		theme,
+	})
+
+	return getSvgWithShapeFill(strokeElement, fillElement)
+}

package/src/lib/shapes/geo/helpers.ts

@@ -0,0 +1,34 @@
+import { perimeterOfEllipse } from '@bigbluebutton/editor'
+
+export function getOvalSolidPath(w: number, h: number) {
+	if (h > w) {
+		const offset = w / 2
+
+		return `
+    M0,${offset}
+    a${offset},${offset},0,1,1,${offset * 2},0
+    L${w},${h - offset}
+    a${offset},${offset},0,1,1,-${offset * 2},0
+    Z`
+	}
+
+	const offset = h / 2
+
+	return `
+    M${offset},0
+    L${w - offset},0
+    a${offset},${offset},0,1,1,0,${offset * 2}
+    L${offset},${h}
+    a${offset},${offset},0,1,1,0,${-offset * 2}
+    Z`
+}
+
+export function getOvalPerimeter(h: number, w: number) {
+	if (h > w) {
+		const offset = w / 2
+		return perimeterOfEllipse(offset, offset) + (h - offset * 2) * 2
+	}
+
+	const offset = h / 2
+	return perimeterOfEllipse(offset, offset) + (w - offset * 2) * 2
+}

package/src/lib/shapes/geo/toolStates/Idle.ts

@@ -0,0 +1,38 @@
+import { StateNode, TLEventHandlers } from '@bigbluebutton/editor'
+
+export class Idle extends StateNode {
+	static override id = 'idle'
+
+	override onPointerDown: TLEventHandlers['onPointerDown'] = (info) => {
+		this.parent.transition('pointing', info)
+	}
+
+	override onEnter = () => {
+		this.editor.setCursor({ type: 'cross', rotation: 0 })
+	}
+
+	override onKeyUp: TLEventHandlers['onKeyUp'] = (info) => {
+		if (info.key === 'Enter') {
+			if (this.editor.getInstanceState().isReadonly) return null
+
+			const onlySelectedShape = this.editor.getOnlySelectedShape()
+			// If the only selected shape is editable, start editing it
+			if (
+				onlySelectedShape &&
+				this.editor.getShapeUtil(onlySelectedShape).canEdit(onlySelectedShape)
+			) {
+				this.editor.setCurrentTool('select')
+				this.editor.setEditingShape(onlySelectedShape.id)
+				this.editor.root.getCurrent()?.transition('editing_shape', {
+					...info,
+					target: 'shape',
+					shape: onlySelectedShape,
+				})
+			}
+		}
+	}
+
+	override onCancel = () => {
+		this.editor.setCurrentTool('select')
+	}
+}