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

Revision20 (tree)
Time2016-11-21 01:52:54
Authortakoyaki_umaaaa

Log Message

CSS Palette要素を画面下部に作成
背景画像, Text colorの Drag&Dropでの設定
(動きは未実装)

Change Summary

Incremental Difference

--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/css/default.css (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/css/default.css (revision 20)
@@ -26,19 +26,25 @@
2626 border:1px solid black;
2727 }
2828
29- .csspal {
29+ .palbg {
3030 display: inline-block;
3131 width: 25px; height: 25px;
32- border: 1px solid black;
32+ border: 2px solid blue;
3333 margin: 10px;
3434 }
35- .css1 {
36- background-color:red;
35+
36+ .paltxtcol {
37+ display: inline-block;
38+ width: 25px; height: 25px;
39+ border: 2px solid brown;
40+ margin: 10px;
41+ text-align: center;
42+ font-size: 100%;
3743 }
38- .css2 {
39- background-color:aqua;
40- }
4144
45+
46+
47+
4248 .scaler {
4349 border: 2px solid black;
4450 border-radius: 50%;
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/index.html (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/index.html (revision 20)
@@ -11,19 +11,61 @@
1111 <!-- 編集領域 -->
1212 <div id="DispField" data-objid="DisplayField" data-focus="true">
1313 </div>
14- <!-- 固定ボタン -->
15- <button type=button class="pal" data-objid="pal" data-palid="0" data-value="0xff000001">button1</button>
14+ <!-- 固定ボタン (選択要素の削除, 保存, …) -->
15+ <button type=button class="pal" data-objid="pal" data-palid="0" data-value="0xff000001">削除</button>
1616 <button type=button class="pal" data-objid="pal" data-palid="1" data-value="0x00ff0001">button2</button>
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>
2020 <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>
2621
22+ <!-- Palette -->
23+ <style id="stylepalbg">
24+ .palbg0 { background-image: url(dummy.png); }
25+ .palbg1 { background-image: url(dummy.png); }
26+ .palbg2 { background-image: url(dummy.png); }
27+ .palbg3 { background-image: url(dummy.png); }
28+ .palbg4 { background-image: url(dummy.png); }
29+ </style>
30+ <style id="stylepaltxtcol">
31+ .paltxtcol0 { color: black; }
32+ .paltxtcol1 { color: red; }
33+ .paltxtcol2 { color: blue; }
34+ .paltxtcol3 { color: green; }
35+ .paltxtcol4 { color: brown; }
36+ </style>
37+ <style id="stylepalact">
38+ /* animation指定，keyframe指定, … と交互に設定されている想定 */
39+ /* palette css と keyframe は必ず1対1．例えkeyframeが使いまわせたとしても。 */
40+ .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
41+ @keyframes animeY1 {
42+ 0% {transform: translateY(-60px) translateX(-30px);}
43+ 10% {transform: translateY(20px) translateX(30px);}
44+ 20% {transform: translateY(-40px) translateX(-20px);}
45+ 30% {transform: translateY(50px) translateX(-10px);}
46+ 40% {transform: translateY(-40px) translateX(20px);}
47+ 50% {transform: translateY(30px) translateX(-15px);}
48+ 60% {transform: translateY(-25px) translateX(0px);}
49+ 70% {transform: translateY(15px) translateX(-15px);}
50+ 80% {transform: translateY(-10px) translateX(10px);}
51+ 90% {transform: translateY(0px) translateX(-5px);}
52+ 100% {transform: translateY(0px) translateX(0px);}
53+ }
54+ .palact1 { animation: animeY1 2s ease-in 0.3s 1 normal; }
55+
56+ </style>
57+ <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
58+ <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
59+ <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
60+ <div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
61+ <div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
62+
63+ <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
64+ <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
65+ <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
66+ <div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3">あ</div>
67+ <div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4">あ</div>
68+
2769 <script type="text/javascript" src="js/Common.js"></script>
2870 <script type="text/javascript" src="js/Queue.js"></script>
2971 <script type="text/javascript" src="js/CommandObj.js"></script>
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/CommandMgr.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/CommandMgr.js (revision 20)
@@ -35,7 +35,7 @@
3535 function undoCreateTextbox(cmd) {
3636 debuglog("undoCreateTextbox");
3737 var undoCmd = new CCommandObj();
38- undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.msgID);
38+ undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.param3, cmd.param4, cmd.msgID);
3939 return undoCmd;
4040 };
4141 function undoCreateImagebox(cmd) {
@@ -44,7 +44,7 @@
4444 debuglog("undoMovebox");
4545 var undoCmd = new CCommandObj();
4646 // dummy
47- undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.msgID);
47+ undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.param3, cmd.param4, cmd.msgID);
4848 return undoCmd;
4949 };
5050 function undoScalebox(cmd) {
@@ -51,7 +51,7 @@
5151 debuglog("undoScalebox");
5252 var undoCmd = new CCommandObj();
5353 // dummy
54- undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.msgID);
54+ undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.param3, cmd.param4, cmd.msgID);
5555 return undoCmd;
5656 };
5757 function undoRollbox(cmd) {
@@ -58,7 +58,7 @@
5858 debuglog("undoRollbox");
5959 var undoCmd = new CCommandObj();
6060 // dummy
61- undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.msgID);
61+ undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.param3, cmd.param4, cmd.msgID);
6262 return undoCmd;
6363 };
6464 function undoDeletebox(cmd) {
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/CommandObj.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/CommandObj.js (revision 20)
@@ -36,7 +36,7 @@
3636 }
3737
3838 // toには最終到達 moduleを指定する。CommandMgrに要求するわけではないため
39- createCommand(type, from, to, cmd, param1, param2, param3, msgID) {
39+ createCommand(type, from, to, cmd, param1, param2, param3, param4, msgID) {
4040 this.type = type; // 'Request', 'Response', 'Result'
4141 this.msgID = msgID; // msgID from postMessage (1～) 2つ以上のsequenceが同時に走るとき、処理が識別できれば(重複IDにならなければ)なんでもOK
4242 this.from = from;
@@ -45,6 +45,7 @@
4545 this.param1 = param1;
4646 this.param2 = param2;
4747 this.param3 = param3;
48+ this.param4 = param4;
4849
4950 // return checkCommandInfo();
5051
@@ -54,7 +55,7 @@
5455 }
5556
5657 outputLog() {
57- debuglog("commandObj data ------------\ntype=" + this.type + ", msgID=" + this.msgID + ",\nfrom=" + this.from + ", to=" + this.to + ",\ncmd=" + this.cmd + ", praram1=" + this.param1 + ", param2=" + this.param2 + ", param3=" + this.param3 + "\n---------------------------------");
58+ debuglog("commandObj data ------------\ntype=" + this.type + ", msgID=" + this.msgID + ",\nfrom=" + this.from + ", to=" + this.to + ",\ncmd=" + this.cmd + ", praram1=" + this.param1 + ", param2=" + this.param2 + ", param3=" + this.param3 + ", param4=" + this.param4 + "\n---------------------------------");
5859 }
5960
6061 // 設定されたコマンド情報の正当性チェック
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/Common.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/Common.js (revision 20)
@@ -39,6 +39,91 @@
3939 };
4040
4141
42+
43+// Image fileを読み込み、その内容を対象CSSに設定
44+// CSSには "'cssstr1' + fileBlob + 'cssstr2'" が設定される
45+function setImageFileToCSS(
46+ ele, // CSS書き換え対象Element
47+ num, // 書き換える CSS要素番号 (ele.sheet.cssRules[n] ← このnの値)
48+ cssstr1, // CSS書き換え前半文字
49+ cssstr2, // CSS書き換え後半文字
50+ file // 画像ファイルを指している file object
51+) {
52+ // drop fileの読み込み
53+ let reader = new FileReader();
54+ // Image fileを読み込み (画像の幅・高さは取れない。Binary dataを memory上に読むだけなので)
55+ reader.readAsDataURL(file);
56+ reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2);
57+};
58+// Text fileを読み込み、その内容を対象CSSに設定
59+function setTextFileToCSS(
60+ ele, // CSS書き換え対象Element
61+ num, // 書き換える CSS要素番号 (ele.sheet.cssRules[n] ← このnの値)
62+ cssstr1, // CSS書き換え前半文字
63+ cssstr2, // CSS書き換え後半文字
64+ file // Textファイルを指している file object
65+) {
66+ // drop fileの読み込み
67+ let reader = new FileReader();
68+ // Text fileを読み込み
69+ reader.readAsText(file);
70+ reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2);
71+};
72+function setFileToCSS( ele, num, cssstr1, cssstr2, evt ){
73+ let blob = evt.target.result;
74+ // blobの適用
75+ let csstext = String(cssstr1) + blob + String(cssstr2);
76+ ele.sheet.deleteRule(num);
77+ ele.sheet.insertRule(csstext, num);
78+};
79+
80+
81+
82+// Drop fileから file objectを取得 (同期処理)
83+// 複数file 非対応。text or image がヒットした時点でcallbackを呼び出す
84+// callback書式(text,image): function(blob)
85+// callback書式(error): function()
86+function getDropFile(evt, callbacktext, callbackimage, callbackerror) {
87+ let ret = false;
88+ let files = evt.dataTransfer.files;
89+ if (!files) {
90+ console.error('dropされた file listが取得できない');
91+ if (null != callbackerror) callbackerror();
92+ return ret;
93+ }
94+ if (files.length <= 0) {
95+ // Fileではないものを Dropされると発生
96+ console.error('drop fileの file list length == 0');
97+ if (null != callbackerror) callbackerror();
98+ return ret;
99+ }
100+ let dropfile = null;
101+ for (var cnt = 0; cnt < files.length; cnt++) {
102+ dropfile = files[cnt];
103+ if (null != dropfile.type.match(/image/)) {
104+
105+ if (null != callbackimage) callbackimage(dropfile);
106+ ret = true;
107+ break;
108+ }
109+ else if (null != dropfile.type.match(/text\/plain/)) {
110+
111+ if (null != callbacktext) callbacktext(dropfile);
112+ ret = true;
113+ break;
114+ }
115+ }
116+
117+ if (false == ret) {
118+ console.error('Drop file error. Drop するファイルは 画像かテキストにしてください\n'
119+ + 'type=' + files[0].type.toString() + ', name=' + files[0].name.toString());
120+ if (null != callbackerror) callbackerror();
121+ }
122+ return ret;
123+};
124+
125+
126+// 保存処理
42127 class SaveFile {
43128 constructor() {
44129 this.filename = null;
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/DispObj.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/DispObj.js (revision 20)
@@ -177,12 +177,13 @@
177177 + ", border=" + this.DOMobject.style.border);
178178 }
179179
180- scalebox(rect) {
180+ scalebox(rect, fontscale) {
181181 this.x = rect.left;
182182 this.y = rect.top;
183183 this.width = rect.right - rect.left;
184184 this.height = rect.bottom - rect.top;
185185 this.renderFunc.enqueue(this.renderscalebox.bind(this));
186+ this.fontsize = fontscale;
186187 }
187188 renderscalebox() {
188189 this.DOMobject.style.left = this.x.toString() + "px";
@@ -190,6 +191,7 @@
190191 this.DOMobject.style.width = this.width.toString() + "px";
191192 this.DOMobject.style.height = this.height.toString() + "px";
192193 this.DOMobject.style.opacity = this.opacity.toString();
194+ this.DOMobject.style.fontSize = this.fontsize + '%';
193195 }
194196
195197 rollbox(degree) {
@@ -266,7 +268,7 @@
266268
267269 // 移動 Command発行
268270 let cmd = new CCommandObj();
269- cmd.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.movebox, rect, this.ObjID, 4);
271+ cmd.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.movebox, rect, this.ObjID, null, null, 4);
270272 this.debuglog("postToWorker");
271273 window.postToWorker.post(cmd);
272274 }
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/DisplayField.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/DisplayField.js (revision 20)
@@ -27,6 +27,9 @@
2727 this.DOMobject.addEventListener('drop', this.onDrop.bind(this), false);
2828 }
2929
30+
31+ // 操作関数 -----------------------------------
32+
3033 // Mouse eventを処理するObj
3134 setMouseEventObj(mouseMove, mouseUp) {
3235 this.debuglog('setMouseEventObj');
@@ -35,6 +38,8 @@
3538 this.mouseUpFunc = mouseUp;
3639 }
3740
41+
42+
3843 // ブラウザ上への描画 -------------------------
3944 render() {
4045 while (0 < this.renderFunc.size()) {
@@ -53,6 +58,9 @@
5358 }
5459 // ■ マウス移動 (ドラッグ中)
5560 onMouseMove(evt) {
61+ // ★ evt.targetが期待するelementかチェックする必要がある
62+ // ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
63+
5664 if (null != this.mouseMoveFunc) {
5765 this.mouseMoveFunc(evt);
5866 return;
@@ -60,6 +68,9 @@
6068 }
6169 // ■ ドロップ処理
6270 onMouseUp(evt) {
71+ // ★ evt.targetが期待するelementかチェックする必要がある
72+ // ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
73+
6374 if (null != this.mouseUpFunc) {
6475 this.mouseUpFunc(evt);
6576 return;
@@ -80,48 +91,8 @@
8091 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
8192 evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
8293 evt.preventDefault(); // 要素既定のdefault動作を止める
83- let files = evt.dataTransfer.files;
84- if (!files) {
85- console.error('dropされた file listが取得できない');
86- return ret;
87- }
88- if (files.length <= 0) {
89- // Fileではないものを Dropされると発生
90- console.error('drop fileの file list length == 0');
91- return ret;
92- }
93- let dropfile = null;
94- for (var cnt = 0; cnt < files.length; cnt++) {
95- dropfile = files[cnt];
96- if (null != dropfile.type.match(/image/)) {
9794
98- // 画像box 作成 command要求
99- let rect = new rectData(205, 205, 255, 255);
100- var cmd = new CCommandObj();
101- // Image box 新規作成 command(新規なので objidを指定する箇所はない) 出力先rect, img blob
102- cmd.createCommand(cmdType.request, cmdAddress.DisplayField, cmdAddress.ObjIDMgr, cmdCmd.createImagebox, rect, dropfile, null, 6);
103- window.postToWorker.post(cmd);
104-
105- ret = true;
106- }
107- else if (null != dropfile.type.match(/text\/plain/)) {
108-
109- // Textbox作成 command要求
110- let rect = new rectData(205, 205, 255, 255);
111- var cmd = new CCommandObj();
112- // Text box 新規作成 command(新規なので objidを指定する箇所はない) 出力先rect, txt blob
113- cmd.createCommand(cmdType.request, cmdAddress.DisplayField, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, dropfile, null, 6);
114- window.postToWorker.post(cmd);
115-
116- ret = true;
117- }
118- }
119-
120- if (false == ret) {
121- console.error('Drop file error. Drop するファイルは 画像かテキストにしてください\n'
122- + 'type=' + files[0].type.toString() + ', name=' + files[0].name.toString());
123- }
124- return ret;
95+ getDropFile(evt, this.requestCmdTxtbox.bind(this), this.requestCmdImgbox.bind(this));
12596 }
12697
12798
@@ -128,7 +99,24 @@
12899
129100
130101
102+ // private関数 ----------------------------------------
131103
104+ requestCmdImgbox(dropfile) {
105+ // 画像box 作成 command要求
106+ let rect = new rectData(205, 205, 255, 255);
107+ var cmd = new CCommandObj();
108+ // Image box 新規作成 command(新規なので objidを指定する箇所はない) 出力先rect, img blob
109+ cmd.createCommand(cmdType.request, cmdAddress.DisplayField, cmdAddress.ObjIDMgr, cmdCmd.createImagebox, rect, dropfile, null, null, 6);
110+ window.postToWorker.post(cmd);
111+ }
112+ requestCmdTxtbox(dropfile) {
113+ // Textbox作成 command要求
114+ let rect = new rectData(205, 205, 255, 255);
115+ var cmd = new CCommandObj();
116+ // Text box 新規作成 command(新規なので objidを指定する箇所はない) 出力先rect, txt blob
117+ cmd.createCommand(cmdType.request, cmdAddress.DisplayField, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, dropfile, null, null, 6);
118+ window.postToWorker.post(cmd);
119+ }
132120
133121 // DOM obj → 対応する dispObjへ変換
134122 getDOMtoDispObj(dom) {
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/ObjIDMgr.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/ObjIDMgr.js (revision 20)
@@ -58,10 +58,10 @@
5858 }
5959 }
6060
61- scalebox(id, rect) {
62- this.debuglog("scalebox id=" + id);
61+ scalebox(id, rect, fontscale) {
62+ this.debuglog("scalebox id=" + id + "fontscale=" + fontscale);
6363 if (id < this.ObjIDLen) {
64- this.ObjIDarray[id].scalebox(rect);
64+ this.ObjIDarray[id].scalebox(rect, fontscale);
6565 }
6666 }
6767
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/UI_parts.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/UI_parts.js (revision 20)
@@ -315,9 +315,22 @@
315315 rectFrom.setLTWH(parseInt(this.clingingPartner.style.left), parseInt(this.clingingPartner.style.top), this.scaleStartWidth, this.scaleStartHeight);
316316 rectTo.setLTWH(rectFrom.left, rectFrom.top, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
317317
318+ let scaleY = 1.0;
319+ switch (1) {
320+ case 0: // 領域サイズ変更のみ
321+ break;
322+ case 1: // 縦倍率に合わせfont sizeも変更
323+ {
324+ let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
325+ let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
326+ scaleY = (this.scaleStartHeight + moveY) / orgheight * 100; // ★さらに初期倍率設定値を掛ける必要がある
327+ }
328+ break;
329+ }
330+
318331 // Scale Command発行
319332 let cmd = new CCommandObj();
320- cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.scalebox, this.clingingPartner.dataset.objid, rectFrom, rectTo, 5);
333+ cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.scalebox, this.clingingPartner.dataset.objid, rectFrom, rectTo, scaleY, 5);
321334 this.debuglog("postToWorker");
322335 window.postToWorker.post(cmd);
323336 }
@@ -355,7 +368,7 @@
355368
356369 // Rotate command発行
357370 let cmd = new CCommandObj();
358- cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.rollbox, this.clingingPartner.dataset.objid, degree, null, 6);
371+ cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.rollbox, this.clingingPartner.dataset.objid, degree, null, null, 6);
359372 this.debuglog("postToWorker");
360373 window.postToWorker.post(cmd);
361374 }
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/main.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/main.js (revision 20)
@@ -45,20 +45,21 @@
4545 // --- test code -------
4646 var rect = new rectData( 105, 105, 155, 155 );
4747 var obj1 = new CCommandObj();
48- obj1.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, null, 1 );
48+ obj1.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, null, null, null, 1 );
4949 window.postToWorker.post( obj1 );
5050 // ----------------------
5151 rect.setData( 110, 110, 160, 160 );
5252 var obj3 = new CCommandObj();
53- obj3.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, null, 1 );
53+ obj3.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, null, null, null, 1 );
5454 window.postToWorker.post( obj3 );
5555
5656 // ----------------------
5757 rect.setData( 150, 150, 0, 0 );
5858 var obj4 = new CCommandObj();
59- obj4.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.movebox, rect, 0, 2 );
59+ obj4.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.movebox, rect, 0, null, null, 2 );
6060 window.postToWorker.post( obj4 );
6161
62+ // ----------------------
6263
6364
6465
@@ -65,6 +66,7 @@
6566
6667
6768
69+
6870 // 画像読み込み等は待たずに実行開始
6971 window.startTime = window.performance.now();
7072 window.frameLength = 6.0;
@@ -73,9 +75,12 @@
7375 let nowTime = window.performance.now();
7476 // let frame = Math.floor((nowTime - window.startTime) / (1000.0 / 60.0) % window.frameLength);
7577
78+ // Canvas area描画 (div tag)
7679 window.displayField.render();
80+ // 各表示要素の描画 (div, img tag)
7781 window.ObjIDMgr.renderAll();
78-
82+
83+ // Focus枠, scale, rotate obj描画
7984 window.partsFocus.render();
8085
8186 requestAnimationFrame( renderLoop );
@@ -118,8 +123,8 @@
118123 window.ObjIDMgr.movebox(cmd.param2, cmd.param1);
119124 break;
120125 case cmdCmd.scalebox: // 拡大縮小
121- // objid rect
122- window.ObjIDMgr.scalebox(cmd.param1, cmd.param3);
126+ // objid rect fontscale
127+ window.ObjIDMgr.scalebox(cmd.param1, cmd.param3, cmd.param4);
123128 break;
124129 case cmdCmd.rollbox: // 回転
125130 // objid degree
@@ -166,7 +171,7 @@
166171
167172 // save.saveFileBrowser(filename, displayInfo);
168173 save.saveFileApp(filename, displayInfo, cmp, err);
169- // Anime GIFなどを指定されていると保存に時間がかかる
174+ // Anime GIFなどを指定されていると保存に時間がかかる (禁止にしたい)
170175 // 保存中 dialogが必要
171176 };
172177 function cmp() {
@@ -198,7 +203,7 @@
198203 if (null != focused) {
199204 // Delete command発行
200205 var obj1 = new CCommandObj();
201- obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.deletebox, focused, null, 1);
206+ obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.deletebox, focused, null, null, null, 1);
202207 window.postToWorker.post(obj1);
203208 }
204209 };
--- HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/palette.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/bin/Debug/AppX/js/palette.js (revision 20)
@@ -4,34 +4,157 @@
44 this.draggingDOM = null;
55 }
66
7+ debuglog(str) {
8+ debuglog('【CSSPalette】 ' + str);
9+ }
10+
711 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);
12+ // CSS 情報定義先を保持
13+ this.stylebg = document.getElementById('stylepalbg');
14+ this.styletxtcol = document.getElementById('stylepaltxtcol');
15+ this.styleact = document.getElementById('stylepalact');
16+
17+ // palette要素を保持
18+ this.DOMpalbg = document.getElementsByClassName('palbg');
19+ for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
20+ this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
21+ this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
22+ this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
23+ this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
1124 }
25+ this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
26+ for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
27+ this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
28+ this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
29+ this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
30+ this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
31+ }
1232 }
1333
34+ // 操作関数 ----------------------------
35+ definepalbg(
36+ id, // bg palette要素番号
37+ file // 画像を指しているfile object
38+ ) {
39+ let cssstr1 = '.palbg' + id + ' { background-image: url(';
40+ let cssstr2 = '); }';
41+ setImageFileToCSS(this.stylebg, id, cssstr1, cssstr2, file);
42+ }
1443
44+ // text color ('#000000, rgba(0,0,0,0) など)
45+ definepaltxtcolText(
46+ id, // txtcol palette要素番号
47+ file // Textを指しているfile object
48+ ) {
49+ let cssstr1 = '.paltxtcol' + id + ' {\ncolor: ';
50+ let cssstr2 = ';\n}';
51+ setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file);
52+ };
53+ // 指定された画像を font colorとして設定する
54+ definepaltxtcolImage(
55+ id, // txtcol palette要素番号
56+ file // 画像を指しているfile object
57+ ) {
58+let cssstr1 = '\
59+.paltxtcol' + id + ' {\n\
60+background: url(';
1561
62+let cssstr2 = '\
63+);\n\
64+background-size: contain;\n\
65+color: #fff;\n\
66+-webkit-text-fill-color: transparent;\n\
67+-webkit-background-clip: text;\n\
68+}';
1669
70+ setImageFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file);
71+ }
1772
73+
74+
75+
76+
77+ // Event handler -----------------------
78+
79+ // Drag&Drop event : Application外からのfileのやり取り
80+ // Mouse event : Elementに対する操作
81+
82+ onDragStart(evt) {
83+ evt.preventDefault();
84+ }
85+ onDragOver(evt) {
86+ evt.preventDefault();
87+ evt.dataTransfer.dropEffect = "move";
88+ }
89+ onDrop(evt) {
90+ this.debuglog('onDrop');
91+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
92+ evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
93+ evt.preventDefault(); // 要素既定のdefault動作を止める
94+
95+
96+ let palid = 0;
97+ // drop対象 elementを特定
98+ let objid = evt.target.dataset.objid;
99+ if (null != objid.match(/^palbg/)) {
100+ palid = parseInt(evt.target.dataset.palid);
101+ getDropFile(evt, null, this.definepalbg.bind(this, palid));
102+ }
103+ else if (null != objid.match(/^paltxtcol/)) {
104+ palid = parseInt(evt.target.dataset.palid);
105+ getDropFile(evt, this.definepaltxtcolText.bind(this, palid), this.definepaltxtcolImage.bind(this, palid));
106+ }
107+
108+ }
109+
110+
111+
18112 onMouseDown(evt) {
19113 this.draggingDOM = evt.target;
20- let palid = evt.target.dataset.palid;
21- let dragclass = evt.target.dataset.value;
22114
23115 // Mouse eventをDisplayFieldからCSSPalに渡してもらうように設定
24116 window.displayField.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
25117 }
26118 mouseMove(evt) {
119+ if (null == this.draggingDOM) return;
120+
121+
27122 }
28123 mouseUp(evt) {
124+ let palobjid = this.draggingDOM.dataset.objid;
125+ let palid = this.draggingDOM.dataset.palid;
126+
127+ // Drag中 element情報をクリア
128+ this.draggingDOM = null;
29129 // Mouse event callback設定をクリア
30130 window.displayField.setMouseEventObj(null, null);
31131
32- let dropele = document.elementFromPoint(evt.pageX, evt.pageY);
33- dropele.classList.remove();
34- dropele.classList.add(this.draggingDOM.dataset.value);
132+ // Drag中 palette elementから target element へ CSS classを追加する
133+ // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
134+
135+ this.replaceCSSclassToElement(palobjid, evt.target);
35136 }
36137
138+ // Target element へ CSS classを追加する
139+ // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
140+ replaceCSSclassToElement(
141+ CSSname, // 追加(上書き)する CSSclass名称文字列
142+ targetEle // 追加先 element
143+ ) {
144+ // Drag中の palette elementから 追加する CSS classを取得 (objidと同じ名前にしている)
145+ let result = /[a-zA-Z]+/.exec(CSSname); // objid末の数字を除く
146+ let DraggingPaletteType = result[0];
147+
148+ // Drop target elementに 同じ種類の CSS classがないかチェック
149+ let reg = new RegExp(DraggingPaletteType + '[0-9]+'); // 数字は1回以上発生する。数字なしは別class
150+ result = reg.exec(targetEle.className);
151+ let DropEleOldClass = (null != result) ? result[0] : null;
152+
153+ // 同じ種類の CSS classがあれば削除
154+ if (null != DropEleOldClass)
155+ targetEle.classList.remove(DropEleOldClass);
156+
157+ // Drop target elementに Drag elementの CSS class定義を追加
158+ targetEle.classList.add(CSSname);
159+ }
37160 } // class CSSPalette
--- HtmlDrawApp/HTMLDrawApp/css/default.css (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/css/default.css (revision 20)
@@ -26,19 +26,25 @@
2626 border:1px solid black;
2727 }
2828
29- .csspal {
29+ .palbg {
3030 display: inline-block;
3131 width: 25px; height: 25px;
32- border: 1px solid black;
32+ border: 2px solid blue;
3333 margin: 10px;
3434 }
35- .css1 {
36- background-color:red;
35+
36+ .paltxtcol {
37+ display: inline-block;
38+ width: 25px; height: 25px;
39+ border: 2px solid brown;
40+ margin: 10px;
41+ text-align: center;
42+ font-size: 100%;
3743 }
38- .css2 {
39- background-color:aqua;
40- }
4144
45+
46+
47+
4248 .scaler {
4349 border: 2px solid black;
4450 border-radius: 50%;
--- HtmlDrawApp/HTMLDrawApp/index.html (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/index.html (revision 20)
@@ -11,19 +11,61 @@
1111 <!-- 編集領域 -->
1212 <div id="DispField" data-objid="DisplayField" data-focus="true">
1313 </div>
14- <!-- 固定ボタン -->
15- <button type=button class="pal" data-objid="pal" data-palid="0" data-value="0xff000001">button1</button>
14+ <!-- 固定ボタン (選択要素の削除, 保存, …) -->
15+ <button type=button class="pal" data-objid="pal" data-palid="0" data-value="0xff000001">削除</button>
1616 <button type=button class="pal" data-objid="pal" data-palid="1" data-value="0x00ff0001">button2</button>
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>
2020 <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>
2621
22+ <!-- Palette -->
23+ <style id="stylepalbg">
24+ .palbg0 { background-image: url(dummy.png); }
25+ .palbg1 { background-image: url(dummy.png); }
26+ .palbg2 { background-image: url(dummy.png); }
27+ .palbg3 { background-image: url(dummy.png); }
28+ .palbg4 { background-image: url(dummy.png); }
29+ </style>
30+ <style id="stylepaltxtcol">
31+ .paltxtcol0 { color: black; }
32+ .paltxtcol1 { color: red; }
33+ .paltxtcol2 { color: blue; }
34+ .paltxtcol3 { color: green; }
35+ .paltxtcol4 { color: brown; }
36+ </style>
37+ <style id="stylepalact">
38+ /* animation指定，keyframe指定, … と交互に設定されている想定 */
39+ /* palette css と keyframe は必ず1対1．例えkeyframeが使いまわせたとしても。 */
40+ .palact0 { animation: animeY1 0.5s ease-in 0.3s 1 normal; }
41+ @keyframes animeY1 {
42+ 0% {transform: translateY(-60px) translateX(-30px);}
43+ 10% {transform: translateY(20px) translateX(30px);}
44+ 20% {transform: translateY(-40px) translateX(-20px);}
45+ 30% {transform: translateY(50px) translateX(-10px);}
46+ 40% {transform: translateY(-40px) translateX(20px);}
47+ 50% {transform: translateY(30px) translateX(-15px);}
48+ 60% {transform: translateY(-25px) translateX(0px);}
49+ 70% {transform: translateY(15px) translateX(-15px);}
50+ 80% {transform: translateY(-10px) translateX(10px);}
51+ 90% {transform: translateY(0px) translateX(-5px);}
52+ 100% {transform: translateY(0px) translateX(0px);}
53+ }
54+ .palact1 { animation: animeY1 2s ease-in 0.3s 1 normal; }
55+
56+ </style>
57+ <div class="palbg palbg0" data-objid="palbg0" data-palid="0"></div>
58+ <div class="palbg palbg1" data-objid="palbg1" data-palid="1"></div>
59+ <div class="palbg palbg2" data-objid="palbg2" data-palid="2"></div>
60+ <div class="palbg palbg3" data-objid="palbg3" data-palid="3"></div>
61+ <div class="palbg palbg4" data-objid="palbg4" data-palid="4"></div>
62+
63+ <div class="paltxtcol paltxtcol0" data-objid="paltxtcol0" data-palid="0">あ</div>
64+ <div class="paltxtcol paltxtcol1" data-objid="paltxtcol1" data-palid="1">あ</div>
65+ <div class="paltxtcol paltxtcol2" data-objid="paltxtcol2" data-palid="2">あ</div>
66+ <div class="paltxtcol paltxtcol3" data-objid="paltxtcol3" data-palid="3">あ</div>
67+ <div class="paltxtcol paltxtcol4" data-objid="paltxtcol4" data-palid="4">あ</div>
68+
2769 <script type="text/javascript" src="js/Common.js"></script>
2870 <script type="text/javascript" src="js/Queue.js"></script>
2971 <script type="text/javascript" src="js/CommandObj.js"></script>
--- HtmlDrawApp/HTMLDrawApp/js/CommandMgr.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/js/CommandMgr.js (revision 20)
@@ -35,7 +35,7 @@
3535 function undoCreateTextbox(cmd) {
3636 debuglog("undoCreateTextbox");
3737 var undoCmd = new CCommandObj();
38- undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.msgID);
38+ undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.param3, cmd.param4, cmd.msgID);
3939 return undoCmd;
4040 };
4141 function undoCreateImagebox(cmd) {
@@ -44,7 +44,7 @@
4444 debuglog("undoMovebox");
4545 var undoCmd = new CCommandObj();
4646 // dummy
47- undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.msgID);
47+ undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.param3, cmd.param4, cmd.msgID);
4848 return undoCmd;
4949 };
5050 function undoScalebox(cmd) {
@@ -51,7 +51,7 @@
5151 debuglog("undoScalebox");
5252 var undoCmd = new CCommandObj();
5353 // dummy
54- undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.msgID);
54+ undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.param3, cmd.param4, cmd.msgID);
5555 return undoCmd;
5656 };
5757 function undoRollbox(cmd) {
@@ -58,7 +58,7 @@
5858 debuglog("undoRollbox");
5959 var undoCmd = new CCommandObj();
6060 // dummy
61- undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.msgID);
61+ undoCmd.createCommand(cmdType.request, cmd.from, cmd.to, cmdCmd.deletebox, cmd.param1, cmd.param2, cmd.param3, cmd.param4, cmd.msgID);
6262 return undoCmd;
6363 };
6464 function undoDeletebox(cmd) {
--- HtmlDrawApp/HTMLDrawApp/js/CommandObj.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/js/CommandObj.js (revision 20)
@@ -36,7 +36,7 @@
3636 }
3737
3838 // toには最終到達 moduleを指定する。CommandMgrに要求するわけではないため
39- createCommand(type, from, to, cmd, param1, param2, param3, msgID) {
39+ createCommand(type, from, to, cmd, param1, param2, param3, param4, msgID) {
4040 this.type = type; // 'Request', 'Response', 'Result'
4141 this.msgID = msgID; // msgID from postMessage (1～) 2つ以上のsequenceが同時に走るとき、処理が識別できれば(重複IDにならなければ)なんでもOK
4242 this.from = from;
@@ -45,6 +45,7 @@
4545 this.param1 = param1;
4646 this.param2 = param2;
4747 this.param3 = param3;
48+ this.param4 = param4;
4849
4950 // return checkCommandInfo();
5051
@@ -54,7 +55,7 @@
5455 }
5556
5657 outputLog() {
57- debuglog("commandObj data ------------\ntype=" + this.type + ", msgID=" + this.msgID + ",\nfrom=" + this.from + ", to=" + this.to + ",\ncmd=" + this.cmd + ", praram1=" + this.param1 + ", param2=" + this.param2 + ", param3=" + this.param3 + "\n---------------------------------");
58+ debuglog("commandObj data ------------\ntype=" + this.type + ", msgID=" + this.msgID + ",\nfrom=" + this.from + ", to=" + this.to + ",\ncmd=" + this.cmd + ", praram1=" + this.param1 + ", param2=" + this.param2 + ", param3=" + this.param3 + ", param4=" + this.param4 + "\n---------------------------------");
5859 }
5960
6061 // 設定されたコマンド情報の正当性チェック
--- HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/js/Common.js (revision 20)
@@ -39,6 +39,91 @@
3939 };
4040
4141
42+
43+// Image fileを読み込み、その内容を対象CSSに設定
44+// CSSには "'cssstr1' + fileBlob + 'cssstr2'" が設定される
45+function setImageFileToCSS(
46+ ele, // CSS書き換え対象Element
47+ num, // 書き換える CSS要素番号 (ele.sheet.cssRules[n] ← このnの値)
48+ cssstr1, // CSS書き換え前半文字
49+ cssstr2, // CSS書き換え後半文字
50+ file // 画像ファイルを指している file object
51+) {
52+ // drop fileの読み込み
53+ let reader = new FileReader();
54+ // Image fileを読み込み (画像の幅・高さは取れない。Binary dataを memory上に読むだけなので)
55+ reader.readAsDataURL(file);
56+ reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2);
57+};
58+// Text fileを読み込み、その内容を対象CSSに設定
59+function setTextFileToCSS(
60+ ele, // CSS書き換え対象Element
61+ num, // 書き換える CSS要素番号 (ele.sheet.cssRules[n] ← このnの値)
62+ cssstr1, // CSS書き換え前半文字
63+ cssstr2, // CSS書き換え後半文字
64+ file // Textファイルを指している file object
65+) {
66+ // drop fileの読み込み
67+ let reader = new FileReader();
68+ // Text fileを読み込み
69+ reader.readAsText(file);
70+ reader.onload = setFileToCSS.bind(null, ele, num, cssstr1, cssstr2);
71+};
72+function setFileToCSS( ele, num, cssstr1, cssstr2, evt ){
73+ let blob = evt.target.result;
74+ // blobの適用
75+ let csstext = String(cssstr1) + blob + String(cssstr2);
76+ ele.sheet.deleteRule(num);
77+ ele.sheet.insertRule(csstext, num);
78+};
79+
80+
81+
82+// Drop fileから file objectを取得 (同期処理)
83+// 複数file 非対応。text or image がヒットした時点でcallbackを呼び出す
84+// callback書式(text,image): function(blob)
85+// callback書式(error): function()
86+function getDropFile(evt, callbacktext, callbackimage, callbackerror) {
87+ let ret = false;
88+ let files = evt.dataTransfer.files;
89+ if (!files) {
90+ console.error('dropされた file listが取得できない');
91+ if (null != callbackerror) callbackerror();
92+ return ret;
93+ }
94+ if (files.length <= 0) {
95+ // Fileではないものを Dropされると発生
96+ console.error('drop fileの file list length == 0');
97+ if (null != callbackerror) callbackerror();
98+ return ret;
99+ }
100+ let dropfile = null;
101+ for (var cnt = 0; cnt < files.length; cnt++) {
102+ dropfile = files[cnt];
103+ if (null != dropfile.type.match(/image/)) {
104+
105+ if (null != callbackimage) callbackimage(dropfile);
106+ ret = true;
107+ break;
108+ }
109+ else if (null != dropfile.type.match(/text\/plain/)) {
110+
111+ if (null != callbacktext) callbacktext(dropfile);
112+ ret = true;
113+ break;
114+ }
115+ }
116+
117+ if (false == ret) {
118+ console.error('Drop file error. Drop するファイルは 画像かテキストにしてください\n'
119+ + 'type=' + files[0].type.toString() + ', name=' + files[0].name.toString());
120+ if (null != callbackerror) callbackerror();
121+ }
122+ return ret;
123+};
124+
125+
126+// 保存処理
42127 class SaveFile {
43128 constructor() {
44129 this.filename = null;
--- HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/js/DispObj.js (revision 20)
@@ -177,12 +177,13 @@
177177 + ", border=" + this.DOMobject.style.border);
178178 }
179179
180- scalebox(rect) {
180+ scalebox(rect, fontscale) {
181181 this.x = rect.left;
182182 this.y = rect.top;
183183 this.width = rect.right - rect.left;
184184 this.height = rect.bottom - rect.top;
185185 this.renderFunc.enqueue(this.renderscalebox.bind(this));
186+ this.fontsize = fontscale;
186187 }
187188 renderscalebox() {
188189 this.DOMobject.style.left = this.x.toString() + "px";
@@ -190,6 +191,7 @@
190191 this.DOMobject.style.width = this.width.toString() + "px";
191192 this.DOMobject.style.height = this.height.toString() + "px";
192193 this.DOMobject.style.opacity = this.opacity.toString();
194+ this.DOMobject.style.fontSize = this.fontsize + '%';
193195 }
194196
195197 rollbox(degree) {
@@ -266,7 +268,7 @@
266268
267269 // 移動 Command発行
268270 let cmd = new CCommandObj();
269- cmd.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.movebox, rect, this.ObjID, 4);
271+ cmd.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.movebox, rect, this.ObjID, null, null, 4);
270272 this.debuglog("postToWorker");
271273 window.postToWorker.post(cmd);
272274 }
--- HtmlDrawApp/HTMLDrawApp/js/DisplayField.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/js/DisplayField.js (revision 20)
@@ -27,6 +27,9 @@
2727 this.DOMobject.addEventListener('drop', this.onDrop.bind(this), false);
2828 }
2929
30+
31+ // 操作関数 -----------------------------------
32+
3033 // Mouse eventを処理するObj
3134 setMouseEventObj(mouseMove, mouseUp) {
3235 this.debuglog('setMouseEventObj');
@@ -35,6 +38,8 @@
3538 this.mouseUpFunc = mouseUp;
3639 }
3740
41+
42+
3843 // ブラウザ上への描画 -------------------------
3944 render() {
4045 while (0 < this.renderFunc.size()) {
@@ -53,6 +58,9 @@
5358 }
5459 // ■ マウス移動 (ドラッグ中)
5560 onMouseMove(evt) {
61+ // ★ evt.targetが期待するelementかチェックする必要がある
62+ // ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
63+
5664 if (null != this.mouseMoveFunc) {
5765 this.mouseMoveFunc(evt);
5866 return;
@@ -60,6 +68,9 @@
6068 }
6169 // ■ ドロップ処理
6270 onMouseUp(evt) {
71+ // ★ evt.targetが期待するelementかチェックする必要がある
72+ // ★ 期待するelementではない場合、DOM treeを辿って親elementから該当elementを探す必要がある
73+
6374 if (null != this.mouseUpFunc) {
6475 this.mouseUpFunc(evt);
6576 return;
@@ -80,48 +91,8 @@
8091 evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
8192 evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
8293 evt.preventDefault(); // 要素既定のdefault動作を止める
83- let files = evt.dataTransfer.files;
84- if (!files) {
85- console.error('dropされた file listが取得できない');
86- return ret;
87- }
88- if (files.length <= 0) {
89- // Fileではないものを Dropされると発生
90- console.error('drop fileの file list length == 0');
91- return ret;
92- }
93- let dropfile = null;
94- for (var cnt = 0; cnt < files.length; cnt++) {
95- dropfile = files[cnt];
96- if (null != dropfile.type.match(/image/)) {
9794
98- // 画像box 作成 command要求
99- let rect = new rectData(205, 205, 255, 255);
100- var cmd = new CCommandObj();
101- // Image box 新規作成 command(新規なので objidを指定する箇所はない) 出力先rect, img blob
102- cmd.createCommand(cmdType.request, cmdAddress.DisplayField, cmdAddress.ObjIDMgr, cmdCmd.createImagebox, rect, dropfile, null, 6);
103- window.postToWorker.post(cmd);
104-
105- ret = true;
106- }
107- else if (null != dropfile.type.match(/text\/plain/)) {
108-
109- // Textbox作成 command要求
110- let rect = new rectData(205, 205, 255, 255);
111- var cmd = new CCommandObj();
112- // Text box 新規作成 command(新規なので objidを指定する箇所はない) 出力先rect, txt blob
113- cmd.createCommand(cmdType.request, cmdAddress.DisplayField, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, dropfile, null, 6);
114- window.postToWorker.post(cmd);
115-
116- ret = true;
117- }
118- }
119-
120- if (false == ret) {
121- console.error('Drop file error. Drop するファイルは 画像かテキストにしてください\n'
122- + 'type=' + files[0].type.toString() + ', name=' + files[0].name.toString());
123- }
124- return ret;
95+ getDropFile(evt, this.requestCmdTxtbox.bind(this), this.requestCmdImgbox.bind(this));
12596 }
12697
12798
@@ -128,7 +99,24 @@
12899
129100
130101
102+ // private関数 ----------------------------------------
131103
104+ requestCmdImgbox(dropfile) {
105+ // 画像box 作成 command要求
106+ let rect = new rectData(205, 205, 255, 255);
107+ var cmd = new CCommandObj();
108+ // Image box 新規作成 command(新規なので objidを指定する箇所はない) 出力先rect, img blob
109+ cmd.createCommand(cmdType.request, cmdAddress.DisplayField, cmdAddress.ObjIDMgr, cmdCmd.createImagebox, rect, dropfile, null, null, 6);
110+ window.postToWorker.post(cmd);
111+ }
112+ requestCmdTxtbox(dropfile) {
113+ // Textbox作成 command要求
114+ let rect = new rectData(205, 205, 255, 255);
115+ var cmd = new CCommandObj();
116+ // Text box 新規作成 command(新規なので objidを指定する箇所はない) 出力先rect, txt blob
117+ cmd.createCommand(cmdType.request, cmdAddress.DisplayField, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, dropfile, null, null, 6);
118+ window.postToWorker.post(cmd);
119+ }
132120
133121 // DOM obj → 対応する dispObjへ変換
134122 getDOMtoDispObj(dom) {
--- HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/js/ObjIDMgr.js (revision 20)
@@ -58,10 +58,10 @@
5858 }
5959 }
6060
61- scalebox(id, rect) {
62- this.debuglog("scalebox id=" + id);
61+ scalebox(id, rect, fontscale) {
62+ this.debuglog("scalebox id=" + id + "fontscale=" + fontscale);
6363 if (id < this.ObjIDLen) {
64- this.ObjIDarray[id].scalebox(rect);
64+ this.ObjIDarray[id].scalebox(rect, fontscale);
6565 }
6666 }
6767
--- HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/js/UI_parts.js (revision 20)
@@ -315,9 +315,22 @@
315315 rectFrom.setLTWH(parseInt(this.clingingPartner.style.left), parseInt(this.clingingPartner.style.top), this.scaleStartWidth, this.scaleStartHeight);
316316 rectTo.setLTWH(rectFrom.left, rectFrom.top, this.scaleStartWidth + moveX, this.scaleStartHeight + moveY);
317317
318+ let scaleY = 1.0;
319+ switch (1) {
320+ case 0: // 領域サイズ変更のみ
321+ break;
322+ case 1: // 縦倍率に合わせfont sizeも変更
323+ {
324+ let orgwidth = parseInt(this.clingingPartner.dataset.orgwidth);
325+ let orgheight = parseInt(this.clingingPartner.dataset.orgheight);
326+ scaleY = (this.scaleStartHeight + moveY) / orgheight * 100; // ★さらに初期倍率設定値を掛ける必要がある
327+ }
328+ break;
329+ }
330+
318331 // Scale Command発行
319332 let cmd = new CCommandObj();
320- cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.scalebox, this.clingingPartner.dataset.objid, rectFrom, rectTo, 5);
333+ cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.scalebox, this.clingingPartner.dataset.objid, rectFrom, rectTo, scaleY, 5);
321334 this.debuglog("postToWorker");
322335 window.postToWorker.post(cmd);
323336 }
@@ -355,7 +368,7 @@
355368
356369 // Rotate command発行
357370 let cmd = new CCommandObj();
358- cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.rollbox, this.clingingPartner.dataset.objid, degree, null, 6);
371+ cmd.createCommand(cmdType.request, cmdAddress.Focus, cmdAddress.ObjIDMgr, cmdCmd.rollbox, this.clingingPartner.dataset.objid, degree, null, null, 6);
359372 this.debuglog("postToWorker");
360373 window.postToWorker.post(cmd);
361374 }
--- HtmlDrawApp/HTMLDrawApp/js/main.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/js/main.js (revision 20)
@@ -45,20 +45,21 @@
4545 // --- test code -------
4646 var rect = new rectData( 105, 105, 155, 155 );
4747 var obj1 = new CCommandObj();
48- obj1.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, null, 1 );
48+ obj1.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, null, null, null, 1 );
4949 window.postToWorker.post( obj1 );
5050 // ----------------------
5151 rect.setData( 110, 110, 160, 160 );
5252 var obj3 = new CCommandObj();
53- obj3.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, null, 1 );
53+ obj3.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.createTextbox, rect, null, null, null, 1 );
5454 window.postToWorker.post( obj3 );
5555
5656 // ----------------------
5757 rect.setData( 150, 150, 0, 0 );
5858 var obj4 = new CCommandObj();
59- obj4.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.movebox, rect, 0, 2 );
59+ obj4.createCommand( cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.movebox, rect, 0, null, null, 2 );
6060 window.postToWorker.post( obj4 );
6161
62+ // ----------------------
6263
6364
6465
@@ -65,6 +66,7 @@
6566
6667
6768
69+
6870 // 画像読み込み等は待たずに実行開始
6971 window.startTime = window.performance.now();
7072 window.frameLength = 6.0;
@@ -73,9 +75,12 @@
7375 let nowTime = window.performance.now();
7476 // let frame = Math.floor((nowTime - window.startTime) / (1000.0 / 60.0) % window.frameLength);
7577
78+ // Canvas area描画 (div tag)
7679 window.displayField.render();
80+ // 各表示要素の描画 (div, img tag)
7781 window.ObjIDMgr.renderAll();
78-
82+
83+ // Focus枠, scale, rotate obj描画
7984 window.partsFocus.render();
8085
8186 requestAnimationFrame( renderLoop );
@@ -118,8 +123,8 @@
118123 window.ObjIDMgr.movebox(cmd.param2, cmd.param1);
119124 break;
120125 case cmdCmd.scalebox: // 拡大縮小
121- // objid rect
122- window.ObjIDMgr.scalebox(cmd.param1, cmd.param3);
126+ // objid rect fontscale
127+ window.ObjIDMgr.scalebox(cmd.param1, cmd.param3, cmd.param4);
123128 break;
124129 case cmdCmd.rollbox: // 回転
125130 // objid degree
@@ -166,7 +171,7 @@
166171
167172 // save.saveFileBrowser(filename, displayInfo);
168173 save.saveFileApp(filename, displayInfo, cmp, err);
169- // Anime GIFなどを指定されていると保存に時間がかかる
174+ // Anime GIFなどを指定されていると保存に時間がかかる (禁止にしたい)
170175 // 保存中 dialogが必要
171176 };
172177 function cmp() {
@@ -198,7 +203,7 @@
198203 if (null != focused) {
199204 // Delete command発行
200205 var obj1 = new CCommandObj();
201- obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.deletebox, focused, null, 1);
206+ obj1.createCommand(cmdType.request, cmdAddress.ObjIDMgr, cmdAddress.ObjIDMgr, cmdCmd.deletebox, focused, null, null, null, 1);
202207 window.postToWorker.post(obj1);
203208 }
204209 };
--- HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 19)
+++ HtmlDrawApp/HTMLDrawApp/js/palette.js (revision 20)
@@ -4,34 +4,157 @@
44 this.draggingDOM = null;
55 }
66
7+ debuglog(str) {
8+ debuglog('【CSSPalette】 ' + str);
9+ }
10+
711 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);
12+ // CSS 情報定義先を保持
13+ this.stylebg = document.getElementById('stylepalbg');
14+ this.styletxtcol = document.getElementById('stylepaltxtcol');
15+ this.styleact = document.getElementById('stylepalact');
16+
17+ // palette要素を保持
18+ this.DOMpalbg = document.getElementsByClassName('palbg');
19+ for (let cnt = 0; cnt < this.DOMpalbg.length; cnt++) {
20+ this.DOMpalbg[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
21+ this.DOMpalbg[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
22+ this.DOMpalbg[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
23+ this.DOMpalbg[cnt].addEventListener('drop', this.onDrop.bind(this), false);
1124 }
25+ this.DOMpaltxtcol = document.getElementsByClassName('paltxtcol');
26+ for (let cnt = 0; cnt < this.DOMpaltxtcol.length; cnt++) {
27+ this.DOMpaltxtcol[cnt].addEventListener('mousedown', this.onMouseDown.bind(this), false);
28+ this.DOMpaltxtcol[cnt].addEventListener('dragstart', this.onDragStart.bind(this), false);
29+ this.DOMpaltxtcol[cnt].addEventListener('dragover', this.onDragOver.bind(this), false);
30+ this.DOMpaltxtcol[cnt].addEventListener('drop', this.onDrop.bind(this), false);
31+ }
1232 }
1333
34+ // 操作関数 ----------------------------
35+ definepalbg(
36+ id, // bg palette要素番号
37+ file // 画像を指しているfile object
38+ ) {
39+ let cssstr1 = '.palbg' + id + ' { background-image: url(';
40+ let cssstr2 = '); }';
41+ setImageFileToCSS(this.stylebg, id, cssstr1, cssstr2, file);
42+ }
1443
44+ // text color ('#000000, rgba(0,0,0,0) など)
45+ definepaltxtcolText(
46+ id, // txtcol palette要素番号
47+ file // Textを指しているfile object
48+ ) {
49+ let cssstr1 = '.paltxtcol' + id + ' {\ncolor: ';
50+ let cssstr2 = ';\n}';
51+ setTextFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file);
52+ };
53+ // 指定された画像を font colorとして設定する
54+ definepaltxtcolImage(
55+ id, // txtcol palette要素番号
56+ file // 画像を指しているfile object
57+ ) {
58+let cssstr1 = '\
59+.paltxtcol' + id + ' {\n\
60+background: url(';
1561
62+let cssstr2 = '\
63+);\n\
64+background-size: contain;\n\
65+color: #fff;\n\
66+-webkit-text-fill-color: transparent;\n\
67+-webkit-background-clip: text;\n\
68+}';
1669
70+ setImageFileToCSS(this.styletxtcol, id, cssstr1, cssstr2, file);
71+ }
1772
73+
74+
75+
76+
77+ // Event handler -----------------------
78+
79+ // Drag&Drop event : Application外からのfileのやり取り
80+ // Mouse event : Elementに対する操作
81+
82+ onDragStart(evt) {
83+ evt.preventDefault();
84+ }
85+ onDragOver(evt) {
86+ evt.preventDefault();
87+ evt.dataTransfer.dropEffect = "move";
88+ }
89+ onDrop(evt) {
90+ this.debuglog('onDrop');
91+ evt.stopPropagation(); // event伝播を自分のところで止める(上位に行かなくなる)
92+ evt.stopImmediatePropagation(); // 処理中要素の他のevent listenerを止める
93+ evt.preventDefault(); // 要素既定のdefault動作を止める
94+
95+
96+ let palid = 0;
97+ // drop対象 elementを特定
98+ let objid = evt.target.dataset.objid;
99+ if (null != objid.match(/^palbg/)) {
100+ palid = parseInt(evt.target.dataset.palid);
101+ getDropFile(evt, null, this.definepalbg.bind(this, palid));
102+ }
103+ else if (null != objid.match(/^paltxtcol/)) {
104+ palid = parseInt(evt.target.dataset.palid);
105+ getDropFile(evt, this.definepaltxtcolText.bind(this, palid), this.definepaltxtcolImage.bind(this, palid));
106+ }
107+
108+ }
109+
110+
111+
18112 onMouseDown(evt) {
19113 this.draggingDOM = evt.target;
20- let palid = evt.target.dataset.palid;
21- let dragclass = evt.target.dataset.value;
22114
23115 // Mouse eventをDisplayFieldからCSSPalに渡してもらうように設定
24116 window.displayField.setMouseEventObj(this.mouseMove.bind(this), this.mouseUp.bind(this));
25117 }
26118 mouseMove(evt) {
119+ if (null == this.draggingDOM) return;
120+
121+
27122 }
28123 mouseUp(evt) {
124+ let palobjid = this.draggingDOM.dataset.objid;
125+ let palid = this.draggingDOM.dataset.palid;
126+
127+ // Drag中 element情報をクリア
128+ this.draggingDOM = null;
29129 // Mouse event callback設定をクリア
30130 window.displayField.setMouseEventObj(null, null);
31131
32- let dropele = document.elementFromPoint(evt.pageX, evt.pageY);
33- dropele.classList.remove();
34- dropele.classList.add(this.draggingDOM.dataset.value);
132+ // Drag中 palette elementから target element へ CSS classを追加する
133+ // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
134+
135+ this.replaceCSSclassToElement(palobjid, evt.target);
35136 }
36137
138+ // Target element へ CSS classを追加する
139+ // 同じ種類のCSS class(Text color, BG imgなど)が既にある場合は上書き
140+ replaceCSSclassToElement(
141+ CSSname, // 追加(上書き)する CSSclass名称文字列
142+ targetEle // 追加先 element
143+ ) {
144+ // Drag中の palette elementから 追加する CSS classを取得 (objidと同じ名前にしている)
145+ let result = /[a-zA-Z]+/.exec(CSSname); // objid末の数字を除く
146+ let DraggingPaletteType = result[0];
147+
148+ // Drop target elementに 同じ種類の CSS classがないかチェック
149+ let reg = new RegExp(DraggingPaletteType + '[0-9]+'); // 数字は1回以上発生する。数字なしは別class
150+ result = reg.exec(targetEle.className);
151+ let DropEleOldClass = (null != result) ? result[0] : null;
152+
153+ // 同じ種類の CSS classがあれば削除
154+ if (null != DropEleOldClass)
155+ targetEle.classList.remove(DropEleOldClass);
156+
157+ // Drop target elementに Drag elementの CSS class定義を追加
158+ targetEle.classList.add(CSSname);
159+ }
37160 } // class CSSPalette
--- HtmlDrawApp/doc/FontColor_Red.txt (nonexistent)
+++ HtmlDrawApp/doc/FontColor_Red.txt (revision 20)
@@ -0,0 +1 @@
1+#ff0000
\ No newline at end of file
--- HtmlDrawApp/doc/Iframe埋め込み.txt (nonexistent)
+++ HtmlDrawApp/doc/Iframe埋め込み.txt (revision 20)
@@ -0,0 +1 @@
1+<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fpermalink.php%3Fstory_fbid%3D599752286874230%26id%3D567480860101373&width=500" width="500" height="248" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
\ No newline at end of file
--- HtmlDrawApp/doc/JavaScript埋め込み.txt (nonexistent)
+++ HtmlDrawApp/doc/JavaScript埋め込み.txt (revision 20)
@@ -0,0 +1 @@
1+<script type="text/javascript" src="https://osdn.net/users/takoyaki_umaaaa/pastebin/4431?action=js_embed"></script>
\ No newline at end of file