JavaScriptを色々あれこれしようとするがひたすら失敗を繰り返している
| Revision | 25 (tree) |
|---|---|
| Time | 2016-11-24 06:09:38 |
| Author |  takoyaki_umaaaa |
(empty log message)
HtmlDrawApp/.vs/HTMLDrawApp/v14/.suo (diff) HtmlDrawApp/HTMLDrawApp/js/CommandMgr.js (diff) HtmlDrawApp/HTMLDrawApp/js/CommandObj.js (diff) HtmlDrawApp/HTMLDrawApp/js/DispObj.js (diff) HtmlDrawApp/HTMLDrawApp/js/DisplayField.js (diff) HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js (diff) HtmlDrawApp/HTMLDrawApp/js/ThreadMessage.js (diff) HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (diff) HtmlDrawApp/HTMLDrawApp/js/main.js (diff) HtmlDrawApp/HTMLDrawApp/js/palette.js (diff) HtmlDrawApp/HTMLDrawApp/js/palgroup.js (diff) HtmlDrawApp/HTMLDrawApp/js/worker_thread.js (diff)| @@ -1,5 +1,8 @@ | ||
| 1 | +// CommandMgr.js | |
| 1 | 2 | // Worker thread |
| 2 | -// Command処理を実行する | |
| 3 | +// UI threadからの要求Commandを受け付ける | |
| 4 | +// Worker thread側でcommand処理を実行することはない(今のところ。commandが表示に関する操作ばかりのため) | |
| 5 | +// 主な機能 | |
| 3 | 6 | // ・Queuing command. |
| 4 | 7 | // ・To process the command sequentially. |
| 5 | 8 | // ・And stack to undo list. |
| @@ -1,3 +1,10 @@ | ||
| 1 | +// CommandObj.js | |
| 2 | +// 処理commandの実体 | |
| 3 | +// 主な機能 | |
| 4 | +// ・command作成 | |
| 5 | +// ・不正内容チェック | |
| 6 | +// ・Thread間 通信電文も兼ねている | |
| 7 | + | |
| 1 | 8 | const cmdType = { |
| 2 | 9 | request: 0, |
| 3 | 10 | response: 1, |
| @@ -1,3 +1,10 @@ | ||
| 1 | +// DispObj.js | |
| 2 | +// Canvas上に配置される要素 | |
| 3 | +// 主な機能 | |
| 4 | +// ・外部からのfile dropによる要素作成 | |
| 5 | +// ・Dropされたtext, imageの読み込み | |
| 6 | +// ・Drag&Dropによる要素の移動 | |
| 7 | +// ・要素の拡大縮小, 回転 | |
| 1 | 8 | |
| 2 | 9 | class CDispObj { |
| 3 | 10 | constructor() { |
| @@ -1,3 +1,8 @@ | ||
| 1 | +// DisplayField.js | |
| 2 | +// Canvas部分 | |
| 3 | +// 主な機能 | |
| 4 | +// ・マウスイベント処理 (mousemove, mouseup) | |
| 5 | +// ・外部からのtext, image drop処理 (DispObj要素作成要求) | |
| 1 | 6 | |
| 2 | 7 | |
| 3 | 8 | class CDisplayField { |
| @@ -1,3 +1,12 @@ | ||
| 1 | +// ObjIDMgr.js | |
| 2 | +// Canvas上の表示要素 (DispObj) を管理する | |
| 3 | +// 主な機能 | |
| 4 | +// ・DispObjのリスト保持と管理 | |
| 5 | +// ・DispObjへのobjid割り当て | |
| 6 | +// ・objidから実体への変換 | |
| 7 | +// ・DispObjへのcommand処理要求 (振り分け) | |
| 8 | +// ・DispObjの描画関数呼び出し | |
| 9 | + | |
| 1 | 10 | class CObjIDMgr { |
| 2 | 11 | constructor() { |
| 3 | 12 | this.ObjIDLen = 0; |
| @@ -1,8 +1,11 @@ | ||
| 1 | -// importScripts()での読み込みは、先に定義がないとエラーになるためこのファイルを作成 | |
| 2 | -// (JavaScriptは実行時 型チェックのため定義が前後しても基本的には問題ないが | |
| 3 | -// worker thread用 import関数は読み込みと同時に実行も行うため) | |
| 1 | +// ThreadMessage.js | |
| 2 | +// Worker threadの作成、messageの送信 ★ここで受信したほうがいいのでは？ | |
| 3 | +// 実体はUI thread上で動作 | |
| 4 | +// 主な機能 | |
| 5 | +// ・Worker threadへの要求はこの実体を通す (処理を追いやすく) | |
| 6 | +// ・要求commandのlog出力 (漏れなく出力するため) | |
| 7 | +// ・(将来)command構成変更が発生したときにこのclassで対応できないか検討 (影響範囲の縮小) | |
| 4 | 8 | |
| 5 | - | |
| 6 | 9 | // UI thread用 定義 |
| 7 | 10 | // Worker thead起動， post message |
| 8 | 11 | function postToWorker() { |
| @@ -1,3 +1,9 @@ | ||
| 1 | +// UI_parts.js | |
| 2 | +// Canvas上の要素選択で表示される、focusを表示 | |
| 3 | +// 主な機能 | |
| 4 | +// ・要素の周囲にfocus表示 (機能はない) | |
| 5 | +// ・Focus line上に 拡大縮小, 回転用要素表示 | |
| 6 | +// ・拡大縮小, 回転の実行 | |
| 1 | 7 | |
| 2 | 8 | // [data-focus="true"] の場合のみ CSSで borderを変更したかったが |
| 3 | 9 | // DOMに直接 style指定するとその指定が最優先となるため CSSで上書きできない |
| @@ -1,4 +1,11 @@ | ||
| 1 | - | |
| 1 | +// main.js | |
| 2 | +// UI thread。実行開始箇所になる。 | |
| 3 | +// 主な機能 | |
| 4 | +// ・アプリ起動の初期化処理 (manager objectの作成) | |
| 5 | +// ・Worker thread起動 | |
| 6 | +// ・Worker threadからの通知受信と振り分け | |
| 7 | +// ・main loop (render loop) 処理 | |
| 8 | + | |
| 2 | 9 | (function () { |
| 3 | 10 | "use strict"; |
| 4 | 11 |
| @@ -1,4 +1,12 @@ | ||
| 1 | -class CSSPalette { | |
| 1 | +// palette.js | |
| 2 | +// Canvas上の要素を変更するための内容を保持するpalette | |
| 3 | +// Background用, Text color用, Action用 の3種類ある | |
| 4 | +// 主な機能 | |
| 5 | +// ・Drag&Dropによる移動 | |
| 6 | +// ・Target要素に自objidと同名のCSS class追加 | |
| 7 | +// ・外部からのDropによる text, image, css 読み込み | |
| 8 | + | |
| 9 | +class CSSPalette { | |
| 2 | 10 | constructor() { |
| 3 | 11 | this.DOMobject = []; |
| 4 | 12 | this.draggingDOM = null; |
| @@ -0,0 +1,9 @@ | ||
| 1 | +// palgroup.js | |
| 2 | +// Paletteの各要素をまとめるもの | |
| 3 | +// 主な機能 | |
| 4 | +// ・グループバーのDrag&Dropによる移動 | |
| 5 | +// ・グループバーの表示方向 vertical/horizon 切り替え | |
| 6 | +// ・Palette設定状態の Save/Load | |
| 7 | +// ・(将来)5 Palette単位で次のPalette, 前のPalette表示 | |
| 8 | +// ・(将来)バー表示を半透明,短く表示 | |
| 9 | + |
| @@ -1,3 +1,8 @@ | ||
| 1 | +// worker_thread.js | |
| 2 | +// UI threadからの要求Commandを受け付ける | |
| 3 | +// 主な機能 | |
| 4 | +// ・Message受信 | |
| 5 | +// ・CommandMgrに受信commandを渡す | |
| 1 | 6 | |
| 2 | 7 | // worker threadでのcommand処理に必要な class fileの読み込みと実行 |
| 3 | 8 | // (引数のjs内容の実行も行われる) |
