流程编辑器bpmnjs的改造1：设计器外观和布局

重新设计页面，弄一个比较规范的设计器外观和布局，bpmnjs.css加入如下的代码：

/* Frame CSS */
html,body{width:100%;height:100%}
.toolsBar{position:fixed;width:100%;height:40px;background-color:#FFF; border-bottom:1px solid #E1E1E1;display:inline-block}
.bpmnWorkbench{position:absolute;width:100%;top:41px;bottom:0;background-color:#E1E1E1;overflow:auto;display:inline-block}
.canvas{margin-left:5px;margin-right:360px;height:100%;display:block;background-color:#FFF;
background: linear-gradient(90deg,rgba(206,214,224,.32) 1px,transparent 0), linear-gradient(rgba(206,214,224,.32) 1px,transparent 0);
        background-size: 50px 50px;
        background-position: 50px 50px;
        background-color: #FFF;}
.right{width:355px;height:100%;display:inline-block;float:right;overflow:auto;background-color:#F8F8F8}
.title{display:inline-block;float:left;font-size:1em; font-weight:bold; font-family:Arial, Helvetica,'微软雅黑', sans-serif;color:#333; line-height:20px; padding:10px}
.btnGroup{display:inline-block;float:left}
.optionBtn{margin:5px 5px 5px 0px;;padding:5px 10px 5px 10px;border:1px solid #E1E1E1;display:inline-block;color:#555}
.optionBtn i{margin-right:5px;}
.optionBtn:hover{color:#FFF;background-color:#09F;border:1px solid #06F}
.on{color:#FFF;background-color:#09F;border:1px solid #06F}
.btn{margin:5px 5px 5px 0px;padding:5px 10px 5px 10px;border:1px solid #E1E1E1;display:inline-block;color:#333}
.btn:hover{color:#09F}
.helpBtn{margin:5px 5px 5px 0px;padding:5px;display:inline-block; color:#666}
.helpBtn i{margin-right:5px;}
.helpBtn:hover{color:#09F;}

实现一个顶部工具栏，右侧属性窗口的布局，然后：

.bpp-properties-header {
  padding: 15px;
  padding-bottom: 5px;
  display:none;
}

将分栏的标题隐藏掉。

页面HTML代码大体如下：

<div class="toolsBar">
    <div class="title"><span id="modelName">未命名工作流</span></div>
        <div class="btnGroup">
            <a href="javascript:void(0);" class="optionBtn" id="openBpmnModel" onClick="javascript:openLocalModel();"><i class="fa fa-folder-open-o"></i>本地导入</a>
        <a href="javascript:void(0);" class="optionBtn on" id="saveBpmnModel"  onClick="javascript:saveModel();"><i class="fa fa-save"></i>保存工作流模型</a>
        </div>
        
        <div class="btnGroup">
        <a href="javascript:void(0);" class="optionBtn" id="exportXmlButton" onClick="javascript:exportXml();"><i class="fa fa-code"></i>导出XML</a>
            <a href="javascript:void(0);" class="optionBtn" id="exportSvgButton" onClick="javascript:exportSvg();"><i class="fa fa-image"></i>导出SVG</a>
        </div>
        
        <div class="btnGroup">
        <a href="javascript:void(0);" class="btn" title="撤销" id="undoButton" onClick="javascript:undo();"><i class="fa fa-undo"></i></a>
        <a href="javascript:void(0);" class="btn" title="重做" id="redoButton" onClick="javascript:redo();"><i class="fa fa-repeat"></i></a>
            <a href="javascript:void(0);" class="btn" title="适合画布" id="fitViewportButton" onClick="javascript:fitviewport();"><i class="fa fa-arrows"></i></a>
            <a href="javascript:void(0);" class="btn" title="放大" id="zoominButton" onClick="javascript:zoom(0.1);"><i class="fa fa-search-plus"></i></a>
            <a href="javascript:void(0);" class="btn" title="缩小" id="zoomoutButton" onClick="javascript:zoom(-0.1);"><i class="fa fa-search-minus"></i></a>
            <a href="javascript:void(0);" class="btn" title="还原" id="resetButton" onClick="javascript:zoom();"><i class="fa fa-dot-circle-o"></i></a>
        </div>
        <form class="am-form" method="post" enctype="multipart/form-data">
            <input type="file" id="xmlFile" accept=".bpmn20.xml" ref="fileRef" style="display:none">            
        </form>
        <div class="btnGroup" style="float:right">        
            <a href="/help/index.html" class="helpBtn" title="帮助" id="help"><i class="fa fa-question-circle-o"></i>帮助</a>
        </div>
    </div>
    <div class="bpmnWorkbench" id="js-drop-zone">
        <div class="right" id="js-properties-panel"></div>        
        <div class="canvas" id="js-canvas"></div>        
    </div>

这样就有了一个基本可看的设计器了。