From 7c14d23da8544c0ec0f8ddcd7f54bb0c07139564 Mon Sep 17 00:00:00 2001 From: Arthur Vivian Date: Wed, 15 Dec 2021 17:41:28 +0000 Subject: [PATCH] Add example of webgl issues --- examples/basic/public/flower.riv | Bin 0 -> 3498 bytes examples/basic/src/App.js | 10 +++-- examples/basic/src/FlowerExample.js | 48 +++++++++++++++++++++ examples/basic/src/SizeExample.js | 48 +++++++++++++++++++++ package-lock.json | 63 +++++++++++++++++++++++----- package.json | 2 +- src/components/Rive.tsx | 2 +- src/hooks/useRive.tsx | 13 +++--- src/hooks/useStateMachineInput.ts | 2 +- src/index.ts | 2 +- src/types.ts | 2 +- tsconfig.json | 1 + 12 files changed, 167 insertions(+), 26 deletions(-) create mode 100644 examples/basic/public/flower.riv create mode 100644 examples/basic/src/FlowerExample.js create mode 100644 examples/basic/src/SizeExample.js diff --git a/examples/basic/public/flower.riv b/examples/basic/public/flower.riv new file mode 100644 index 0000000000000000000000000000000000000000..7d4fa91333619e388fd2bb583423a6788ff5c90c GIT binary patch literal 3498 zcma)hN+LSb##0b$H(aC)KRBxJZF;y7Tp;?+{518 z%kP|f&pH3ytXR5wv6Vy*r1vw2n8VBn^B(g)6K9Bt5RwifhcFhdv8(6y_N}e$y=~oF zy4tOT{4K+?zhxVVyz;J{klbNnw$P@|jvK?2IQQ&!NshQ}UzGQ}y}eEll*jAXf#tn2 zH$L%01F=vhbN_2jISUODsOW#AXW0>V{sT`Q@qE4V`-Wn?BD1L(hnPqth>wtnq|F9> znSDpR!@SR5nwpGXW`FYY*?^ZrD4STLGZI2Zncpd~XD5y~)$s=(d|ndJupbdhuIn&%i z{+h$>-CN*1_to7hbK4$ZWWv)tl1B4$38{G76@2rNhLuneWYy4uUG=L&&bV~#O$S(+ zP+SpNH|QFB>2;Z8)46_}xz*WhS}11Ne0bJ{Viymmt0ps>&MQtm_lUu)4t(wrZ8mS} zxs&?6cDp@6GARSY3WI}@1p}&$S}z%Lx$5B}?-D|S+C@=4DXhw<-`v^V7VhlXTr|JB zw}yf8O;yTN*%Ff_Lk@54YTcyPH6@OPryhy2b8BGVLgz0sDTP}_M)aHycbLxbcOdXkyluRxYT^6 z{7?far`)DUg6Y_1+6;eswwboTpIf$>l90)q%%eOhqZwV8*={wnbE&h{w7&dk&EYmo z$PHkk8*sW2ciXP+7T1`K*OYwxqD*j&#dytcZ(V^Ek*}+WY^@@)bro@uRuL|(B3#od zBA42=T;m1gIv=vlru}PmPR`&H z#$v(#wvxzGAZn2(P}F!7wTc+jiKU@u;~kXn%f8tm320an$&xt|nJq($rX-K~Pss~k zeqB8`F;Y1UvSiY=soOyEEYJlOo#d&re@Pw##B?3eW6=0^t?});#92C&7V?%q7asA)%2(uZ(>?#b!Ru2mRY!Qh`0veXw_mIpDgl8damNAS?MRvSS z4_gSZ0r!w3pkc}A(=jfuEUEy^VGQH7ZO(vI0_@o@IwS!N`YW&*+ZgFlksv}d zkBy`7261=LSbNeL zWp8MDM$u~9Z;UKUA+;8sJWJ@5B=W2N$0VV<|FI~$-us-wiIt-m - - + <> + + + ); } diff --git a/examples/basic/src/FlowerExample.js b/examples/basic/src/FlowerExample.js new file mode 100644 index 0000000..4f64948 --- /dev/null +++ b/examples/basic/src/FlowerExample.js @@ -0,0 +1,48 @@ +import { useEffect, useState } from 'react'; +import { useRive } from 'rive-react'; + +function FlowerExample() { + const { rive, canvas, RiveComponent } = useRive({ + src: 'flower.riv', + artboard: 'Motion', + animations: 'Animation 1', + autoplay: true, + }); + + useEffect(() => { + console.log('change'); + if (canvas) { + canvas.width = 200; + canvas.height = 200; + } + }, [canvas]); + + function onLargerClick() { + if (rive && canvas) { + canvas.width = canvas.width + 50; + canvas.height = canvas.height + 50; + rive.resizeToCanvas(); + } + } + + function onSmallerClick() { + if (rive && canvas && canvas.width > 0) { + canvas.width = canvas.width - 50; + canvas.height = canvas.height - 50; + rive.resizeToCanvas(); + } + } + + return ( + // The animation will fit to the parent element. + <> + + +
+ +
+ + ); +} + +export default FlowerExample; diff --git a/examples/basic/src/SizeExample.js b/examples/basic/src/SizeExample.js new file mode 100644 index 0000000..9faed1f --- /dev/null +++ b/examples/basic/src/SizeExample.js @@ -0,0 +1,48 @@ +import { useEffect, useState } from 'react'; +import { useRive } from 'rive-react'; + +function SizeExample() { + const { rive, canvas, RiveComponent } = useRive({ + src: 'poison-loader.riv', + // artboard: 'Motion', + // animations: 'Animation 1', + autoplay: true, + }); + + useEffect(() => { + console.log('change'); + if (canvas) { + canvas.width = 200; + canvas.height = 200; + } + }, [canvas]); + + function onLargerClick() { + if (rive && canvas) { + canvas.width = canvas.width + 50; + canvas.height = canvas.height + 50; + rive.resizeToCanvas(); + } + } + + function onSmallerClick() { + if (rive && canvas && canvas.width > 0) { + canvas.width = canvas.width - 50; + canvas.height = canvas.height - 50; + rive.resizeToCanvas(); + } + } + + return ( + // The animation will fit to the parent element. + <> + + +
+ +
+ + ); +} + +export default SizeExample; diff --git a/package-lock.json b/package-lock.json index 8380a1a..92b3333 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.26", "license": "MIT", "dependencies": { - "rive-js": "0.7.33" + "@rive/webgl_single": "file:../rive-wasm/js/npm/webgl_single" }, "devDependencies": { "@testing-library/jest-dom": "^5.13.0", @@ -42,6 +42,50 @@ "react": "^16.8.0 || ^17.0.0" } }, + "../rive-wasm/js": { + "name": "rive-js", + "version": "1.0.0", + "license": "MIT", + "devDependencies": { + "@babel/core": "^7.14.3", + "@babel/plugin-transform-modules-commonjs": "^7.14.0", + "@babel/preset-env": "^7.14.4", + "@babel/preset-typescript": "^7.13.0", + "@types/jest": "^26.0.23", + "babel-jest": "^27.0.2", + "jest": "^26.6.3", + "jest-canvas-mock": "^2.3.1", + "ts-jest": "^26.5.6", + "ts-loader": "^9.2.3", + "typescript": "^4.3.2", + "webpack": "^5.38.1", + "webpack-cli": "^4.7.2" + } + }, + "../rive-wasm/js/npm": {}, + "../rive-wasm/js/npm/canvas": { + "name": "@rive/canvas", + "version": "1.0.0", + "extraneous": true, + "license": "MIT" + }, + "../rive-wasm/js/npm/canvas_single": { + "name": "@rive/canvas-single", + "version": "1.0.0", + "extraneous": true, + "license": "MIT" + }, + "../rive-wasm/js/npm/webgl": { + "name": "@rive/webgl", + "version": "1.0.0", + "extraneous": true, + "license": "MIT" + }, + "../rive-wasm/js/npm/webgl_single": { + "name": "@rive/webgl-single", + "version": "1.0.0", + "license": "MIT" + }, "node_modules/@babel/code-frame": { "version": "7.16.0", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz", @@ -2337,6 +2381,10 @@ "@octokit/openapi-types": "^7.3.5" } }, + "node_modules/@rive/webgl_single": { + "resolved": "../rive-wasm/js/npm/webgl_single", + "link": true + }, "node_modules/@rollup/plugin-babel": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.2.1.tgz", @@ -9518,11 +9566,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/rive-js": { - "version": "0.7.33", - "resolved": "https://registry.npmjs.org/rive-js/-/rive-js-0.7.33.tgz", - "integrity": "sha512-u/dqr4XYx1TOo5xtSCN+6YvUKYU88ii6xWP82Xz15O4OqF3GM1Pa4WXx4dEOa6QG6IqbM0JcfsAhae7TjVZf6Q==" - }, "node_modules/rollup": { "version": "1.32.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.0.tgz", @@ -12704,6 +12747,9 @@ "@octokit/openapi-types": "^7.3.5" } }, + "@rive/webgl_single": { + "version": "file:../rive-wasm/js/npm/webgl_single" + }, "@rollup/plugin-babel": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.2.1.tgz", @@ -18100,11 +18146,6 @@ "glob": "^7.1.3" } }, - "rive-js": { - "version": "0.7.33", - "resolved": "https://registry.npmjs.org/rive-js/-/rive-js-0.7.33.tgz", - "integrity": "sha512-u/dqr4XYx1TOo5xtSCN+6YvUKYU88ii6xWP82Xz15O4OqF3GM1Pa4WXx4dEOa6QG6IqbM0JcfsAhae7TjVZf6Q==" - }, "rollup": { "version": "1.32.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.0.tgz", diff --git a/package.json b/package.json index 4be60b0..4438144 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,7 @@ }, "homepage": "https://github.com/rive-app/rive-react#readme", "dependencies": { - "rive-js": "0.7.33" + "@rive/webgl_single": "file:../rive-wasm/js/npm/webgl_single" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0" diff --git a/src/components/Rive.tsx b/src/components/Rive.tsx index d759ffe..1ea9f75 100644 --- a/src/components/Rive.tsx +++ b/src/components/Rive.tsx @@ -1,4 +1,4 @@ -import { Layout } from 'rive-js'; +import { Layout } from '@rive/webgl_single'; import React, { ComponentProps } from 'react'; import useRive from '../hooks/useRive'; diff --git a/src/hooks/useRive.tsx b/src/hooks/useRive.tsx index 131ba33..49f32ab 100644 --- a/src/hooks/useRive.tsx +++ b/src/hooks/useRive.tsx @@ -6,7 +6,7 @@ import React, { ComponentProps, RefCallback, } from 'react'; -import { Rive, EventType } from 'rive-js'; +import { Rive, EventType } from '@rive/webgl_single'; import { UseRiveParameters, UseRiveOptions, @@ -125,11 +125,12 @@ export default function useRive( containerRef.current.style.height = height + 'px'; } if (options.useDevicePixelRatio) { - const dpr = window.devicePixelRatio || 1; - canvasRef.current.width = dpr * width; - canvasRef.current.height = dpr * height; - canvasRef.current.style.width = width + 'px'; - canvasRef.current.style.height = height + 'px'; + console.log('updating canvas width, height'); + // const dpr = window.devicePixelRatio || 1; + // canvasRef.current.width = dpr * width; + // canvasRef.current.height = dpr * height; + // canvasRef.current.style.width = width + 'px'; + // canvasRef.current.style.height = height + 'px'; } else { canvasRef.current.width = width; canvasRef.current.height = height; diff --git a/src/hooks/useStateMachineInput.ts b/src/hooks/useStateMachineInput.ts index 8183108..c37e204 100644 --- a/src/hooks/useStateMachineInput.ts +++ b/src/hooks/useStateMachineInput.ts @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import { Rive, StateMachineInput } from 'rive-js'; +import { Rive, StateMachineInput } from '@rive/webgl_single'; /** * Custom hook for fetching a stateMachine input from a rive file. diff --git a/src/index.ts b/src/index.ts index d467f28..316196f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,4 +5,4 @@ import useStateMachineInput from './hooks/useStateMachineInput'; export default Rive; export { useRive, useStateMachineInput }; export { RiveState, UseRiveParameters, UseRiveOptions } from './types'; -export * from 'rive-js'; +export * from '@rive/webgl_single'; diff --git a/src/types.ts b/src/types.ts index 074ece6..029b0c1 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,5 @@ import { RefCallback, ComponentProps } from 'react'; -import { Rive, RiveParameters } from 'rive-js'; +import { Rive, RiveParameters } from '@rive/webgl_single'; export type UseRiveParameters = Partial> | null; diff --git a/tsconfig.json b/tsconfig.json index d27a1a3..de28a91 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,6 +6,7 @@ "lib": ["esnext", "dom"], "module": "commonjs", "moduleResolution": "node", + "noImplicitAny": false, "noFallthroughCasesInSwitch": true, "noUnusedLocals": true, "noUnusedParameters": true,