From 912f1a0d48568d598cd16c9a1694255ae9f7c775 Mon Sep 17 00:00:00 2001 From: CloverHearts Date: Mon, 1 Aug 2016 14:54:06 +0900 Subject: [PATCH] editor configuration in pargaraph.controller.js -> service object --- .../paragraph/paragraph.controller.js | 107 ++++-- .../editor-config/editor.config.service.js | 318 ++++++++++++++++++ zeppelin-web/src/index.html | 1 + 3 files changed, 389 insertions(+), 37 deletions(-) create mode 100644 zeppelin-web/src/components/editor-config/editor.config.service.js diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index 1d672e75cbb..8899fd189cc 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -16,12 +16,14 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $rootScope, $route, $window, $routeParams, $location, $timeout, $compile, $http, websocketMsgSrv, baseUrlSrv, ngToast, - saveAsService) { + saveAsService, editorConfigSrv) { var ANGULAR_FUNCTION_OBJECT_NAME_PREFIX = '_Z_ANGULAR_FUNC_'; $scope.parentNote = null; $scope.paragraph = null; $scope.originalText = ''; $scope.editor = null; + $scope.defaultEditorConfig = editorConfigSrv.getDefaultEditorSetting(); + $scope.userEditorConfig = $scope.defaultEditorConfig; var paragraphScope = $rootScope.$new(true, $rootScope); @@ -78,13 +80,67 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r var angularObjectRegistry = {}; - var editorModes = { - 'ace/mode/python': /^%(\w*\.)?(pyspark|python)\s*$/, - 'ace/mode/scala': /^%(\w*\.)?spark\s*$/, - 'ace/mode/r': /^%(\w*\.)?(r|sparkr|knitr)\s*$/, - 'ace/mode/sql': /^%(\w*\.)?\wql/, - 'ace/mode/markdown': /^%md/, - 'ace/mode/sh': /^%sh/ + $rootScope.$on('updateEditorSettings', function() { + console.log('change to paragraph editor theme', $scope.defaultEditorConfig); + $scope.defaultEditorConfig = editorConfigSrv.getDefaultEditorSetting(); + $scope.userEditorConfig = $scope.defaultEditorConfig; + $scope.setParagraphMode( + $scope.editor.getSession(), + $scope.paragraph.text, + {row: 0, column: 0} + ); + }); + + $scope.setEditorConfig = function(newValue, oldValue) { + if (newValue === undefined && oldValue === undefined) { + if ($scope.editor !== null) { + $scope.editor.renderer.setShowGutter(false); + $scope.editor.setHighlightGutterLine(false); + $scope.editor.getSession().setMode('ace/mode/scala'); + $scope.editor.setHighlightActiveLine(false); + $scope.editor.getSession().setTabSize(4); + $scope.editor.setTheme('ace/theme/chrome'); + $scope.editor.setShowFoldWidgets(true); + $scope.editor.setOptions({ + enableBasicAutocompletion: true, + enableSnippets: false, + enableLiveAutocompletion: false, + fontSize: 12 + }); + + $scope.editor.setShowPrintMargin(false); + $scope.editor.setPrintMarginColumn(false); + } + $scope.paragraph.config.editorMode = 'ace/mode/scala'; + return; + } + + var targetEditorConfig = newValue !== undefined ? newValue : oldValue; + var isShowLineNumberValue = $scope.paragraph.config.lineNumbers; + + // show line number option precious order (paragraph setting > user theme) + if (isShowLineNumberValue === undefined) { + isShowLineNumberValue = targetEditorConfig.isShowNumberLine(); + } + + $scope.editor.renderer.setShowGutter(isShowLineNumberValue); + $scope.editor.setHighlightGutterLine(isShowLineNumberValue); + $scope.editor.getSession().setMode(targetEditorConfig.getMode()); + $scope.editor.setHighlightActiveLine(targetEditorConfig.isActiveLine()); + $scope.editor.getSession().setTabSize(targetEditorConfig.getTabSize()); + $scope.editor.setTheme(targetEditorConfig.getTheme()); + $scope.editor.setShowFoldWidgets(true); + $scope.editor.setOptions({ + enableBasicAutocompletion: true, + enableSnippets: false, + enableLiveAutocompletion: targetEditorConfig.isLiveAutoCompletion(), + fontSize: targetEditorConfig.getFontSizeHtmlFormat() + }); + $scope.editor.setShowPrintMargin(targetEditorConfig.isShowPrintMargin()); + $scope.editor.setPrintMarginColumn(targetEditorConfig.getShowPrintMarginColumn()); + $scope.paragraph.config.editorMode = targetEditorConfig.getMode(); + + $scope.userEditorConfig = targetEditorConfig; }; // Controller init @@ -536,17 +592,13 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r _editor.$blockScrolling = Infinity; $scope.editor = _editor; if (_editor.container.id !== '{{paragraph.id}}_editor') { - $scope.editor.renderer.setShowGutter($scope.paragraph.config.lineNumbers); - $scope.editor.setShowFoldWidgets(false); - $scope.editor.setHighlightActiveLine(false); - $scope.editor.setHighlightGutterLine(false); - $scope.editor.getSession().setUseWrapMode(true); - $scope.editor.setTheme('ace/theme/chrome'); if ($scope.paragraphFocused) { $scope.editor.focus(); $scope.goToLineEnd(); } + // set default editor config + $scope.setEditorConfig($scope.userEditorConfig, null); autoAdjustEditorHeight(_editor.container.id); angular.element(window).resize(function() { autoAdjustEditorHeight(_editor.container.id); @@ -569,23 +621,10 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r if ((typeof pos === 'undefined') && $scope.paragraph.config.editorMode) { session.setMode($scope.paragraph.config.editorMode); } else { - // Defaults to spark mode - var newMode = 'ace/mode/scala'; // Test first against current mode - var oldMode = session.getMode().$id; - if (!editorModes[oldMode] || !editorModes[oldMode].test(paragraphText)) { - for (var key in editorModes) { - if (key !== oldMode) { - if (editorModes[key].test(paragraphText)) { - $scope.paragraph.config.editorMode = key; - session.setMode(key); - return true; - } - } - } - $scope.paragraph.config.editorMode = newMode; - session.setMode(newMode); - } + var tempEditorConfig = editorConfigSrv.findGetEditorConfigFromInterpreterTag(paragraphText); + $scope.setEditorConfig(tempEditorConfig, $scope.userEditorConfig); + return true; } } }; @@ -619,12 +658,6 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r langTools.setCompleters([remoteCompleter, langTools.keyWordCompleter, langTools.snippetCompleter, langTools.textCompleter]); - $scope.editor.setOptions({ - enableBasicAutocompletion: true, - enableSnippets: false, - enableLiveAutocompletion: false - }); - $scope.handleFocus = function(value) { $scope.paragraphFocused = value; // Protect against error in case digest is already running @@ -646,7 +679,7 @@ angular.module('zeppelinWebApp').controller('ParagraphCtrl', function($scope, $r autoAdjustEditorHeight(_editor.container.id); }); - $scope.setParagraphMode($scope.editor.getSession(), $scope.editor.getSession().getValue()); + $scope.setParagraphMode($scope.editor.getSession(), $scope.editor.getSession().getValue(), {row: 0, column: 0}); // autocomplete on '.' /* diff --git a/zeppelin-web/src/components/editor-config/editor.config.service.js b/zeppelin-web/src/components/editor-config/editor.config.service.js new file mode 100644 index 00000000000..09c86113060 --- /dev/null +++ b/zeppelin-web/src/components/editor-config/editor.config.service.js @@ -0,0 +1,318 @@ +/* + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +'use strict'; + +angular.module('zeppelinWebApp').service('editorConfigSrv', function($q) { + + var builtInConfig = { + editorSettings: [ + { + userConfig: + { + modeName: 'Scala Spark', + language: 'scala', + modeRegex: '^%(spark)(\ |\n)+.*', + setting: { + theme: 'chrome', + tabSize: 4, + showLineNumber: false, + activeLine: false, + liveAutoCompletion: false, + showPrintMargin: false, + showPrintMarginColumn: 100, + fontSize: 10 + } + } + }, + { + userConfig: + { + modeName: 'Python', + language: 'python', + modeRegex: '^%(pyspark|python)(\ |\n)+.*', + setting: { + theme: 'chrome', + tabSize: 4, + showLineNumber: false, + activeLine: false, + liveAutoCompletion: false, + showPrintMargin: false, + showPrintMarginColumn: 100, + fontSize: 10 + } + } + }, + { + userConfig: { + modeName: 'R', + language: 'r', + modeRegex: '^%(r|sparkr|knitr)(\ |\n)+.*', + setting: { + theme: 'chrome', + tabSize: 4, + showLineNumber: false, + activeLine: false, + liveAutoCompletion: false, + showPrintMargin: false, + showPrintMarginColumn: 100, + fontSize: 10 + } + } + }, + { + userConfig: { + modeName: 'SQL', + language: 'sql', + modeRegex: '^%(jdbc|sql)(\(.+\))*(\ |\n)+.*', + setting: { + theme: 'chrome', + tabSize: 4, + showLineNumber: false, + activeLine: false, + liveAutoCompletion: false, + showPrintMargin: false, + showPrintMarginColumn: 100, + fontSize: 10 + } + } + }, + { + userConfig: + { + modeName: 'Markdown', + language: 'markdown', + modeRegex: '^%(md)(\ |\n)+.*', + setting: { + theme: 'chrome', + tabSize: 4, + showLineNumber: false, + activeLine: false, + liveAutoCompletion: false, + showPrintMargin: false, + showPrintMarginColumn: 100, + fontSize: 10 + } + } + }, + { + userConfig: + { + modeName: 'Sh', + language: 'sh', + modeRegex: '^%(sh)(\ |\n)+.*', + setting: { + theme: 'chrome', + tabSize: 4, + showLineNumber: false, + activeLine: false, + liveAutoCompletion: false, + showPrintMargin: false, + showPrintMarginColumn: 100, + fontSize: 10 + } + } + } + ] + }; + + var EditorConfigObject = { + userConfig: {}, + setUserConfig: function(newConfig) { + this.userConfig = newConfig; + }, + getUserConfig: function() { + return this.userConfig; + }, + getLanguage: function() { + return this.userConfig.language; + }, + getModeName: function() { + return this.userConfig.modeName; + }, + getMode: function() { + return 'ace/mode/' + this.userConfig.language; + }, + getModeRegex: function() { + return this.userConfig.modeRegex; + }, + getThemeName: function() { + return this.userConfig.setting.theme; + }, + getTheme: function() { + return 'ace/theme/' + this.userConfig.setting.theme; + }, + getTabSize: function() { + return this.userConfig.setting.tabSize; + }, + getShowPrintMarginColumn: function() { + return this.userConfig.setting.showPrintMarginColumn; + }, + getFontFamily: function() { + return this.userConfig.setting.fontFamily; + }, + getFontSize: function() { + return this.userConfig.setting.fontSize; + }, + getFontSizeHtmlFormat: function() { + return this.userConfig.setting.fontSize + 'pt'; + }, + isShowNumberLine: function() { + return this.userConfig.setting.showLineNumber; + }, + isActiveLine: function() { + return this.userConfig.setting.activeLine; + }, + isShowPrintMargin: function() { + return this.userConfig.setting.showPrintMargin; + }, + isLiveAutoCompletion: function() { + return this.userConfig.setting.liveAutoCompletion; + }, + isCorrectEditorFromInterpreterTag: function(context) { + var checkRegex = new RegExp(this.getModeRegex()); + return checkRegex.test(context); + } + }; + + var themeSupportLists = [ + {'themeValue': 'chrome'} + ]; + + var languageSupportLists = [ + {languageType: 'scala'}, + {languageType: 'sh'}, + {languageType: 'java'}, + {languageType: 'sql'}, + {languageType: 'r'}, + {languageType: 'markdown'}, + {languageType: 'python'}, + {languageType: 'javascript'}, + {languageType: 'mysql'}, + {languageType: 'pgsql'} + ]; + + var defaultModeValue = 'Scala Spark'; + var isServerReceivedValue = false; + var editorConfigList = []; + + function initializeEditorSettings(userEditorSettings) { + return $q(function(success, fail) { + if (userEditorSettings.length > 0) { + editorConfigList.splice(0, editorConfigList.length); + userEditorSettings.map(function(editorConfig) { + var configItem = angular.copy(EditorConfigObject); + configItem.setUserConfig(editorConfig.userConfig); + editorConfigList.push(configItem); + }); + } + if (success !== undefined) { + success(); + } + }); + } + + this.initConfig = initializeEditorSettings; + + this.initConfig(builtInConfig.editorSettings); + + this.isServerReceived = function() { + return isServerReceivedValue; + }; + + this.setServerReceived = function(status) { + isServerReceivedValue = status; + }; + + this.getEditorConfigLists = function() { + return editorConfigList; + }; + + this.setEditorConfig = function(index, data) { + editorConfigList.splice(index, 1, data); + }; + + this.getEditorConfig = function(index) { + return editorConfigList[index]; + }; + + this.newEditorConfig = function(configName, configRegex) { + console.log(configName); + var newConfig = { + modeName: configName, + language: 'scala', + modeRegex: configRegex, + setting: { + theme: 'chrome', + tabSize: 4, + showLineNumber: false, + activeLine: false, + liveAutoCompletion: false, + showPrintMargin: false, + showPrintMarginColumn: 100, + fontSize: 10 + } + }; + var configItem = angular.copy(EditorConfigObject); + configItem.setUserConfig(newConfig); + console.log(configItem); + editorConfigList.push(configItem); + return editorConfigList.length - 1; + }; + + this.removeEditorConfig = function(index) { + editorConfigList.splice(index, 1); + }; + + this.getThemeSupportLists = function() { + return angular.copy(themeSupportLists); + }; + + this.getLanguageSupportLists = function() { + return angular.copy(languageSupportLists); + }; + + this.findGetEditorConfigFromName = function(modeName) { + var index = _.findIndex(editorConfigList, function(config) { + return config.getModeName() === modeName; + }); + return index < 0 ? undefined : {index: index, data: editorConfigList[index]}; + }; + + this.findGetEditorConfigFromInterpreterTag = function(interpreterTag) { + var index = _.findIndex(editorConfigList, function(config) { + return config.isCorrectEditorFromInterpreterTag(interpreterTag); + }); + return editorConfigList[index]; + }; + + this.getDefaultModeName = function() { + return defaultModeValue; + }; + + this.getDefaultEditorSetting = function() { + var defaultConfigIndex = _.findIndex(editorConfigList, function(config) { + if (config === undefined) { + return false; + } + return config.getModeName() === defaultModeValue; + }); + + if (defaultConfigIndex >= 0) { + return editorConfigList[defaultConfigIndex]; + } else { + return editorConfigList ? editorConfigList[0] : undefined; + } + }; + +}); diff --git a/zeppelin-web/src/index.html b/zeppelin-web/src/index.html index 9fe9489501c..73e4dcc5b5a 100644 --- a/zeppelin-web/src/index.html +++ b/zeppelin-web/src/index.html @@ -168,6 +168,7 @@ +