Add codeview menu to block, Handle block menu hidden problem

minjk-bl · minjk-bl · commit 656feb289880 · 2022-01-28T15:34:45.000+09:00
diff --git a/js/board/BlockMenu.js b/js/board/BlockMenu.js
@@ -16,7 +16,8 @@ define([
     'vp_base/js/com/com_util',
     'vp_base/js/com/com_String',
     'vp_base/js/com/component/Component',
-], function (com_util, com_String, Component) {
+    './CodeView'
+], function (com_util, com_String, Component, CodeView) {
     'use strict';
 
     class BlockMenu extends Component {
@@ -32,6 +33,8 @@ define([
                 left: 0,
                 top: 0
             };
+
+            this.prevBlockCodeview = null;
         }
 
         _bindEvent() {
@@ -48,7 +51,7 @@ define([
             });
             /** add block */
             $(this.wrapSelector('#vp_block_menu_add')).on('click', function () {
-                that.boardFrame.runBlock(that.block, false);
+                that.boardFrame.runBlock(that.block, true, false);
                 that.close();
             });
             /** duplicate block */
@@ -62,6 +65,36 @@ define([
                 that.boardFrame.removeBlock(that.block);
                 that.close();
             });
+            /** code view */
+            $(this.wrapSelector('#vp_block_menu_codeview')).on('click', function() {
+                let overallCode = new com_String();
+                let groupCode = that.boardFrame.runBlock(that.block, false, false);
+                if (that.block.id == 'apps_markdown') {
+                    // if markdown, add #
+                    groupCode = '#' + groupCode.replaceAll('\n', '\n# ');
+                }
+                overallCode.appendFormatLine('# VisualPython [{0}]{1}', that.block.blockNumber,
+                        that.block.id == 'apps_markdown'? ' - Markdown':'');
+                overallCode.append(groupCode);
+
+                // open codeview
+                let codeview = new CodeView({ 
+                    codeview: overallCode.toString(),
+                    config: {
+                        id: 'blockCodeview',
+                        name: 'Block Codeview',
+                        path: ''
+                    }
+                });
+                if (that.prevBlockCodeview != null) {
+                    // remove prev code view
+                    that.prevBlockCodeview.remove();
+                }
+                that.prevBlockCodeview = codeview;
+                codeview.open();
+
+                that.close();
+            });
         }
 
         template() {
@@ -79,6 +112,9 @@ define([
             sbBlockMenu.appendLine('<div id="vp_block_menu_duplicate" class="vp-block-menu-item">Duplicate</div>');
             // delete button
             sbBlockMenu.appendLine('<div id="vp_block_menu_delete" class="vp-block-menu-item">Delete</div>');
+            // codeview button
+            sbBlockMenu.appendLine('<hr class="vp-extra-menu-line" id="vp_block_menu_line_2">');
+            sbBlockMenu.appendLine('<div id="vp_block_menu_codeview" class="vp-block-menu-item">Code view</div>');
             sbBlockMenu.appendLine('</div>');
             return sbBlockMenu.toString();
         }
@@ -89,6 +125,20 @@ define([
                 left: left,
                 top: top
             };
+
+            // handling menu box to show inside visible area
+            let docWidth = $(document).width();
+            let docHeight = $(document).height();
+            let menuWidth = $(this.wrapSelector()).outerWidth();
+            let menuHeight = $(this.wrapSelector()).outerHeight();
+            if (docWidth < left + menuWidth) {
+                // horizontally out of view
+                this.position.left -= menuWidth;
+            }
+            if (docHeight < top + menuHeight) {
+                // vertically out of view
+                this.position.top -= menuHeight;
+            }
             
             $(this.wrapSelector()).css(this.position);
             // show items
