楼层色调颜色选择器

_server/editor_blockly.js

@@ -1169,9 +1169,8 @@ Blockly.FieldColour.prototype.createWidget_ = function() {
 
     setTimeout(function () {
         document.getElementById("colorPicker").value = getValue();
-        window.jsColorPicker.confirm = setValue;
         // 设置位置
-        triggerColorPicker(Blockly.WidgetDiv.DIV.style.left, Blockly.WidgetDiv.DIV.style.top);
+        openColorPicker(Blockly.WidgetDiv.DIV.style.left, Blockly.WidgetDiv.DIV.style.top, setValue);
     });
 
     return document.createElement('table');

_server/editor_table.js

@@ -412,6 +412,7 @@ editor_table_wrapper = function (editor) {
         if (cobj._type === 'event') editor_blockly.import(guid, { type: cobj._event });
         if (cobj._type === 'textarea') editor_multi.import(guid, { lint: cobj._lint, string: cobj._string });
         if (cobj._type === 'material') editor.table.selectMaterial(input, cobj);
+        if (cobj._type === 'color') editor.table.selectColor(input);
     }
 
     /**
@@ -426,6 +427,7 @@ editor_table_wrapper = function (editor) {
             if (cobj._type === 'event') editor_blockly.import(guid, { type: cobj._event });
             if (cobj._type === 'textarea') editor_multi.import(guid, { lint: cobj._lint, string: cobj._string });
             if (cobj._type === 'material') editor.table.selectMaterial(input, cobj);
+            if (cobj._type === 'color') editor.table.selectColor(input);
         } else if (editor_mode.doubleClickMode === 'add') {
             editor_mode.doubleClickMode = 'change';
             editor.table.addfunc(guid, obj, commentObj, thisTr, input, field, cobj, modeNode)
@@ -446,6 +448,21 @@ editor_table_wrapper = function (editor) {
         })
     }
 
+    editor_table.prototype.selectColor = function (input) {
+        if (input.value != null) {
+            var str = input.value.toString().replace(/[^\d.,]/g, '');
+            if (/^(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)?$/.test(str)) {            
+                document.getElementById('colorPicker').value = str;
+            }
+        }
+        var boundingBox = input.getBoundingClientRect();
+        openColorPicker(boundingBox.x, boundingBox.y + boundingBox.height, function (value) {
+            value = value.replace(/[^\d.,]/g, '');
+            input.value = '[' + value +']';
+            input.onchange();
+        })
+    }
+
     /**
      * 删除表格项
      */

_server/table/comment.js

@@ -464,7 +464,7 @@ var comment_c456ea59_6018_45ef_8bcc_211a24c627dc = {
 						},
 						"color": {
 							"_leaf": true,
-							"_type": "textarea",
+							"_type": "color",
 							"_docs": "色调",
 							"_data": "该层的默认画面色调。本项可不写（代表无色调），如果写需要是一个RGBA数组如[255,0,0,0.3]"
 						},

_server/thirdparty/jsColor.js

@@ -121,7 +121,7 @@
                             colorPickers.current = colorPickers[index];
                         }
                     },
-                    createListener = function(e) {
+                    createListener = function() {
                         elm = document.getElementById("colorPicker");
                         var input = elm,
                             position = window.ColorPicker.getOrigin(input),
@@ -268,9 +268,19 @@ jsColorPicker('input.color', {
     size: 1,
 });
 
-function openColorFromButton() {
+function openColorPicker(px, py, callback) {
+    window.jsColorPicker.confirm = callback;
+    var colorPanel = document.getElementById('colorPanel');
+    if (colorPanel.style.display=='none' && px != null && py != null) {
+        colorPanel.style.display = "inline-block";
+        colorPanel.style.left = px + 'px';
+        colorPanel.style.top = py + 'px';
+        window.jsColorPicker.create();
+    }
+    else {
+        colorPanel.style.display = 'none';
         delete window.jsColorPicker.confirm;
-    triggerColorPicker('414px', '53px');
+    }
 }
 
 function confirmColor() {
@@ -287,22 +297,8 @@ function confirmColor() {
         colorPicker.select();
         document.execCommand("Copy");
     }
-
-    triggerColorPicker();
-}
-
-function triggerColorPicker(left, top) {
-    var colorPanel = document.getElementById('colorPanel');
-    if (colorPanel.style.display=='none' && left && top) {
-        colorPanel.style.display = "inline-block";
-        colorPanel.style.left = left;
-        colorPanel.style.top = top;
-        window.jsColorPicker.create();
-    }
-    else {
     colorPanel.style.display = 'none';
     delete window.jsColorPicker.confirm;
-    }
 }
 
 // ------ AutoCompletion ------

editor-mobile.html

@@ -228,10 +228,6 @@
                     <div class="searchLogo"></div>
                     <input type="text" id="searchBlock" placeholder="搜索图块"/>
                 </div>
-                <div id="colorPanel" class="cpPanel" style="display: none">
-                    <input class="color" id="colorPicker" value="255,215,0,1"/>
-                    <button onclick="confirmColor()">确定</button>
-                </div>
                 <button class="cpPanel" onclick="editor_blockly.selectPoint()">地图选点</button>
                 <button class="cpPanel" onclick="editor.uievent.searchUsedFlags()" style="margin-left:5px">变量出现位置搜索</button>
                 <input type="checkbox" class="cpPanel" id="blocklyReplace" onchange="editor_blockly.triggerReplace()" style="margin-left: 10px" />
@@ -249,6 +245,10 @@
             </div>
         </div>
     </div>
+    <div id="colorPanel" class="cpPanel" style="display: none">
+        <input class="color" id="colorPicker" value="255,215,0,1"/>
+        <button onclick="confirmColor()">确定</button>
+    </div>
     <div id="left7" style="z-index:-1;opacity: 0;"><!-- 多行文本编辑器 -->
         <button onclick="editor_multi.confirm()">确认</button>
         <button onclick="editor_multi.cancel()">取消</button>

editor.html

@@ -223,10 +223,6 @@
                     <div class="searchLogo"></div>
                     <input type="text" id="searchBlock" placeholder="搜索图块"/>
                 </div>
-                <div id="colorPanel" class="cpPanel" style="display: none">
-                    <input class="color" id="colorPicker" value="255,215,0,1"/>
-                    <button onclick="confirmColor()">确定</button>
-                </div>
                 <button class="cpPanel" onclick="editor_blockly.selectPoint()" style="margin-left:5px">地图选点</button>
                 <button class="cpPanel" onclick="editor.uievent.searchUsedFlags()" style="margin-left:5px">变量出现位置搜索</button>
                 <input type="checkbox" class="cpPanel" id="blocklyReplace" onchange="editor_blockly.triggerReplace()" style="margin-left: 10px" />
@@ -244,6 +240,10 @@
             </div>
         </div>
     </div>
+    <div id="colorPanel" class="cpPanel" style="display: none">
+        <input class="color" id="colorPicker" value="255,215,0,1"/>
+        <button onclick="confirmColor()">确定</button>
+    </div>
     <div id="left7" style="z-index:-1;opacity: 0;"><!-- 多行文本编辑器 -->
         <button onclick="editor_multi.confirm()">确认</button>
         <button onclick="editor_multi.cancel()">取消</button>