Giter VIP home page Giter VIP logo

daphnejs's Introduction

daphnejs

Library for creating, editing, and checking parse trees.

Currently in development mode, and subject to constant breaking changes.

Installation

Installation via npm is only necessary if you'd like to be able to run tests. Otherwise, you can jump down to Example Usage.

npm install
npm install phantomjs grunt-cli -g
bower install

Running Tests

Daphne uses Mocha as its testing framework. From the project root:

grunt test

Example Usage

The demo folder contains all you need to see daphne working, and provides a sample of how to use daphne in a RequireJS (or other such AMD) environment. For example, with RequireJS:

In main.js:

requirejs.config({
    'baseUrl': '../',
    'paths': {
        'd3': '//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min',
        'daphne': 'dist/daphne.min'
    },  
    'shim': {
        'd3': {
            'exports': 'd3'
        },  
        'daphne': {
            'exports': 'daphne',
            'deps': ['d3']
        }   
    }   
});

require(['daphne'], function(Daphne) {


    var words = [ 
        { id: 1, head: 3, relation: "OBJ", value: "ταῦτα" },
        { id: 2, head: 3, relation: "AuxY", value: "γὰρ" },
        { id: 3, head: 0, relation: "PRED", value: "εἶχον", },
        { id: 4, head: 3, relation: "SBJ", value: "Ἀθηναῖοι" },
        { id: 5, head: 1, relation: "ATR", value: "Πελοποννησίων" },
        { id: 6, head: 0, relation: "AuxK", value: "." }
    ];
    
    // Pass in query selector as first argument and options thereafter
    new Daphne('div[data-toggle="daphne"]', { 
        mode: 'play', 
        data: words, 
        width: 500, 
        height: 400, 
        initialScale: 0.8 
    });
    
});

Add to your <head>:

<link rel="stylesheet" href="../dist/daphne.css" type="text/css">
<script data-main="main" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.11/require.min.js"></script>

And to <body>:

<div data-toggle="daphne"></div>

daphnejs's People

Contributors

mlent avatar

Stargazers

Patrick Cieplak avatar Indrajith Bandara avatar Louis van Beurden avatar Gus Hahn-Powell avatar Jakub Kostrzewa avatar  avatar Ucovo Technologies avatar Tejas Tank avatar Thomas Efer avatar timelyportfolio avatar

Watchers

 avatar James Cloos avatar  avatar

daphnejs's Issues

Zoom and respond

Need to get these two functionalities to work nicely together. A zoom before a browser resize causes the zoom to think the center of the tree is in the wrong place.

Flexible data input.

Allow specification of data as an input value, as well as whitelisting and blacklisting of fields in the data which should be displaying in the editing panel.

Score is wrong.

Need to stop updating it by incrementing/decrementing the number, but rather as a total count of correct nodes.

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.