packageDocumentation module import "./Cube.scss" ; import classnames from "classnames" ; import * as React from "react" ; import { Matrix3d } from "@itwin/core-geometry" ; import { CommonProps } from "@itwin/core-react" ; public export enum Face { None = "" , Left = "left" , Right = "right" , Back = "back" , Front = "front" , Bottom = "bottom" , Top = "top" } public export interface CubeProps extends React . AllHTMLAttributes < HTMLDivElement > , CommonProps { faces ? : { [ key ] : React . ReactNode ; } ; rotMatrix : Matrix3d ; } public export class Cube extends React . PureComponent < CubeProps > { public override render ( ) { const { faces , rotMatrix , className , ... props } = this . props ; return ( < div className = { classnames ( "components-cube-css3d" , className ) } data - testid = "components-cube" { ... props } > { [ Face . Front , Face . Back , Face . Right , Face . Left , Face . Top , Face . Bottom ] . map ( ( face ) => { const content = faces && faces [ face ] ; return ( < CubeFace key = { face } rotMatrix = { rotMatrix } face = { face } > { content } < /CubeFace>); } ) } < /div>); } } internal export interface CubeFaceProps extends React . AllHTMLAttributes < HTMLDivElement > { rotMatrix : Matrix3d ; face : Face ; } internal export class CubeFace extends React . Component < CubeFaceProps > { private _faceWidth : number = 0 ; public override render ( ) { const { rotMatrix , face , style , children , ... props } = this . props ; if ( face === Face . None ) return null ; const classes = classnames ( "face" , this . getCSSClassNameFromFace ( face ) ) ; let reorient = Matrix3d . createRowValues ( 1 , 0 , 0 , 0 , - 1 , 0 , 0 , 0 , 1 ) ; let reposition = Matrix3d . createIdentity ( ) ; switch ( this . props . face ) { case Face . Bottom : reposition = Matrix3d . createRowValues ( - 1 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , - 1 ) ; reorient = Matrix3d . createRowValues ( - 1 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 1 ) ; break ; case Face . Right : reposition = Matrix3d . createRowValues ( 0 , 0 , 1 , 0 , 1 , 0 , - 1 , 0 , 0 ) ; reorient = Matrix3d . createRowValues ( 0 , 1 , 0 , 1 , 0 , 0 , 0 , 0 , 1 ) ; break ; case Face . Left : reposition = Matrix3d . createRowValues ( 0 , 0 , - 1 , 0 , 1 , 0 , 1 , 0 , 0 ) ; reorient = Matrix3d . createRowValues ( 0 , - 1 , 0 , - 1 , 0 , 0 , 0 , 0 , 1 ) ; break ; case Face . Back : reposition = Matrix3d . createRowValues ( 1 , 0 , 0 , 0 , 0 , 1 , 0 , - 1 , 0 ) ; reorient = Matrix3d . createRowValues ( - 1 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 1 ) ; break ; case Face . Front : reposition = Matrix3d . createRowValues ( 1 , 0 , 0 , 0 , 0 , - 1 , 0 , 1 , 0 ) ; reorient = Matrix3d . createRowValues ( 1 , 0 , 0 , 0 , - 1 , 0 , 0 , 0 , 1 ) ; break ; } const repositioned = rotMatrix . multiplyMatrixMatrix ( reposition ) ; const vect = repositioned . multiplyXYZ ( 0 , 0 , this . _faceWidth ) ; const m = repositioned . multiplyMatrixMatrix ( reorient ) ; const list = [ m . at ( 0 , 0 ) , - m . at ( 1 , 0 ) , m . at ( 2 , 0 ) , 0 , m . at ( 0 , 1 ) , - m . at ( 1 , 1 ) , m . at ( 2 , 1 ) , 0 , m . at ( 0 , 2 ) , - m . at ( 1 , 2 ) , m . at ( 2 , 2 ) , 0 , vect . at ( 0 ) , - vect . at ( 1 ) , vect . at ( 2 ) - this . _faceWidth , 1 , ] ; const transform = `matrix3d(${ list . join ( ", " ) })` ; const s = { transform , WebkitTransform : transform , ... style } ; return ( < div style = { s } data - testid = { `components-cube-face-${ face }` } className = { classes } ref = { ( e ) => { this . _faceWidth = ( e && e . clientWidth / 2 ) || 0 ; } } { ... props } > { children } < /div>); } private getCSSClassNameFromFace ( face ) { let className = "" ; if ( face !== Face . None ) className = `cube-${ face }` ; return className ; } }