OSDN -- Develop and Download Open Source Software
  • R/O
  • SSH
  • HTTPS

Commit

Frequently used words (click to add to your profile)

javac++androidlinuxc#windowsobjective-ccocoa誰得qtpythonphprubygameguibathyscaphec計画中(planning stage)翻訳omegatframeworktwitterdomtestvb.netdirectxゲームエンジンbtronarduinopreviewer

JavaScriptを色々あれこれしようとするがひたすら失敗を繰り返している


Commit MetaInfo

Revision26 (tree)
Time2016-11-24 08:59:35
Authortakoyaki_umaaaa

Log Message

マウスイベントハンドラ担当を変更
パレットグループを移動できるように

Change Summary

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 26)
@@ -30,8 +30,17 @@
3030 [data-objid] {
3131 transition: transform 2s linear 0s;
3232 }
33-*/
33+*/
3434
35+
36+ #apparea{
37+ display: block;
38+ width: 100%; height: 100%;
39+ border: none;
40+ margin: 0; padding: 0;
41+ background-color: gainsboro;
42+ }
43+
3544 /* キャンバス要素の定義 */
3645 #DispField{
3746 display:block;
@@ -38,6 +47,7 @@
3847 width:400px; height:300px;
3948 border:1px solid black;
4049 margin: 10px;
50+ background-color: white;
4151 }
4252
4353
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 26)
@@ -8,102 +8,198 @@
88 <link href="css/default.css" rel="stylesheet" />
99 </head>
1010 <body>
11- <!-- 編集領域 -->
12- <div id="DispField" data-objid="DisplayField" data-focus="true">
13- </div>
14- <!-- 固定ボタン (選択要素の削除, 保存, …) -->
15- <button type=button class="pal" data-objid="pal" data-palid="0" data-value="0xff000001">削除</button>
16- <button type=button class="pal" data-objid="pal" data-palid="1" data-value="0x00ff0001">設定保存</button>
17- <button type=button class="pal" data-objid="pal" data-palid="2" data-value="0x0000ff01">設定Drop</button>
18- <button type=button class="pal" data-objid="pal" data-palid="3" data-value="0xffffff01">アニメ停止</button>
19- <button type=button class="pal" data-objid="pal" data-palid="4" data-value="0x00000000">button5</button>
20- <a href="#" id="save" download="savefilename.txt">画像保存</a><br />
2111
22- <!-- Palette -->
23- <style id="stylepalbg">
24- .palbg0 { background-image: url(dummy.png); }
25- .palbg1 { background-image: url(dummy.png); }
26- .palbg2 { background-image: url(dummy.png); }
27- .palbg3 { background-image: url(dummy.png); }
28- .palbg4 { background-image: url(dummy.png); }
29- </style>
30- <style id="stylepaltxtcol">
31- .paltxtcol0 { color: black; }
32- .paltxtcol1 { color: red; }
33- .paltxtcol2 { color: blue; }
34- .paltxtcol3 { color: green; }
35- .paltxtcol4 { color: brown; }
36- </style>
37- <style id="stylepalact">
38- /* animation指定，keyframe指定, … と交互に設定されている想定 */
39- /* palette css と keyframe は必ず1対1．例えkeyframeが使いまわせたとしても。 */
40- .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
41- @keyframes animeY1 {
42- 0% {transform: translateY(-60px) translateX(-30px);}
43- 10% {transform: translateY(20px) translateX(30px);}
44- 20% {transform: translateY(-40px) translateX(-20px);}
45- 30% {transform: translateY(50px) translateX(-10px);}
46- 40% {transform: translateY(-40px) translateX(20px);}
47- 50% {transform: translateY(30px) translateX(-15px);}
48- 60% {transform: translateY(-25px) translateX(0px);}
49- 70% {transform: translateY(15px) translateX(-15px);}
50- 80% {transform: translateY(-10px) translateX(10px);}
51- 90% {transform: translateY(0px) translateX(-5px);}
52- 100% {transform: translateY(0px) translateX(0px);}
53- }
12+ <div id="apparea" data-objid="apparea">
13+ <!-- 編集領域 -->
14+ <div id="DispField" data-objid="DisplayField" data-focus="true">
15+ </div>
16+ <!-- 固定ボタン (選択要素の削除, 保存, …) -->
17+ <button type=button class="pal" data-objid="pal" data-palid="0" data-value="0xff000001">削除</button>
18+ <button type=button class="pal" data-objid="pal" data-palid="1" data-value="0x00ff0001">設定保存</button>
19+ <button type=button class="pal" data-objid="pal" data-palid="2" data-value="0x0000ff01">設定Drop</button>
20+ <button type=button class="pal" data-objid="pal" data-palid="3" data-value="0xffffff01">アニメ停止</button>
21+ <button type=button class="pal" data-objid="pal" data-palid="4" data-value="0x00000000">button5</button>
22+ <a href="#" id="save" download="savefilename.txt">画像保存</a><br />
5423
55- .palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
56- @keyframes animeact1 { to {color:black;} }
24+ <!-- Palette -->
25+ <style id="stylepalbg">
26+ .palbg0 {
27+ background-image: url(dummy.png);
28+ }
5729
58- .palact2 { animation: animeact2 2s ease-in 0.3s 1 normal; }
59- @keyframes animeact2 { to {color:black;} }
30+ .palbg1 {
31+ background-image: url(dummy.png);
32+ }
6033
61- .palact3 { animation: animeact3 2s ease-in 0.3s 1 normal; }
62- @keyframes animeact3 { to {color:black;} }
34+ .palbg2 {
35+ background-image: url(dummy.png);
36+ }
6337
64- .palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
65- @keyframes animeact4 { to {color:black;} }
66- </style>
38+ .palbg3 {
39+ background-image: url(dummy.png);
40+ }
6741
68- <fieldset class="palgroup palgrouphorizon" data-objid="palgroup0">
69- <legend class="pallegend"> Background <button>横</button> </legend>
70- <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
71- <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
72- <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
73- <div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
74- <div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
75- </fieldset>
76- <br />
42+ .palbg4 {
43+ background-image: url(dummy.png);
44+ }
45+ </style>
46+ <style id="stylepaltxtcol">
47+ .paltxtcol0 {
48+ color: black;
49+ }
7750
78- <fieldset class="palgroup palgrouphorizon" data-objid="palgroup1">
79- <legend class="pallegend"> Text Color <button>横</button> </legend>
80- <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
81- <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
82- <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
83- <div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3">あ</div>
84- <div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4">あ</div>
85- </fieldset>
51+ .paltxtcol1 {
52+ color: red;
53+ }
8654
55+ .paltxtcol2 {
56+ color: blue;
57+ }
58+
59+ .paltxtcol3 {
60+ color: green;
61+ }
62+
63+ .paltxtcol4 {
64+ color: brown;
65+ }
66+ </style>
67+ <style id="stylepalact">
68+ /* animation指定，keyframe指定, … と交互に設定されている想定 */
69+ /* palette css と keyframe は必ず1対1．例えkeyframeが使いまわせたとしても。 */
70+ .palact0 {
71+ animation: animeY1 0.5s ease-in 0.3s 1 normal;
72+ }
73+
74+ @keyframes animeY1 {
75+ 0% {
76+ transform: translateY(-60px) translateX(-30px);
77+ }
78+
79+ 10% {
80+ transform: translateY(20px) translateX(30px);
81+ }
82+
83+ 20% {
84+ transform: translateY(-40px) translateX(-20px);
85+ }
86+
87+ 30% {
88+ transform: translateY(50px) translateX(-10px);
89+ }
90+
91+ 40% {
92+ transform: translateY(-40px) translateX(20px);
93+ }
94+
95+ 50% {
96+ transform: translateY(30px) translateX(-15px);
97+ }
98+
99+ 60% {
100+ transform: translateY(-25px) translateX(0px);
101+ }
102+
103+ 70% {
104+ transform: translateY(15px) translateX(-15px);
105+ }
106+
107+ 80% {
108+ transform: translateY(-10px) translateX(10px);
109+ }
110+
111+ 90% {
112+ transform: translateY(0px) translateX(-5px);
113+ }
114+
115+ 100% {
116+ transform: translateY(0px) translateX(0px);
117+ }
118+ }
119+
120+ .palact1 {
121+ animation: animeact1 2s ease-in 0.3s 1 normal;
122+ }
123+
124+ @keyframes animeact1 {
125+ to {
126+ color: black;
127+ }
128+ }
129+
130+ .palact2 {
131+ animation: animeact2 2s ease-in 0.3s 1 normal;
132+ }
133+
134+ @keyframes animeact2 {
135+ to {
136+ color: black;
137+ }
138+ }
139+
140+ .palact3 {
141+ animation: animeact3 2s ease-in 0.3s 1 normal;
142+ }
143+
144+ @keyframes animeact3 {
145+ to {
146+ color: black;
147+ }
148+ }
149+
150+ .palact4 {
151+ animation: animeact4 2s ease-in 0.3s 1 normal;
152+ }
153+
154+ @keyframes animeact4 {
155+ to {
156+ color: black;
157+ }
158+ }
159+ </style>
160+
161+ <fieldset class="palgroup palgrouphorizon" data-objid="palgroup0">
162+ <legend class="pallegend"> Background <button>横</button> </legend>
163+ <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
164+ <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
165+ <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
166+ <div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
167+ <div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
168+ </fieldset>
87169 <br />
88170
89- <fieldset class="palgroup palgrouphorizon" data-objid="palgroup2">
90- <legend class="pallegend"> Action <span class="buttonstyle">horizon</span> </legend>
91- <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
92- <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
93- <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
94- <div class="palact palact3" data-objid="palact3" data-palid="3"></div>
95- <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
96- </fieldset>
171+ <fieldset class="palgroup palgrouphorizon" data-objid="palgroup1">
172+ <legend class="pallegend"> Text Color <button>横</button> </legend>
173+ <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
174+ <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
175+ <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
176+ <div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3">あ</div>
177+ <div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4">あ</div>
178+ </fieldset>
97179
180+ <br />
181+
182+ <fieldset class="palgroup palgrouphorizon" data-objid="palgroup2">
183+ <legend class="pallegend"> Action <span class="buttonstyle">horizon</span> </legend>
184+ <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
185+ <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
186+ <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
187+ <div class="palact palact3" data-objid="palact3" data-palid="3"></div>
188+ <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
189+ </fieldset>
190+ </div>
191+
98192 <script type="text/javascript" src="js/Common.js"></script>
99193 <script type="text/javascript" src="js/Queue.js"></script>
100194 <script type="text/javascript" src="js/CommandObj.js"></script>
101195 <script type="text/javascript" src="js/UI_parts.js"></script>
196+ <script type="text/javascript" src="js/palgroup.js"></script>
102197 <script type="text/javascript" src="js/palette.js"></script>
103198 <script type="text/javascript" src="js/DispObj.js"></script>
104199 <script type="text/javascript" src="js/ObjIDMgr.js"></script>
105200 <script type="text/javascript" src="js/ThreadMessage.js"></script>
106201 <script type="text/javascript" src="js/DisplayField.js"></script>
202+ <script type="text/javascript" src="js/apparea.js"></script>
107203 <script type="text/javascript" src="js/main.js"></script>
108204 </body>
109205 </html>
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/CommandMgr.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/CommandMgr.js (revision 26)
@@ -1,5 +1,7 @@
1-// Worker thread
2-// Command処理を実行する
1+// CommandMgr.js
2+// Worker thread上で動作
3+// Worker thread側でcommand処理を実行することはない(今のところ。commandが表示に関する操作ばかりのため)
4+// 主な機能
35 // ・Queuing command.
46 // ・To process the command sequentially.
57 // ・And stack to undo list.
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/CommandObj.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/CommandObj.js (revision 26)
@@ -1,3 +1,10 @@
1+// CommandObj.js
2+// 処理commandの実体
3+// 主な機能
4+// ・command作成
5+// ・不正内容チェック
6+// ・Thread間 通信電文も兼ねている
7+
18 const cmdType = {
29 request: 0,
310 response: 1,
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 26)
@@ -1,3 +1,10 @@
1+// DispObj.js
2+// Canvas上に配置される要素
3+// 主な機能
4+// ・外部からのfile dropによる要素作成
5+// ・Dropされたtext, imageの読み込み
6+// ・Drag&Dropによる要素の移動
7+// ・要素の拡大縮小, 回転
18
29 class CDispObj {
310 constructor() {
@@ -239,8 +246,8 @@
239246 if (0 == (evt.buttons & 0x0001)) { // 左クリックチェック
240247 return;
241248 }
242- // Mouse eventをDisplayFieldからScalerに渡してもらうように設定
243- window.displayField.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
249+ // Mouse eventをappAreaからScalerに渡してもらうように設定
250+ window.appArea.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
244251
245252
246253 // Focus設定
@@ -274,7 +281,7 @@
274281 mouseUp(evt) {
275282 this.debuglog("mouseUp");
276283 // Mouse event処理対象をクリア
277- window.displayField.setMouseEventObj(null, null);
284+ window.appArea.setMouseEventObj(null, null);
278285
279286
280287 // 移動元として座標を保持
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DisplayField.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DisplayField.js (revision 26)
@@ -1,3 +1,8 @@
1+// DisplayField.js
2+// Canvas部分
3+// 主な機能
4+// ・マウスイベント処理 (mousemove, mouseup)
5+// ・外部からのtext, image drop処理 (DispObj要素作成要求)
16
27
38 class CDisplayField {
@@ -15,13 +20,13 @@
1520 // ■ 初期化
1621 initialize() {
1722 if (null == this.DOMobject) {
18- console.log("【DisplayField】 initialize() DOMobject is null.");
23+ console.error("【DisplayField】 initialize() DOMobject is null.");
1924 return false;
2025 }
2126 this.debuglog("initialize");
22- this.DOMobject.addEventListener('mousemove', this.onMouseMove.bind(this), false);
23- this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
24- this.DOMobject.addEventListener('mouseup', this.onMouseUp.bind(this), false);
27+// this.DOMobject.addEventListener('mousemove', this.onMouseMove.bind(this), false);
28+// this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
29+// this.DOMobject.addEventListener('mouseup', this.onMouseUp.bind(this), false);
2530 this.DOMobject.addEventListener('dragstart', this.onDragStart.bind(this), false);
2631 this.DOMobject.addEventListener('dragover', this.onDragover.bind(this), false);
2732 this.DOMobject.addEventListener('drop', this.onDrop.bind(this), false);
@@ -29,7 +34,7 @@
2934
3035
3136 // 操作関数 -----------------------------------
32-
37+/*
3338 // Mouse eventを処理するObj
3439 setMouseEventObj(mouseMove, mouseUp) {
3540 this.debuglog('setMouseEventObj');
@@ -37,9 +42,9 @@
3742 this.mouseMoveFunc = mouseMove;
3843 this.mouseUpFunc = mouseUp;
3944 }
45+*/
4046
4147
42-
4348 // ブラウザ上への描画 -------------------------
4449 render() {
4550 while (0 < this.renderFunc.size()) {
@@ -52,7 +57,7 @@
5257
5358
5459 // Event handler -------------------
55-
60+ /*
5661 // ■マウス左ボタン押下 (Drag処理)
5762 onMouseDown(evt) {
5863 }
@@ -76,7 +81,7 @@
7681 return;
7782 }
7883 }
79-
84+ */
8085 // 表示要素の drag & drop禁止
8186 onDragStart(evt) {
8287 evt.preventDefault();
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js (revision 26)
@@ -1,3 +1,12 @@
1+// ObjIDMgr.js
2+// Canvas上の表示要素 (DispObj) を管理する
3+// 主な機能
4+// ・DispObjのリスト保持と管理
5+// ・DispObjへのobjid割り当て
6+// ・objidから実体への変換
7+// ・DispObjへのcommand処理要求 (振り分け)
8+// ・DispObjの描画関数呼び出し
9+
110 class CObjIDMgr {
211 constructor() {
312 this.ObjIDLen = 0;
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ThreadMessage.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ThreadMessage.js (revision 26)
@@ -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で対応できないか検討 (影響範囲の縮小)
48
5-
69 // UI thread用 定義
710 // Worker thead起動， post message
811 function postToWorker() {
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/UI_parts.js (revision 26)
@@ -1,3 +1,9 @@
1+// UI_parts.js
2+// Canvas上の要素選択で表示される、focusを表示
3+// 主な機能
4+// ・要素の周囲にfocus表示 (機能はない)
5+// ・Focus line上に 拡大縮小, 回転用要素表示
6+// ・拡大縮小, 回転の実行
17
28 // [data-focus="true"] の場合のみ CSSで borderを変更したかったが
39 // DOMに直接 style指定するとその指定が最優先となるため CSSで上書きできない
@@ -252,8 +258,8 @@
252258 onMouseDownScale(evt) {
253259 this.debuglog('onMouseDownScale');
254260
255- // Mouse eventをDisplayFieldからScalerに渡してもらうように設定
256- window.displayField.setMouseEventObj(this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
261+ // Mouse eventをappAreaからScalerに渡してもらうように設定
262+ window.appArea.setMouseEventObj(this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
257263
258264 // 移動元として座標を保持
259265 this.scaleStartWidth = parseInt(this.clingingPartner.style.width);
@@ -301,7 +307,7 @@
301307 mouseUpScale(evt) {
302308 this.debuglog('mouseUpScale');
303309 // Mouse event callback設定をクリア
304- window.displayField.setMouseEventObj(null, null);
310+ window.appArea.setMouseEventObj(null, null);
305311
306312 // 画像の仮変形
307313 this.endDragX = evt.pageX;
@@ -338,8 +344,8 @@
338344 onMouseDownRoll(evt) {
339345 this.debuglog('onMouseDownRoll');
340346
341- // Mouse eventをDisplayFieldからRollerに渡してもらうように設定
342- window.displayField.setMouseEventObj(this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
347+ // Mouse eventをappAreaからRollerに渡してもらうように設定
348+ window.appArea.setMouseEventObj(this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
343349 }
344350 mouseMoveRoll(evt) {
345351 let x1 = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width) / 2;
@@ -356,7 +362,7 @@
356362 mouseUpRoll(evt) {
357363 this.debuglog('mouseUpRoll');
358364 // Mouse event callback設定をクリア
359- window.displayField.setMouseEventObj(null, null);
365+ window.appArea.setMouseEventObj(null, null);
360366
361367 let x1 = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width) / 2;
362368 let y1 = parseInt(this.clingingPartner.style.top) + parseInt(this.clingingPartner.style.height) / 2;
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js (nonexistent)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/apparea.js (revision 26)
@@ -0,0 +1,65 @@
1+// apparea.js
2+// マウスイベントハンドリング
3+
4+class appArea {
5+ constructor(dom) {
6+ this.DOMobject = dom;
7+ this.mouseMoveFunc = null;
8+ this.mouseUpFunc = null;
9+ }
10+ debuglog(str) {
11+ debuglog("【appArea】" + str);
12+ }
13+
14+ initialize() {
15+ if (null == this.DOMobject) {
16+ console.error("【appArea】 initialize() DOMobject is null.");
17+ return false;
18+ }
19+ this.debuglog("initialize");
20+ this.DOMobject.addEventListener('mousemove', this.onMouseMove.bind(this), false);
21+ this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
22+ this.DOMobject.addEventListener('mouseup', this.onMouseUp.bind(this), false);
23+ }
24+
25+
26+
27+ // 操作関数 -----------------------------------
28+
29+ // Mouse eventを処理するObj
30+ setMouseEventObj(mouseMove, mouseUp) {
31+ this.debuglog('setMouseEventObj');
32+
33+ this.mouseMoveFunc = mouseMove;
34+ this.mouseUpFunc = mouseUp;
35+ }
36+
37+ // Event handler -------------------
38+
39+ // ■マウス左ボタン押下 (Drag処理)
40+ onMouseDown(evt) {
41+ }
42+ // ■ マウス移動 (ドラッグ中)
43+ onMouseMove(evt) {
44+ // ★ evt.targetが期待するelementかチェックする必要がある
45+ // ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
46+
47+ if (null != this.mouseMoveFunc) {
48+ this.mouseMoveFunc(evt);
49+ return;
50+ }
51+ }
52+ // ■ ドロップ処理
53+ onMouseUp(evt) {
54+ // ★ evt.targetが期待するelementかチェックする必要がある
55+ // ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
56+
57+ if (null != this.mouseUpFunc) {
58+ this.mouseUpFunc(evt);
59+ return;
60+ }
61+ }
62+
63+
64+
65+}
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 26)
@@ -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 {
210 constructor() {
311 this.DOMobject = [];
412 this.draggingDOM = null;
@@ -22,6 +30,7 @@
2230 this.DOMpalbg[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
2331 this.DOMpalbg[cnt].style.top = 10 + 'px';
2432 this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
33+ this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
2534 this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
2635 this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
2736 this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -32,6 +41,7 @@
3241 this.DOMpaltxtcol[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
3342 this.DOMpaltxtcol[cnt].style.top = 10 + 'px';
3443 this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
44+ this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
3545 this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
3646 this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
3747 this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -167,8 +177,8 @@
167177 // Mouse event
168178 // 自elementをDragし、Drop時にTarget elementに自分のCSS classを適用する
169179 onMouseDown(evt) {
170- // Mouse eventをDisplayFieldからCSSPalに渡してもらうように設定
171- window.displayField.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
180+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定
181+ window.appArea.setMouseEventObj(this.mouseMove.bind(this), null);
172182
173183 // Drag対象を保持
174184 this.draggingDOM = evt.target;
@@ -198,7 +208,8 @@
198208 renderMoveDragging(x, y) {
199209 this.draggingDOM.style.left = x + "px";
200210 this.draggingDOM.style.top = y + "px";
201- this.draggingDOM.style.opacity = 0.4;
211+ if( 1.0 == this.draggingDOM.style.opacity )
212+ this.draggingDOM.style.opacity = 0.4;
202213 }
203214 mouseUp(evt) {
204215 let palobjid = this.draggingDOM.dataset.objid;
@@ -212,7 +223,7 @@
212223 // Drag中 element情報をクリア
213224 this.draggingDOM = null;
214225 // Mouse event callback設定をクリア
215- window.displayField.setMouseEventObj(null, null);
226+ window.appArea.setMouseEventObj(null, null);
216227
217228 // マウス座標直下にある要素を検索
218229 // (evt.targetは自分を指してしまうため)
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (nonexistent)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 26)
@@ -0,0 +1,88 @@
1+// palgroup.js
2+// Paletteの各要素をまとめるもの
3+// 主な機能
4+// ・グループバーのDrag&Dropによる移動
5+// ・グループバーの表示方向 vertical/horizon 切り替え
6+// ・Palette設定状態の Save/Load
7+// ・(将来)5 Palette単位で次のPalette, 前のPalette表示
8+// ・(将来)バー表示を半透明,短く表示
9+
10+class PalGroup {
11+ constructor() {
12+ this.DOMobject = []; // bg,text,action
13+ this.renderFunc = new Queue();
14+ }
15+ debuglog(str) {
16+ debuglog('【PalGroup】 ' + str);
17+ }
18+
19+ initialize() {
20+ this.DOMobject = document.getElementsByClassName('palgroup');
21+ for (let cnt = 0; cnt < this.DOMobject.length; cnt++) {
22+ this.DOMobject[cnt].style.left = 0 + 'px';
23+ this.DOMobject[cnt].style.top = 30 * cnt + 'px';
24+ this.DOMobject[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
25+ this.DOMobject[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
26+ }
27+ }
28+
29+ // 操作関数 ----------------------------
30+
31+
32+ // 描画関数 ---------------------
33+
34+ render() {
35+ while (0 < this.renderFunc.size()) {
36+ let renderFunction = this.renderFunc.dequeue();
37+ renderFunction();
38+ }
39+ }
40+
41+
42+
43+ // Event handler -----------------------
44+
45+ onMouseDown(evt) {
46+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定
47+ window.appArea.setMouseEventObj(this.mouseMove.bind(this), null);
48+
49+ // Drag対象を保持
50+ this.draggingDOM = evt.target;
51+ // ElementのDrag開始位置を保持
52+ this.startElementX = parseInt(this.draggingDOM.style.left);
53+ this.startElementY = parseInt(this.draggingDOM.style.top);
54+ // MouseのDrag開始位置を保持
55+ this.startDragX = evt.pageX;
56+ this.startDragY = evt.pageY;
57+ }
58+ mouseMove(evt) {
59+ if (null == this.draggingDOM) return;
60+
61+ // 画像の仮移動
62+ this.endDragX = evt.pageX;
63+ this.endDragY = evt.pageY;
64+ // 移動量取得
65+ let moveX = this.endDragX - this.startDragX;
66+ let moveY = this.endDragY - this.startDragY;
67+ // dispObjがあった位置からマウス移動分移動させた後の位置取得
68+ moveX = this.startElementX + moveX;
69+ moveY = this.startElementY + moveY;
70+
71+ this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
72+ //this.renderMoveDragging(moveX, moveY);
73+ }
74+ renderMoveDragging(x, y) {
75+ // 非同期のためmouseupの後に入ることがある
76+ if (null == this.draggingDOM) return;
77+
78+ this.draggingDOM.style.left = x + "px";
79+ this.draggingDOM.style.top = y + "px";
80+ }
81+ mouseUp(evt) {
82+ // Drag中 element情報をクリア
83+ this.draggingDOM = null;
84+ // Mouse event callback設定をクリア
85+ window.appArea.setMouseEventObj(null, null);
86+ }
87+
88+}
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/worker_thread.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/worker_thread.js (revision 26)
@@ -1,3 +1,8 @@
1+// worker_thread.js
2+// UI threadからの要求Commandを受け付ける
3+// 主な機能
4+// ・Message受信
5+// ・CommandMgrに受信commandを渡す
16
27 // worker threadでのcommand処理に必要な class fileの読み込みと実行
38 // (引数のjs内容の実行も行われる)
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 26)
@@ -30,8 +30,17 @@
3030 [data-objid] {
3131 transition: transform 2s linear 0s;
3232 }
33-*/
33+*/
3434
35+
36+ #apparea{
37+ display: block;
38+ width: 100%; height: 100%;
39+ border: none;
40+ margin: 0; padding: 0;
41+ background-color: gainsboro;
42+ }
43+
3544 /* キャンバス要素の定義 */
3645 #DispField{
3746 display:block;
@@ -38,6 +47,7 @@
3847 width:400px; height:300px;
3948 border:1px solid black;
4049 margin: 10px;
50+ background-color: white;
4151 }
4252
4353
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 26)
@@ -8,102 +8,198 @@
88 <link href="css/default.css" rel="stylesheet" />
99 </head>
1010 <body>
11- <!-- 編集領域 -->
12- <div id="DispField" data-objid="DisplayField" data-focus="true">
13- </div>
14- <!-- 固定ボタン (選択要素の削除, 保存, …) -->
15- <button type=button class="pal" data-objid="pal" data-palid="0" data-value="0xff000001">削除</button>
16- <button type=button class="pal" data-objid="pal" data-palid="1" data-value="0x00ff0001">設定保存</button>
17- <button type=button class="pal" data-objid="pal" data-palid="2" data-value="0x0000ff01">設定Drop</button>
18- <button type=button class="pal" data-objid="pal" data-palid="3" data-value="0xffffff01">アニメ停止</button>
19- <button type=button class="pal" data-objid="pal" data-palid="4" data-value="0x00000000">button5</button>
20- <a href="#" id="save" download="savefilename.txt">画像保存</a><br />
2111
22- <!-- Palette -->
23- <style id="stylepalbg">
24- .palbg0 { background-image: url(dummy.png); }
25- .palbg1 { background-image: url(dummy.png); }
26- .palbg2 { background-image: url(dummy.png); }
27- .palbg3 { background-image: url(dummy.png); }
28- .palbg4 { background-image: url(dummy.png); }
29- </style>
30- <style id="stylepaltxtcol">
31- .paltxtcol0 { color: black; }
32- .paltxtcol1 { color: red; }
33- .paltxtcol2 { color: blue; }
34- .paltxtcol3 { color: green; }
35- .paltxtcol4 { color: brown; }
36- </style>
37- <style id="stylepalact">
38- /* animation指定，keyframe指定, … と交互に設定されている想定 */
39- /* palette css と keyframe は必ず1対1．例えkeyframeが使いまわせたとしても。 */
40- .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
41- @keyframes animeY1 {
42- 0% {transform: translateY(-60px) translateX(-30px);}
43- 10% {transform: translateY(20px) translateX(30px);}
44- 20% {transform: translateY(-40px) translateX(-20px);}
45- 30% {transform: translateY(50px) translateX(-10px);}
46- 40% {transform: translateY(-40px) translateX(20px);}
47- 50% {transform: translateY(30px) translateX(-15px);}
48- 60% {transform: translateY(-25px) translateX(0px);}
49- 70% {transform: translateY(15px) translateX(-15px);}
50- 80% {transform: translateY(-10px) translateX(10px);}
51- 90% {transform: translateY(0px) translateX(-5px);}
52- 100% {transform: translateY(0px) translateX(0px);}
53- }
12+ <div id="apparea" data-objid="apparea">
13+ <!-- 編集領域 -->
14+ <div id="DispField" data-objid="DisplayField" data-focus="true">
15+ </div>
16+ <!-- 固定ボタン (選択要素の削除, 保存, …) -->
17+ <button type=button class="pal" data-objid="pal" data-palid="0" data-value="0xff000001">削除</button>
18+ <button type=button class="pal" data-objid="pal" data-palid="1" data-value="0x00ff0001">設定保存</button>
19+ <button type=button class="pal" data-objid="pal" data-palid="2" data-value="0x0000ff01">設定Drop</button>
20+ <button type=button class="pal" data-objid="pal" data-palid="3" data-value="0xffffff01">アニメ停止</button>
21+ <button type=button class="pal" data-objid="pal" data-palid="4" data-value="0x00000000">button5</button>
22+ <a href="#" id="save" download="savefilename.txt">画像保存</a><br />
5423
55- .palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
56- @keyframes animeact1 { to {color:black;} }
24+ <!-- Palette -->
25+ <style id="stylepalbg">
26+ .palbg0 {
27+ background-image: url(dummy.png);
28+ }
5729
58- .palact2 { animation: animeact2 2s ease-in 0.3s 1 normal; }
59- @keyframes animeact2 { to {color:black;} }
30+ .palbg1 {
31+ background-image: url(dummy.png);
32+ }
6033
61- .palact3 { animation: animeact3 2s ease-in 0.3s 1 normal; }
62- @keyframes animeact3 { to {color:black;} }
34+ .palbg2 {
35+ background-image: url(dummy.png);
36+ }
6337
64- .palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
65- @keyframes animeact4 { to {color:black;} }
66- </style>
38+ .palbg3 {
39+ background-image: url(dummy.png);
40+ }
6741
68- <fieldset class="palgroup palgrouphorizon" data-objid="palgroup0">
69- <legend class="pallegend"> Background <button>横</button> </legend>
70- <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
71- <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
72- <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
73- <div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
74- <div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
75- </fieldset>
76- <br />
42+ .palbg4 {
43+ background-image: url(dummy.png);
44+ }
45+ </style>
46+ <style id="stylepaltxtcol">
47+ .paltxtcol0 {
48+ color: black;
49+ }
7750
78- <fieldset class="palgroup palgrouphorizon" data-objid="palgroup1">
79- <legend class="pallegend"> Text Color <button>横</button> </legend>
80- <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
81- <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
82- <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
83- <div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3">あ</div>
84- <div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4">あ</div>
85- </fieldset>
51+ .paltxtcol1 {
52+ color: red;
53+ }
8654
55+ .paltxtcol2 {
56+ color: blue;
57+ }
58+
59+ .paltxtcol3 {
60+ color: green;
61+ }
62+
63+ .paltxtcol4 {
64+ color: brown;
65+ }
66+ </style>
67+ <style id="stylepalact">
68+ /* animation指定，keyframe指定, … と交互に設定されている想定 */
69+ /* palette css と keyframe は必ず1対1．例えkeyframeが使いまわせたとしても。 */
70+ .palact0 {
71+ animation: animeY1 0.5s ease-in 0.3s 1 normal;
72+ }
73+
74+ @keyframes animeY1 {
75+ 0% {
76+ transform: translateY(-60px) translateX(-30px);
77+ }
78+
79+ 10% {
80+ transform: translateY(20px) translateX(30px);
81+ }
82+
83+ 20% {
84+ transform: translateY(-40px) translateX(-20px);
85+ }
86+
87+ 30% {
88+ transform: translateY(50px) translateX(-10px);
89+ }
90+
91+ 40% {
92+ transform: translateY(-40px) translateX(20px);
93+ }
94+
95+ 50% {
96+ transform: translateY(30px) translateX(-15px);
97+ }
98+
99+ 60% {
100+ transform: translateY(-25px) translateX(0px);
101+ }
102+
103+ 70% {
104+ transform: translateY(15px) translateX(-15px);
105+ }
106+
107+ 80% {
108+ transform: translateY(-10px) translateX(10px);
109+ }
110+
111+ 90% {
112+ transform: translateY(0px) translateX(-5px);
113+ }
114+
115+ 100% {
116+ transform: translateY(0px) translateX(0px);
117+ }
118+ }
119+
120+ .palact1 {
121+ animation: animeact1 2s ease-in 0.3s 1 normal;
122+ }
123+
124+ @keyframes animeact1 {
125+ to {
126+ color: black;
127+ }
128+ }
129+
130+ .palact2 {
131+ animation: animeact2 2s ease-in 0.3s 1 normal;
132+ }
133+
134+ @keyframes animeact2 {
135+ to {
136+ color: black;
137+ }
138+ }
139+
140+ .palact3 {
141+ animation: animeact3 2s ease-in 0.3s 1 normal;
142+ }
143+
144+ @keyframes animeact3 {
145+ to {
146+ color: black;
147+ }
148+ }
149+
150+ .palact4 {
151+ animation: animeact4 2s ease-in 0.3s 1 normal;
152+ }
153+
154+ @keyframes animeact4 {
155+ to {
156+ color: black;
157+ }
158+ }
159+ </style>
160+
161+ <fieldset class="palgroup palgrouphorizon" data-objid="palgroup0">
162+ <legend class="pallegend"> Background <button>横</button> </legend>
163+ <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
164+ <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
165+ <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
166+ <div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
167+ <div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
168+ </fieldset>
87169 <br />
88170
89- <fieldset class="palgroup palgrouphorizon" data-objid="palgroup2">
90- <legend class="pallegend"> Action <span class="buttonstyle">horizon</span> </legend>
91- <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
92- <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
93- <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
94- <div class="palact palact3" data-objid="palact3" data-palid="3"></div>
95- <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
96- </fieldset>
171+ <fieldset class="palgroup palgrouphorizon" data-objid="palgroup1">
172+ <legend class="pallegend"> Text Color <button>横</button> </legend>
173+ <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
174+ <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
175+ <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
176+ <div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3">あ</div>
177+ <div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4">あ</div>
178+ </fieldset>
97179
180+ <br />
181+
182+ <fieldset class="palgroup palgrouphorizon" data-objid="palgroup2">
183+ <legend class="pallegend"> Action <span class="buttonstyle">horizon</span> </legend>
184+ <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
185+ <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
186+ <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
187+ <div class="palact palact3" data-objid="palact3" data-palid="3"></div>
188+ <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
189+ </fieldset>
190+ </div>
191+
98192 <script type="text/javascript" src="js/Common.js"></script>
99193 <script type="text/javascript" src="js/Queue.js"></script>
100194 <script type="text/javascript" src="js/CommandObj.js"></script>
101195 <script type="text/javascript" src="js/UI_parts.js"></script>
196+ <script type="text/javascript" src="js/palgroup.js"></script>
102197 <script type="text/javascript" src="js/palette.js"></script>
103198 <script type="text/javascript" src="js/DispObj.js"></script>
104199 <script type="text/javascript" src="js/ObjIDMgr.js"></script>
105200 <script type="text/javascript" src="js/ThreadMessage.js"></script>
106201 <script type="text/javascript" src="js/DisplayField.js"></script>
202+ <script type="text/javascript" src="js/apparea.js"></script>
107203 <script type="text/javascript" src="js/main.js"></script>
108204 </body>
109205 </html>
--- HtmlDrawApp/HTMLDrawApp/js/CommandMgr.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/js/CommandMgr.js (revision 26)
@@ -1,6 +1,5 @@
11 // CommandMgr.js
2-// Worker thread
3-// UI threadからの要求Commandを受け付ける
2+// Worker thread上で動作
43 // Worker thread側でcommand処理を実行することはない(今のところ。commandが表示に関する操作ばかりのため)
54 // 主な機能
65 // ・Queuing command.
--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 26)
@@ -246,8 +246,8 @@
246246 if (0 == (evt.buttons & 0x0001)) { // 左クリックチェック
247247 return;
248248 }
249- // Mouse eventをDisplayFieldからScalerに渡してもらうように設定
250- window.displayField.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
249+ // Mouse eventをappAreaからScalerに渡してもらうように設定
250+ window.appArea.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
251251
252252
253253 // Focus設定
@@ -281,7 +281,7 @@
281281 mouseUp(evt) {
282282 this.debuglog("mouseUp");
283283 // Mouse event処理対象をクリア
284- window.displayField.setMouseEventObj(null, null);
284+ window.appArea.setMouseEventObj(null, null);
285285
286286
287287 // 移動元として座標を保持
--- HtmlDrawApp/HTMLDrawApp/js/DisplayField.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/js/DisplayField.js (revision 26)
@@ -20,13 +20,13 @@
2020 // ■ 初期化
2121 initialize() {
2222 if (null == this.DOMobject) {
23- console.log("【DisplayField】 initialize() DOMobject is null.");
23+ console.error("【DisplayField】 initialize() DOMobject is null.");
2424 return false;
2525 }
2626 this.debuglog("initialize");
27- this.DOMobject.addEventListener('mousemove', this.onMouseMove.bind(this), false);
28- this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
29- this.DOMobject.addEventListener('mouseup', this.onMouseUp.bind(this), false);
27+// this.DOMobject.addEventListener('mousemove', this.onMouseMove.bind(this), false);
28+// this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
29+// this.DOMobject.addEventListener('mouseup', this.onMouseUp.bind(this), false);
3030 this.DOMobject.addEventListener('dragstart', this.onDragStart.bind(this), false);
3131 this.DOMobject.addEventListener('dragover', this.onDragover.bind(this), false);
3232 this.DOMobject.addEventListener('drop', this.onDrop.bind(this), false);
@@ -34,7 +34,7 @@
3434
3535
3636 // 操作関数 -----------------------------------
37-
37+/*
3838 // Mouse eventを処理するObj
3939 setMouseEventObj(mouseMove, mouseUp) {
4040 this.debuglog('setMouseEventObj');
@@ -42,9 +42,9 @@
4242 this.mouseMoveFunc = mouseMove;
4343 this.mouseUpFunc = mouseUp;
4444 }
45+*/
4546
4647
47-
4848 // ブラウザ上への描画 -------------------------
4949 render() {
5050 while (0 < this.renderFunc.size()) {
@@ -57,7 +57,7 @@
5757
5858
5959 // Event handler -------------------
60-
60+ /*
6161 // ■マウス左ボタン押下 (Drag処理)
6262 onMouseDown(evt) {
6363 }
@@ -81,7 +81,7 @@
8181 return;
8282 }
8383 }
84-
84+ */
8585 // 表示要素の drag & drop禁止
8686 onDragStart(evt) {
8787 evt.preventDefault();
--- HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 26)
@@ -258,8 +258,8 @@
258258 onMouseDownScale(evt) {
259259 this.debuglog('onMouseDownScale');
260260
261- // Mouse eventをDisplayFieldからScalerに渡してもらうように設定
262- window.displayField.setMouseEventObj(this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
261+ // Mouse eventをappAreaからScalerに渡してもらうように設定
262+ window.appArea.setMouseEventObj(this.mouseMoveScale.bind(this), this.mouseUpScale.bind(this));
263263
264264 // 移動元として座標を保持
265265 this.scaleStartWidth = parseInt(this.clingingPartner.style.width);
@@ -307,7 +307,7 @@
307307 mouseUpScale(evt) {
308308 this.debuglog('mouseUpScale');
309309 // Mouse event callback設定をクリア
310- window.displayField.setMouseEventObj(null, null);
310+ window.appArea.setMouseEventObj(null, null);
311311
312312 // 画像の仮変形
313313 this.endDragX = evt.pageX;
@@ -344,8 +344,8 @@
344344 onMouseDownRoll(evt) {
345345 this.debuglog('onMouseDownRoll');
346346
347- // Mouse eventをDisplayFieldからRollerに渡してもらうように設定
348- window.displayField.setMouseEventObj(this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
347+ // Mouse eventをappAreaからRollerに渡してもらうように設定
348+ window.appArea.setMouseEventObj(this.mouseMoveRoll.bind(this), this.mouseUpRoll.bind(this));
349349 }
350350 mouseMoveRoll(evt) {
351351 let x1 = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width) / 2;
@@ -362,7 +362,7 @@
362362 mouseUpRoll(evt) {
363363 this.debuglog('mouseUpRoll');
364364 // Mouse event callback設定をクリア
365- window.displayField.setMouseEventObj(null, null);
365+ window.appArea.setMouseEventObj(null, null);
366366
367367 let x1 = parseInt(this.clingingPartner.style.left) + parseInt(this.clingingPartner.style.width) / 2;
368368 let y1 = parseInt(this.clingingPartner.style.top) + parseInt(this.clingingPartner.style.height) / 2;
--- HtmlDrawApp/HTMLDrawApp/js/apparea.js (nonexistent)
+++ HtmlDrawApp/HTMLDrawApp/js/apparea.js (revision 26)
@@ -0,0 +1,65 @@
1+// apparea.js
2+// マウスイベントハンドリング
3+
4+class appArea {
5+ constructor(dom) {
6+ this.DOMobject = dom;
7+ this.mouseMoveFunc = null;
8+ this.mouseUpFunc = null;
9+ }
10+ debuglog(str) {
11+ debuglog("【appArea】" + str);
12+ }
13+
14+ initialize() {
15+ if (null == this.DOMobject) {
16+ console.error("【appArea】 initialize() DOMobject is null.");
17+ return false;
18+ }
19+ this.debuglog("initialize");
20+ this.DOMobject.addEventListener('mousemove', this.onMouseMove.bind(this), false);
21+ this.DOMobject.addEventListener('mousedown', this.onMouseDown.bind(this), false);
22+ this.DOMobject.addEventListener('mouseup', this.onMouseUp.bind(this), false);
23+ }
24+
25+
26+
27+ // 操作関数 -----------------------------------
28+
29+ // Mouse eventを処理するObj
30+ setMouseEventObj(mouseMove, mouseUp) {
31+ this.debuglog('setMouseEventObj');
32+
33+ this.mouseMoveFunc = mouseMove;
34+ this.mouseUpFunc = mouseUp;
35+ }
36+
37+ // Event handler -------------------
38+
39+ // ■マウス左ボタン押下 (Drag処理)
40+ onMouseDown(evt) {
41+ }
42+ // ■ マウス移動 (ドラッグ中)
43+ onMouseMove(evt) {
44+ // ★ evt.targetが期待するelementかチェックする必要がある
45+ // ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
46+
47+ if (null != this.mouseMoveFunc) {
48+ this.mouseMoveFunc(evt);
49+ return;
50+ }
51+ }
52+ // ■ ドロップ処理
53+ onMouseUp(evt) {
54+ // ★ evt.targetが期待するelementかチェックする必要がある
55+ // ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
56+
57+ if (null != this.mouseUpFunc) {
58+ this.mouseUpFunc(evt);
59+ return;
60+ }
61+ }
62+
63+
64+
65+}
--- HtmlDrawApp/HTMLDrawApp/js/main.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js (revision 26)
@@ -27,7 +27,11 @@
2727
2828 // Mgr obj生成
2929 // Create Mgr---
30- var dom = document.getElementById( "DispField" );
30+ let dom = document.getElementById("apparea");
31+ window.appArea = new appArea(dom);
32+ window.appArea.initialize();
33+
34+ dom = document.getElementById("DispField");
3135 window.displayField = new CDisplayField(dom);
3236 window.displayField.initialize();
3337 window.ObjIDMgr = new CObjIDMgr();
@@ -45,6 +49,9 @@
4549 let savelink = document.getElementById('save');
4650 savelink.addEventListener('click', onClickSaveLink, false);
4751
52+ // パレットグループ作成
53+ window.CSSPalGroup = new PalGroup();
54+ window.CSSPalGroup.initialize();
4855 // パレット作成
4956 window.CSSPalette = new CSSPalette();
5057 window.CSSPalette.initialize();
@@ -91,6 +98,7 @@
9198 // Focus枠, scale, rotate obj描画
9299 window.partsFocus.render();
93100 // palette描画
101+ window.CSSPalGroup.render();
94102 window.CSSPalette.render();
95103
96104 requestAnimationFrame( renderLoop );
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 26)
@@ -30,6 +30,7 @@
3030 this.DOMpalbg[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
3131 this.DOMpalbg[cnt].style.top = 10 + 'px';
3232 this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
33+ this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
3334 this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
3435 this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
3536 this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -40,6 +41,7 @@
4041 this.DOMpaltxtcol[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
4142 this.DOMpaltxtcol[cnt].style.top = 10 + 'px';
4243 this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
44+ this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
4345 this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
4446 this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
4547 this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -175,8 +177,8 @@
175177 // Mouse event
176178 // 自elementをDragし、Drop時にTarget elementに自分のCSS classを適用する
177179 onMouseDown(evt) {
178- // Mouse eventをDisplayFieldからCSSPalに渡してもらうように設定
179- window.displayField.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
180+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定
181+ window.appArea.setMouseEventObj(this.mouseMove.bind(this), null);
180182
181183 // Drag対象を保持
182184 this.draggingDOM = evt.target;
@@ -206,7 +208,8 @@
206208 renderMoveDragging(x, y) {
207209 this.draggingDOM.style.left = x + "px";
208210 this.draggingDOM.style.top = y + "px";
209- this.draggingDOM.style.opacity = 0.4;
211+ if( 1.0 == this.draggingDOM.style.opacity )
212+ this.draggingDOM.style.opacity = 0.4;
210213 }
211214 mouseUp(evt) {
212215 let palobjid = this.draggingDOM.dataset.objid;
@@ -220,7 +223,7 @@
220223 // Drag中 element情報をクリア
221224 this.draggingDOM = null;
222225 // Mouse event callback設定をクリア
223- window.displayField.setMouseEventObj(null, null);
226+ window.appArea.setMouseEventObj(null, null);
224227
225228 // マウス座標直下にある要素を検索
226229 // (evt.targetは自分を指してしまうため)
--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 25)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 26)
@@ -7,3 +7,82 @@
77 // ・(将来)5 Palette単位で次のPalette, 前のPalette表示
88 // ・(将来)バー表示を半透明,短く表示
99
10+class PalGroup {
11+ constructor() {
12+ this.DOMobject = []; // bg,text,action
13+ this.renderFunc = new Queue();
14+ }
15+ debuglog(str) {
16+ debuglog('【PalGroup】 ' + str);
17+ }
18+
19+ initialize() {
20+ this.DOMobject = document.getElementsByClassName('palgroup');
21+ for (let cnt = 0; cnt < this.DOMobject.length; cnt++) {
22+ this.DOMobject[cnt].style.left = 0 + 'px';
23+ this.DOMobject[cnt].style.top = 30 * cnt + 'px';
24+ this.DOMobject[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
25+ this.DOMobject[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
26+ }
27+ }
28+
29+ // 操作関数 ----------------------------
30+
31+
32+ // 描画関数 ---------------------
33+
34+ render() {
35+ while (0 < this.renderFunc.size()) {
36+ let renderFunction = this.renderFunc.dequeue();
37+ renderFunction();
38+ }
39+ }
40+
41+
42+
43+ // Event handler -----------------------
44+
45+ onMouseDown(evt) {
46+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定
47+ window.appArea.setMouseEventObj(this.mouseMove.bind(this), null);
48+
49+ // Drag対象を保持
50+ this.draggingDOM = evt.target;
51+ // ElementのDrag開始位置を保持
52+ this.startElementX = parseInt(this.draggingDOM.style.left);
53+ this.startElementY = parseInt(this.draggingDOM.style.top);
54+ // MouseのDrag開始位置を保持
55+ this.startDragX = evt.pageX;
56+ this.startDragY = evt.pageY;
57+ }
58+ mouseMove(evt) {
59+ if (null == this.draggingDOM) return;
60+
61+ // 画像の仮移動
62+ this.endDragX = evt.pageX;
63+ this.endDragY = evt.pageY;
64+ // 移動量取得
65+ let moveX = this.endDragX - this.startDragX;
66+ let moveY = this.endDragY - this.startDragY;
67+ // dispObjがあった位置からマウス移動分移動させた後の位置取得
68+ moveX = this.startElementX + moveX;
69+ moveY = this.startElementY + moveY;
70+
71+ this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
72+ //this.renderMoveDragging(moveX, moveY);
73+ }
74+ renderMoveDragging(x, y) {
75+ // 非同期のためmouseupの後に入ることがある
76+ if (null == this.draggingDOM) return;
77+
78+ this.draggingDOM.style.left = x + "px";
79+ this.draggingDOM.style.top = y + "px";
80+ }
81+ mouseUp(evt) {
82+ // Drag中 element情報をクリア
83+ this.draggingDOM = null;
84+ // Mouse event callback設定をクリア
85+ window.appArea.setMouseEventObj(null, null);
86+ }
87+
88+}