Repository: incubator-zeppelin Updated Branches: refs/heads/master f8aeee11e -> 4f186733d
Drag to resize paragraph  Author: Prabhjyot Singh <[email protected]> Closes #516 from prabhjyotsingh/dragResizeParagraph and squashes the following commits: bdc3f30 [Prabhjyot Singh] Addressing @Leemoonsoo review comments 5f534ed [Prabhjyot Singh] Feedback from @corneadoug and merge with master Project: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/commit/4f186733 Tree: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/tree/4f186733 Diff: http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/diff/4f186733 Branch: refs/heads/master Commit: 4f186733d2126953419e1bb14cb87f7de488dfbf Parents: f8aeee1 Author: Prabhjyot Singh <[email protected]> Authored: Mon Dec 28 13:56:02 2015 +0530 Committer: Lee moon soo <[email protected]> Committed: Mon Dec 28 21:33:54 2015 -0800 ---------------------------------------------------------------------- .../app/notebook/paragraph/paragraph-graph.html | 3 +- .../notebook/paragraph/paragraph-results.html | 71 +++++++++++--------- .../notebook/paragraph/paragraph.controller.js | 19 +++++- .../components/resizable/resizable.directive.js | 35 ++++++++-- 4 files changed, 84 insertions(+), 44 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/4f186733/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html index e72ad0e..c844bf8 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-graph.html @@ -15,8 +15,7 @@ limitations under the License. class="graphContainer" ng-class="{'noOverflow': getGraphMode()=='table'}" ng-if="getResultType()=='TABLE'" - allowresize="{{!asIframe && !viewOnly}}" - resizable on-resize="setGraphHeight();"> + > <div ng-if="getGraphMode()=='table'" id="p{{paragraph.id}}_table" http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/4f186733/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html index 7980d72..644b8e0 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph-results.html @@ -11,37 +11,42 @@ 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. --> -<div ng-include src="'app/notebook/paragraph/paragraph-graph.html'"></div> - -<div id="{{paragraph.id}}_comment" - class="text" - ng-if="getResultType()=='TABLE' && paragraph.result.comment" - ng-bind-html="paragraph.result.comment"> -</div> - -<div id="{{paragraph.id}}_text" - class="text" - ng-if="paragraph.result.type == 'TEXT'" - ng-bind="paragraph.result.msg"> -</div> - -<div id="p{{paragraph.id}}_html" - class="resultContained" - ng-if="paragraph.result.type == 'HTML'"> -</div> - -<div id="p{{paragraph.id}}_angular" - class="resultContained" - ng-if="paragraph.result.type == 'ANGULAR'"> -</div> - -<img id="{{paragraph.id}}_img" - ng-if="paragraph.result.type == 'IMG'" - ng-src="{{getBase64ImageSrc(paragraph.result.msg)}}"> -</img> - -<div id="{{paragraph.id}}_error" - class="error" - ng-if="paragraph.status == 'ERROR'" - ng-bind="paragraph.errorMessage"> +<div + id="p{{paragraph.id}}_resize" + resize='{"allowresize": "{{!asIframe && !viewOnly}}", "graphType": "{{getResultType()}}"}' + resizable on-resize="resizeParagraph(width, height);"> + <div ng-include src="'app/notebook/paragraph/paragraph-graph.html'"></div> + + <div id="{{paragraph.id}}_comment" + class="text" + ng-if="getResultType()=='TABLE' && paragraph.result.comment" + ng-bind-html="paragraph.result.comment"> + </div> + + <div id="{{paragraph.id}}_text" + class="text" + ng-if="paragraph.result.type == 'TEXT'" + ng-bind="paragraph.result.msg"> + </div> + + <div id="p{{paragraph.id}}_html" + class="resultContained" + ng-if="paragraph.result.type == 'HTML'"> + </div> + + <div id="p{{paragraph.id}}_angular" + class="resultContained" + ng-if="paragraph.result.type == 'ANGULAR'"> + </div> + + <img id="{{paragraph.id}}_img" + ng-if="paragraph.result.type == 'IMG'" + ng-src="{{getBase64ImageSrc(paragraph.result.msg)}}"> + </img> + + <div id="{{paragraph.id}}_error" + class="error" + ng-if="paragraph.status == 'ERROR'" + ng-bind="paragraph.errorMessage"> + </div> </div> http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/4f186733/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js index 68dc36f..280ef6e 100644 --- a/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js +++ b/zeppelin-web/src/app/notebook/paragraph/paragraph.controller.js @@ -961,7 +961,7 @@ angular.module('zeppelinWebApp') clearUnknownColsFromGraphOption(); // set graph height var height = $scope.paragraph.config.graph.height; - angular.element('#p' + $scope.paragraph.id + '_graph').height(height); + angular.element('#p' + $scope.paragraph.id + '_resize').height(height); if (!type || type === 'table') { setTable($scope.paragraph.result, refresh); @@ -1880,9 +1880,22 @@ angular.module('zeppelinWebApp') return true; }; - $scope.setGraphHeight = function() { - var height = angular.element('#p' + $scope.paragraph.id + '_graph').height(); + $scope.resizeParagraph = function(width, height) { + if ($scope.paragraph.config.colWidth !== width) { + $scope.paragraph.config.colWidth = width; + $scope.changeColWidth(); + $timeout(function() { + autoAdjustEditorHeight($scope.paragraph.id + '_editor'); + $scope.changeHeight(height); + }, 200); + + } else { + $scope.changeHeight(height); + } + }; + + $scope.changeHeight = function(height) { var newParams = angular.copy($scope.paragraph.settings.params); var newConfig = angular.copy($scope.paragraph.config); http://git-wip-us.apache.org/repos/asf/incubator-zeppelin/blob/4f186733/zeppelin-web/src/components/resizable/resizable.directive.js ---------------------------------------------------------------------- diff --git a/zeppelin-web/src/components/resizable/resizable.directive.js b/zeppelin-web/src/components/resizable/resizable.directive.js index 8f76017..53b9ac8 100644 --- a/zeppelin-web/src/components/resizable/resizable.directive.js +++ b/zeppelin-web/src/components/resizable/resizable.directive.js @@ -14,12 +14,11 @@ 'use strict'; angular.module('zeppelinWebApp').directive('resizable', function() { + var resizableConfig = { autoHide: true, handles: 'se', helper: 'resizable-helper', - minHeight: 100, - grid: [10000, 10], // allow only vertical stop: function() { angular.element(this).css({'width': '100%', 'height': '100%'}); } @@ -31,14 +30,38 @@ angular.module('zeppelinWebApp').directive('resizable', function() { callback: '&onResize' }, link: function postLink(scope, elem, attrs) { - attrs.$observe('allowresize', function(isAllowed) { - if (isAllowed === 'true') { - elem.resizable(resizableConfig); + attrs.$observe('resize', function(resize) { + var resetResize = function(elem, resize) { + var colStep = window.innerWidth / 12; + elem.off('resizestop'); + var conf = angular.copy(resizableConfig); + if (resize.graphType === 'TABLE') { + conf.grid = [colStep, 10]; + conf.minHeight = 100; + } else { + conf.grid = [colStep, 10000]; + conf.minHeight = 0; + } + conf.maxWidth = window.innerWidth; + + elem.resizable(conf); elem.on('resizestop', function() { if (scope.callback) { - scope.callback(); + var height = elem.height(); + if (height < 50) { + height = 300; + } + scope.callback({width: Math.ceil(elem.width() / colStep), height: height}); } }); + }; + + resize = JSON.parse(resize); + if (resize.allowresize === 'true') { + resetResize(elem, resize); + angular.element(window).resize(function() { + resetResize(elem, resize); + }); } }); }
