From 8aa1d766bfa4be57d4389e99c690ab797ee2c0c3 Mon Sep 17 00:00:00 2001 From: TheTastefulToastie <44216702+TheTastefulToastie@users.noreply.github.com> Date: Wed, 14 Nov 2018 13:56:22 +0000 Subject: [PATCH] Resize window and textarea (#59) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Fix all the broken things... Man! This was so spaghetti'd I'm now Italian... ~ Removed a break from the switch statement in the constructor of CommandExecutor which meant that float values were pushed to the argument list twice (once as a float and then again as a command). ~ In Parser.parse() moved the call to nextToken() out of the else condition so that it is always executed. The intended functionality is to call parseExpression() when the argument type is int or float. After this change nextToken() was always executed regardless, then parseExpression was executed as well if the expression was an int or float, causing arguments to get skipped resulting in attempts to invoke numbers as if they were commands. ~ Renamed COMMAND_TYPES to ARGUMENT_TYPES but not everywhere causing ReferenceErrors ~ #30 Removed calls to parseInt() and parseFloat() in the CommandExecutor constructor because an argument may be an Expression object. #52 Added them back causing Expression objects to become NaN ~ Missing brace at end of parser.js ~ #50 also removed the calls to drawingBounds.reset() and drawingBounds.move(turtle.x, turtle.y) which obviously broke the autofit-drawing-to-canvas feature ~ The autofit-drawing-to-canvas feature was also broken because someone removed the call to the function ¯\_(ツ)_/¯ * Remove bounding box debug rect() * Switch statements should have breaks, not bugs :ant: * Changed variable name back In a previous commit changed 'str' to 'arg' when arg could be a mix of int-as-string/float-as-string/Expression #55 Changed this and now it will always be string so 'str' is more appropriate. * [Bugfix] Can't reselect default drawing Looks like selecting the 'Default' item in the dropdown used to clear the textarea and the drawing until [this](https://github.com/CodingTrain/Logo/pull/51/files#diff-9f2094443505273ff51ea1d1702e4367L101) commit removed it. So now the drawing remains unchanged when selecting the default item. It then resets the camera position and calls goTurtle() to redraw which causes the view to jump off-center. Instead it should put the default Logo in the textarea and call scaleToFitBoundingBox() to redraw _and_ center the drawing. This commit makes this change. * Resize window and textarea ## New Features - Responsive layout using CSS Grid - Resize the canvas, redraw, scale and align the drawing when resizing the window. - Added a dragable handle to the top of the textarea which can be used to make it taller or shorter. ### Example Gifs ![](https://i.imgur.com/fIVdff8.gif) ![](https://i.imgur.com/fnsTjqy.gif) ### YouTube Video [![](https://img.youtube.com/vi/_YAQjl79nOU/0.jpg)](https://youtu.be/_YAQjl79nOU) ## Bugfixes: - Resizing the textarea was super sluggish because it had "transition: all" which meant it would try to animate while the user resized it. Changed this to "transition: border" as this is what actually gets animated when it gains/loses focus. - Changed "-webkit-grab" to "grab" so that it works in other browsers too. - When resizing the textarea the copyright footer would flow onto the same line and appear next to it because it was an inline element. - The textarea had no padding or margin on the right-hand size and would sometimes overflow out of view. Made the textarea padding and margin symmetrical. - When the window was small the background color button would overflow out of view. * Use grabbing cursor while dragging canvas Use 'cursor: grab' on :hover and 'cursor: grabbing' when :active (when the user drags the mouse in the canvas) --- index.html | 7 ++-- sketch.js | 57 +++++++++++++++++++++++++++++++-- style.css | 93 +++++++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 137 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index caf21c9..6b618e0 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,7 @@