2021 ソフトウェア設計及び演習用の班Wiki

参考サイト
https://app.diagrams.net/

7/2
図形の上にカーソルが乗ったときその図形を選んでいると分かるようにするにはid取得からaddEventlistener('mouseover', () => {　色の変更を記述}, false);からのmouseleaveでもとの色に戻すのをできる。取得したIDを格納した変数.style.background = '色の値';で変更可

06/25
「svg画像のドラッグに関するライブラリ」
̶h̶t̶t̶p̶s̶:̶/̶/̶g̶i̶t̶h̶u̶b̶.̶c̶o̶m̶/̶s̶v̶g̶d̶o̶t̶j̶s̶/̶s̶v̶g̶.̶d̶r̶a̶g̶g̶a̶b̶l̶e̶.̶j̶s̶?̶f̶i̶l̶e̶s̶=̶1̶ 7/9
「SVG画像のドラッグ」
https://www.gesource.jp/weblog/?p=7629 「SVG画像の移動」
https://www.codegrepper.com/code-examples/javascript/how+to+move+object+with+mouse+in+javascript 7/2
拡大縮小の方策の一つはid取得からそれぞれの図形のwidth,height,cx,cyだのなんだのの値を動かしたらどのように変化するかを計算してdocument.setAttributeをjsに記述して強引に変更する仕方。図形ごとに値を変更する関数を作るしかないかなぁと思っておる。setAttributeする要素はそれぞれの図形で異なるので。setAttributeには色の変更もできるので背景色くらいは変更できる。ボタン押したとき的なやつは。
【カーソルが要素内に侵入するときに実現される関数】
pointerover　addEventlistener('pointerover', (event) => {});を使ってやる
onpointerover document.onpointerover = (event) => { };

参考サイト
svg要素の基本的な使い方まとめ
http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo.htm
7/16
図形を選択して削除することがまだです。
ボタンでの削除は可能です。

6/25
foreignObjectタグがhtmlにあってそれを使うっぽい。foreignObjectを調べると他の単語が芋づる式に出てくるので現段階では言うことはないです。
7/2
作成した図形ごとにforeignObjectタグが書かれている。 <foreignObject style = "overflow: visible; text-align: left;" pointer-events = "none" width = "100%" height = "100%"> これをすることで文字にかぶさった状態でクリックしても反応しないようになる。 ダブルクリックすると初めて文字情報の変更ができるようになっている。
【方法１】contenteditable = "true"属性の追加によってdivのテキスト入力を受け付けるようになる。diagram.netはそんなことはしていない。属性の追加はid取得からsetAttributeによって実現する。
7/09
svgの要素に文字を書くことができるかもしれない。可能に思わせてくれるサイト。
https://tarepan.hatenablog.com/entry/svgcontenteditable div要素を追加することができる方法。
http://itref.fc2web.com/javascript/document/createtextnode.html テキスト入力に関してイタリック体にしたり文字色の変更したりできるサンプルが見つかったのでそれをフュージョンできなかったけど一応作りましたみたいな感じでかさ増し発表も検討してもよろしいかもしれません。サンプルは自分のlocalにおいてある。
7/16
・contenteditableを使うなら
true,falseをボタンで切り替えられる例のサイト
http://javascript123.seesaa.net/article/381247915.html

7/2
①画像を作成→②画像を保存　の2段階で作成した
gitのsaveにあるので試してみてください
（他の保存の仕方は余裕があればやります）

7/16
１つのボタンで画像作成、保存できるようにしました