From 8053b38e5858c45a876e406053c9612295688c5a Mon Sep 17 00:00:00 2001 From: Isaiah Odhner Date: Tue, 18 Jan 2022 13:33:44 -0500 Subject: [PATCH] Auto-format code with VS Code Format JS and HTML using VS Code extension: https://marketplace.visualstudio.com/items?itemName=jbockle.jbockle-format-files Dedented some files for now to make the diff intelligible: - tools.js - menus.js - speech-recognition.js - simulate-random-gestures.js --- .eslintrc.js | 2 +- cypress/cypress-image-snapshot-viewer.js | 16 +- cypress/integration/tool-tests.spec.js | 60 +- cypress/integration/visual-tests.spec.js | 8 +- index.html | 1309 ++++++++++++---------- src/$ColorBox.js | 44 +- src/$Component.js | 150 +-- src/$FontBox.js | 18 +- src/$ToolBox.js | 36 +- src/$ToolWindow.js | 10 +- src/Handles.js | 86 +- src/OnCanvasHelperLayer.js | 2 +- src/OnCanvasObject.js | 2 +- src/OnCanvasSelection.js | 30 +- src/OnCanvasTextBox.js | 46 +- src/app-localization.js | 10 +- src/app.js | 465 ++++---- src/edit-colors.js | 166 +-- src/electron-injected.js | 2 +- src/electron-main.js | 6 +- src/error-handling-enhanced.js | 4 +- src/extra-tools.js | 30 +- src/functions.js | 661 ++++++----- src/help.js | 180 +-- src/helpers.js | 118 +- src/image-manipulation.js | 560 ++++----- src/imgur.js | 86 +- src/manage-storage.js | 38 +- src/menus.js | 190 ++-- src/sessions.js | 85 +- src/simulate-random-gestures.js | 44 +- src/speech-recognition.js | 249 ++-- src/theme.js | 8 +- src/tool-options.js | 98 +- src/tools.js | 460 ++++---- src/vaporwave-fun.js | 37 +- test-news-newer.html | 9 +- 37 files changed, 2692 insertions(+), 2633 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 4c542a6..0c74180 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -191,7 +191,7 @@ module.exports = { "no-label-var": "error", // "no-shadow": "error", // "no-use-before-define": "error", - + // To target specific variables to rename or otherwise address: "no-restricted-globals": ["error", "event", "canvas", "ctx", "colors", "i", "j", "k", "x", "y", "z", "width", "height", "w", "h"], diff --git a/cypress/cypress-image-snapshot-viewer.js b/cypress/cypress-image-snapshot-viewer.js index 5431d1a..e7042b6 100644 --- a/cypress/cypress-image-snapshot-viewer.js +++ b/cypress/cypress-image-snapshot-viewer.js @@ -9,7 +9,7 @@ // @noframes // ==/UserScript== -(function() { +(function () { 'use strict'; let cleanUp = null; @@ -26,10 +26,10 @@ img.style.left = "0"; img.style.pointerEvents = "all"; img.draggable = false; - img.addEventListener("mouseenter", ()=> { + img.addEventListener("mouseenter", () => { img.style.left = `${-2 * screenshotWidth}px`; }); - img.addEventListener("mouseleave", ()=> { + img.addEventListener("mouseleave", () => { img.style.left = "0"; }); var container = document.createElement("div"); @@ -52,25 +52,25 @@ container.appendChild(img); document.body.appendChild(outerContainer); - cleanUp = ()=> { + cleanUp = () => { originalImg.style.opacity = ""; container.style.transformOrigin = "center center"; container.style.transition = "opacity 0.2s ease, transform 0.2s ease"; container.style.opacity = 0; container.style.transform = "scale(0.9)"; - setTimeout(()=> { + setTimeout(() => { outerContainer.remove(); }, 500); cleanUp = null; }; } - addEventListener("keydown", e=> { + addEventListener("keydown", e => { if (e.key === "d") { if (cleanUp) { cleanUp(); } else { - var originalImg = document.elementFromPoint(innerWidth/2, innerHeight/2); + var originalImg = document.elementFromPoint(innerWidth / 2, innerHeight / 2); if (!originalImg || !originalImg.matches("img")) { console.warn("Didn't find an image in the middle of the page. Found", originalImg); return; @@ -84,7 +84,7 @@ // mousedown is TAKEN - with stopPropagation, presumably // (useCapture doesn't help) - addEventListener("pointerdown", (e)=> { + addEventListener("pointerdown", (e) => { if (cleanUp) { cleanUp(); } }); diff --git a/cypress/integration/tool-tests.spec.js b/cypress/integration/tool-tests.spec.js index f537f02..d73eb17 100644 --- a/cypress/integration/tool-tests.spec.js +++ b/cypress/integration/tool-tests.spec.js @@ -18,7 +18,7 @@ context('tool tests', () => { }); beforeEach(() => { if (before_first_real_test) return; - cy.window().then({timeout: 60000}, async (win)=> { + cy.window().then({ timeout: 60000 }, async (win) => { win.selected_colors.foreground = "#000"; win.selected_colors.background = "#fff"; win.brush_shape = win.default_brush_shape; @@ -31,11 +31,11 @@ context('tool tests', () => { }); }); - const simulateGesture = (win, {start, end, shift, shiftToggleChance=0.01, secondary, secondaryToggleChance, target}) => { + const simulateGesture = (win, { start, end, shift, shiftToggleChance = 0.01, secondary, secondaryToggleChance, target }) => { target = target || win.$(".main-canvas")[0]; let startWithinRect = target.getBoundingClientRect(); let canvasAreaRect = win.$(".canvas-area")[0].getBoundingClientRect(); - + let startMinX = Math.max(startWithinRect.left, canvasAreaRect.left); let startMaxX = Math.min(startWithinRect.right, canvasAreaRect.right); let startMinY = Math.max(startWithinRect.top, canvasAreaRect.top); @@ -44,7 +44,7 @@ context('tool tests', () => { let startPointY = startMinY + start.y * (startMaxY - startMinY); let endPointX = startMinX + end.x * (startMaxX - startMinX); let endPointY = startMinY + end.y * (startMaxY - startMinY); - + const $cursor = win.$(``); $cursor.css({ position: "absolute", @@ -57,7 +57,7 @@ context('tool tests', () => { }); $cursor.appendTo(".jspaint"); let triggerMouseEvent = (type, point) => { - + const clientX = point.x; const clientY = point.y; // const el_over = win.document.elementFromPoint(clientX, clientY); @@ -72,7 +72,7 @@ context('tool tests', () => { if (do_nothing) { return; } - + let event = new win.$.Event(type, { view: window, bubbles: true, @@ -89,7 +89,7 @@ context('tool tests', () => { }); win.$(target).trigger(event); }; - + let t = 0; const stepsInGesture = 3; let pointForTime = (t) => { @@ -98,8 +98,8 @@ context('tool tests', () => { y: startPointY + (endPointY - startPointY) * Math.pow(t, 0.3), }; }; - - return new Promise((resolve)=> { + + return new Promise((resolve) => { triggerMouseEvent("pointerenter", pointForTime(t)); // so dynamic cursors follow the simulation cursor triggerMouseEvent("pointerdown", pointForTime(t)); let move = () => { @@ -112,9 +112,9 @@ context('tool tests', () => { // } if (t > 1) { triggerMouseEvent("pointerup", pointForTime(t)); - + $cursor.remove(); - + resolve(); } else { triggerMouseEvent("pointermove", pointForTime(t)); @@ -160,30 +160,30 @@ context('tool tests', () => { it(`eraser tool`, () => { cy.get(`.tool[title='Eraser/Color Eraser']`).click(); // gesture([{x: 50, y: 50}, {x: 100, y: 100}]); - cy.window().then({timeout: 60000}, async (win)=> { - for (let row=0; row<4; row++) { + cy.window().then({ timeout: 60000 }, async (win) => { + for (let row = 0; row < 4; row++) { const secondary = !!(row % 2); const increaseSize = row >= 2; let $options = win.$(`.chooser > *`); - for (let o=0; o<$options.length; o++) { + for (let o = 0; o < $options.length; o++) { $options[o].click(); if (increaseSize) { for (let i = 0; i < 5; i++) { - win.$('body').trigger(new win.$.Event("keydown", {key: "NumpadPlus", keyCode: 107, which: 107})); + win.$('body').trigger(new win.$.Event("keydown", { key: "NumpadPlus", keyCode: 107, which: 107 })); } } win.selected_colors.background = "#f0f"; - const start = {x: 0.05 + o*0.05, y: 0.1 + 0.1*row}; - const end = {x: start.x + 0.04, y: start.y + 0.04}; - await simulateGesture(win, {shift: false, secondary: false, start, end}); + const start = { x: 0.05 + o * 0.05, y: 0.1 + 0.1 * row }; + const end = { x: start.x + 0.04, y: start.y + 0.04 }; + await simulateGesture(win, { shift: false, secondary: false, start, end }); if (secondary) { // eslint-disable-next-line require-atomic-updates win.selected_colors.background = "#ff0"; // eslint-disable-next-line require-atomic-updates win.selected_colors.foreground = "#f0f"; - const start = {x: 0.04 + o*0.05, y: 0.11 + 0.1*row}; - const end = {x: start.x + 0.03, y: start.y + 0.02}; - await simulateGesture(win, {shift: false, secondary: true, start, end}); + const start = { x: 0.04 + o * 0.05, y: 0.11 + 0.1 * row }; + const end = { x: start.x + 0.03, y: start.y + 0.02 }; + await simulateGesture(win, { shift: false, secondary: true, start, end }); } } } @@ -191,13 +191,13 @@ context('tool tests', () => { cy.get(".main-canvas").matchImageSnapshot(); }); - ["Brush", "Pencil", "Rectangle", "Rounded Rectangle", "Ellipse", "Line"].forEach((toolName)=> { + ["Brush", "Pencil", "Rectangle", "Rounded Rectangle", "Ellipse", "Line"].forEach((toolName) => { it(`${toolName.toLowerCase()} tool`, () => { cy.get(`.tool[title='${toolName}']`).click(); // gesture([{x: 50, y: 50}, {x: 100, y: 100}]); cy.get(".swatch:nth-child(22)").rightclick(); - cy.window().then({timeout: 60000}, async (win)=> { - for (let row=0; row<4; row++) { + cy.window().then({ timeout: 60000 }, async (win) => { + for (let row = 0; row < 4; row++) { const secondary = !!(row % 2); const increaseSize = row >= 2; let $options = win.$(`.chooser > *`); @@ -205,16 +205,16 @@ context('tool tests', () => { if ($options.length === 0) { $options = win.$(""); } - for (let o=0; o<$options.length; o++) { + for (let o = 0; o < $options.length; o++) { $options[o].click(); - if (increaseSize && (o === 0 || toolName==="Brush" || toolName==="Line")) { + if (increaseSize && (o === 0 || toolName === "Brush" || toolName === "Line")) { for (let i = 0; i < 5; i++) { - win.$('body').trigger(new win.$.Event("keydown", {key: "NumpadPlus", keyCode: 107, which: 107})); + win.$('body').trigger(new win.$.Event("keydown", { key: "NumpadPlus", keyCode: 107, which: 107 })); } } - const start = {x: 0.05 + o*0.05, y: 0.1 + 0.1*row}; - const end = {x: start.x + 0.04, y: start.y + 0.04}; - await simulateGesture(win, {shift: false, secondary: !!secondary, start, end}); + const start = { x: 0.05 + o * 0.05, y: 0.1 + 0.1 * row }; + const end = { x: start.x + 0.04, y: start.y + 0.04 }; + await simulateGesture(win, { shift: false, secondary: !!secondary, start, end }); } } }); diff --git a/cypress/integration/visual-tests.spec.js b/cypress/integration/visual-tests.spec.js index 2f8632c..5235bb9 100644 --- a/cypress/integration/visual-tests.spec.js +++ b/cypress/integration/visual-tests.spec.js @@ -59,7 +59,7 @@ context('visual tests', () => { cy.get('.tools-component').matchImageSnapshot(toolboxCompareOptions); }); - beforeEach(()=> { + beforeEach(() => { if (Cypress.$('.window:visible')[0]) { cy.get('.window:visible .window-close-button').click(); cy.get('.window').should('not.be.visible'); @@ -90,7 +90,7 @@ context('visual tests', () => { // @TODO: make menus more testable, with IDs cy.get('.menus > .menu-container:nth-child(6) > .menu-button > .menu-hotkey').click(); cy.get('.menus > .menu-container:nth-child(6) > .menu-popup > table > tr:nth-child(1)').click(); - cy.get('.window:visible .folder', {timeout: 10000}); // wait for sidebar contents to load + cy.get('.window:visible .folder', { timeout: 10000 }); // wait for sidebar contents to load // @TODO: wait for iframe to load cy.get('.window:visible').matchImageSnapshot(Object.assign({}, withTextCompareOptions, { blackout: ["iframe"] })); }); @@ -133,7 +133,7 @@ context('visual tests', () => { cy.matchImageSnapshot(withTextCompareOptions); }); - const test_edit_colors_dialog = (expand=true) => { + const test_edit_colors_dialog = (expand = true) => { cy.contains(".menu-button", "Colors").click(); cy.contains(".menu-item", "Edit Colors").click(); cy.wait(100); @@ -169,7 +169,7 @@ context('visual tests', () => { cy.matchImageSnapshot(withTextCompareOptions); }); - it('classic theme edit colors dialog', ()=> { + it('classic theme edit colors dialog', () => { test_edit_colors_dialog(false); }); diff --git a/index.html b/index.html index 8f67d66..2405245 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,13 @@ - - - JS Paint - - - + JS Paint + + + + - - - - - - - - - - + + + + - + - - - + - - - - - - - + + + + + + + - + - - - - - - - - - - - - - - - - - - -