From a110703d7d9cea2222001a3a4e8925e022bd85cf Mon Sep 17 00:00:00 2001 From: Mike VanDenburgh Date: Fri, 1 Jul 2022 14:47:18 -0400 Subject: [PATCH] Add dropdown to enable drawing shapes with fixed aspect ratios/sizes --- histomicsui/web_client/panels/DrawWidget.js | 44 ++++++++++++++++++- .../stylesheets/panels/drawWidget.styl | 6 +++ .../templates/panels/drawWidget.pug | 20 +++++++++ 3 files changed, 69 insertions(+), 1 deletion(-) diff --git a/histomicsui/web_client/panels/DrawWidget.js b/histomicsui/web_client/panels/DrawWidget.js index 67884d8a..dd3c84aa 100644 --- a/histomicsui/web_client/panels/DrawWidget.js +++ b/histomicsui/web_client/panels/DrawWidget.js @@ -31,6 +31,7 @@ var DrawWidget = Panel.extend({ 'click .h-draw': 'drawElement', 'change .h-style-group': '_setToSelectedStyleGroup', 'change .h-brush-shape,.h-brush-size,.h-brush-screen': '_changeBrush', + 'change .h-fixed-shape': '_changeShapeConstraint', 'click .h-configure-style-group': '_styleGroupEditor', 'mouseenter .h-element': '_highlightElement', 'mouseleave .h-element': '_unhighlightElement', @@ -143,6 +144,7 @@ var DrawWidget = Panel.extend({ } }); } + this._updateConstraintValueInputs(); return this; }, @@ -593,7 +595,15 @@ var DrawWidget = Panel.extend({ // always show the active annotation when drawing a new element this.annotation.set('displayed', true); this._drawingType = type; - this.viewer.startDrawMode(type) + + const options = { modeOptions: {} }; + if (this._editOptions.size_mode === 'fixed_aspect_ratio') { + options.modeOptions.constraint = this._editOptions.fixed_width / this._editOptions.fixed_height; + } else if (this._editOptions.size_mode === 'fixed_size') { + options.modeOptions.constraint = { width: this._editOptions.fixed_width, height: this._editOptions.fixed_height }; + } + + this.viewer.startDrawMode(type, options) .then((element, annotations, opts) => this._addDrawnElements(element, annotations, opts)); } this.$('button.h-draw[data-type]').removeClass('active'); @@ -756,6 +766,38 @@ var DrawWidget = Panel.extend({ } }, + /** + * Show or hide width/height input depending on the currently selected drawing mode. + */ + _updateConstraintValueInputs() { + if (['fixed_aspect_ratio', 'fixed_size'].includes(this.$('.h-fixed-shape:checked').attr('mode'))) { + this.$('.h-fixed-values').show(); + } else { + this.$('.h-fixed-values').hide(); + } + }, + + /** + * Update the width/height constraint for a shape being drawn with a fixed + * aspect ratio or fixed size. + */ + _changeShapeConstraint(evt) { + const opts = { + size_mode: this.$('.h-fixed-shape:checked').attr('mode'), + fixed_width: parseFloat(this.$('.h-fixed-width').val()), + fixed_height: parseFloat(this.$('.h-fixed-height').val()) + }; + this._saveEditOptions(opts); + + this._updateConstraintValueInputs(); + + if (opts.size_mode === 'fixed_aspect_ratio') { + this.viewer.startDrawMode(this._drawingType, { modeOptions: { constraint: opts.fixed_width / opts.fixed_height } }); + } else if (opts.size_mode === 'fixed_size') { + this.viewer.startDrawMode(this._drawingType, { modeOptions: { constraint: { width: opts.fixed_width, height: opts.fixed_height } } }); + } + }, + /** * Cycle through available brush shapes. */ diff --git a/histomicsui/web_client/stylesheets/panels/drawWidget.styl b/histomicsui/web_client/stylesheets/panels/drawWidget.styl index 5969e51d..48746f3f 100644 --- a/histomicsui/web_client/stylesheets/panels/drawWidget.styl +++ b/histomicsui/web_client/stylesheets/panels/drawWidget.styl @@ -97,6 +97,12 @@ width 165px .h-brush-size width 60px + .h-fixed-shape-controls + @extend .h-brush-controls + z-index 10 + padding 0 25% + .h-fixed-shape-form-group + height 100% .flattenicon:before transform: scale(1, 0.67) diff --git a/histomicsui/web_client/templates/panels/drawWidget.pug b/histomicsui/web_client/templates/panels/drawWidget.pug index 29567118..38ad55ab 100644 --- a/histomicsui/web_client/templates/panels/drawWidget.pug +++ b/histomicsui/web_client/templates/panels/drawWidget.pug @@ -21,6 +21,26 @@ block content button.h-draw.btn.btn-default( type='button', data-type='rectangle', title='Draw a new rectangle (keyboard shortcut: r)', class=drawingType === 'rectangle' ? 'active' : null) | #[span.icon-check-empty]Rectangle + button.btn.btn-default.h-dropdown-title.h-brush-dropdown(type='button', data-target='#h-fixed-shape-controls') + i.icon-down-open + .h-fixed-shape-controls.h-dropdown-content.collapse + .form-group.h-fixed-shape-form-group.input-sm + label.radio + input.h-fixed-shape.h-brush-square(type="radio", name="h-fixed-shape", checked=opts.size_mode !== 'fixed_aspect_ratio' && opts.size_mode !== 'fixed_size' ? 'checked' : undefined, mode="unconstrained") + | Unconstrained + label.radio + input.h-fixed-shape.h-brush-square(type="radio", name="h-fixed-shape", checked=opts.size_mode === 'fixed_aspect_ratio' ? 'checked' : undefined, mode="fixed_aspect_ratio") + | Fixed Aspect Ratio + label.radio + input.h-fixed-shape.h-brush-circle(type="radio", name="h-fixed-shape", checked=opts.size_mode === 'fixed_size' ? 'checked' : undefined, mode="fixed_size") + | Fixed Size + .form-group.h-fixed-shape-form-group.h-fixed-values.input-sm + label + | Width + input.h-fixed-width(type="number", min="1", value=opts.fixed_width) + label + | Height + input.h-fixed-height(type="number", min="1", value=opts.fixed_height) .btn-group.btn-group-sm button.h-draw.btn.btn-default( type='button', data-type='ellipse', title='Draw a new ellipse (keyboard shortcut: i)', class=drawingType === 'ellipse' ? 'active' : null)