Coder Social home page Coder Social logo

taataa / tapspace Goto Github PK

View Code? Open in Web Editor NEW
57.0 6.0 8.0 8.99 MB

Zoomable user interface library for web apps.

Home Page: https://taataa.github.io/tapspace/

License: MIT License

JavaScript 84.36% HTML 14.97% CSS 0.54% EJS 0.13%
javascript library zoomable

tapspace's Introduction

tapspace.js

NPM Version Build Status

We believe zoomable user interfaces to be the best way for humans to explore and manipulate two-dimensional content. Therefore we built Tapspace.js, a JavaScript library dedicated for building such dynamic front-ends. It provides an infinite, scalable, and rotatable space for you to represent HTML content and for your users to play with. Tapspace.js uses pure CSS3 and DOM instead of Canvas or WebGL and therefore is able to handle any HTML content you throw at it, including iframes and SVG, and also Canvas- and WebGL-rendered elements. And of course, we provide a clean, documented API for you to build your best.

Examples

See all example apps.

Install

With npm or yarn:

$ npm install tapspace@alpha
$ yarn add tapspace@alpha

This installs an alpha version of Tapspace.js 2.x. For the earlier and stable Tapspace.js 1.x, see 1.6-stable branch.

Via unpkg:

<script src="https://unpkg.com/[email protected]/dist/tapspace.min.js"></script>

Documentation

See taataa.github.io/tapspace for:

In a nutshell, Tapspace.js consists of component classes that each wrap an HTML element. These classes allow the elements to be positioned freely on a transformable and infinite space. A hierarchy of these components form a subtree in the browser DOM. This subtree, which we call the affine subtree, has a tensor matrix backbone that makes projecting points, vectors, and other geometry between the components extremely easy.

Most of the methods in Tapspace, like Viewport:translateBy, take in tensor geometry objects, like Point, Distance, and Box. The tensor aspect makes the geometries exist in all coordinate spaces at the same time, practically freeing you from the need to think how to transit geometry from an HTML element coordinate space into another coordinate space like onto the viewport or another element. This comes handy with โ€“ and does enable โ€“ wild arrangements of components in various scales and angles, and dynamic interaction driven with multitouch, mouse, or other input devices.

Under the hood Tapspace.js uses CSS 2D transforms. In comparison with CSS 3D transforms, 2D offers unbeatable rendering speed, full browser compatibility, and ease of navigation. Even CSS 2D transforms can slow down under thousands of elements and break in deep depths. Large, deep, or infinite visualisations can use tapspace.loaders.TreeLoader to escape the limits of browser rendering engine and floating point arithmetics.

Supporters

We have developed Tapspace.js in collaboration with the following organizations.

Linked Infrastructure for Networked Cultural Scholarship University of Guelph Center of Digital Humanities Research Texas A+M University Tampere University

Contribute

Issues, pull requests and bug reports are highly appreciated. Please test your contribution with the following scripts:

Run test suite:

$ npm run test

Run only linter:

$ npm run lint

See testing docs for details.

License

MIT

tapspace's People

Contributors

axelpale avatar minimalisti avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

tapspace's Issues

Write Features

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

Document "the hull order"

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).

Resurrect examples/hammerjs

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.

Implement SpaceBackground

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

Rename to tapspace

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.

Rename getLocalTransform and friends

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.

Resurrect examples/canvas

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 SpaceTransform everywhere

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

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

Integrate taach plugin

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.

Write Tutorial

A cool tutorial with interactive inline examples is needed.

Test getLocalTransform

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

Tap event coordinates in space

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.

Implement RelativeVector

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

Refactor [x, y] to x, y parameters

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.

Fix play example: drag while view transform is inverted

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?

API to handle drawing order

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.

Animate transformations

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

See API design document for details.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.