add hw2
This commit is contained in:
nik
345
node_modules/cytoscape-fcose/demo/demo-constraint.html
generated
vendored
Normal file
345
node_modules/cytoscape-fcose/demo/demo-constraint.html
generated
vendored
Normal file
@@ -0,0 +1,345 @@
|
||||
<!DOCTYPE>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>cytoscape-fcose.js demo</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
|
||||
|
||||
<!-- Bootstrap, popper, jQuery and filesaver - for demo purpose only -->
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
||||
<script src="https://raw.githack.com/eligrey/FileSaver.js/master/dist/FileSaver.min.js"></script>
|
||||
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Cytoscape and fcose -->
|
||||
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
|
||||
<script src="https://unpkg.com/layout-base/layout-base.js"></script>
|
||||
<script src="https://unpkg.com/cose-base/cose-base.js"></script>
|
||||
<script src="../cytoscape-fcose.js"></script>
|
||||
|
||||
<script src="demo-constraint-control.js" defer></script>
|
||||
|
||||
<!-- CoLa for local comparison only -->
|
||||
<!-- <script src="https://unpkg.com/webcola/WebCola/cola.min.js"></script> -->
|
||||
<!-- <script src="cytoscape-cola.js"></script> -->
|
||||
|
||||
<script src="https://unpkg.com/cytoscape-layout-utilities/cytoscape-layout-utilities.js"></script>
|
||||
<script src="https://unpkg.com/cytoscape-view-utilities/cytoscape-view-utilities.js"></script>
|
||||
<script src="https://unpkg.com/cytoscape-graphml/cytoscape-graphml.js"></script> <!-- graphml - for demo purpose only-->
|
||||
<!-- <script src="https://raw.githack.com/iVis-at-Bilkent/cytoscape.js-layvo/unstable/cytoscape-layvo.js"></script> --> <!-- For quality metrics -->
|
||||
<!-- <script src="https://raw.githack.com/kinimesi/cytoscape-svg/master/cytoscape-svg.js"></script> --> <!-- For svg export -->
|
||||
|
||||
<!-- We use a workaround here to be able to debug real world files in local by keeping json content as js variable. -->
|
||||
<script type="text/javascript" src="samples/unix.js"></script>
|
||||
<script type="text/javascript" src="samples/unix_constraints.js"></script>
|
||||
<script type="text/javascript" src="samples/chalk.js"></script>
|
||||
<script type="text/javascript" src="samples/chalk_constraints.js"></script>
|
||||
<script type="text/javascript" src="samples/uwsn.js"></script>
|
||||
<script type="text/javascript" src="samples/uwsn_constraints.js"></script>
|
||||
<script type="text/javascript" src="samples/callGraph.js"></script>
|
||||
<script type="text/javascript" src="samples/callGraph_constraints.js"></script>
|
||||
<script type="text/javascript" src="samples/wsn.js"></script>
|
||||
<script type="text/javascript" src="samples/wsn_constraints.js"></script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#cy {
|
||||
position: relative;
|
||||
width: auto;
|
||||
height: 95%;
|
||||
z-index: 999;
|
||||
margin-left: 375px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
opacity: 1;
|
||||
color: #555;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
hr.line {
|
||||
margin-top: 9px;
|
||||
margin-bottom: 9px
|
||||
}
|
||||
|
||||
/* The sidepanel menu */
|
||||
.sidepanel {
|
||||
height: auto; /* Specify a height */
|
||||
width: 375px; /* 0 width - change this with JavaScript */
|
||||
position: absolute; /* Stay in place */
|
||||
z-index: 1000; /* Stay on top */
|
||||
float: left;
|
||||
top: auto;
|
||||
left: 0;
|
||||
background-color: #d9fbff;
|
||||
overflow-x: hidden; /* Disable horizontal scroll */
|
||||
padding-top: 10px; /* Place content 10px from the top */
|
||||
padding-bottom: 10px; /* Place content 10px from the bottom */
|
||||
transition: 0s; /* 0.5 second transition effect to slide in the sidepanel */
|
||||
}
|
||||
|
||||
table{
|
||||
margin-left: 8;
|
||||
margin-right: 10;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
/* The sidepanel links */
|
||||
table td {
|
||||
padding: 4px 4px 4px 0px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
transition: 0.3s;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.layoutButton {
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
background-color: #b7ffff;
|
||||
padding: 5px 10px;
|
||||
border: none;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.constraintButton {
|
||||
cursor: pointer;
|
||||
padding: 2px 5px;
|
||||
background-color: #64ffee;
|
||||
border-radius: 3px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.constraintButtonLarge {
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
background-color: #64ffee;
|
||||
border-radius: 3px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.btn-group-sm>.btn, .btn-sm {
|
||||
font-size: 13px;
|
||||
background-color: #7d8991;
|
||||
border-color: #7d8991;
|
||||
}
|
||||
|
||||
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #60717d;
|
||||
border-color: #60717d; /*set the color you want here*/
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .open>.dropdown-toggle.btn-primary {
|
||||
color: #fff;
|
||||
background-color: #60717d;
|
||||
border-color: #60717d; /*set the color you want here*/
|
||||
}
|
||||
|
||||
.btn-outline-primary{
|
||||
font-size: 13px;
|
||||
background-color: #ffffff;
|
||||
color: #7d8991;
|
||||
}
|
||||
|
||||
.form-control-sm {
|
||||
font-size: 13px
|
||||
}
|
||||
|
||||
.custom-select-sm {
|
||||
font-size: 13px
|
||||
}
|
||||
|
||||
.textField {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #0f0;
|
||||
}
|
||||
|
||||
.custom-control-label {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.custom-control-input:checked~.custom-control-label::before {
|
||||
color: #fff;
|
||||
border-color: #7d8991;
|
||||
background-color: #7d8991;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="ml-2">cytoscape-fcose demo (constraint)</h1>
|
||||
<div style='width: 375px; position: absolute;'>
|
||||
<!-- File menu-->
|
||||
<input id="inputFile" type='file' style="display: none" />
|
||||
<input type="button" id="openFile" type="button" class="btn btn-primary btn-sm ml-2" data-toggle="tooltip" title="Load graphml file" value="Load Graph"/> 
|
||||
<select id="sample" class="custom-select custom-select-sm ml-2" style="width:auto;">
|
||||
<option value="sample1" selected="">sample1 - fixed</option>
|
||||
<option value="sample2">sample2 - alignment</option>
|
||||
<option value="sample3">sample3 - relative</option>
|
||||
<option value="sample4">sample4 - hybrid</option>
|
||||
<option value="sample4">sample5</option>
|
||||
<option value="sample5">unix-family-tree</option>
|
||||
<option value="sample6">chalk-dependency</option>
|
||||
<option value="sample7">UW-sensor-network</option>
|
||||
<option value="sample8">python-call-graph</option>
|
||||
<option value="sample9">wireless-sensor-network</option>
|
||||
</select>
|
||||
<!-- File Menu End -->
|
||||
|
||||
<hr class="line">
|
||||
|
||||
<!-- Layout Menu-->
|
||||
<button id="randomizeButton" class="btn btn-primary btn-sm mb-2 ml-2">Randomize</button> 
|
||||
<button id="fcoseButton" class="btn btn-primary btn-sm mb-2">fCoSE</button> 
|
||||
<!-- <button id="colaButton" class="btn btn-primary btn-sm mb-2">CoLa</button>  -->
|
||||
<div class="custom-control custom-control-inline custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="incremental" name="incremental">
|
||||
<label class="custom-control-label" for="incremental">Incremental</label>
|
||||
</div><br>
|
||||
<button id="draftButton" class="btn btn-outline-primary btn-sm ml-2">Draft</button> 
|
||||
<button id="transformButton" class="btn btn-outline-primary btn-sm">Transform</button> 
|
||||
<button id="enforceButton" class="btn btn-outline-primary btn-sm">Enforce</button> 
|
||||
<button id="coseButton" class="btn btn-outline-primary btn-sm">CoSE</button><br>
|
||||
<!-- Layout Menu End-->
|
||||
|
||||
<hr class="line">
|
||||
<div id="mySidepanel" class="sidepanel">
|
||||
<!-- Constraints Menu -->
|
||||
<table id="ConstraintIOTable">
|
||||
<tr>
|
||||
<td style = "width: 25%"><h7 class="card-subtitle mt-1 text-muted"><b>Constraints</b></h7></td>
|
||||
<td><button id="importConstraint" type="button" class="btn btn-primary btn-sm ml-1" onclick="document.getElementById('inputConstraint').click();" data-toggle="tooltip" title="Import constraint file">Import</button>
|
||||
<input id="inputConstraint" type='file' style="display: none" /></td>
|
||||
<td><button id="exportConstraint" type="button" class="btn btn-primary btn-sm" data-toggle="tooltip" title="Export constraint file">Export</button></td>
|
||||
<td style = "width: 35%"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<hr class="line">
|
||||
|
||||
<!-- <button id="saveAsSVG" type="button" class="layoutButton" data-toggle="tooltip" title="Save graph as SVG file">Save as SVG</button> -->
|
||||
<!-- Fixed Node Constraints -->
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-12 mb-2">
|
||||
<h7 class="card-subtitle ml-2 mt-1 text-muted"><b>Fixed Node Constraint</b></h7>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row form-inline">
|
||||
<div id="nodeListColumn" class="form-group col-md-4 ml-2 mr-3">
|
||||
</div>
|
||||
<div class="form-group col-md-5">
|
||||
<label>x : </label>
|
||||
<input type="text" class="form-control form-control-sm w-25 ml-1 mr-1" style="display:flex; flex-grow:1" id="fixedNodeX" value="">
|
||||
<label>y : </label>
|
||||
<input type="text" class="form-control form-control-sm w-25 ml-1 mr-1" style="display:flex; flex-grow:1" id="fixedNodeY" value="">
|
||||
</div>
|
||||
<div class="form-group col-md-2">
|
||||
<input type="button" id="fixedNode" class="btn btn-primary btn-sm" value="Add"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr class="line">
|
||||
|
||||
<!-- Alignment Constraints -->
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-12 mb-2">
|
||||
<h7 class="card-subtitle ml-2 mt-1 text-muted"><b>Alignment Constraint</b></h7>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row form-inline mb-2">
|
||||
<div class="form-group col-md-8">
|
||||
<h7 class="card-subtitle ml-2 mt-1 text-muted">Selected Nodes Vertically</h7>
|
||||
</div>
|
||||
<div class="form-group col-md-3">
|
||||
<input type="button" id="verticalAlignment" class="btn btn-primary btn-sm" value="Add"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row form-inline">
|
||||
<div class="form-group col-md-8">
|
||||
<h7 class="card-subtitle ml-2 mt-1 text-muted">Selected Nodes Horizontally</h7>
|
||||
</div>
|
||||
<div class="form-group col-md-3">
|
||||
<input type="button" id="horizontalAlignment" class="btn btn-primary btn-sm" value="Add"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-12 mt-2 mb-0">
|
||||
<span style="margin-left: 9px; font-size: 12px">Click on a node for selecting. Shift + click for extending selection.</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr class="line">
|
||||
|
||||
<!-- Relative Placement Constraints -->
|
||||
<form>
|
||||
<div class="form-row">
|
||||
<div class="form-group col-md-12 mb-2">
|
||||
<h7 class="card-subtitle ml-2 mt-1 text-muted"><b>Relative Placement Constraint</b></h7>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row form-inline">
|
||||
<div id="nodeListColumnRP1" class="form-group col-md-12 ml-2 mb-2"></div>
|
||||
</div>
|
||||
<div class="form-row form-inline mb-2">
|
||||
<div class="form-group col-md-4">
|
||||
<select id="directionList" class='custom-select custom-select-sm ml-2' style='width:auto;'>
|
||||
<option value="left-right">left-right</option>
|
||||
<option value="top-bottom">top-bottom</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-md-4">
|
||||
<label>Gap: </label>
|
||||
<input type="text" class="form-control form-control-sm w-50 ml-1" id="gap" value="">
|
||||
</div>
|
||||
<div class="form-group col-md-2">
|
||||
<input type="button" id="relativePlacement" class="btn btn-primary btn-sm" value="Add"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-row form-inline mb-2">
|
||||
<div id="nodeListColumnRP2" class="form-group col-md-12 ml-2"></div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<hr class="line">
|
||||
|
||||
<table id="constraintListTable" class="table-striped">
|
||||
<div class="form-group col-md-12 mt-1 mb-1" style="padding-left: 9px">
|
||||
<span style="font-size: 12px">Hover a constraint row to see involved nodes.</span>
|
||||
</div>
|
||||
<tr>
|
||||
<th style="font-size: 0.9em; text-align: left; width:25%">Type</th>
|
||||
<th style="font-size: 0.9em; text-align: left; width:40%">Nodes</th>
|
||||
<th style="font-size: 0.9em; text-align: left;">Info</th>
|
||||
<th style="font-size: 0.9em; text-align: left;"></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Constraints Menu End-->
|
||||
</div>
|
||||
<div id="cy"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user