From 5190b4a2faf86d6d34d2a750b99ddc2fd220f0d6 Mon Sep 17 00:00:00 2001 From: Gabe G'Sell Date: Fri, 2 Dec 2016 10:28:51 -0800 Subject: [PATCH 1/6] some --- .../scripts/components/input/NumberInput.jsx | 10 ++++++++-- .../scripts/components/input/SliderInput.jsx | 19 +++++++++++++++++-- .../preferences/GeneralPreferences.jsx | 4 ++-- .../publishing/PublishingBrowser.jsx | 1 + .../scripts/containers/ComponentInspector.jsx | 17 ++++++++++++++++- 5 files changed, 44 insertions(+), 7 deletions(-) diff --git a/web/src/scripts/components/input/NumberInput.jsx b/web/src/scripts/components/input/NumberInput.jsx index 0c34ac78..a6e3a5f0 100644 --- a/web/src/scripts/components/input/NumberInput.jsx +++ b/web/src/scripts/components/input/NumberInput.jsx @@ -45,6 +45,7 @@ export default class NumberInput extends Component { static defaultProps = { className: '', style: {}, + step: 5, disabled: false, onSubmit: () => {}, } @@ -89,23 +90,28 @@ export default class NumberInput extends Component { } onKeyDown = (e) => { + const {step} = this.props let stopPropagation = false let incrementBy = 0 switch (e.keyCode) { + // Tab case 9: ; break + // Enter case 13: stopPropagation = true this.props.onSubmit(e.target.value) break + // Up arrow case 38: - incrementBy = 1 + incrementBy = step || 1 stopPropagation = true break + // Down arrow case 40: - incrementBy = -1 + incrementBy = step ? step * -1 : -1 stopPropagation = true break default: diff --git a/web/src/scripts/components/input/SliderInput.jsx b/web/src/scripts/components/input/SliderInput.jsx index 0059a43b..30eb2417 100644 --- a/web/src/scripts/components/input/SliderInput.jsx +++ b/web/src/scripts/components/input/SliderInput.jsx @@ -22,6 +22,15 @@ import pureRender from 'pure-render-decorator' let SLIDER_REF = 'slider' +const getNearestValue = (val, low, high) => { + return Math.abs(val - low) < Math.abs(val - high) ? low : high +} + +const getDecimalCount = (num) => { + const decSplitArr = num.toString().split('.') + return decSplitArr[1] ? decSplitArr[1].length : 0 +} + const stylesCreator = ({input, colors}, {type, width, height, trackHeight, disabled, knobWidth}) => { height = type === 'platform' ? 20 : height const trackRadius = trackHeight / 2 @@ -89,6 +98,7 @@ export default class SliderInput extends Component { value: React.PropTypes.number, min: React.PropTypes.number, max: React.PropTypes.number, + step: React.PropTypes.number, onChange: React.PropTypes.func, disabled: React.PropTypes.bool, } @@ -97,6 +107,7 @@ export default class SliderInput extends Component { value: 0, min: 0, max: 100, + step: 1, height: 30, trackHeight: 3, knobWidth: 12, @@ -168,7 +179,7 @@ export default class SliderInput extends Component { calculateValueFromPosition(position, bounds) { const trackWidth = this.getTrackWidth(bounds) - const {min, max, knobWidth} = this.props + const {min, max, knobWidth, step} = this.props // Prevent division by 0 if (trackWidth === 0) { @@ -180,7 +191,11 @@ export default class SliderInput extends Component { const percent = (position - bounds.min) / trackWidth const range = max - min const value = (percent * range) + min - return Math.round(_.clamp(value, min, max)) + const stepCount = value / step + // If step=.1, value=.82, this gets us .8 + const newValue = getNearestValue(stepCount, Math.floor(stepCount), Math.ceil(stepCount)) * step + // Clip value to step's decimals, and then remove trailing 0s + return Number(_.clamp(newValue, min, max).toFixed(getDecimalCount(step))) } getPercentValue() { diff --git a/web/src/scripts/components/preferences/GeneralPreferences.jsx b/web/src/scripts/components/preferences/GeneralPreferences.jsx index e664d632..aeaa5025 100644 --- a/web/src/scripts/components/preferences/GeneralPreferences.jsx +++ b/web/src/scripts/components/preferences/GeneralPreferences.jsx @@ -70,7 +70,7 @@ export default ({onPreferenceChange, setSystemLocationPreference, decoTheme, and placeholder={METADATA[CATEGORIES.GENERAL][PREFERENCES[CATEGORIES.GENERAL].GENYMOTION_APP].defaultValue} /> - {/* @@ -79,7 +79,7 @@ export default ({onPreferenceChange, setSystemLocationPreference, decoTheme, and type={'platform'} onChange={onPreferenceChange.bind(null, PREFERENCES.GENERAL.PUBLISHING_FEATURE)} /> - */} + ) } diff --git a/web/src/scripts/components/publishing/PublishingBrowser.jsx b/web/src/scripts/components/publishing/PublishingBrowser.jsx index e94b97cb..0361babd 100644 --- a/web/src/scripts/components/publishing/PublishingBrowser.jsx +++ b/web/src/scripts/components/publishing/PublishingBrowser.jsx @@ -124,6 +124,7 @@ export default class PublishingBrowser extends Component { return (
+ { this.renderHeader() } createSelector( selectors.selectedElement, selectors.selectedComponent, selectors.focusedFileId, - (element, component, focusedFileId) => ({ + selectors.tabContainerId, + (element, component, focusedFileId, tabContainerId) => ({ component: component || element, focusedFileId, + tabContainerId, }) ) const mapDispatchToProps = (dispatch) => ({ elementTreeActions: bindActionCreators(elementTreeActions, dispatch), uiActions: bindActionCreators(uiActions, dispatch), + tabActions: bindActionCreators(tabActions, dispatch), }) @StylesEnhancer(stylesCreator, ({style}) => ({style})) @@ -69,6 +74,15 @@ class ComponentInspector extends Component { uiActions.setSidebarContext() } + onTitleClick = (component) => { + // TODO: if we're not in dev mode or with correct permissions, return instead + const {tabActions, tabContainerId} = this.props + const uri = URIUtils.componentIdToURI(component.id) + + this.onBack() + tabActions.addTab(tabContainerId, uri) + } + render() { const {style, styles, width, component, elementTreeActions} = this.props @@ -80,6 +94,7 @@ class ComponentInspector extends Component { /> {component && ( From 23ed6d4bb6cd38872eb8e6b13944362ba093ad7b Mon Sep 17 00:00:00 2001 From: Gabe G'Sell Date: Fri, 2 Dec 2016 11:30:49 -0800 Subject: [PATCH 2/6] number utils and restraints on number input --- .../scripts/components/input/NumberInput.jsx | 6 ++- .../scripts/components/input/SliderInput.jsx | 23 +++++----- .../scripts/components/inspector/Property.jsx | 2 +- .../inspector/PropertyNumberInput.jsx | 18 +++++--- .../publishing/PublishingMetadata.jsx | 9 ++-- web/src/scripts/utils/NumberUtils.js | 43 +++++++++++++++++++ 6 files changed, 76 insertions(+), 25 deletions(-) create mode 100644 web/src/scripts/utils/NumberUtils.js diff --git a/web/src/scripts/components/input/NumberInput.jsx b/web/src/scripts/components/input/NumberInput.jsx index a6e3a5f0..135a2a52 100644 --- a/web/src/scripts/components/input/NumberInput.jsx +++ b/web/src/scripts/components/input/NumberInput.jsx @@ -21,6 +21,8 @@ import ReactDOM from 'react-dom' import { StylesEnhancer } from 'react-styles-provider' import pureRender from 'pure-render-decorator' +import { getLockedValue } from '../../utils/NumberUtils' + const stylesCreator = ({input}, {type, width, disabled}) => ({ input: { ...(type === 'platform' ? input.platform : input.regular), @@ -45,7 +47,6 @@ export default class NumberInput extends Component { static defaultProps = { className: '', style: {}, - step: 5, disabled: false, onSubmit: () => {}, } @@ -90,7 +91,7 @@ export default class NumberInput extends Component { } onKeyDown = (e) => { - const {step} = this.props + const {step, max, min} = this.props let stopPropagation = false let incrementBy = 0 @@ -148,6 +149,7 @@ export default class NumberInput extends Component { } value = this.roundInput(value) + value = getLockedValue(value, min, max, step) this.props.onChange(value) diff --git a/web/src/scripts/components/input/SliderInput.jsx b/web/src/scripts/components/input/SliderInput.jsx index 30eb2417..cbfd50b0 100644 --- a/web/src/scripts/components/input/SliderInput.jsx +++ b/web/src/scripts/components/input/SliderInput.jsx @@ -16,10 +16,12 @@ */ import _ from 'lodash' -import React, { Component, } from 'react' +import React, { Component, PropTypes } from 'react' import { StylesEnhancer } from 'react-styles-provider' import pureRender from 'pure-render-decorator' +import { getLockedValue } from '../../utils/NumberUtils' + let SLIDER_REF = 'slider' const getNearestValue = (val, low, high) => { @@ -95,12 +97,12 @@ const stylesCreator = ({input, colors}, {type, width, height, trackHeight, disab export default class SliderInput extends Component { static propTypes = { - value: React.PropTypes.number, - min: React.PropTypes.number, - max: React.PropTypes.number, - step: React.PropTypes.number, - onChange: React.PropTypes.func, - disabled: React.PropTypes.bool, + value: PropTypes.number, + min: PropTypes.number, + max: PropTypes.number, + step: PropTypes.number, + onChange: PropTypes.func, + disabled: PropTypes.bool, } static defaultProps = { @@ -191,11 +193,7 @@ export default class SliderInput extends Component { const percent = (position - bounds.min) / trackWidth const range = max - min const value = (percent * range) + min - const stepCount = value / step - // If step=.1, value=.82, this gets us .8 - const newValue = getNearestValue(stepCount, Math.floor(stepCount), Math.ceil(stepCount)) * step - // Clip value to step's decimals, and then remove trailing 0s - return Number(_.clamp(newValue, min, max).toFixed(getDecimalCount(step))) + return getLockedValue(value, min, max, step) } getPercentValue() { @@ -220,6 +218,7 @@ export default class SliderInput extends Component { const {styles} = this.props const knobDistance = this.getTrackWidth() * this.getPercentValue() + console.log("SliderInput", this.props) return (
({ } }) +const inputPropKeys = ['value', 'min', 'max', 'step', 'onChange', 'disabled'] + @StylesEnhancer(stylesCreator) @pureRender export default class PropertyNumberInput extends Component { @@ -44,10 +47,15 @@ export default class PropertyNumberInput extends Component { static defaultProps = { title: '', value: 0, + min: 0, + max: 100, + step: 1, } render() { - const {styles, title, value, onChange, actions, dividerType, disabled} = this.props + const {styles, title, actions, dividerType} = this.props + + const inputProps = _.pick(this.props, inputPropKeys) return (
diff --git a/web/src/scripts/components/publishing/PublishingMetadata.jsx b/web/src/scripts/components/publishing/PublishingMetadata.jsx index 1d42d3c7..76fb79c1 100644 --- a/web/src/scripts/components/publishing/PublishingMetadata.jsx +++ b/web/src/scripts/components/publishing/PublishingMetadata.jsx @@ -109,9 +109,12 @@ export default class PublishingMetadata extends Component { this.save(update(component, { - props: {$set: value}, - }))} + onChange={(value) => { + console.log("saving props: ", value) + return this.save(update(component, { + props: {$set: value}, + })) + }} />
. + * + */ + +export const getNearestValue = (val, low, high) => { + return Math.abs(val - low) < Math.abs(val - high) ? low : high +} + +export const getDecimalCount = (num) => { + const decSplitArr = num.toString().split('.') + return decSplitArr[1] ? decSplitArr[1].length : 0 +} + +export const conditionalClamp = (val, min, max) => { + if (min && val <= min) { + return min + } + if (max && val >= max) { + return max + } + return val +} + +export const getLockedValue = (val, min, max, step) => { + const stepCount = val / step + // If step=.1, value=.82, this gets us .8 + const newValue = getNearestValue(stepCount, Math.floor(stepCount), Math.ceil(stepCount)) * step + // Clip value to step's decimals, and then remove trailing 0s + return Number(conditionalClamp(newValue, min, max).toFixed(getDecimalCount(step))) +} From 8a21e52e63e040ae33942c07109766f385708a1d Mon Sep 17 00:00:00 2001 From: Gabe G'Sell Date: Fri, 2 Dec 2016 12:24:15 -0800 Subject: [PATCH 3/6] locked improvements --- web/src/scripts/utils/NumberUtils.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web/src/scripts/utils/NumberUtils.js b/web/src/scripts/utils/NumberUtils.js index 386946eb..d9bc2de6 100644 --- a/web/src/scripts/utils/NumberUtils.js +++ b/web/src/scripts/utils/NumberUtils.js @@ -36,8 +36,10 @@ export const conditionalClamp = (val, min, max) => { export const getLockedValue = (val, min, max, step) => { const stepCount = val / step + const nearestLower = Math.max(Math.floor(stepCount) * step, min) + const nearestUpper = Math.min(Math.ceil(stepCount) * step, max) // If step=.1, value=.82, this gets us .8 - const newValue = getNearestValue(stepCount, Math.floor(stepCount), Math.ceil(stepCount)) * step + const newValue = getNearestValue(val, nearestLower, nearestUpper) // Clip value to step's decimals, and then remove trailing 0s return Number(conditionalClamp(newValue, min, max).toFixed(getDecimalCount(step))) } From 99fd052f261ed9741ae5dbfd522fe108286a0be8 Mon Sep 17 00:00:00 2001 From: Gabe G'Sell Date: Fri, 2 Dec 2016 12:32:10 -0800 Subject: [PATCH 4/6] cleanup --- web/src/scripts/components/input/NumberInput.jsx | 13 ++++++++----- web/src/scripts/components/input/SliderInput.jsx | 9 --------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/web/src/scripts/components/input/NumberInput.jsx b/web/src/scripts/components/input/NumberInput.jsx index 135a2a52..e63ea815 100644 --- a/web/src/scripts/components/input/NumberInput.jsx +++ b/web/src/scripts/components/input/NumberInput.jsx @@ -16,7 +16,7 @@ */ import _ from 'lodash' -import React, { Component, } from 'react' +import React, { Component, PropTypes } from 'react' import ReactDOM from 'react-dom' import { StylesEnhancer } from 'react-styles-provider' import pureRender from 'pure-render-decorator' @@ -38,10 +38,13 @@ const stylesCreator = ({input}, {type, width, disabled}) => ({ export default class NumberInput extends Component { static propTypes = { - onChange: React.PropTypes.func.isRequired, - onSubmit: React.PropTypes.func, - value: React.PropTypes.number.isRequired, - disabled: React.PropTypes.bool, + onChange: PropTypes.func.isRequired, + onSubmit: PropTypes.func, + value: PropTypes.number.isRequired, + min: PropTypes.number, + max: PropTypes.number, + step: PropTypes.number, + disabled: PropTypes.bool, } static defaultProps = { diff --git a/web/src/scripts/components/input/SliderInput.jsx b/web/src/scripts/components/input/SliderInput.jsx index cbfd50b0..5c967e11 100644 --- a/web/src/scripts/components/input/SliderInput.jsx +++ b/web/src/scripts/components/input/SliderInput.jsx @@ -24,15 +24,6 @@ import { getLockedValue } from '../../utils/NumberUtils' let SLIDER_REF = 'slider' -const getNearestValue = (val, low, high) => { - return Math.abs(val - low) < Math.abs(val - high) ? low : high -} - -const getDecimalCount = (num) => { - const decSplitArr = num.toString().split('.') - return decSplitArr[1] ? decSplitArr[1].length : 0 -} - const stylesCreator = ({input, colors}, {type, width, height, trackHeight, disabled, knobWidth}) => { height = type === 'platform' ? 20 : height const trackRadius = trackHeight / 2 From 55addabc82045c4915ef4451e8f6ede20e9632cb Mon Sep 17 00:00:00 2001 From: Gabe G'Sell Date: Fri, 2 Dec 2016 13:52:36 -0800 Subject: [PATCH 5/6] remove console, etc --- web/src/scripts/components/input/SliderInput.jsx | 1 - .../scripts/components/publishing/PublishingMetadata.jsx | 9 +++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/web/src/scripts/components/input/SliderInput.jsx b/web/src/scripts/components/input/SliderInput.jsx index 5c967e11..4216f64e 100644 --- a/web/src/scripts/components/input/SliderInput.jsx +++ b/web/src/scripts/components/input/SliderInput.jsx @@ -209,7 +209,6 @@ export default class SliderInput extends Component { const {styles} = this.props const knobDistance = this.getTrackWidth() * this.getPercentValue() - console.log("SliderInput", this.props) return (
{ - console.log("saving props: ", value) - return this.save(update(component, { - props: {$set: value}, - })) - }} + onChange={(value) => this.save(update(component, { + props: {$set: value}, + }))} />
Date: Fri, 2 Dec 2016 13:53:18 -0800 Subject: [PATCH 6/6] turn components back off --- web/src/scripts/components/preferences/GeneralPreferences.jsx | 4 ++-- web/src/scripts/components/publishing/PublishingBrowser.jsx | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/web/src/scripts/components/preferences/GeneralPreferences.jsx b/web/src/scripts/components/preferences/GeneralPreferences.jsx index aeaa5025..e664d632 100644 --- a/web/src/scripts/components/preferences/GeneralPreferences.jsx +++ b/web/src/scripts/components/preferences/GeneralPreferences.jsx @@ -70,7 +70,7 @@ export default ({onPreferenceChange, setSystemLocationPreference, decoTheme, and placeholder={METADATA[CATEGORIES.GENERAL][PREFERENCES[CATEGORIES.GENERAL].GENYMOTION_APP].defaultValue} /> - @@ -79,7 +79,7 @@ export default ({onPreferenceChange, setSystemLocationPreference, decoTheme, and type={'platform'} onChange={onPreferenceChange.bind(null, PREFERENCES.GENERAL.PUBLISHING_FEATURE)} /> - + */}
) } diff --git a/web/src/scripts/components/publishing/PublishingBrowser.jsx b/web/src/scripts/components/publishing/PublishingBrowser.jsx index 0361babd..e94b97cb 100644 --- a/web/src/scripts/components/publishing/PublishingBrowser.jsx +++ b/web/src/scripts/components/publishing/PublishingBrowser.jsx @@ -124,7 +124,6 @@ export default class PublishingBrowser extends Component { return (
- { this.renderHeader() }