{ "version": 3, "sources": ["../../../../../src/lib/shapes/geo/components/DrawStylePolygon.tsx"], "sourcesContent": ["import { TLDefaultColorTheme, TLGeoShape, VecLike } from '@tldraw/editor'\nimport * as React from 'react'\nimport {\n\tShapeFill,\n\tgetShapeFillSvg,\n\tgetSvgWithShapeFill,\n\tuseDefaultColorTheme,\n} from '../../shared/ShapeFill'\nimport { getRoundedInkyPolygonPath, getRoundedPolygonPoints } from '../../shared/polygon-helpers'\n\nexport const DrawStylePolygon = React.memo(function DrawStylePolygon({\n\tid,\n\toutline,\n\tlines,\n\tfill,\n\tcolor,\n\tstrokeWidth,\n}: Pick & {\n\tid: TLGeoShape['id']\n\toutline: VecLike[]\n\tstrokeWidth: number\n\tlines?: VecLike[][]\n}) {\n\tconst theme = useDefaultColorTheme()\n\tconst polygonPoints = getRoundedPolygonPoints(id, outline, strokeWidth / 3, strokeWidth * 2, 2)\n\tlet strokePathData = getRoundedInkyPolygonPath(polygonPoints)\n\n\tif (lines) {\n\t\tfor (const [A, B] of lines) {\n\t\t\tstrokePathData += `M${A.x},${A.y}L${B.x},${B.y}`\n\t\t}\n\t}\n\n\tconst innerPolygonPoints = getRoundedPolygonPoints(id, outline, 0, strokeWidth * 2, 1)\n\tconst innerPathData = getRoundedInkyPolygonPath(innerPolygonPoints)\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\n\t\t\n\t)\n})\n\nexport function DrawStylePolygonSvg({\n\tid,\n\toutline,\n\tlines,\n\tfill,\n\tcolor,\n\ttheme,\n\tstrokeWidth,\n}: Pick & {\n\tid: TLGeoShape['id']\n\toutline: VecLike[]\n\tlines?: VecLike[][]\n\tstrokeWidth: number\n\ttheme: TLDefaultColorTheme\n}) {\n\tconst polygonPoints = getRoundedPolygonPoints(id, outline, strokeWidth / 3, strokeWidth * 2, 2)\n\n\tlet strokePathData = getRoundedInkyPolygonPath(polygonPoints)\n\n\tif (lines) {\n\t\tfor (const [A, B] of lines) {\n\t\t\tstrokePathData += `M${A.x},${A.y}L${B.x},${B.y}`\n\t\t}\n\t}\n\n\tconst innerPolygonPoints = getRoundedPolygonPoints(id, outline, 0, strokeWidth * 2, 1)\n\tconst innerPathData = getRoundedInkyPolygonPath(innerPolygonPoints)\n\n\tconst strokeElement = document.createElementNS('http://www.w3.org/2000/svg', 'path')\n\tstrokeElement.setAttribute('d', strokePathData)\n\tstrokeElement.setAttribute('fill', 'none')\n\tstrokeElement.setAttribute('stroke', theme[color].solid)\n\tstrokeElement.setAttribute('stroke-width', strokeWidth.toString())\n\n\t// Get the fill element, if any\n\tconst fillElement = getShapeFillSvg({\n\t\td: innerPathData,\n\t\tfill,\n\t\tcolor,\n\t\ttheme,\n\t})\n\n\treturn getSvgWithShapeFill(strokeElement, fillElement)\n}\n\n// function getPolygonDrawPoints(id: string, outline: VecLike[], strokeWidth: number) {\n// \tconst points: Vec2d[] = []\n\n// \tconst getRandom = rng(id)\n\n// \tconst start = Math.round(Math.abs(getRandom()) * outline.length)\n\n// \tconst corners = outline.map((p) =>\n// \t\tVec2d.AddXY(p, (getRandom() * strokeWidth) / 4, (getRandom() * strokeWidth) / 4)\n// \t)\n\n// \tconst len = corners.length\n\n// \tfor (let i = 0, n = len + 1; i < n; i++) {\n// \t\tconst At = corners[(start + i) % len]\n// \t\tconst Bt = corners[(start + i + 1) % len]\n\n// \t\tconst dist = Math.min(Vec2d.Dist(At, Bt) / 2, strokeWidth / 2)\n// \t\tconst A = Vec2d.Nudge(At, Bt, dist)\n\n// \t\tconst D = Vec2d.Med(At, Bt)\n\n// \t\tif (i === 0) {\n// \t\t\tBt.z = 0.7\n// \t\t\tpoints.push(new Vec2d(D.x, D.y, 0.7), Bt)\n// \t\t} else if (i === outline.length) {\n// \t\t\tconst lastSegPoints = Vec2d.PointsBetween(A, D, 4)\n// \t\t\tlastSegPoints.forEach((p) => (p.z = 0.7))\n// \t\t\tpoints.push(...lastSegPoints)\n// \t\t} else {\n// \t\t\tpoints.push(...Vec2d.PointsBetween(A, Bt, 6))\n// \t\t}\n// \t}\n\n// \treturn points\n// }\n\n// export function getPolygonIndicatorPath(id: string, outline: VecLike[], strokeWidth: number) {\n// \tconst points = getPolygonDrawPoints(id, outline, strokeWidth)\n// \tconst options = getPolygonStrokeOptions(strokeWidth)\n// \tconst strokePoints = getStrokePoints(points, options)\n\n// \treturn getSvgPathFromStrokePoints(strokePoints, true)\n// }\n\n// function getPolygonStrokeOptions(strokeWidth: number) {\n// \treturn {\n// \t\tsize: 1 + strokeWidth * 0.618,\n// \t\tlast: true,\n// \t\tsimulatePressure: false,\n// \t\tstreamline: 0.25,\n// \t\tthinning: 0.9,\n// \t}\n// }\n\n// function getPolygonstrokePathData(id: string, outline: VecLike[], strokeWidth: number) {\n// \t// draw a line between all of the points\n// \tlet d = `M${outline[0].x},${outline[0].y}`\n// \td += 'Z'\n\n// \tfor (const { x, y } of outline) {\n// \t\td += `${x},${y}`\n// \t}\n\n// \treturn d\n// }\n\n// function SimpleInkyPolygon(id: string, outline: VecLike[], offset: number) {\n// \tconst random = rng(id)\n// \tlet p = outline[0]\n\n// \tlet ox = random() * offset\n// \tlet oy = random() * offset\n\n// \tlet polylineA = `M${p.x - ox},${p.y - oy}L`\n// \tlet polylineB = `${p.x + ox},${p.y + oy} `\n\n// \tfor (let i = 1, n = outline.length; i < n; i++) {\n// \t\tp = outline[i]\n// \t\tox = random() * offset\n// \t\toy = random() * offset\n\n// \t\tpolylineA += `${p.x - ox},${p.y - oy} `\n// \t\tpolylineB += `${p.x + ox},${p.y + oy} `\n// \t}\n\n// \tpolylineB += 'Z'\n\n// \tpolylineA += polylineB\n\n// \treturn polylineA\n// }\n\n// function CubicInkyPolygon(id: string, outline: VecLike[], offset: number) {\n// \tconst random = rng(id)\n// \tlet p0 = outline[0]\n// \tlet p1 = p0\n\n// \tlet ox: number\n// \tlet oy: number\n\n// \tlet polylineA = `M${p0.x},${p0.y} L`\n// \tlet polylineB = `M${p0.x},${p0.y}`\n\n// \tfor (let i = 0, n = outline.length; i < n; i++) {\n// \t\tp0 = outline[i]\n// \t\tp1 = outline[(i + 1) % n]\n\n// \t\tpolylineA += `${p1.x},${p1.y} `\n\n// \t\tox = random() * offset\n// \t\toy = random() * offset\n// \t\tconst c1 = Vec2d.Lrp(p0, p1, 0.25)\n// \t\tconst c2 = Vec2d.Lrp(p0, p1, 0.75)\n\n// \t\tpolylineB += `C${c1.x + ox},${c1.y + oy} ${c2.x - ox},${c2.y - oy} ${p1.x},${p1.y}`\n// \t}\n\n// \tpolylineB += 'Z'\n\n// \tpolylineA += polylineB\n\n// \treturn polylineA\n// }\n\n// function QuadraticInkyPolygon(id: string, outline: VecLike[], offset: number) {\n// \tconst random = rng(id)\n// \tlet p0 = outline[0]\n// \tlet p1 = p0\n\n// \tlet polylineA = `M${p0.x},${p0.y} Q`\n\n// \tconst len = outline.length\n\n// \tfor (let i = 0, n = len * 2; i < n; i++) {\n// \t\tp0 = outline[i % len]\n// \t\tp1 = outline[(i + 1) % len]\n// \t\tconst dist = Vec2d.Dist(p0, p1)\n\n// \t\tconst c1 = Vec2d.Lrp(p0, p1, 0.5 + random() / 2)\n// \t\tpolylineA += `${c1.x + random() * Math.min(dist / 10, offset)},${\n// \t\t\tc1.y + random() * Math.min(dist / 10, offset)\n// \t\t} ${p1.x + (random() * offset) / 2},${p1.y + (random() * offset) / 2} `\n// \t}\n\n// \tpolylineA += 'Z'\n\n// \treturn polylineA\n// }\n\n// function GlobyInkyPolygon(id: string, outline: VecLike[], offset: number) {\n// \tconst random = rng(id)\n// \tlet p0 = outline[0]\n// \tlet p1 = p0\n\n// \tlet polylineA = `M${p0.x},${p0.y} Q`\n\n// \tconst len = outline.length\n\n// \tfor (let i = 0, n = len * 2; i < n; i++) {\n// \t\tp0 = outline[i % len]\n// \t\tp1 = outline[(i + 1) % len]\n// \t\tconst dist = Vec2d.Dist(p0, p1)\n\n// \t\tconst c1 = Vec2d.Lrp(p0, p1, 0.5 + random() / 2)\n// \t\tpolylineA += `${c1.x + random() * Math.min(dist / 10, offset)},${\n// \t\t\tc1.y + random() * Math.min(dist / 10, offset)\n// \t\t} ${p1.x + (random() * offset) / 2},${p1.y + (random() * offset) / 2} `\n// \t}\n\n// \tpolylineA += 'Z'\n\n// \treturn polylineA\n// }\n"], "mappings": "AAqCE,mBACC,KADD;AApCF,YAAY,WAAW;AACvB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,2BAA2B,+BAA+B;AAE5D,MAAM,mBAAmB,MAAM,KAAK,SAASA,kBAAiB;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAKG;AACF,QAAM,QAAQ,qBAAqB;AACnC,QAAM,gBAAgB,wBAAwB,IAAI,SAAS,cAAc,GAAG,cAAc,GAAG,CAAC;AAC9F,MAAI,iBAAiB,0BAA0B,aAAa;AAE5D,MAAI,OAAO;AACV,eAAW,CAAC,GAAG,CAAC,KAAK,OAAO;AAC3B,wBAAkB,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;AAAA,IAC/C;AAAA,EACD;AAEA,QAAM,qBAAqB,wBAAwB,IAAI,SAAS,GAAG,cAAc,GAAG,CAAC;AACrF,QAAM,gBAAgB,0BAA0B,kBAAkB;AAElE,SACC,iCACC;AAAA,wBAAC,aAAU,GAAG,eAAe,MAAY,OAAc,OAAc;AAAA,IACrE,oBAAC,UAAK,GAAG,gBAAgB,QAAQ,MAAM,KAAK,EAAE,OAAO,aAA0B,MAAK,QAAO;AAAA,KAC5F;AAEF,CAAC;AAEM,SAAS,oBAAoB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,gBAAgB,wBAAwB,IAAI,SAAS,cAAc,GAAG,cAAc,GAAG,CAAC;AAE9F,MAAI,iBAAiB,0BAA0B,aAAa;AAE5D,MAAI,OAAO;AACV,eAAW,CAAC,GAAG,CAAC,KAAK,OAAO;AAC3B,wBAAkB,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,CAAC;AAAA,IAC/C;AAAA,EACD;AAEA,QAAM,qBAAqB,wBAAwB,IAAI,SAAS,GAAG,cAAc,GAAG,CAAC;AACrF,QAAM,gBAAgB,0BAA0B,kBAAkB;AAElE,QAAM,gBAAgB,SAAS,gBAAgB,8BAA8B,MAAM;AACnF,gBAAc,aAAa,KAAK,cAAc;AAC9C,gBAAc,aAAa,QAAQ,MAAM;AACzC,gBAAc,aAAa,UAAU,MAAM,KAAK,EAAE,KAAK;AACvD,gBAAc,aAAa,gBAAgB,YAAY,SAAS,CAAC;AAGjE,QAAM,cAAc,gBAAgB;AAAA,IACnC,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAC;AAED,SAAO,oBAAoB,eAAe,WAAW;AACtD;", "names": ["DrawStylePolygon"] }