Skip to content

Commit

Permalink
Resize window and textarea (#59)
Browse files Browse the repository at this point in the history
* 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 🐜

* 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)
  • Loading branch information
TheTastefulToastie authored and shiffman committed Nov 14, 2018
1 parent 176ba61 commit 8aa1d76
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 20 deletions.
7 changes: 4 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
<body>
<div id="banner">
<img src="./assets/img/turtle.svg" style="width: 40px; height: 40px;" alt="">
<span style="padding-top: 10px;">LOGO</span>
<span id="LOGO">LOGO</span>
<select id="testdata" style="width: 150px;"></select>

<span class="ico_btn_dark" id="recentre" style="padding-top: 2px;" tooltip="Recentre">
Expand All @@ -38,11 +38,12 @@
<!-- Canvas div -->
<div id="logo-canvas"></div>

<!-- Editor -->
<!-- Editor -->
<div id="resize-handle" class="resize-handle"><div></div></div>
<textarea id="code" cols="40" rows="4" autocomplete="false" spellcheck="false" autofocus></textarea>

<!-- Icon Copyright info -->
<small style="color: white; font-family: 'Montserrat'; padding-top: 10px;">
<small class="copyright-footer">
Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Turtle">Turtle</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
</small>

Expand Down
57 changes: 55 additions & 2 deletions sketch.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,41 @@ let dragStartCanvasOffset = new p5.Vector();
let allCases;
let bgcolor = "#6040e6";

let resizingEditor = false;

// Used for scaling drawings to fit the canvas
let canvasScrollX = 0;
let canvasScrollY = 0;
let canvasScaleX = 1;
let canvasScaleY = 1;
let drawingBounds = new BoundingBox();
let drawingPadding = 100; // Padding round the edge of the drawing when autofit

function preload() {
loadJSON("./assets/tests.json", createTestDataView);
}

function getCanvasSize() {
const bounds = select("#logo-canvas").elt.getBoundingClientRect();
return { width: bounds.width, height: bounds.height };
}

function windowResized() {
const canvasSize = getCanvasSize();
resizeCanvas(canvasSize.width, canvasSize.height);
updateResizeHandlePosition();
scaleToFitBoundingBox(drawingBounds);
}

function setup() {
canvas = createCanvas(windowWidth - 10, windowHeight - 220);
const canvasSize = getCanvasSize();
canvas = createCanvas(canvasSize.width, canvasSize.height);
div = document.querySelector("#logo-canvas");

div.appendChild(canvas.elt);

// Use a setTimeout with length 0 to call windowResized immediately after the DOM has updated (since we are dynamically injecting a canvas element)
setTimeout(windowResized, 0);

angleMode(DEGREES);
background(bgcolor);

Expand Down Expand Up @@ -70,8 +87,11 @@ function setup() {
}

function scaleToFitBoundingBox(boundingBox) {
// Run this once first so we can measure the size of the drawing
goTurtle();

// 15% padding around the drawing in the canvas
let drawingPadding = Math.min(width, height) * 0.15;
let scale = Math.min((width - drawingPadding) / (boundingBox.width), (height - drawingPadding) / (boundingBox.height));
canvasScaleX = canvasScaleY = scale;
canvasScrollX = (drawingBounds.x * scale - width * .5);
Expand Down Expand Up @@ -155,3 +175,36 @@ function createTestDataView(cases) {
scaleToFitBoundingBox(drawingBounds);
});
}

function updateResizeHandlePosition() {
const resizeHandle = select('#resize-handle').elt;
const editorBounds = editor.elt.getBoundingClientRect();
resizeHandle.style.top = `${editorBounds.top - 8}px`;
resizeHandle.style.width = `${editorBounds.width}px`;
}

function updateEditorSize(mouseY) {
const resizeHandleBounds = select('#resize-handle').elt.getBoundingClientRect();
const editorBounds = editor.elt.getBoundingClientRect();
editor.elt.style.height = `${editorBounds.bottom - mouseY - 8}px`;
windowResized();
updateResizeHandlePosition();
}

function resizeHandleMouseDown() {
resizingEditor = true;
}

function windowMouseMove(ev) {
if (resizingEditor)
updateEditorSize(ev.clientY);
}

function windowMouseUp() {
resizingEditor = false;
updateResizeHandlePosition();
}

document.getElementById('resize-handle').addEventListener('mousedown', resizeHandleMouseDown);
document.addEventListener('mousemove', windowMouseMove);
document.addEventListener('mouseup', windowMouseUp);
93 changes: 78 additions & 15 deletions style.css
Original file line number Diff line number Diff line change
@@ -1,22 +1,39 @@
body {
padding: 0;
margin: 0 5px 5px 5px;
margin: 0;
background: rgba(0, 0, 0, 0.7);
overflow: hidden;
width: Calc(100vw - 1em);
height: 100vh;
display: grid;
grid-gap: 0.5em;
grid-template-columns: 100vw;
grid-template-rows: 4em 3.5fr auto 1.5em;
grid-template-areas: 'banner'
'canvas'
'editor'
'footer';
}

#banner {
#banner {
grid-area: banner;
background: #F5F5F5;
width: 100%;
height: 20px;
padding: 10px 0 35px 20px;
margin-left: -5px;
padding: 10px 20px 35px 20px;
font-weight: 800;
display: grid;
grid-template-columns: 1.5fr 18fr 3.5fr 1fr 1.4fr;
font-size: 20px;
font-family: 'Montserrat', 'Open Sans';
/* position: absolute; */
}

#LOGO {
padding-top: 10px;
padding-left: 10px;
}

#banner select {
margin-right: 10px;
}

span[tooltip]::before {
Expand All @@ -35,7 +52,7 @@ span[tooltip]:hover::before {
font-size: 15px;
padding: 5px 10px;
border-radius: 10px;

transition: opacity 1ms ease-in-out;
}

Expand Down Expand Up @@ -64,29 +81,75 @@ a {
}

#code {
grid-area: editor;
font-size: 20px;
margin: 0 10px 0 9px;
width: 99%;
width: Calc(100% - 42px);
outline: none;
border: 3px solid rgba(83, 81, 81, 0.6);
border-radius: 10px;
padding: 5px 0 0 10px;
padding: 5px 10px 0 10px;
box-shadow: 0px 5px 8px 1px rgba(0, 0, 0, .3);
background: #1f2223;
color: #ffffff;
transition: all 250ms ease-in;

transition: border 250ms ease-in;
}

canvas {
border-radius: 10px;
box-shadow: 0px 5px 8px 1px rgba(0, 0, 0, .3);
textarea#code {
resize: none;
}

#code:focus {
border: 3px solid rgba(11, 44, 230, 0.5);
}

#logo-canvas {
margin: 5px 5px 5px 0;
cursor: -webkit-grab;
grid-area: canvas;
margin: 0 0.5em;
cursor: grab;
overflow: hidden;
border-radius: 10px;
box-shadow: 0px 5px 8px 1px rgba(0, 0, 0, .3);
}

#logo-canvas:active {
cursor: grabbing;
}

.copyright-footer {
grid-area: footer;
color: white;
font-family: 'Montserrat';
padding: 0 0.5em;
}

.resize-handle {
position: fixed;
left: 0;
right: 0;
width: 300px;
height: 16px;
margin: 0 auto;
padding: 0;
background-color: transparent;
cursor: row-resize;
}

.resize-handle div {
position: relative;
top: 50%;
width: 90%;
margin: 0 auto;
height: 0;
background-color: rgb(55, 55, 55);
background-color: #f5f5f5;
box-shadow: 0px 2px 16px rgba(0, 0, 0, .3);
transition: all 150ms ease-in-out;
}

.resize-handle:hover div {
top: 0;
height: 16px;
}

0 comments on commit 8aa1d76

Please sign in to comment.