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
The tab remains open, images stay visible but they cannot be moved. A limit on CSS transformation matrices?
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.
SpaceBackground is an infinite surface that provides a repeating background image that can be transformed and always fills the view.
Continuous integration FTW
We need a Features documentation page that works as a showcase what Tapspace can do.
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.
Remember to mention wiki in readme
Override setParent method.
For example gesturestart
instead of transformstart
Just convenient
<sup>version</sup>
and replace it with npm badgetaaspace.js
with `src/index.js``Test coverage is required to prevent future surprises.
Convert to GitHub issues.
Passing a Vector is not practical. Consider a Rectangle or plain width, height values.
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.
SpaceView dimensions should follow changes in container HTMLElement. Currently, programmers need to implement this by themselves.
Also, add npm version badge and remove version from title.
This way we keep symmetry between SpacePoint and SpaceTransform
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.
Could there be a tool to limit how close or far a user can scale in or out?
Also, should getLocalTransform be represented already on the same plane instead of the parent?
Do not expose Transform objects for user. The following should support only SpaceTransforms:
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:
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.
Similar naming was used in Piccolo
In the interaction example app
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?
Also, if only single space point is given, it could be interpreted to be a vector from parent's origo.
Allows any HTML element becoming a space object. Only HTMLView can represent them :(
As there is multiple space element types, SpaceTaa, SpaceHTML etc the names used in the code should reflect that.
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).
What happens when the view is detached from space?
translate
translateX
translateY
...
Snapping grids for rotation, scaling, and translation
A cool tutorial with interactive inline examples is needed.
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.
jQuery does not support / in element IDs.
Allow serialization and parsing of the full space. A must for simple persistence.
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!
To make the API clear, instead of this:
...have this:
It is a breaking change but clarifies the difference between the methods.
Animate transformations, like moving an image, simply by passing some parameters. Animation support by Move.js
See API design document for details.
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
.
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.