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">
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">
14 <script type="text/javascript">
16 var b = document.body || (function(){document.write('<body>');return document.body;})(),
18 try {var t = new ActiveXObject('DXImageTransform.Microsoft.gradient');}catch(e){}
19 return 'h2c-ActiveX-' +( t ? 'enabled' : 'disabled');
21 if( !b.className.match(x)) b.className += ( b.className.length === 0 ? '' : ' ') +x;
28 <textarea id="shadowTxtarea" style="display:none;">
32 <pre id="shadowPre" style="display:none;">
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;">
47 <dd>開始。当初uupaa.jsを使うも0.8でresize()イベントの拾い方が分からずあきらめる。</dd>
49 <dd>jQueryに差し替え。コマと半透過レイヤーの高さのリサイズ・windowリサイズを受けたリサイズ。オペレーションキャッチャーによるキャラクタの移動。コミックエレメントにリサイザ用のマークを表示</dd>
51 <dd>キャラの8方向のリサイズ、マークのみx8、実際にイベントを起こす透明な要素x8で計16個の要素を使う。</dd>
53 <dd>人に触ってもらったところ、操作性が悪すぎることが判明。自分でいじっている間は深刻度が把握が甘かった、、、</dd>
55 <dd>ドラッグ周りをjQueryに頼らない形に書き換え。マウスイベントのキャッチはoperationCatcherElmに一任する。処理が遅れ要素からカーソルが離れた段階でドラッグイベントが終了するのを防ぐ。</dd>
57 <dd>コマ枠のリサイザーのマウスイベントもmouseOperationChacherElmに任せる。コマ枠リサイザーとコマ要素(キャラ・吹き出し)を同列に扱うために処理を書き直す。キーイベントの調査。</dd>
59 <dd>ctrl+zの実装に備えて、コミック要素の座標を絶対座標からコマ枠からの相対座標とした。</dd>
61 <dd>altキーは一度押すと他のキー入力ができなくなる。もう一度押すと解除。以上をaltのみreturn falseしてfirefoxでは対処できた。ieではできない。</dd>
62 <dd>ctrl+z 戻る(アニメーション)、ctrl+0 センタリング。</dd>
63 <dd>svgまたはvmlで吹きだしを書いて、Vectorのサポートを調べる</dd>
65 <dd>ctrl+shift+zで進むを実装してみるもいまいちおかしい、、、</dd>
67 <dd>吹き出しのしっぽの座標決定ロジックの修正。以前は数回~数百回ループしていたのを、10回程度に固定。</dd>
69 <dd>戻る・進むのそもそもの考え方が間違っていた。でうまく動作!</dd>
71 <dd>噴出しの尻尾の回転・復帰ができる!クラス構造どうするかとか手間取ったけど、別に10日間をフルで取り組んでたわけじゃないんだからね。ie7+8でxmlの描画が非常に重い、、、</dd>
72 <dd>ieはマウス操作のたび?にキー入力監視用のinputからfocusが外れるみたいで、intervalで0.5秒おきにfocusさせてみた</dd>
74 <dd>window関連を始める。まずはinfomationのモックのみ</dd>
76 <dd>infomationのドラッグ、currentなcomicElementの情報の表示。</dd>
77 <dd>Dragに関わるアイテムは、MouseOperationChacherの下に。そうでないものは上で、ただし使うときだけ。よし!</dd>
78 <dd>jQueryの拡張で、editableTextを作る。こいつでinfomationの属性を編集可能にする。さらにtabキーによる項目移動。tab+shiftでその逆。currentのロックをしないと、属性変更を反映できないな。</dd>
80 <dd>ツールボックスwindowに着手。</dd>
82 <dd>エディタブルテキストの修正を開始。グリッドスイッチを動作。吹き出しの挿入。</dd>
84 <dd>ie8の8modeに対応。キー周りの見直し。エディタブルテキストの修正。コミックオブジェクト情報⇔背景情報の切り替え。</dd>
86 <dd>クロスブラウザな吹き出しクラスの整理。画像⇔ベジェの切り替えもh2c.vectorに置く。キャンバスのドラッグ。ショートカットキーのie7以下対応。</dd>
88 <dd>コミックオブジェクトの操作ボタンの表示。小さい場合は外に表示。その際にはフォーカスがヒットエリアの外にも拡大。カレントなオブジェクトは優先してヒットエリアをチェック。尻尾操作の位置を修正。</dd>
90 <dd>再開!テキストの編集が可能に。履歴も効きます。まだリターンキーが反応しない。</dd>
92 <dd>comicElementの削除。ヒストリーも動作。</dd>
94 <dd>comicElementの追加(今はtextのみ)ヒストリーも動作。グループイメージの選択画面に着手。まだ操作はできない。</dd>
96 <dd>イメージの追加、ヒストリーも動作。グループイメージの選択画面も動くようになる。comicElementのコンソールのボタンに画像を用意。</dd>
98 <dd>レイヤーの前後、ヒストリーも動作。</dd>
100 <dd>グループ画像選択画面の画像の読み込みエラーに対処、マウスホイールでスクロール、filesizeの大きいものはサムネイルを表示、画面の外の画像は表示範囲に入るまで読み込まない、クリックで画像取得のリトライ。</dd>
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>
106 <dd>vmlを使ったie用のReversibleImageClassが動作。vmlはclassを変えた後に、再びelmWrap.appendChild(vmlImg)しないと再描画されない。</dd>
108 <dd>画像の反転操作ができるように!ヒストリーも動作。現在のバックエンドは、css3,vml,ActiveV。</dd>
109 <dd>jQueryが不要そうな部分は直接domに触るようにする。style.width,style.heightにieではマイナスは不可、'px'が不要。</dd>
110 <dd>ieでイメージの縦横pxが取れず、jsonからのデータを入れる。</dd>
112 <dd>ieでイメージの縦横pxが取れない問題の解消。new Image()の場合、ie8以下ではサイズが取れなかったり、removeChildに失敗するっぽい。</dd>
114 <dd>helpウインドウの追加。併せてWindowClass周りの大幅な書き換え。クロージャを効かせるスタイルでも継承っぽい書き方ができたかも。</dd>
115 <dd>domTreeに追加する前にjQueryでセットしても特にイベント周りで表示がおかしくなる.ieでは特に酷い。</dd>
117 <dd>メニューバーが動作するようになる。他にマウスイベントリスナへのイベント伝播の書き換え。</dd>
123 <div id="comic-list" class="view-container"></div>
126 <div id="image-list" class="view-container"></div>
129 <div id="setting" class="view-container"></div>
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>
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>
147 <!-- コマの背景(パターン・塗りつぶし) -->
150 <div id="grid" style="display:none;"></div>
153 <div id="comic-element-container"></div>
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>
164 <div id="panel-border">
166 <div id="panel-resizer-top">▲</div>
167 <div id="panel-resizer-bottom">▼</div>
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>
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"><B</div>
188 <div id="delete-image-button">x</div>
189 <div id="layer-forward-button">F></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"><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></div>
204 <div id="window-container"></div>
207 <!-- layer-window -->
208 <!-- dom-console-window -->
209 <!-- publish-window -->
210 <!-- wellcome-window -->
214 <div id="menu-bar"></div>
216 <!-- マウスオペレーションキャッチャー -->
217 <div id="mouse-operation-catcher"></div>
220 <script id="imgElementTemplete" type="text/x-jquery-tmpl">
221 <div class="comic-element-wrapper image-element"></div>
224 <script id="textElementTemplete" type="text/x-jquery-tmpl">
225 <div class="comic-element-wrapper text-element">
228 <div class="speach-inner"></div>
233 <script id="textElementTempleteForOldIE" type="text/x-jquery-tmpl">
234 <div class="comic-element-wrapper text-element">
237 <table><tr><td></td></tr></table>
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>
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>
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> -->
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>
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>
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>
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>
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>
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>
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>
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>
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>
326 <div id="overlay-container" style="display: none;">
327 <div id="overlay-shadow"></div>
330 <div id="speach-editor-wrapper">
331 <textarea id="speach-editor"></textarea>
332 <div id="speach-edit-complete-button" class="button">OK</div>
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>
342 <div id="overlay-close-button">x</div>
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>