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

Revision17 (tree)
Time2016-11-16 08:15:45
Authortakoyaki_umaaaa

Log Message

(empty log message)

Change Summary

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/css/default.css (revision 16)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/css/default.css (revision 17)
@@ -26,6 +26,19 @@
2626 border:1px solid black;
2727 }
2828
29+ .csspal {
30+ display: inline-block;
31+ width: 25px; height: 25px;
32+ border: 1px solid black;
33+ margin: 10px;
34+ }
35+ .css1 {
36+ background-color:red;
37+ }
38+ .css2 {
39+ background-color:aqua;
40+ }
41+
2942 .scaler {
3043 border: 2px solid black;
3144 border-radius: 50%;
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/index.html (revision 16)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/index.html (revision 17)
@@ -17,12 +17,18 @@
1717 <button type=button class="pal" data-objid="pal" data-palid="2" data-value="0x0000ff01">button3</button>
1818 <button type=button class="pal" data-objid="pal" data-palid="3" data-value="0xffffff01">button4</button>
1919 <button type=button class="pal" data-objid="pal" data-palid="4" data-value="0x00000000">button5</button>
20- <a href="#" id="save" download="savefilename.txt">Save</a>
20+ <a href="#" id="save" download="savefilename.txt">Save</a><br />
21+ <div class="csspal css1" data-objid="csspal" data-palid="0" data-value="css1"></div>
22+ <div class="csspal css2" data-objid="csspal" data-palid="1" data-value="css2"></div>
23+ <div class="csspal css3" data-objid="csspal" data-palid="2" data-value="css3"></div>
24+ <div class="csspal css4" data-objid="csspal" data-palid="3" data-value="css4"></div>
25+ <div class="csspal css5" data-objid="csspal" data-palid="4" data-value="css5"></div>
2126
2227 <script type="text/javascript" src="js/Common.js"></script>
2328 <script type="text/javascript" src="js/Queue.js"></script>
2429 <script type="text/javascript" src="js/CommandObj.js"></script>
2530 <script type="text/javascript" src="js/UI_parts.js"></script>
31+ <script type="text/javascript" src="js/palette.js"></script>
2632 <script type="text/javascript" src="js/DispObj.js"></script>
2733 <script type="text/javascript" src="js/ObjIDMgr.js"></script>
2834 <script type="text/javascript" src="js/ThreadMessage.js"></script>
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/DispObj.js (revision 16)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/DispObj.js (revision 17)
@@ -144,7 +144,7 @@
144144 this.DOMobject.style.width = this.width.toString() + "px";
145145 this.DOMobject.style.height = this.height.toString() + "px";
146146 this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
147- this.DOMobject.style.backgroundColor = "#cdcdcd";
147+// this.DOMobject.style.backgroundColor = "#cdcdcd";
148148 if (null != this.text) this.DOMobject.innerHTML = this.text;
149149
150150 document.getElementById('DispField').appendChild(this.DOMobject);
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/UI_parts.js (revision 16)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/UI_parts.js (revision 17)
@@ -269,46 +269,32 @@
269269 let moveX = this.endDragX - this.startDragX;
270270 let moveY = this.endDragY - this.startDragY;
271271
272- switch(2){
273- case 0:
272+ switch(1){
273+ case 0: // 領域サイズ変更のみ
274274 this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
275275 break;
276- case 1:
276+ case 1: // 縦倍率に合わせfont sizeも変更
277277 {
278278 let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
279279 let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
280- let scaleX = (orgwidth + moveX) / orgwidth;
281- let scaleY = (orgheight + moveY) / orgheight;
282-
283- this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, scaleX, scaleY));
284- }
285- break;
286- case 2:
287- {
288- let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
289- let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
290- let scaleX = (this.scaleStartWidth + moveX) / orgwidth;
291- let scaleY = (this.scaleStartHeight + moveY) / orgheight;
280+ let scaleY = (this.scaleStartHeight + moveY) / orgheight * 100; // ★さらに初期倍率設定値を掛ける必要がある
292281 this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleX, scaleY));
293282 }
294283 break;
295284 }
296285 }
297- renderMouseMoveScale(width, height, scalex, scaley) {
286+ renderMouseMoveScale(width, height, scalefont) {
298287 this.clingingPartner.style.opacity = 0.4;
299288
300- switch(2){
289+ switch(1){
301290 case 0:
302291 this.clingingPartner.style.width = width + "px";
303292 this.clingingPartner.style.height = height + "px";
304293 break;
305294 case 1:
306- this.clingingPartner.style.transform = 'scaleX(' + width + ') scaleY(' + height + ') rotateZ(' + parseInt(this.clingingPartner.dataset.degree) + 'deg);';
307- break;
308- case 2:
309295 this.clingingPartner.style.width = width + "px";
310296 this.clingingPartner.style.height = height + "px";
311- this.clingingPartner.style.fontSize = (scaley * 100) + '%';
297+ this.clingingPartner.style.fontSize = scalefont + '%';
312298 break;
313299 }
314300 }
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/main.js (revision 16)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/main.js (revision 17)
@@ -38,6 +38,8 @@
3838 let savelink = document.getElementById('save');
3939 savelink.addEventListener('click', onClickSaveLink, false);
4040
41+ window.CSSPalette = new CSSPalette();
42+ window.CSSPalette.initialize();
4143
4244
4345 // --- test code -------
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/palette.js (nonexistent)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/palette.js (revision 17)
@@ -0,0 +1,37 @@
1+class CSSPalette {
2+ constructor() {
3+ this.DOMobject = [];
4+ this.draggingDOM = null;
5+ }
6+
7+ initialize() {
8+ this.DOMobject = document.getElementsByClassName('csspal');
9+ for (let cnt = 0; cnt < this.DOMobject.length; cnt++) {
10+ this.DOMobject[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
11+ }
12+ }
13+
14+
15+
16+
17+
18+ onMouseDown(evt) {
19+ this.draggingDOM = evt.target;
20+ let palid = evt.target.dataset.palid;
21+ let dragclass = evt.target.dataset.value;
22+
23+ // Mouse eventをDisplayFieldからCSSPalに渡してもらうように設定
24+ window.displayField.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
25+ }
26+ mouseMove(evt) {
27+ }
28+ mouseUp(evt) {
29+ // Mouse event callback設定をクリア
30+ window.displayField.setMouseEventObj(null, null);
31+
32+ let dropele = document.elementFromPoint(evt.pageX, evt.pageY);
33+ dropele.classList.remove();
34+ dropele.classList.add(this.draggingDOM.dataset.value);
35+ }
36+
37+} // class CSSPalette
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 16)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 17)
@@ -26,6 +26,19 @@
2626 border:1px solid black;
2727 }
2828
29+ .csspal {
30+ display: inline-block;
31+ width: 25px; height: 25px;
32+ border: 1px solid black;
33+ margin: 10px;
34+ }
35+ .css1 {
36+ background-color:red;
37+ }
38+ .css2 {
39+ background-color:aqua;
40+ }
41+
2942 .scaler {
3043 border: 2px solid black;
3144 border-radius: 50%;
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 16)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 17)
@@ -17,12 +17,18 @@
1717 <button type=button class="pal" data-objid="pal" data-palid="2" data-value="0x0000ff01">button3</button>
1818 <button type=button class="pal" data-objid="pal" data-palid="3" data-value="0xffffff01">button4</button>
1919 <button type=button class="pal" data-objid="pal" data-palid="4" data-value="0x00000000">button5</button>
20- <a href="#" id="save" download="savefilename.txt">Save</a>
20+ <a href="#" id="save" download="savefilename.txt">Save</a><br />
21+ <div class="csspal css1" data-objid="csspal" data-palid="0" data-value="css1"></div>
22+ <div class="csspal css2" data-objid="csspal" data-palid="1" data-value="css2"></div>
23+ <div class="csspal css3" data-objid="csspal" data-palid="2" data-value="css3"></div>
24+ <div class="csspal css4" data-objid="csspal" data-palid="3" data-value="css4"></div>
25+ <div class="csspal css5" data-objid="csspal" data-palid="4" data-value="css5"></div>
2126
2227 <script type="text/javascript" src="js/Common.js"></script>
2328 <script type="text/javascript" src="js/Queue.js"></script>
2429 <script type="text/javascript" src="js/CommandObj.js"></script>
2530 <script type="text/javascript" src="js/UI_parts.js"></script>
31+ <script type="text/javascript" src="js/palette.js"></script>
2632 <script type="text/javascript" src="js/DispObj.js"></script>
2733 <script type="text/javascript" src="js/ObjIDMgr.js"></script>
2834 <script type="text/javascript" src="js/ThreadMessage.js"></script>
--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 16)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 17)
@@ -144,7 +144,7 @@
144144 this.DOMobject.style.width = this.width.toString() + "px";
145145 this.DOMobject.style.height = this.height.toString() + "px";
146146 this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
147- this.DOMobject.style.backgroundColor = "#cdcdcd";
147+// this.DOMobject.style.backgroundColor = "#cdcdcd";
148148 if (null != this.text) this.DOMobject.innerHTML = this.text;
149149
150150 document.getElementById('DispField').appendChild(this.DOMobject);
--- HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 16)
+++ HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 17)
@@ -269,46 +269,32 @@
269269 let moveX = this.endDragX - this.startDragX;
270270 let moveY = this.endDragY - this.startDragY;
271271
272- switch(2){
273- case 0:
272+ switch(1){
273+ case 0: // 領域サイズ変更のみ
274274 this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY));
275275 break;
276- case 1:
276+ case 1: // 縦倍率に合わせfont sizeも変更
277277 {
278278 let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
279279 let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
280- let scaleX = (orgwidth + moveX) / orgwidth;
281- let scaleY = (orgheight + moveY) / orgheight;
282-
283- this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, scaleX, scaleY));
284- }
285- break;
286- case 2:
287- {
288- let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
289- let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
290- let scaleX = (this.scaleStartWidth + moveX) / orgwidth;
291- let scaleY = (this.scaleStartHeight + moveY) / orgheight;
280+ let scaleY = (this.scaleStartHeight + moveY) / orgheight * 100; // ★さらに初期倍率設定値を掛ける必要がある
292281 this.renderFunc.enqueue(this.renderMouseMoveScale.bind(this, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY, scaleX, scaleY));
293282 }
294283 break;
295284 }
296285 }
297- renderMouseMoveScale(width, height, scalex, scaley) {
286+ renderMouseMoveScale(width, height, scalefont) {
298287 this.clingingPartner.style.opacity = 0.4;
299288
300- switch(2){
289+ switch(1){
301290 case 0:
302291 this.clingingPartner.style.width = width + "px";
303292 this.clingingPartner.style.height = height + "px";
304293 break;
305294 case 1:
306- this.clingingPartner.style.transform = 'scaleX(' + width + ') scaleY(' + height + ') rotateZ(' + parseInt(this.clingingPartner.dataset.degree) + 'deg);';
307- break;
308- case 2:
309295 this.clingingPartner.style.width = width + "px";
310296 this.clingingPartner.style.height = height + "px";
311- this.clingingPartner.style.fontSize = (scaley * 100) + '%';
297+ this.clingingPartner.style.fontSize = scalefont + '%';
312298 break;
313299 }
314300 }
--- HtmlDrawApp/HTMLDrawApp/js/main.js (revision 16)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js (revision 17)
@@ -38,6 +38,8 @@
3838 let savelink = document.getElementById('save');
3939 savelink.addEventListener('click', onClickSaveLink, false);
4040
41+ window.CSSPalette = new CSSPalette();
42+ window.CSSPalette.initialize();
4143
4244
4345 // --- test code -------
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (nonexistent)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 17)
@@ -0,0 +1,37 @@
1+class CSSPalette {
2+ constructor() {
3+ this.DOMobject = [];
4+ this.draggingDOM = null;
5+ }
6+
7+ initialize() {
8+ this.DOMobject = document.getElementsByClassName('csspal');
9+ for (let cnt = 0; cnt < this.DOMobject.length; cnt++) {
10+ this.DOMobject[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
11+ }
12+ }
13+
14+
15+
16+
17+
18+ onMouseDown(evt) {
19+ this.draggingDOM = evt.target;
20+ let palid = evt.target.dataset.palid;
21+ let dragclass = evt.target.dataset.value;
22+
23+ // Mouse eventをDisplayFieldからCSSPalに渡してもらうように設定
24+ window.displayField.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
25+ }
26+ mouseMove(evt) {
27+ }
28+ mouseUp(evt) {
29+ // Mouse event callback設定をクリア
30+ window.displayField.setMouseEventObj(null, null);
31+
32+ let dropele = document.elementFromPoint(evt.pageX, evt.pageY);
33+ dropele.classList.remove();
34+ dropele.classList.add(this.draggingDOM.dataset.value);
35+ }
36+
37+} // class CSSPalette