527 строки
33 KiB
HTML
527 строки
33 KiB
HTML
<html>
|
|
<head>
|
|
<title>Essential JS2 for Javascript - BPMN Viewer and Editor</title>
|
|
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
|
|
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
|
|
<link href="https://cdn.syncfusion.com/ej2/20.4.38/fluent.css" rel="stylesheet">
|
|
<link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/fluent.css" rel="stylesheet">
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/fluent.css" rel="stylesheet">
|
|
<link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/fluent.css" rel="stylesheet">
|
|
<link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/fluent.css" rel="stylesheet">
|
|
<link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/fluent.css" rel="stylesheet">
|
|
<link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/styles/fluent.css" rel="stylesheet">
|
|
<link href="https://cdn.syncfusion.com/ej2/20.4.38/ej2-dropdowns/styles/fluent.css" rel="stylesheet">
|
|
<link href="https://ej2.syncfusion.com/demos/src/diagram/styles/diagram-common.css" rel="stylesheet">
|
|
<link href="./assets/Diagram_Builder_icon_v4/Diagram_Builder_Icon/style.css" rel="stylesheet">
|
|
<link href="./assets/index.css" rel="stylesheet">
|
|
<link href="./assets/dbstyle/diagrambuilder.css" rel="stylesheet"/>
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.e-file-select-wrap {
|
|
display: none;
|
|
}
|
|
#conTypeBtn {
|
|
width: 45px!important;
|
|
padding: 0px 0px 0px 0px;
|
|
}
|
|
#designContextMenu,#toolsContextMenu{
|
|
width: 100px;
|
|
}
|
|
#editContextMenu{
|
|
width: 200px;
|
|
}
|
|
#hideProperty{
|
|
width: 28px;
|
|
height: 28px;
|
|
margin-left: 30px;
|
|
margin-bottom: 7px;
|
|
}
|
|
.db-toolbar-container{
|
|
width: 100%!important;
|
|
}
|
|
.close{
|
|
float: right;
|
|
border-color: #b5b5b5;
|
|
}
|
|
#js-licensing{
|
|
display: none;
|
|
}
|
|
.pan-item{
|
|
margin-left: 3px;
|
|
}
|
|
</style>
|
|
<ul id = "toolsContextMenu"></ul>
|
|
<ul id = "designContextMenu"></ul>
|
|
<ul id = "editContextMenu"></ul>
|
|
<input type="file" id="fileupload" name="UploadFiles">
|
|
<div class='diagrambuilder-container tailwind' >
|
|
<div class='header navbar'>
|
|
<div class="db-header-container">
|
|
<div class="db-diagram-name-container">
|
|
<span id='diagramName' style="width:250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" class="db-diagram-name"
|
|
onclick="renameDiagram(event)">Untitled Diagram</span>
|
|
<input id='diagramEditable' type="text" class="db-diagram-name" onkeydown="diagramNameKeyDown(event)" onfocusout= "diagramNameChange(event)"/>
|
|
<span id='diagramreport' class="db-diagram-name db-save-text"></span>
|
|
</div>
|
|
<div class='db-menu-container'>
|
|
<div class="db-menu-style">
|
|
<button id="btnFileMenu"></button>
|
|
</div>
|
|
<div class="db-menu-style">
|
|
<button id="btnEditMenu"></button>
|
|
</div>
|
|
<div class="db-menu-style">
|
|
<button id="btnDesignMenu"></button>
|
|
</div>
|
|
<div class="db-menu-style">
|
|
<button id="btnSelectMenu"></button>
|
|
</div>
|
|
<div class="db-menu-style">
|
|
<button id="btnToolsMenu"></button>
|
|
</div>
|
|
<div class="db-menu-style">
|
|
<button id="btnViewMenu"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='db-toolbar-editor'>
|
|
<div class='db-toolbar-container'>
|
|
<div id="toolbarEditor"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class='row content'>
|
|
<div class='sidebar show-overview'>
|
|
<div class="db-palette-parent">
|
|
<div id="symbolpalette"></div>
|
|
</div>
|
|
</div>
|
|
<div class='main-content' role='main'>
|
|
<div class="db-diagram-container" id="">
|
|
<div id="diagramContainerDiv" class='db-current-diagram-container'>
|
|
<div id="diagram"></div>
|
|
</div>
|
|
</div>
|
|
<div class='db-property-editor-container' id="propertyPanel" style="overflow:auto;">
|
|
<div id="generalDiagramContainer" class="db-general-diagram-prop-container">
|
|
<div id='diagramPropertyContainer' class="db-diagram-prop-container">
|
|
<div class="row db-prop-header-text">
|
|
Page Settings
|
|
<button class="close" onclick="UtilityMethods.prototype.hideElements('hide-properties',diagram)"><i style="width: 20px;height: 20px;font-size:20px" class="sf-icon-close"></i></button>
|
|
</div>
|
|
<div class="db-prop-separator" style="background-color: #b5b5b5;margin-bottom: 15px;">
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-12 db-col-left">
|
|
<span class="db-prop-text-style">Format</span>
|
|
<input type="text" id='pageSettingsList' />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" id="pageOrientation" style="margin-top: 10px;">
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-right" >
|
|
<span class="db-prop-text-style">Orientation</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 db-col-left">
|
|
<button style="font-size: 10;" id="pagePortrait">Portrait</button>
|
|
</div>
|
|
<div class="col-xs-6 db-col-right" >
|
|
<button style="font-size: 10;" id="pageLandscape">LandScape</button>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row" id='pageDimension' style="display:none">
|
|
<div class="col-xs-6 db-col-left">
|
|
<div class="db-text-container">
|
|
<div class="db-text">
|
|
<span>W</span>
|
|
</div>
|
|
<div class="db-text-input">
|
|
<input id="pageWidth" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 db-col-right">
|
|
<div class="db-text-container">
|
|
<div class="db-text">
|
|
<span>H</span>
|
|
</div>
|
|
<div class="db-text-input">
|
|
<input id="pageHeight" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row" style="margin-top: 10px;">
|
|
<div class="col-xs-6 db-col-left">
|
|
<span class="db-prop-text-style">Background</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6 db-col-left">
|
|
<div class="db-color-container">
|
|
<div class="db-color-input">
|
|
<input id="pageBgColor" type="color">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row" style="margin-top: 10px;">
|
|
<input id="showPageBreaks" type="checkbox" />
|
|
</div>
|
|
</div>
|
|
<div id='nodePropertyContainer' class="db-node-prop-container" style="display:none">
|
|
<div class="db-node-behaviour-prop" id="dimen">
|
|
<div class="row db-prop-header-text">
|
|
Properties
|
|
<button class="close" onclick="UtilityMethods.prototype.hideElements('hide-properties',diagram)"><i style="width: 20px;height: 20px;font-size:20px" class="sf-icon-close"></i></button>
|
|
</div>
|
|
<div class="db-prop-separator" style="background-color: #b5b5b5;margin-bottom: 15px;">
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-right" >
|
|
<span class="db-prop-text-style">Dimensions</span>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-left" style="width: 97px;" >
|
|
<div class="db-text-container">
|
|
<div class="db-text">
|
|
<span>X</span>
|
|
</div>
|
|
<div class="db-text-input">
|
|
<input style="width: 72px;" id="nodeOffsetX" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 db-col-right" style="width: 97px;">
|
|
<div class="db-text-container">
|
|
<div class="db-text">
|
|
<span>Y</span>
|
|
</div>
|
|
<div class="db-text-input">
|
|
<input style="width: 72px;" id="nodeOffsetY" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-left" style="width: 97px;">
|
|
<div class="db-text-container">
|
|
<div class="db-text">
|
|
<span>W</span>
|
|
</div>
|
|
<div class="db-text-input">
|
|
<input style="width: 72px;" id="nodeWidth" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-6 db-col-right" style="width: 97px;">
|
|
<div class="db-text-container">
|
|
<div class="db-text">
|
|
<span>H</span>
|
|
</div>
|
|
<div class="db-text-input">
|
|
<input style="width: 72px;" id="nodeHeight" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2 db-col-left" style="width: 20px;padding-left:7px">
|
|
<button style="height: 26px; background-color: #ffff;" id="aspectRatioBtn"></button>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-left" style="width: 97px;">
|
|
<div class="db-text-container">
|
|
<div class="db-text">
|
|
<button style="margin: -5px 0px 0px 0px;" id="rotateIconBtn"></button>
|
|
</div>
|
|
<div class="db-text-input">
|
|
<input style="width: 72px;" id="nodeRotateAngle" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="db-prop-separator" style="background-color: #b5b5b5;margin-bottom: 15px;">
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-left">
|
|
<button style="font-size: 10px;" id="insertBtn">Insert link</button>
|
|
</div>
|
|
</div>
|
|
<div class="db-prop-separator" style="background-color: #b5b5b5;">
|
|
</div>
|
|
</div>
|
|
<div id='nodeStyleProperties' class="db-node-style-prop">
|
|
<div class="row db-background-style">
|
|
<div class="col-xs-6 db-col-right" style="margin-bottom: 3px;">
|
|
<span class="db-prop-text-style">Background Type</span>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-12 db-col-left">
|
|
<input type="text" id='backgroundTypeDropdown' />
|
|
</div>
|
|
</div>
|
|
<div id='gradientStyle' class="row db-prop-row db-gradient-style-hide">
|
|
<div class="col-xs-6 db-col-left" style="width: 87px;">
|
|
<div class="db-color-container">
|
|
<div class="db-color-input">
|
|
<input id="nodeFillColor" type="color">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-2 db-col-center">
|
|
<button style="height: 26px;width: 48px;" id="gradientDirection"></button>
|
|
</div>
|
|
<div class="col-xs-4 db-col-right" style="margin-left: 20px;">
|
|
<div class="db-color-container">
|
|
<div class="db-color-input">
|
|
<input id="nodeGradientColor" type="color">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-border-style">
|
|
<div class="row db-prop-header-text db-border-style-header">
|
|
Border/Line Styles
|
|
<button class="close" onclick="UtilityMethods.prototype.hideElements('hide-properties',diagram)"><i style="width: 20px;height: 20px;font-size:20px" class="sf-icon-close"></i></button>
|
|
</div><div class="db-prop-separator" style="background-color: #b5b5b5;margin-bottom: 15px;">
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-right" >
|
|
<span class="db-prop-text-style">Border Type</span>
|
|
</div>
|
|
<div class="col-xs-2 db-col-left" style="margin-left: -6px;">
|
|
<span class="db-prop-text-style">Color</span>
|
|
</div>
|
|
<div class="col-xs-2 db-col-center" style="margin-left: 6px;">
|
|
<span class="db-prop-text-style">Thickness</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6 db-col-right" style="width: 90px;">
|
|
<input type="text" id='nodeBorderStyle' />
|
|
</div>
|
|
<div class="col-xs-2 db-col-center" >
|
|
<div class="db-color-container" style="width: 50px;margin-left: 5px;">
|
|
<div class="db-color-input">
|
|
<input id="nodeStrokeColor" type="color">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-4 db-col-center" style="width: 70px;margin-left: 25px;">
|
|
<div class="db-text-container">
|
|
<div class="db-text-input">
|
|
<input style="width: 61px;" id="nodeStrokeWidth" type="text" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-2 db-col-right db-prop-text-style" style="margin-right: 15px;padding-top: 6px">
|
|
<span class="db-prop-text-style">Opacity</span>
|
|
</div>
|
|
<div class="col-xs-8 db-col-left" style="width: 130px;padding-right: 10px;">
|
|
<div id='nodeOpacitySlider'></div>
|
|
</div>
|
|
<div class="col-xs-2 db-col-right">
|
|
<input id="nodeOpacitySliderText" type="text" value= '100%' readOnly="true" class="db-readonly-input" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id='connectorPropertyContainer' class="db-connector-prop-container" style="display:none">
|
|
<div class="row db-prop-header-text">
|
|
Connector Properties
|
|
<button class="close" onclick="UtilityMethods.prototype.hideElements('hide-properties',diagram)"><i style="width: 20px;height: 20px;font-size:20px" class="sf-icon-close"></i></button>
|
|
</div>
|
|
<div class="db-prop-separator" style="background-color: #b5b5b5;margin-bottom: 15px;">
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-left db-prop-text-style">
|
|
<span class="db-prop-text-style">Connector Type</span>
|
|
</div>
|
|
<div class="col-xs-4 db-col-left db-prop-text-style" style="margin-left: 19px;" >
|
|
<span class="db-prop-text-style">Color</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6 db-col-left">
|
|
<input type="text" id='lineTypeDropdown' />
|
|
</div>
|
|
<div class="col-xs-4 db-col-left">
|
|
<div class="db-color-container" style="margin-left: 20px;">
|
|
<div class="db-color-input">
|
|
<input id="lineColor" type="color">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-left db-prop-text-style">
|
|
<span class="db-prop-text-style">Stroke Style</span>
|
|
</div>
|
|
<div class="col-xs-4 db-col-right db-prop-text-style" style="margin-left: 18px;">
|
|
<span class="db-prop-text-style">Thickness</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6 db-col-left">
|
|
<input type="text" id='lineStyle' />
|
|
</div>
|
|
<div class="col-xs-6 db-col-right">
|
|
<div class="db-text-container" style="width: 77px; margin-left: 20px;">
|
|
<div class="db-text-input">
|
|
<input style="width: 74px;" id="lineWidth" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-left db-prop-text-style">
|
|
<span class="db-prop-text-style">Start Arrow</span>
|
|
</div>
|
|
<div class="col-xs-4 db-col-right db-prop-text-style" style="margin-left: 19px;">
|
|
<span class="db-prop-text-style">Size</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6 db-col-left">
|
|
<input type="text" id='sourceType' />
|
|
</div>
|
|
<div class="col-xs-6 db-col-right">
|
|
<div class="db-text-container" style="width: 77px; margin-left: 20px;">
|
|
<div class="db-text-input">
|
|
<input style="width: 74px;" id="sourceSize" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-left db-prop-text-style">
|
|
<span class="db-prop-text-style">End Arrow</span>
|
|
</div>
|
|
<div class="col-xs-4 db-col-right db-prop-text-style" style="margin-left: 19px;">
|
|
<span class="db-prop-text-style">Size</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-6 db-col-left">
|
|
<input type="text" id='targetType' />
|
|
</div>
|
|
<div class="col-xs-6 db-col-right">
|
|
<div class="db-text-container" style="width: 77px; margin-left: 20px;">
|
|
<div class="db-text-input">
|
|
<input style="width: 74px;" id="targetSize" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-left" style="margin-top:5px">
|
|
<input id="lineJump" type="checkbox" />
|
|
</div>
|
|
<div class="col-xs-6 db-col-left" id="lineJumpSizeDiv" style="display:none">
|
|
<div class="db-text-container" style="width: 77px; margin-left: 20px;">
|
|
<div class="db-text-input">
|
|
<input style="width: 74px;" id="lineJumpSize" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-2 db-col-right db-prop-text-style" style="margin-right: 15px;padding-top: 6px">
|
|
<span class="db-prop-text-style">Opacity</span>
|
|
</div>
|
|
<div class="col-xs-8 db-col-left" style="width: 140px;padding-right:10px">
|
|
<div id='default1'></div>
|
|
</div>
|
|
<div class="col-xs-2 db-col-left">
|
|
<input type="text" id="connectorOpacitySliderText" value= '100%' readonly="true" class="db-readonly-input" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id='textPropertyContainer' class="db-text-prop-container" style="display:none">
|
|
<div class="db-prop-separator" style="background-color: #b5b5b5;">
|
|
</div>
|
|
<div class="col-xs-8 db-col-left db-prop-text-style">
|
|
<span class="db-prop-text-style">Text</span>
|
|
</div>
|
|
<div class="col-xs-4 db-col-left db-prop-text-style">
|
|
<span class="db-prop-text-style">Size</span>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-8 db-col-left">
|
|
<input type="text" id='fontFamily' />
|
|
</div>
|
|
<div class="col-xs-4 db-col-right">
|
|
<div class="db-text-container">
|
|
<div class="db-text-input">
|
|
<input style="width: 65px;" id="fontSizeTextProperties" type="text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-6 db-col-left" id="textPositionDiv" style="width: 135px;">
|
|
<input type="text" id='ddlTextPosition' />
|
|
</div>
|
|
<div class="col-xs-4 db-col-right" id="textColorDiv" style="width: 80px;margin-left:4px">
|
|
<div class="db-color-container">
|
|
<div class="db-color-input">
|
|
<input id="textColor" type="color">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row" style="margin-top: 10px;">
|
|
<div class="col-xs-6 db-col-left">
|
|
<div id="toolbarTextStyle"></div>
|
|
</div>
|
|
<div class="col-xs-6 db-col-right">
|
|
<div id="toolbarTextSubAlignment"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row" id='toolbarTextAlignmentDiv'>
|
|
<div class="col-xs-6 db-col-left">
|
|
<div id="toolbarTextAlignmentLeft"></div>
|
|
</div>
|
|
<div class="col-xs-6 db-col-right">
|
|
<div id="toolbarTextAlignmentTop"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row db-prop-row">
|
|
<div class="col-xs-2 db-col-right db-prop-text-style" style="margin-right: 15px;padding-top: 6px">
|
|
<span class="db-prop-text-style">Opacity</span>
|
|
</div>
|
|
<div class="col-xs-8 db-col-left" style="width: 130px;padding-right: 10px;">
|
|
<div id='opacityTextSlider'></div>
|
|
</div>
|
|
<div class="col-xs-2 db-col-right">
|
|
<input id='textOpacityText' type="text" value='100%' class="db-readonly-input" readOnly="true"/>
|
|
</div>
|
|
</div>
|
|
<div class="db-prop-separator" style="background-color: #b5b5b5;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="hyperlinkDialog"></div>
|
|
<div id="exportDialog"></div>
|
|
<div id="printDialog"></div>
|
|
<script src="./scripts/events.js" type="text/javascript"></script>
|
|
<script src="./scripts/dropdowndatasource.js" type="text/javascript"></script>
|
|
<script src="./scripts/properties.js" type="text/javascript"></script>
|
|
<script src="./scripts/utilitymethods.js" type="text/javascript"></script>
|
|
<script src="./scripts/index.js" type="text/javascript"></script>
|
|
|
|
</body>
|
|
</html> |