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

Revision45 (tree)
Time2016-12-10 07:07:03
Authortakoyaki_umaaaa

Log Message

(empty log message)

Change Summary

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 45)
@@ -134,6 +134,10 @@
134134 background-color: rgba(156, 165, 55, 0.6);
135135 box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
136136 }
137+ .palgroup3 {
138+ background-color: rgba(27, 158, 131, 0.6);
139+ box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
140+ }
137141
138142 .paldesc1,
139143 .paldesc2 {
@@ -147,7 +151,7 @@
147151 color: rgba(255, 255, 255, 0.3);
148152 }
149153 .paldesc1 {
150- left: -40px; top: -20px;
154+ left: -20px; top: -20px;
151155 text-align: left;
152156 }
153157 .paldesc2 {
@@ -159,7 +163,8 @@
159163 /* パレット要素の定義 */
160164 .palbg,
161165 .paltxtcol,
162- .palact {
166+ .palact,
167+ .palset {
163168 display: inline-block;
164169 position: absolute;
165170 width: 50px; height: 50px;
@@ -183,6 +188,11 @@
183188 background-color: rgba(156, 165, 55, 0.6);
184189 box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
185190 }
191+ .palset {
192+ border: 1px solid rgba(0,0,0,0.2);
193+ background-color: rgba(27, 158, 131, 0.6);
194+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
195+ }
186196
187197
188198 /* フォーカス枠と拡大縮小・回転用マーカー定義 */
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 45)
@@ -19,7 +19,7 @@
1919 <button type=button class="pal" data-objid="pal" data-palid="1" title="現在のパレット設定を保存します">設定保存</button>
2020 <button type=button class="pal" data-objid="pal" data-palid="2" title="設定画面を表示します">設定Drop</button>
2121 <button type=button class="pal" data-objid="pal" data-palid="3" title="アニメーションを停止します">アニメ停止</button>
22- <button type=button class="pal" data-objid="pal" data-palid="4" >枠表示</button>
22+ <button type=button class="pal" data-objid="pal" data-palid="4">枠表示</button>
2323 <button type=button class="pal" data-objid="pal" data-palid="5">背景大</button>
2424 <button type=button class="pal" data-objid="pal" data-palid="6">背景小</button>
2525 <a href="#" id="save" download="DragDraw.dd" title="DragDraw.ddという名前でダウンロードフォルダに保存します">画像保存</a><br />
@@ -32,48 +32,144 @@
3232 </style>
3333 <!-- Palette -->
3434 <style id="stylepalbg">
35- .palbg0 { background-image: url(dummy.png); }
36- .palbg1 { background-image: url(dummy.png); }
37- .palbg2 { background-image: url(dummy.png); }
38- .palbg3 { background-image: url(dummy.png); }
39- .palbg4 { background-image: url(dummy.png); }
35+ .palbg0 {
36+ background-image: url(dummy.png);
37+ }
38+
39+ .palbg1 {
40+ background-image: url(dummy.png);
41+ }
42+
43+ .palbg2 {
44+ background-image: url(dummy.png);
45+ }
46+
47+ .palbg3 {
48+ background-image: url(dummy.png);
49+ }
50+
51+ .palbg4 {
52+ background-image: url(dummy.png);
53+ }
4054 </style>
4155 <style id="stylepaltxtcol">
42- .paltxtcol0 { color: black; }
43- .paltxtcol1 { color: red; }
44- .paltxtcol2 { color: blue; }
45- .paltxtcol3 { color: green; }
46- .paltxtcol4 { color: brown; }
56+ .paltxtcol0 {
57+ color: black;
58+ }
59+
60+ .paltxtcol1 {
61+ color: red;
62+ }
63+
64+ .paltxtcol2 {
65+ color: blue;
66+ }
67+
68+ .paltxtcol3 {
69+ color: green;
70+ }
71+
72+ .paltxtcol4 {
73+ color: brown;
74+ }
4775 </style>
4876 <style id="stylepalact">
49- .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
77+ .palact0 {
78+ animation: animeY1 0.5s ease-in 0.3s 1 normal;
79+ }
80+
5081 @keyframes animeY1 {
51- 0% { transform: translateY(-60px) translateX(-30px); }
52- 10% { transform: translateY(20px) translateX(30px); }
53- 20% { transform: translateY(-40px) translateX(-20px); }
54- 30% { transform: translateY(50px) translateX(-10px); }
55- 40% { transform: translateY(-40px) translateX(20px); }
56- 50% { transform: translateY(30px) translateX(-15px); }
57- 60% { transform: translateY(-25px) translateX(0px); }
58- 70% { transform: translateY(15px) translateX(-15px); }
59- 80% { transform: translateY(-10px) translateX(10px); }
60- 90% { transform: translateY(0px) translateX(-5px); }
61- 100% { transform: translateY(0px) translateX(0px); }
82+ 0% {
83+ transform: translateY(-60px) translateX(-30px);
84+ }
85+
86+ 10% {
87+ transform: translateY(20px) translateX(30px);
88+ }
89+
90+ 20% {
91+ transform: translateY(-40px) translateX(-20px);
92+ }
93+
94+ 30% {
95+ transform: translateY(50px) translateX(-10px);
96+ }
97+
98+ 40% {
99+ transform: translateY(-40px) translateX(20px);
100+ }
101+
102+ 50% {
103+ transform: translateY(30px) translateX(-15px);
104+ }
105+
106+ 60% {
107+ transform: translateY(-25px) translateX(0px);
108+ }
109+
110+ 70% {
111+ transform: translateY(15px) translateX(-15px);
112+ }
113+
114+ 80% {
115+ transform: translateY(-10px) translateX(10px);
116+ }
117+
118+ 90% {
119+ transform: translateY(0px) translateX(-5px);
120+ }
121+
122+ 100% {
123+ transform: translateY(0px) translateX(0px);
124+ }
62125 }
63126
64- .palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
65- @keyframes animeact1 { to { color: black; } }
66- .palact2 { animation: animeact2 2s ease-in 0.3s 1 normal; }
67- @keyframes animeact2 { to { color: black; } }
68- .palact3 { animation: animeact3 2s ease-in 0.3s 1 normal; }
69- @keyframes animeact3 { to { color: black; } }
70- .palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
71- @keyframes animeact4 { to { color: black; } }
127+ .palact1 {
128+ animation: animeact1 2s ease-in 0.3s 1 normal;
129+ }
130+
131+ @keyframes animeact1 {
132+ to {
133+ color: black;
134+ }
135+ }
136+
137+ .palact2 {
138+ animation: animeact2 2s ease-in 0.3s 1 normal;
139+ }
140+
141+ @keyframes animeact2 {
142+ to {
143+ color: black;
144+ }
145+ }
146+
147+ .palact3 {
148+ animation: animeact3 2s ease-in 0.3s 1 normal;
149+ }
150+
151+ @keyframes animeact3 {
152+ to {
153+ color: black;
154+ }
155+ }
156+
157+ .palact4 {
158+ animation: animeact4 2s ease-in 0.3s 1 normal;
159+ }
160+
161+ @keyframes animeact4 {
162+ to {
163+ color: black;
164+ }
165+ }
72166 </style>
73167
74- <fieldset class="palgroup palgroup0" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
168+ <fieldset class="palgroup palgroup0" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
75169 <legend class="pallegend"> Background Palette </legend>
76- <span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
170+ <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
171+ <span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
172+ </div>
77173 <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
78174 <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
79175 <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
@@ -83,8 +179,10 @@
83179 <br />
84180
85181 <fieldset class="palgroup palgroup1" data-objid="palgroup1" title="テキストの色を設定するパレットです">
86- <legend class="pallegend"> Text Color Palette </legend>
87- <span class="paldesc1">外観</span><span class="paldesc2">見た</span>
182+ <legend class="pallegend"> Style Palette </legend>
183+ <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
184+ <span class="paldesc1">外観</span><span class="paldesc2">見た</span>
185+ </div>
88186 <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
89187 <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
90188 <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
@@ -95,8 +193,10 @@
95193 <br />
96194
97195 <fieldset class="palgroup palgroup2" data-objid="palgroup2" title="動きを設定するパレットです">
98- <legend class="pallegend"> Action Palette <span id="btnpauseanim" class="buttonstyle" title="要素の動きを一時的に停止します">Ⅱ</span></legend>
99- <span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
196+ <legend class="pallegend"> Action Palette </legend>
197+ <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
198+ <span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
199+ </div>
100200 <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
101201 <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
102202 <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
@@ -103,8 +203,20 @@
103203 <div class="palact palact3" data-objid="palact3" data-palid="3"></div>
104204 <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
105205 </fieldset>
106- </div>
107206
207+ <fieldset class="palgroup palgroup3" data-objid="palgroup3" title="設定を変更するパレットです">
208+ <legend class="pallegend"> Setting Palette </legend>
209+ <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
210+ <span class="paldesc1">設定</span><span class="paldesc2">変更</span>
211+ </div>
212+ <div class="palset palset0" data-objid="palset0" data-palid="0" title="設定パレットを非表示にします。再度表示するには、設定画面から表示設定変更ができます。"><div style="font-size:10px;line-height:10px;">パレット非表示</div></div>
213+ <div class="palset palset1" data-objid="palset1" data-palid="1" title="選択中の要素を削除します。何も選択していない場合は何もしません。">消</div>
214+ <div class="palset palset2" data-objid="palset2" data-palid="2" title="識別しやすいように、表示中のテキストや画像に境界線を表示します。">枠</div>
215+ <div class="palset palset3" data-objid="palset3" data-palid="3" title="アニメーションを停止/再開します。">動</div>
216+ <div class="palset palset4" data-objid="palset4" data-palid="4" title="編集中の画像を保存します。保存した画像はダウンロードフォルダに保存されます。">保</div>
217+ </fieldset>
218+ </div> <!-- apparea -->
219+
108220 <script type="text/javascript" src="js/numeric-1.2.6.min.js"></script>
109221 <script type="text/javascript" src="js/Common.js"></script>
110222 <script type="text/javascript" src="js/Queue.js"></script>
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/Common.js (revision 45)
@@ -439,6 +439,22 @@
439439 }
440440
441441
442+function prohibitDropHandler_dragStart(evt) {
443+ evt.preventDefault();
444+}
445+function prohibitDropHandler_dragOver(evt) {
446+ evt.preventDefault();
447+ evt.dataTransfer.dropEffect = "none";
448+}
449+function prohibitDropHandler_drop(evt) {
450+ this.debuglog('prohibitDropHandler_drop');
451+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
452+ evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
453+ evt.preventDefault(); // 要素既定のdefault動作を止める
454+}
455+
456+
457+
442458 function matRotateX(rx) {
443459 var rad = degToRad(rx);
444460 var matrix = [
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 45)
@@ -31,7 +31,7 @@
3131 this.initDOMobj();
3232
3333
34- this.dropinitsize = 100.0; // File dropで作成する Elementの長辺の長さ
34+ this.dropinitsize = 200.0; // File dropで作成する Elementの長辺の長さ
3535 }
3636 initDOMobj() {
3737 if (null != this.DOMbase) {
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 45)
@@ -56,6 +56,17 @@
5656 this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
5757 this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
5858 }
59+ // 設定パレット
60+ this.DOMpalset = document.getElementsByClassName('palset');
61+ for (let cnt = 0; cnt < this.DOMpalset.length; cnt++) {
62+ this.DOMpalset[cnt].style.left = 10 + 70 * cnt + 'px';
63+ this.DOMpalset[cnt].style.top = 40 + 'px';
64+ this.DOMpalset[cnt].addEventListener('mousedown', this.onMouseDownSetting.bind(this), false);
65+ this.DOMpalset[cnt].addEventListener('mouseup', this.mouseUpSetting.bind(this), false);
66+ this.DOMpalset[cnt].addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
67+ this.DOMpalset[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
68+ this.DOMpalset[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
69+ }
5970 }
6071
6172 // 操作関数 ----------------------------
@@ -164,7 +175,7 @@
164175 }
165176 onDragOver(evt) {
166177 evt.preventDefault();
167- evt.dataTransfer.dropEffect = "move";
178+ evt.dataTransfer.dropEffect = "copy";
168179 }
169180 onDrop(evt) {
170181 this.debuglog('onDrop');
@@ -191,6 +202,7 @@
191202 }
192203
193204
205+
194206 // Mouse event
195207 // 自elementをDragし、Drop時にTarget elementに自分のCSS classを適用する
196208 onMouseDown(evt) {
@@ -232,7 +244,7 @@
232244
233245 this.draggingDOM.style.left = x + "px";
234246 this.draggingDOM.style.top = y + "px";
235- if( 1.0 == this.draggingDOM.style.opacity )
247+ if (1.0 == this.draggingDOM.style.opacity)
236248 this.draggingDOM.style.opacity = 0.4;
237249 }
238250 mouseUp(evt) {
@@ -263,10 +275,12 @@
263275
264276 // Drag中 palette elementから target element へ CSS classを追加する
265277 // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
266- if( null != target)
278+ if (null != target)
267279 this.replaceCSSclassToElement(palobjid, target.DOMobject);
268280 }
269281
282+
283+
270284 // Target element へ CSS classを追加する
271285 // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
272286 replaceCSSclassToElement(
@@ -289,4 +303,71 @@
289303 // Drop target elementに Drag elementの CSS class定義を追加
290304 targetEle.classList.add(CSSname);
291305 }
306+
307+
308+
309+
310+ onMouseDownSetting(evt) {
311+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
312+ evt.preventDefault(); // 要素既定のdefault動作を止める
313+ }
314+ mouseUpSetting(evt) {
315+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
316+ evt.preventDefault(); // 要素既定のdefault動作を止める
317+
318+
319+ switch (evt.target.dataset.objid) {
320+ case "palset0": // 設定パレット非表示
321+ this.DOMpalset[0].parentNode.style.display = "none";
322+ break;
323+ case "palset1": // 選択中要素を削除
324+ this.removeFocusedObject();
325+ break;
326+ case "palset2": // 要素の枠を表示/非表示
327+ this.toggleElementBorderline();
328+ break;
329+ case "palset3": // アニメーション停止/再開
330+ // DispObjとPalette要素にPauseAnimation css classを付与する
331+ window.ObjIDMgr.toggleClassToAllObj('PauseAnimation');
332+ window.CSSPalette.toggleClassToActionPalettes('PauseAnimation');
333+ break;
334+ case "palset4": // 編集中の画像をファイルに保存
335+ break;
336+ case "palset5": // 編集中の画像をhtmlとして保存
337+ break;
338+ case "palset6": // 拡大縮小操作のとき、Aspect比を保持する/しない
339+ break;
340+ default:
341+ break;
342+ }
343+ }
344+
345+
346+ toggleElementBorderline() {
347+ let setStr = '';
348+ let nowSetting = window.frameArea.DOMobject.style.border;
349+ if ("" == nowSetting) {
350+ setStr = "1px solid black";
351+ }
352+ else {
353+ setStr = "";
354+ }
355+ window.frameArea.DOMobject.style.border = setStr;
356+
357+ let dispobjRuleBefore = ".DispObj { border: "
358+ let dispobjRuleAfter = ";}";
359+ let elestyle = document.getElementById('styledispobj');
360+ elestyle.sheet.removeRule(0);
361+ elestyle.sheet.insertRule(dispobjRuleBefore + setStr + dispobjRuleAfter, 0);
362+ }
363+ removeFocusedObject() {
364+ let focused = window.partsFocus.getFocusedObjid();
365+ if (null != focused) {
366+ // Delete command発行
367+ var obj1 = new CCommandObj();
368+ obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.deletebox, focused, null, null, null, 1);
369+ window.postToWorker.post(obj1);
370+ }
371+ };
372+
292373 } // class CSSPalette
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palgroup.js (revision 45)
@@ -24,14 +24,13 @@
2424 initialize() {
2525 this.DOMobject = document.getElementsByClassName('palgroup');
2626 for (let cnt = 0; cnt < this.DOMobject.length; cnt++) {
27- this.DOMobject[cnt].style.left = 0 + 'px';
28- this.DOMobject[cnt].style.top = 30 * cnt + 'px';
27+ this.DOMobject[cnt].style.left = 600 + 'px';
28+ this.DOMobject[cnt].style.top = 130 * cnt + 'px';
2929 this.DOMobject[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
3030 this.DOMobject[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
31+ this.DOMobject[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
32+ this.DOMobject[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
3133 }
32-
33- this.DOMpauseanim = document.getElementById('btnpauseanim');
34- this.DOMpauseanim.addEventListener('click', this.onClickPauseAnimation.bind(this));
3534 }
3635
3736 // 操作関数 ----------------------------
@@ -46,18 +45,27 @@
4645 // Event handler -----------------------
4746
4847 onMouseDown(evt) {
48+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
49+ evt.preventDefault(); // 要素既定のdefault動作を止める
4950 // Mouse eventをappAreaからCSSPalに渡してもらうように設定
5051 window.appArea.setMouseEventObj('palgroup', this.mouseMove.bind(this), null);
52+ this.startMovingPalette(evt.target, evt.pageX, evt.pageY);
53+ }
54+ onTouchStart(evt) {
5155 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
5256 evt.preventDefault(); // 要素既定のdefault動作を止める
57+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定
58+ window.appArea.setMouseEventObj('palgroup', this.touchMove.bind(this), null);
59+ this.startMovingPalette(evt.touches[0].target, evt.touches[0].pageX, evt.touches[0].pageY);
60+ }
61+ startMovingPalette(eletarget, x, y){
5362
54- let e = findClassNameParent('palgroup', evt.target);
63+ let e = findClassNameParent('palgroup', eletarget);
5564 if (null == e) {
5665 console.error('マウスダウン パレットグループが見つからない evt.target.objid = ' + evt.target.dataset.objid);
5766 return;
5867 }
5968
60-
6169 // Drag対象を保持
6270 this.draggingDOM = e;
6371 // ElementのDrag開始位置を保持
@@ -64,17 +72,25 @@
6472 this.startElementX = parseInt(this.draggingDOM.style.left);
6573 this.startElementY = parseInt(this.draggingDOM.style.top);
6674 // MouseのDrag開始位置を保持
67- this.startDragX = evt.pageX;
68- this.startDragY = evt.pageY;
75+ this.startDragX = x;
76+ this.startDragY = y;
6977 }
7078 mouseMove(evt) {
7179 if (null == this.draggingDOM) return;
7280 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
7381 evt.preventDefault(); // 要素既定のdefault動作を止める
74-
82+ this.movingPalette(evt.target, evt.pageX, evt.pageY);
83+ }
84+ touchMove(evt) {
85+ if (null == this.draggingDOM) return;
86+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
87+ evt.preventDefault(); // 要素既定のdefault動作を止める
88+ this.movingPalette(evt.touches[0].target, evt.touches[0].pageX, evt.touches[0].pageY);
89+ }
90+ movingPalette(eletarget, x, y) {
7591 // 画像の仮移動
76- this.endDragX = evt.pageX;
77- this.endDragY = evt.pageY;
92+ this.endDragX = x;
93+ this.endDragY = y;
7894 // 移動量取得
7995 let moveX = this.endDragX - this.startDragX;
8096 let moveY = this.endDragY - this.startDragY;
@@ -96,20 +112,20 @@
96112 if (null == this.draggingDOM) return;
97113 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
98114 evt.preventDefault(); // 要素既定のdefault動作を止める
99-
100- // Drag中 element情報をクリア
101- this.draggingDOM = null;
102115 // Mouse event callback設定をクリア
103116 window.appArea.setMouseEventObj(null, null, null);
117+ this.endMovingPalette();
104118 }
105-
106-
107- // アニメーション停止ボタン押下
108- onClickPauseAnimation(evt) {
109- // DispObjとPalette要素にPauseAnimation css classを付与する
110- window.ObjIDMgr.toggleClassToAllObj('PauseAnimation');
111- window.CSSPalette.toggleClassToActionPalettes('PauseAnimation');
112-
113- evt.target.innerText = ('Ⅱ' == evt.target.innerText) ? '>' : 'Ⅱ';
119+ touchEnd(evt) {
120+ if (null == this.draggingDOM) return;
121+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
122+ evt.preventDefault(); // 要素既定のdefault動作を止める
123+ // Mouse event callback設定をクリア
124+ window.appArea.setMouseEventObj(null, null, null);
125+ this.endMovingPalette();
114126 }
127+ endMovingPalette(){
128+ // Drag中 element情報をクリア
129+ this.draggingDOM = null;
130+ }
115131 }
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 45)
@@ -134,6 +134,10 @@
134134 background-color: rgba(156, 165, 55, 0.6);
135135 box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
136136 }
137+ .palgroup3 {
138+ background-color: rgba(27, 158, 131, 0.6);
139+ box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
140+ }
137141
138142 .paldesc1,
139143 .paldesc2 {
@@ -147,7 +151,7 @@
147151 color: rgba(255, 255, 255, 0.3);
148152 }
149153 .paldesc1 {
150- left: -40px; top: -20px;
154+ left: -20px; top: -20px;
151155 text-align: left;
152156 }
153157 .paldesc2 {
@@ -159,7 +163,8 @@
159163 /* パレット要素の定義 */
160164 .palbg,
161165 .paltxtcol,
162- .palact {
166+ .palact,
167+ .palset {
163168 display: inline-block;
164169 position: absolute;
165170 width: 50px; height: 50px;
@@ -183,6 +188,11 @@
183188 background-color: rgba(156, 165, 55, 0.6);
184189 box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
185190 }
191+ .palset {
192+ border: 1px solid rgba(0,0,0,0.2);
193+ background-color: rgba(27, 158, 131, 0.6);
194+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
195+ }
186196
187197
188198 /* フォーカス枠と拡大縮小・回転用マーカー定義 */
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 45)
@@ -19,7 +19,7 @@
1919 <button type=button class="pal" data-objid="pal" data-palid="1" title="現在のパレット設定を保存します">設定保存</button>
2020 <button type=button class="pal" data-objid="pal" data-palid="2" title="設定画面を表示します">設定Drop</button>
2121 <button type=button class="pal" data-objid="pal" data-palid="3" title="アニメーションを停止します">アニメ停止</button>
22- <button type=button class="pal" data-objid="pal" data-palid="4" >枠表示</button>
22+ <button type=button class="pal" data-objid="pal" data-palid="4">枠表示</button>
2323 <button type=button class="pal" data-objid="pal" data-palid="5">背景大</button>
2424 <button type=button class="pal" data-objid="pal" data-palid="6">背景小</button>
2525 <a href="#" id="save" download="DragDraw.dd" title="DragDraw.ddという名前でダウンロードフォルダに保存します">画像保存</a><br />
@@ -32,48 +32,144 @@
3232 </style>
3333 <!-- Palette -->
3434 <style id="stylepalbg">
35- .palbg0 { background-image: url(dummy.png); }
36- .palbg1 { background-image: url(dummy.png); }
37- .palbg2 { background-image: url(dummy.png); }
38- .palbg3 { background-image: url(dummy.png); }
39- .palbg4 { background-image: url(dummy.png); }
35+ .palbg0 {
36+ background-image: url(dummy.png);
37+ }
38+
39+ .palbg1 {
40+ background-image: url(dummy.png);
41+ }
42+
43+ .palbg2 {
44+ background-image: url(dummy.png);
45+ }
46+
47+ .palbg3 {
48+ background-image: url(dummy.png);
49+ }
50+
51+ .palbg4 {
52+ background-image: url(dummy.png);
53+ }
4054 </style>
4155 <style id="stylepaltxtcol">
42- .paltxtcol0 { color: black; }
43- .paltxtcol1 { color: red; }
44- .paltxtcol2 { color: blue; }
45- .paltxtcol3 { color: green; }
46- .paltxtcol4 { color: brown; }
56+ .paltxtcol0 {
57+ color: black;
58+ }
59+
60+ .paltxtcol1 {
61+ color: red;
62+ }
63+
64+ .paltxtcol2 {
65+ color: blue;
66+ }
67+
68+ .paltxtcol3 {
69+ color: green;
70+ }
71+
72+ .paltxtcol4 {
73+ color: brown;
74+ }
4775 </style>
4876 <style id="stylepalact">
49- .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
77+ .palact0 {
78+ animation: animeY1 0.5s ease-in 0.3s 1 normal;
79+ }
80+
5081 @keyframes animeY1 {
51- 0% { transform: translateY(-60px) translateX(-30px); }
52- 10% { transform: translateY(20px) translateX(30px); }
53- 20% { transform: translateY(-40px) translateX(-20px); }
54- 30% { transform: translateY(50px) translateX(-10px); }
55- 40% { transform: translateY(-40px) translateX(20px); }
56- 50% { transform: translateY(30px) translateX(-15px); }
57- 60% { transform: translateY(-25px) translateX(0px); }
58- 70% { transform: translateY(15px) translateX(-15px); }
59- 80% { transform: translateY(-10px) translateX(10px); }
60- 90% { transform: translateY(0px) translateX(-5px); }
61- 100% { transform: translateY(0px) translateX(0px); }
82+ 0% {
83+ transform: translateY(-60px) translateX(-30px);
84+ }
85+
86+ 10% {
87+ transform: translateY(20px) translateX(30px);
88+ }
89+
90+ 20% {
91+ transform: translateY(-40px) translateX(-20px);
92+ }
93+
94+ 30% {
95+ transform: translateY(50px) translateX(-10px);
96+ }
97+
98+ 40% {
99+ transform: translateY(-40px) translateX(20px);
100+ }
101+
102+ 50% {
103+ transform: translateY(30px) translateX(-15px);
104+ }
105+
106+ 60% {
107+ transform: translateY(-25px) translateX(0px);
108+ }
109+
110+ 70% {
111+ transform: translateY(15px) translateX(-15px);
112+ }
113+
114+ 80% {
115+ transform: translateY(-10px) translateX(10px);
116+ }
117+
118+ 90% {
119+ transform: translateY(0px) translateX(-5px);
120+ }
121+
122+ 100% {
123+ transform: translateY(0px) translateX(0px);
124+ }
62125 }
63126
64- .palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
65- @keyframes animeact1 { to { color: black; } }
66- .palact2 { animation: animeact2 2s ease-in 0.3s 1 normal; }
67- @keyframes animeact2 { to { color: black; } }
68- .palact3 { animation: animeact3 2s ease-in 0.3s 1 normal; }
69- @keyframes animeact3 { to { color: black; } }
70- .palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
71- @keyframes animeact4 { to { color: black; } }
127+ .palact1 {
128+ animation: animeact1 2s ease-in 0.3s 1 normal;
129+ }
130+
131+ @keyframes animeact1 {
132+ to {
133+ color: black;
134+ }
135+ }
136+
137+ .palact2 {
138+ animation: animeact2 2s ease-in 0.3s 1 normal;
139+ }
140+
141+ @keyframes animeact2 {
142+ to {
143+ color: black;
144+ }
145+ }
146+
147+ .palact3 {
148+ animation: animeact3 2s ease-in 0.3s 1 normal;
149+ }
150+
151+ @keyframes animeact3 {
152+ to {
153+ color: black;
154+ }
155+ }
156+
157+ .palact4 {
158+ animation: animeact4 2s ease-in 0.3s 1 normal;
159+ }
160+
161+ @keyframes animeact4 {
162+ to {
163+ color: black;
164+ }
165+ }
72166 </style>
73167
74- <fieldset class="palgroup palgroup0" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
168+ <fieldset class="palgroup palgroup0" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
75169 <legend class="pallegend"> Background Palette </legend>
76- <span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
170+ <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
171+ <span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
172+ </div>
77173 <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
78174 <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
79175 <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
@@ -83,8 +179,10 @@
83179 <br />
84180
85181 <fieldset class="palgroup palgroup1" data-objid="palgroup1" title="テキストの色を設定するパレットです">
86- <legend class="pallegend"> Text Color Palette </legend>
87- <span class="paldesc1">外観</span><span class="paldesc2">見た</span>
182+ <legend class="pallegend"> Style Palette </legend>
183+ <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
184+ <span class="paldesc1">外観</span><span class="paldesc2">見た</span>
185+ </div>
88186 <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
89187 <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
90188 <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
@@ -95,8 +193,10 @@
95193 <br />
96194
97195 <fieldset class="palgroup palgroup2" data-objid="palgroup2" title="動きを設定するパレットです">
98- <legend class="pallegend"> Action Palette <span id="btnpauseanim" class="buttonstyle" title="要素の動きを一時的に停止します">Ⅱ</span></legend>
99- <span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
196+ <legend class="pallegend"> Action Palette </legend>
197+ <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
198+ <span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
199+ </div>
100200 <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
101201 <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
102202 <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
@@ -103,8 +203,20 @@
103203 <div class="palact palact3" data-objid="palact3" data-palid="3"></div>
104204 <div class="palact palact4" data-objid="palact4" data-palid="4"></div>
105205 </fieldset>
106- </div>
107206
207+ <fieldset class="palgroup palgroup3" data-objid="palgroup3" title="設定を変更するパレットです">
208+ <legend class="pallegend"> Setting Palette </legend>
209+ <div style="overflow:hidden; position:absolute; left:0; top: 14px; width:100%; height:calc(100% - 14px); margin:0; padding:0;">
210+ <span class="paldesc1">設定</span><span class="paldesc2">変更</span>
211+ </div>
212+ <div class="palset palset0" data-objid="palset0" data-palid="0" title="設定パレットを非表示にします。再度表示するには、設定画面から表示設定変更ができます。"><div style="font-size:10px;line-height:10px;">パレット非表示</div></div>
213+ <div class="palset palset1" data-objid="palset1" data-palid="1" title="選択中の要素を削除します。何も選択していない場合は何もしません。">消</div>
214+ <div class="palset palset2" data-objid="palset2" data-palid="2" title="識別しやすいように、表示中のテキストや画像に境界線を表示します。">枠</div>
215+ <div class="palset palset3" data-objid="palset3" data-palid="3" title="アニメーションを停止/再開します。">動</div>
216+ <div class="palset palset4" data-objid="palset4" data-palid="4" title="編集中の画像を保存します。保存した画像はダウンロードフォルダに保存されます。">保</div>
217+ </fieldset>
218+ </div> <!-- apparea -->
219+
108220 <script type="text/javascript" src="js/numeric-1.2.6.min.js"></script>
109221 <script type="text/javascript" src="js/Common.js"></script>
110222 <script type="text/javascript" src="js/Queue.js"></script>
--- HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 45)
@@ -439,6 +439,22 @@
439439 }
440440
441441
442+function prohibitDropHandler_dragStart(evt) {
443+ evt.preventDefault();
444+}
445+function prohibitDropHandler_dragOver(evt) {
446+ evt.preventDefault();
447+ evt.dataTransfer.dropEffect = "none";
448+}
449+function prohibitDropHandler_drop(evt) {
450+ this.debuglog('prohibitDropHandler_drop');
451+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
452+ evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
453+ evt.preventDefault(); // 要素既定のdefault動作を止める
454+}
455+
456+
457+
442458 function matRotateX(rx) {
443459 var rad = degToRad(rx);
444460 var matrix = [
--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 45)
@@ -31,7 +31,7 @@
3131 this.initDOMobj();
3232
3333
34- this.dropinitsize = 100.0; // File dropで作成する Elementの長辺の長さ
34+ this.dropinitsize = 200.0; // File dropで作成する Elementの長辺の長さ
3535 }
3636 initDOMobj() {
3737 if (null != this.DOMbase) {
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 45)
@@ -56,6 +56,17 @@
5656 this.DOMpalact[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
5757 this.DOMpalact[cnt].addEventListener('drop', this.onDrop.bind(this), false);
5858 }
59+ // 設定パレット
60+ this.DOMpalset = document.getElementsByClassName('palset');
61+ for (let cnt = 0; cnt < this.DOMpalset.length; cnt++) {
62+ this.DOMpalset[cnt].style.left = 10 + 70 * cnt + 'px';
63+ this.DOMpalset[cnt].style.top = 40 + 'px';
64+ this.DOMpalset[cnt].addEventListener('mousedown', this.onMouseDownSetting.bind(this), false);
65+ this.DOMpalset[cnt].addEventListener('mouseup', this.mouseUpSetting.bind(this), false);
66+ this.DOMpalset[cnt].addEventListener('dragstart', prohibitDropHandler_dragStart.bind(this), false);
67+ this.DOMpalset[cnt].addEventListener('dragover', prohibitDropHandler_dragOver.bind(this), false);
68+ this.DOMpalset[cnt].addEventListener('drop', prohibitDropHandler_drop.bind(this), false);
69+ }
5970 }
6071
6172 // 操作関数 ----------------------------
@@ -164,7 +175,7 @@
164175 }
165176 onDragOver(evt) {
166177 evt.preventDefault();
167- evt.dataTransfer.dropEffect = "move";
178+ evt.dataTransfer.dropEffect = "copy";
168179 }
169180 onDrop(evt) {
170181 this.debuglog('onDrop');
@@ -191,6 +202,7 @@
191202 }
192203
193204
205+
194206 // Mouse event
195207 // 自elementをDragし、Drop時にTarget elementに自分のCSS classを適用する
196208 onMouseDown(evt) {
@@ -232,7 +244,7 @@
232244
233245 this.draggingDOM.style.left = x + "px";
234246 this.draggingDOM.style.top = y + "px";
235- if( 1.0 == this.draggingDOM.style.opacity )
247+ if (1.0 == this.draggingDOM.style.opacity)
236248 this.draggingDOM.style.opacity = 0.4;
237249 }
238250 mouseUp(evt) {
@@ -263,10 +275,12 @@
263275
264276 // Drag中 palette elementから target element へ CSS classを追加する
265277 // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
266- if( null != target)
278+ if (null != target)
267279 this.replaceCSSclassToElement(palobjid, target.DOMobject);
268280 }
269281
282+
283+
270284 // Target element へ CSS classを追加する
271285 // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
272286 replaceCSSclassToElement(
@@ -289,4 +303,71 @@
289303 // Drop target elementに Drag elementの CSS class定義を追加
290304 targetEle.classList.add(CSSname);
291305 }
306+
307+
308+
309+
310+ onMouseDownSetting(evt) {
311+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
312+ evt.preventDefault(); // 要素既定のdefault動作を止める
313+ }
314+ mouseUpSetting(evt) {
315+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
316+ evt.preventDefault(); // 要素既定のdefault動作を止める
317+
318+
319+ switch (evt.target.dataset.objid) {
320+ case "palset0": // 設定パレット非表示
321+ this.DOMpalset[0].parentNode.style.display = "none";
322+ break;
323+ case "palset1": // 選択中要素を削除
324+ this.removeFocusedObject();
325+ break;
326+ case "palset2": // 要素の枠を表示/非表示
327+ this.toggleElementBorderline();
328+ break;
329+ case "palset3": // アニメーション停止/再開
330+ // DispObjとPalette要素にPauseAnimation css classを付与する
331+ window.ObjIDMgr.toggleClassToAllObj('PauseAnimation');
332+ window.CSSPalette.toggleClassToActionPalettes('PauseAnimation');
333+ break;
334+ case "palset4": // 編集中の画像をファイルに保存
335+ break;
336+ case "palset5": // 編集中の画像をhtmlとして保存
337+ break;
338+ case "palset6": // 拡大縮小操作のとき、Aspect比を保持する/しない
339+ break;
340+ default:
341+ break;
342+ }
343+ }
344+
345+
346+ toggleElementBorderline() {
347+ let setStr = '';
348+ let nowSetting = window.frameArea.DOMobject.style.border;
349+ if ("" == nowSetting) {
350+ setStr = "1px solid black";
351+ }
352+ else {
353+ setStr = "";
354+ }
355+ window.frameArea.DOMobject.style.border = setStr;
356+
357+ let dispobjRuleBefore = ".DispObj { border: "
358+ let dispobjRuleAfter = ";}";
359+ let elestyle = document.getElementById('styledispobj');
360+ elestyle.sheet.removeRule(0);
361+ elestyle.sheet.insertRule(dispobjRuleBefore + setStr + dispobjRuleAfter, 0);
362+ }
363+ removeFocusedObject() {
364+ let focused = window.partsFocus.getFocusedObjid();
365+ if (null != focused) {
366+ // Delete command発行
367+ var obj1 = new CCommandObj();
368+ obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.deletebox, focused, null, null, null, 1);
369+ window.postToWorker.post(obj1);
370+ }
371+ };
372+
292373 } // class CSSPalette
--- HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 44)
+++ HtmlDrawApp/HTMLDrawApp/js/palgroup.js (revision 45)
@@ -24,14 +24,13 @@
2424 initialize() {
2525 this.DOMobject = document.getElementsByClassName('palgroup');
2626 for (let cnt = 0; cnt < this.DOMobject.length; cnt++) {
27- this.DOMobject[cnt].style.left = 0 + 'px';
28- this.DOMobject[cnt].style.top = 30 * cnt + 'px';
27+ this.DOMobject[cnt].style.left = 600 + 'px';
28+ this.DOMobject[cnt].style.top = 130 * cnt + 'px';
2929 this.DOMobject[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
3030 this.DOMobject[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
31+ this.DOMobject[cnt].addEventListener('touchstart', this.onTouchStart.bind(this), false);
32+ this.DOMobject[cnt].addEventListener('touchend', this.touchEnd.bind(this), false);
3133 }
32-
33- this.DOMpauseanim = document.getElementById('btnpauseanim');
34- this.DOMpauseanim.addEventListener('click', this.onClickPauseAnimation.bind(this));
3534 }
3635
3736 // 操作関数 ----------------------------
@@ -46,18 +45,27 @@
4645 // Event handler -----------------------
4746
4847 onMouseDown(evt) {
48+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
49+ evt.preventDefault(); // 要素既定のdefault動作を止める
4950 // Mouse eventをappAreaからCSSPalに渡してもらうように設定
5051 window.appArea.setMouseEventObj('palgroup', this.mouseMove.bind(this), null);
52+ this.startMovingPalette(evt.target, evt.pageX, evt.pageY);
53+ }
54+ onTouchStart(evt) {
5155 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
5256 evt.preventDefault(); // 要素既定のdefault動作を止める
57+ // Mouse eventをappAreaからCSSPalに渡してもらうように設定
58+ window.appArea.setMouseEventObj('palgroup', this.touchMove.bind(this), null);
59+ this.startMovingPalette(evt.touches[0].target, evt.touches[0].pageX, evt.touches[0].pageY);
60+ }
61+ startMovingPalette(eletarget, x, y){
5362
54- let e = findClassNameParent('palgroup', evt.target);
63+ let e = findClassNameParent('palgroup', eletarget);
5564 if (null == e) {
5665 console.error('マウスダウン パレットグループが見つからない evt.target.objid = ' + evt.target.dataset.objid);
5766 return;
5867 }
5968
60-
6169 // Drag対象を保持
6270 this.draggingDOM = e;
6371 // ElementのDrag開始位置を保持
@@ -64,17 +72,25 @@
6472 this.startElementX = parseInt(this.draggingDOM.style.left);
6573 this.startElementY = parseInt(this.draggingDOM.style.top);
6674 // MouseのDrag開始位置を保持
67- this.startDragX = evt.pageX;
68- this.startDragY = evt.pageY;
75+ this.startDragX = x;
76+ this.startDragY = y;
6977 }
7078 mouseMove(evt) {
7179 if (null == this.draggingDOM) return;
7280 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
7381 evt.preventDefault(); // 要素既定のdefault動作を止める
74-
82+ this.movingPalette(evt.target, evt.pageX, evt.pageY);
83+ }
84+ touchMove(evt) {
85+ if (null == this.draggingDOM) return;
86+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
87+ evt.preventDefault(); // 要素既定のdefault動作を止める
88+ this.movingPalette(evt.touches[0].target, evt.touches[0].pageX, evt.touches[0].pageY);
89+ }
90+ movingPalette(eletarget, x, y) {
7591 // 画像の仮移動
76- this.endDragX = evt.pageX;
77- this.endDragY = evt.pageY;
92+ this.endDragX = x;
93+ this.endDragY = y;
7894 // 移動量取得
7995 let moveX = this.endDragX - this.startDragX;
8096 let moveY = this.endDragY - this.startDragY;
@@ -96,20 +112,20 @@
96112 if (null == this.draggingDOM) return;
97113 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
98114 evt.preventDefault(); // 要素既定のdefault動作を止める
99-
100- // Drag中 element情報をクリア
101- this.draggingDOM = null;
102115 // Mouse event callback設定をクリア
103116 window.appArea.setMouseEventObj(null, null, null);
117+ this.endMovingPalette();
104118 }
105-
106-
107- // アニメーション停止ボタン押下
108- onClickPauseAnimation(evt) {
109- // DispObjとPalette要素にPauseAnimation css classを付与する
110- window.ObjIDMgr.toggleClassToAllObj('PauseAnimation');
111- window.CSSPalette.toggleClassToActionPalettes('PauseAnimation');
112-
113- evt.target.innerText = ('Ⅱ' == evt.target.innerText) ? '>' : 'Ⅱ';
119+ touchEnd(evt) {
120+ if (null == this.draggingDOM) return;
121+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
122+ evt.preventDefault(); // 要素既定のdefault動作を止める
123+ // Mouse event callback設定をクリア
124+ window.appArea.setMouseEventObj(null, null, null);
125+ this.endMovingPalette();
114126 }
127+ endMovingPalette(){
128+ // Drag中 element情報をクリア
129+ this.draggingDOM = null;
130+ }
115131 }