From 727b0f22df640962bb4dbe94de9231830e49b787 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Fri, 8 Jan 2021 14:33:06 +0530 Subject: [PATCH 1/3] =?UTF-8?q?#39=20opacity=20button/stroke=20size/radius?= =?UTF-8?q?=20button=20don=E2=80=99t=20allow=20the=200=20value?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/index.html | 12 ++++++------ src/svgcanvas/undo.js | 2 ++ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/editor/index.html b/src/editor/index.html index 5592933f..829a43d9 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -123,9 +123,9 @@ - - @@ -185,7 +185,7 @@ -
@@ -257,7 +257,7 @@
Helvetica
Times
 - @@ -347,7 +347,7 @@ - + — ... @@ -365,7 +365,7 @@ - +
diff --git a/src/svgcanvas/undo.js b/src/svgcanvas/undo.js index 27e95f04..9852190e 100644 --- a/src/svgcanvas/undo.js +++ b/src/svgcanvas/undo.js @@ -190,6 +190,8 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele setHref(elem, newValue); } else if (newValue) { elem.setAttribute(attr, newValue); + } else if (typeof newValue === 'number') { + elem.setAttribute(attr, newValue); } else { elem.removeAttribute(attr); } From b08ca41d37072057d1f78616b75c07e0f09e0bbb Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Tue, 19 Jan 2021 13:17:19 +0530 Subject: [PATCH 2/3] =?UTF-8?q?#39=20opacity=20button/stroke=20size/radius?= =?UTF-8?q?=20button=20don=E2=80=99t=20allow=20the=200=20value?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/editor/components/seDropdown.js | 3 +- src/editor/components/seSpinInput.js | 2 +- src/editor/components/seZoom.js | 3 +- src/editor/dialogs/exportDialog.js | 3 +- .../dialogs/se-elix/define/NumberSpinBox.js | 7 + .../dialogs/se-elix/src/base/NumberSpinBox.js | 250 ++++++++++++++++++ .../se-elix/src/plain/PlainNumberSpinBox.js | 10 + src/editor/index.html | 2 +- 8 files changed, 272 insertions(+), 8 deletions(-) create mode 100644 src/editor/dialogs/se-elix/define/NumberSpinBox.js create mode 100644 src/editor/dialogs/se-elix/src/base/NumberSpinBox.js create mode 100644 src/editor/dialogs/se-elix/src/plain/PlainNumberSpinBox.js diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js index 91accd1f..50061ff4 100644 --- a/src/editor/components/seDropdown.js +++ b/src/editor/components/seDropdown.js @@ -1,10 +1,9 @@ /* eslint-disable node/no-unpublished-import */ import ListComboBox from 'elix/define/ListComboBox.js'; -import NumberSpinBox from 'elix/define/NumberSpinBox.js'; -// import Input from 'elix/src/base/Input.js'; import {defaultState} from 'elix/src/base/internal.js'; import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js'; import {internal} from 'elix'; +import NumberSpinBox from '../dialogs/se-elix/define/NumberSpinBox.js'; /** * @class Dropdown diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index 19cbc6bb..c4722270 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -1,5 +1,5 @@ /* eslint-disable node/no-unpublished-import */ -import 'elix/define/NumberSpinBox.js'; +import '../dialogs/se-elix/define/NumberSpinBox.js'; const template = document.createElement('template'); template.innerHTML = ` diff --git a/src/editor/components/seZoom.js b/src/editor/components/seZoom.js index 0f95a2ab..0a403030 100644 --- a/src/editor/components/seZoom.js +++ b/src/editor/components/seZoom.js @@ -1,9 +1,8 @@ /* eslint-disable node/no-unpublished-import */ import ListComboBox from 'elix/define/ListComboBox.js'; -import NumberSpinBox from 'elix/define/NumberSpinBox.js'; -// import Input from 'elix/src/base/Input.js'; import * as internal from 'elix/src/base/internal.js'; import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js'; +import NumberSpinBox from '../dialogs/se-elix/define/NumberSpinBox.js'; /** * @class Dropdown diff --git a/src/editor/dialogs/exportDialog.js b/src/editor/dialogs/exportDialog.js index efd54619..ff5a52a4 100644 --- a/src/editor/dialogs/exportDialog.js +++ b/src/editor/dialogs/exportDialog.js @@ -1,7 +1,6 @@ -/* eslint-disable max-len */ /* eslint-disable node/no-unpublished-import */ import 'elix/define/Dialog.js'; -import 'elix/define/NumberSpinBox.js'; +import './se-elix/define/NumberSpinBox.js'; const template = document.createElement('template'); template.innerHTML = ` diff --git a/src/editor/dialogs/se-elix/define/NumberSpinBox.js b/src/editor/dialogs/se-elix/define/NumberSpinBox.js new file mode 100644 index 00000000..034eafbc --- /dev/null +++ b/src/editor/dialogs/se-elix/define/NumberSpinBox.js @@ -0,0 +1,7 @@ +import PlainNumberSpinBox from '../src/plain/PlainNumberSpinBox.js'; +/** + * @class ElixNumberSpinBox + */ +export default class ElixNumberSpinBox extends PlainNumberSpinBox {} + +customElements.define('elix-number-spin-box', ElixNumberSpinBox); diff --git a/src/editor/dialogs/se-elix/src/base/NumberSpinBox.js b/src/editor/dialogs/se-elix/src/base/NumberSpinBox.js new file mode 100644 index 00000000..7e2b9512 --- /dev/null +++ b/src/editor/dialogs/se-elix/src/base/NumberSpinBox.js @@ -0,0 +1,250 @@ +/* eslint-disable node/no-unpublished-import */ +import { + defaultState, + setState, + state, + stateEffects +} from 'elix/src/base/internal.js'; +import { + SpinBox +} from 'elix/src/base/SpinBox.js'; + +/** + * @class NumberSpinBox + */ +class NumberSpinBox extends SpinBox { + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + if (name === 'max') { + this.max = parseFloat(newValue); + } else if (name === 'min') { + this.min = parseFloat(newValue); + } else if (name === 'step') { + this.step = parseFloat(newValue); + } else { + super.attributeChangedCallback(name, oldValue, newValue); + } + } + /** + * @function observedAttributes + * @returns {any} observed + */ + get [defaultState] () { + return Object.assign(super[defaultState], { + max: null, + min: null, + step: 1 + }); + } + + /** + * Format the numeric value as a string. + * + * This is used after incrementing/decrementing the value to reformat the + * value as a string. + * + * @param {number} value + * @param {number} precision + */ + formatValue (value, precision) { + return Number(value).toFixed(precision); + } + + /** + * The maximum allowable value of the `value` property. + * + * @type {number|null} + * @default 1 + */ + get max () { + return this[state].max; + } + /** + * The maximum allowable value of the `value` property. + * + * @type {number|null} + * @default 1 + */ + set max (max) { + this[setState]({ + max + }); + } + + /** + * The minimum allowable value of the `value` property. + * + * @type {number|null} + * @default 1 + */ + get min () { + return this[state].min; + } + /** + * @function set + * @returns {void} + */ + set min (min) { + this[setState]({ + min + }); + } + + /** + * Parse the given string as a number. + * + * This is used to parse the current value before incrementing/decrementing + * it. + * + * @param {string} value + * @param {number} precision + */ + parseValue(value, precision) { + const parsed = precision === 0 ? parseInt(value) : parseFloat(value); + return isNaN(parsed) ? 0 : parsed; + } + + [stateEffects] (state, changed) { + const effects = super[stateEffects]; + // If step changed, calculate its precision (number of digits after + // the decimal). + if (changed.step) { + const { + step + } = state; + const decimalRegex = /\.(\d)+$/; + const match = decimalRegex.exec(String(step)); + const precision = match && match[1] ? match[1].length : 0; + Object.assign(effects, { + precision + }); + } + + if (changed.max || changed.min || changed.value) { + // The value is valid if it falls between the min and max. + // TODO: We need a way to let other classes/mixins on the prototype chain + // contribute to validity -- if someone else thinks the value is invalid, + // we should respect that, even if the value falls within the min/max + // bounds. + const { + max, + min, + precision, + value + } = state; + const parsed = parseInt(value, precision); + if (value !== '' && isNaN(parsed)) { + Object.assign(effects, { + valid: false, + validationMessage: 'Value must be a number' + }); + } else if (!(max === null || parsed <= max)) { + Object.assign(effects, { + valid: false, + validationMessage: `Value must be less than or equal to ${max}.` + }); + } else if (!(min === null || parsed >= min)) { + Object.assign(effects, { + valid: false, + validationMessage: `Value must be greater than or equal to ${min}.` + }); + } else { + Object.assign(effects, { + valid: true, + validationMessage: '' + }); + } + // We can only go up if we're below max. + Object.assign(effects, { + canGoUp: isNaN(parsed) || state.max === null || parsed <= state.max + }); + + // We can only go down if we're above min. + Object.assign(effects, { + canGoDown: isNaN(parsed) || state.min === null || parsed >= state.min + }); + } + + return effects; + } + + /** + * The amount by which the `value` will be incremented or decremented. + * + * The precision of the step (the number of digits after any decimal) + * determines how the spin box will format the number. The default `step` + * value of 1 has no decimals, so the `value` will be formatted as an integer. + * A `step` of 0.1 will format the `value` as a number with one decimal place. + * + * @type {number} + * @default 1 + */ + get step () { + return this[state].step; + } + set step (step) { + if (!isNaN(step)) { + this[setState]({ + step + }); + } + } + + /** + * Decrements the `value` by the amount of the `step`. + * + * If the result is still greater than the `max` value, this will force + * `value` to `max`. + */ + stepDown () { + super.stepDown(); + const { + max, + precision, + value + } = this[state]; + let result = this.parseValue(value, precision) - this.step; + if (max !== null) { + result = Math.min(result, max); + } + const { + min + } = this[state]; + if (min === null || result >= min) { + this.value = this.formatValue(result, precision); + } + } + + /** + * Increments the `value` by the amount of the `step`. + * + * If the result is still smaller than the `min` value, this will force + * `value` to `min`. + */ + stepUp () { + super.stepUp(); + const { + min, + precision, + value + } = this[state]; + let result = this.parseValue(value, precision) + this.step; + if (min !== null) { + result = Math.max(result, min); + } + const { + max + } = this[state]; + if (max === null || result <= max) { + this.value = this.formatValue(result, precision); + } + } +} + +export default NumberSpinBox; diff --git a/src/editor/dialogs/se-elix/src/plain/PlainNumberSpinBox.js b/src/editor/dialogs/se-elix/src/plain/PlainNumberSpinBox.js new file mode 100644 index 00000000..a86af29e --- /dev/null +++ b/src/editor/dialogs/se-elix/src/plain/PlainNumberSpinBox.js @@ -0,0 +1,10 @@ +/* eslint-disable node/no-unpublished-import */ +import PlainSpinBoxMixin from 'elix/src/plain/PlainSpinBoxMixin.js'; +import NumberSpinBox from '../base/NumberSpinBox.js'; + +/** + * @class PlainNumberSpinBox + */ +class PlainNumberSpinBox extends PlainSpinBoxMixin(NumberSpinBox) {} + +export default PlainNumberSpinBox; diff --git a/src/editor/index.html b/src/editor/index.html index 8d14f2d9..a12f52ac 100644 --- a/src/editor/index.html +++ b/src/editor/index.html @@ -349,7 +349,7 @@ - +
From 18c16dbf3702fb0fc9c8f8f7534f06c0eb2b6366 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Tue, 19 Jan 2021 13:58:45 +0530 Subject: [PATCH 3/3] #39 eslint changes --- src/editor/components/seSpinInput.js | 1 - src/editor/dialogs/exportDialog.js | 2 +- .../dialogs/se-elix/src/base/NumberSpinBox.js | 48 +++++++++---------- src/editor/dialogs/sePromptDialog.js | 2 +- src/editor/svgedit.js | 4 +- 5 files changed, 27 insertions(+), 30 deletions(-) diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index c4722270..9a588589 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -1,4 +1,3 @@ -/* eslint-disable node/no-unpublished-import */ import '../dialogs/se-elix/define/NumberSpinBox.js'; const template = document.createElement('template'); diff --git a/src/editor/dialogs/exportDialog.js b/src/editor/dialogs/exportDialog.js index ff5a52a4..ea0596a8 100644 --- a/src/editor/dialogs/exportDialog.js +++ b/src/editor/dialogs/exportDialog.js @@ -101,7 +101,7 @@ export class SeExportDialog extends HTMLElement { this.$okBtn = this._shadowRoot.querySelector('#export_ok'); this.$cancelBtn = this._shadowRoot.querySelector('#export_cancel'); this.$exportOption = this._shadowRoot.querySelector('#se-storage-pref'); - this.$qualityCont = this._shadowRoot.querySelector('#se-quality'); + this.$qualityCont = this._shadowRoot.querySelector('#se-quality'); this.$input = this._shadowRoot.querySelector('elix-number-spin-box'); this.value = 1; } diff --git a/src/editor/dialogs/se-elix/src/base/NumberSpinBox.js b/src/editor/dialogs/se-elix/src/base/NumberSpinBox.js index 7e2b9512..55eb02c3 100644 --- a/src/editor/dialogs/se-elix/src/base/NumberSpinBox.js +++ b/src/editor/dialogs/se-elix/src/base/NumberSpinBox.js @@ -1,3 +1,4 @@ +/* eslint-disable class-methods-use-this */ /* eslint-disable node/no-unpublished-import */ import { defaultState, @@ -44,6 +45,7 @@ class NumberSpinBox extends SpinBox { } /** + * @function formatValue * Format the numeric value as a string. * * This is used after incrementing/decrementing the value to reformat the @@ -51,6 +53,7 @@ class NumberSpinBox extends SpinBox { * * @param {number} value * @param {number} precision + * @returns {number} */ formatValue (value, precision) { return Number(value).toFixed(precision); @@ -97,19 +100,21 @@ class NumberSpinBox extends SpinBox { } /** - * Parse the given string as a number. - * - * This is used to parse the current value before incrementing/decrementing - * it. - * - * @param {string} value + * @function parseValue + * @param {number} value * @param {number} precision + * @returns {int} */ - parseValue(value, precision) { + parseValue (value, precision) { const parsed = precision === 0 ? parseInt(value) : parseFloat(value); return isNaN(parsed) ? 0 : parsed; } - + /** + * @function stateEffects + * @param {any} state + * @param {any} changed + * @returns {any} + */ [stateEffects] (state, changed) { const effects = super[stateEffects]; // If step changed, calculate its precision (number of digits after @@ -175,19 +180,16 @@ class NumberSpinBox extends SpinBox { } /** - * The amount by which the `value` will be incremented or decremented. - * - * The precision of the step (the number of digits after any decimal) - * determines how the spin box will format the number. The default `step` - * value of 1 has no decimals, so the `value` will be formatted as an integer. - * A `step` of 0.1 will format the `value` as a number with one decimal place. - * - * @type {number} - * @default 1 + * @function get + * @returns {any} */ get step () { return this[state].step; } + /** + * @function set + * @returns {void} + */ set step (step) { if (!isNaN(step)) { this[setState]({ @@ -197,10 +199,8 @@ class NumberSpinBox extends SpinBox { } /** - * Decrements the `value` by the amount of the `step`. - * - * If the result is still greater than the `max` value, this will force - * `value` to `max`. + * @function stepDown + * @returns {void} */ stepDown () { super.stepDown(); @@ -222,10 +222,8 @@ class NumberSpinBox extends SpinBox { } /** - * Increments the `value` by the amount of the `step`. - * - * If the result is still smaller than the `min` value, this will force - * `value` to `min`. + * @function stepUp + * @returns {void} */ stepUp () { super.stepUp(); diff --git a/src/editor/dialogs/sePromptDialog.js b/src/editor/dialogs/sePromptDialog.js index b7e3a098..05d0bb5b 100644 --- a/src/editor/dialogs/sePromptDialog.js +++ b/src/editor/dialogs/sePromptDialog.js @@ -42,7 +42,7 @@ export class SePromptDialog extends HTMLElement { } break; default: - console.error('unkonw attr for:', name, 'newValue =', newValue); + // console.log('unkonw attr for:', name, 'newValue =', newValue); break; } } diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index d18252fc..1aee2464 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -1,4 +1,4 @@ -/* globals jQuery seConfirm seAlert seSelect */ +/* globals jQuery seConfirm seAlert */ /** * The main module for the visual SVG this. * @@ -993,7 +993,7 @@ class Editor extends EditorStartup { } /** - * + * @function copySelected * @returns {void} */ copySelected () {