From 176e5a97980f4610ff6362f7ae1162aeb5e6255c Mon Sep 17 00:00:00 2001 From: ckcz123 Date: Mon, 15 Jun 2020 17:22:40 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0blockly=E5=88=B0=E6=9C=80?= =?UTF-8?q?=E6=96=B0;=E4=BF=AE=E5=A4=8D=E5=A4=8D=E5=88=B6=E7=B2=98?= =?UTF-8?q?=E8=B4=B4=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _server/css/editor_color.css | 7 - _server/css/editor_color_dark.css | 10 +- _server/editor_blockly.js | 399 ++++++++++++------------------ _server/editor_blocklyconfig.js | 4 +- _server/editor_mappanel.js | 4 - editor-mobile.html | 1 - editor.html | 1 - project/floors/sample3.js | 17 +- 8 files changed, 175 insertions(+), 268 deletions(-) diff --git a/_server/css/editor_color.css b/_server/css/editor_color.css index 85977b29..613d337c 100644 --- a/_server/css/editor_color.css +++ b/_server/css/editor_color.css @@ -202,13 +202,6 @@ textarea[disabled] { /** ======== blockly 相关 ======== */ -/** -blockly图块的的黑暗程度，用opacity表示，0到1之间； -0表示表示纯亮色，1表示纯黑色 -*/ -#blocklyDarkScale { - opacity: 0; -} /*魔改*/ .blocklyTreeLabel { diff --git a/_server/css/editor_color_dark.css b/_server/css/editor_color_dark.css index 73601e6c..ea9c0211 100644 --- a/_server/css/editor_color_dark.css +++ b/_server/css/editor_color_dark.css @@ -166,8 +166,8 @@ select { background-color: #33333c; } -.gameCanvas, img { - filter: brightness(0.75); +.gameCanvas, img, svg { + filter: brightness(0.65); } /** 搜索事件块的输入框 */ @@ -298,11 +298,6 @@ blockly图块的的黑暗程度，用opacity表示，0到1之间； 0表示表示纯亮色，1表示纯黑色 */ - -#blocklyDarkScale { - opacity: 0.3; -} - /** 如果需要blockly深色模式，请有选择性视情况取消注释下面几条；具体功能自行研究 */ /*somethingSOMETHING*/ @@ -372,7 +367,6 @@ input.blocklyHtmlInput { background-color: black; } - /** ======== Blockly中自动补全相关 ======== */ .awesomplete > ul { background: #33333c; diff --git a/_server/editor_blockly.js b/_server/editor_blockly.js index b14adfe2..3a678b7a 100644 --- a/_server/editor_blockly.js +++ b/_server/editor_blockly.js @@ -689,99 +689,121 @@ editor_blockly = function () { editor_blockly.completeItems = []; - Blockly.BlockSvg.prototype.updateColour_origin = Blockly.BlockSvg.prototype.updateColour; - Blockly.BlockSvg.prototype.setShadowColour__origin = Blockly.BlockSvg.prototype.setShadowColour_; - Blockly.BlockSvg.prototype.setBorderColour__origin = Blockly.BlockSvg.prototype.setBorderColour_; + editor_blockly.onTextFieldCreate = function (self, htmlInput) { + var pb=self.sourceBlock_ + var args = MotaActionBlocks[pb.type].args + var targetf=args[args.indexOf(self.name)+1] - editor_blockly.setDarkScale=function () { - var computedStyle = window.getComputedStyle(document.getElementById('blocklyDarkScale')) || {}; - var globalScale = parseFloat(computedStyle.opacity) || 0; + // ------ colour - if (globalScale > 0) { - // todo: fix to suit the new blockly version - // ref https://github.com/google/blockly/tree/52b818ed67c5bfa7fd73edf2b067649b8b1f447b - Blockly.BlockSvg.prototype.updateColour = function() { - if (this.disabled) { - // Disabled blocks don't have colour. - return; + if(targetf && targetf.slice(0,7)==='Colour_'){ + var inputDom = htmlInput; + // var getValue=function(){ // 获得自己的字符串 + // return pb.getFieldValue(self.name); + // } + var setValue = function(newValue){ // 设置右边颜色块的css颜色 + pb.setFieldValue(newValue, targetf) + } + // 给inputDom绑事件 + inputDom.oninput=function(){ + var value=inputDom.value + if(/^[0-9 ]+,[0-9 ]+,[0-9 ]+(,[0-9. ]+)?$/.test(value)){ + setValue('rgba('+value+')') } - var hexColour = this.getColour(); - var colourSecondary = this.getColourSecondary(); - var colourTertiary = this.getColourTertiary(); - var rgb = goog.color.darken(goog.color.hexToRgb(hexColour),globalScale); - hexColour = goog.color.rgbArrayToHex(rgb); - - if (this.isShadow()) { - hexColour = this.setShadowColour_(rgb, colourSecondary); - } else { - this.setBorderColour_(rgb, colourTertiary); + } + } + else { + + htmlInput.onkeydown = function (e) { + if (e.keyCode == 13 && awesomplete.opened && awesomplete.selected) { + e.stopPropagation(); + e.stopImmediatePropagation(); + e.preventDefault(); + awesomplete.select(); + return false; } - this.svgPath_.setAttribute('fill', hexColour); - - var icons = this.getIcons(); - for (var i = 0; i < icons.length; i++) { - icons[i].updateColour(); + } + + // --- awesomplete + var awesomplete = new Awesomplete(htmlInput, { + minChars: 1, + maxItems: 12, + autoFirst: true, + replace: function (text) { + text = text.toString(); + var index = text.indexOf("（"); + if (index >= 0) text = text.substring(0, index); + var value = this.input.value, index = this.input.selectionEnd; + if (index == null) index = value.length; + if (index < awesomplete.prefix.length) index = awesomplete.prefix.length; + var str = value.substring(0, index - awesomplete.prefix.length) + text + value.substring(index); + this.input.value = str; + pb.setFieldValue(str, self.name); + self.forceRerender(); + self.resizeEditor_(); + index += text.length - awesomplete.prefix.length; + this.input.setSelectionRange(index, index); + + editor_blockly.completeItems = editor_blockly.completeItems.filter(function (x) { + return x != text; + }); + editor_blockly.completeItems.unshift(text); + }, + filter: function () {return true;}, + item: function (text, input) { + var li = document.createElement("li"); + li.setAttribute("role", "option"); + li.setAttribute("aria-selected", "false"); + input = awesomplete.prefix.trim(); + if (input != "") text = text.replace(new RegExp("^"+input, "i"), "$&"); + li.innerHTML = text; + return li; + }, + sort: function (a, b) { + a = a.toString(); b = b.toString(); + var ia = editor_blockly.completeItems.indexOf(a), ib = editor_blockly.completeItems.indexOf(b); + if (ia < 0) ia = editor_blockly.completeItems.length; + if (ib < 0) ib = editor_blockly.completeItems.length; + if (ia != ib) return ia - ib; + if (a.length != b.length) return a.length - b.length; + return a < b ? -1 : 1; } - - // Bump every dropdown to change its colour. - // TODO (#1456) - for (var x = 0, input; input = this.inputList[x]; x++) { - for (var y = 0, field; field = input.fieldRow[y]; y++) { - field.forceRerender(); + }); + + htmlInput.oninput = function () { + var value = htmlInput.value, index = htmlInput.selectionEnd; + if (index == null) index = value.length; + value = value.substring(0, index); + // cal prefix + awesomplete.prefix = value; + for (var i = index - 1; i>=0; i--) { + var c = value.charAt(i); + if (!/^[a-zA-Z0-9_\u4E00-\u9FCC]$/.test(c)) { + awesomplete.prefix = value.substring(i+1); + break; } } + + var list = editor_blockly.getAutoCompletions(value, pb.type, self.name); + + awesomplete.list = list; + awesomplete.ul.style.marginLeft = getCaretCoordinates(htmlInput, htmlInput.selectionStart).left - + htmlInput.scrollLeft - 20 + "px"; + awesomplete.evaluate(); } - - // todo: fix to suit the new blockly version - // ref https://github.com/google/blockly/tree/52b818ed67c5bfa7fd73edf2b067649b8b1f447b - Blockly.BlockSvg.prototype.setShadowColour_ = function(a, b) { - if (b) { - this.svgPathLight_.style.display = "none"; - this.svgPathDark_.style.display = "none"; - this.svgPath_.setAttribute("fill", b); - var c = b - } else - a = goog.color.darken(a, .4), - c = goog.color.rgbArrayToHex(a), - this.svgPathLight_.style.display = "none", - this.svgPathDark_.setAttribute("fill", c); - return c - } - - // todo: fix to suit the new blockly version - // ref https://github.com/google/blockly/tree/52b818ed67c5bfa7fd73edf2b067649b8b1f447b - Blockly.BlockSvg.prototype.setBorderColour_ = function(a, b) { - if (b) - this.svgPathLight_.setAttribute("stroke", "none"), - this.svgPathDark_.setAttribute("fill", "none"), - this.svgPath_.setAttribute("stroke", b); - else { - this.svgPathLight_.style.display = ""; - var c = goog.color.rgbArrayToHex(goog.color.darken(a, .2)) - , d = goog.color.rgbArrayToHex(goog.color.lighten(a, .3)); - this.svgPathLight_.setAttribute("stroke", c); - this.svgPathDark_.setAttribute("fill", d); - this.svgPath_.setAttribute("stroke", "none") - } - - } - } else { - Blockly.BlockSvg.prototype.updateColour = Blockly.BlockSvg.prototype.updateColour_origin; - Blockly.BlockSvg.prototype.setShadowColour_ = Blockly.BlockSvg.prototype.setShadowColour__origin; - Blockly.BlockSvg.prototype.setBorderColour_ = Blockly.BlockSvg.prototype.setBorderColour__origin; + + awesomplete.container.style.width = "100%"; + + window.awesomplete = awesomplete; } } - editor_blockly.setDarkScale(); - return editor_blockly; } // --- modify Blockly -// todo: fix to suit the new blockly version -// ref https://github.com/google/blockly/tree/52b818ed67c5bfa7fd73edf2b067649b8b1f447b -Blockly.FieldColour.prototype.createWidget_ = function() { +Blockly.FieldColour.prototype.showEditor_ = function() { Blockly.WidgetDiv.hide(); // console.log('here') @@ -802,189 +824,90 @@ Blockly.FieldColour.prototype.createWidget_ = function() { 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].join(","); - pb.setFieldValue(rgbatext, targetf) // 放在颜色块左边的域中 + pb.setFieldValue(newValue.replace("rgba(","").replace(")",""), targetf) // 放在颜色块左边的域中 } setTimeout(function () { document.getElementById("colorPicker").value = getValue(); // 设置位置 - openColorPicker(Blockly.WidgetDiv.DIV.style.left.replace(/[^\d.]/g, ''), Blockly.WidgetDiv.DIV.style.top.replace(/[^\d.]/g, ''), setValue); + var scaledBBox = self.getScaledBBox(); + openColorPicker(scaledBBox.left, scaledBBox.bottom, setValue); }); return document.createElement('table'); }; -// todo: fix to suit the new blockly version -// ref https://github.com/google/blockly/tree/52b818ed67c5bfa7fd73edf2b067649b8b1f447b +Blockly.FieldColour.prototype.setValue = function (colour) { + this.doValueUpdate_(colour); +} + Blockly.FieldTextInput.prototype.showInlineEditor_ = function(quietInput) { - Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL, this.widgetDispose_()); - var div = Blockly.WidgetDiv.DIV; - // Create the input. - var htmlInput = - goog.dom.createDom(goog.dom.TagName.INPUT, 'blocklyHtmlInput'); - htmlInput.setAttribute('spellcheck', this.spellcheck_); - var fontSize = - (Blockly.FieldTextInput.FONTSIZE * this.workspace_.scale) + 'pt'; - div.style.fontSize = fontSize; - htmlInput.style.fontSize = fontSize; - - Blockly.FieldTextInput.htmlInput_ = htmlInput; - div.appendChild(htmlInput); - - htmlInput.value = htmlInput.defaultValue = this.text_; - htmlInput.oldValue_ = null; - - // console.log('here') - var self=this; - var pb=self.sourceBlock_ - var args = MotaActionBlocks[pb.type].args - var targetf=args[args.indexOf(self.name)+1] - - // ------ colour - - if(targetf && targetf.slice(0,7)==='Colour_'){ - var inputDom = htmlInput; - // var getValue=function(){ // 获得自己的字符串 - // return pb.getFieldValue(self.name); - // } - var setValue = function(newValue){ // 设置右边颜色块的css颜色 - pb.setFieldValue(newValue, targetf) - } - // 给inputDom绑事件 - inputDom.oninput=function(){ - var value=inputDom.value - if(/^[0-9 ]+,[0-9 ]+,[0-9 ]+(,[0-9. ]+)?$/.test(value)){ - setValue('rgba('+value+')') - } - } - } - else { - - htmlInput.onkeydown = function (e) { - if (e.keyCode == 13 && awesomplete.opened && awesomplete.selected) { - e.stopPropagation(); - e.stopImmediatePropagation(); - e.preventDefault(); - awesomplete.select(); - return false; - } - } - - // --- awesomplete - var awesomplete = new Awesomplete(htmlInput, { - minChars: 1, - maxItems: 12, - autoFirst: true, - replace: function (text) { - text = text.toString(); - var index = text.indexOf("（"); - if (index >= 0) text = text.substring(0, index); - var value = this.input.value, index = this.input.selectionEnd; - if (index == null) index = value.length; - if (index < awesomplete.prefix.length) index = awesomplete.prefix.length; - var str = value.substring(0, index - awesomplete.prefix.length) + text + value.substring(index); - this.input.value = str; - pb.setFieldValue(str, self.name); - index += text.length - awesomplete.prefix.length; - this.input.setSelectionRange(index, index); - - editor_blockly.completeItems = editor_blockly.completeItems.filter(function (x) { - return x != text; - }); - editor_blockly.completeItems.unshift(text); - }, - filter: function () {return true;}, - item: function (text, input) { - var li = document.createElement("li"); - li.setAttribute("role", "option"); - li.setAttribute("aria-selected", "false"); - input = awesomplete.prefix.trim(); - if (input != "") text = text.replace(new RegExp("^"+input, "i"), "$&"); - li.innerHTML = text; - return li; - }, - sort: function (a, b) { - a = a.toString(); b = b.toString(); - var ia = editor_blockly.completeItems.indexOf(a), ib = editor_blockly.completeItems.indexOf(b); - if (ia < 0) ia = editor_blockly.completeItems.length; - if (ib < 0) ib = editor_blockly.completeItems.length; - if (ia != ib) return ia - ib; - if (a.length != b.length) return a.length - b.length; - return a < b ? -1 : 1; - } - }); - - htmlInput.oninput = function () { - var value = htmlInput.value, index = htmlInput.selectionEnd; - if (index == null) index = value.length; - value = value.substring(0, index); - // cal prefix - awesomplete.prefix = value; - for (var i = index - 1; i>=0; i--) { - var c = value.charAt(i); - if (!/^[a-zA-Z0-9_\u4E00-\u9FCC]$/.test(c)) { - awesomplete.prefix = value.substring(i+1); - break; - } - } - - var list = editor_blockly.getAutoCompletions(value, pb.type, self.name); - - awesomplete.list = list; - awesomplete.ul.style.marginLeft = getCaretCoordinates(htmlInput, htmlInput.selectionStart).left - - htmlInput.scrollLeft - 20 + "px"; - awesomplete.evaluate(); - } - - awesomplete.container.style.width = "100%"; - - window.awesomplete = awesomplete; - } + Blockly.WidgetDiv.show( + this, this.sourceBlock_.RTL, this.widgetDispose_.bind(this)); + this.htmlInput_ = this.widgetCreate_(); + this.isBeingEdited_ = true; + editor_blockly.onTextFieldCreate(this, this.htmlInput_); + if (!quietInput) { - htmlInput.focus(); - htmlInput.select(); + this.htmlInput_.focus({preventScroll:true}); + this.htmlInput_.select(); } - this.validate_(); - this.resizeEditor_(); +}; - this.bindEvents_(htmlInput); +Blockly.FieldTextInput.prototype.onHtmlInputKeyDown_ = function(e) { + if (e.keyCode == Blockly.utils.KeyCodes.ENTER && !(window.awesomplete && window.awesomplete.opened)) { + Blockly.WidgetDiv.hide(); + Blockly.DropDownDiv.hideWithoutAnimation(); + } else if (e.keyCode == Blockly.utils.KeyCodes.ESC) { + this.htmlInput_.value = this.htmlInput_.defaultValue; + Blockly.WidgetDiv.hide(); + Blockly.DropDownDiv.hideWithoutAnimation(); + } else if (e.keyCode == Blockly.utils.KeyCodes.TAB) { + Blockly.WidgetDiv.hide(); + Blockly.DropDownDiv.hideWithoutAnimation(); + this.sourceBlock_.tab(this, !e.shiftKey); + e.preventDefault(); + } }; Blockly.copy_ = function(toCopy) { if (toCopy.isComment) { - var xml = toCopy.toXmlWithXY(); + var xml = toCopy.toXmlWithXY(); } else { - var xml = Blockly.Xml.blockToDom(toCopy, true); - // Copy only the selected block and internal blocks. - Blockly.Xml.deleteNext(xml); - // Encode start position in XML. - var xy = toCopy.getRelativeToSurfaceXY(); - xml.setAttribute('x', toCopy.RTL ? -xy.x : xy.x); - xml.setAttribute('y', xy.y); + var xml = Blockly.Xml.blockToDom(toCopy, true); + // Copy only the selected block and internal blocks. + Blockly.Xml.deleteNext(xml); + // Encode start position in XML. + var xy = toCopy.getRelativeToSurfaceXY(); + xml.setAttribute('x', toCopy.RTL ? -xy.x : xy.x); + xml.setAttribute('oy', xy.y); + xml.setAttribute('sy', toCopy.workspace.scrollY); } Blockly.clipboardXml_ = xml; Blockly.clipboardSource_ = toCopy.workspace; Blockly.clipboardTypeCounts_ = toCopy.isComment ? null : Blockly.utils.getBlockTypeCounts(toCopy, true); - setTimeout(function(){Blockly.clipboardSource_.paste(Blockly.clipboardXml_)}); - }; - - Blockly.duplicate = function(toDuplicate) { - // Save the clipboard. - var clipboardXml = Blockly.clipboardXml_; - var clipboardSource = Blockly.clipboardSource_; - - // Create a duplicate via a copy/paste operation. - Blockly.copy_(toDuplicate); - - - // Restore the clipboard. - Blockly.clipboardXml_ = clipboardXml; - Blockly.clipboardSource_ = clipboardSource; - }; - - Blockly.utils.KeyCodes.V=99999 \ No newline at end of file +}; + +/** + * Paste the provided block onto the workspace. + * @param {!Element} xmlBlock XML block element. + */ +Blockly.WorkspaceSvg.prototype.paste = function(xmlBlock) { + if (!this.rendered || xmlBlock.getElementsByTagName('block').length >= + this.remainingCapacity()) { + return; + } + if (this.currentGesture_) { + this.currentGesture_.cancel(); // Dragging while pasting? No. + } + if (xmlBlock.tagName.toLowerCase() == 'comment') { + this.pasteWorkspaceComment_(xmlBlock); + } else { + if (xmlBlock.hasAttribute('oy') && xmlBlock.hasAttribute('sy')) { + xmlBlock.setAttribute('y', parseFloat(xmlBlock.getAttribute('oy')) + parseFloat(xmlBlock.getAttribute('sy')) - this.scrollY); + } + this.pasteBlock_(xmlBlock); + } +}; diff --git a/_server/editor_blocklyconfig.js b/_server/editor_blocklyconfig.js index 3a0b55da..a6a3f3b1 100644 --- a/_server/editor_blocklyconfig.js +++ b/_server/editor_blocklyconfig.js @@ -422,7 +422,7 @@ function omitedcheckUpdateFunction(event) { if(event.type==='create'){ editor_blockly.addIntoLastUsedType(event.blockId); } - if(event.type==='ui'){ + if(event.type==='ui' && event.element == 'click'){ var newClick = [new Date().getTime(),event.blockId]; var lastClick = doubleClickCheck.shift(); doubleClickCheck.push(newClick); @@ -432,6 +432,8 @@ function omitedcheckUpdateFunction(event) { } } } + // Only handle these events + if (["create", "move", "change", "delete"].indexOf(event.type) < 0) return; if(editor_blockly.workspace.topBlocks_.length>=2){ editor_blockly.setValue('入口方块只能有一个'); return; diff --git a/_server/editor_mappanel.js b/_server/editor_mappanel.js index e1fec3a9..0c80ccd8 100644 --- a/_server/editor_mappanel.js +++ b/_server/editor_mappanel.js @@ -396,10 +396,6 @@ editor_mappanel_wrapper = function (editor) { var theme = editor.dom.editorTheme.value; editor.config.set('theme', theme); document.getElementById('color_css').href = '_server/css/' + theme + '.css'; - // 等新的css加载完毕再设置blockly亮度 - setTimeout(function () { - editor_blockly.setDarkScale(); - }, 1500); } /** diff --git a/editor-mobile.html b/editor-mobile.html index 5da9b982..5d55f998 100644 --- a/editor-mobile.html +++ b/editor-mobile.html @@ -225,7 +225,6 @@
-
diff --git a/editor.html b/editor.html index ccc7a905..232864a0 100644 --- a/editor.html +++ b/editor.html @@ -221,7 +221,6 @@
-
diff --git a/project/floors/sample3.js b/project/floors/sample3.js index 0ae64ca8..0b751bc4 100644 --- a/project/floors/sample3.js +++ b/project/floors/sample3.js @@ -93,19 +93,20 @@ main.floors.sample3= "\t[杰克,thief]没错，我就是这一切的背后主谋。", { "type": "move", + "time": 1000, "steps": [ - { - "direction": "up", - "value": 3 - } - ], - "time": 1000 + "up", + "up", + "up" + ] }, { "type": "show", "loc": [ - 6, - 4 + [ + 6, + 4 + ] ], "time": 1000 },