0.2.0/index.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
   2 <html xmlns:v="urn:schemas-microsoft-com:vml">
   3     <head>
   4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   5             <meta http-equiv="Content-Language" content="ja">
   6             <meta http-equiv="Content-Script-Type" content="text/javascript">
   7             <meta http-equiv="Content-Style-Type" content="text/css">
   8             <meta http-equiv="imagetoolbar" content="no">
   9         <title>html2comic Js Editor</title>
  10                 <link rel="stylesheet" type="text/css" href="all.css">
  11     </head>
  12     <body>
  13         <!--[if lt IE 9]>
  14                 <script type="text/javascript">
  15                                 (function(){
  16                                         var     b = document.body || (function(){document.write('&lt;body&gt;');return document.body;})(),
  17                                                 x = (function(){
  18                                                         try {var t = new ActiveXObject('DXImageTransform.Microsoft.gradient');}catch(e){}
  19                                                         return 'h2c-ActiveX-' +( t ? 'enabled' : 'disabled');
  20                                                 })();
  21                                         if( !b.className.match(x)) b.className += ( b.className.length === 0 ? '' : ' ') +x;
  22                                 })();
  23                 </script>
  24         <![endif]-->
  25
  26                 <!-- 改行コード 取得用 -->
  27 <form>
  28 <textarea id="shadowTxtarea" style="display:none;">
  29
  30 </textarea>
  31 </form>
  32 <pre id="shadowPre" style="display:none;">
  33
  34 </pre>
  35         <!-- home -->
  36                 <div id="home" class="view-container" style="display:block;">
  37                         <div style="overflow: auto;height: 100%;">
  38                                 <h1>Wellcome to pettanr</h1>
  39                         <h2 style="font-size:12px;">html2comic Js Editor</h2>
  40                                 <a href="index.html?view=editor">エディター起動 ⇒</a><br>
  41                                 <a href="index.html?view=editor&rimg=CSS3">エディター起動(ReversibleImageBackend is CSS3) ⇒</a><br>
  42                                 <a href="index.html?view=editor&rimg=VML">エディター起動(ReversibleImageBackend is VML) ⇒</a><br>
  43                                 <a href="index.html?view=editor&rimg=ActiveX">エディター起動(ReversibleImageBackend is ActiveX) ⇒</a>
  44                         <h3 style="font-size:12px;">開発記録</h3>
  45                         <dl style="font-size:12px;line-height:1em;">
  46                                 <dt>11-08-27</dt>
  47                                 <dd>開始。当初uupaa.jsを使うも0.8でresize()イベントの拾い方が分からずあきらめる。</dd>
  48                                 <dt>11-08-28</dt>
  49                                 <dd>jQueryに差し替え。コマと半透過レイヤーの高さのリサイズ・windowリサイズを受けたリサイズ。オペレーションキャッチャーによるキャラクタの移動。コミックエレメントにリサイザ用のマークを表示</dd>
  50                                 <dt>11-08-29</dt>
  51                                 <dd>キャラの8方向のリサイズ、マークのみx8、実際にイベントを起こす透明な要素x8で計16個の要素を使う。</dd>
  52                                 <dt>11-08-30</dt>
  53                                 <dd>人に触ってもらったところ、操作性が悪すぎることが判明。自分でいじっている間は深刻度が把握が甘かった、、、</dd>
  54                                 <dt>11-08-31</dt>
  55                                 <dd>ドラッグ周りをjQueryに頼らない形に書き換え。マウスイベントのキャッチはoperationCatcherElmに一任する。処理が遅れ要素からカーソルが離れた段階でドラッグイベントが終了するのを防ぐ。</dd>
  56                                 <dt>11-09-02</dt>
  57                                 <dd>コマ枠のリサイザーのマウスイベントもmouseOperationChacherElmに任せる。コマ枠リサイザーとコマ要素（キャラ・吹き出し）を同列に扱うために処理を書き直す。キーイベントの調査。</dd>
  58                                 <dt>11-09-03</dt>
  59                                 <dd>ctrl+zの実装に備えて、コミック要素の座標を絶対座標からコマ枠からの相対座標とした。</dd>
  60                                 <dt>11-09-04</dt>
  61                                 <dd>altキーは一度押すと他のキー入力ができなくなる。もう一度押すと解除。以上をaltのみreturn falseしてfirefoxでは対処できた。ieではできない。</dd>
  62                                         <dd>ctrl+z 戻る（アニメーション）、ctrl+0 センタリング。</dd>
  63                                         <dd>svgまたはvmlで吹きだしを書いて、Vectorのサポートを調べる</dd>
  64                                         <dt>11-09-05</dt>
  65                                         <dd>ctrl+shift+zで進むを実装してみるもいまいちおかしい、、、</dd>
  66                                         <dt>11-09-06</dt>
  67                                         <dd>吹き出しのしっぽの座標決定ロジックの修正。以前は数回～数百回ループしていたのを、10回程度に固定。</dd>
  68                                         <dt>11-09-07</dt>
  69                                         <dd>戻る・進むのそもそもの考え方が間違っていた。でうまく動作！</dd>
  70                                         <dt>11-09-17</dt>
  71                                         <dd>噴出しの尻尾の回転・復帰ができる！クラス構造どうするかとか手間取ったけど、別に10日間をフルで取り組んでたわけじゃないんだからね。ie7+8でxmlの描画が非常に重い、、、</dd>
  72                                         <dd>ieはマウス操作のたび？にキー入力監視用のinputからfocusが外れるみたいで、intervalで0.5秒おきにfocusさせてみた</dd>
  73                                         <dt>11-09-18</dt>
  74                                         <dd>window関連を始める。まずはinfomationのモックのみ</dd>
  75                                         <dt>11-09-19</dt>
  76                                         <dd>infomationのドラッグ、currentなcomicElementの情報の表示。</dd>
  77                                         <dd>Dragに関わるアイテムは、MouseOperationChacherの下に。そうでないものは上で、ただし使うときだけ。よし！</dd>
  78                                         <dd>jQueryの拡張で、editableTextを作る。こいつでinfomationの属性を編集可能にする。さらにtabキーによる項目移動。tab+shiftでその逆。currentのロックをしないと、属性変更を反映できないな。</dd>
  79                                         <dt>11-09-20</dt>
  80                                         <dd>ツールボックスwindowに着手。</dd>
  81                                         <dt>11-09-22</dt>
  82                                         <dd>エディタブルテキストの修正を開始。グリッドスイッチを動作。吹き出しの挿入。</dd>
  83                                         <dt>11-09-23</dt>
  84                                         <dd>ie8の8modeに対応。キー周りの見直し。エディタブルテキストの修正。コミックオブジェクト情報⇔背景情報の切り替え。</dd>
  85                                         <dt>11-09-24</dt>
  86                                         <dd>クロスブラウザな吹き出しクラスの整理。画像⇔ベジェの切り替えもh2c.vectorに置く。キャンバスのドラッグ。ショートカットキーのie7以下対応。</dd>
  87                                         <dt>11-09-25</dt>
  88                                         <dd>コミックオブジェクトの操作ボタンの表示。小さい場合は外に表示。その際にはフォーカスがヒットエリアの外にも拡大。カレントなオブジェクトは優先してヒットエリアをチェック。尻尾操作の位置を修正。</dd>
  89                                         <dt>11-11-20</dt>
  90                                         <dd>再開！テキストの編集が可能に。履歴も効きます。まだリターンキーが反応しない。</dd>
  91                                         <dt>11-11-22</dt>
  92                                         <dd>comicElementの削除。ヒストリーも動作。</dd>
  93                                         <dt>11-11-23</dt>
  94                                         <dd>comicElementの追加（今はtextのみ）ヒストリーも動作。グループイメージの選択画面に着手。まだ操作はできない。</dd>
  95                                         <dt>11-11-26</dt>
  96                                         <dd>イメージの追加、ヒストリーも動作。グループイメージの選択画面も動くようになる。comicElementのコンソールのボタンに画像を用意。</dd>
  97                                         <dt>11-11-28</dt>
  98                                         <dd>レイヤーの前後、ヒストリーも動作。</dd>
  99                                         <dt>11-11-29</dt>
 100                                         <dd>グループ画像選択画面の画像の読み込みエラーに対処、マウスホイールでスクロール、filesizeの大きいものはサムネイルを表示、画面の外の画像は表示範囲に入るまで読み込まない、クリックで画像取得のリトライ。</dd>
 101                                         <dt>11-12-03</dt>
 102                                         <dd>ヒストリーに格納されたcomicElementのうち、append & removeに関するもので、ヒストリーから参照されなくなったものは.destroy()するようにする。main.jsが100KB超え。。。</dd>
 103                                         <dd>file + io なクラスが必要。</dd>
 104                                         <dd>xBackend(css3,ActiveX,vml,flash,silverlight,canvas)な画像の反転、ロード監視、png fix(ie6-) してくれる画像ラッパーが必要。</dd>
 105                                         <dt>11-12-06</dt>
 106                                         <dd>vmlを使ったie用のReversibleImageClassが動作。vmlはclassを変えた後に、再びelmWrap.appendChild(vmlImg)しないと再描画されない。</dd>
 107                                         <dt>11-12-11</dt>
 108                                         <dd>画像の反転操作ができるように！ヒストリーも動作。現在のバックエンドは、css3,vml,ActiveV。</dd>
 109                                         <dd>jQueryが不要そうな部分は直接domに触るようにする。style.width,style.heightにieではマイナスは不可、'px'が不要。</dd>
 110                                         <dd>ieでイメージの縦横pxが取れず、jsonからのデータを入れる。</dd>
 111                                         <dt>11-12-13</dt>
 112                                         <dd>ieでイメージの縦横pxが取れない問題の解消。new Image()の場合、ie8以下ではサイズが取れなかったり、removeChildに失敗するっぽい。</dd>
 113                                         <dt>11-12-18</dt>
 114                                         <dd>helpウインドウの追加。併せてWindowClass周りの大幅な書き換え。クロージャを効かせるスタイルでも継承っぽい書き方ができたかも。</dd>
 115                                         <dd>domTreeに追加する前にjQueryでセットしても特にイベント周りで表示がおかしくなる．ieでは特に酷い。</dd>
 116                                         <dt>11-12-25</dt>
 117                                         <dd>メニューバーが動作するようになる。他にマウスイベントリスナへのイベント伝播の書き換え。</dd>
 118                         </dl>
 119                         </div>
 120                 </div>
 121
 122         <!-- comic list -->
 123                 <div id="comic-list" class="view-container"></div>
 124
 125         <!-- image list -->
 126                 <div id="image-list" class="view-container"></div>
 127
 128         <!-- setting -->
 129                 <div id="setting" class="view-container"></div>
 130
 131         <!-- grobal navi -->
 132                 <div id="grobal-navi">
 133                         <a href="#jump-to-home">home</a>
 134                         <a href="#jump-to-comic-list">comic list</a>
 135                         <a href="#jump-to-image-list">image list</a>
 136                         <a href="#jump-to-setting">setting</a>
 137                 </div>
 138
 139         <!-- Editor -->
 140                 <div id="editor" class="view-container">
 141                 <p id="key-event-log" style="margin-top: 5em;"></p>
 142                 <p id="history-log"></p>
 143                         <p id="operation-catcher-log"></p>
 144                         <p id="tail-log"></p>
 145                         <p id="window-log"></p>
 146
 147                 <!-- コマの背景（パターン・塗りつぶし） -->
 148
 149                 <!-- グリッド-->
 150                         <div id="grid" style="display:none;"></div>
 151
 152                 <!-- コマ要素 -->
 153                         <div id="comic-element-container"></div>
 154
 155                 <!-- コマの枠の外は完全に隠さないで、半透過のレイヤーを重ねる -->
 156                         <div id="whiteGlass-container">
 157                                 <div id="whiteGlass-top"></div>
 158                                 <div id="whiteGlass-left"></div>
 159                                 <div id="whiteGlass-right"></div>
 160                                 <div id="whiteGlass-bottom"></div>
 161                         </div>
 162
 163                 <!-- コマの枠の表示 -->
 164                         <div id="panel-border">
 165                         <!-- コマの高さの変更ボタン -->
 166                                 <div id="panel-resizer-top">▲</div>
 167                                 <div id="panel-resizer-bottom">▼</div>
 168
 169                         <!-- コミック要素のリサイザ -->
 170                                 <div id="comic-element-resizer-container">
 171                                         <div class="comic-element-resizer" id="comic-element-resizer-top"></div>
 172                                         <div class="comic-element-resizer" id="comic-element-resizer-left"></div>
 173                                         <div class="comic-element-resizer" id="comic-element-resizer-right"></div>
 174                                         <div class="comic-element-resizer" id="comic-element-resizer-bottom"></div>
 175                                         <div class="comic-element-resizer" id="comic-element-resizer-top-left"></div>
 176                                         <div class="comic-element-resizer" id="comic-element-resizer-top-right"></div>
 177                                         <div class="comic-element-resizer" id="comic-element-resizer-bottom-left"></div>
 178                                         <div class="comic-element-resizer" id="comic-element-resizer-bottom-right"></div>
 179                                         <div id="baloon-tail-mover"></div>
 180
 181                                 <!-- コミックオブジェクトコンソール -->
 182                                         <div id="comic-element-consol-wrapper">
 183                                                 <div id="comic-element-consol-tail"></div>
 184                                                 <div id="comic-element-consol-wrapper-when-out">
 185                                                         <div id="image-element-consol">
 186                                                                 <div id="change-image-button">⇔</div>
 187                                                                 <div id="layer-back-button">&lt;B</div>
 188                                                                 <div id="delete-image-button">x</div>
 189                                                                 <div id="layer-forward-button">F&gt;</div>
 190                                                         </div>
 191                                                         <div id="text-element-consol">
 192                                                                 <div id="edit-text-button">E</div>
 193                                                                 <div id="change-text-style-button">⇔</div>
 194                                                                 <div id="back-text-button">&lt;B</div>
 195                                                                 <div id="delete-text-button">x</div>
 196                                                                 <div id="hide-text-tail-button">x｛</div>
 197                                                                 <div id="forward-text-button">F&gt;</div>
 198                                                         </div>
 199                                                 </div>
 200                                         </div>
 201                                 </div>
 202                         </div>
 203
 204                         <div id="window-container"></div>
 205
 206
 207                         <!-- layer-window -->
 208                         <!-- dom-console-window -->
 209                         <!-- publish-window -->
 210                         <!-- wellcome-window -->
 211
 212
 213                 <!-- メニューバー -->
 214                         <div id="menu-bar"></div>
 215
 216                 <!-- マウスオペレーションキャッチャー -->
 217                         <div id="mouse-operation-catcher"></div>
 218
 219                 <!-- テンプレート -->
 220                         <script id="imgElementTemplete" type="text/x-jquery-tmpl">
 221                                 <div class="comic-element-wrapper image-element"></div>
 222                         </script>
 223
 224                         <script id="textElementTemplete" type="text/x-jquery-tmpl">
 225                                 <div class="comic-element-wrapper text-element">
 226                                         <img>
 227                                         <div class="speach">
 228                                                 <div class="speach-inner"></div>
 229                                         </div>
 230                                 </div>
 231                         </script>
 232
 233                         <script id="textElementTempleteForOldIE" type="text/x-jquery-tmpl">
 234                                 <div class="comic-element-wrapper text-element">
 235                                         <img>
 236                                         <div class="speach">
 237                                                 <table><tr><td></td></tr></table>
 238                                         </div>
 239                                 </div>
 240                         </script>
 241
 242                         <script id="imageGruopItemTemplete" type="text/x-jquery-tmpl">
 243                                 <div class="image-gruop-item">
 244                                         <img width="0" height="0">
 245                                         <div class="image-gruop-item-title">img-title</div>
 246                                 </div>
 247                         </script>
 248
 249                         <script id="windowTemplete" type="text/x-jquery-tmpl">
 250                                 <div class="window-wrapper">
 251                                         <div class="window-header">window title</div>
 252                                         <div class="window-close-button">x</div>
 253                                         <div class="window-body clearfix">
 254                                                 <div class="window-body-insert-position"></div>
 255                                                 <div class="window-resize-button">／</div>
 256                                         </div>
 257                                 </div>
 258                         </script>
 259
 260                 <!-- infomation-window -->
 261                         <script id="infomation-window" type="text/x-jquery-tmpl">
 262                                 <div id="panel-background-information">
 263                                         <div id="bg-pattern"></div>
 264                                         <div id="select-bg-pattern-button">pattern</div>
 265                                         <div id="reset-bg-pattern-button">x</div>
 266                                         <div id="bg-color"></div>
 267                                         <div id="select-bg-color-button">color</div>
 268                                         <div id="reset-bg-color-button">x</div>
 269                                         <!-- <div id="bg-pattern-x"></div>
 270                                         <div id="bg-pattern-y"></div>
 271                                         <div id="bg-pattern-repeat-x"></div>
 272                                         <div id="bg-pattern-repeat-y"></div> -->
 273                                 </div>
 274
 275                                 <div id="comic-element-infomation">
 276                                         <div id="comic-element-x">
 277                                                 <span class="comic-element-attribute-label">x:</span>
 278                                                 <span id="comic-element-x-value" class="comic-element-attribute-value editable-value">0</span>
 279                                         </div>
 280                                         <div id="comic-element-y">
 281                                                 <span class="comic-element-attribute-label">y:</span>
 282                                                 <span id="comic-element-y-value" class="comic-element-attribute-value editable-value">0</span>
 283                                         </div>
 284                                         <div id="comic-element-z">
 285                                                 <span class="comic-element-attribute-label">z:</span>
 286                                                 <span id="comic-element-z-value" class="comic-element-attribute-value editable-value">0</span>
 287                                         </div>
 288                                         <div id="comic-element-a">
 289                                                 <span id="comic-element-a-value" class="comic-element-attribute-value editable-value">0</span>
 290                                                 <span class="comic-element-attribute-label">°</span>
 291                                         </div>
 292                                         <div id="comic-element-w">
 293                                                 <span class="comic-element-attribute-label">w:</span>
 294                                                 <span id="comic-element-w-value" class="comic-element-attribute-value editable-value">0</span>
 295                                         </div>
 296                                         <div id="comic-element-h">
 297                                                 <span class="comic-element-attribute-label">h:</span>
 298                                                 <span id="comic-element-h-value" class="comic-element-attribute-value editable-value">0</span>
 299                                         </div>
 300                                         <div id="comic-element-w-percent">
 301                                                 <span id="comic-element-w-percent-value" class="comic-element-attribute-value editable-value">0</span>
 302                                                 <span class="comic-element-attribute-label">%</span>
 303                                         </div>
 304                                         <div id="comic-element-h-percent">
 305                                                 <span id="comic-element-h-percent-value" class="comic-element-attribute-value editable-value">0</span>
 306                                                 <span class="comic-element-attribute-label">%</span>
 307                                         </div>
 308                                 </div>
 309                         </script>
 310
 311                 <!-- toolbox-window -->
 312                         <script id="toolbox-window" type="text/x-jquery-tmpl">
 313                                 <div id="toolbox-add-image-button">add image</div>
 314                                 <div id="toolbox-add-text-button">add text</div>
 315                                 <div id="toolbox-edit-bg-button">edit bg</div>
 316                                 <div id="toolbox-switch-grid">grid</div>
 317                                 <div id="toolbox-popup-help-button">?</div>
 318                                 <div id="toolbox-publish-button">publish!</div>
 319                         </script>
 320
 321                 </div>
 322         <!-- Editor -->
 323
 324
 325         <!-- オーバーレイ -->
 326                 <div id="overlay-container" style="display: none;">
 327                         <div id="overlay-shadow"></div>
 328
 329                 <!-- テキスト エディタ -->
 330                         <div id="speach-editor-wrapper">
 331                                 <textarea id="speach-editor"></textarea>
 332                                 <div id="speach-edit-complete-button" class="button">OK</div>
 333                         </div>
 334
 335                 <!-- 画像グループから画像を選択 -->
 336                         <div id="image-gruop-wrapper">
 337                                 <div id="image-icon-container"></div>
 338                                 <div id="gruop-name-display">Group Name</div>
 339                                 <div id="image-gruop-button" class="button">cancel</div>
 340                         </div>
 341
 342                         <div id="overlay-close-button">x</div>
 343                 </div>
 344
 345                 <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 346                 <!-- <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> -->
 347                 <script type="text/javascript" src="main.js"></script>
 348     </body>
 349 </html>