npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ibm/bamoe-standalone-dmn-editor

v9.1.1-ibm-0003

Published

### Description

Downloads

788

Readme

DMN Standalone Editor

Description

This library provides standalone DMN Editor (one all-in-one JavaScript file) that can be embedded into any web application.

A comprehensive API is also provided for setup and interaction with the Editor.

Installation

  • To add it to your package.json file:

    • npm install @ibm/bamoe-standalone-dmn-editor
  • To import the library:

    • import * as DmnEditor from "@ibm/bamoe-standalone-dmn-editor/dist"

Usage

Here is an example on how to open the DMN Editor:

const editor = DmnEditor.open({
  container: document.getElementById("dmn-editor-container"),
  initialContent: Promise.resolve(""),
  initialFileNormalizedPosixPathRelativeToTheWorkspaceRoot: "model.dmn",
  readOnly: false,
  resources: new Map([
    [
      "MyIncludedModel.dmn",
      {
        contentType: "text",
        content: Promise.resolve("")
      }
    ]
  ])
});

Available parameters:

  • container: HTML element in which the Editor will be appended to.
  • initialContent: Promise to a DMN model content. Can be empty. Examples:
    • Promise.resolve("")
    • Promise.resolve("<DIAGRAM_CONTENT_DIRECTLY_HERE>")
    • fetch("MyDmnModel.dmn").then(content => content.text())
  • initialFileNormalizedPosixPathRelativeToTheWorkspaceRoot: The POSIX path relative to the workspace root (/ by default), including the file name. The path is useful to locate the file in the workspace, espcially in relation to other resources (defined by the resources parameters). Examples:
    • model.dmn
    • myPath/model.dmn
    • parent/child/filename.dmn
  • readOnly (optional, defaults to false): Use false to allow content edition, and true for read-only mode, in which the Editor will not allow changes.
  • origin (optional, defaults to * when accessing the application with the file protocol, window.location.origin otherwise): If for some reason your application needs to change this parameter, you can use it.
  • onError (optional, defaults to () => {}): If there's an error opening the Editor, this function will be called.
  • resources (optional, defaults to []): Map of resources that will be provided for the Editor. This can be used, for instance, to provide included models for the DMN Editor. Each entry in the map has the resource POSIX path (similar to the initialFileNormalizedPosixPathRelativeToTheWorkspaceRoot parameter) as its key and an object containing the content-type (text or binary) and the resource content (Promise similar to the initialContent parameter) as its value. Resources located in a parent directory (in relation to the current content path, defined by the initialFileNormalizedPosixPathRelativeToTheWorkspaceRoot) won't be listed to be used as an Included Model.

The returned object will contain the methods needed to manipulate the Editor:

  • getContent(): Promise<string>: Returns a Promise containing the Editor content.
  • setContent(normalizedPosixPathRelativeToTheWorkspaceRoot: string, content: string): Promise<void>: Sets the content of the Editor. The returning Promise will be rejected if setting the content fails.
  • getPreview(): Promise<string>: Returns a Promise containing the SVG string of the current diagram.
  • subscribeToContentChanges(callback: (isDirty: boolean) => void): (isDirty: boolean) => void: Setup a callback to be called on every content change in the Editor. Returns the same callback to be used for unsubscription.
  • unsubscribeToContentChanges(callback: (isDirty: boolean) => void): void: Unsubscribes the passed callback from content changes.
  • markAsSaved(): void: Resets the Editor state, signalizing that its content is saved. This will also fire the subscribed callbacks of content changes.
  • undo(): void: Undo the last change in the Editor. This will also fire the subscribed callbacks of content changes.
  • redo(): void: Redo the last undone change in the Editor. This will also fire the subscribed callbacks of content changes.
  • close(): void: Closes the Editor.
  • envelopeApi: MessageBusClientApi<KogitoEditorEnvelopeApi>: Advanced Editor API. See more details in MessageBusClientApi and KogitoEditorEnvelopeApi.