Code Monkey home page Code Monkey logo

dmn-js's Introduction

Starting with dmn-js@8 the library displays and saves DMN 1.3 diagrams only. To open older DMN files, migrate them before loading them with dmn-js.

dmn-js - DMN for the web

CI

View and edit DMN 1.3 diagrams in the browser.

Installation

Use the library pre-packaged or include it via npm into your node-style web-application.

Usage

To get started, create a dmn-js instance and render DMN 1.3 diagrams in the browser:

const xml; // my DMN 1.3 xml
const viewer = new DmnJS({
  container: 'body'
});

try {
  const { warnings } = await viewer.importXML(xml);

  console.log('rendered');
} catch (err) {
  console.log('error rendering', err)
}

Checkout our examples for more supported usage scenarios.

Dynamic Attach/Detach

You may attach or detach the viewer dynamically to any element on the page, too:

const viewer = new DmnJS();

// attach it to some element
viewer.attachTo('#container');

// detach the panel
viewer.detach();

Resources

Building the Project

Perform the following steps to build the library, including running all tests:

npm install
npm run all

Run tests in individual packages:

npm run dev -- dmn-js

Related

dmn-js builds on top of a few additional powerful tools:

  • dmn-moddle: Read / write support for DMN 1.3 XML
  • diagram-js: Diagram rendering and editing toolkit
  • table-js: Table rendering and editing toolkit
  • dmn-migrate: Migrate your DMN diagrams to DMN 1.3

Contributing

Please checkout our contributing guidelines if you plan to file an issue or pull request.

Code of Conduct

By participating to this project, please uphold to our Code of Conduct.

License

Use under the terms of the bpmn.io license.

dmn-js's People

Contributors

azeghers avatar barmac avatar brianjvarley avatar carstenwickner avatar daniloff200 avatar iamfat avatar ingorichtsmeier avatar jessevanmuijden avatar jonashackt avatar kevin-fong avatar marstamm avatar maxtru avatar nikku avatar oguzeroglu avatar pedesen avatar philippfromme avatar pkief avatar ptyin avatar renovate[bot] avatar ricardomatias avatar romansmirnov avatar sebastianstamm avatar siffogh avatar skaiir avatar smbea avatar tamas-nemeth avatar tkhadir avatar vpellegrino avatar zeropaper 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dmn-js's Issues

Allow opening DMN tables without inputs

Currently the import fails with a cryptic error message.

<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/DMN/20151101/dmn11.xsd" id="definitions" name="definitions" namespace="http://camunda.org/schema/1.0/dmn">
  <decision id="decision" name="">
    <decisionTable id="decisionTable">
      <output id="output1" label="Result" name="result" typeRef="string" />
      <rule id="row-624115199-1">
        <outputEntry id="LiteralExpression_090256m">        <text></text>
</outputEntry>
      </rule>
    </decisionTable>
  </decision>
</definitions>

See camunda/camunda-modeler#163 for details.

Complex Cells overlay is at wrong position when page is scrolled

Reproduce:

  • goto demo.bpmn.io/dmn
  • make the page scrollable (e.g. by making the browser window small)
  • scroll down vertically
  • with the scrollen page, click on the input expression cell

Expected:

  • Overlay is opened at the cell

Observed:

  • Overlay is opened to far above the cell

dmn-js logo font code is hardcoded in less file

It is currently not possible to create combined DMN+... fonts because of the fact that the dmn-js logo is hardcoded in styles/dmn-mixins.less.

Making it a mix-in would give users the ability to redefine it, overriding the default. I.e.

.dmn-js-logo() {
  text-decoration: none;
  display: block;

  &:after {
    .dmn-font;
    text-align: right;
    font-size: 3em;
    color: @dmn-primary;
    .transition(color .218s ease);
    text-decoration: none;
  }
 .icon-dmn.icon-dmn-js;
}

Not sure it could give us a better integration story.

Create design for expression language set for dmn-js

It must be possible to set the expression language for input and output entries (all cells of the table body, except annotations)
Questions to answer
How does the workflow look like to open a combo-box where you can set the expression-language (context-menu on the cell, where to open the popup, styling, ...)
Design an indicator for cells which have an expression language set
Ideally, the indicator can listen to events (e.g. is a node in the DOM), so that you can open the combo-box edit when clicking on it.

Migrated from: https://app.camunda.com/jira/browse/CAM-4839

remove js doc

We'll eventually adopt our in-house solution with docdown.

I can copy rules

With the context menu, I can create a copy of a rules (above, below or at end - same semantic like create new).

Prefix dmn-js internal fonts with dmn-

Currently the dmn-js internal icons have the class icon-dmn icon-foobar. We should change that to dmn-icon-foobar to avoid collisions with other fonts.

add eslint

We should add proper linting to the project.

Release dmn-js v0.2.0

  • Release the dmn libraries in order (How to release a library)
    • dmn-moddle
    • table-js
    • dmn-js
  • Update the examples in dmn-js-examples
    • bump used dmn-js version
    • perform clean/install and test
    • update screenshots in Github
  • Write blog post
  • Spread the word

Release dmn.io version 0.1.0

  • Check package.json of dmn.io repositories for dynamic dependencies (esp. to moddle, moddle-xml and diagram-js)
  • Update package.json of dmn.io repositories with release version 0.1.0
  • Update screenshots of examples
  • Create tag and Release
    • dmn_moddle
    • table-js
    • dmn-js
    • dmn-js-examples
  • Write release blog post (should contain gif, links to camunda bpm 7.4.0-alpha1 release post, demo page and github)
  • publish live demo at camunda.org/dmn/demo
  • publish blog post
  • spread the word (twitter, mailing list)

Release dmn-js v0.3.0

Release dmn-js

  • Release the dmn libraries in order (How to release a library)
    • dmn-moddle
    • table-js
    • dmn-js
  • Update the examples in dmn-js-examples
    • bump used dmn-js version
    • perform clean/install and test
    • update screenshots in Github
  • Write blog post
  • Spread the word

Release dmn-js v0.4.0

  • Release the dmn libraries in order
    • dmn-moddle
    • table-js
    • dmn-js
  • Release the bower-dmn-js packaging
    • check if bundle can be used (test/app/index.html opens in browser)
  • Update the examples dmn-js-examples
    • bump used dmn-js version
    • perform clean/install and test
    • update screenshots in Github
  • Release bpmn-io-demo
  • Write blog post
  • Spread the word

Column dragging not working if no rule rows

Seems like the column dragging in dmn-js falsefully assumes there is always a row.

Reproduce:

The logged JavaScript error is:

app.js:1592 Uncaught TypeError: Cannot read property 'cloneNode' of null
    Drag.createDragVisual @ app.js:1592
    Drag.updateVisuals @ app.js:1493
    (anonymous function) @ app.js:1447

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.