Small Basic Online v1.0 のソースのどこから手をつけたらいいのか悩んでいたのですが、先日見つけた Shapes の回転と拡大・縮小の不具合の修正案が示されたので、そこに着目していきたいと思います。

今回取り上げる問題点は２つあり、Shapes.Rotate が図形の中心で回転しないという問題と Shapes.Zoom が図形の中心で拡大・縮小しないという問題です。それぞれ GitHub の Issue として報告済みです。

それに対しての学生の alxnull さんによる修正案がこちらです。まず、対象となっているファイルは Source/SmallBasic.Editor/Libraries/Shapes/BaseShape.cs というファイルです。Source フォルダにはいくつかのプロジェクトがありますが、今回の修正箇所は SmallBasic.Editor というプロジェクトの中で、エディタの一部になります。このエディタの中に Libraries というフォルダがあり、実行時に呼ばれるライブラリの記述があります。Small Basic Online のエディタは Blazor という仕組みを利用しており、図形は SVG として扱われています。

今回の修正案はこの SVG の図形に対して CSS の transform-origin という style で図形の中心を指定する center というキーワードを与えています。この修正で Chrome では問題が解決していることを確認できましたが、Edge では直っていませんでした。いろいろやってみたところでは、Edge 上では SVG の図形に対する CSS がうまく働いていないようです。

CSS を使わずに SVG の記述だけでうまく対応できるよう alxnull さんに働きかけていく予定です。

関連項目

• プログラミング講座(166) SVG エディター
• C#でSmall Basicを作ろう 目次