diff options
| author | Maze Winther <mazewinther@gmail.com> | 2026-03-27 00:55:15 +0100 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2026-03-29 15:56:48 +0200 |
| commit | 4d127a038bf768eded68aae3cfa5c1b12241bdac (patch) | |
| tree | 16bbb801caf6770546cff4fdb37b6408ec9ead98 /apps/web/src/lib/graphics/stroke.ts | |
| parent | 82817cb50cb0487350573d6129130aec705f924b (diff) | |
| download | opencut-4d127a038bf768eded68aae3cfa5c1b12241bdac.tar.gz | |
chore: normalize line endings
Diffstat (limited to 'apps/web/src/lib/graphics/stroke.ts')
| -rw-r--r-- | apps/web/src/lib/graphics/stroke.ts | 204 |
1 files changed, 102 insertions, 102 deletions
diff --git a/apps/web/src/lib/graphics/stroke.ts b/apps/web/src/lib/graphics/stroke.ts index 98f9f43f..230d9904 100644 --- a/apps/web/src/lib/graphics/stroke.ts +++ b/apps/web/src/lib/graphics/stroke.ts @@ -1,102 +1,102 @@ -import type { GraphicStrokeAlign } from "./definitions/shared"; - -type GraphicRenderContext = - | CanvasRenderingContext2D - | OffscreenCanvasRenderingContext2D; - -function createTempCanvas({ - width, - height, -}: { - width: number; - height: number; -}): OffscreenCanvas | HTMLCanvasElement { - try { - return new OffscreenCanvas(width, height); - } catch { - const canvas = document.createElement("canvas"); - canvas.width = width; - canvas.height = height; - return canvas; - } -} - -function applyStroke({ - ctx, - path, - strokeWidth, - strokeColor, -}: { - ctx: GraphicRenderContext; - path: Path2D; - strokeWidth: number; - strokeColor: string; -}) { - ctx.strokeStyle = strokeColor; - ctx.lineWidth = strokeWidth; - ctx.stroke(path); -} - -export function applyAlignedStroke({ - ctx, - path, - strokeWidth, - strokeAlign, - strokeColor, -}: { - ctx: GraphicRenderContext; - path: Path2D; - strokeWidth: number; - strokeAlign: GraphicStrokeAlign; - strokeColor: string; -}): void { - if (strokeWidth <= 0) { - return; - } - - if (strokeAlign === "inside") { - ctx.save(); - ctx.clip(path); - applyStroke({ - ctx, - path, - strokeWidth: strokeWidth * 2, - strokeColor, - }); - ctx.restore(); - return; - } - - if (strokeAlign === "outside") { - const strokeCanvas = createTempCanvas({ - width: ctx.canvas.width, - height: ctx.canvas.height, - }); - const strokeCtx = strokeCanvas.getContext("2d") as GraphicRenderContext | null; - if (!strokeCtx) { - return; - } - - applyStroke({ - ctx: strokeCtx, - path, - strokeWidth: strokeWidth * 2, - strokeColor, - }); - - // Keep only the outer half of the doubled stroke so alpha fills do not - // leave a visible inner stroke behind. - strokeCtx.globalCompositeOperation = "destination-out"; - strokeCtx.fill(path); - - ctx.drawImage(strokeCanvas, 0, 0); - return; - } - - applyStroke({ - ctx, - path, - strokeWidth, - strokeColor, - }); -} +import type { GraphicStrokeAlign } from "./definitions/shared";
+
+type GraphicRenderContext =
+ | CanvasRenderingContext2D
+ | OffscreenCanvasRenderingContext2D;
+
+function createTempCanvas({
+ width,
+ height,
+}: {
+ width: number;
+ height: number;
+}): OffscreenCanvas | HTMLCanvasElement {
+ try {
+ return new OffscreenCanvas(width, height);
+ } catch {
+ const canvas = document.createElement("canvas");
+ canvas.width = width;
+ canvas.height = height;
+ return canvas;
+ }
+}
+
+function applyStroke({
+ ctx,
+ path,
+ strokeWidth,
+ strokeColor,
+}: {
+ ctx: GraphicRenderContext;
+ path: Path2D;
+ strokeWidth: number;
+ strokeColor: string;
+}) {
+ ctx.strokeStyle = strokeColor;
+ ctx.lineWidth = strokeWidth;
+ ctx.stroke(path);
+}
+
+export function applyAlignedStroke({
+ ctx,
+ path,
+ strokeWidth,
+ strokeAlign,
+ strokeColor,
+}: {
+ ctx: GraphicRenderContext;
+ path: Path2D;
+ strokeWidth: number;
+ strokeAlign: GraphicStrokeAlign;
+ strokeColor: string;
+}): void {
+ if (strokeWidth <= 0) {
+ return;
+ }
+
+ if (strokeAlign === "inside") {
+ ctx.save();
+ ctx.clip(path);
+ applyStroke({
+ ctx,
+ path,
+ strokeWidth: strokeWidth * 2,
+ strokeColor,
+ });
+ ctx.restore();
+ return;
+ }
+
+ if (strokeAlign === "outside") {
+ const strokeCanvas = createTempCanvas({
+ width: ctx.canvas.width,
+ height: ctx.canvas.height,
+ });
+ const strokeCtx = strokeCanvas.getContext("2d") as GraphicRenderContext | null;
+ if (!strokeCtx) {
+ return;
+ }
+
+ applyStroke({
+ ctx: strokeCtx,
+ path,
+ strokeWidth: strokeWidth * 2,
+ strokeColor,
+ });
+
+ // Keep only the outer half of the doubled stroke so alpha fills do not
+ // leave a visible inner stroke behind.
+ strokeCtx.globalCompositeOperation = "destination-out";
+ strokeCtx.fill(path);
+
+ ctx.drawImage(strokeCanvas, 0, 0);
+ return;
+ }
+
+ applyStroke({
+ ctx,
+ path,
+ strokeWidth,
+ strokeColor,
+ });
+}
|