2021-06-29
ReactNを露出してCypressから使うでスケール調整のテスト。8つのアサーションからなる1つのテストが0.44秒で終わってるので見てもよくわからないかもだけど、2つの付箋の位置をデフォルトのスケールと、縮小したものとで確認している。
まずはid指定でエレメントを取得してスタイルを直接書き換えてテストしている
test.jscy.get("#center").then(x => {
x.css("transform", "scale(0.5)")
})
cy.contains("+").should((x) => {
expect(x[0].getBoundingClientRect().x).equal(215.5);
expect(x[0].getBoundingClientRect().y).equal(225.5);
})それでテストできるようにしてから生CSSでid指定で当てていたスタイルをstyled-componentsに変更、挙動が変わらないことを確認してからReactの関数コンポーネントで包んで、ReactNのフックを掛けた。
最終的にテストでのスケール変更はこんな感じになった。カスタムコマンドにしてもいいかも。
test.jscy.window().its('movidea').then(movidea => {
setTimeout(() => {
movidea.setGlobal({ scale: 0.5 });
})
});拡大縮小は、すべての付箋が入ってるサイズ0のdivがあって、それのtransformでブラウザのネイティブコードに計算を任せる仕組み。
App.tsx<div id="canvas">
<Center>
{fusens.map((fusen) => (
<Fusen value={fusen} />
))}
</Center>
</div>Center.tsxconst CenterDiv = styled.div`
position: absolute;
top: 50%;
left: 50%;
width: 0px;
height: 0px;
overflow: visible;
`;
export const Center: React.FC<{}> = ({ children }) => {
const [g] = useGlobal();
const style = {
transform: `scale(${g.scale}) translate(${g.trans_x}px, ${g.trans_y}px)`,
};
return (
<CenterDiv style={style} id="center">
{children}
</CenterDiv>
);
};学んだこと
>Control the size and orientation of the screen for your application.
getBoundingClientRect Element.getBoundingClientRect() - Web APIs | MDN
Related Pages
- →regroup×2021-07-20movidea開発日記×2021-07-26movidea開発日記×2021-07-27movidea開発日記×2021-07-28movidea開発日記×2021-07-29movidea開発日記×styled-components×reactn×immer×2021-07-19movidea開発日記×✅フォントサイズの自動調整ができるか？×jsonインポート機能×2021-07-14movidea開発日記×ReactNを露出してCypressから使う×✅DOMでのスムーズな拡大縮小平行移動×macbookのトラックパッドで拡大縮小平行移動×2021-07-13movidea開発日記×畳んだものは一段階大きくなる×圧縮付箋の展開時どうなるべきか×編集urlどうあるべきか×regroupからmovideaへ×2021-07-15movidea開発日記×バルーンメニュー→
- →regroup×pregroup-done-2019×2020_年、_react_軸で学ぶべき技術×typescript×react×webpack×visual_studio_code×styled-components×reactmodal×ipadはfocusを無視することがある×paper.js×パスドロー×パスの形がおかしい×付箋・パスの投げ縄選択×firestore×websocket×amazon_s3×netlify×apple_pencil×ipad上でのダイレクトタッチとpencilタッチの区別×二本指ジェスチャでズームと平行移動×redux×reactn×undoの実装×キャンバス汚染×キャンバス汚染解決編×cssで条件分岐と変数と計算を使う×100vhだと縦にはみ出す×メニューアイコンがiphoneなどの狭い画面ではみ出す×ズームアウトした状態でペンで描くとガタガタになる×線の太さを一定にする×paper.jsの更新後に呼ばれるコールバックをつける×バルーンメニュー×投げ縄選択→削除×付箋の自動フォントサイズ調整×gが下に突き出す×okr問題×regroup2019→
"Engineer's way of creating knowledge" the English version of my book is now available on [Engineer's way of creating knowledge]
(C)NISHIO Hirokazu / Converted from [Scrapbox] at [Edit]