From 9ba4fa47b240d65422043670963b8f7d8270a7de Mon Sep 17 00:00:00 2001 From: Matheus Vieira Date: Wed, 17 Nov 2021 21:37:08 -0300 Subject: [PATCH 1/7] scatter: Removed option to change x-axis scale --- .../menus/EditMenu/menus/uPlot/types/scatter.js | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js b/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js index 236eeb8..94fdf0b 100644 --- a/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js +++ b/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js @@ -44,20 +44,6 @@ module.exports = class uPlotScatter { }, ], }), - xAxesScale: Field.select({ - label: 'Escala', - att: 'type', - options: [ - { - text: 'Linear', - value: 1, - }, - { - text: 'Logaritimica', - value: 2, - }, - ], - }), scaleOpts: Container.formRow({ xAxesDirection: Field.select( { From d4b9c12f823c8be4f13d2f5b7d55908e1fc80e4e Mon Sep 17 00:00:00 2001 From: Matheus Vieira Date: Wed, 17 Nov 2021 21:37:32 -0300 Subject: [PATCH 2/7] blockContainer: css auto height update --- src/components/blockContainer/blockContainer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/blockContainer/blockContainer.js b/src/components/blockContainer/blockContainer.js index 70fc8ee..c4b40de 100644 --- a/src/components/blockContainer/blockContainer.js +++ b/src/components/blockContainer/blockContainer.js @@ -80,7 +80,8 @@ module.exports = class BlockContainer { this.htmlComponent.classList.add('grid-stack-item'); this.content = document.createElement('div'); this.content.style.flex = '1'; - + this.content.style.overflow = 'auto'; + this.body = this.buildBody(); this.header = this.buildHeader(); From 36b238faf850d96e70141c522ab5dfcfaffc4a22 Mon Sep 17 00:00:00 2001 From: Matheus Vieira Date: Wed, 17 Nov 2021 21:39:55 -0300 Subject: [PATCH 3/7] catter: add the zoom-wheel plugin --- .../blocks/Blocks/uPlot/plugins/zoom-wheel.js | 110 ++++++++++++++++++ src/components/blocks/Blocks/uPlot/scatter.js | 40 +++++-- 2 files changed, 139 insertions(+), 11 deletions(-) create mode 100644 src/components/blocks/Blocks/uPlot/plugins/zoom-wheel.js diff --git a/src/components/blocks/Blocks/uPlot/plugins/zoom-wheel.js b/src/components/blocks/Blocks/uPlot/plugins/zoom-wheel.js new file mode 100644 index 0000000..1ff3160 --- /dev/null +++ b/src/components/blocks/Blocks/uPlot/plugins/zoom-wheel.js @@ -0,0 +1,110 @@ + + +module.exports = function wheelZoomPlugin(opts) { + let factor = opts.factor || 0.75; + + let xMin, xMax, yMin, yMax, xRange, yRange; + + function clamp(nRange, nMin, nMax, fRange, fMin, fMax) { + if (nRange > fRange) { + nMin = fMin; + nMax = fMax; + } + else if (nMin < fMin) { + nMin = fMin; + nMax = fMin + nRange; + } + else if (nMax > fMax) { + nMax = fMax; + nMin = fMax - nRange; + } + + return [nMin, nMax]; + } + + return { + hooks: { + ready: u => { + xMin = u.scales.x.min; + xMax = u.scales.x.max; + yMin = u.scales.y.min; + yMax = u.scales.y.max; + + xRange = xMax - xMin; + yRange = yMax - yMin; + + let over = u.over; + let rect = over.getBoundingClientRect(); + + over.addEventListener("mousedown", e => { + if (e.button == 1) { + e.preventDefault(); + + let left0 = e.clientX; + + let scXMin0 = u.scales.x.min; + let scXMax0 = u.scales.x.max; + + let xUnitsPerPx = u.posToVal(1, 'x') - u.posToVal(0, 'x'); + + function onmove(e) { + e.preventDefault(); + + let left1 = e.clientX; + + let dx = xUnitsPerPx * (left1 - left0); + + u.setScale('x', { + min: scXMin0 - dx, + max: scXMax0 - dx, + }); + } + + function onup(e) { + document.removeEventListener("mousemove", onmove); + document.removeEventListener("mouseup", onup); + } + + document.addEventListener("mousemove", onmove); + document.addEventListener("mouseup", onup); + } + }); + + over.addEventListener("wheel", e => { + e.preventDefault(); + + let { left, top } = u.cursor; + + let leftPct = left / rect.width; + let btmPct = 1 - top / rect.height; + let xVal = u.posToVal(left, "x"); + let yVal = u.posToVal(top, "y"); + let oxRange = u.scales.x.max - u.scales.x.min; + let oyRange = u.scales.y.max - u.scales.y.min; + + let nxRange = e.deltaY < 0 ? oxRange * factor : oxRange / factor; + let nxMin = xVal - leftPct * nxRange; + let nxMax = nxMin + nxRange; + [nxMin, nxMax] = clamp(nxRange, nxMin, nxMax, xRange, xMin, xMax); + + let nyRange = e.deltaY < 0 ? oyRange * factor : oyRange / factor; + let nyMin = yVal - btmPct * nyRange; + let nyMax = nyMin + nyRange; + [nyMin, nyMax] = clamp(nyRange, nyMin, nyMax, yRange, yMin, yMax); + + u.batch(() => { + u.setScale("x", { + min: nxMin, + max: nxMax, + }); + + u.setScale("y", { + min: nyMin, + max: nyMax, + }); + }); + }); + } + } + }; +} diff --git a/src/components/blocks/Blocks/uPlot/scatter.js b/src/components/blocks/Blocks/uPlot/scatter.js index e8b812d..3c9b95f 100644 --- a/src/components/blocks/Blocks/uPlot/scatter.js +++ b/src/components/blocks/Blocks/uPlot/scatter.js @@ -2,6 +2,7 @@ const Block = require('../block'); const uPlot = require('uplot'); const { v4: uuidv4 } = require('uuid'); +const ZoomWheelPlugin = require('./plugins/zoom-wheel'); // eslint-disable-next-line no-unused-vars const ElementResize = require('javascript-detect-element-resize'); @@ -20,10 +21,30 @@ module.exports = class Scatter extends Block { this.initR = false; this.type = "uPlot"; + + this.opt.plugins = [ + ZoomWheelPlugin({ factor: 0.75 }) + ] } get formConfig() { + const response = { + axes: { + x: { + dir: this.opt.scales.x.dir, + inputName: this.opt.series[0].label, + side: this.opt.axes[0].side, + }, + y: { + dir: this.opt.scales.y.dir, + side: this.opt.axes[1].side, + type: this.opt.scales.y.distr + } + } + } + + this._formConfig.uPlot.scatter = { ...response }; return this._formConfig } @@ -123,20 +144,14 @@ module.exports = class Scatter extends Block { if (index >= 0) { if (this.opt.series.length === 2) { - this.data = [[...Array(11).keys()], []]; - this.opt.series.push(); - this.opt.series.splice(index + 1, 1); - - const newMockData = [...Array(11).keys()].map((value) => (Math.sin(value) + (this.opt.series.length - 2))); - if (this.opt.series.length > this.data.length) this.data.push(newMockData); + this.opt.series.splice(1, 1); + this.opt.series.push({}); } else { this.opt.series.splice(index, 1); this.data.pop(); } - } - this.redraw(); } @@ -168,15 +183,16 @@ module.exports = class Scatter extends Block { setAutoResize() { - const widget = this.htmlComponent.parentElement; + const widget = this.htmlComponent; addResizeListener(widget, () => { - this.plot.setSize({ width: widget.offsetWidth, height: widget.offsetHeight * 0.8, }); + this.redraw(); + }); } @@ -225,7 +241,9 @@ module.exports = class Scatter extends Block { this.data = preSavedConfig.data; this.opt = preSavedConfig.opt; - + this.opt.plugins = [ + ZoomWheelPlugin({ factor: 0.75 }) + ] this.plot = new uPlot(this.opt, this.data, this.htmlComponent); for (let i = 0; i < this.opt.series.length; i++) { From 62c997a62ad4ca8aabb733438d709ea591bf99d7 Mon Sep 17 00:00:00 2001 From: Matheus Vieira Date: Wed, 17 Nov 2021 21:43:42 -0300 Subject: [PATCH 4/7] scatter: fixes mismatch between displayed scale and menu scale --- src/components/blocks/Blocks/uPlot/scatter.js | 6 ++++-- .../menus/EditMenu/menus/uPlot/types/scatter.js | 10 ++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/blocks/Blocks/uPlot/scatter.js b/src/components/blocks/Blocks/uPlot/scatter.js index 3c9b95f..5414fab 100644 --- a/src/components/blocks/Blocks/uPlot/scatter.js +++ b/src/components/blocks/Blocks/uPlot/scatter.js @@ -88,6 +88,9 @@ module.exports = class Scatter extends Block { if (!notRedraw) this.redraw(); + this.opt.scales.x.range = undefined; + this.opt.scales.y.range = undefined; + } editXAxis(newConfig) { @@ -95,8 +98,7 @@ module.exports = class Scatter extends Block { this.opt.series[0].inputName = newConfig.inputName; this.opt.series[0].label = newConfig.inputName; - this.opt.scales.x.distr = Number(newConfig.type); - this.opt.scales.x.dir = newConfig.dir; + this.opt.scales.x.dir = Number(newConfig.dir); this.opt.axes[0].side = Number(newConfig.side); this.redraw(); } diff --git a/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js b/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js index 94fdf0b..557cded 100644 --- a/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js +++ b/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js @@ -68,15 +68,13 @@ module.exports = class uPlotScatter { att: 'side', classList: ['col-6'], options: [ - { - text: 'Em cima', - value: 0 - }, { text: 'Embaixo', value: 2 + }, { + text: 'Em cima', + value: 0 } - ], }, ), @@ -98,7 +96,7 @@ module.exports = class uPlotScatter { }, { text: 'Logaritimica', - value: 2, + value: 3, }, ], }), From f5c59fa11d96a008b086c2b7530e915433022945 Mon Sep 17 00:00:00 2001 From: Matheus Vieira Date: Wed, 17 Nov 2021 21:44:04 -0300 Subject: [PATCH 5/7] plotly: removing plotly --- .../menus/EditMenu/menus/plotly/plotly.js | 89 --- .../EditMenu/menus/plotly/plotlyLayout.js | 46 -- .../EditMenu/menus/plotly/types/scatter.js | 572 ------------------ 3 files changed, 707 deletions(-) delete mode 100644 src/components/sideMenu/menus/EditMenu/menus/plotly/plotly.js delete mode 100644 src/components/sideMenu/menus/EditMenu/menus/plotly/plotlyLayout.js delete mode 100644 src/components/sideMenu/menus/EditMenu/menus/plotly/types/scatter.js diff --git a/src/components/sideMenu/menus/EditMenu/menus/plotly/plotly.js b/src/components/sideMenu/menus/EditMenu/menus/plotly/plotly.js deleted file mode 100644 index ee73583..0000000 --- a/src/components/sideMenu/menus/EditMenu/menus/plotly/plotly.js +++ /dev/null @@ -1,89 +0,0 @@ -const Container = require('../../../../../formBuilder/formBuilder').Container; -const Field = require('../../../../../formBuilder/formBuilder').Field; -const PlotlyLayoutConfig = require('./plotlyLayout'); -const PlotlyScatter = require('./types/scatter'); - - -module.exports = class PlotlyEditMenu { - - constructor() { - - this.plotlyScatter = new PlotlyScatter(); - - this.form = Container.div({ - plotTypes: Container.spliter( - { - plotType: Field.select({ - label: 'Selecione um tipo: ', - att: 'type', - id: 'plotlyTypeSelector', - options: [ - { - text: 'scatter', - }, - { - text: 'bar', - }, - { - text: 'heatmap', - }, - { - text: 'pie', - }, - { - text: 'image', - }, - { - text: 'table', - }, - ], - }), - exportType: Field.select({ - label: 'Selecione um tipo: ', - att: 'config.toImageButtonOptions.format', - options: [ - { - text: 'Png', - value: 'png', - }, - { - text: 'Svg', - value: 'svg', - }, - { - text: 'Jpeg', - value: 'jpeg', - }, - { - text: 'Webp', - value: 'webp', - }, - ], - - }), - }, - { - startOpen: true, - text: 'Tipos de plot', - id: 'plotlyType', - }, - ), - layoutConfig: PlotlyLayoutConfig, - scatterConfig: this.plotlyScatter.form, - }, - { - id: 'PlotlyEditMenuConfig', - att: 'Plotly', - conditions: [ - { - id: 'BlockModule', - att: 'value', - requiredValue: 'Plotly', - }, - ], - }, - ); - - } - -}; \ No newline at end of file diff --git a/src/components/sideMenu/menus/EditMenu/menus/plotly/plotlyLayout.js b/src/components/sideMenu/menus/EditMenu/menus/plotly/plotlyLayout.js deleted file mode 100644 index 6bef8c2..0000000 --- a/src/components/sideMenu/menus/EditMenu/menus/plotly/plotlyLayout.js +++ /dev/null @@ -1,46 +0,0 @@ -const Container = require('../../../../../formBuilder/formBuilder').Container; -const Field = require('../../../../../formBuilder/formBuilder').Field; - -const PlotlyLayoutConfig = Container.spliter({ - Title: Field.text({ - att: 'title.text', - label: 'Título', - }), - TitleFontSize: Field.select({ - label: 'Tamanho', - att: 'title.font.size', - options: [ - { - text: 16, - }, - { - text: 20, - }, - { - text: 24, - }, - { - text: 28, - }, - { - text: 32, - }, - { - text: 36, - }, - ], - }), - Legend: Field.checkBox({ - label: 'Mostrar Legenda', - att: 'showlegend', - }), -}, -{ - startOpen: false, - text: 'Layout', - att: 'layout', - id: 'PlotlyLayout', -}, -); - -module.exports = PlotlyLayoutConfig; \ No newline at end of file diff --git a/src/components/sideMenu/menus/EditMenu/menus/plotly/types/scatter.js b/src/components/sideMenu/menus/EditMenu/menus/plotly/types/scatter.js deleted file mode 100644 index bfc06ec..0000000 --- a/src/components/sideMenu/menus/EditMenu/menus/plotly/types/scatter.js +++ /dev/null @@ -1,572 +0,0 @@ -const Container = require('../../../../../../formBuilder/formBuilder').Container; -const Field = require('../../../../../../formBuilder/formBuilder').Field; -const Validator = require('../../../../../../formBuilder/validator'); -const Components = require('../../../../../../components'); -const EventHandler = require('../../../../../../eventHandler/eventHandler'); - -module.exports = class PlotlyScatter { - - constructor() { - - this.eventHandler = new EventHandler(); - - this.styleSection = Container.spliter({ - selectedSerie: Field.select({ - att: 'currTraceName', - label: 'Série', - }), - showMarkers: Field.checkBox({ - label: 'Pontos', - att: 'showMarkers', - id: 'PlotlyScatterShowMarkers', - }), - markersOptions: Container.div({ - markerStyle: Container.formRow({ - markersSize: Field.select( - { - label: 'Tamanho', - att: 'size', - classList: ['col-6'], - options: [ - { - text: 4, - }, - { - text: 6, - }, - { - text: 8, - }, - { - text: 10, - }, - { - text: 12, - }, - { - text: 14, - }, - ], - }, - ), - markersColor: Field.colorPicker({ - label: 'Cor', - att: 'color', - classList: ['col-6'], - }), - }), - }, { - att: 'marker', - conditions: [ - { - id: 'PlotlyScatterShowMarkers', - att: 'checked', - requiredValue: true, - }, - ], - }), - showLines: Field.checkBox({ - label: 'Linhas', - att: 'showLines', - id: 'PlotlyScatterShowLines', - }), - lineOptions: Container.div({ - linStyle: Container.formRow({ - lineWidth: Field.select( - { - label: 'Tamanho', - att: 'width', - classList: ['col-6'], - options: [ - { - text: 4, - }, - { - text: 6, - }, - { - text: 8, - }, - { - text: 10, - }, - { - text: 12, - }, - { - text: 14, - }, - ], - }, - ), - lineColor: Field.colorPicker({ - label: 'Cor', - att: 'color', - classList: ['col-6'], - }), - }), - lineOption: Container.formRow({ - lineDash: Field.select( - { - label: 'Tracejado', - att: 'dash', - classList: ['col-6'], - options: [ - { - text: 'Sólido', - value: 'solid', - }, - { - text: 'Pontilhado', - value: 'dot', - }, - { - text: 'Tracejado', - value: 'dash', - }, - { - text: 'Travessão', - value: 'longdash', - }, - { - text: 'Traço e ponto', - value: 'dashdot', - }, - ], - }, - ), - lineShape: Field.select({ - label: 'Interpolação', - att: 'shape', - classList: ['col-6'], - options: [ - { - text: 'Linear', - value: 'linear', - }, - { - text: 'Suave', - value: 'spline', - }, - { - text: 'Degraus 1', - value: 'hv', - }, - { - text: 'Degraus 2', - value: 'vh', - }, - { - text: 'Degraus 3', - value: 'hvh', - }, - { - text: 'Degraus 4', - value: 'vhv', - }, - ], - }), - }), - }, { - att: 'line', - conditions: [ - { - id: 'PlotlyScatterShowLines', - att: 'checked', - requiredValue: true, - }, - ], - }), - }, { - startOpen: false, - att: 'trace', - text: 'Estilo', - id: 'PlotlySeriesStyle', - }); - - this.form = Container.div({ - PlotlySeries: Container.spliter({ - newSerieName: Field.text({ - att: 'name', - validators: [Validator.isFilled, Validator.noSpecialChars, this.nameAlreadyExist], - append: [ - { - type: 'button', - content: Components.icon('plus-square'), - classList: ['formButtonWithIconPrepend'], - }, - ], - }), - xAxis: Field.select({ - att: 'x', - prepend: [ - { - type: 'text', - text: 'X', - classList: ['formTextPrepend'], - }, - ], - }), - yAxis: Field.select({ - att: 'y', - prepend: [ - { - type: 'text', - text: 'Y', - classList: ['formTextPrepend'], - }, - ], - }), - }, { - startOpen: false, - att: 'newTrace', - text: 'Series', - id: 'PlotlySeries', - }), - PlotlySeriesStyle: this.styleSection, - plotlyXAxesStyle: Container.spliter({ - xAxesTitle: Field.text({ - att: 'title.text', - label: 'Título', - }), - xAxesStyle: Field.select({ - label: 'Tamanho', - att: 'title.font.size', - options: [ - { - text: 10, - }, - { - text: 12, - }, - { - text: 14, - }, - { - text: 16, - }, - { - text: 18, - }, - { - text: 20, - }, - ], - }), - xAxesScale: Field.select({ - label: 'Escala', - att: 'type', - options: [ - { - text: 'Linear', - value: 'linear', - }, - { - text: 'Logaritimica', - value: 'log', - }, - ], - }), - }, { - att: '../layout.xaxis', - startOpen: false, - text: 'Eixo X', - id: 'plotlyXAxeStyle', - }), - plotlyYAxesStyle: Container.spliter({ - yAxesTitle: Field.text({ - att: 'title.text', - label: 'Título', - }), - yAxesStyle: Field.select({ - att: 'title.font.size', - label: 'Tamanho', - options: [ - { - text: 10, - }, - { - text: 12, - }, - { - text: 14, - }, - { - text: 16, - }, - { - text: 18, - }, - { - text: 20, - }, - ], - }), - yAxesScale: Field.select({ - att: 'type', - label: 'Escala', - options: [ - { - text: 'Linear', - value: 'linear', - }, - { - text: 'Logaritimica', - value: 'log', - }, - ], - }), - }, { - att: '../layout.yaxis', - startOpen: false, - text: 'Eixo Y', - id: 'plotlyYAxeStyle', - }), - }, { - id: 'PlotlyScatterConfig', - att: 'scatter', - conditions: [ - { - id: 'plotlyTypeSelector', - att: 'value', - requiredValue: 'scatter', - }, - ], - }, - ); - - this.init(); - - } - - attXandYInputList() { - - const callBack = (input) => { - - return [input.name, input.name]; - - }; - - let allInputs = []; - - allInputs = allInputs.concat(window.CurrentInputGroup.rawInputs); - allInputs = allInputs.concat(window.CurrentInputGroup.inputs); - - this.form.formTree.PlotlySeries.xAxis.setOptions(allInputs, callBack); - this.form.formTree.PlotlySeries.yAxis.setOptions(allInputs, callBack); - - } - - nameAlreadyExist(currentSerieName) { - - for (let i = 0; i < window.CurrentBlock.block.data.length; i++) { - - if (window.CurrentBlock.block.data[i].name === currentSerieName) { - - return 'Esse nome já existe'; - - } - - } - - return true; - - } - - addNewTrace() { - - window.CurrentBlock.sendBlockInstruction({ - - command: 'addTrace', - data: { - name: this.form.formTree.PlotlySeries.newSerieName.value, - mode: 'lines+markers', - xInput: this.form.formTree.PlotlySeries.xAxis.value, - yInput: this.form.formTree.PlotlySeries.yAxis.value, - }, - }); - - this.form.formTree.PlotlySeries.newSerieName.value = ''; - - } - - editTrace() { - - window.CurrentBlock.sendBlockInstruction({ - - command: 'editTrace', - data: this.styleSection.getData(), - - }); - - } - - attStyleSection() { - - const currentSerieName = this.styleSection.formTree.selectedSerie.value; - const currentSerie = this.setTraceType(this.getTraceByName(currentSerieName)); - - this.styleDataSetter(currentSerie); - - this.styleSection.setConditions(); - - - } - - attSeriesSelector() { - - const callBack = (trace) => { - - return [trace.name, trace.name]; - - }; - - this.form.formTree.PlotlySeriesStyle.selectedSerie.setOptions(window.CurrentBlock.block.data, callBack); - - } - - setEvents() { - - this.eventHandler.addEventListener('AttInputList', () => { - - this.attXandYInputList(); - - }); - - this.form.formTree.PlotlySeries.self.htmlComponent.addEventListener('input', (evt) => { - - evt.stopPropagation(); - - }); - - this.styleSection.formTree.selectedSerie.htmlComponent.addEventListener('input', (evt) => { - - this.attStyleSection(); - evt.stopPropagation(); - - }); - - this.styleSection.htmlComponent.addEventListener('input', (evt) => { - - this.editTrace(); - evt.stopPropagation(); - - }); - - - } - - getTraceByName(serieName) { - - let currentSerie; - - for (let i = 0; i < window.CurrentBlock.block.data.length; i++) { - - if (window.CurrentBlock.block.data[i].name === serieName) { - - currentSerie = window.CurrentBlock.block.data[i]; - break; - - } - - } - - return currentSerie; - - } - - setTraceType(currentSerie) { - - if (!currentSerie) { - - return currentSerie = { - showMarkers: false, - showLines: false, - }; - - }; - - if (currentSerie.mode === 'lines+markers' || currentSerie.mode === undefined) { - - currentSerie.showMarkers = true; - currentSerie.showLines = true; - - } else if (currentSerie.mode === 'markers') { - - currentSerie.showMarkers = true; - currentSerie.showLines = false; - - } else { - - currentSerie.showLines = true; - currentSerie.showMarkers = false; - if (currentSerie.visible == false) { - - currentSerie.showLines = false; - - } - - } - - return currentSerie; - - } - - styleDataSetter(currentSerie) { - - const wrapper = {}; - wrapper['Plotly.scatter.trace'] = currentSerie; - - this.styleSection.containers.forEach((container) => { - - container.setData(wrapper); - - }); - - wrapper['form.Plotly.scatter.trace'] = currentSerie; - const atts = this.styleSection.objToPathList(wrapper); - - this.styleSection.fields.forEach((field) => { - - - if (atts[field.att] !== undefined) { - - field.value = atts[field.att]; - - } - - }); - - } - - init() { - - this.setEvents(); - - this.form.formTree.PlotlySeries.newSerieName.append[0].onclick = () => { - - if (this.form.formTree.PlotlySeries.self.validate()) { - - this.addNewTrace(); - this.attSeriesSelector(); - if (window.CurrentBlock.block.data.length <= 1) this.attStyleSection(); - - - } - - }; - - this.styleSection.setData = () => { - - this.attSeriesSelector(); - - const currentSerieName = this.styleSection.formTree.selectedSerie.value; - const currentSerie = this.setTraceType(this.getTraceByName(currentSerieName)); - - this.styleDataSetter(currentSerie); - - }; - - } - -}; \ No newline at end of file From 61971e510c8c7366d924dd45670e432bbfdd4248 Mon Sep 17 00:00:00 2001 From: Matheus Vieira Date: Wed, 17 Nov 2021 21:44:51 -0300 Subject: [PATCH 6/7] uPlot: catching unimplemented block error --- src/components/blocks/Blocks/uPlot/uPlot.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/blocks/Blocks/uPlot/uPlot.js b/src/components/blocks/Blocks/uPlot/uPlot.js index a1a14db..f0ebc4d 100644 --- a/src/components/blocks/Blocks/uPlot/uPlot.js +++ b/src/components/blocks/Blocks/uPlot/uPlot.js @@ -11,10 +11,10 @@ module.exports = class uPlot { try { return new blocks[preConfig.uPlot.type](preConfig, htmlComponent); - } catch { + } catch(error) { console.warn(`TIPO DE BLOCO AINDA NÃO IMPLEMENTADO: ${preConfig.uPlot.type}`, error) } - +i } }; \ No newline at end of file From 6758f77f2cddfa0c8edf001358879a124fad1489 Mon Sep 17 00:00:00 2001 From: Matheus Vieira Date: Wed, 17 Nov 2021 21:51:43 -0300 Subject: [PATCH 7/7] typos: fixing typos and cases erros --- assets/blocksConfig/uPlotSection.json | 18 ++++++---- .../blockContainer/blockContainer.js | 2 +- .../blocks/Blocks/uPlot/plugins/zoom-wheel.js | 12 +++---- src/components/blocks/Blocks/uPlot/scatter.js | 14 ++++---- src/components/components.js | 8 ++--- src/components/formBuilder/Field.js | 4 +-- src/components/formBuilder/formBuilder.js | 12 +++---- .../sideMenu/menus/EditMenu/EditMenu.js | 4 +-- .../sideMenu/menus/EditMenu/menus/GPS/GPS.js | 2 +- .../EditMenu/menus/uPlot/types/scatter.js | 34 +++++++++--------- .../menus/EditMenu/menus/uPlot/uPlot.js | 2 +- .../sideMenu/menus/blocksMenu/section.js | 4 +-- .../sideMenu/menus/dashboards/dashBoards.js | 10 +++--- .../sideMenu/menus/inputsMenu/inputsMenu.js | 36 +++++++++---------- .../menus/inputsMenu/rawInputsList.js | 4 +-- .../menus/newDashboard/newDashboard.js | 8 ++--- .../sideMenu/menus/startRead/startRead.js | 8 ++--- .../menus/terminalMenu/terminalMenu.js | 16 ++++----- src/css/menus.css | 10 +++--- 19 files changed, 107 insertions(+), 101 deletions(-) diff --git a/assets/blocksConfig/uPlotSection.json b/assets/blocksConfig/uPlotSection.json index 50ca971..263a243 100644 --- a/assets/blocksConfig/uPlotSection.json +++ b/assets/blocksConfig/uPlotSection.json @@ -5,23 +5,29 @@ "type": "scatter", "opt": { "pxAlign": false, + "cursor": { + "drag": { + "x":true, + "y":true, + "uni": 50 + } + }, "scales": { "x": { "time": false, - "auto": true + "auto": true, + "range": [0,10] }, "y": { - "auto": true + "auto": true, + "range": [0,10] } }, - "axes": [{ + "axis": [{ "space": 30 },{ "space":30 }], - "cursor": { - "show": true - }, "series": [{}, {}] } } diff --git a/src/components/blockContainer/blockContainer.js b/src/components/blockContainer/blockContainer.js index c4b40de..446a331 100644 --- a/src/components/blockContainer/blockContainer.js +++ b/src/components/blockContainer/blockContainer.js @@ -133,7 +133,7 @@ module.exports = class BlockContainer { } - uptadeBlockGeneralConfig(newConfig) { + updateBlockGeneralConfig(newConfig) { this.eventHandler.dispatchEvent('DashboardNotSaved'); diff --git a/src/components/blocks/Blocks/uPlot/plugins/zoom-wheel.js b/src/components/blocks/Blocks/uPlot/plugins/zoom-wheel.js index 1ff3160..9ffec1d 100644 --- a/src/components/blocks/Blocks/uPlot/plugins/zoom-wheel.js +++ b/src/components/blocks/Blocks/uPlot/plugins/zoom-wheel.js @@ -47,7 +47,7 @@ module.exports = function wheelZoomPlugin(opts) { let xUnitsPerPx = u.posToVal(1, 'x') - u.posToVal(0, 'x'); - function onmove(e) { + function onMove(e) { e.preventDefault(); let left1 = e.clientX; @@ -60,13 +60,13 @@ module.exports = function wheelZoomPlugin(opts) { }); } - function onup(e) { - document.removeEventListener("mousemove", onmove); - document.removeEventListener("mouseup", onup); + function onUp(e) { + document.removeEventListener("mousemove", onMove); + document.removeEventListener("mouseup", onUp); } - document.addEventListener("mousemove", onmove); - document.addEventListener("mouseup", onup); + document.addEventListener("mousemove", onMove); + document.addEventListener("mouseup", onUp); } }); diff --git a/src/components/blocks/Blocks/uPlot/scatter.js b/src/components/blocks/Blocks/uPlot/scatter.js index 5414fab..f6e61e4 100644 --- a/src/components/blocks/Blocks/uPlot/scatter.js +++ b/src/components/blocks/Blocks/uPlot/scatter.js @@ -30,15 +30,15 @@ module.exports = class Scatter extends Block { get formConfig() { const response = { - axes: { + axis: { x: { dir: this.opt.scales.x.dir, inputName: this.opt.series[0].label, - side: this.opt.axes[0].side, + side: this.opt.axis[0].side, }, y: { dir: this.opt.scales.y.dir, - side: this.opt.axes[1].side, + side: this.opt.axis[1].side, type: this.opt.scales.y.distr } } @@ -99,7 +99,7 @@ module.exports = class Scatter extends Block { this.opt.series[0].label = newConfig.inputName; this.opt.scales.x.dir = Number(newConfig.dir); - this.opt.axes[0].side = Number(newConfig.side); + this.opt.axis[0].side = Number(newConfig.side); this.redraw(); } @@ -109,7 +109,7 @@ module.exports = class Scatter extends Block { this.opt.scales.y.dir = newConfig.dir; - this.opt.axes[1].side = Number(newConfig.side); + this.opt.axis[1].side = Number(newConfig.side); this.redraw(); @@ -138,9 +138,9 @@ module.exports = class Scatter extends Block { }); } - removeSerie(rmvdSerie) { + removeSerie(removedSerie) { - let currSerie = this.opt.series.find(serie => serie.uuid === rmvdSerie.uuid); + let currSerie = this.opt.series.find(serie => serie.uuid === removedSerie.uuid); let index = this.opt.series.indexOf(currSerie); if (index >= 0) { diff --git a/src/components/components.js b/src/components/components.js index d749aaa..42a260c 100644 --- a/src/components/components.js +++ b/src/components/components.js @@ -2,10 +2,10 @@ const fs = require('fs'); module.exports = class Components { - static spliter(id, text, content, startOpen) { + static splitter(id, text, content, startOpen) { const card = document.createElement('div'); - card.className = 'card menuSpliter'; + card.className = 'card menuSplitter'; const cardHeader = document.createElement('div'); @@ -27,11 +27,11 @@ module.exports = class Components { if (startOpen) { cardBodyCollapse.className = 'collapse show'; - cardHeader.className = 'card-header menuSpliter-header'; + cardHeader.className = 'card-header menuSplitter-header'; } else { - cardHeader.className = 'card-header menuSpliter-header collapsed'; + cardHeader.className = 'card-header menuSplitter-header collapsed'; cardBodyCollapse.className = 'collapse'; } diff --git a/src/components/formBuilder/Field.js b/src/components/formBuilder/Field.js index 32ab34d..e94c8d6 100644 --- a/src/components/formBuilder/Field.js +++ b/src/components/formBuilder/Field.js @@ -105,8 +105,8 @@ module.exports = class Field { cont++; } - const splited = attributesUntilHere.split('.'); - const sliced = splited.slice(0, splited.length - cont); + const splitted = attributesUntilHere.split('.'); + const sliced = splitted.slice(0, splitted.length - cont); this.att.split('.').forEach((att) => { diff --git a/src/components/formBuilder/formBuilder.js b/src/components/formBuilder/formBuilder.js index 2fba0dd..1864bc8 100644 --- a/src/components/formBuilder/formBuilder.js +++ b/src/components/formBuilder/formBuilder.js @@ -73,8 +73,8 @@ class FormPattern { } if (attributesUntilHere !== undefined) { - const splited = attributesUntilHere.split('.'); - const sliced = splited.slice(0, splited.length - cont); + const splitted = attributesUntilHere.split('.'); + const sliced = splitted.slice(0, splitted.length - cont); sliced.push(this.att); this.att = sliced.join('.'); @@ -335,14 +335,14 @@ class Container extends FormPattern { return container; } - static spliter(config, containerConfig) { + static splitter(config, containerConfig) { containerConfig = containerConfig || {}; const container = new Container(config, containerConfig); const card = document.createElement('div'); - card.className = 'card menuSpliter'; + card.className = 'card menuSplitter'; const cardHeader = document.createElement('div'); @@ -367,11 +367,11 @@ class Container extends FormPattern { if (containerConfig.startOpen) { cardBodyCollapse.className = 'collapse show'; - cardHeader.className = 'card-header menuSpliter-header'; + cardHeader.className = 'card-header menuSplitter-header'; } else { - cardHeader.className = 'card-header menuSpliter-header collapsed'; + cardHeader.className = 'card-header menuSplitter-header collapsed'; cardBodyCollapse.className = 'collapse'; } diff --git a/src/components/sideMenu/menus/EditMenu/EditMenu.js b/src/components/sideMenu/menus/EditMenu/EditMenu.js index e67276f..2186d6e 100644 --- a/src/components/sideMenu/menus/EditMenu/EditMenu.js +++ b/src/components/sideMenu/menus/EditMenu/EditMenu.js @@ -24,7 +24,7 @@ module.exports = class EditMenu extends Menu { } - this.generalContainer = Container.spliter({ + this.generalContainer = Container.splitter({ title: Field.text({ label: 'Título', att: 'blockTitle', @@ -119,7 +119,7 @@ module.exports = class EditMenu extends Menu { }; this.generalContainer.htmlComponent.oninput = () => { - this.currentBlock.uptadeBlockGeneralConfig(this.form.getData()); + this.currentBlock.updateBlockGeneralConfig(this.form.getData()); }; diff --git a/src/components/sideMenu/menus/EditMenu/menus/GPS/GPS.js b/src/components/sideMenu/menus/EditMenu/menus/GPS/GPS.js index 9ea6a29..9358a89 100644 --- a/src/components/sideMenu/menus/EditMenu/menus/GPS/GPS.js +++ b/src/components/sideMenu/menus/EditMenu/menus/GPS/GPS.js @@ -9,7 +9,7 @@ module.exports = class MapEditMenu { this.eventHandler = new EventHandler(); this.form = Container.div({ - GPSconfig: Container.spliter({ + GPSconfig: Container.splitter({ longitude: Field.select({ att: 'longitude', label: "Longitude", diff --git a/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js b/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js index 557cded..4d747fc 100644 --- a/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js +++ b/src/components/sideMenu/menus/EditMenu/menus/uPlot/types/scatter.js @@ -10,7 +10,7 @@ module.exports = class uPlotScatter { this.eventHandler = new EventHandler(); - this.seriesSection = Container.spliter({ + this.seriesSection = Container.splitter({ newSerie: Container.div({ newSerieSelector: Field.select({ label: 'Nova série', @@ -32,7 +32,7 @@ module.exports = class uPlotScatter { this.form = Container.div({ uPlotSeriesStyle: this.seriesSection, - uPlotXAxesStyle: Container.spliter({ + uPlotXAxisStyle: Container.splitter({ xAxis: Field.select({ att: 'inputName', label: "Eixo X", @@ -45,7 +45,7 @@ module.exports = class uPlotScatter { ], }), scaleOpts: Container.formRow({ - xAxesDirection: Field.select( + xAxisDirection: Field.select( { label: 'Direção', att: 'dir', @@ -62,7 +62,7 @@ module.exports = class uPlotScatter { ], }, ), - xAxesPos: Field.select( + xAxisPos: Field.select( { label: 'Posição', att: 'side', @@ -85,8 +85,8 @@ module.exports = class uPlotScatter { text: 'Eixo X', id: 'uPlotXAxeStyle', }), - uPlotYAxesStyle: Container.spliter({ - yAxesScale: Field.select({ + uPlotYAxisStyle: Container.splitter({ + yAxisScale: Field.select({ label: 'Escala', att: 'type', options: [ @@ -95,13 +95,13 @@ module.exports = class uPlotScatter { value: 1, }, { - text: 'Logaritimica', + text: 'Logarítmica', value: 3, }, ], }), scaleOpts: Container.formRow({ - yAxesDirection: Field.select( + yAxisDirection: Field.select( { label: 'Tamanho', att: 'dir', @@ -118,7 +118,7 @@ module.exports = class uPlotScatter { ], }, ), - yAxesPos: Field.select( + yAxisPos: Field.select( { label: 'Posição', att: 'side', @@ -169,7 +169,7 @@ module.exports = class uPlotScatter { window.CurrentBlock.sendBlockInstruction({ command: 'editXAxis', - data: this.form.formTree.uPlotXAxesStyle.self.getData().blockConfig.uPlot.scatter.axis.x + data: this.form.formTree.uPlotXAxisStyle.self.getData().blockConfig.uPlot.scatter.axis.x }); } @@ -178,12 +178,12 @@ module.exports = class uPlotScatter { window.CurrentBlock.sendBlockInstruction({ command: 'editYAxis', - data: this.form.formTree.uPlotYAxesStyle.self.getData().blockConfig.uPlot.scatter.axis.y + data: this.form.formTree.uPlotYAxisStyle.self.getData().blockConfig.uPlot.scatter.axis.y }); } - attXandYInputList() { + attXAndYInputList() { const callBack = (input) => { @@ -196,7 +196,7 @@ module.exports = class uPlotScatter { allInputs = allInputs.concat(window.CurrentInputGroup.rawInputs); allInputs = allInputs.concat(window.CurrentInputGroup.inputs); - this.form.formTree.uPlotXAxesStyle.xAxis.setOptions(allInputs, callBack); + this.form.formTree.uPlotXAxisStyle.xAxis.setOptions(allInputs, callBack); this.seriesSection.formTree.newSerie.newSerieSelector.setOptions(allInputs, callBack); } @@ -314,7 +314,7 @@ module.exports = class uPlotScatter { this.eventHandler.addEventListener('AttInputList', () => { - this.attXandYInputList(); + this.attXAndYInputList(); }); @@ -340,17 +340,17 @@ module.exports = class uPlotScatter { }; - this.form.formTree.uPlotXAxesStyle.self.htmlComponent.addEventListener('input', (evt) => { + this.form.formTree.uPlotXAxisStyle.self.htmlComponent.addEventListener('input', (evt) => { this.editXAxis(); evt.stopPropagation(); }); - this.form.formTree.uPlotYAxesStyle.self.htmlComponent.addEventListener('input', (evt) => { + this.form.formTree.uPlotYAxisStyle.self.htmlComponent.addEventListener('input', (evt) => { this.editYAxis(); - evt.stopPropagation(); + //evt.stopPropagation(); }); diff --git a/src/components/sideMenu/menus/EditMenu/menus/uPlot/uPlot.js b/src/components/sideMenu/menus/EditMenu/menus/uPlot/uPlot.js index 64e35fc..a345d6e 100644 --- a/src/components/sideMenu/menus/EditMenu/menus/uPlot/uPlot.js +++ b/src/components/sideMenu/menus/EditMenu/menus/uPlot/uPlot.js @@ -9,7 +9,7 @@ module.exports = class uPlotEditMenu { this.uPlotScatter = new uPlotScatter(); this.form = Container.div({ - plotTypes: Container.spliter( + plotTypes: Container.splitter( { plotType: Field.select({ label: 'Selecione um tipo: ', diff --git a/src/components/sideMenu/menus/blocksMenu/section.js b/src/components/sideMenu/menus/blocksMenu/section.js index ed7b44e..281e29c 100644 --- a/src/components/sideMenu/menus/blocksMenu/section.js +++ b/src/components/sideMenu/menus/blocksMenu/section.js @@ -15,9 +15,9 @@ module.exports = class Section { sectionSplitter() { - const spliter = Components.spliter(this.id, this.title, this.blocks, true); + const splitter = Components.splitter(this.id, this.title, this.blocks, true); - this.htmlComponent.appendChild(spliter); + this.htmlComponent.appendChild(splitter); } /** diff --git a/src/components/sideMenu/menus/dashboards/dashBoards.js b/src/components/sideMenu/menus/dashboards/dashBoards.js index b5e7d5f..cc9c06e 100644 --- a/src/components/sideMenu/menus/dashboards/dashBoards.js +++ b/src/components/sideMenu/menus/dashboards/dashBoards.js @@ -22,16 +22,16 @@ module.exports = class DashBoardsMenu extends Menu { }); } - dashboardListSpliter() { + dashboardListSplitter() { - const spliter = Components.spliter('dashBoardsList', 'Dashboards salvos', this.container, true); - spliter.style.height = '100%'; - this.menuComponent.appendChild(spliter); + const splitter = Components.splitter('dashBoardsList', 'Dashboards salvos', this.container, true); + splitter.style.height = '100%'; + this.menuComponent.appendChild(splitter); } load() { - this.dashboardListSpliter(); + this.dashboardListSplitter(); this.attDashBoardsList(); this.EventHandler.addEventListener('AttDashBoardsList', ()=>{ diff --git a/src/components/sideMenu/menus/inputsMenu/inputsMenu.js b/src/components/sideMenu/menus/inputsMenu/inputsMenu.js index 3b82e16..ef2a251 100644 --- a/src/components/sideMenu/menus/inputsMenu/inputsMenu.js +++ b/src/components/sideMenu/menus/inputsMenu/inputsMenu.js @@ -20,7 +20,7 @@ module.exports = class InputsMenu extends Menu { }); this.entryInput = new Form({ - newInputSpliter: Container.spliter({ + newInputSplitter: Container.splitter({ name: Field.text({ label: 'Tag', att: 'name', @@ -35,7 +35,7 @@ module.exports = class InputsMenu extends Menu { }, { startOpen: true, text: 'Edição de entradas', - id: 'inputEditingSpliter', + id: 'inputEditingSplitter', }), }); @@ -48,10 +48,10 @@ module.exports = class InputsMenu extends Menu { } - inputListSpliter(id, name, container) { + inputListSplitter(id, name, container) { - const spliter = Components.spliter(id, name, container, true); - this.menuComponent.appendChild(spliter); + const splitter = Components.splitter(id, name, container, true); + this.menuComponent.appendChild(splitter); } @@ -76,14 +76,14 @@ module.exports = class InputsMenu extends Menu { if (!this.entryInput.validate()) return; const inputData = this.entryInput.getData(); - inputData.expressionEntry = this.entryInput.formTree.newInputSpliter.expression.input; + inputData.expressionEntry = this.entryInput.formTree.newInputSplitter.expression.input; inputData.callback = (answer) =>{ if (answer.error) { - if (answer.nameError) this.entryInput.formTree.newInputSpliter.name.showWarning(answer.nameError); - if (answer.expressionError) this.entryInput.formTree.newInputSpliter.expression.showWarning(answer.expressionError); + if (answer.nameError) this.entryInput.formTree.newInputSplitter.name.showWarning(answer.nameError); + if (answer.expressionError) this.entryInput.formTree.newInputSplitter.expression.showWarning(answer.expressionError); } else { @@ -103,14 +103,14 @@ module.exports = class InputsMenu extends Menu { if (!this.entryInput.validate()) return; const inputData = this.entryInput.getData(); - inputData.expressionEntry = this.entryInput.formTree.newInputSpliter.expression.input; + inputData.expressionEntry = this.entryInput.formTree.newInputSplitter.expression.input; inputData.callback = (answer) =>{ if (answer.error) { - if (answer.nameError) this.entryInput.formTree.newInputSpliter.name.showWarning(answer.nameError); - if (answer.expressionError) this.entryInput.formTree.newInputSpliter.expression.showWarning(answer.expressionError); + if (answer.nameError) this.entryInput.formTree.newInputSplitter.name.showWarning(answer.nameError); + if (answer.expressionError) this.entryInput.formTree.newInputSplitter.expression.showWarning(answer.expressionError); } else { @@ -195,15 +195,15 @@ module.exports = class InputsMenu extends Menu { }, ], }); - this.tribute.attach(this.entryInput.formTree.newInputSpliter.expression.input); + this.tribute.attach(this.entryInput.formTree.newInputSplitter.expression.input); } setEditMode(currentName, currentExp) { this.button.htmlComponent.textContent = 'Editar entrada'; - this.entryInput.formTree.newInputSpliter.name.value = currentName; - this.entryInput.formTree.newInputSpliter.expression.value = currentExp; + this.entryInput.formTree.newInputSplitter.name.value = currentName; + this.entryInput.formTree.newInputSplitter.expression.value = currentExp; this.currentInputName = currentName; this.editMode = true; @@ -211,14 +211,14 @@ module.exports = class InputsMenu extends Menu { cleanInputEntry() { - this.entryInput.formTree.newInputSpliter.name.value = ''; - this.entryInput.formTree.newInputSpliter.expression.value = ''; + this.entryInput.formTree.newInputSplitter.name.value = ''; + this.entryInput.formTree.newInputSplitter.expression.value = ''; } appendTag(tag) { - this.entryInput.formTree.newInputSpliter.expression.input.appendChild(tag); + this.entryInput.formTree.newInputSplitter.expression.input.appendChild(tag); } @@ -232,7 +232,7 @@ module.exports = class InputsMenu extends Menu { this.setFormConfigs(); this.setAutoCompleteConfigs(); - this.inputListSpliter('inputSpliter', 'Entradas Salvas', this.inputList); + this.inputListSplitter('inputSplitter', 'Entradas Salvas', this.inputList); this.eventHandler.addEventListener('AttInputList', () => { diff --git a/src/components/sideMenu/menus/inputsMenu/rawInputsList.js b/src/components/sideMenu/menus/inputsMenu/rawInputsList.js index 8f8e239..6a9ff3c 100644 --- a/src/components/sideMenu/menus/inputsMenu/rawInputsList.js +++ b/src/components/sideMenu/menus/inputsMenu/rawInputsList.js @@ -43,7 +43,7 @@ module.exports = class RawInputsList { }), this.rawInputList = new Form({ - newDashboardSpliter: Container.spliter({ + newDashboardSplitter: Container.splitter({ rawInput: this.rawInputSelector, editField: this.editField, rawInputsAddButton: this.addButton, @@ -51,7 +51,7 @@ module.exports = class RawInputsList { }, { startOpen: true, text: 'Dados Recebidos', - id: 'rawInputSpliter', + id: 'rawInputSplitter', }, ), }); diff --git a/src/components/sideMenu/menus/newDashboard/newDashboard.js b/src/components/sideMenu/menus/newDashboard/newDashboard.js index 9460b4e..bf283ef 100644 --- a/src/components/sideMenu/menus/newDashboard/newDashboard.js +++ b/src/components/sideMenu/menus/newDashboard/newDashboard.js @@ -21,7 +21,7 @@ module.exports = class newDashBoardMenu extends Menu { }); this.form = new Form({ - newDashBoardSpliter: Container.spliter({ + newDashBoardSplitter: Container.splitter({ Name: Field.text({ label: 'Nome', att: 'name', @@ -45,7 +45,7 @@ module.exports = class newDashBoardMenu extends Menu { }, { startOpen: true, text: 'Novo Dashboard', - id: 'newDashBoardSpliter', + id: 'newDashBoardSplitter', }), }); @@ -87,7 +87,7 @@ module.exports = class newDashBoardMenu extends Menu { dropzoneConfig() { this.dropzone = document.createElement('div'); - const spliter = Components.spliter('importDashboardSpliter', 'Importar Dashboard', this.dropzone, true); + const splitter = Components.splitter('importDashboardSplitter', 'Importar Dashboard', this.dropzone, true); this.dropzone.style.padding = '3em 1.4em'; this.dropzone.style.color = 'whitesmoke'; @@ -168,7 +168,7 @@ module.exports = class newDashBoardMenu extends Menu { }; - return spliter; + return splitter; } diff --git a/src/components/sideMenu/menus/startRead/startRead.js b/src/components/sideMenu/menus/startRead/startRead.js index 74b7269..bed7bfc 100644 --- a/src/components/sideMenu/menus/startRead/startRead.js +++ b/src/components/sideMenu/menus/startRead/startRead.js @@ -55,7 +55,7 @@ module.exports = class StartRead extends Menu { }); this.form = new Form({ - startReadSplitter: Container.spliter({ + startReadSplitter: Container.splitter({ dataChannel: Field.select({ label: 'Fonte dos dados', att: 'readFrom', @@ -288,9 +288,9 @@ module.exports = class StartRead extends Menu { load() { - const spliterContainer = document.createElement('div'); - spliterContainer.className = 'menuBody'; - spliterContainer.appendChild(this.form.htmlComponent); + const splitterContainer = document.createElement('div'); + splitterContainer.className = 'menuBody'; + splitterContainer.appendChild(this.form.htmlComponent); this.menuComponent.appendChild(this.form.htmlComponent); this.serialPorts(); diff --git a/src/components/sideMenu/menus/terminalMenu/terminalMenu.js b/src/components/sideMenu/menus/terminalMenu/terminalMenu.js index 5ac85e1..74a3277 100644 --- a/src/components/sideMenu/menus/terminalMenu/terminalMenu.js +++ b/src/components/sideMenu/menus/terminalMenu/terminalMenu.js @@ -15,7 +15,7 @@ module.exports = class TerminalMenu extends Menu { this.eventHandler = new EventHandler(); this.serialTerminal = new Form({ - serialTerminalSpliter: Container.spliter({ + serialTerminalSplitter: Container.splitter({ sendData: Field.text({ label: 'Enviar informação via Serial', att: 'sendData', @@ -27,7 +27,7 @@ module.exports = class TerminalMenu extends Menu { }, { startOpen: true, text: 'Terminal Serial', - id: 'serialTerminalSpliter', + id: 'serialTerminalSplitter', }), }); @@ -66,7 +66,7 @@ module.exports = class TerminalMenu extends Menu { const serialTerminalContainer = this.configSerialTerminal(); - this.serialTerminal.formTree.serialTerminalSpliter.sendData.htmlComponent.appendChild(serialTerminalContainer); + this.serialTerminal.formTree.serialTerminalSplitter.sendData.htmlComponent.appendChild(serialTerminalContainer); this.menuComponent.appendChild(this.serialTerminal.htmlComponent); for (let i = 0; i < document.getElementsByClassName('xterm-cursor-layer').length; i++) { @@ -75,20 +75,20 @@ module.exports = class TerminalMenu extends Menu { } - this.serialTerminal.formTree.serialTerminalSpliter.sendData.htmlComponent.addEventListener('keyup', (evt) => { + this.serialTerminal.formTree.serialTerminalSplitter.sendData.htmlComponent.addEventListener('keyup', (evt) => { if (evt.keyCode === 13 && window.GlobalContext === 'running') { evt.preventDefault(); - this.eventHandler.SendSerialData(this.serialTerminal.formTree.serialTerminalSpliter.sendData.value); + this.eventHandler.SendSerialData(this.serialTerminal.formTree.serialTerminalSplitter.sendData.value); - if (this.serialTerminal.formTree.serialTerminalSpliter.echoCheckout.value) { + if (this.serialTerminal.formTree.serialTerminalSplitter.echoCheckout.value) { - this.eventHandler.RawData(this.serialTerminal.formTree.serialTerminalSpliter.sendData.value); + this.eventHandler.RawData(this.serialTerminal.formTree.serialTerminalSplitter.sendData.value); } - this.serialTerminal.formTree.serialTerminalSpliter.sendData.value = ''; + this.serialTerminal.formTree.serialTerminalSplitter.sendData.value = ''; } diff --git a/src/css/menus.css b/src/css/menus.css index 878b207..112ed01 100644 --- a/src/css/menus.css +++ b/src/css/menus.css @@ -33,7 +33,7 @@ padding-bottom: 0px; } -.menuSpliter { +.menuSplitter { border-radius: 0px !important; border: none; color: darkgray; @@ -41,16 +41,16 @@ overflow-y: auto; } -.menuSpliter-header svg { +.menuSplitter-header svg { margin-right: 0.2em; fill: darkgray; } -.menuSpliter-header[aria-expanded="false"] svg { +.menuSplitter-header[aria-expanded="false"] svg { transform: rotate(90deg); } -.menuSpliter-header { +.menuSplitter-header { border-radius: 0px !important; border-radius: 0px !important; display: flex; @@ -65,7 +65,7 @@ border: none; } -.menuSpliter-header:hover { +.menuSplitter-header:hover { cursor: pointer; }