Nice project! And kudos for the engine's test coverage ;)

I'm a bit concerned by the fact that all the engine dependencies are checked-in in a lib folder instead of being referenced in the engine's package.json. How do you keep track of the libs versions?

Describe the bug
If the currently focused clip has significantly more frames than it's parent, and the timeline's scrollbar is scrolled far enough to the right, when the user returns to the parent clip, the scrollbar disappears.

To Reproduce
See this project:
scrollbarBug.wick.zip

1. Edit the clip found on the first frame
2. Scroll as far to the right as you can
3. Return to the main clip

Expected behavior
The scrollbar should not disappear.

Screenshots
This is what it looks like when the scrollbar is missing:

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version 79.0.3945.88

Describe the bug
Zooming while editing a text box will cause visual interface.

To Reproduce
Steps to reproduce the behavior:

1. Edit a text box.
2. Zoom in.
3. See error

Expected behavior
Text box should either deselect OR resize appropriately when zooming.

Screenshots

Additional Context
See #51 , a text overhaul may be the best solution.

Is your feature request related to a problem? Please describe.
Rotating shapes with the cursor tool can only result in degree values from 0-360. This makes it difficult to determine which direction a tweened object will rotate (clockwise or counter-clockwise).

Describe the solution you'd like
Scaling counter-clockwise should result in a negative rotation value. To make this clear, it would be helpful to display the current amount of degrees rotated.

Describe the bug
Two finger swipe on touch screen devices, and Apple touch pads.

To Reproduce
Steps to reproduce the behavior:

1. Go to editor.wickeditor.com on a tocuhscreen device.
2. Perform a two finger swipe right-to-left
3. You will be asked to leave the page.

Expected behavior
When swiping on the canvas, the behaviour should pan the canvas (or rotate, depending on the angle potentially).

When swiping elsewhere, nothing.

Screenshots
N/A

Additional context
A potential solution is to disable two finger swipe within the editor.

Describe the bug
Interactive projects posted to Itch.io don't resize within Itch's container. We're not sure why this is happening and need to investigate a bit more.

To Reproduce
Steps to reproduce the behavior:

1. Go to any Wick Project uploaded to itch.io (https://wicklets.itch.io/click-me-if-you-can)
2. See how the project will not resize properly to the window.

Expected behavior
The project should resize within the container on Itch.

Screenshots

OS
Tested primarily on Windows/Firefox

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)

We need to see if this issue is on Itch's end, or ours.

Describe the bug
Buttons in editor get stuck in hover state on mobile, should be using <button>s instead of clickable <div>s

To Reproduce
Steps to reproduce the behavior:

1. Go to editor.wickeditor.com on Mobile.
2. Click on an action button in the editor (i.e. the toolbar buttons).
3. Hover state remains.

Expected behavior
The buttons should simply press and not remain in hover state.

Smartphone (please complete the following information):

• Device: Samsung Galaxy S8
• OS: N/A
• Browser Firefox

Additional context
Action buttons are currently clickable <div>'s, replacing with <button>s should rectify this issue.

After installing wick-editor's dependencies with npm, it tells me there are 91 vulnerabilities in the scanned packages. I ran npm audit and these were the results:

found 91 vulnerabilities (63 low, 9 moderate, 19 high) in 33630 scanned packages
run npm audit fix to fix 5 of them.
86 vulnerabilities require semver-major dependency updates.

I'm new to npm and React, so is this normal for projects in development?

edit: Next, I installed gulp and jsdoc then ran npm install again, which found 6 vulnerabilities (1 low, 1 moderate, 4 high).

Right clicking causes tool cursors to revert to default cursor.

On a fresh project, drawing a path with the pencil tool, then attempting to select that object causes a

TypeError: window.paper.project.selection.bounds is null

error.

Describe the bug

In the gif, the clip scales strangely because it's pivot point is on the corner of its bounds.

To Reproduce
Steps to reproduce the behavior:

1. Create a clip out of any path
2. Edit the clip and move all the path such that it's position in the inspector is (0,0)
3. Leave the clip
4. Try to scale the clip using each corner - only the corner opposite of the clip's pivot point will work normally. The others will cause the clip to scale wildly vertically and horizontally.

Expected behavior
All scale handles should act normally and not scale the clip wildly.

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 79.0.3945.88

This causes them to "disappear". Need to figure out a solution which works for this that separates tool properties and object properties. Object properties should be able to set to 0.

Describe the bug
Passing no parameters to Random.float() returns NaN

To Reproduce
Steps to reproduce the behavior:

1. Select a frame within a Wick Project
2. Add the code Random.float() to the frame's default script.
3. Console log the result.
4. See error

Expected behavior
This should return a random float between 0 and 1.

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)

This can be fixed within the engine > src > GlobalAPI.js file within the GlobalAPI.Random class!

To Reproduce
See wick project:
parentClipBug.wick.zip

Expected behavior
Both clips should have their opacity set to 0.5. Only the clip on the left works correctly.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 79.0.3945.88

Is your feature request related to a problem? Please describe.
Scaling on mobile devices within a locked aspect ratio is not possible (without adding additional selection options).

Scaling with locked aspect ratio is often the desired action for most users.

Describe the solution you'd like
Shift-drag should allow distorted aspect ratios for scaling, and regular drag should be locked to aspect ratio.

Describe alternatives you've considered
Adding an additional option to the cursor to change the default scaling mode. This would further complicate the cursor.

Additional context
A number of other programs use this system, including sketch, photoshop, illustrator, and other creative tools.

Is your feature request related to a problem? Please describe.
There are several cases where the engine runs into and issue, but the error is only seen in the developer console. Here are some examples:

• the user tries to use an identifier that is restricted
• the user tries to input numbers into a text field and vice versa
• etc.

Describe the solution you'd like
The engine should have a system to tell the editor that a non-critical error occurred so that the editor can create a toast, similar to the tool error system.

Describe the bug
Copying and pasting tweens does not work - this is possibly because they are being pasted onto the same playhead position, causing the pasted tweens to overwrite the existing ones.

To Reproduce
Steps to reproduce the behavior:

1. Create a tween
2. Copy it
3. Move the playhead to a different position
4. Paste

Expected behavior
A copy of the tween should appear at the position of the playhead.

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 79.0.3945.88

Describe the bug
Using a Huion tablet on a Windows machine makes it impossible to click the buttons on layers in the timeline GUI.

May be related to #42.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version 79.0.3945.88

Describe the bug
Trying to draw with a transparent color makes it look like the drawing tools are not working at all. This happens very often when drawing shapes with no fills, then later switching to the brush, forgetting that the fill color is set to rgba(0,0,0,0).

Expected behavior
Make sure the drawing tools are never "broken" (currently there is no feedback when the mouse is dragged)

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chome
• Version 79.0.3945.88

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)
One solution is to automatically change the active color to a solid color when a drawing tool is selected (only if the color is on transparent).

Describe the bug
When editing, GUI elements can sometimes not be seen as they are rendered behind elements on the canvas. This issue primarily happens with clips and buttons, but may happen elsewhere.

To Reproduce
Steps to reproduce the behavior:

1. Create a clip or image.
2. Select the eyedropper tool.
3. Attempt to select a color of the clip or image.
4. See error as the preview color pox does not appear over the object.

Expected behavior
The GUI elements should always appear above the drawn elements on the canvas.

Screenshots
If applicable, add screenshots to help explain your problem.

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)

GUI elements should be rendered on a separate, hidden layer above all other canvas elements.

small stylistic issue in the inspector.

Describe the bug
When adding drawings or elements to a tweened frame, undefined behavior can occur since tweened frames expect the entire frame's context to be a Clip.

To Reproduce
Steps to reproduce the behavior:

1. Create a drawing on the canvas.
2. Extend the frame to any length over 1.
3. Create a tween and tween the elements of that frame (tweening position is the most visual).
4. Attempt to draw on that frame.
5. Play the project.
6. See error.

Expected behavior
Drawing should be disallowed on tweened frames.

Changing colors seems to change brushSize to 0.

Is your feature request related to a problem? Please describe.
When calling gotoAndPlay on a section of animation that you are already on, it would be better to continue playing the animation, instead of restarting from the beginning. This simplifies a number of interactions in games.

ie. the code

if (key === "UP") { gotoAndPlay("WalkUp") }

Should simply play the WalkUp Animation, instead of stutter.

Describe the solution you'd like
Check if you are on a named frame and only change frames if you are not on it.

Describe alternatives you've considered
Adding in playRanges, a separate construct tested early in Wick Editor's development. This would be significantly more complex and require additional unnecessary development time.

Describe the bug
The zoom tool can draw rectangles that, when the mouse is released, set the project's zoom and pan such that the canvas fits neatly inside the rectangle. The math for this was never implemented fully, so the zoom box feature currently uses a naive pan and zoom based on the center and width of the rectangle, making the zoom box feel inaccurate at times.

Expected behavior
Original canvas:

Canvas, after drawing a rectangle with the zoom tool around the circle:

The top and bottom of the circle should be touching the edges of the screen.

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version 79.0.3945.88

Describe the bug
Long text boxes will produce divs that are too large, making the canvas container larger than the editor allows, breaking the interface.

To Reproduce
Steps to reproduce the behavior:

1. Create a text box.
2. Edit the text box and add more characters than can fit on the canvas.
3. The canvas div will now be pushed to the left.
4. Undefined behavior can continue from this point.

Expected behavior
The text box should either overflow off the screen, or wrap below.

Screenshots
If applicable, add screenshots to help explain your problem.

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)

• Limit the size of text boxes to not extend beyond the bounds of the canvas.
• Wrap around
• Overflow off the screen without rendering.

Describe the bug
Switching frames while a text box is being edited will cause the box to not disappear. Undefined behavior can occur

To Reproduce
Steps to reproduce the behavior:

1. Edit a text box.
2. Switch frames.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)

This can potentially be solved by adding text edit states to the overall state of the engine, rather than within individual text boxes.

Describe the bug
Objects can only be rotated between -180 and 180 degrees, this causes a number of problems, mainly that objects cannot be rotated a full 360 degrees using a tween.

To Reproduce
Steps to reproduce the behavior:

1. Add an element to the canvas
2. Select and rotate the element more the 180 degrees.
3. Check the rotation amount within the inspector.

Expected behavior
Rotation should at least be allowed between -360 and 360, but potentially should be completely unlocked.

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)
Check rotation direction and simply add or subtract rotation amounts see #37

Describe the bug
The number inputs around the editor are set to a timer. When attempting to add in things like a period (.) for decimal numbers, the input will reset the value.

To Reproduce
Steps to reproduce the behavior:

1. Select an item on the canvas.
2. Attempt to change its position using a decimal number.
3. See error

Expected behavior
The user should be able to input numbers, and see a real time update of their change if it is valid.

Screenshots
If applicable, add screenshots to help explain your problem.

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)

Potential fixes include increasing the amount of time between checks, or updating with the onBlur event for the inputs. onBlur caused a number of issues with the inputs when developing, but we may be able to resolve this issue.

Describe the bug
On devices with touch screens, text cannot be clicked to edit.

To Reproduce
Steps to reproduce the behavior:

1. Open Wick Editor on a mobile device
2. Create a text object with the text tool
3. Deselect the text object to stop editing
4. Try to tap the text to edit it

Expected behavior
The text should enter edit mode. Instead, a new text object is created.

Smartphone (please complete the following information):

• Device: iPhone 5
• OS: iOS 12.3.1
• Browser: Safari

Describe the bug
Identifiers are currently restricted so that the identifier of an object cannot have the same name as any attribute on the window object (see

It is possible that a user using one browser will be able to use an identifier that another browser disallows. This could possibly lead to crashes in rare cases.

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version 79.0.3945.88

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)
If scripts were run in a more sandboxed way, and did not have access to the actual window properties, then there would be no risk of squashing any attributes on the window.

Describe the bug
On mobile devices and any device that uses a touch screen, the lock/unlock and show/hide layer buttons are not clickable.

Smartphone (please complete the following information):

• Device: iPad
• Browser Safari+Chrome

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)

Most likely the Timeline GUI system is not interpreting touch events the same way as mouse events.

Describe the bug
Using the extend frames hotkey can create an illegal overlap between multiple frames and cause undefined behavior.

To Reproduce
Steps to reproduce the behavior:

1. Select multiple frames that are next to each other.
2. Fire the default hotkey shift + .
3. Observe the overlap issues.

Expected behavior
The frames that can be extended should "consume" other frames.

Screenshots
If applicable, add screenshots to help explain your problem.

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)

Frames should consume frames ahead of them with this operation.

Additional context
Add any other context about the problem here.

Extend and Push also exists shift + ] consider that interaction in relation to this one.

Describe the bug
Menus in the timeline can be clicked through.

To Reproduce
Steps to reproduce the behavior:

1. Open the editor and select the "Frame Size" menu in the timeline.
2. Hover over the black space on the menu.
3. Click. This should add a new layer.

Expected behavior
This menu should not be clickable.

Screenshots

Describe the bug
Text edit boxes are currently white and opaque, making it impossible to see how they effect the canvas until after the edit step is complete.

To Reproduce
Steps to reproduce the behavior:

1. Create a text box.
2. Place the text box over an element.
3. Edit the text box.

Expected behavior
Users should be able to see the canvas below the text.

Screenshots
If applicable, add screenshots to help explain your problem.

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)

Potentially changing the background to be transparent will fix this issue, but could cause a problem when a user tries to edit black text on a black background.

Describe the bug
Scaling paths currently defaults to use the center of the paths as the pivot point, as shown here:

Expected behavior
Paths should be scaled using the opposite corner instead, as such:

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 79.0.3945.88

Describe the bug
When adding assets on touchscreen devices, they cannot be dragged from the asset library to the canvas.

To Reproduce
Steps to reproduce the behavior:

1. Add an asset on a touch screen device.
2. Attempt to drag the asset to the canvas.
3. See error

Expected behavior
Assets should be draggable and add automatically to the canvas from all devices.

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)

We may need to change a setting on react-dnd, the library we use for dragging assets, or switch libraries entirely.

Describe the bug
When dragging an asset onto the canvas without a frame, no frame is created.

To Reproduce
Steps to reproduce the behavior:

1. Add an asset to the project.
2. Move the timeline to an empty position (no frame)
3. Drag the asset onto the canvas.
4. Error. No frame is produced.

Expected behavior
A frame should be added below the asset, and the asset should be added to the canvas.

Screenshots

Do you have a suggested solution to this issue? (ex. has another program fixed this bug a certain way? Are you familiar with where in the code base someone would need to fix this issue?)
Add a frame to the selected layer and place the object on that frame.

What is the issue?
Selecting Beep2 in built-in asset library does not work. Asset is not imported.

Do you know what is causing it?
The asset is missing from the repository.

Can you provide a screenshot?

What Browser and Operating System(s) does this occur on?
All.

Should be an issue of connecting pressure.js or similar to paper js toolbox.

Received a :

TypeError: paper.project.layers[(("wick_frame_" + activeFrameUUID) + "_paths")] is undefined

error.

This is most likely an issue with the Reflex Container and the fact that the header/left side bar are fixed sizes.

TODO: Create list of sub-issues

Describe the bug
If the browser zoom level is not at 100%, black borders appear in exported GIFs.

To Reproduce
Steps to reproduce the behavior:

1. Open Wick Editor and change the browser's zoom level to 150% (usually by using control +)
2. Export the project as an animated GIF
3. Reset the browser zoom level so that it's back to 100%
4. Export the project as an animated GIF, again

Expected behavior
The two resulting GIF files should be identical. However, the GIF exported when the browser was zoomed at 150% has black bars rendered on the bottom-right edges.

Screenshots
Browser zoom 100% result (correct):

Browser zoom 150% result (incorrect):

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 79.0.3945.88

Additional context
See this StackOverflow post about canvas zoom mechanics:

https://stackoverflow.com/questions/33950724/how-to-avoid-the-zoom-of-browser-changing-the-canvas-size

Describe the bug
Exported projects that use the vcam do not render the project borders correctly.

To Reproduce
See project:
vcamBug.wick.zip

Expected behavior
In the exported version of this project (see exported.zip), the black bars are rendered incorrectly and should not move with the vcam.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version 79.0.3945.88

TODO: Flesh out list of sub-issues.