• R/O
  • SSH
  • HTTPS

Commit

Frequently used words (click to add to your profile)

javac++androidlinuxc#objective-cqtwindows誰得cocoapythonphprubygameguibathyscaphec翻訳omegat計画中(planning stage)frameworktwittertestdomvb.netdirectxbtronarduinopreviewerゲームエンジン

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


Commit MetaInfo

Révision42 (tree)
l'heure2016-12-06 02:58:58
Auteurtakoyaki_umaaaa

Message de Log

識別用borderの表示/非表示

Change Summary

Modification

--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 41)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/css/default.css (revision 42)
@@ -1,4 +1,9 @@
1-body {
1+// Webviewの表示スタイル定義
2+//
3+// CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
4+// ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
5+
6+body {
27 /*スクロールとズームを有効にするにはこのコメントを解除します
38 タッチ操作: 操作;
49 */
@@ -13,6 +18,9 @@
1318 -khtml-user-select: none;
1419 -moz-user-select: none;
1520 user-select: none;
21+ font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, MS P明朝, MS 明朝, serif;
22+ -webkit-font-smoothing: antialiased;
23+ -webkit-overflow-scrolling: touch;
1624 }
1725
1826 .buttonstyle {
@@ -51,7 +59,7 @@
5159 #DispField{
5260 display:block;
5361 position:relative;
54- width:400px; height:300px;
62+ width:1000px; height:500px;
5563 border: none;
5664 margin: 0; padding: 0;
5765 background-color: transparent;
@@ -64,7 +72,6 @@
6472 display:block;
6573 position: absolute;
6674 width: 100%; height: 100%;
67- border: 1px solid black;
6875 margin: 0; padding: 0;
6976 background-color: white;
7077 transform-style: inherit;
@@ -100,20 +107,53 @@
100107 display: inline-block;
101108 position: absolute;
102109 left:0px; top:310px;
103- width: 195px; /* (5+25+5) * 5 + (5+5) */
104- height: 55px;
110+ width: 400px; /* (5+25+5) * 5 + (5+5) */
111+ height: 120px;
105112 margin: 0px; padding: 5px;
106- background-color: rgba(205,133,63,0.6);
107- border: 2px solid gray;
108- border-radius: 4px;
113+ border: 1px solid transparent;
114+ border-radius: 8px;
109115 box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
110116 }
111117 .pallegend {
112118 background-color: transparent;
119+ height: 30px;
113120 font-weight: bold;
114- font-size: small;
121+ font-size: 30px;
122+ line-height: 30px;
123+ color: gray;
115124 }
125+ .palgroup0 {
126+ background-color: rgba(27, 158, 131, 0.6);
127+ box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
128+ }
129+ .palgroup1 {
130+ background-color: rgba(154,145,140,0.6);
131+ box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
132+ }
133+ .palgroup2 {
134+ background-color: rgba(156, 165, 55, 0.6);
135+ box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
136+ }
116137
138+ .paldesc1,
139+ .paldesc2 {
140+ display: inline-block;
141+ position: absolute;
142+ width: 350px; height: 110px;
143+ margin:0; padding:0;
144+ line-height: 110px;
145+ font-size: 110px;
146+ font-weight: bold;
147+ color: rgba(255, 255, 255, 0.3);
148+ }
149+ .paldesc1 {
150+ left: -40px; top: -20px;
151+ text-align: left;
152+ }
153+ .paldesc2 {
154+ right: -40px; bottom: -60px;
155+ text-align: right;
156+ }
117157
118158
119159 /* パレット要素の定義 */
@@ -122,21 +162,26 @@
122162 .palact {
123163 display: inline-block;
124164 position: absolute;
125- width: 25px; height: 25px;
126- border: 2px solid blue;
127- border-radius: 4px;
128- margin: 2px;
165+ width: 50px; height: 50px;
166+ border-radius: 8px;
167+ margin: 4px; padding: 0;
168+ text-align: center;
169+ font-size: 45px; line-height: 45px;
129170 }
130171 .palbg {
131- border: 2px solid black;
172+ border: 1px solid rgba(0,0,0,0.2);
173+ background-color: rgba(27, 158, 131, 0.6);
174+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
132175 }
133176 .paltxtcol {
134- border: 2px solid blue;
135- text-align: center;
136- font-size: 100%;
177+ border: 1px solid rgba(0,0,0,0.2);
178+ background-color: rgba(154,145,140,0.6);
179+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
137180 }
138181 .palact {
139- border: 2px solid brown;
182+ border: 1px solid rgba(0,0,0,0.2);
183+ background-color: rgba(156, 165, 55, 0.6);
184+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
140185 }
141186
142187
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 41)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/index.html (revision 42)
@@ -3,7 +3,6 @@
33 <head>
44 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
55 <meta charset="utf-8" />
6- <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=10, minimum-scale=0.1, width=device-width, height=device-height">
76 <title>HTMLDrawApp</title>
87 <link href="css/default.css" rel="stylesheet" />
98 </head>
@@ -20,149 +19,59 @@
2019 <button type=button class="pal" data-objid="pal" data-palid="1" title="現在のパレット設定を保存します">設定保存</button>
2120 <button type=button class="pal" data-objid="pal" data-palid="2" title="設定画面を表示します">設定Drop</button>
2221 <button type=button class="pal" data-objid="pal" data-palid="3" title="アニメーションを停止します">アニメ停止</button>
23- <button type=button class="pal" data-objid="pal" data-palid="4" >button5</button>
22+ <button type=button class="pal" data-objid="pal" data-palid="4" >枠表示</button>
2423 <a href="#" id="save" download="DragDraw.dd" title="DragDraw.ddという名前でダウンロードフォルダに保存します">画像保存</a><br />
2524 <a href="#apparea">停止</a>
2625
26+ <style id="styledispobj">
27+ .DispObj {
28+ border: none;
29+ }
30+ </style>
2731 <!-- Palette -->
2832 <style id="stylepalbg">
29- .palbg0 {
30- background-image: url(dummy.png);
31- }
32-
33- .palbg1 {
34- background-image: url(dummy.png);
35- }
36-
37- .palbg2 {
38- background-image: url(dummy.png);
39- }
40-
41- .palbg3 {
42- background-image: url(dummy.png);
43- }
44-
45- .palbg4 {
46- background-image: url(dummy.png);
47- }
33+ .palbg0 { background-image: url(dummy.png); }
34+ .palbg1 { background-image: url(dummy.png); }
35+ .palbg2 { background-image: url(dummy.png); }
36+ .palbg3 { background-image: url(dummy.png); }
37+ .palbg4 { background-image: url(dummy.png); }
4838 </style>
4939 <style id="stylepaltxtcol">
50- .paltxtcol0 {
51- color: black;
52- }
53-
54- .paltxtcol1 {
55- color: red;
56- }
57-
58- .paltxtcol2 {
59- color: blue;
60- }
61-
62- .paltxtcol3 {
63- color: green;
64- }
65-
66- .paltxtcol4 {
67- color: brown;
68- }
40+ .paltxtcol0 { color: black; }
41+ .paltxtcol1 { color: red; }
42+ .paltxtcol2 { color: blue; }
43+ .paltxtcol3 { color: green; }
44+ .paltxtcol4 { color: brown; }
6945 </style>
7046 <style id="stylepalact">
71- /* animation指定,keyframe指定, … と交互に設定されている想定 */
72- /* palette css と keyframe は必ず1対1.例えkeyframeが使いまわせたとしても。 */
73- .palact0 {
74- animation: animeY1 0.5s ease-in 0.3s 1 normal;
75- }
76-
47+ .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
7748 @keyframes animeY1 {
78- 0% {
79- transform: translateY(-60px) translateX(-30px);
80- }
81-
82- 10% {
83- transform: translateY(20px) translateX(30px);
84- }
85-
86- 20% {
87- transform: translateY(-40px) translateX(-20px);
88- }
89-
90- 30% {
91- transform: translateY(50px) translateX(-10px);
92- }
93-
94- 40% {
95- transform: translateY(-40px) translateX(20px);
96- }
97-
98- 50% {
99- transform: translateY(30px) translateX(-15px);
100- }
101-
102- 60% {
103- transform: translateY(-25px) translateX(0px);
104- }
105-
106- 70% {
107- transform: translateY(15px) translateX(-15px);
108- }
109-
110- 80% {
111- transform: translateY(-10px) translateX(10px);
112- }
113-
114- 90% {
115- transform: translateY(0px) translateX(-5px);
116- }
117-
118- 100% {
119- transform: translateY(0px) translateX(0px);
120- }
49+ 0% { transform: translateY(-60px) translateX(-30px); }
50+ 10% { transform: translateY(20px) translateX(30px); }
51+ 20% { transform: translateY(-40px) translateX(-20px); }
52+ 30% { transform: translateY(50px) translateX(-10px); }
53+ 40% { transform: translateY(-40px) translateX(20px); }
54+ 50% { transform: translateY(30px) translateX(-15px); }
55+ 60% { transform: translateY(-25px) translateX(0px); }
56+ 70% { transform: translateY(15px) translateX(-15px); }
57+ 80% { transform: translateY(-10px) translateX(10px); }
58+ 90% { transform: translateY(0px) translateX(-5px); }
59+ 100% { transform: translateY(0px) translateX(0px); }
12160 }
12261
123- .palact1 {
124- animation: animeact1 2s ease-in 0.3s 1 normal;
125- }
126-
127- @keyframes animeact1 {
128- to {
129- color: black;
130- }
131- }
132-
133- .palact2 {
134- animation: animeact2 2s ease-in 0.3s 1 normal;
135- }
136-
137- @keyframes animeact2 {
138- to {
139- color: black;
140- }
141- }
142-
143- .palact3 {
144- animation: animeact3 2s ease-in 0.3s 1 normal;
145- }
146-
147- @keyframes animeact3 {
148- to {
149- color: black;
150- }
151- }
152-
153- .palact4 {
154- animation: animeact4 2s ease-in 0.3s 1 normal;
155- }
156-
157- @keyframes animeact4 {
158- to {
159- color: black;
160- }
161- }
62+ .palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
63+ @keyframes animeact1 { to { color: black; } }
64+ .palact2 { animation: animeact2 2s ease-in 0.3s 1 normal; }
65+ @keyframes animeact2 { to { color: black; } }
66+ .palact3 { animation: animeact3 2s ease-in 0.3s 1 normal; }
67+ @keyframes animeact3 { to { color: black; } }
68+ .palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
69+ @keyframes animeact4 { to { color: black; } }
16270 </style>
16371
164- <fieldset class="palgroup" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
72+ <fieldset class="palgroup palgroup0" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
16573 <legend class="pallegend"> Background Palette </legend>
74+ <span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
16675 <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
16776 <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
16877 <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
@@ -171,8 +80,9 @@
17180 </fieldset>
17281 <br />
17382
174- <fieldset class="palgroup" data-objid="palgroup1" title="テキストの色を設定するパレットです">
83+ <fieldset class="palgroup palgroup1" data-objid="palgroup1" title="テキストの色を設定するパレットです">
17584 <legend class="pallegend"> Text Color Palette </legend>
85+ <span class="paldesc1">外観</span><span class="paldesc2">見た</span>
17686 <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
17787 <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
17888 <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
@@ -182,8 +92,9 @@
18292
18393 <br />
18494
185- <fieldset class="palgroup" data-objid="palgroup2" title="動きを設定するパレットです">
95+ <fieldset class="palgroup palgroup2" data-objid="palgroup2" title="動きを設定するパレットです">
18696 <legend class="pallegend"> Action Palette <span id="btnpauseanim" class="buttonstyle" title="要素の動きを一時的に停止します">Ⅱ</span></legend>
97+ <span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
18798 <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
18899 <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
189100 <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 41)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/DispObj.js (revision 42)
@@ -188,7 +188,7 @@
188188 return new rectData(0, 0, destW, destH);
189189 }
190190 renderCreate() {
191- this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
191+// this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
192192 if (null != this.text) this.DOMobject.innerHTML = this.text;
193193 // this.DOMobject.style.position = "absolute"; // DispObj CSS classで指定
194194
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/framearea.js (revision 41)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/framearea.js (revision 42)
@@ -34,8 +34,15 @@
3434 console.error("【DisplayField】 initialize() DOMobject is null.");
3535 return false;
3636 }
37+ if (this.dom) {
38+ console.error("【DisplayField】 initialize() 親要素が見つかりません");
39+ return false;
40+ }
41+
3742 this.DOMobject = dom;
3843 this.DOMobject.classList.add('FrameArea');
44+ this.DOMobject.dataset.width = this.DOMobject.parentNode.style.width;
45+ this.DOMobject.dataset.height = this.DOMobject.parentNode.style.height;
3946 }
4047
4148
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream
--- HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 41)
+++ HtmlDrawApp/HTMLDrawApp/bin/x64/Debug/AppX/js/palette.js (revision 42)
@@ -26,8 +26,8 @@
2626 // 背景設定パレット
2727 this.DOMpalbg = document.getElementsByClassName('palbg');
2828 for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
29- this.DOMpalbg[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
30- this.DOMpalbg[cnt].style.top = 18 + 'px';
29+ this.DOMpalbg[cnt].style.left = 10 + 70 * cnt + 'px';
30+ this.DOMpalbg[cnt].style.top = 40 + 'px';
3131 this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
3232 this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
3333 this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -37,8 +37,8 @@
3737 // テキストカラーパレット
3838 this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
3939 for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
40- this.DOMpaltxtcol[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
41- this.DOMpaltxtcol[cnt].style.top = 18 + 'px';
40+ this.DOMpaltxtcol[cnt].style.left = 10 + 70 * cnt + 'px';
41+ this.DOMpaltxtcol[cnt].style.top = 40 + 'px';
4242 this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
4343 this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
4444 this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -48,8 +48,8 @@
4848 // アクションパレット
4949 this.DOMpalact = document.getElementsByClassName('palact');
5050 for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
51- this.DOMpalact[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
52- this.DOMpalact[cnt].style.top = 18 + 'px';
51+ this.DOMpalact[cnt].style.left = 10 + 70 * cnt + 'px';
52+ this.DOMpalact[cnt].style.top = 40 + 'px';
5353 this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
5454 this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
5555 this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 41)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 42)
@@ -1,4 +1,9 @@
1-body {
1+// Webviewの表示スタイル定義
2+//
3+// CSS fileに定義すると document.sheet で取得した定義が readonlyになるため
4+// ここで定義するのは "変化しない定義" または "Elementで設定上書き" する内容のみ
5+
6+body {
27 /*スクロールとズームを有効にするにはこのコメントを解除します
38 タッチ操作: 操作;
49 */
@@ -13,6 +18,9 @@
1318 -khtml-user-select: none;
1419 -moz-user-select: none;
1520 user-select: none;
21+ font-family: 游明朝, YuMincho, ヒラギノ明朝 ProN W3, Hiragino Mincho ProN, HG明朝E, MS P明朝, MS 明朝, serif;
22+ -webkit-font-smoothing: antialiased;
23+ -webkit-overflow-scrolling: touch;
1624 }
1725
1826 .buttonstyle {
@@ -51,7 +59,7 @@
5159 #DispField{
5260 display:block;
5361 position:relative;
54- width:400px; height:300px;
62+ width:1000px; height:500px;
5563 border: none;
5664 margin: 0; padding: 0;
5765 background-color: transparent;
@@ -64,7 +72,6 @@
6472 display:block;
6573 position: absolute;
6674 width: 100%; height: 100%;
67- border: 1px solid black;
6875 margin: 0; padding: 0;
6976 background-color: white;
7077 transform-style: inherit;
@@ -100,20 +107,53 @@
100107 display: inline-block;
101108 position: absolute;
102109 left:0px; top:310px;
103- width: 195px; /* (5+25+5) * 5 + (5+5) */
104- height: 55px;
110+ width: 400px; /* (5+25+5) * 5 + (5+5) */
111+ height: 120px;
105112 margin: 0px; padding: 5px;
106- background-color: rgba(205,133,63,0.6);
107- border: 2px solid gray;
108- border-radius: 4px;
113+ border: 1px solid transparent;
114+ border-radius: 8px;
109115 box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
110116 }
111117 .pallegend {
112118 background-color: transparent;
119+ height: 30px;
113120 font-weight: bold;
114- font-size: small;
121+ font-size: 30px;
122+ line-height: 30px;
123+ color: gray;
115124 }
125+ .palgroup0 {
126+ background-color: rgba(27, 158, 131, 0.6);
127+ box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
128+ }
129+ .palgroup1 {
130+ background-color: rgba(154,145,140,0.6);
131+ box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
132+ }
133+ .palgroup2 {
134+ background-color: rgba(156, 165, 55, 0.6);
135+ box-shadow: 16px 16px 19px -11px rgba(0, 0, 0, 0.21);
136+ }
116137
138+ .paldesc1,
139+ .paldesc2 {
140+ display: inline-block;
141+ position: absolute;
142+ width: 350px; height: 110px;
143+ margin:0; padding:0;
144+ line-height: 110px;
145+ font-size: 110px;
146+ font-weight: bold;
147+ color: rgba(255, 255, 255, 0.3);
148+ }
149+ .paldesc1 {
150+ left: -40px; top: -20px;
151+ text-align: left;
152+ }
153+ .paldesc2 {
154+ right: -40px; bottom: -60px;
155+ text-align: right;
156+ }
117157
118158
119159 /* パレット要素の定義 */
@@ -122,21 +162,26 @@
122162 .palact {
123163 display: inline-block;
124164 position: absolute;
125- width: 25px; height: 25px;
126- border: 2px solid blue;
127- border-radius: 4px;
128- margin: 2px;
165+ width: 50px; height: 50px;
166+ border-radius: 8px;
167+ margin: 4px; padding: 0;
168+ text-align: center;
169+ font-size: 45px; line-height: 45px;
129170 }
130171 .palbg {
131- border: 2px solid black;
172+ border: 1px solid rgba(0,0,0,0.2);
173+ background-color: rgba(27, 158, 131, 0.6);
174+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
132175 }
133176 .paltxtcol {
134- border: 2px solid blue;
135- text-align: center;
136- font-size: 100%;
177+ border: 1px solid rgba(0,0,0,0.2);
178+ background-color: rgba(154,145,140,0.6);
179+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
137180 }
138181 .palact {
139- border: 2px solid brown;
182+ border: 1px solid rgba(0,0,0,0.2);
183+ background-color: rgba(156, 165, 55, 0.6);
184+ box-shadow: 10px 10px 20px -4px rgba(0,0,0,0.21);
140185 }
141186
142187
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 41)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 42)
@@ -3,7 +3,6 @@
33 <head>
44 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
55 <meta charset="utf-8" />
6- <meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=10, minimum-scale=0.1, width=device-width, height=device-height">
76 <title>HTMLDrawApp</title>
87 <link href="css/default.css" rel="stylesheet" />
98 </head>
@@ -20,149 +19,59 @@
2019 <button type=button class="pal" data-objid="pal" data-palid="1" title="現在のパレット設定を保存します">設定保存</button>
2120 <button type=button class="pal" data-objid="pal" data-palid="2" title="設定画面を表示します">設定Drop</button>
2221 <button type=button class="pal" data-objid="pal" data-palid="3" title="アニメーションを停止します">アニメ停止</button>
23- <button type=button class="pal" data-objid="pal" data-palid="4" >button5</button>
22+ <button type=button class="pal" data-objid="pal" data-palid="4" >枠表示</button>
2423 <a href="#" id="save" download="DragDraw.dd" title="DragDraw.ddという名前でダウンロードフォルダに保存します">画像保存</a><br />
2524 <a href="#apparea">停止</a>
2625
26+ <style id="styledispobj">
27+ .DispObj {
28+ border: none;
29+ }
30+ </style>
2731 <!-- Palette -->
2832 <style id="stylepalbg">
29- .palbg0 {
30- background-image: url(dummy.png);
31- }
32-
33- .palbg1 {
34- background-image: url(dummy.png);
35- }
36-
37- .palbg2 {
38- background-image: url(dummy.png);
39- }
40-
41- .palbg3 {
42- background-image: url(dummy.png);
43- }
44-
45- .palbg4 {
46- background-image: url(dummy.png);
47- }
33+ .palbg0 { background-image: url(dummy.png); }
34+ .palbg1 { background-image: url(dummy.png); }
35+ .palbg2 { background-image: url(dummy.png); }
36+ .palbg3 { background-image: url(dummy.png); }
37+ .palbg4 { background-image: url(dummy.png); }
4838 </style>
4939 <style id="stylepaltxtcol">
50- .paltxtcol0 {
51- color: black;
52- }
53-
54- .paltxtcol1 {
55- color: red;
56- }
57-
58- .paltxtcol2 {
59- color: blue;
60- }
61-
62- .paltxtcol3 {
63- color: green;
64- }
65-
66- .paltxtcol4 {
67- color: brown;
68- }
40+ .paltxtcol0 { color: black; }
41+ .paltxtcol1 { color: red; }
42+ .paltxtcol2 { color: blue; }
43+ .paltxtcol3 { color: green; }
44+ .paltxtcol4 { color: brown; }
6945 </style>
7046 <style id="stylepalact">
71- /* animation指定,keyframe指定, … と交互に設定されている想定 */
72- /* palette css と keyframe は必ず1対1.例えkeyframeが使いまわせたとしても。 */
73- .palact0 {
74- animation: animeY1 0.5s ease-in 0.3s 1 normal;
75- }
76-
47+ .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
7748 @keyframes animeY1 {
78- 0% {
79- transform: translateY(-60px) translateX(-30px);
80- }
81-
82- 10% {
83- transform: translateY(20px) translateX(30px);
84- }
85-
86- 20% {
87- transform: translateY(-40px) translateX(-20px);
88- }
89-
90- 30% {
91- transform: translateY(50px) translateX(-10px);
92- }
93-
94- 40% {
95- transform: translateY(-40px) translateX(20px);
96- }
97-
98- 50% {
99- transform: translateY(30px) translateX(-15px);
100- }
101-
102- 60% {
103- transform: translateY(-25px) translateX(0px);
104- }
105-
106- 70% {
107- transform: translateY(15px) translateX(-15px);
108- }
109-
110- 80% {
111- transform: translateY(-10px) translateX(10px);
112- }
113-
114- 90% {
115- transform: translateY(0px) translateX(-5px);
116- }
117-
118- 100% {
119- transform: translateY(0px) translateX(0px);
120- }
49+ 0% { transform: translateY(-60px) translateX(-30px); }
50+ 10% { transform: translateY(20px) translateX(30px); }
51+ 20% { transform: translateY(-40px) translateX(-20px); }
52+ 30% { transform: translateY(50px) translateX(-10px); }
53+ 40% { transform: translateY(-40px) translateX(20px); }
54+ 50% { transform: translateY(30px) translateX(-15px); }
55+ 60% { transform: translateY(-25px) translateX(0px); }
56+ 70% { transform: translateY(15px) translateX(-15px); }
57+ 80% { transform: translateY(-10px) translateX(10px); }
58+ 90% { transform: translateY(0px) translateX(-5px); }
59+ 100% { transform: translateY(0px) translateX(0px); }
12160 }
12261
123- .palact1 {
124- animation: animeact1 2s ease-in 0.3s 1 normal;
125- }
126-
127- @keyframes animeact1 {
128- to {
129- color: black;
130- }
131- }
132-
133- .palact2 {
134- animation: animeact2 2s ease-in 0.3s 1 normal;
135- }
136-
137- @keyframes animeact2 {
138- to {
139- color: black;
140- }
141- }
142-
143- .palact3 {
144- animation: animeact3 2s ease-in 0.3s 1 normal;
145- }
146-
147- @keyframes animeact3 {
148- to {
149- color: black;
150- }
151- }
152-
153- .palact4 {
154- animation: animeact4 2s ease-in 0.3s 1 normal;
155- }
156-
157- @keyframes animeact4 {
158- to {
159- color: black;
160- }
161- }
62+ .palact1 { animation: animeact1 2s ease-in 0.3s 1 normal; }
63+ @keyframes animeact1 { to { color: black; } }
64+ .palact2 { animation: animeact2 2s ease-in 0.3s 1 normal; }
65+ @keyframes animeact2 { to { color: black; } }
66+ .palact3 { animation: animeact3 2s ease-in 0.3s 1 normal; }
67+ @keyframes animeact3 { to { color: black; } }
68+ .palact4 { animation: animeact4 2s ease-in 0.3s 1 normal; }
69+ @keyframes animeact4 { to { color: black; } }
16270 </style>
16371
164- <fieldset class="palgroup" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
72+ <fieldset class="palgroup palgroup0" data-objid="palgroup0" title="背景の色や画像を設定するパレットです">
16573 <legend class="pallegend"> Background Palette </legend>
74+ <span class="paldesc1">背景</span><span class="paldesc2">色&nbsp;</span>
16675 <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
16776 <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
16877 <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
@@ -171,8 +80,9 @@
17180 </fieldset>
17281 <br />
17382
174- <fieldset class="palgroup" data-objid="palgroup1" title="テキストの色を設定するパレットです">
83+ <fieldset class="palgroup palgroup1" data-objid="palgroup1" title="テキストの色を設定するパレットです">
17584 <legend class="pallegend"> Text Color Palette </legend>
85+ <span class="paldesc1">外観</span><span class="paldesc2">見た</span>
17686 <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
17787 <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
17888 <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
@@ -182,8 +92,9 @@
18292
18393 <br />
18494
185- <fieldset class="palgroup" data-objid="palgroup2" title="動きを設定するパレットです">
95+ <fieldset class="palgroup palgroup2" data-objid="palgroup2" title="動きを設定するパレットです">
18696 <legend class="pallegend"> Action Palette <span id="btnpauseanim" class="buttonstyle" title="要素の動きを一時的に停止します">Ⅱ</span></legend>
97+ <span class="paldesc1">動き</span><span class="paldesc2">流れ</span>
18798 <div class="palact palact0" data-objid="palact0" data-palid="0"></div>
18899 <div class="palact palact1" data-objid="palact1" data-palid="1"></div>
189100 <div class="palact palact2" data-objid="palact2" data-palid="2"></div>
--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 41)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 42)
@@ -188,7 +188,7 @@
188188 return new rectData(0, 0, destW, destH);
189189 }
190190 renderCreate() {
191- this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
191+// this.DOMobject.style.border = "1px solid black"; // 指定するI/Fが必要
192192 if (null != this.text) this.DOMobject.innerHTML = this.text;
193193 // this.DOMobject.style.position = "absolute"; // DispObj CSS classで指定
194194
--- HtmlDrawApp/HTMLDrawApp/js/framearea.js (revision 41)
+++ HtmlDrawApp/HTMLDrawApp/js/framearea.js (revision 42)
@@ -34,8 +34,15 @@
3434 console.error("【DisplayField】 initialize() DOMobject is null.");
3535 return false;
3636 }
37+ if (this.dom) {
38+ console.error("【DisplayField】 initialize() 親要素が見つかりません");
39+ return false;
40+ }
41+
3742 this.DOMobject = dom;
3843 this.DOMobject.classList.add('FrameArea');
44+ this.DOMobject.dataset.width = this.DOMobject.parentNode.style.width;
45+ this.DOMobject.dataset.height = this.DOMobject.parentNode.style.height;
3946 }
4047
4148
--- HtmlDrawApp/HTMLDrawApp/js/main.js (revision 41)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js (revision 42)
@@ -257,6 +257,13 @@
257257 // FrameArea取得
258258 let frameDom = document.getElementById("FrameArea");
259259 window.frameArea.initialize(frameDom);
260+ // FrameArea.datasetからキャンバスの幅高さを取得
261+ let width = window.frameArea.DOMobject.dataset.width;
262+ let height = window.frameArea.DOMobject.dataset.height;
263+ if (0 < parseInt(width))
264+ window.displayField.DOMobject.style.width = parseInt(width) + px;
265+ if (0 < parseInt(height))
266+ window.displayField.DOMobject.style.height = parseInt(height) + px;
260267
261268 // 4. DOM treeに合わせて DispObj instanceを作成
262269 window.ObjIDMgr.adjustEnvToDOM();
@@ -286,7 +293,25 @@
286293 window.ObjIDMgr.toggleClassToAllObj('PauseAnimation');
287294 window.CSSPalette.toggleClassToActionPalettes('PauseAnimation');
288295 break;
289- case 4:
296+ case 4: // Show/Hide element borderline
297+ {
298+ let setStr = '';
299+ let nowSetting = window.frameArea.DOMobject.style.border;
300+ if ("" == nowSetting) {
301+ setStr = "1px solid black";
302+ }
303+ else {
304+ setStr = "";
305+ }
306+ window.frameArea.DOMobject.style.border = setStr;
307+
308+ let dispobjRuleBefore = ".DispObj { border: "
309+ let dispobjRuleAfter = ";}";
310+ let elestyle = document.getElementById('styledispobj');
311+ elestyle.sheet.removeRule(0);
312+ elestyle.sheet.insertRule(dispobjRuleBefore + setStr + dispobjRuleAfter, 0);
313+ }
314+ break;
290315 case 5:
291316 let color = parseInt(evt.target.dataset.value);
292317 setBkColorFocusedObject(color);
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 41)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 42)
@@ -26,8 +26,8 @@
2626 // 背景設定パレット
2727 this.DOMpalbg = document.getElementsByClassName('palbg');
2828 for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
29- this.DOMpalbg[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
30- this.DOMpalbg[cnt].style.top = 18 + 'px';
29+ this.DOMpalbg[cnt].style.left = 10 + 70 * cnt + 'px';
30+ this.DOMpalbg[cnt].style.top = 40 + 'px';
3131 this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
3232 this.DOMpalbg[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
3333 this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -37,8 +37,8 @@
3737 // テキストカラーパレット
3838 this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
3939 for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
40- this.DOMpaltxtcol[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
41- this.DOMpaltxtcol[cnt].style.top = 18 + 'px';
40+ this.DOMpaltxtcol[cnt].style.left = 10 + 70 * cnt + 'px';
41+ this.DOMpaltxtcol[cnt].style.top = 40 + 'px';
4242 this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
4343 this.DOMpaltxtcol[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
4444 this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
@@ -48,8 +48,8 @@
4848 // アクションパレット
4949 this.DOMpalact = document.getElementsByClassName('palact');
5050 for (let cnt = 0; cnt < this.DOMpalact.length; cnt++) {
51- this.DOMpalact[cnt].style.left = 10 + (25 + 10) * cnt + 'px';
52- this.DOMpalact[cnt].style.top = 18 + 'px';
51+ this.DOMpalact[cnt].style.left = 10 + 70 * cnt + 'px';
52+ this.DOMpalact[cnt].style.top = 40 + 'px';
5353 this.DOMpalact[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
5454 this.DOMpalact[cnt].addEventListener('mouseup', this.mouseUp.bind(this), false);
5555 this.DOMpalact[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);