Merge pull request #1439 from ItsEeleeya/rive-dpr

Use devicePixelRatio for rive in app

Author: richiemcilroy

apps/desktop/package.json

@@ -19,7 +19,7 @@
 		"@intercom/messenger-js-sdk": "^0.0.14",
 		"@kobalte/core": "^0.13.7",
 		"@radix-ui/colors": "^3.0.0",
-		"@rive-app/canvas": "^2.26.7",
+		"@rive-app/canvas": "^2.32.2",
 		"@solid-primitives/bounds": "^0.0.122",
 		"@solid-primitives/broadcast-channel": "^0.1.1",
 		"@solid-primitives/context": "^0.2.3",

apps/desktop/src/routes/(window-chrome)/settings/license.tsx

@@ -1,4 +1,3 @@
-import { createRive } from "@aerofoil/rive-solid-canvas";
 import { Button } from "@cap/ui-solid";
 import type { licenseContract } from "@cap/web-api-contract";
 import { createMutation, useQueryClient } from "@tanstack/solid-query";
@@ -13,6 +12,7 @@ import {
 } from "solid-js";
 import { generalSettingsStore } from "~/store";
 import { createLicenseQuery } from "~/utils/queries";
+import { createRive } from "~/utils/rive";
 import { commands } from "~/utils/tauri";
 import { licenseApiClient } from "~/utils/web-api";
 import PricingRive from "../../../assets/rive/pricing.riv";

apps/desktop/src/routes/(window-chrome)/upgrade.tsx

@@ -1,11 +1,11 @@
-import { createRive } from "@aerofoil/rive-solid-canvas";
 import { Button } from "@cap/ui-solid";
 import { createMutation, useQueryClient } from "@tanstack/solid-query";
 import { getCurrentWindow, Window } from "@tauri-apps/api/window";
 import { type Accessor, createSignal, Show } from "solid-js";
 import { generalSettingsStore } from "~/store";
 import { getProPlanId } from "~/utils/plans";
 import { createLicenseQuery } from "~/utils/queries";
+import { createRive } from "~/utils/rive";
 import { commands } from "~/utils/tauri";
 import { apiClient, licenseApiClient, protectedHeaders } from "~/utils/web-api";
 import PricingRive from "../../assets/rive/pricing.riv";

apps/desktop/src/utils/rive.ts

@@ -0,0 +1,20 @@
+import { createRive as riveSolidCanvas_createRive } from "@aerofoil/rive-solid-canvas";
+import type { Rive as InternalRive, RiveParameters } from "@rive-app/canvas";
+import { type Accessor, createEffect, type JSX } from "solid-js";
+
+export function createRive(
+	riveParameters: Accessor<Omit<RiveParameters, "canvas">>,
+): {
+	canvas: () => Accessor<HTMLCanvasElement | undefined>;
+	rive: Accessor<InternalRive | undefined>;
+	RiveComponent: (
+		props: JSX.CanvasHTMLAttributes<HTMLCanvasElement>,
+	) => JSX.Element;
+} {
+	const { canvas, rive, RiveComponent } =
+		riveSolidCanvas_createRive(riveParameters);
+
+	createEffect(() => rive()?.resizeDrawingSurfaceToCanvas());
+
+	return { canvas, rive, RiveComponent };
+}