From e5263ca772091053a085d33b3127f5dc23b40d46 Mon Sep 17 00:00:00 2001 From: ThePaulin Date: Fri, 5 Jul 2024 01:48:38 -0400 Subject: [PATCH] add rendering of custom icon --- README.md | 4 +++- .../React360Viewer/React360Viewer.tsx | 23 +++++++++++++------ 2 files changed, 19 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index a4a4ec5..f0b558c 100644 --- a/README.md +++ b/README.md @@ -132,7 +132,8 @@ _For more example and a playground please refer to [storybook](https://todilo.gi | Parameter | Type | Default | Description | Example | | ------------------------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | | imagesCount | number | none | Set the number of images in your sequence | 35 | -| imageBaseUrl | string | none | Set URL from the base of your homepage | ./imageSeries/ | +| imageBaseUrl | string | none | Set URL from the base of your homepage | | imageIndexSeparator | string | none | Set URL from the base of your homepage | +./imageSeries/ | | imagesFileTyp | string | none | Image type (anything that can be rendered in an _img_ tag) | png | | imageFilenamePrefix | string | none | Add a prefix before the image number | shoe (if entire image filename is shoe2.png) | | imageInitialIndex | number | 0 | Which imagenumber to show on component load | 10 | @@ -145,6 +146,7 @@ _For more example and a playground please refer to [storybook](https://todilo.gi | height | number | 150 | Height of the image | 150 | | zeroPad | ZeroPadRange (number 0 to 9) | 0 | Num zeros to prepend to your image number (if you set 1, your image numbers will be 01, 02..., 09, 10, 11) | 1 | | showRotationIconOnStartup | boolean | false | If true, a small icon representing a rotation which should inform the user that the component can be rotated. | false | +| customRotationIcon | function returning SVG icon | | Set rotation icon that renders on startup | () => SOME JSX or SVG | | shouldNotifyEvents | boolean | false | If true the component will notify on some events. This can be a lot of event so use with caution. | false | | notifyOnPointerDown | function | not set | Pass your own function that takes x, y as arguments. Will be called when mouse or touch is pressed. | - | | notifyOnPointerUp | function | not set | Pass your own function that takes x, y as arguments . Will be called when mouse or touch is released. | - | diff --git a/src/components/React360Viewer/React360Viewer.tsx b/src/components/React360Viewer/React360Viewer.tsx index e8c0c82..d26af2e 100644 --- a/src/components/React360Viewer/React360Viewer.tsx +++ b/src/components/React360Viewer/React360Viewer.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react"; import styled, { css } from "styled-components"; import AnimationImage from "../AnimationImage/AnimationImage"; import StyledRotateIcon from "../icons/StyledRotateIcon"; -import type { HtmlHTMLAttributes } from "react"; +import type { HtmlHTMLAttributes, ReactNode } from "react"; // The regular % can return negative numbers. function moduloWithoutNegative(value: number, n: number): number { @@ -26,6 +26,7 @@ export interface React360ViewerProps { height?: number; zeroPad?: ZeroPadRange; showRotationIconOnStartup?: boolean; + customRotationIcon?: () => ReactNode; notifyOnPointerDown?: (x: number, y: number) => void; notifyOnPointerUp?: (x: number, y: number) => void; notifyOnPointerMoved?: (x: number, y: number) => void; @@ -71,6 +72,7 @@ export const React360Viewer = ({ height = 150, zeroPad = 0, showRotationIconOnStartup = false, + customRotationIcon, imageInitialIndex = 0, shouldNotifyEvents = false, notifyOnPointerDown, @@ -142,9 +144,8 @@ export const React360Viewer = ({ let fileType = imagesFiletype.replace(".", ""); for (let i = 1; i <= imagesCount; i++) { srces.push({ - src: `${baseUrl}${imageFilenamePrefix ? imageFilenamePrefix : ""}${ - !!zeroPad ? String(i).padStart(zeroPad + 1, "0") : i - }.${fileType}`, + src: `${baseUrl}${imageFilenamePrefix ? imageFilenamePrefix : ""}${!!zeroPad ? String(i).padStart(zeroPad + 1, "0") : i + }.${fileType}`, index: i.toString(), }); } @@ -237,11 +238,19 @@ export const React360Viewer = ({ onPointerDown={onMouseDown} // onPointerUp={onMouseUp} onPointerMove={onMouseMove} - // onMouseDown={onMouseDown} - // onMouseMove={onMouseMove} + // onMouseDown={onMouseDown} + // onMouseMove={onMouseMove} > {showRotationIcon ? ( - + <> + { + customRotationIcon ? ( + <>{customRotationIcon()} + ) : ( + + ) + } + ) : null} {imageSources.map((s, index) => (