CSSで画面いっぱいにDIVを広げてみる
というのがあったので、中にテーブルを入れてみた。
更にステータスバーを付けてみた。
思い切ってど真ん中をIFRAMEに変えてみた。
これで
帳票のエディタの画面構成を
CSSだけで、
できそうな気がしてきた。
でも、
ちょっと欲を出すと・・・
すぐ画面がぶっ壊れるので
厄介。
※Chromeで観ると IFRAMEに横スルロールバーが出てしまうのは仕様かな？
次はルーラーを付けたいな～。
探してみると色々あるんだね。
1ｍｍ単位、0.1インチ単位は付けたいし、補助線やサイズや間隔のツールチップも付けたい。
2016/11/20 でもその前に
メニューからパーツをドラッグするとか
※上に<div>を被せたので、スクロールバーが使えなくなった。 orz
マウスで範囲設定してパーツを置くとか
配置したパーツを選択したり範囲選択とか
できないと意味がないか・・・orz
2016/11/26 とりあえず十字カーソル。
2016/11/26 ルーラを付け、パーツらしきものも貼れるようにしてみた。
2016/11/29 矢印ボタンを追加し、部品をクリックしたり範囲選択できるようにしてみた。
操作方法はこんな感じ。
- オブジェクトをクリック：選択したオブジェクトを選択状態にする。
- オブジェクトをCtrl＋クリック：選択したオブジェクトも選択状態にする。
- オブジェクトをマウスで範囲指定：範囲に完全に内包されたオブジェクトを選択状態にする。
- オブジェクトをShift＋マウスで範囲指定：範囲に一部でも内包されるオブジェクトを選択状態にする。
- オブジェクトをCtrl+マウスで範囲指定：範囲に完全に内包されたオブジェクトも選択状態にする。
- オブジェクトをCtrl+Shift＋マウスで範囲指定：範囲に一部でも内包されるオブジェクトも選択状態にする。
制限事項は（ ＾ω＾）・・・
- 選択状態をトグる操作を忘れていた。トグれないといづれ辛くなるハズ。
- 範囲指定は左上端から右下端だけ。全方向に範囲指定できるようにしたい。
2016/11/30 選択状態をトグれるし、マウスドラッグでオブジェクトを移動できるようになった。
次はサイズの変更かな。UNDO、REDO、プロパティ（色など）画面はまだまだ、データ差し込みがもっと先だな。
ソースがかなり混沌としてきた。
試行錯誤しているのだから仕方がないが
ある程度考えがまとまったら、
スクラッチしなおすのが吉だな。
2016/12/2 範囲指定は全方向。
2016/12/6 フィールドやエコーが３重になっていたので修正。
2016/12/7 できるだけCSSを使ったフィールドの変形するエコーのサンプルを作ってみた。図形をドラッグでき、矢印をドラッグすると図形が変形する。レポートライターのフィールドは大抵小さくなりがちなので、使いそうな矢印を強調するようなアニメーションとかまだまだ工夫が必要。図形の移動や変形もCSSに任せられるといいな（ ＾ω＾）・・・Calc()使うか・・・矢印の位置がいい感じになった。
2016/12/9 ちゃんとエコーをON/OFFしてみると、色々想定外な出来事が出てくる。2016/12/10 多少無理してるけどHitTestを使わないでドラッグするバージョン。2016/12/14 複数選択可。