zeppelin-examples/zeppelin-example-spell-flowchart/index.js

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {
    SpellBase,
    SpellResult,
    DefaultDisplayType,
} from 'zeppelin-spell';

import flowchart from 'flowchart.js';

export default class FlowchartSpell extends SpellBase {
    constructor() {
        super("%flowchart");
    }

    interpret(paragraphText) {
        /**
         * `flowchart` library requires an existing DOM to render.
         * but the DOM is not created yet when `interpret` is called.
         * so Zeppelin allows to return callback function which accept a DOM element id.
         * the callback function will executed when the DOM is ready.
         */
        const callback = (targetElemId) => {
            let diagram = flowchart.parse(paragraphText);
            diagram.drawSVG(targetElemId, this.getOption());
        };

        /**
         * `interpret` method can return multiple results using `add()`
         * but now, we return just 1 result
         */
        return new SpellResult(
            callback
        );
    }

    getOption() {
       return {
           'x': 0,
           'y': 0,
           'line-width': 3,
           'line-length': 50,
           'text-margin': 10,
           'font-size': 14,
           'font-color': 'black',
           'line-color': 'black',
           'element-color': 'black',
           'fill': 'white',
           'yes-text': 'yes',
           'no-text': 'no',
           'arrow-end': 'block',
           'scale': 1,
           // style symbol types
           'symbols': {
               'start': {
                   'font-color': 'red',
                   'element-color': 'green',
                   'fill': 'yellow'
               },
               'end':{
                   'class': 'end-element'
               }
           },
           // even flowstate support ;-)
           'flowstate' : {
               'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
               'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
               'future' : { 'fill' : '#FFFF99'},
               'request' : { 'fill' : 'blue'},
               'invalid': {'fill' : '#444444'},
               'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
               'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
           }
       }
    }
}