taataa / tapspace Goto Github PK

Space point that is immutable from its parent point of view:

• DynamicSpacePoint
• MovingSpacePoint
• RelativeSpacePoint

Maybe the SpacePoint could be refactored to such and then have a separate point class for absolute space points:

• AbsoluteSpacePoint
• StaticSpacePoint

Also, should getLocalTransform be represented already on the same plane instead of the parent?

Remember to mention wiki in readme

Continuous integration FTW

Let the working name go and greet the more expressive name: tapspace.

Instead of initiating a new repository, change the name of the current one. This way we keep the history. To enable us to still publish to taaspace at npm, let us init taaspace-legacy repository. Taaspace Legacy will have package name taaspace at v5 and minimal implementation: module.exports = require('tapspace'). Because the package version does not anymore follow the steps taken in tapspace repository, there should also be a warning message that guides the user to use tapspace instead.

The hammerjs example app has not been maintained for a long time. Now let us bring the example back to life.

Tapspace API has changed a lot. Also, there is probably new version of HammerJS too.

The goal is to put everything in a single file index.html, with the exception of HammerJS bundle that should be put under examples/assets.

As there is multiple space element types, SpaceTaa, SpaceHTML etc the names used in the code should reflect that.

Animate transformations, like moving an image, simply by passing some parameters. Animation support by Move.js

See API design document for details.

This will improve the code readability and decrease errors. The latter because most APIs, e.g. document.elementFromPoint(x,y) use x,y and therefore users are familiar with x,y or might mix notations.

Tap events should have a property called coordinateInSpace or pointInSpace. It is convenient to have this property if the designer wants to add non-default functionality on tap or other types of events.

We need a Features documentation page that works as a showcase what Tapspace can do.

Also, add npm version badge and remove version from title.

Could there be a tool to limit how close or far a user can scale in or out?

The bug is this: the coordinate system of the view's local transformation does not change if view is transformed. We might need something called like replaceReference(ref), rebase(ref), update(ref), reparent(ref).

However, should SpaceTransform(reference) follow the reference? Or should we have something like DynamicSpaceTransform(reference) that uses directly the reference? How to make it simple?

It is unwise to still keep a separate repository for major functionality that strongly depends on taaspace's API. Thus, move every taaspace-dependent feature from taach and leave only the independent Recognizer to taach.

Snapping grids for rotation, scaling, and translation

Passing a Vector is not practical. Consider a Rectangle or plain width, height values.

We need easy tool to manage drawing order of items.

Example applications:

• move last touched item on top

Paper.js has following API for managing drawing order:

• insertChild(index, item)
• insertChildren(index, items)
• insertAbove(item)
• insertBelow(item)
• sendToBack()
• bringToFront()

The Paper.js API does not handle zIndex but an ordered list of items instead. TapSpace can use the same method, freeing us from juggling with zIndex.

For example gesturestart instead of transformstart

Allows any HTML element becoming a space object. Only HTMLView can represent them :(

The documentation mentions this but does not specify. It is an agreed order in which closed convex paths are given: the path begins with the smallest point in xy-sense and travels the convex in counter-clockwise manner (clockwise if y-axis points up).

Override setParent method.

To make the API clear, instead of this:

• getLocalTransform
• getGlobalLocalTransform
• getGlobalTransform

...have this:

• getLocalTransform
• getLocalITransform
• getGlobalTransform
• getGlobalITransform

It is a breaking change but clarifies the difference between the methods.

What happens when the view is detached from space?

In the interaction example app

Do not expose Transform objects for user. The following should support only SpaceTransforms:

• getLocalTransform (was getTransform)
• setLocalTransfrom (was setTransform)
• getGlobalTransform
• setGlobalTransform

Allow serialization and parsing of the full space. A must for simple persistence.

Also, if only single space point is given, it could be interpreted to be a vector from parent's origo.

Test coverage is required to prevent future surprises.

If the view is not yet mounted, the view does not have a proper size. Therefore fitScale should be called only with a mounted view. Throw an error if fitScale is called before mounting.

Just convenient

This way we keep symmetry between SpacePoint and SpaceTransform

jQuery does not support / in element IDs.

• remove <sup>version</sup> and replace it with npm badge
• replace main taaspace.js with `src/index.js``
• installation instructions
• outdated package description

SpaceBackground is an infinite surface that provides a repeating background image that can be transformed and always fills the view.

Similar naming was used in Piccolo

SpaceView dimensions should follow changes in container HTMLElement. Currently, programmers need to implement this by themselves.

The canvas example at examples/canvas has been left behind for a long time ago. It is time to put it back in working condition. The example is about how a JS driven canvas-animation can be made pinch-zoomable and transformable with Tapspace.

The goal is to put all files of the old example app into single index.html. This includes the canvas animation code, styles and Tapspace code. The touch interaction was implemented before Touchable and therefore the touch interaction code can be thrown away and replaced by the use of Touchable.

The canvas animation code is copied from somewhere and therefore is better to be clearly separate from the other code of the app, although they still must be in the same file.

PRs are welcome!

Use https://github.com/npm/node-semver

translate
translateX
translateY
...

The tab remains open, images stay visible but they cannot be moved. A limit on CSS transformation matrices?

A cool tutorial with interactive inline examples is needed.

Convert to GitHub issues.