Stamp コードのご紹介：キャンバスの高さを求めるフック

個人で開発したアプリ Stamp のコードを紹介しようというシリーズ

Stamp の URL はこちら。

Stamp

Stamp の紹介記事はこちら

Stamp は、キャンバスが画面に収まるようになっています

今回は、以下の記事の続きです。

画面の高さを取得→そこからヘッダー、フッターの高さを引く、という二段構えでキャンバスの高さを求めています

画面上部、ロゴや Gallery、About があるところがヘッダー。
画面下部、ボタンがあるところがフッター。

画面の高さから、この二つの高さを引いて、キャンバスの高さを求めています。

カスタムフックで実装しました

import { makeStyles } from '@material-ui/core'
import { useSelector } from 'react-redux'
import * as selectors from '../redux/rootSelectors'
import { useInnerHeight } from './useInnerHeight'

const useStyles = makeStyles(theme => ({
   common: {
       position: "relative",
       overflow: "hidden",
       width: "100%",
       height: arg => (arg.innerHeight * 0.95) - arg.headerHeight - arg.footerHeight - 30 /* the height of swipeable switch */,
       margin: "auto",
   },
   shape: {
       outline: "2px solid #808080",
       backgroundColor: "#FFFFFF",
   },
   shape_dummy: {
       //width: "50% !important",
       zIndex: 1,
   },
   hidden: {
       display: "none",
   }
}))

export const useFrameStyles = () => {
   const innerHeight = useInnerHeight()
   const headerRect = useSelector(selectors.clientRectSelectors.selectHeaderRect)
   const footerRect = useSelector(selectors.clientRectSelectors.selectFooterRect)

   const classes = useStyles({
       innerHeight: innerHeight,
       headerHeight: headerRect.height,
       footerHeight: footerRect.height,
   })

   return classes
}

Material-UI の makeStyles() を使用してスタイルを定義し、そうして作成したスタイル定数 classes を呼び出し元に返却します。

ヘッダーとフッターの高さは、Header, Footer コンポーネントのマウント時に redux の state に登録しています。
それを react-redux パッケージの useSelector() で取得しています。

なので、このカスタムフックは単独では正常に動作しません。
そこらへんの仕組みは、まだまだ見直す余地がありそうです。

使う側（例）

const classes = useFrameStyles()

中略

<div className={classes.common}/>

パレットの高さも、このフックを使用して求めています

キャンバスの大きさを色々変えてみて、お好きなサイズでスタンプしてみてください！

いい感じの絵ができたら、キャンバス下の SHARE ボタンから Twitter でシェアお願いします！