diff options
Diffstat (limited to 'packages/website/ts/@next/components/image_loop.tsx')
-rw-r--r-- | packages/website/ts/@next/components/image_loop.tsx | 72 |
1 files changed, 0 insertions, 72 deletions
diff --git a/packages/website/ts/@next/components/image_loop.tsx b/packages/website/ts/@next/components/image_loop.tsx deleted file mode 100644 index 2dc6c7aee..000000000 --- a/packages/website/ts/@next/components/image_loop.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; -import * as _ from 'lodash/collection'; -import styled from 'styled-components'; - -interface Props { - name: string; - size?: 'small' | 'medium' | 'large' | number; -} - -export class ImageLoop extends React.Component<Props> { - private _img: Image; - private _ctx: CanvasRenderingContext2D; - private _x = 0; - private _speed = -1; - private _canvas = React.createRef(); - - constructor(props: Props) { - super(props); - } - public componentDidMount(): void { - const domImage = React.Children.only(this.props.children); - - this._img = new Image(1446, 407); - this._img.src = domImage.props.src; - this._ctx = this._canvas.current.getContext('2d'); - - this._img.onload = this.updateCanvas.bind(this); - } - public render(): React.ReactNode { - return ( - <Wrapper {...this.props}> - <canvas id="canvas" style={{ width: '100vw', height: '407px' }} ref={this._canvas} /> - </Wrapper> - ); - } - public updateCanvas(): void { - this.move(); - - const { width, height } = this._canvas.current; - - this._ctx.clearRect(0, 0, width, height); - this.draw(); - - requestAnimationFrame(this.updateCanvas.bind(this)); - } - public move(): void { - this._x += this._speed; - this._x %= this._canvas.current.width; - } - public draw(): void { - const img = this._img; - const imgWidth = img.naturalWidth / 2; - const imgHeight = img.naturalHeight / 2; - const currentPosition = this._x; - const canvasWidth = this._canvas.current.width; - - this._ctx.drawImage(img, currentPosition, 0, imgWidth, imgHeight); - - if (this._speed < 0) { - this._ctx.drawImage(img, currentPosition + canvasWidth, 0, imgWidth, imgHeight); - } else { - this._ctx.drawImage(img, currentPosition - imgWidth, 0, imgWidth, imgHeight); - } - } -} - -export const Wrapper = styled.div` - margin: 0 0; - display: flex; - align-items: center; - justify-content: center; -`; |