@bigbluebutton/tldraw 2.0.0-alpha.19

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

@@ -0,0 +1,102 @@
+import { TLDefaultColorTheme, TLGeoShape, TLShapeId, toDomPrecision } from '@bigbluebutton/editor'
+import * as React from 'react'
+import {
+	ShapeFill,
+	getShapeFillSvg,
+	getSvgWithShapeFill,
+	useDefaultColorTheme,
+} from '../../shared/ShapeFill'
+import { getPerfectDashProps } from '../../shared/getPerfectDashProps'
+import { getOvalPerimeter, getOvalSolidPath } from '../helpers'
+
+export const DashStyleOval = React.memo(function DashStyleOval({
+	w,
+	h,
+	strokeWidth: sw,
+	dash,
+	color,
+	fill,
+}: Pick<TLGeoShape['props'], 'w' | 'h' | 'dash' | 'color' | 'fill'> & {
+	strokeWidth: number
+	id: TLShapeId
+}) {
+	const theme = useDefaultColorTheme()
+	const d = getOvalSolidPath(w, h)
+	const perimeter = getOvalPerimeter(w, h)
+
+	const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
+		perimeter < 64 ? perimeter * 2 : perimeter,
+		sw,
+		{
+			style: dash,
+			snap: 4,
+			start: 'outset',
+			end: 'outset',
+			closed: true,
+		}
+	)
+
+	return (
+		<>
+			<ShapeFill theme={theme} d={d} color={color} fill={fill} />
+			<path
+				d={d}
+				strokeWidth={sw}
+				width={toDomPrecision(w)}
+				height={toDomPrecision(h)}
+				fill="none"
+				stroke={theme[color].solid}
+				strokeDasharray={strokeDasharray}
+				strokeDashoffset={strokeDashoffset}
+				pointerEvents="all"
+			/>
+		</>
+	)
+})
+
+export function DashStyleOvalSvg({
+	w,
+	h,
+	strokeWidth: sw,
+	dash,
+	color,
+	theme,
+	fill,
+}: Pick<TLGeoShape['props'], 'w' | 'h' | 'dash' | 'color' | 'fill'> & {
+	strokeWidth: number
+	id: TLShapeId
+	theme: TLDefaultColorTheme
+}) {
+	const d = getOvalSolidPath(w, h)
+	const perimeter = getOvalPerimeter(w, h)
+
+	const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(
+		perimeter < 64 ? perimeter * 2 : perimeter,
+		sw,
+		{
+			style: dash,
+			snap: 4,
+			closed: true,
+		}
+	)
+
+	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)
+	strokeElement.setAttribute('stroke-dasharray', strokeDasharray)
+	strokeElement.setAttribute('stroke-dashoffset', strokeDashoffset)
+
+	// Get the fill element, if any
+	const fillElement = getShapeFillSvg({
+		d,
+		fill,
+		color,
+		theme,
+	})
+
+	return getSvgWithShapeFill(strokeElement, fillElement)
+}

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

@@ -0,0 +1,152 @@
+import { TLDefaultColorTheme, TLGeoShape, Vec2d, VecLike } from '@bigbluebutton/editor'
+import * as React from 'react'
+import {
+	ShapeFill,
+	getShapeFillSvg,
+	getSvgWithShapeFill,
+	useDefaultColorTheme,
+} from '../../shared/ShapeFill'
+import { getPerfectDashProps } from '../../shared/getPerfectDashProps'
+
+export const DashStylePolygon = React.memo(function DashStylePolygon({
+	dash,
+	fill,
+	color,
+	strokeWidth,
+	outline,
+	lines,
+}: Pick<TLGeoShape['props'], 'dash' | 'fill' | 'color'> & {
+	strokeWidth: number
+	outline: VecLike[]
+	lines?: VecLike[][]
+}) {
+	const theme = useDefaultColorTheme()
+	const innerPath = 'M' + outline[0] + 'L' + outline.slice(1) + 'Z'
+
+	return (
+		<>
+			<ShapeFill theme={theme} d={innerPath} fill={fill} color={color} />
+			<g strokeWidth={strokeWidth} stroke={theme[color].solid} fill="none" pointerEvents="all">
+				{Array.from(Array(outline.length)).map((_, i) => {
+					const A = outline[i]
+					const B = outline[(i + 1) % outline.length]
+
+					const dist = Vec2d.Dist(A, B)
+
+					const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(dist, strokeWidth, {
+						style: dash,
+						start: 'outset',
+						end: 'outset',
+					})
+
+					return (
+						<line
+							key={i}
+							x1={A.x}
+							y1={A.y}
+							x2={B.x}
+							y2={B.y}
+							strokeDasharray={strokeDasharray}
+							strokeDashoffset={strokeDashoffset}
+						/>
+					)
+				})}
+				{lines &&
+					lines.map(([A, B], i) => {
+						const dist = Vec2d.Dist(A, B)
+
+						const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(dist, strokeWidth, {
+							style: dash,
+							start: 'skip',
+							end: 'outset',
+							snap: dash === 'dotted' ? 4 : undefined,
+						})
+
+						return (
+							<path
+								key={`line_fg_${i}`}
+								d={`M${A.x},${A.y}L${B.x},${B.y}`}
+								stroke={theme[color].solid}
+								strokeWidth={strokeWidth}
+								fill="none"
+								strokeDasharray={strokeDasharray}
+								strokeDashoffset={strokeDashoffset}
+							/>
+						)
+					})}
+			</g>
+		</>
+	)
+})
+
+export function DashStylePolygonSvg({
+	dash,
+	fill,
+	color,
+	theme,
+	strokeWidth,
+	outline,
+	lines,
+}: Pick<TLGeoShape['props'], 'dash' | 'fill' | 'color'> & {
+	outline: VecLike[]
+	strokeWidth: number
+	theme: TLDefaultColorTheme
+	lines?: VecLike[][]
+}) {
+	const strokeElement = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+	strokeElement.setAttribute('stroke-width', strokeWidth.toString())
+	strokeElement.setAttribute('stroke', theme[color].solid)
+	strokeElement.setAttribute('fill', 'none')
+
+	Array.from(Array(outline.length)).forEach((_, i) => {
+		const A = outline[i]
+		const B = outline[(i + 1) % outline.length]
+
+		const dist = Vec2d.Dist(A, B)
+		const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(dist, strokeWidth, {
+			style: dash,
+		})
+
+		const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+		line.setAttribute('x1', A.x.toString())
+		line.setAttribute('y1', A.y.toString())
+		line.setAttribute('x2', B.x.toString())
+		line.setAttribute('y2', B.y.toString())
+		line.setAttribute('stroke-dasharray', strokeDasharray.toString())
+		line.setAttribute('stroke-dashoffset', strokeDashoffset.toString())
+
+		strokeElement.appendChild(line)
+	})
+
+	if (lines) {
+		for (const [A, B] of lines) {
+			const dist = Vec2d.Dist(A, B)
+			const { strokeDasharray, strokeDashoffset } = getPerfectDashProps(dist, strokeWidth, {
+				style: dash,
+				start: 'skip',
+				end: 'skip',
+				snap: dash === 'dotted' ? 4 : 2,
+			})
+
+			const line = document.createElementNS('http://www.w3.org/2000/svg', 'line')
+			line.setAttribute('x1', A.x.toString())
+			line.setAttribute('y1', A.y.toString())
+			line.setAttribute('x2', B.x.toString())
+			line.setAttribute('y2', B.y.toString())
+			line.setAttribute('stroke-dasharray', strokeDasharray.toString())
+			line.setAttribute('stroke-dashoffset', strokeDashoffset.toString())
+
+			strokeElement.appendChild(line)
+		}
+	}
+
+	// Get the fill element, if any
+	const fillElement = getShapeFillSvg({
+		d: 'M' + outline[0] + 'L' + outline.slice(1) + 'Z',
+		fill,
+		color,
+		theme,
+	})
+
+	return getSvgWithShapeFill(strokeElement, fillElement)
+}

package/src/lib/shapes/geo/components/DrawStyleCloud.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 { inkyCloudSvgPath } from '../cloudOutline'
+
+export const DrawStyleCloud = React.memo(function StyleCloud({
+	fill,
+	color,
+	strokeWidth,
+	w,
+	h,
+	id,
+	size,
+}: Pick<TLGeoShape['props'], 'fill' | 'color' | 'w' | 'h' | 'size'> & {
+	strokeWidth: number
+	id: TLShapeId
+}) {
+	const theme = useDefaultColorTheme()
+	const path = inkyCloudSvgPath(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 DrawStyleCloudSvg({
+	fill,
+	color,
+	strokeWidth,
+	theme,
+	w,
+	h,
+	id,
+	size,
+}: Pick<TLGeoShape['props'], 'fill' | 'color' | 'w' | 'h' | 'size'> & {
+	strokeWidth: number
+	theme: TLDefaultColorTheme
+	id: TLShapeId
+}) {
+	const pathData = inkyCloudSvgPath(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/DrawStyleEllipse.tsx

@@ -0,0 +1,145 @@
+import {
+	EASINGS,
+	PI2,
+	TAU,
+	TLDefaultColorTheme,
+	TLGeoShape,
+	TLShapeId,
+	Vec2d,
+	getSvgPathFromPoints,
+	perimeterOfEllipse,
+	rng,
+} from '@bigbluebutton/editor'
+
+import * as React from 'react'
+import {
+	ShapeFill,
+	getShapeFillSvg,
+	getSvgWithShapeFill,
+	useDefaultColorTheme,
+} from '../../shared/ShapeFill'
+import { getStrokeOutlinePoints } from '../../shared/freehand/getStrokeOutlinePoints'
+import { getStrokePoints } from '../../shared/freehand/getStrokePoints'
+import { setStrokePointRadii } from '../../shared/freehand/setStrokePointRadii'
+import { getSvgPathFromStrokePoints } from '../../shared/freehand/svg'
+
+export const DrawStyleEllipse = React.memo(function DrawStyleEllipse({
+	id,
+	w,
+	h,
+	strokeWidth: sw,
+	fill,
+	color,
+}: Pick<TLGeoShape['props'], 'w' | 'h' | 'fill' | 'color'> & {
+	strokeWidth: number
+	id: TLShapeId
+}) {
+	const theme = useDefaultColorTheme()
+	const innerPath = getEllipseIndicatorPath(id, w, h, sw)
+	const outerPath = getEllipsePath(id, w, h, sw)
+
+	return (
+		<>
+			<ShapeFill theme={theme} d={innerPath} color={color} fill={fill} />
+			<path d={outerPath} fill={theme[color].solid} strokeWidth={0} pointerEvents="all" />
+		</>
+	)
+})
+
+export function DrawStyleEllipseSvg({
+	id,
+	w,
+	h,
+	strokeWidth: sw,
+	fill,
+	color,
+	theme,
+}: Pick<TLGeoShape['props'], 'w' | 'h' | 'fill' | 'color'> & {
+	strokeWidth: number
+	id: TLShapeId
+	theme: TLDefaultColorTheme
+}) {
+	const strokeElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+	strokeElement.setAttribute('d', getEllipsePath(id, w, h, sw))
+	strokeElement.setAttribute('fill', theme[color].solid)
+
+	// Get the fill element, if any
+	const fillElement = getShapeFillSvg({
+		d: getEllipseIndicatorPath(id, w, h, sw),
+		fill,
+		color,
+		theme,
+	})
+
+	return getSvgWithShapeFill(strokeElement, fillElement)
+}
+
+export function getEllipseStrokeOptions(strokeWidth: number) {
+	return {
+		size: 1 + strokeWidth,
+		thinning: 0.25,
+		end: { taper: strokeWidth },
+		start: { taper: strokeWidth },
+		streamline: 0,
+		smoothing: 1,
+		simulatePressure: false,
+	}
+}
+
+export function getEllipseStrokePoints(
+	id: string,
+	width: number,
+	height: number,
+	strokeWidth: number
+) {
+	const getRandom = rng(id)
+
+	const rx = width / 2
+	const ry = height / 2
+	const perimeter = perimeterOfEllipse(rx, ry)
+
+	const points: Vec2d[] = []
+
+	const start = PI2 * getRandom()
+	const length = PI2 + TAU / 2 + Math.abs(getRandom()) * TAU
+	const count = Math.max(16, perimeter / 10)
+
+	for (let i = 0; i < count; i++) {
+		const t = i / (count - 1)
+		const r = start + t * length
+		const c = Math.cos(r)
+		const s = Math.sin(r)
+		points.push(
+			new Vec2d(
+				rx * c + width * 0.5 + 0.05 * getRandom(),
+				ry * s + height / 2 + 0.05 * getRandom(),
+				Math.min(
+					1,
+					0.5 +
+						Math.abs(0.5 - (getRandom() > 0 ? EASINGS.easeInOutSine(t) : EASINGS.easeInExpo(t))) / 2
+				)
+			)
+		)
+	}
+
+	return getStrokePoints(points, getEllipseStrokeOptions(strokeWidth))
+}
+
+export function getEllipsePath(id: string, width: number, height: number, strokeWidth: number) {
+	const options = getEllipseStrokeOptions(strokeWidth)
+	return getSvgPathFromPoints(
+		getStrokeOutlinePoints(
+			setStrokePointRadii(getEllipseStrokePoints(id, width, height, strokeWidth), options),
+			options
+		)
+	)
+}
+
+export function getEllipseIndicatorPath(
+	id: string,
+	width: number,
+	height: number,
+	strokeWidth: number
+) {
+	return getSvgPathFromStrokePoints(getEllipseStrokePoints(id, width, height, strokeWidth))
+}