tldraw
Version:
A tiny little drawing editor.
8 lines (7 loc) • 7.11 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/lib/canvas/TldrawCropHandles.tsx"],
"sourcesContent": ["import { toDomPrecision } from '@tldraw/editor'\nimport classNames from 'classnames'\n\nexport interface TldrawCropHandlesProps {\n\tsize: number\n\twidth: number\n\theight: number\n\thideAlternateHandles: boolean\n}\n\nexport function TldrawCropHandles({\n\tsize,\n\twidth,\n\theight,\n\thideAlternateHandles,\n}: TldrawCropHandlesProps) {\n\tconst cropStrokeWidth = toDomPrecision(size / 3)\n\tconst offset = cropStrokeWidth / 2\n\n\treturn (\n\t\t<svg className=\"tl-overlays__item\">\n\t\t\t{/* Top left */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(size)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(size)},${toDomPrecision(0 - offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_left\"\n\t\t\t\taria-label=\"top_left handle\"\n\t\t\t/>\n\t\t\t{/* Top */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(0 - offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(0 - offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top\"\n\t\t\t\taria-label=\"top handle\"\n\t\t\t/>\n\t\t\t{/* Top right */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(0 - offset)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.top_right\"\n\t\t\t\taria-label=\"top_right handle\"\n\t\t\t/>\n\t\t\t{/* Right */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width + offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(width + offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.right\"\n\t\t\t\taria-label=\"right handle\"\n\t\t\t/>\n\t\t\t{/* Bottom right */}\n\t\t\t<polyline\n\t\t\t\tclassName=\"tl-corner-crop-handle\"\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height - size)} \n\t\t\t\t\t\t${toDomPrecision(width + offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(width - size)},${toDomPrecision(height + offset)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_right\"\n\t\t\t\taria-label=\"bottom_right handle\"\n\t\t\t/>\n\t\t\t{/* Bottom */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(width / 2 - size)}\n\t\t\t\ty1={toDomPrecision(height + offset)}\n\t\t\t\tx2={toDomPrecision(width / 2 + size)}\n\t\t\t\ty2={toDomPrecision(height + offset)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom\"\n\t\t\t\taria-label=\"bottom handle\"\n\t\t\t/>\n\t\t\t{/* Bottom left */}\n\t\t\t<polyline\n\t\t\t\tclassName={classNames('tl-corner-crop-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tpoints={`\n\t\t\t\t\t\t${toDomPrecision(0 + size)},${toDomPrecision(height + offset)} \n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height + offset)}\n\t\t\t\t\t\t${toDomPrecision(0 - offset)},${toDomPrecision(height - size)}`}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.bottom_left\"\n\t\t\t\taria-label=\"bottom_left handle\"\n\t\t\t/>\n\t\t\t{/* Left */}\n\t\t\t<line\n\t\t\t\tclassName={classNames('tl-corner-crop-edge-handle', {\n\t\t\t\t\t'tl-hidden': hideAlternateHandles,\n\t\t\t\t})}\n\t\t\t\tx1={toDomPrecision(0 - offset)}\n\t\t\t\ty1={toDomPrecision(height / 2 - size)}\n\t\t\t\tx2={toDomPrecision(0 - offset)}\n\t\t\t\ty2={toDomPrecision(height / 2 + size)}\n\t\t\t\tstrokeWidth={cropStrokeWidth}\n\t\t\t\tdata-testid=\"selection.crop.left\"\n\t\t\t\taria-label=\"left handle\"\n\t\t\t/>\n\t\t</svg>\n\t)\n}\n"],
"mappings": "AAoBE,SAEC,KAFD;AApBF,SAAS,sBAAsB;AAC/B,OAAO,gBAAgB;AAShB,SAAS,kBAAkB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,kBAAkB,eAAe,OAAO,CAAC;AAC/C,QAAM,SAAS,kBAAkB;AAEjC,SACC,qBAAC,SAAI,WAAU,qBAEd;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,QAAQ;AAAA,QACJ,eAAe,IAAI,MAAM,CAAC,IAAI,eAAe,IAAI,CAAC;AAAA,QAClD,eAAe,IAAI,MAAM,CAAC,IAAI,eAAe,IAAI,MAAM,CAAC;AAAA,QACxD,eAAe,IAAI,CAAC,IAAI,eAAe,IAAI,MAAM,CAAC;AAAA,QACtD,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,cAAW;AAAA;AAAA,IACZ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,8BAA8B;AAAA,UACnD,aAAa;AAAA,QACd,CAAC;AAAA,QACD,IAAI,eAAe,QAAQ,IAAI,IAAI;AAAA,QACnC,IAAI,eAAe,IAAI,MAAM;AAAA,QAC7B,IAAI,eAAe,QAAQ,IAAI,IAAI;AAAA,QACnC,IAAI,eAAe,IAAI,MAAM;AAAA,QAC7B,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,cAAW;AAAA;AAAA,IACZ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,yBAAyB;AAAA,UAC9C,aAAa;AAAA,QACd,CAAC;AAAA,QACD,QAAQ;AAAA,QACJ,eAAe,QAAQ,IAAI,CAAC,IAAI,eAAe,IAAI,MAAM,CAAC;AAAA,QAC1D,eAAe,QAAQ,MAAM,CAAC,IAAI,eAAe,IAAI,MAAM,CAAC;AAAA,QAC5D,eAAe,QAAQ,MAAM,CAAC,IAAI,eAAe,IAAI,CAAC;AAAA,QAC1D,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,cAAW;AAAA;AAAA,IACZ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,8BAA8B;AAAA,UACnD,aAAa;AAAA,QACd,CAAC;AAAA,QACD,IAAI,eAAe,QAAQ,MAAM;AAAA,QACjC,IAAI,eAAe,SAAS,IAAI,IAAI;AAAA,QACpC,IAAI,eAAe,QAAQ,MAAM;AAAA,QACjC,IAAI,eAAe,SAAS,IAAI,IAAI;AAAA,QACpC,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,cAAW;AAAA;AAAA,IACZ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,QAAQ;AAAA,QACJ,eAAe,QAAQ,MAAM,CAAC,IAAI,eAAe,SAAS,IAAI,CAAC;AAAA,QAC/D,eAAe,QAAQ,MAAM,CAAC,IAAI,eAAe,SAAS,MAAM,CAAC;AAAA,QACjE,eAAe,QAAQ,IAAI,CAAC,IAAI,eAAe,SAAS,MAAM,CAAC;AAAA,QACnE,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,cAAW;AAAA;AAAA,IACZ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,8BAA8B;AAAA,UACnD,aAAa;AAAA,QACd,CAAC;AAAA,QACD,IAAI,eAAe,QAAQ,IAAI,IAAI;AAAA,QACnC,IAAI,eAAe,SAAS,MAAM;AAAA,QAClC,IAAI,eAAe,QAAQ,IAAI,IAAI;AAAA,QACnC,IAAI,eAAe,SAAS,MAAM;AAAA,QAClC,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,cAAW;AAAA;AAAA,IACZ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,yBAAyB;AAAA,UAC9C,aAAa;AAAA,QACd,CAAC;AAAA,QACD,QAAQ;AAAA,QACJ,eAAe,IAAI,IAAI,CAAC,IAAI,eAAe,SAAS,MAAM,CAAC;AAAA,QAC3D,eAAe,IAAI,MAAM,CAAC,IAAI,eAAe,SAAS,MAAM,CAAC;AAAA,QAC7D,eAAe,IAAI,MAAM,CAAC,IAAI,eAAe,SAAS,IAAI,CAAC;AAAA,QAC/D,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,cAAW;AAAA;AAAA,IACZ;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,WAAW,8BAA8B;AAAA,UACnD,aAAa;AAAA,QACd,CAAC;AAAA,QACD,IAAI,eAAe,IAAI,MAAM;AAAA,QAC7B,IAAI,eAAe,SAAS,IAAI,IAAI;AAAA,QACpC,IAAI,eAAe,IAAI,MAAM;AAAA,QAC7B,IAAI,eAAe,SAAS,IAAI,IAAI;AAAA,QACpC,aAAa;AAAA,QACb,eAAY;AAAA,QACZ,cAAW;AAAA;AAAA,IACZ;AAAA,KACD;AAEF;",
"names": []
}