# ssq-toolbar-block

> [TOC]

Latest version **2.0.0** (published 2020-06-04) · ISC license · 0 weekly downloads

## Install

```sh
npm install ssq-toolbar-block
pnpm add ssq-toolbar-block
yarn add ssq-toolbar-block
bun add ssq-toolbar-block
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2020-06-04 |
| First published | 2020-04-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 15 |
| Unpacked size | 15.5 MB |
| Known vulnerabilities | 0 (+26 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | zeazons |

## Links

- npm: https://www.npmjs.com/package/ssq-toolbar-block
- npm.io page: https://npm.io/package/ssq-toolbar-block

## Dependencies (15)

- [antd](https://npm.io/package/antd.md) ^3.26.11
- [axios](https://npm.io/package/axios.md) ^0.19.2
- [jquery](https://npm.io/package/jquery.md) ^3.5.0
- [mxgraph](https://npm.io/package/mxgraph.md) ^4.1.1
- [cogo-toast](https://npm.io/package/cogo-toast.md) ^4.2.3
- [reactstrap](https://npm.io/package/reactstrap.md) ^8.4.1
- [exports-loader](https://npm.io/package/exports-loader.md) ^0.7.0
- [react-draggable](https://npm.io/package/react-draggable.md) ^4.2.0
- [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^4.0.0-alpha.45
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.9.10
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.9.1
- [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.13.5
- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) ^0.1.9
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^1.2.28
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^5.13.0

## Recent versions

- 2.0.0 (latest) — 2020-06-04
- 1.1.3 — 2020-05-25
- 1.1.1 — 2020-05-15
- 1.1.0 — 2020-05-15
- 1.0.2 — 2020-05-12
- 1.0.1 — 2020-05-12
- 1.0.0 — 2020-05-12
- 0.5.0 — 2020-04-28
- 0.4.6 — 2020-04-24
- 0.4.5 — 2020-04-24
- 0.4.3 — 2020-04-24
- 0.4.2 — 2020-04-24
- 0.4.1 — 2020-04-24
- 0.4.0 — 2020-04-24
- 0.3.2 — 2020-04-22
- … 19 more at https://npm.io/package/ssq-toolbar-block/versions

## README

[TOC]

# Installation



```json
npm i ssq-flow-D
```

```json
npm i mxgraph -D
```

```react
// webpack.config.js
module.exports = {
  module: {
    rules: [
      ...,
      {
        test: require.resolve("mxgraph/javascript/mxClient"),
        use:
          "exports-loader?" +     "mxClient,mxEditor,mxLog,mxObjectIdentity,mxDictionary,mxResources,mxEffects,mxUtils,mxConstants,mxEvent,mxClipboard,mxUrlConverter,mxVmlCanvas2D,mxStencilRegistry," +        "mxMarker,mxHierarchicalEdgeStyle,mxCell,mxCellPath,mxPerimeter,mxEdgeStyle,mxStyleRegistry,mxCodecRegistry,mxGenericChangeCodec,mxStylesheetCodec,mxDefaultToolbarCodec," +         "mxGraph,mxRubberband,mxHierarchicalLayout,mxFastOrganicLayout,mxGraphModel,mxPanningHandler,mxKeyHandler,mxParallelEdgeLayout,mxLayoutManager,mxCompactTreeLayout," +         "mxPrintPreview,mxToolbar,mxOutline,mxCellTracker,mxCellOverlay,mxImage,mxLoadResources,mxPopupMenu,mxCylinder,mxRectangle,mxCellRenderer,mxVertexHandler,mxPoint," +
"mxHandle,mxRhombus,mxActor,mxArrow,mxArrowConnector,mxCloud,mxConnector,mxConnector,mxEllipse,mxHexagon,mxImageShape,mxLabel,mxLine,mxPolyline,mxMarker,mxRectangleShape," +       "mxShape,mxStencil,mxStencilRegistry,mxSwimlane,mxText,mxTriangle,mxAutoSaveManager,mxDivResizer,mxForm,mxGuide,mxImageBundle,mxImageExport,mxLog,mxMorphing,mxMouseEvent," +         "mxPanningManager,mxSvgCanvas2D,mxUndoableEdit,mxUndoManager,mxUrlConverter,mxWindow,mxXmlCanvas2D,mxXmlRequest,mxCellEditor,mxCellState,mxCellStatePreview,mxConnectionConstraint," +         "mxGraphSelectionModel,mxGraphView,mxMultiplicity,mxSwimlaneManager,mxTemporaryCellStates,mxGeometry,mxStackLayout,mxRadialTreeLayout,mxPartitionLayout,mxGraphLayout," +         "mxEdgeLabelLayout,mxCompositeLayout,mxCircleLayout,mxSwimlaneOrdering,mxMinimumCycleRemover,mxMedianHybridCrossingReduction,mxHierarchicalLayoutStage,mxCoordinateAssignment," +         "mxSwimlaneLayout,mxObjectCodec,mxGenericChangeCodec,mxTooltipHandler,mxSelectionCellsHandler,mxPopupMenuHandler,mxGraphHandler,mxElbowEdgeHandler,mxEdgeHandler," +         "mxConstraintHandler,mxConnectionHandler,mxCellMarker,mxCellHighlight,mxDefaultPopupMenu,mxDefaultKeyHandler,mxCodec,mxGraphHierarchyModel,mxGraphAbstractHierarchyCell," +
"mxGraphHierarchyEdge,mxGraphHierarchyNode,mxSwimlaneModel,mxEdgeSegmentHandler"
      },
    ...
    ]
  }
}
```



---

# Flow Component

## FlowController

เป็น function controler สำหรับจัดการการทำงานของ Flow ประกอบไปด้วย

### Method

| Name                                | Return | Type   | Desc                                                        |
| ----------------------------------- | ------ | ------ | ----------------------------------------------------------- |
| renderFlowWithXmlStr(graph, xmlStr) | -      |        | เป็น function อ่าน  xml ออกมาเป็น Flow                         |
| initialGraphProperties(editor)      | -      |        | เป็น function สำหรับกำหนด properties พื้นฐานของ Flow            |
| convertValueToString(graph)         | value  | String | เป็น function สำหรับแสดงข้อความบน  node                        |
| setNodeCounter(graph)               | -      |        | เป็น function สำหรับแสดงค่าของจำนวน node บน Flow (ไม่นับเส้นเชื่อม) |
| initialGraphEvent(editor)           | -      |        | เป็น function สำหรับกำหนด event พื้นฐานของ Flow                 |
| printFlow(editor)                   | -      |        | เป็น function preview และ print Flow                         |

---

## Flow

![emulator](./docs/images/flow.png)

### Properties

| Name   | Default | Type   | Desc                              |
| ------ | ------- | ------ | --------------------------------- |
| id     | random  | String | Id สำหรับอ้างอิง component           |
| editor | null    | Object | เป็นตัวแปรสำหรับจัดการ state ของ Flow |
| graph  | null    | Object | เป็นตัวแปรสำหรับจัดการค่าของ Flow      |
| height | 500     | Number | ความสูงของ Flow                    |

### Method

| Name           | Return | Type | Desc                          |
| -------------- | ------ | ---- | ----------------------------- |
| loadGraph(ref) | -      |      | เป็น function สำหรับ load allow |

### Example

```react
import {
  Flow
} from "ssq-flow";

<Flow height={800} ref={this.flowRef} id={id} />
```



```react
import React, { Component } from "react";

import _ from "lodash";
import {
  mxClient,
  mxUtils,
  mxEditor,
  mxParallelEdgeLayout,
  mxLayoutManager,
  mxGraph,
  mxKeyHandler,
  mxDefaultKeyHandler
} from "mxgraph/javascript/mxClient";

import { createPopupMenu } from "./popupController";

import {
  Flow,
  Node,
  ActionBar,
  Properties,
  Outline,
  FlowController
} from "ssq-flow";

import KeyHandler from "./resources/keyHandler.txt";

const listNode = [
  {
    nodeId: "start",
    nodeType: "start",
    icon: "https://dl.dropboxusercontent.com/s/rxsb183p5x163ya/start.svg",
    nodeName: "Start",
    style:
      "shape=ellipse;strokeWidth=2;fillColor=#28A745;strokeColor=#218838;noLabel=1",
    height: 40,
    width: 40,
    multiplicities: {
      source: true,
      attr: null,
      value: null,
      min: 0,
      max: 1,
      validNeighbors: {
        allow: ["ALL"],
        block: ["end", "loop"]
      },
      countError: "Only 1 targets allowed",
      typeError: "Can not connect from other nodes.",
      validNeighborsAllowed: ""
    }
  },
  {
    nodeId: "end",
    nodeType: "end",
    icon: "https://dl.dropboxusercontent.com/s/eiywz47egx0u8zx/end.svg",
    nodeName: "End",
    style:
      "shape=ellipse;strokeWidth=2;fillColor=#DB3545;strokeColor=#C82332;noLabel=1",
    height: 40,
    width: 40,
    multiplicities: {
      source: true,
      attr: null,
      value: null,
      min: 1,
      max: 0,
      validNeighbors: {
        allow: ["ALL"],
        block: ["start", "end", "loop", "decision"]
      },
      countError: "Can not connect to other nodes.",
      typeError: "Can not connect to Start node",
      validNeighborsAllowed: ""
    }
  },
  ...
];

export default class flow extends Component {
  constructor(props) {
    super(props);
    this.state = { graph: null, editor: null };

    this.flowRef = React.createRef();
  }

  loadGraph = ref => {
    const container = document.getElementById(`${ref.props.id}Flow`);

    let graph = "";
    let editor = "";
    // Checks if the browser is supported
    if (!mxClient.isBrowserSupported()) {
      // Displays an error message if the browser is not supported.
      mxUtils.error("Browser is not supported!", 200, false);
    } else {
      if (mxClient.IS_QUIRKS) {
        document.body.style.overflow = "hidden";
        new mxDivResizer(container);
      }

      window.mxEditor = mxEditor;
      window.mxGraph = mxGraph;
      window.mxDefaultKeyHandler = mxDefaultKeyHandler;
      window.mxKeyHandler = mxKeyHandler;

      const doc = mxUtils.parseXml(KeyHandler);
      const config = doc.getElementsByTagName("mxEditor")[0];

      editor = new mxEditor(config);
      graph = editor.graph;

      FlowController.initialGraphProperties(editor);
      FlowController.initialGraphEvent(editor);

      // Sets the graph container and configures the editor
      editor.setGraphContainer(container);

      // Automatically handle parallel edges
      const layout = new mxParallelEdgeLayout(graph);
      const layoutMgr = new mxLayoutManager(graph);

      layoutMgr.getLayout = function(cell) {
        if (cell.getChildCount() > 0) {
          return layout;
        }
      };

      FlowController.convertValueToString(graph);

      graph.popupMenuHandler.factoryMethod = (menu, cell, evt) => {
        return createPopupMenu(editor, menu, cell, evt);
      };

      this.setState({
        graph,
        editor
      });
    }
  };

  componentDidMount() {
    this.loadGraph(this.flowRef.current);
  }

  render() {
    const { editor } = this.state;
    const id = "flow";

    return (
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-2 col-sm-3">
            {!_.isEmpty(editor) && (
              <Node data={listNode} editor={editor} id={id} />
            )}
          </div>
          <div className="col-md-7 col-sm-5">
            <div className="row">
              {!_.isEmpty(editor) && (
                <ActionBar flow={this.flowRef.current} editor={editor} />
              )}
            </div>
            <div className="row">
              {!_.isEmpty(editor) && <Outline id={id} editor={editor} />}
              <Flow height={800} ref={this.flowRef} id={id} />
            </div>
          </div>
          <div className="col-md-3 col-sm-4">
            <Properties />
          </div>
        </div>
      </div>
    );
  }
}
```



---

## Node

![emulator](./docs/images/node.png)

### Properties

| Name   | Default | Type   | Desc                              |
| ------ | ------- | ------ | --------------------------------- |
| id     | random  | String | Id สำหรับอ้างอิง component           |
| editor | null    | Object | เป็นตัวแปรสำหรับจัดการ state ของ Flow |
| data   | [ ]     | Array  | Json Data สำหรับการแสดง node       |

### Example

```react
import {
  Node
} from "ssq-flow";

const listNode = [
  {
    nodeId: "start",
    nodeType: "start",
    icon: "https://dl.dropboxusercontent.com/s/rxsb183p5x163ya/start.svg",
    nodeName: "Start",
    style:
      "shape=ellipse;strokeWidth=2;fillColor=#28A745;strokeColor=#218838;noLabel=1",
    height: 40,
    width: 40,
    multiplicities: {
      source: true,
      attr: null,
      value: null,
      min: 0,
      max: 1,
      validNeighbors: {
        allow: ["ALL"],
        block: ["end", "loop"]
      },
      countError: "Only 1 targets allowed",
      typeError: "Can not connect from other nodes.",
      validNeighborsAllowed: ""
    }
  },
  {
    nodeId: "end",
    nodeType: "end",
    icon: "https://dl.dropboxusercontent.com/s/eiywz47egx0u8zx/end.svg",
    nodeName: "End",
    style:
      "shape=ellipse;strokeWidth=2;fillColor=#DB3545;strokeColor=#C82332;noLabel=1",
    height: 40,
    width: 40,
    multiplicities: {
      source: true,
      attr: null,
      value: null,
      min: 1,
      max: 0,
      validNeighbors: {
        allow: ["ALL"],
        block: ["start", "end", "loop", "decision"]
      },
      countError: "Can not connect to other nodes.",
      typeError: "Can not connect to Start node",
      validNeighborsAllowed: ""
    }
  },
  ...
];

<Node data={listNode} editor={editor} id={id} />
```



---

## ActionBar

![emulator](./docs/images/actionbar.png)

### Properties

| Name   | Default | Type   | Desc                              |
| ------ | ------- | ------ | --------------------------------- |
| flow   | Null    | Ref    | Ref สำหรับอ้างอิง component ของ Flow |
| editor | null    | Object | เป็นตัวแปรสำหรับจัดการ state ของ Flow |

### Example

```react
import {
  ActionBar
} from "ssq-flow";
  
this.flowRef = React.createRef();

<Flow height={800} ref={this.flowRef} id={id} />
<ActionBar height={800} flow={this.flowRef.current} />
```



---

## Properties

![emulator](./docs/images/properties.png)

### Properties

| Name | Default | Type | Desc |
| ---- | ------- | ---- | ---- |
|      |         |      |      |

###  Example

```react
import {
  Properties
} from "ssq-flow";

<Properties />
```



---

## Outline

![emulator](./docs/images/outline.png)

### Properties

| Name   | Default | Type   | Desc                              |
| ------ | ------- | ------ | --------------------------------- |
| id     | random  | String | Id สำหรับอ้างอิง component           |
| editor | null    | Object | เป็นตัวแปรสำหรับจัดการ state ของ Flow |

### Example

```react
import {
  Outline
} from "ssq-flow";

 <Outline id={id} editor={editor} />
```



---

---
_Source: https://npm.io/package/ssq-toolbar-block · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._