diff --git a/README.md b/README.md index 4c40ac1..a4a4ec5 100644 --- a/README.md +++ b/README.md @@ -129,25 +129,26 @@ _For more example and a playground please refer to [storybook](https://todilo.gi # API -| 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/ | -| 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 | -| mouseDragSPeed | number | 20 | How fast to change images when pointer moves | 20 | -| autoplaySpeed | number | 10 | How fast to change images when autoplay is active | 10 | -| reverse | boolean | false | Reverse the order of images displayed. Applicable for both pointer as well as autoplay | false | -| autoplay | boolean | false | Should the images automatically change on component load | false | -| width | number | 150 | With of the image | 150 | -| 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 | -| 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. | - | -| notifyOnPointerMoved | function | not set | Pass your own function that takes x, y as arguments . Will be called any time the mouse or touch is moved if being pressed down. | | +| 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/ | +| 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 | +| mouseDragSPeed | number | 20 | How fast to change images when pointer moves | 20 | +| autoplaySpeed | number | 10 | How fast to change images when autoplay is active | 10 | +| reverse | boolean | false | Reverse the order of images displayed. Applicable for both pointer as well as autoplay | false | +| autoplay | boolean | false | Should the images automatically change on component load | false | +| autoplayTarget | number | none | The autoplay will stop on given image index | 15 | +| width | number | 150 | With of the image | 150 | +| 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 | +| 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. | - | +| notifyOnPointerMoved | function | not set | Pass your own function that takes x, y as arguments . Will be called any time the mouse or touch is moved if being pressed down. | | diff --git a/src/components/React360Viewer/React360Viewer.tsx b/src/components/React360Viewer/React360Viewer.tsx index c5802f2..e8c0c82 100644 --- a/src/components/React360Viewer/React360Viewer.tsx +++ b/src/components/React360Viewer/React360Viewer.tsx @@ -2,6 +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"; // The regular % can return negative numbers. function moduloWithoutNegative(value: number, n: number): number { @@ -20,6 +21,7 @@ export interface React360ViewerProps { autoplaySpeed?: number; reverse?: boolean; autoplay?: boolean; + autoplayTarget?: number; width?: number; height?: number; zeroPad?: ZeroPadRange; @@ -30,6 +32,10 @@ export interface React360ViewerProps { shouldNotifyEvents?: boolean; } +/** Base props *and* all available HTML div element props. */ +export type React360ViewerPropsExtended = HtmlHTMLAttributes & + React360ViewerProps; + interface StyleProps { isGrabbing: boolean; } @@ -60,6 +66,7 @@ export const React360Viewer = ({ reverse = false, autoplaySpeed = 10, autoplay = false, + autoplayTarget, width = 150, height = 150, zeroPad = 0, @@ -69,7 +76,7 @@ export const React360Viewer = ({ notifyOnPointerDown, notifyOnPointerUp, notifyOnPointerMoved, -}: React360ViewerProps) => { +}: React360ViewerPropsExtended) => { const elementRef = useRef(null); const [isScrolling, setIsScrolling] = useState(false); const [initialMousePosition, setInitialMousePosition] = useState(0); @@ -120,6 +127,10 @@ export const React360Viewer = ({ ); setSelectedImageIndex(index); + + if (autoplayTarget !== undefined && index === autoplayTarget) { + setUseAutoplay(false); + } }; useEffect(() => { diff --git a/tsconfig.json b/tsconfig.json index 97e72c2..abd333e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,6 @@ "target": "es5", "outDir": "./dist", "lib": ["dom", "dom.iterable", "esnext"], - "declaration": true, "declarationDir": "dist", "allowJs": true,