taataa / tapspace Goto Github PK
View Code? Open in Web Editor NEWZoomable user interface library for web apps.
Home Page: https://taataa.github.io/tapspace/
License: MIT License
Zoomable user interface library for web apps.
Home Page: https://taataa.github.io/tapspace/
License: MIT License
translate
translateX
translateY
...
We need easy tool to manage drawing order of items.
Example applications:
Paper.js has following API for managing drawing order:
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.
Passing a Vector is not practical. Consider a Rectangle or plain width, height values.
Similar naming was used in Piccolo
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.
In the interaction example app
What happens when the view is detached from space?
As there is multiple space element types, SpaceTaa, SpaceHTML etc the names used in the code should reflect that.
Test coverage is required to prevent future surprises.
Also, add npm version badge and remove version from title.
For example gesturestart
instead of transformstart
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.
Convert to GitHub issues.
We need a Features documentation page that works as a showcase what Tapspace can do.
<sup>version</sup>
and replace it with npm badgetaaspace.js
with `src/index.js``Allows any HTML element becoming a space object. Only HTMLView can represent them :(
SpaceBackground is an infinite surface that provides a repeating background image that can be transformed and always fills the view.
Continuous integration FTW
To make the API clear, instead of this:
...have this:
It is a breaking change but clarifies the difference between the methods.
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.
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
.
Space point that is immutable from its parent point of view:
Maybe the SpacePoint could be refactored to such and then have a separate point class for absolute space points:
Just convenient
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?
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.
Animate transformations, like moving an image, simply by passing some parameters. Animation support by Move.js
See API design document for details.
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.
Override setParent method.
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!
jQuery does not support / in element IDs.
Also, should getLocalTransform be represented already on the same plane instead of the parent?
This way we keep symmetry between SpacePoint and SpaceTransform
Could there be a tool to limit how close or far a user can scale in or out?
Remember to mention wiki in readme
The tab remains open, images stay visible but they cannot be moved. A limit on CSS transformation matrices?
Do not expose Transform objects for user. The following should support only SpaceTransforms:
A cool tutorial with interactive inline examples is needed.
Snapping grids for rotation, scaling, and translation
SpaceView dimensions should follow changes in container HTMLElement. Currently, programmers need to implement this by themselves.
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).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.