77 lines
5.0 KiB
HTML
77 lines
5.0 KiB
HTML
<div ng-click="canvasClick($event)">
|
|
<svg>
|
|
<defs>
|
|
<marker class="fc-arrow-marker" ng-attr-id="{{arrowDefId}}" markerWidth="5" markerHeight="5" viewBox="-6 -6 12 12" refX="10" refY="0" markerUnits="strokeWidth" orient="auto">
|
|
<polygon points="-2,0 -5,5 5,0 -5,-5" stroke="gray" fill="gray" stroke-width="1px"/>
|
|
</marker>
|
|
<marker class="fc-arrow-marker-selected" ng-attr-id="{{arrowDefId}}-selected" markerWidth="5" markerHeight="5" viewBox="-6 -6 12 12" refX="10" refY="0" markerUnits="strokeWidth" orient="auto">
|
|
<polygon points="-2,0 -5,5 5,0 -5,-5" stroke="red" fill="red" stroke-width="1px"/>
|
|
</marker>
|
|
</defs>
|
|
<g ng-repeat="edge in model.edges">
|
|
<path
|
|
ng-attr-id="{{'fc-edge-path-'+$index}}"
|
|
ng-mousedown="edgeMouseDown($event, edge)"
|
|
ng-click="edgeClick($event, edge)"
|
|
ng-dblclick="edgeDoubleClick($event, edge)"
|
|
ng-mouseover="edgeMouseOver($event, edge)"
|
|
ng-mouseenter="edgeMouseEnter($event, edge)"
|
|
ng-mouseleave="edgeMouseLeave($event, edge)"
|
|
ng-attr-class="{{(modelservice.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeClass) || edge == mouseOver.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeClass || edge.active && flowchartConstants.activeClass + ' ' + flowchartConstants.edgeClass || flowchartConstants.edgeClass}}"
|
|
ng-attr-d="{{getEdgeDAttribute(modelservice.edges.sourceCoord(edge), modelservice.edges.destCoord(edge), edgeStyle)}}"
|
|
ng-attr-marker-end="url(#{{modelservice.edges.isSelected(edge) ? arrowDefId+'-selected' : arrowDefId}})"></path>
|
|
</g>
|
|
<g ng-if="dragAnimation == flowchartConstants.dragAnimationRepaint && edgeDragging.isDragging">
|
|
|
|
<path class="{{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}"
|
|
ng-attr-d="{{getEdgeDAttribute(edgeDragging.dragPoint1, edgeDragging.dragPoint2, edgeStyle)}}"></path>
|
|
<circle class="edge-endpoint" r="4" ng-attr-cx="{{edgeDragging.dragPoint2.x}}"
|
|
ng-attr-cy="{{edgeDragging.dragPoint2.y}}"></circle>
|
|
|
|
</g>
|
|
<g ng-if="dragAnimation == flowchartConstants.dragAnimationShadow" class="shadow-svg-class {{ flowchartConstants.edgeClass }} {{ flowchartConstants.draggingClass }}" style="display:none">
|
|
<path d=""></path>
|
|
<circle class="edge-endpoint" r="4"></circle>
|
|
</g>
|
|
</svg>
|
|
<fc-node selected="modelservice.nodes.isSelected(node)"
|
|
edit="modelservice.nodes.isEdit(node)"
|
|
under-mouse="node === mouseOver.node"
|
|
node="node"
|
|
mouse-over-connector="mouseOver.connector"
|
|
modelservice="modelservice"
|
|
dragged-node="nodeDragging.draggedNode"
|
|
callbacks="callbacks"
|
|
user-node-callbacks="userNodeCallbacks"
|
|
ng-repeat="node in model.nodes"></fc-node>
|
|
<div ng-if="dragAnimation == flowchartConstants.dragAnimationRepaint && edgeDragging.isDragging"
|
|
ng-attr-class="{{'fc-noselect ' + flowchartConstants.edgeLabelClass}}"
|
|
ng-style="{ top: (getEdgeCenter(edgeDragging.dragPoint1, edgeDragging.dragPoint2).y)+'px',
|
|
left: (getEdgeCenter(edgeDragging.dragPoint1, edgeDragging.dragPoint2).x)+'px'}">
|
|
<div class="fc-edge-label-text">
|
|
<span ng-attr-id="{{'fc-edge-label-dragging'}}" ng-if="edgeDragging.dragLabel">{{edgeDragging.dragLabel}}</span>
|
|
</div>
|
|
</div>
|
|
<div ng-mousedown="edgeMouseDown($event, edge)"
|
|
ng-click="edgeClick($event, edge)"
|
|
ng-dblclick="edgeDoubleClick($event, edge)"
|
|
ng-mouseover="edgeMouseOver($event, edge)"
|
|
ng-mouseenter="edgeMouseEnter($event, edge)"
|
|
ng-mouseleave="edgeMouseLeave($event, edge)"
|
|
ng-attr-class="{{'fc-noselect ' + ((modelservice.edges.isEdit(edge) && flowchartConstants.editClass + ' ' + flowchartConstants.edgeLabelClass) || (modelservice.edges.isSelected(edge) && flowchartConstants.selectedClass + ' ' + flowchartConstants.edgeLabelClass) || edge == mouseOver.edge && flowchartConstants.hoverClass + ' ' + flowchartConstants.edgeLabelClass || edge.active && flowchartConstants.activeClass + flowchartConstants.edgeLabelClass || flowchartConstants.edgeLabelClass)}}"
|
|
ng-style="{ top: (getEdgeCenter(modelservice.edges.sourceCoord(edge), modelservice.edges.destCoord(edge)).y)+'px',
|
|
left: (getEdgeCenter(modelservice.edges.sourceCoord(edge), modelservice.edges.destCoord(edge)).x)+'px'}"
|
|
ng-repeat="edge in model.edges">
|
|
<div class="fc-edge-label-text">
|
|
<div ng-if="modelservice.isEditable()" class="fc-noselect fc-nodeedit" ng-click="edgeEdit($event, edge)">
|
|
<i class="fa fa-pencil" aria-hidden="true"></i>
|
|
</div>
|
|
<div ng-if="modelservice.isEditable()" class="fc-noselect fc-nodedelete" ng-click="edgeRemove($event, edge)">
|
|
×
|
|
</div>
|
|
<span ng-attr-id="{{'fc-edge-label-'+$index}}" ng-if="edge.label">{{edge.label}}</span>
|
|
</div>
|
|
</div>
|
|
<div id="select-rectangle" class="fc-select-rectangle" hidden></div>
|
|
</div>
|