Code Monkey home page Code Monkey logo

reasons's Introduction

Reasons

Reasons is a digital argument mapping library designed for modern web browsers.

Argument mapping is the process of visually representating the logical structure of arguments. Argument maps are an important pedagogical tool in the analysis of argumentation and have been associated with substantial increases in student cognative gains.

Argument mapping forms the middle of the three stages of informal logical analysis - identification of truth claims within arguments, the analysis of logical structure, and synthesis of logcial structure into writen form. Reasons is designed to seemlessly integrate these stages into existing teaching pedagogies.

DOI

Embedding Reasons

Download the library and add a reference to it and any initial data just before the </body> tag of a HTML page.

<html>
<body>
  <div id="element"></div>

  ...

  <script src="reasons.js"></script>
  <script>
    let graph = [
        {id: 'p1', text: "Circular arguments work"},
        {id: 'c1', text: "Circular arguments work"},
        {from: 'p1', to: 'c1', type: "because"},
        {from: 'c1', to: 'p1', type: "because"}
      ]
    Reasons.mapper('#element').render(graph)
  </script>
</body>
</html>

Reasons needs to know the target #element of the DOM in which to render the argument map. You could use body to append the map to the HTML body tag or #id to append it to a specific element id. The optional graph is just an array of nodes and edges representing the logical structure of an argument. Nodes and edges are plain javascript objects representing propositional claims and inferential support.

Saving an argument map is left as an implementation detail. Mapper.export() will return a Graph array from the map's current state.

Using Reasons

Reasons relies on a few simple commands to edit an argument map:

  • Double clicking/touching on an empty canvas will create a new reason node.

  • Double clicking/touching on an element will open the edit dialog. Return or Esc will close the dialog.

  • Dragging one reason onto another creates an inferential connection. Dragging reasons that share an inferential connection onto one another will create a conjoined reason.

  • A single click or Tab will select an element. Delete or Backspace will remove that element.

  • Ctrl z or ⌘ z or device shake will undo an action. Ctrl y or ⌘ y will redo it.

  • Ctrl + or ⌘ + or wheel or expand will zoom in. Ctrl - or ⌘ - or wheel or pinch will zoom out.

Click for a demonstration

Development & Testing

Clone the repo and install the dependencies.

$ git clone https://github.com/davekinkead/reasons.git
$ npm install

Running the tests requires additional dev dependencies listed in the package.json file under dev-dependencies including JSDOM and Canvas. . You will need to install all these using the command:

$ npm install mocha --save-dev
$ npm install jsdom --save-dev
  ...

Then:

$ npm test

To get autobuilding to work, install workman

$ watchman-make --make "npm run" -p "lib/*.js" -t build

Browser Compatibility

Reasons relies on the HTML5 Canvas library - as such, it will not work on legacy browsers. Touch events will be added in future releases. It has been tested and works on the following browsers:

  • Chrome on OSX (60+)
  • Firefox on OSX (54+)
  • Safari on OSX (11+)
  • Chrome on Windows
  • Firefox on Windows
  • Safari iOS (View only)
  • Safari iOS (Touch)
  • Internet Explorer on Windows
  • Chrome on Android

Contributing & Support

We gladly accept feature requests and bug fixes. If you have questions or problems, please open an issue.

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

How to Cite

If you are using this software in an academic capacity, please cite as:

Kinkead et al., (2019). Reasons: A digital argument mapping library for modern browsers. Journal of Open Source Software, 4(37), 1044, https://doi.org/10.21105/joss.01044

DOI

reasons's People

Contributors

davekinkead avatar dependabot[bot] avatar geoffreyd avatar

Stargazers

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

Watchers

 avatar  avatar

reasons's Issues

Add multi-map capability

Get test/dual-maps.html working so that local CSS can specify size but edit overlay defaults to 100%

Fix resize event.target bug in Firefox

The resize event is attached to window and on scroll, the event.target is the map canvas in Chrome & Safari but resolves to the canvas' parent (mapper.DOM) in Firefox. This means the zoom function doesn't work because return

Any ideas why this is happening @geoffreyd ? should be a very easy fix but I'm stumped!

Compatibility warning for IE and old iOS

@geoffreyd - what would be the best way to provide a compatibility warning for non-conforming browsers.

IE & iOS 11.4 and below don't work for me and silently fail.

I was thinking a general try-catch block to trigger on error but then any error would cause a warning even on compatible browsers.

Fix pan bug

When zoomed out, dragging a node leads to weird behaviour.

  1. open test/animate-map.html
  2. zoom out at least 200%
  3. drag a reason around to the extremes

Suggesting a new feature : the possibility to edit the color of nodes and edges

Your app is incredible! It's the best argument mapping software I've ever used.
I have a suggestion : would you consider including the possibility to edit the color of nodes and edges?
This would allow distinctions to be made between different types of reasons (weak vs. strong, reasons for / reasons against, …)
Thank you again for your work!

Fix dpr bug in png export

Is there a way to reduce the toDataURL() function by the dpr ratio?

  1. visit test/map.html
  2. keypress 'p'
  3. view new tab (image is 2x size when dpr is 2)

Add canvas pan

A single click & drag on a blank bit of canvas should pan the the map by the pan vector.

When in drag mode, the mouse pointer should offer some affordance like this (bottom left)

cc/ @geoffreyd

Fix text highlighter

Hi Geoff,

This feature should do the following:

  • when embedded, offer medium/theguardian style text highlighter
  • allow a developer to specify what icons & labels text can be highlighted with
  • allow a user to unselect/remove highlighted text
  • save highlighted text in local storage (and eventually backend DB)
  • load highlighted text from local storage when a user visits that URL
  • post highlighted text to dev specified URL (default to POST reasons.io/

Happy to change any code but would like the API in lib/reasons.js to remain the same if possible

review issue. Update installation instructions.

As per openjournals/joss-reviews#1044 Functionality, Installation.

I couldnt get this to work:
https://github.com/davekinkead/reasons#embedding-reasons

I got it to work this the below. Perhaps you want to add an eg div instead of body though.

<html>
<body>
  <script src="reasons.js"></script>
  <script>
    let graph = [
        {id: 'p1', text: "Circular arguments work"},
        {id: 'c1', text: "Circular arguments work"},
        {from: 'p1', to: 'c1', type: "because"},
        {from: 'c1', to: 'p1', type: "because"}
      ]
    Reasons.mapper('body').render(graph)
  </script>
</body>
</html>

Add automatic buffer between nodes

When a node is added or moved, a minimum buffer between them should be applied so that there is no overlap/collision between nodes.

My first thought would be to iteratively move each node away from the map centre by the amount of overlap + some buffer (say 25px).

#pseudocode 
after node add or move
  while map.overlap? 
    nodes.map => node.overlap?
      node.padout

Fix undo/redo history bug

One maybe bug I've found is that the undo stack remembers the panning offset/zoom levels (since these values are being updated on the node x/y's instead of just at draw time ... I'll take a look at moving the scaling/panning value adjustments to the canvas drawing code.

Agree @geoffreyd - the only thing that should be added to history is x&y on node move, not pan or zoom.

Add zoom in/out

Hi @geoffreyd

I'd like the mousewheel event (and later pinch/expand) to zoom the map in & out.

The event listener will be in ui.js and then rendered via view.js

Ta

SVG export

Hi @davekinkead !
Do you think it's possible to include in your code a function to save the argument map as SVG (maybe with canvas2svg) ?
Thanks again for your wonderful app!

Add custom line types

Hiya @geoffreyd

I would like to add custom line types to the display of nodes. The first types should be solid (the current version) and then dashed.

I thought they could be specified in an element.lineType property that is get/set in view.js

Add touch events

Touch actions ...

  • double tap on blank canvas to add node and trigger edit mode / dialogue box
  • double tap node to trigger edit mode / dialogue
  • add save / delete icons to dialogue box
  • drag node to touch position
  • touch and drag on blank canvas to pan map
  • pinch screen to zoom in / out
  • something for undo/redo (3 finger) ???

Example code on readme produces a 0-height canvas element

  1. Clone and NPM install the package
  2. Copy/paste the demo HTML and serve locally
  3. This results in a 0px high canvas element and no errors on the console:

image

The graph elements are present on the screen if I edit the DOM to give the canvas element height.

Tested on both ff and chrome, on 1.0.0 and the master branch.

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.