Merge pull request #289 from zhaouv/colorPicker

colorPicker - blockly binding

_server/blockly/MotaAction.g4

@@ -384,13 +384,13 @@ return code;
 */;
 
 setText_s
-    :   '设置剧情文本的属性' '位置' SetTextPosition_List '偏移像素' EvalString? BGNL? '标题颜色' EvalString? '正文颜色' EvalString? '背景色' EvalString? '粗体' B_1_List BGNL? '标题字体大小' EvalString? '正文字体大小' EvalString? '打字间隔' EvalString? Newline
+    :   '设置剧情文本的属性' '位置' SetTextPosition_List '偏移像素' EvalString? BGNL? '标题颜色' EvalString? Colour '正文颜色' EvalString? Colour '背景色' EvalString? Colour BGNL? '粗体' B_1_List '标题字体大小' EvalString? '正文字体大小' EvalString? '打字间隔' EvalString? Newline
     
 
 /* setText_s
 tooltip : setText：设置剧情文本的属性,颜色为RGB三元组或RGBA四元组,打字间隔为剧情文字添加的时间间隔,为整数或不填
 helpUrl : https://h5mota.com/games/template/docs/#/event?id=settext%EF%BC%9A%E8%AE%BE%E7%BD%AE%E5%89%A7%E6%83%85%E6%96%87%E6%9C%AC%E7%9A%84%E5%B1%9E%E6%80%A7
-default : [null,"","","","",null,"","",""]
+default : [null,"","",null,"",null,"",null,null,"","",""]
 SetTextPosition_List_0 =SetTextPosition_List_0==='null'?'': ', "position": "'+SetTextPosition_List_0+'"';
 var colorRe = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(,0(\.\d+)?|,1)?$/;
 if (EvalString_0) {
@@ -1118,13 +1118,13 @@ return code;
 */;
 
 setFg_0_s
-    :   '更改画面色调' EvalString '动画时间' Int? '不等待执行完毕' Bool Newline
+    :   '更改画面色调' EvalString Colour '动画时间' Int? '不等待执行完毕' Bool Newline
     
 
 /* setFg_0_s
 tooltip : setFg: 更改画面色调,动画时间可不填
 helpUrl : https://h5mota.com/games/template/docs/#/event?id=setfg%EF%BC%9A%E6%9B%B4%E6%94%B9%E7%94%BB%E9%9D%A2%E8%89%B2%E8%B0%83
-default : ["255,255,255,1",500,false]
+default : ["255,255,255,1",'rgba(255,255,255,1)',500,false]
 colour : this.soundColor
 var colorRe = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(,0(\.\d+)?|,1)?$/;
 if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
@@ -1150,12 +1150,12 @@ return code;
 */;
 
 screenFlash_s
-    :   '画面闪烁' EvalString '单次时间' Int '执行次数' Int? '不等待执行完毕' Bool Newline
+    :   '画面闪烁' EvalString Colour '单次时间' Int '执行次数' Int? '不等待执行完毕' Bool Newline
 
 /* screenFlash_s
 tooltip : screenFlash: 画面闪烁,动画时间可不填
 helpUrl : https://h5mota.com/games/template/docs/#/event?id=screenFlash%EF%BC%9A%E7%94%BB%E9%9D%A2%E9%97%AA%E7%83%81
-default : ["255,255,255,1",500,1,false]
+default : ["255,255,255,1",'rgba(255,255,255,1)',500,1,false]
 colour : this.soundColor
 var colorRe = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d),(25[0-5]|2[0-4]\d|1\d\d|[1-9]\d|\d)(,0(\.\d+)?|,1)?$/;
 if (!colorRe.test(EvalString_0))throw new Error('颜色格式错误,形如:0~255,0~255,0~255,0~1');
@@ -1729,6 +1729,14 @@ Global_Value_List
     :   '血网伤害'|'中毒伤害'|'衰弱效果'|'红宝石效果'|'蓝宝石效果'|'绿宝石效果'|'红血瓶效果'|'蓝血瓶效果'|'黄血瓶效果'|'绿血瓶效果'|'破甲比例'|'反击比例'|'净化比例'|'仇恨增加值'|'行走速度'|'动画时间'|'楼层切换时间'
     /*Global_Value_List ['lavaDamage','poisonDamage','weakValue', 'redJewel', 'blueJewel', 'greenJewel', 'redPotion', 'bluePotion', 'yellowPotion', 'greenPotion', 'breakArmor', 'counterAttack', 'purify', 'hatred', 'moveSpeed', 'animateSpeed', 'floorChangeTime']*/;
 
+Colour
+    :   'sdeirughvuiyasdeb'+ //为了被识别为复杂词法规则
+    ;
+
+Angle
+    :   'sdeirughvuiyasdeb'+ //为了被识别为复杂词法规则
+    ;
+
 Bool:   'TRUE' 
     |   'FALSE'
     ;
@@ -1970,7 +1978,7 @@ ActionParser.prototype.parseAction = function() {
       if (!/^\w+\.png$/.test(data.background))
         data.background=setTextfunc(data.background);
       this.next = MotaActionBlocks['setText_s'].xmlText([
-        data.position,data.offset,data.title,data.text,data.background,data.bold,data.titlefont,data.textfont,data.time,this.next]);
+        data.position,data.offset,data.title,`rgba(${data.title})`,data.text,`rgba(${data.text})`,data.background,`rgba(${data.background})`,data.bold,data.titlefont,data.textfont,data.time,this.next]);
       break;
     case "tip":
       this.next = MotaActionBlocks['tip_s'].xmlText([
@@ -2142,7 +2150,7 @@ ActionParser.prototype.parseAction = function() {
     case "setFg": // 颜色渐变
       if(this.isset(data.color)){
         this.next = MotaActionBlocks['setFg_0_s'].xmlText([
-          data.color,data.time||0,data.async||false,this.next]);
+          data.color,`rgba(${data.color})`,data.time||0,data.async||false,this.next]);
       } else {
         this.next = MotaActionBlocks['setFg_1_s'].xmlText([
           data.time||0,data.async||false,this.next]);
@@ -2150,7 +2158,7 @@ ActionParser.prototype.parseAction = function() {
       break;
     case "screenFlash": // 画面闪烁
         this.next = MotaActionBlocks['screenFlash_s'].xmlText([
-          data.color,data.time||500,data.times||1,data.async||false,this.next]);
+          data.color,`rgba(${data.color})`,data.time||500,data.times||1,data.async||false,this.next]);
       break;
     case "setWeather": // 更改天气
       this.next = MotaActionBlocks['setWeather_s'].xmlText([

_server/colorPicker/jsColor.js

@@ -286,3 +286,59 @@ function copyColor() {
     document.execCommand("Copy");
     doHide();
 }
+
+Blockly.FieldColour.prototype.createWidget_ = function() {
+    // Create the palette using Closure.
+    var picker = new goog.ui.ColorPicker();
+    picker.setSize(this.columns_ || Blockly.FieldColour.COLUMNS);
+    picker.setColors(this.colours_ || Blockly.FieldColour.COLOURS);
+    var div = Blockly.WidgetDiv.DIV;
+    picker.render(div);
+    picker.setSelectedColor(this.getValue());
+
+    Blockly.WidgetDiv.hide();
+
+    self=this;
+    var pb=self.sourceBlock_
+    var args = MotaActionBlocks[pb.type].args
+    var targetf=args[args.indexOf(self.name)-1]
+
+    var getValue=function(){
+        return self.getValue() // css颜色
+        // 也可以用 pb.getFieldValue(targetf) 获得颜色块左边的域的内容
+    }
+
+    var getPosition=function(){
+        return [
+            Blockly.WidgetDiv.DIV.style.left,
+            Blockly.WidgetDiv.DIV.style.top,
+            Blockly.WidgetDiv.DIV.style.zIndex
+        ] // 画在这个位置刚好是颜色块下面
+    }
+
+    var setValue=function(newValue){ // css颜色
+        self.setValue(newValue)
+        var c=new Colors();
+        c.setColor(newValue)
+        var rgbatext=`${c.colors.webSmart.r},${c.colors.webSmart.g},${c.colors.webSmart.b},${c.colors.alpha}` // 转成r,g,b,a文本
+        pb.setFieldValue(rgbatext, targetf) // 放在颜色块左边的域中
+    }
+
+    // 没看出来这个插件要怎么通过 getValue getPosition setValue 绑定
+
+    // 创建一个 input[type=color] 来选颜色
+
+    var a = document.createElement('input');
+    a.setAttribute('type','color')
+    a.setAttribute('value',getValue())
+    a.oninput=function(){
+        setValue(a.value)
+    }
+    a.dispatchEvent(new MouseEvent("click", {
+        "view": window,
+        "bubbles": true,
+        "cancelable": false
+    }));
+
+    return picker;
+};