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

Revision24 (tree)
Time2016-11-23 16:40:58
Authortakoyaki_umaaaa

Log Message

palette処理修正中

Change Summary

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 23)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 24)
@@ -14,6 +14,18 @@
1414 -moz-user-select: none;
1515 user-select: none;
1616 }
17+
18+ .buttonstyle {
19+ border: 1px solid black;
20+ border-radius: 4px 4px;
21+ background-color: lightgray;
22+ margin: 0px;
23+ padding: 0px 2px;
24+ text-decoration: none;
25+ font-weight: normal;
26+ }
27+
28+
1729 /*
1830 [data-objid] {
1931 transition: transform 2s linear 0s;
@@ -20,6 +32,7 @@
2032 }
2133 */
2234
35+ /* キャンバス要素の定義 */
2336 #DispField{
2437 display:block;
2538 width:400px; height:300px;
@@ -28,11 +41,32 @@
2841 }
2942
3043
44+ /* パレットグループ要素の定義 */
45+ .palgroup {
46+ display: inline-block;
47+ position: absolute;
48+ left:0px; top:310px;
49+ margin: 0px;
50+ padding: 5px;
51+ background-color: #ffffff;
52+ box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.4);
53+ }
54+ .palgrouphorizon {
55+ width: 185px; /* (5+25+5) * 5 + (5+5) */
56+ height: 45px;
57+ }
58+ .pallegend {
59+ background-color: transparent;
60+ font-weight: bold;
61+ font-size: small;
62+ }
3163
64+ /* パレット要素の定義 */
3265 .palbg,
3366 .paltxtcol,
3467 .palact {
3568 display: inline-block;
69+ position: absolute;
3670 width: 25px; height: 25px;
3771 border: 2px solid blue;
3872 margin: 2px;
@@ -41,7 +75,7 @@
4175 border: 2px solid black;
4276 }
4377 .paltxtcol {
44- border: 2px solid brown;
78+ border: 2px solid blue;
4579 text-align: center;
4680 font-size: 100%;
4781 }
@@ -50,7 +84,7 @@
5084 }
5185
5286
53-
87+ /* フォーカス枠と拡大縮小・回転用マーカー定義 */
5488 .scaler {
5589 border: 2px solid black;
5690 border-radius: 50%;
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 23)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 24)
@@ -63,45 +63,47 @@
6363
6464 .palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
6565 @keyframes animeact4 { to {color:black;} }
66-
67-
68-
69-
70-
71-
72-
7366 </style>
74- <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
75- <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
76- <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
77- <div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
78- <div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
7967
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>
8076 <br />
8177
82- <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
83- <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
84- <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
85- <div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3">あ</div>
86- <div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4">あ</div>
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>
8786
88- <br />
87+ <br />
8988
90- <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
91- <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
92- <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
93- <div class="palact palact3" data-objid="palact3" data-palid="3"></div>
94- <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
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>
9597
96- <script type="text/javascript" src="js/Common.js"></script>
97- <script type="text/javascript" src="js/Queue.js"></script>
98- <script type="text/javascript" src="js/CommandObj.js"></script>
99- <script type="text/javascript" src="js/UI_parts.js"></script>
98+ <script type="text/javascript" src="js/Common.js"></script>
99+ <script type="text/javascript" src="js/Queue.js"></script>
100+ <script type="text/javascript" src="js/CommandObj.js"></script>
101+ <script type="text/javascript" src="js/UI_parts.js"></script>
100102 <script type="text/javascript" src="js/palette.js"></script>
101- <script type="text/javascript" src="js/DispObj.js"></script>
102- <script type="text/javascript" src="js/ObjIDMgr.js"></script>
103- <script type="text/javascript" src="js/ThreadMessage.js"></script>
104- <script type="text/javascript" src="js/DisplayField.js"></script>
105- <script type="text/javascript" src="js/main.js"></script>
103+ <script type="text/javascript" src="js/DispObj.js"></script>
104+ <script type="text/javascript" src="js/ObjIDMgr.js"></script>
105+ <script type="text/javascript" src="js/ThreadMessage.js"></script>
106+ <script type="text/javascript" src="js/DisplayField.js"></script>
107+ <script type="text/javascript" src="js/main.js"></script>
106108 </body>
107109 </html>
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 23)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 24)
@@ -26,7 +26,27 @@
2626 }
2727
2828
29+ // 操作関数 ------------------------------------
2930
31+ // 指定座標がこの要素の中にあるかを判定
32+ // DispalyField client座標基準
33+ hitCheck(x, y) {
34+ let ret = false;
35+ let chkx = parseFloat(x);
36+ let chky = parseFloat(y);
37+
38+ if (this.x <= chkx && chkx <= this.x + this.width) {
39+ if (this.y <= chky && chky <= this.y + this.height) {
40+ ret = true;
41+ }
42+ }
43+
44+ return ret;
45+ }
46+
47+
48+
49+
3050 // ブラウザ上への描画 -------------------------
3151
3252 // コマンド要求実行後の描画共通処理
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js (revision 23)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/ObjIDMgr.js (revision 24)
@@ -8,7 +8,9 @@
88 debuglog("【ObjIDMgr】 " + str);
99 }
1010
11+ // 操作関数 ---------------------------
1112
13+ // ObjIDMgrへの Element登録処理
1214 // DispObj.createから呼び出される
1315 registerDispObj(DispObj) {
1416 if (null == DispObj) {
@@ -25,6 +27,8 @@
2527 return objNumber;
2628 }
2729
30+ // 管理Elementの描画関数呼び出し
31+ // requestAnimationFrame loop内から呼び出される
2832 renderAll() {
2933 for (let i = 0; i < this.ObjIDLen; i++) {
3034 this.ObjIDarray[i].render();
@@ -41,7 +45,22 @@
4145 return this.ObjIDarray[numId];
4246 }
4347
48+ // DisplayField client座標基準での判定処理
49+ // 管理Element配列が Z軸昇順で並んでいる前提での処理
50+ hitCheck(
51+ x, // x座標
52+ y // y座標
53+ ) {
54+ let retobj = null;
55+ for (let i = this.ObjIDLen - 1; 0 <= i; i--) {
56+ if (true == this.ObjIDarray[i].hitCheck(x, y)) {
57+ retobj = this.ObjIDarray[i];
58+ break;
59+ }
60+ }
4461
62+ return retobj;
63+ }
4564
4665
4766 // Command処理 ----------------------
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 23)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 24)
@@ -2,6 +2,7 @@
22 constructor() {
33 this.DOMobject = [];
44 this.draggingDOM = null;
5+ this.renderFunc = new Queue();
56 }
67
78 debuglog(str) {
@@ -18,6 +19,8 @@
1819 // 背景設定パレット
1920 this.DOMpalbg = document.getElementsByClassName('palbg');
2021 for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
22+ this.DOMpalbg[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
23+ this.DOMpalbg[cnt].style.top = 10 + 'px';
2124 this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
2225 this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
2326 this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
@@ -26,6 +29,8 @@
2629 // テキストカラーパレット
2730 this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
2831 for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
32+ this.DOMpaltxtcol[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
33+ this.DOMpaltxtcol[cnt].style.top = 10 + 'px';
2934 this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
3035 this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
3136 this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
@@ -34,7 +39,10 @@
3439 // アクションパレット
3540 this.DOMpalact = document.getElementsByClassName('palact');
3641 for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
42+ this.DOMpalact[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
43+ this.DOMpalact[cnt].style.top = 10 + 'px';
3744 this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
45+ this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
3846 this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
3947 this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
4048 this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -107,7 +115,15 @@
107115
108116
109117
118+ // 描画関数 ---------------------
110119
120+ render() {
121+ while (0 < this.renderFunc.size()) {
122+ let renderFunction = this.renderFunc.dequeue();
123+ renderFunction();
124+ }
125+ }
126+
111127 // Event handler -----------------------
112128
113129 // Drag&Drop event : Application外からのfileのやり取り
@@ -151,29 +167,62 @@
151167 // Mouse event
152168 // 自elementをDragし、Drop時にTarget elementに自分のCSS classを適用する
153169 onMouseDown(evt) {
154- this.draggingDOM = evt.target;
155-
156170 // Mouse eventをDisplayFieldからCSSPalに渡してもらうように設定
157171 window.displayField.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
172+
173+ // Drag対象を保持
174+ this.draggingDOM = evt.target;
175+ // ElementのDrag開始位置を保持
176+ this.startElementX = parseInt(this.draggingDOM.style.left);
177+ this.startElementY = parseInt(this.draggingDOM.style.top);
178+ // MouseのDrag開始位置を保持
179+ this.startDragX = evt.pageX;
180+ this.startDragY = evt.pageY;
158181 }
159182 mouseMove(evt) {
160183 if (null == this.draggingDOM) return;
161184
185+ // 画像の仮移動
186+ this.endDragX = evt.pageX;
187+ this.endDragY = evt.pageY;
188+ // 移動量取得
189+ let moveX = this.endDragX - this.startDragX;
190+ let moveY = this.endDragY - this.startDragY;
191+ // dispObjがあった位置からマウス移動分移動させた後の位置取得
192+ moveX = this.startElementX + moveX;
193+ moveY = this.startElementY + moveY;
162194
195+ this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
196+ //this.renderMoveDragging(moveX, moveY);
163197 }
198+ renderMoveDragging(x, y) {
199+ this.draggingDOM.style.left = x + "px";
200+ this.draggingDOM.style.top = y + "px";
201+ this.draggingDOM.style.opacity = 0.4;
202+ }
164203 mouseUp(evt) {
165204 let palobjid = this.draggingDOM.dataset.objid;
166205 let palid = this.draggingDOM.dataset.palid;
167206
207+ // 初期表示状態に戻す
208+ this.draggingDOM.style.left = this.startElementX + "px";
209+ this.draggingDOM.style.top = this.startElementY + "px";
210+ this.draggingDOM.style.opacity = 1.0;
211+
168212 // Drag中 element情報をクリア
169213 this.draggingDOM = null;
170214 // Mouse event callback設定をクリア
171215 window.displayField.setMouseEventObj(null, null);
172216
217+ // マウス座標直下にある要素を検索
218+ // (evt.targetは自分を指してしまうため)
219+ let target = window.ObjIDMgr.hitCheck(evt.pageX, evt.pageY);
220+
173221 // Drag中 palette elementから target element へ CSS classを追加する
174222 // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
175223
176- this.replaceCSSclassToElement(palobjid, evt.target);
224+ if( null != target)
225+ this.replaceCSSclassToElement(palobjid, target.DOMobject);
177226 }
178227
179228 // Target element へ CSS classを追加する
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 23)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 24)
@@ -14,6 +14,18 @@
1414 -moz-user-select: none;
1515 user-select: none;
1616 }
17+
18+ .buttonstyle {
19+ border: 1px solid black;
20+ border-radius: 4px 4px;
21+ background-color: lightgray;
22+ margin: 0px;
23+ padding: 0px 2px;
24+ text-decoration: none;
25+ font-weight: normal;
26+ }
27+
28+
1729 /*
1830 [data-objid] {
1931 transition: transform 2s linear 0s;
@@ -29,11 +41,32 @@
2941 }
3042
3143
44+ /* パレットグループ要素の定義 */
45+ .palgroup {
46+ display: inline-block;
47+ position: absolute;
48+ left:0px; top:310px;
49+ margin: 0px;
50+ padding: 5px;
51+ background-color: #ffffff;
52+ box-shadow: 2px 2px 1px 1px rgba(0,0,0,0.4);
53+ }
54+ .palgrouphorizon {
55+ width: 185px; /* (5+25+5) * 5 + (5+5) */
56+ height: 45px;
57+ }
58+ .pallegend {
59+ background-color: transparent;
60+ font-weight: bold;
61+ font-size: small;
62+ }
63+
3264 /* パレット要素の定義 */
3365 .palbg,
3466 .paltxtcol,
3567 .palact {
3668 display: inline-block;
69+ position: absolute;
3770 width: 25px; height: 25px;
3871 border: 2px solid blue;
3972 margin: 2px;
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 23)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 24)
@@ -63,45 +63,47 @@
6363
6464 .palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
6565 @keyframes animeact4 { to {color:black;} }
66-
67-
68-
69-
70-
71-
72-
7366 </style>
74- <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
75- <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
76- <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
77- <div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
78- <div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
7967
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>
8076 <br />
8177
82- <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
83- <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
84- <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
85- <div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3">あ</div>
86- <div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4">あ</div>
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>
8786
88- <br />
87+ <br />
8988
90- <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
91- <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
92- <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
93- <div class="palact palact3" data-objid="palact3" data-palid="3"></div>
94- <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
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>
9597
96- <script type="text/javascript" src="js/Common.js"></script>
97- <script type="text/javascript" src="js/Queue.js"></script>
98- <script type="text/javascript" src="js/CommandObj.js"></script>
99- <script type="text/javascript" src="js/UI_parts.js"></script>
98+ <script type="text/javascript" src="js/Common.js"></script>
99+ <script type="text/javascript" src="js/Queue.js"></script>
100+ <script type="text/javascript" src="js/CommandObj.js"></script>
101+ <script type="text/javascript" src="js/UI_parts.js"></script>
100102 <script type="text/javascript" src="js/palette.js"></script>
101- <script type="text/javascript" src="js/DispObj.js"></script>
102- <script type="text/javascript" src="js/ObjIDMgr.js"></script>
103- <script type="text/javascript" src="js/ThreadMessage.js"></script>
104- <script type="text/javascript" src="js/DisplayField.js"></script>
105- <script type="text/javascript" src="js/main.js"></script>
103+ <script type="text/javascript" src="js/DispObj.js"></script>
104+ <script type="text/javascript" src="js/ObjIDMgr.js"></script>
105+ <script type="text/javascript" src="js/ThreadMessage.js"></script>
106+ <script type="text/javascript" src="js/DisplayField.js"></script>
107+ <script type="text/javascript" src="js/main.js"></script>
106108 </body>
107109 </html>
--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 23)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 24)
@@ -26,7 +26,27 @@
2626 }
2727
2828
29+ // 操作関数 ------------------------------------
2930
31+ // 指定座標がこの要素の中にあるかを判定
32+ // DispalyField client座標基準
33+ hitCheck(x, y) {
34+ let ret = false;
35+ let chkx = parseFloat(x);
36+ let chky = parseFloat(y);
37+
38+ if (this.x <= chkx && chkx <= this.x + this.width) {
39+ if (this.y <= chky && chky <= this.y + this.height) {
40+ ret = true;
41+ }
42+ }
43+
44+ return ret;
45+ }
46+
47+
48+
49+
3050 // ブラウザ上への描画 -------------------------
3151
3252 // コマンド要求実行後の描画共通処理
--- HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js (revision 23)
+++ HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js (revision 24)
@@ -8,7 +8,9 @@
88 debuglog("【ObjIDMgr】 " + str);
99 }
1010
11+ // 操作関数 ---------------------------
1112
13+ // ObjIDMgrへの Element登録処理
1214 // DispObj.createから呼び出される
1315 registerDispObj(DispObj) {
1416 if (null == DispObj) {
@@ -25,6 +27,8 @@
2527 return objNumber;
2628 }
2729
30+ // 管理Elementの描画関数呼び出し
31+ // requestAnimationFrame loop内から呼び出される
2832 renderAll() {
2933 for (let i = 0; i < this.ObjIDLen; i++) {
3034 this.ObjIDarray[i].render();
@@ -41,7 +45,22 @@
4145 return this.ObjIDarray[numId];
4246 }
4347
48+ // DisplayField client座標基準での判定処理
49+ // 管理Element配列が Z軸昇順で並んでいる前提での処理
50+ hitCheck(
51+ x, // x座標
52+ y // y座標
53+ ) {
54+ let retobj = null;
55+ for (let i = this.ObjIDLen - 1; 0 <= i; i--) {
56+ if (true == this.ObjIDarray[i].hitCheck(x, y)) {
57+ retobj = this.ObjIDarray[i];
58+ break;
59+ }
60+ }
4461
62+ return retobj;
63+ }
4564
4665
4766 // Command処理 ----------------------
--- HtmlDrawApp/HTMLDrawApp/js/main.js (revision 23)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js (revision 24)
@@ -38,6 +38,7 @@
3838 let savelink = document.getElementById('save');
3939 savelink.addEventListener('click', onClickSaveLink, false);
4040
41+ // パレット作成
4142 window.CSSPalette = new CSSPalette();
4243 window.CSSPalette.initialize();
4344
@@ -82,6 +83,8 @@
8283
8384 // Focus枠, scale, rotate obj描画
8485 window.partsFocus.render();
86+ // palette描画
87+ window.CSSPalette.render();
8588
8689 requestAnimationFrame( renderLoop );
8790 })();
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 23)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 24)
@@ -2,6 +2,7 @@
22 constructor() {
33 this.DOMobject = [];
44 this.draggingDOM = null;
5+ this.renderFunc = new Queue();
56 }
67
78 debuglog(str) {
@@ -18,6 +19,8 @@
1819 // 背景設定パレット
1920 this.DOMpalbg = document.getElementsByClassName('palbg');
2021 for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
22+ this.DOMpalbg[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
23+ this.DOMpalbg[cnt].style.top = 10 + 'px';
2124 this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
2225 this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
2326 this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
@@ -26,6 +29,8 @@
2629 // テキストカラーパレット
2730 this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
2831 for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
32+ this.DOMpaltxtcol[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
33+ this.DOMpaltxtcol[cnt].style.top = 10 + 'px';
2934 this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
3035 this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
3136 this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
@@ -34,7 +39,10 @@
3439 // アクションパレット
3540 this.DOMpalact = document.getElementsByClassName('palact');
3641 for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
42+ this.DOMpalact[cnt].style.left = 5 + (25 + 10) * cnt + 'px';
43+ this.DOMpalact[cnt].style.top = 10 + 'px';
3744 this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
45+ this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
3846 this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
3947 this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
4048 this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
@@ -107,7 +115,15 @@
107115
108116
109117
118+ // 描画関数 ---------------------
110119
120+ render() {
121+ while (0 < this.renderFunc.size()) {
122+ let renderFunction = this.renderFunc.dequeue();
123+ renderFunction();
124+ }
125+ }
126+
111127 // Event handler -----------------------
112128
113129 // Drag&Drop event : Application外からのfileのやり取り
@@ -151,29 +167,62 @@
151167 // Mouse event
152168 // 自elementをDragし、Drop時にTarget elementに自分のCSS classを適用する
153169 onMouseDown(evt) {
154- this.draggingDOM = evt.target;
155-
156170 // Mouse eventをDisplayFieldからCSSPalに渡してもらうように設定
157171 window.displayField.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
172+
173+ // Drag対象を保持
174+ this.draggingDOM = evt.target;
175+ // ElementのDrag開始位置を保持
176+ this.startElementX = parseInt(this.draggingDOM.style.left);
177+ this.startElementY = parseInt(this.draggingDOM.style.top);
178+ // MouseのDrag開始位置を保持
179+ this.startDragX = evt.pageX;
180+ this.startDragY = evt.pageY;
158181 }
159182 mouseMove(evt) {
160183 if (null == this.draggingDOM) return;
161184
185+ // 画像の仮移動
186+ this.endDragX = evt.pageX;
187+ this.endDragY = evt.pageY;
188+ // 移動量取得
189+ let moveX = this.endDragX - this.startDragX;
190+ let moveY = this.endDragY - this.startDragY;
191+ // dispObjがあった位置からマウス移動分移動させた後の位置取得
192+ moveX = this.startElementX + moveX;
193+ moveY = this.startElementY + moveY;
162194
195+ this.renderFunc.enqueue(this.renderMoveDragging.bind(this, moveX, moveY));
196+ //this.renderMoveDragging(moveX, moveY);
163197 }
198+ renderMoveDragging(x, y) {
199+ this.draggingDOM.style.left = x + "px";
200+ this.draggingDOM.style.top = y + "px";
201+ this.draggingDOM.style.opacity = 0.4;
202+ }
164203 mouseUp(evt) {
165204 let palobjid = this.draggingDOM.dataset.objid;
166205 let palid = this.draggingDOM.dataset.palid;
167206
207+ // 初期表示状態に戻す
208+ this.draggingDOM.style.left = this.startElementX + "px";
209+ this.draggingDOM.style.top = this.startElementY + "px";
210+ this.draggingDOM.style.opacity = 1.0;
211+
168212 // Drag中 element情報をクリア
169213 this.draggingDOM = null;
170214 // Mouse event callback設定をクリア
171215 window.displayField.setMouseEventObj(null, null);
172216
217+ // マウス座標直下にある要素を検索
218+ // (evt.targetは自分を指してしまうため)
219+ let target = window.ObjIDMgr.hitCheck(evt.pageX, evt.pageY);
220+
173221 // Drag中 palette elementから target element へ CSS classを追加する
174222 // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
175223
176- this.replaceCSSclassToElement(palobjid, evt.target);
224+ if( null != target)
225+ this.replaceCSSclassToElement(palobjid, target.DOMobject);
177226 }
178227
179228 // Target element へ CSS classを追加する