mirror of
https://github.com/liabru/matter-js.git
synced 2024-11-27 09:50:52 -05:00
initial commit of Matter.Inspector
This commit is contained in:
liabru
parent
d154fc7ac7
commit
fa06a05a04
14 changed files with 1737 additions and 61 deletions
|
|
@ -25,7 +25,7 @@ h1 {
|
|||
padding: 0 5px;
|
||||
}
|
||||
|
||||
a, a:link, a:visited, a:active, a:hover {
|
||||
.nav a, .nav a:link, .nav a:visited, .nav a:active, .nav a:hover {
|
||||
color: #aaa;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #555;
|
||||
|
|
@ -35,7 +35,7 @@ a, a:link, a:visited, a:active, a:hover {
|
|||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 6% 300px 0 6%;
|
||||
padding: 6% 280px 0 280px;
|
||||
}
|
||||
|
||||
.is-mobile .container {
|
||||
|
|
@ -97,4 +97,33 @@ canvas:active {
|
|||
padding: 20px 40px;
|
||||
width: 200px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.inspector-container {
|
||||
position: absolute;
|
||||
overflow: auto;
|
||||
width: 220px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
background: #444;
|
||||
padding: 20px;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.ins-control-group {
|
||||
display: block;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ins-button {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 20px 0 20px 10px;
|
||||
padding: 10px;
|
||||
background: #3a3a3a;
|
||||
border: 0;
|
||||
color: #ddd;
|
||||
}
|
||||
|
|
@ -5,18 +5,27 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width,minimal-ui">
|
||||
<meta name="robots" content="noindex">
|
||||
|
||||
<!-- optional libs, only required for Matter.Gui -->
|
||||
<script type="text/javascript" src="./js/lib/pixi.dev.js"></script>
|
||||
<script type="text/javascript" src="./js/lib/dat.gui.min.js"></script>
|
||||
<script type="text/javascript" src="./js/lib/resurrect.js"></script>
|
||||
<script type="text/javascript" src="./js/lib/jquery-1.11.0.min.js"></script>
|
||||
<link rel="stylesheet" href="./js/lib/jstree/themes/default/style.css" type="text/css">
|
||||
<script type="text/javascript" src="./js/lib/jstree/jstree.min.js"></script>
|
||||
<script type="text/javascript" src="./js/lib/keymaster.js"></script>
|
||||
|
||||
<!-- matter.js demo code -->
|
||||
<script type="text/javascript" src="./js/lib/matter-dev.js"></script>
|
||||
<script type="text/javascript" src="./js/Demo.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="./css/style.css" type="text/css">
|
||||
<title>Matter.js Demo (Dev. Build)</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Matter.js Demo (Dev. Build)</h1>
|
||||
<p><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">·</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">·</span> <a href="https://github.com/liabru/matter-js">GitHub</a></p>
|
||||
<p class="nav"><a href="./mobile.html">Mobile Demo</a> <span class="nav-sep">·</span> <a href="http://brm.io/matter-js/">Project page</a> <span class="nav-sep">·</span> <a href="https://github.com/liabru/matter-js">GitHub</a></p>
|
||||
<div class="controls-container">
|
||||
<select id="demo-select">
|
||||
<option value="mixed">Mixed Shapes</option>
|
||||
|
|
|
|||
|
|
@ -16,12 +16,14 @@
|
|||
Vector = Matter.Vector,
|
||||
Vertices = Matter.Vertices,
|
||||
MouseConstraint = Matter.MouseConstraint,
|
||||
Query = Matter.Query;
|
||||
Query = Matter.Query,
|
||||
Inspector = Matter.Inspector;
|
||||
|
||||
var Demo = {};
|
||||
|
||||
var _engine,
|
||||
_gui,
|
||||
_inspector,
|
||||
_sceneName,
|
||||
_mouseConstraint,
|
||||
_isMobile = /(ipad|iphone|ipod|android)/gi.test(navigator.userAgent);
|
||||
|
|
@ -809,6 +811,7 @@
|
|||
// create a dat.gui using Matter helper
|
||||
if (!_isMobile) {
|
||||
_gui = Gui.create(_engine);
|
||||
_inspector = Inspector.create(_engine);
|
||||
|
||||
// need to add mouse constraint back in after gui clear or load is pressed
|
||||
Events.on(_gui, 'clear load', function() {
|
||||
|
|
@ -886,58 +889,8 @@
|
|||
renderController.clear(_engine.render);
|
||||
|
||||
if (Events) {
|
||||
|
||||
// clear all events
|
||||
Events.off(_engine);
|
||||
|
||||
// add event for deleting bodies and constraints with right mouse button
|
||||
Events.on(_engine, 'mousedown', function(event) {
|
||||
var mouse = event.mouse,
|
||||
engine = event.source,
|
||||
bodies = Composite.allBodies(engine.world),
|
||||
constraints = Composite.allConstraints(engine.world),
|
||||
i;
|
||||
|
||||
if (mouse.button === 2) {
|
||||
|
||||
// find if a body was clicked on
|
||||
for (i = 0; i < bodies.length; i++) {
|
||||
var body = bodies[i];
|
||||
if (Bounds.contains(body.bounds, mouse.position)
|
||||
&& Vertices.contains(body.vertices, mouse.position)) {
|
||||
|
||||
// remove the body that was clicked on
|
||||
Composite.remove(engine.world, body, true);
|
||||
}
|
||||
}
|
||||
|
||||
// find if a constraint anchor was clicked on
|
||||
for (i = 0; i < constraints.length; i++) {
|
||||
var constraint = constraints[i],
|
||||
bodyA = constraint.bodyA,
|
||||
bodyB = constraint.bodyB;
|
||||
|
||||
// we need to account for different types of constraint anchor
|
||||
var pointAWorld = constraint.pointA,
|
||||
pointBWorld = constraint.pointB;
|
||||
if (bodyA) pointAWorld = Vector.add(bodyA.position, constraint.pointA);
|
||||
if (bodyB) pointBWorld = Vector.add(bodyB.position, constraint.pointB);
|
||||
|
||||
// if the constraint does not have two valid anchors, skip it
|
||||
if (!pointAWorld || !pointBWorld)
|
||||
continue;
|
||||
|
||||
// find distance between mouse and anchor points
|
||||
var distA = Vector.magnitudeSquared(Vector.sub(mouse.position, pointAWorld)),
|
||||
distB = Vector.magnitudeSquared(Vector.sub(mouse.position, pointBWorld));
|
||||
|
||||
// if mouse was close, remove the constraint
|
||||
if (distA < 100 || distB < 100) {
|
||||
Composite.remove(engine.world, constraint, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
//Events.off(_engine);
|
||||
}
|
||||
|
||||
_engine.enableSleeping = false;
|
||||
|
|
|
|||
4
demo/js/lib/jquery-1.11.0.min.js
vendored
Normal file
4
demo/js/lib/jquery-1.11.0.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
demo/js/lib/jstree/jstree.min.js
vendored
Normal file
4
demo/js/lib/jstree/jstree.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
demo/js/lib/jstree/themes/default/32px.png
Normal file
BIN
demo/js/lib/jstree/themes/default/32px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 KiB |
BIN
demo/js/lib/jstree/themes/default/40px.png
Normal file
BIN
demo/js/lib/jstree/themes/default/40px.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
952
demo/js/lib/jstree/themes/default/style.css
Normal file
952
demo/js/lib/jstree/themes/default/style.css
Normal file
|
|
@ -0,0 +1,952 @@
|
|||
/* jsTree default theme */
|
||||
.jstree-node,
|
||||
.jstree-children,
|
||||
.jstree-container-ul {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
list-style-image: none;
|
||||
}
|
||||
.jstree-node {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.jstree-anchor {
|
||||
display: inline-block;
|
||||
color: black;
|
||||
white-space: nowrap;
|
||||
padding: 0 4px 0 1px;
|
||||
margin: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.jstree-anchor:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.jstree-anchor,
|
||||
.jstree-anchor:link,
|
||||
.jstree-anchor:visited,
|
||||
.jstree-anchor:hover,
|
||||
.jstree-anchor:active {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.jstree-icon {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
}
|
||||
.jstree-icon:empty {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
}
|
||||
.jstree-ocl {
|
||||
cursor: pointer;
|
||||
}
|
||||
.jstree-leaf > .jstree-ocl {
|
||||
cursor: default;
|
||||
}
|
||||
.jstree .jstree-open > .jstree-children {
|
||||
display: block;
|
||||
}
|
||||
.jstree .jstree-closed > .jstree-children,
|
||||
.jstree .jstree-leaf > .jstree-children {
|
||||
display: none;
|
||||
}
|
||||
.jstree-anchor > .jstree-themeicon {
|
||||
margin-right: 2px;
|
||||
}
|
||||
.jstree-no-icons .jstree-themeicon,
|
||||
.jstree-anchor > .jstree-themeicon-hidden {
|
||||
display: none;
|
||||
}
|
||||
.jstree-rtl .jstree-anchor {
|
||||
padding: 0 1px 0 4px;
|
||||
}
|
||||
.jstree-rtl .jstree-anchor > .jstree-themeicon {
|
||||
margin-left: 2px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.jstree-rtl .jstree-node {
|
||||
margin-left: 0;
|
||||
}
|
||||
.jstree-rtl .jstree-container-ul > .jstree-node {
|
||||
margin-right: 0;
|
||||
}
|
||||
.jstree-wholerow-ul {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 100%;
|
||||
}
|
||||
.jstree-wholerow-ul .jstree-leaf > .jstree-ocl {
|
||||
cursor: pointer;
|
||||
}
|
||||
.jstree-wholerow-ul .jstree-anchor,
|
||||
.jstree-wholerow-ul .jstree-icon {
|
||||
position: relative;
|
||||
}
|
||||
.jstree-wholerow-ul .jstree-wholerow {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.vakata-context {
|
||||
display: none;
|
||||
}
|
||||
.vakata-context,
|
||||
.vakata-context ul {
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #979797;
|
||||
-moz-box-shadow: 5px 5px 4px -4px #666666;
|
||||
-webkit-box-shadow: 2px 2px 2px #999999;
|
||||
box-shadow: 2px 2px 2px #999999;
|
||||
}
|
||||
.vakata-context ul {
|
||||
list-style: none;
|
||||
left: 100%;
|
||||
margin-top: -2.7em;
|
||||
margin-left: -4px;
|
||||
}
|
||||
.vakata-context .vakata-context-right ul {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: -4px;
|
||||
}
|
||||
.vakata-context li {
|
||||
list-style: none;
|
||||
display: inline;
|
||||
}
|
||||
.vakata-context li > a {
|
||||
display: block;
|
||||
padding: 0 2em 0 2em;
|
||||
text-decoration: none;
|
||||
width: auto;
|
||||
color: black;
|
||||
white-space: nowrap;
|
||||
line-height: 2.4em;
|
||||
-moz-text-shadow: 1px 1px 0 white;
|
||||
-webkit-text-shadow: 1px 1px 0 white;
|
||||
text-shadow: 1px 1px 0 white;
|
||||
-moz-border-radius: 1px;
|
||||
-webkit-border-radius: 1px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.vakata-context li > a:hover {
|
||||
position: relative;
|
||||
background-color: #e8eff7;
|
||||
-moz-box-shadow: 0 0 2px #0a6aa1;
|
||||
-webkit-box-shadow: 0 0 2px #0a6aa1;
|
||||
box-shadow: 0 0 2px #0a6aa1;
|
||||
}
|
||||
.vakata-context li > a.vakata-context-parent {
|
||||
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
|
||||
background-position: right center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.vakata-context li > a:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.vakata-context .vakata-context-hover > a {
|
||||
position: relative;
|
||||
background-color: #e8eff7;
|
||||
-moz-box-shadow: 0 0 2px #0a6aa1;
|
||||
-webkit-box-shadow: 0 0 2px #0a6aa1;
|
||||
box-shadow: 0 0 2px #0a6aa1;
|
||||
}
|
||||
.vakata-context .vakata-context-separator a,
|
||||
.vakata-context .vakata-context-separator a:hover {
|
||||
background: white;
|
||||
border: 0;
|
||||
border-top: 1px solid #e2e3e3;
|
||||
height: 1px;
|
||||
min-height: 1px;
|
||||
max-height: 1px;
|
||||
padding: 0;
|
||||
margin: 0 0 0 2.4em;
|
||||
border-left: 1px solid #e0e0e0;
|
||||
-moz-text-shadow: 0 0 0 transparent;
|
||||
-webkit-text-shadow: 0 0 0 transparent;
|
||||
text-shadow: 0 0 0 transparent;
|
||||
-moz-box-shadow: 0 0 0 transparent;
|
||||
-webkit-box-shadow: 0 0 0 transparent;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
-moz-border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
.vakata-context .vakata-contextmenu-disabled a,
|
||||
.vakata-context .vakata-contextmenu-disabled a:hover {
|
||||
color: silver;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
box-shadow: 0 0 0;
|
||||
}
|
||||
.vakata-context li > a > i {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
width: 2.4em;
|
||||
height: 2.4em;
|
||||
background: transparent;
|
||||
margin: 0 0 0 -2em;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
line-height: 2.4em;
|
||||
}
|
||||
.vakata-context li > a > i:empty {
|
||||
width: 2.4em;
|
||||
line-height: 2.4em;
|
||||
}
|
||||
.vakata-context li > a .vakata-contextmenu-sep {
|
||||
display: inline-block;
|
||||
width: 1px;
|
||||
height: 2.4em;
|
||||
background: white;
|
||||
margin: 0 0.5em 0 0;
|
||||
border-left: 1px solid #e2e3e3;
|
||||
}
|
||||
.vakata-context .vakata-contextmenu-shortcut {
|
||||
font-size: 0.8em;
|
||||
color: silver;
|
||||
opacity: 0.5;
|
||||
display: none;
|
||||
}
|
||||
.vakata-context-rtl ul {
|
||||
left: auto;
|
||||
right: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: -4px;
|
||||
}
|
||||
.vakata-context-rtl li > a.vakata-context-parent {
|
||||
background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAINjI+AC7rWHIsPtmoxLAA7");
|
||||
background-position: left center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.vakata-context-rtl .vakata-context-separator > a {
|
||||
margin: 0 2.4em 0 0;
|
||||
border-left: 0;
|
||||
border-right: 1px solid #e2e3e3;
|
||||
}
|
||||
.vakata-context-rtl .vakata-context-left ul {
|
||||
right: auto;
|
||||
left: 100%;
|
||||
margin-left: -4px;
|
||||
margin-right: auto;
|
||||
}
|
||||
.vakata-context-rtl li > a > i {
|
||||
margin: 0 -2em 0 0;
|
||||
}
|
||||
.vakata-context-rtl li > a .vakata-contextmenu-sep {
|
||||
margin: 0 0 0 0.5em;
|
||||
border-left-color: white;
|
||||
background: #e2e3e3;
|
||||
}
|
||||
#jstree-marker {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-right: 0;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid;
|
||||
width: 0;
|
||||
height: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
#jstree-dnd {
|
||||
line-height: 16px;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
#jstree-dnd .jstree-icon,
|
||||
#jstree-dnd .jstree-copy {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
margin: 0 2px 0 0;
|
||||
padding: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
#jstree-dnd .jstree-ok {
|
||||
background: green;
|
||||
}
|
||||
#jstree-dnd .jstree-er {
|
||||
background: red;
|
||||
}
|
||||
#jstree-dnd .jstree-copy {
|
||||
margin: 0 2px 0 2px;
|
||||
}
|
||||
.jstree-default .jstree-node,
|
||||
.jstree-default .jstree-icon {
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
}
|
||||
.jstree-default .jstree-anchor,
|
||||
.jstree-default .jstree-wholerow {
|
||||
transition: background-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.jstree-default .jstree-hovered {
|
||||
background: #e7f4f9;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 1px #ccc;
|
||||
}
|
||||
.jstree-default .jstree-clicked {
|
||||
background: #beebff;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 1px #999;
|
||||
}
|
||||
.jstree-default .jstree-no-icons .jstree-anchor > .jstree-themeicon {
|
||||
display: none;
|
||||
}
|
||||
.jstree-default .jstree-disabled {
|
||||
background: transparent;
|
||||
color: #666;
|
||||
}
|
||||
.jstree-default .jstree-disabled.jstree-hovered {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.jstree-default .jstree-disabled.jstree-clicked {
|
||||
background: #efefef;
|
||||
}
|
||||
.jstree-default .jstree-disabled > .jstree-icon {
|
||||
opacity: 0.8;
|
||||
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'jstree-grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#jstree-grayscale");
|
||||
/* Firefox 10+ */
|
||||
filter: gray;
|
||||
/* IE6-9 */
|
||||
-webkit-filter: grayscale(100%);
|
||||
/* Chrome 19+ & Safari 6+ */
|
||||
}
|
||||
.jstree-default .jstree-search {
|
||||
font-style: italic;
|
||||
color: #8b0000;
|
||||
font-weight: bold;
|
||||
}
|
||||
.jstree-default .jstree-no-checkboxes .jstree-checkbox {
|
||||
display: none !important;
|
||||
}
|
||||
.jstree-default.jstree-checkbox-no-clicked .jstree-clicked {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
.jstree-default.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered {
|
||||
background: #e7f4f9;
|
||||
}
|
||||
.jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered {
|
||||
background: #e7f4f9;
|
||||
}
|
||||
#jstree-dnd.jstree-default .jstree-ok,
|
||||
#jstree-dnd.jstree-default .jstree-er {
|
||||
background-image: url("32px.png");
|
||||
background-repeat: no-repeat;
|
||||
background-color: transparent;
|
||||
}
|
||||
#jstree-dnd.jstree-default i {
|
||||
background: transparent;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
#jstree-dnd.jstree-default .jstree-ok {
|
||||
background-position: -9px -71px;
|
||||
}
|
||||
#jstree-dnd.jstree-default .jstree-er {
|
||||
background-position: -39px -71px;
|
||||
}
|
||||
.jstree-default > .jstree-striped {
|
||||
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB/qqA+AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMNAMM9s3UAAAAXSURBVHjajcEBAQAAAIKg/H/aCQZ70AUBjAATb6YPDgAAAABJRU5ErkJggg==") left top repeat;
|
||||
}
|
||||
.jstree-default > .jstree-wholerow-ul .jstree-hovered,
|
||||
.jstree-default > .jstree-wholerow-ul .jstree-clicked {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
.jstree-default .jstree-wholerow {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.jstree-default .jstree-wholerow-hovered {
|
||||
background: #e7f4f9;
|
||||
}
|
||||
.jstree-default .jstree-wholerow-clicked {
|
||||
background: #beebff;
|
||||
background: -moz-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #beebff), color-stop(100%, #a8e4ff));
|
||||
background: -webkit-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
|
||||
background: -o-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
|
||||
background: -ms-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
|
||||
background: linear-gradient(to bottom, #beebff 0%, #a8e4ff 100%);
|
||||
/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@color1', endColorstr='@color2',GradientType=0 );*/
|
||||
}
|
||||
.jstree-default .jstree-node {
|
||||
min-height: 24px;
|
||||
line-height: 24px;
|
||||
margin-left: 24px;
|
||||
min-width: 24px;
|
||||
}
|
||||
.jstree-default .jstree-anchor {
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.jstree-default .jstree-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.jstree-default .jstree-icon:empty {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.jstree-default.jstree-rtl .jstree-node {
|
||||
margin-right: 24px;
|
||||
}
|
||||
.jstree-default .jstree-wholerow {
|
||||
height: 24px;
|
||||
}
|
||||
.jstree-default .jstree-node,
|
||||
.jstree-default .jstree-icon {
|
||||
background-image: url("32px.png");
|
||||
}
|
||||
.jstree-default .jstree-node {
|
||||
background-position: -292px -4px;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.jstree-default .jstree-last {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default .jstree-open > .jstree-ocl {
|
||||
background-position: -132px -4px;
|
||||
}
|
||||
.jstree-default .jstree-closed > .jstree-ocl {
|
||||
background-position: -100px -4px;
|
||||
}
|
||||
.jstree-default .jstree-leaf > .jstree-ocl {
|
||||
background-position: -68px -4px;
|
||||
}
|
||||
.jstree-default .jstree-themeicon {
|
||||
background-position: -260px -4px;
|
||||
}
|
||||
.jstree-default > .jstree-no-dots .jstree-node,
|
||||
.jstree-default > .jstree-no-dots .jstree-leaf > .jstree-ocl {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default > .jstree-no-dots .jstree-open > .jstree-ocl {
|
||||
background-position: -36px -4px;
|
||||
}
|
||||
.jstree-default > .jstree-no-dots .jstree-closed > .jstree-ocl {
|
||||
background-position: -4px -4px;
|
||||
}
|
||||
.jstree-default .jstree-disabled {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default .jstree-disabled.jstree-hovered {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default .jstree-disabled.jstree-clicked {
|
||||
background: #efefef;
|
||||
}
|
||||
.jstree-default .jstree-checkbox {
|
||||
background-position: -164px -4px;
|
||||
}
|
||||
.jstree-default .jstree-checkbox:hover {
|
||||
background-position: -164px -36px;
|
||||
}
|
||||
.jstree-default .jstree-clicked > .jstree-checkbox {
|
||||
background-position: -228px -4px;
|
||||
}
|
||||
.jstree-default .jstree-clicked > .jstree-checkbox:hover {
|
||||
background-position: -228px -36px;
|
||||
}
|
||||
.jstree-default .jstree-anchor > .jstree-undetermined {
|
||||
background-position: -196px -4px;
|
||||
}
|
||||
.jstree-default .jstree-anchor > .jstree-undetermined:hover {
|
||||
background-position: -196px -36px;
|
||||
}
|
||||
.jstree-default > .jstree-striped {
|
||||
background-size: auto 48px;
|
||||
}
|
||||
.jstree-default.jstree-rtl .jstree-node {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
|
||||
background-position: 100% 1px;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.jstree-default.jstree-rtl .jstree-last {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default.jstree-rtl .jstree-open > .jstree-ocl {
|
||||
background-position: -132px -36px;
|
||||
}
|
||||
.jstree-default.jstree-rtl .jstree-closed > .jstree-ocl {
|
||||
background-position: -100px -36px;
|
||||
}
|
||||
.jstree-default.jstree-rtl .jstree-leaf > .jstree-ocl {
|
||||
background-position: -68px -36px;
|
||||
}
|
||||
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-node,
|
||||
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
|
||||
background-position: -36px -36px;
|
||||
}
|
||||
.jstree-default.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
|
||||
background-position: -4px -36px;
|
||||
}
|
||||
.jstree-default .jstree-themeicon-custom {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.jstree-default > .jstree-container-ul .jstree-loading > .jstree-ocl {
|
||||
background: url("throbber.gif") center center no-repeat;
|
||||
}
|
||||
.jstree-default .jstree-file {
|
||||
background: url("32px.png") -100px -68px no-repeat;
|
||||
}
|
||||
.jstree-default .jstree-folder {
|
||||
background: url("32px.png") -260px -4px no-repeat;
|
||||
}
|
||||
.jstree-default.jstree-rtl .jstree-node {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
|
||||
}
|
||||
.jstree-default.jstree-rtl .jstree-last {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-small .jstree-node {
|
||||
min-height: 18px;
|
||||
line-height: 18px;
|
||||
margin-left: 18px;
|
||||
min-width: 18px;
|
||||
}
|
||||
.jstree-default-small .jstree-anchor {
|
||||
line-height: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.jstree-default-small .jstree-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.jstree-default-small .jstree-icon:empty {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.jstree-default-small.jstree-rtl .jstree-node {
|
||||
margin-right: 18px;
|
||||
}
|
||||
.jstree-default-small .jstree-wholerow {
|
||||
height: 18px;
|
||||
}
|
||||
.jstree-default-small .jstree-node,
|
||||
.jstree-default-small .jstree-icon {
|
||||
background-image: url("32px.png");
|
||||
}
|
||||
.jstree-default-small .jstree-node {
|
||||
background-position: -295px -7px;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.jstree-default-small .jstree-last {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-small .jstree-open > .jstree-ocl {
|
||||
background-position: -135px -7px;
|
||||
}
|
||||
.jstree-default-small .jstree-closed > .jstree-ocl {
|
||||
background-position: -103px -7px;
|
||||
}
|
||||
.jstree-default-small .jstree-leaf > .jstree-ocl {
|
||||
background-position: -71px -7px;
|
||||
}
|
||||
.jstree-default-small .jstree-themeicon {
|
||||
background-position: -263px -7px;
|
||||
}
|
||||
.jstree-default-small > .jstree-no-dots .jstree-node,
|
||||
.jstree-default-small > .jstree-no-dots .jstree-leaf > .jstree-ocl {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-small > .jstree-no-dots .jstree-open > .jstree-ocl {
|
||||
background-position: -39px -7px;
|
||||
}
|
||||
.jstree-default-small > .jstree-no-dots .jstree-closed > .jstree-ocl {
|
||||
background-position: -7px -7px;
|
||||
}
|
||||
.jstree-default-small .jstree-disabled {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-small .jstree-disabled.jstree-hovered {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-small .jstree-disabled.jstree-clicked {
|
||||
background: #efefef;
|
||||
}
|
||||
.jstree-default-small .jstree-checkbox {
|
||||
background-position: -167px -7px;
|
||||
}
|
||||
.jstree-default-small .jstree-checkbox:hover {
|
||||
background-position: -167px -39px;
|
||||
}
|
||||
.jstree-default-small .jstree-clicked > .jstree-checkbox {
|
||||
background-position: -231px -7px;
|
||||
}
|
||||
.jstree-default-small .jstree-clicked > .jstree-checkbox:hover {
|
||||
background-position: -231px -39px;
|
||||
}
|
||||
.jstree-default-small .jstree-anchor > .jstree-undetermined {
|
||||
background-position: -199px -7px;
|
||||
}
|
||||
.jstree-default-small .jstree-anchor > .jstree-undetermined:hover {
|
||||
background-position: -199px -39px;
|
||||
}
|
||||
.jstree-default-small > .jstree-striped {
|
||||
background-size: auto 36px;
|
||||
}
|
||||
.jstree-default-small.jstree-rtl .jstree-node {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
|
||||
background-position: 100% 1px;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.jstree-default-small.jstree-rtl .jstree-last {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-small.jstree-rtl .jstree-open > .jstree-ocl {
|
||||
background-position: -135px -39px;
|
||||
}
|
||||
.jstree-default-small.jstree-rtl .jstree-closed > .jstree-ocl {
|
||||
background-position: -103px -39px;
|
||||
}
|
||||
.jstree-default-small.jstree-rtl .jstree-leaf > .jstree-ocl {
|
||||
background-position: -71px -39px;
|
||||
}
|
||||
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-node,
|
||||
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
|
||||
background-position: -39px -39px;
|
||||
}
|
||||
.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
|
||||
background-position: -7px -39px;
|
||||
}
|
||||
.jstree-default-small .jstree-themeicon-custom {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.jstree-default-small > .jstree-container-ul .jstree-loading > .jstree-ocl {
|
||||
background: url("throbber.gif") center center no-repeat;
|
||||
}
|
||||
.jstree-default-small .jstree-file {
|
||||
background: url("32px.png") -103px -71px no-repeat;
|
||||
}
|
||||
.jstree-default-small .jstree-folder {
|
||||
background: url("32px.png") -263px -7px no-repeat;
|
||||
}
|
||||
.jstree-default-small.jstree-rtl .jstree-node {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAACAQMAAABv1h6PAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMHBgAAiABBI4gz9AAAAABJRU5ErkJggg==");
|
||||
}
|
||||
.jstree-default-small.jstree-rtl .jstree-last {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-large .jstree-node {
|
||||
min-height: 32px;
|
||||
line-height: 32px;
|
||||
margin-left: 32px;
|
||||
min-width: 32px;
|
||||
}
|
||||
.jstree-default-large .jstree-anchor {
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.jstree-default-large .jstree-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.jstree-default-large .jstree-icon:empty {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.jstree-default-large.jstree-rtl .jstree-node {
|
||||
margin-right: 32px;
|
||||
}
|
||||
.jstree-default-large .jstree-wholerow {
|
||||
height: 32px;
|
||||
}
|
||||
.jstree-default-large .jstree-node,
|
||||
.jstree-default-large .jstree-icon {
|
||||
background-image: url("32px.png");
|
||||
}
|
||||
.jstree-default-large .jstree-node {
|
||||
background-position: -288px 0px;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.jstree-default-large .jstree-last {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-large .jstree-open > .jstree-ocl {
|
||||
background-position: -128px 0px;
|
||||
}
|
||||
.jstree-default-large .jstree-closed > .jstree-ocl {
|
||||
background-position: -96px 0px;
|
||||
}
|
||||
.jstree-default-large .jstree-leaf > .jstree-ocl {
|
||||
background-position: -64px 0px;
|
||||
}
|
||||
.jstree-default-large .jstree-themeicon {
|
||||
background-position: -256px 0px;
|
||||
}
|
||||
.jstree-default-large > .jstree-no-dots .jstree-node,
|
||||
.jstree-default-large > .jstree-no-dots .jstree-leaf > .jstree-ocl {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-large > .jstree-no-dots .jstree-open > .jstree-ocl {
|
||||
background-position: -32px 0px;
|
||||
}
|
||||
.jstree-default-large > .jstree-no-dots .jstree-closed > .jstree-ocl {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
.jstree-default-large .jstree-disabled {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-large .jstree-disabled.jstree-hovered {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-large .jstree-disabled.jstree-clicked {
|
||||
background: #efefef;
|
||||
}
|
||||
.jstree-default-large .jstree-checkbox {
|
||||
background-position: -160px 0px;
|
||||
}
|
||||
.jstree-default-large .jstree-checkbox:hover {
|
||||
background-position: -160px -32px;
|
||||
}
|
||||
.jstree-default-large .jstree-clicked > .jstree-checkbox {
|
||||
background-position: -224px 0px;
|
||||
}
|
||||
.jstree-default-large .jstree-clicked > .jstree-checkbox:hover {
|
||||
background-position: -224px -32px;
|
||||
}
|
||||
.jstree-default-large .jstree-anchor > .jstree-undetermined {
|
||||
background-position: -192px 0px;
|
||||
}
|
||||
.jstree-default-large .jstree-anchor > .jstree-undetermined:hover {
|
||||
background-position: -192px -32px;
|
||||
}
|
||||
.jstree-default-large > .jstree-striped {
|
||||
background-size: auto 64px;
|
||||
}
|
||||
.jstree-default-large.jstree-rtl .jstree-node {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
|
||||
background-position: 100% 1px;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.jstree-default-large.jstree-rtl .jstree-last {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-large.jstree-rtl .jstree-open > .jstree-ocl {
|
||||
background-position: -128px -32px;
|
||||
}
|
||||
.jstree-default-large.jstree-rtl .jstree-closed > .jstree-ocl {
|
||||
background-position: -96px -32px;
|
||||
}
|
||||
.jstree-default-large.jstree-rtl .jstree-leaf > .jstree-ocl {
|
||||
background-position: -64px -32px;
|
||||
}
|
||||
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-node,
|
||||
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
|
||||
background-position: -32px -32px;
|
||||
}
|
||||
.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
|
||||
background-position: 0px -32px;
|
||||
}
|
||||
.jstree-default-large .jstree-themeicon-custom {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.jstree-default-large > .jstree-container-ul .jstree-loading > .jstree-ocl {
|
||||
background: url("throbber.gif") center center no-repeat;
|
||||
}
|
||||
.jstree-default-large .jstree-file {
|
||||
background: url("32px.png") -96px -64px no-repeat;
|
||||
}
|
||||
.jstree-default-large .jstree-folder {
|
||||
background: url("32px.png") -256px 0px no-repeat;
|
||||
}
|
||||
.jstree-default-large.jstree-rtl .jstree-node {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAACAQMAAAAD0EyKAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjgIIGBgABCgCBvVLXcAAAAABJRU5ErkJggg==");
|
||||
}
|
||||
.jstree-default-large.jstree-rtl .jstree-last {
|
||||
background: transparent;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.jstree-default-responsive {
|
||||
/*
|
||||
.jstree-open > .jstree-ocl,
|
||||
.jstree-closed > .jstree-ocl { border-radius:20px; background-color:white; }
|
||||
*/
|
||||
}
|
||||
.jstree-default-responsive .jstree-icon {
|
||||
background-image: url("40px.png");
|
||||
}
|
||||
.jstree-default-responsive .jstree-node,
|
||||
.jstree-default-responsive .jstree-leaf > .jstree-ocl {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-responsive .jstree-node {
|
||||
min-height: 40px;
|
||||
line-height: 40px;
|
||||
margin-left: 40px;
|
||||
min-width: 40px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.jstree-default-responsive .jstree-anchor {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.jstree-default-responsive .jstree-icon,
|
||||
.jstree-default-responsive .jstree-icon:empty {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.jstree-default-responsive > .jstree-container-ul > .jstree-node {
|
||||
margin-left: 0;
|
||||
}
|
||||
.jstree-default-responsive.jstree-rtl .jstree-node {
|
||||
margin-left: 0;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.jstree-default-responsive.jstree-rtl .jstree-container-ul > .jstree-node {
|
||||
margin-right: 0;
|
||||
}
|
||||
.jstree-default-responsive .jstree-ocl,
|
||||
.jstree-default-responsive .jstree-themeicon,
|
||||
.jstree-default-responsive .jstree-checkbox {
|
||||
background-size: 120px 200px;
|
||||
}
|
||||
.jstree-default-responsive .jstree-leaf > .jstree-ocl {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-responsive .jstree-open > .jstree-ocl {
|
||||
background-position: 0 0px !important;
|
||||
}
|
||||
.jstree-default-responsive .jstree-closed > .jstree-ocl {
|
||||
background-position: 0 -40px !important;
|
||||
}
|
||||
.jstree-default-responsive.jstree-rtl .jstree-closed > .jstree-ocl {
|
||||
background-position: -40px 0px !important;
|
||||
}
|
||||
.jstree-default-responsive .jstree-themeicon {
|
||||
background-position: -40px -40px;
|
||||
}
|
||||
.jstree-default-responsive .jstree-checkbox,
|
||||
.jstree-default-responsive .jstree-checkbox:hover {
|
||||
background-position: -40px -80px;
|
||||
}
|
||||
.jstree-default-responsive .jstree-clicked > .jstree-checkbox,
|
||||
.jstree-default-responsive .jstree-clicked > .jstree-checkbox:hover {
|
||||
background-position: 0 -80px;
|
||||
}
|
||||
.jstree-default-responsive .jstree-anchor > .jstree-undetermined,
|
||||
.jstree-default-responsive .jstree-anchor > .jstree-undetermined:hover {
|
||||
background-position: 0 -120px;
|
||||
}
|
||||
.jstree-default-responsive .jstree-anchor {
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
text-shadow: 1px 1px white;
|
||||
}
|
||||
.jstree-default-responsive > .jstree-striped {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-responsive .jstree-wholerow {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.7);
|
||||
border-bottom: 1px solid rgba(64, 64, 64, 0.2);
|
||||
background: #ebebeb;
|
||||
height: 40px;
|
||||
}
|
||||
.jstree-default-responsive .jstree-wholerow-hovered {
|
||||
background: #e7f4f9;
|
||||
}
|
||||
.jstree-default-responsive .jstree-wholerow-clicked {
|
||||
background: #beebff;
|
||||
}
|
||||
.jstree-default-responsive .jstree-children .jstree-last > .jstree-wholerow {
|
||||
box-shadow: inset 0 -6px 3px -5px #666666;
|
||||
}
|
||||
.jstree-default-responsive .jstree-children .jstree-open > .jstree-wholerow {
|
||||
box-shadow: inset 0 6px 3px -5px #666666;
|
||||
border-top: 0;
|
||||
}
|
||||
.jstree-default-responsive .jstree-children .jstree-open + .jstree-open {
|
||||
box-shadow: none;
|
||||
}
|
||||
.jstree-default-responsive .jstree-node,
|
||||
.jstree-default-responsive .jstree-icon,
|
||||
.jstree-default-responsive .jstree-node > .jstree-ocl,
|
||||
.jstree-default-responsive .jstree-themeicon,
|
||||
.jstree-default-responsive .jstree-checkbox {
|
||||
background-image: url("40px.png");
|
||||
background-size: 120px 200px;
|
||||
}
|
||||
.jstree-default-responsive .jstree-node {
|
||||
background-position: -80px 0;
|
||||
background-repeat: repeat-y;
|
||||
}
|
||||
.jstree-default-responsive .jstree-last {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default-responsive .jstree-leaf > .jstree-ocl {
|
||||
background-position: -40px -120px;
|
||||
}
|
||||
.jstree-default-responsive .jstree-last > .jstree-ocl {
|
||||
background-position: -40px -160px;
|
||||
}
|
||||
.jstree-default-responsive .jstree-themeicon-custom {
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.jstree-default-responsive .jstree-file {
|
||||
background: url("40px.png") 0 -160px no-repeat;
|
||||
background-size: 120px 200px;
|
||||
}
|
||||
.jstree-default-responsive .jstree-folder {
|
||||
background: url("40px.png") -40px -40px no-repeat;
|
||||
background-size: 120px 200px;
|
||||
}
|
||||
}
|
||||
.jstree-default > .jstree-container-ul > .jstree-node {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
1
demo/js/lib/jstree/themes/default/style.min.css
vendored
Normal file
1
demo/js/lib/jstree/themes/default/style.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
demo/js/lib/jstree/themes/default/throbber.gif
Normal file
BIN
demo/js/lib/jstree/themes/default/throbber.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
296
demo/js/lib/keymaster.js
Normal file
296
demo/js/lib/keymaster.js
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
// keymaster.js
|
||||
// (c) 2011-2013 Thomas Fuchs
|
||||
// keymaster.js may be freely distributed under the MIT license.
|
||||
|
||||
;(function(global){
|
||||
var k,
|
||||
_handlers = {},
|
||||
_mods = { 16: false, 18: false, 17: false, 91: false },
|
||||
_scope = 'all',
|
||||
// modifier keys
|
||||
_MODIFIERS = {
|
||||
'⇧': 16, shift: 16,
|
||||
'⌥': 18, alt: 18, option: 18,
|
||||
'⌃': 17, ctrl: 17, control: 17,
|
||||
'⌘': 91, command: 91
|
||||
},
|
||||
// special keys
|
||||
_MAP = {
|
||||
backspace: 8, tab: 9, clear: 12,
|
||||
enter: 13, 'return': 13,
|
||||
esc: 27, escape: 27, space: 32,
|
||||
left: 37, up: 38,
|
||||
right: 39, down: 40,
|
||||
del: 46, 'delete': 46,
|
||||
home: 36, end: 35,
|
||||
pageup: 33, pagedown: 34,
|
||||
',': 188, '.': 190, '/': 191,
|
||||
'`': 192, '-': 189, '=': 187,
|
||||
';': 186, '\'': 222,
|
||||
'[': 219, ']': 221, '\\': 220
|
||||
},
|
||||
code = function(x){
|
||||
return _MAP[x] || x.toUpperCase().charCodeAt(0);
|
||||
},
|
||||
_downKeys = [];
|
||||
|
||||
for(k=1;k<20;k++) _MAP['f'+k] = 111+k;
|
||||
|
||||
// IE doesn't support Array#indexOf, so have a simple replacement
|
||||
function index(array, item){
|
||||
var i = array.length;
|
||||
while(i--) if(array[i]===item) return i;
|
||||
return -1;
|
||||
}
|
||||
|
||||
// for comparing mods before unassignment
|
||||
function compareArray(a1, a2) {
|
||||
if (a1.length != a2.length) return false;
|
||||
for (var i = 0; i < a1.length; i++) {
|
||||
if (a1[i] !== a2[i]) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
var modifierMap = {
|
||||
16:'shiftKey',
|
||||
18:'altKey',
|
||||
17:'ctrlKey',
|
||||
91:'metaKey'
|
||||
};
|
||||
function updateModifierKey(event) {
|
||||
for(k in _mods) _mods[k] = event[modifierMap[k]];
|
||||
};
|
||||
|
||||
// handle keydown event
|
||||
function dispatch(event) {
|
||||
var key, handler, k, i, modifiersMatch, scope;
|
||||
key = event.keyCode;
|
||||
|
||||
if (index(_downKeys, key) == -1) {
|
||||
_downKeys.push(key);
|
||||
}
|
||||
|
||||
// if a modifier key, set the key.<modifierkeyname> property to true and return
|
||||
if(key == 93 || key == 224) key = 91; // right command on webkit, command on Gecko
|
||||
if(key in _mods) {
|
||||
_mods[key] = true;
|
||||
// 'assignKey' from inside this closure is exported to window.key
|
||||
for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = true;
|
||||
return;
|
||||
}
|
||||
updateModifierKey(event);
|
||||
|
||||
// see if we need to ignore the keypress (filter() can can be overridden)
|
||||
// by default ignore key presses if a select, textarea, or input is focused
|
||||
if(!assignKey.filter.call(this, event)) return;
|
||||
|
||||
// abort if no potentially matching shortcuts found
|
||||
if (!(key in _handlers)) return;
|
||||
|
||||
scope = getScope();
|
||||
|
||||
// for each potential shortcut
|
||||
for (i = 0; i < _handlers[key].length; i++) {
|
||||
handler = _handlers[key][i];
|
||||
|
||||
// see if it's in the current scope
|
||||
if(handler.scope == scope || handler.scope == 'all'){
|
||||
// check if modifiers match if any
|
||||
modifiersMatch = handler.mods.length > 0;
|
||||
for(k in _mods)
|
||||
if((!_mods[k] && index(handler.mods, +k) > -1) ||
|
||||
(_mods[k] && index(handler.mods, +k) == -1)) modifiersMatch = false;
|
||||
// call the handler and stop the event if neccessary
|
||||
if((handler.mods.length == 0 && !_mods[16] && !_mods[18] && !_mods[17] && !_mods[91]) || modifiersMatch){
|
||||
if(handler.method(event, handler)===false){
|
||||
if(event.preventDefault) event.preventDefault();
|
||||
else event.returnValue = false;
|
||||
if(event.stopPropagation) event.stopPropagation();
|
||||
if(event.cancelBubble) event.cancelBubble = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// unset modifier keys on keyup
|
||||
function clearModifier(event){
|
||||
var key = event.keyCode, k,
|
||||
i = index(_downKeys, key);
|
||||
|
||||
// remove key from _downKeys
|
||||
if (i >= 0) {
|
||||
_downKeys.splice(i, 1);
|
||||
}
|
||||
|
||||
if(key == 93 || key == 224) key = 91;
|
||||
if(key in _mods) {
|
||||
_mods[key] = false;
|
||||
for(k in _MODIFIERS) if(_MODIFIERS[k] == key) assignKey[k] = false;
|
||||
}
|
||||
};
|
||||
|
||||
function resetModifiers() {
|
||||
for(k in _mods) _mods[k] = false;
|
||||
for(k in _MODIFIERS) assignKey[k] = false;
|
||||
};
|
||||
|
||||
// parse and assign shortcut
|
||||
function assignKey(key, scope, method){
|
||||
var keys, mods;
|
||||
keys = getKeys(key);
|
||||
if (method === undefined) {
|
||||
method = scope;
|
||||
scope = 'all';
|
||||
}
|
||||
|
||||
// for each shortcut
|
||||
for (var i = 0; i < keys.length; i++) {
|
||||
// set modifier keys if any
|
||||
mods = [];
|
||||
key = keys[i].split('+');
|
||||
if (key.length > 1){
|
||||
mods = getMods(key);
|
||||
key = [key[key.length-1]];
|
||||
}
|
||||
// convert to keycode and...
|
||||
key = key[0]
|
||||
key = code(key);
|
||||
// ...store handler
|
||||
if (!(key in _handlers)) _handlers[key] = [];
|
||||
_handlers[key].push({ shortcut: keys[i], scope: scope, method: method, key: keys[i], mods: mods });
|
||||
}
|
||||
};
|
||||
|
||||
// unbind all handlers for given key in current scope
|
||||
function unbindKey(key, scope) {
|
||||
var multipleKeys, keys,
|
||||
mods = [],
|
||||
i, j, obj;
|
||||
|
||||
multipleKeys = getKeys(key);
|
||||
|
||||
for (j = 0; j < multipleKeys.length; j++) {
|
||||
keys = multipleKeys[j].split('+');
|
||||
|
||||
if (keys.length > 1) {
|
||||
mods = getMods(keys);
|
||||
key = keys[keys.length - 1];
|
||||
}
|
||||
|
||||
key = code(key);
|
||||
|
||||
if (scope === undefined) {
|
||||
scope = getScope();
|
||||
}
|
||||
if (!_handlers[key]) {
|
||||
return;
|
||||
}
|
||||
for (i = 0; i < _handlers[key].length; i++) {
|
||||
obj = _handlers[key][i];
|
||||
// only clear handlers if correct scope and mods match
|
||||
if (obj.scope === scope && compareArray(obj.mods, mods)) {
|
||||
_handlers[key][i] = {};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Returns true if the key with code 'keyCode' is currently down
|
||||
// Converts strings into key codes.
|
||||
function isPressed(keyCode) {
|
||||
if (typeof(keyCode)=='string') {
|
||||
keyCode = code(keyCode);
|
||||
}
|
||||
return index(_downKeys, keyCode) != -1;
|
||||
}
|
||||
|
||||
function getPressedKeyCodes() {
|
||||
return _downKeys.slice(0);
|
||||
}
|
||||
|
||||
function filter(event){
|
||||
var tagName = (event.target || event.srcElement).tagName;
|
||||
// ignore keypressed in any elements that support keyboard data input
|
||||
return !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
|
||||
}
|
||||
|
||||
// initialize key.<modifier> to false
|
||||
for(k in _MODIFIERS) assignKey[k] = false;
|
||||
|
||||
// set current scope (default 'all')
|
||||
function setScope(scope){ _scope = scope || 'all' };
|
||||
function getScope(){ return _scope || 'all' };
|
||||
|
||||
// delete all handlers for a given scope
|
||||
function deleteScope(scope){
|
||||
var key, handlers, i;
|
||||
|
||||
for (key in _handlers) {
|
||||
handlers = _handlers[key];
|
||||
for (i = 0; i < handlers.length; ) {
|
||||
if (handlers[i].scope === scope) handlers.splice(i, 1);
|
||||
else i++;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// abstract key logic for assign and unassign
|
||||
function getKeys(key) {
|
||||
var keys;
|
||||
key = key.replace(/\s/g, '');
|
||||
keys = key.split(',');
|
||||
if ((keys[keys.length - 1]) == '') {
|
||||
keys[keys.length - 2] += ',';
|
||||
}
|
||||
return keys;
|
||||
}
|
||||
|
||||
// abstract mods logic for assign and unassign
|
||||
function getMods(key) {
|
||||
var mods = key.slice(0, key.length - 1);
|
||||
for (var mi = 0; mi < mods.length; mi++)
|
||||
mods[mi] = _MODIFIERS[mods[mi]];
|
||||
return mods;
|
||||
}
|
||||
|
||||
// cross-browser events
|
||||
function addEvent(object, event, method) {
|
||||
if (object.addEventListener)
|
||||
object.addEventListener(event, method, false);
|
||||
else if(object.attachEvent)
|
||||
object.attachEvent('on'+event, function(){ method(window.event) });
|
||||
};
|
||||
|
||||
// set the handlers globally on document
|
||||
addEvent(document, 'keydown', function(event) { dispatch(event) }); // Passing _scope to a callback to ensure it remains the same by execution. Fixes #48
|
||||
addEvent(document, 'keyup', clearModifier);
|
||||
|
||||
// reset modifiers to false whenever the window is (re)focused.
|
||||
addEvent(window, 'focus', resetModifiers);
|
||||
|
||||
// store previously defined key
|
||||
var previousKey = global.key;
|
||||
|
||||
// restore previously defined key and return reference to our key object
|
||||
function noConflict() {
|
||||
var k = global.key;
|
||||
global.key = previousKey;
|
||||
return k;
|
||||
}
|
||||
|
||||
// set window.key and window.key.set/get/deleteScope, and the default filter
|
||||
global.key = assignKey;
|
||||
global.key.setScope = setScope;
|
||||
global.key.getScope = getScope;
|
||||
global.key.deleteScope = deleteScope;
|
||||
global.key.filter = filter;
|
||||
global.key.isPressed = isPressed;
|
||||
global.key.getPressedKeyCodes = getPressedKeyCodes;
|
||||
global.key.noConflict = noConflict;
|
||||
global.key.unbind = unbindKey;
|
||||
|
||||
if(typeof module !== 'undefined') module.exports = key;
|
||||
|
||||
})(this);
|
||||
|
|
@ -37,6 +37,7 @@ Matter.Render = Render;
|
|||
Matter.RenderPixi = RenderPixi;
|
||||
Matter.Events = Events;
|
||||
Matter.Query = Query;
|
||||
Matter.Inspector = Inspector;
|
||||
|
||||
// CommonJS module
|
||||
if (typeof exports !== 'undefined') {
|
||||
|
|
|
|||
|
|
@ -27,12 +27,7 @@ var Gui = {};
|
|||
restitution: 0,
|
||||
friction: 0.1,
|
||||
frictionAir: 0.01,
|
||||
renderer: 'canvas',
|
||||
editMode: false,
|
||||
edit: {
|
||||
selectedBody: null,
|
||||
selectedConstraint: null
|
||||
}
|
||||
renderer: 'canvas'
|
||||
};
|
||||
|
||||
var _datGuiSupported = window.dat && window.localStorage;
|
||||
|
|
|
|||
432
src/tools/Inspector.js
Normal file
432
src/tools/Inspector.js
Normal file
|
|
@ -0,0 +1,432 @@
|
|||
/**
|
||||
* See [Demo.js](https://github.com/liabru/matter-js/blob/master/demo/js/Demo.js)
|
||||
* and [DemoMobile.js](https://github.com/liabru/matter-js/blob/master/demo/js/DemoMobile.js) for usage examples.
|
||||
*
|
||||
* @class Inspector
|
||||
*/
|
||||
|
||||
var Inspector = {};
|
||||
|
||||
(function() {
|
||||
|
||||
var _key;
|
||||
|
||||
/**
|
||||
* Creates a new inspector tool and inserts it into the page. Requires jQuery and jsTree.
|
||||
* @method create
|
||||
* @param {engine} engine
|
||||
* @param {object} options
|
||||
* @return {inspector} A container for a configured dat.inspector
|
||||
*/
|
||||
Inspector.create = function(engine, options) {
|
||||
if (!jQuery || !$.fn.jstree) {
|
||||
console.log("Could not create inspector. Check jQuery and jsTree libraries are loaded first.");
|
||||
return;
|
||||
}
|
||||
|
||||
_key = window.key || {};
|
||||
|
||||
var inspector = {
|
||||
controls: {
|
||||
container: null,
|
||||
worldTree: null
|
||||
},
|
||||
engine: engine,
|
||||
isPaused: false,
|
||||
selected: []
|
||||
};
|
||||
|
||||
_initControls(inspector);
|
||||
_initEvents(inspector);
|
||||
|
||||
return inspector;
|
||||
};
|
||||
|
||||
var _initControls = function(inspector) {
|
||||
var engine = inspector.engine;
|
||||
|
||||
var $inspectorContainer = $('<div class="inspector-container">'),
|
||||
$worldTree = $('<div class="world-tree">').jstree(),
|
||||
$buttonGroup = $('<div class="ins-control-group">')
|
||||
$importButton = $('<button class="ins-import-button ins-button">Import</button>'),
|
||||
$exportButton = $('<button class="ins-export-button ins-button">Export</button>'),
|
||||
$pauseButton = $('<button class="ins-pause-button ins-button">Pause</button>');
|
||||
|
||||
$buttonGroup.append($pauseButton, $importButton, $exportButton);
|
||||
$inspectorContainer.prepend($buttonGroup, $worldTree);
|
||||
$('body').prepend($inspectorContainer);
|
||||
|
||||
inspector.controls.worldTree = $worldTree;
|
||||
inspector.controls.pauseButton = $pauseButton;
|
||||
inspector.controls.importButton = $importButton;
|
||||
inspector.controls.exportButton = $exportButton;
|
||||
inspector.controls.container = $inspectorContainer;
|
||||
};
|
||||
|
||||
var _initEvents = function(inspector) {
|
||||
var engine = inspector.engine,
|
||||
controls = inspector.controls;
|
||||
|
||||
var mainSelection = [];
|
||||
|
||||
controls.worldTree.on('changed.jstree', function(event, data) {
|
||||
var selected = [];
|
||||
|
||||
data.selected = data.selected || [data.node.id];
|
||||
|
||||
for (var i = 0; i < data.selected.length; i++) {
|
||||
var nodeId = data.selected[i],
|
||||
objectType = nodeId.split('_')[0],
|
||||
objectId = nodeId.split('_')[1],
|
||||
worldObject = Composite.get(engine.world, objectType, objectId);
|
||||
|
||||
switch (objectType) {
|
||||
case 'body':
|
||||
case 'constraint':
|
||||
selected.push(worldObject);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (data.action === 'select_node')
|
||||
_setSelectedObjects(inspector, mainSelection = selected);
|
||||
|
||||
if (data.action === 'hover_node' && mainSelection.length <= 1)
|
||||
_setSelectedObjects(inspector, selected);
|
||||
|
||||
if (data.action === 'dehover_node')
|
||||
_setSelectedObjects(inspector, mainSelection);
|
||||
});
|
||||
|
||||
controls.pauseButton.click(function() {
|
||||
if (!inspector.isPaused) {
|
||||
engine.timing.timeScale = 0;
|
||||
inspector.isPaused = true;
|
||||
$(this).text('Play');
|
||||
} else {
|
||||
engine.timing.timeScale = 1;
|
||||
inspector.isPaused = false;
|
||||
$(this).text('Pause');
|
||||
_setSelectedObjects(inspector, []);
|
||||
}
|
||||
});
|
||||
|
||||
Events.on(engine, 'tick', function() {
|
||||
if (engine.world.isModified) {
|
||||
var data = _generateCompositeTreeNode(engine.world);
|
||||
_updateTree(controls.worldTree.data("jstree"), data);
|
||||
}
|
||||
|
||||
if (key.isPressed('del') || key.isPressed('backspace')) {
|
||||
var objects = [];
|
||||
|
||||
for (var i = 0; i < inspector.selected.length; i++)
|
||||
objects.push(inspector.selected[i].data);
|
||||
|
||||
Composite.remove(engine.world, objects, true);
|
||||
_setSelectedObjects(inspector, []);
|
||||
}
|
||||
});
|
||||
|
||||
Events.on(engine, 'mousedown', function(event) {
|
||||
if (inspector.isPaused) {
|
||||
var mouse = event.mouse,
|
||||
engine = event.source,
|
||||
bodies = Composite.allBodies(engine.world),
|
||||
constraints = Composite.allConstraints(engine.world),
|
||||
isUnionSelect = _key.shift || _key.control;
|
||||
|
||||
if (mouse.button === 0) {
|
||||
var hasSelected = false;
|
||||
|
||||
for (var i = 0; i < bodies.length; i++) {
|
||||
var body = bodies[i];
|
||||
|
||||
if (Bounds.contains(body.bounds, mouse.position)
|
||||
&& Vertices.contains(body.vertices, mouse.position)) {
|
||||
|
||||
if (isUnionSelect) {
|
||||
_addSelectedObject(inspector, body);
|
||||
} else {
|
||||
_setSelectedObjects(inspector, [body]);
|
||||
}
|
||||
|
||||
hasSelected = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!hasSelected) {
|
||||
for (i = 0; i < constraints.length; i++) {
|
||||
var constraint = constraints[i],
|
||||
bodyA = constraint.bodyA,
|
||||
bodyB = constraint.bodyB;
|
||||
|
||||
var pointAWorld = constraint.pointA,
|
||||
pointBWorld = constraint.pointB;
|
||||
if (bodyA) pointAWorld = Vector.add(bodyA.position, constraint.pointA);
|
||||
if (bodyB) pointBWorld = Vector.add(bodyB.position, constraint.pointB);
|
||||
|
||||
if (!pointAWorld || !pointBWorld)
|
||||
continue;
|
||||
|
||||
var distA = Vector.magnitudeSquared(Vector.sub(mouse.position, pointAWorld)),
|
||||
distB = Vector.magnitudeSquared(Vector.sub(mouse.position, pointBWorld));
|
||||
|
||||
if (distA < 100 || distB < 100) {
|
||||
if (isUnionSelect) {
|
||||
_addSelectedObject(inspector, constraint);
|
||||
} else {
|
||||
_setSelectedObjects(inspector, [constraint]);
|
||||
}
|
||||
|
||||
hasSelected = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!hasSelected)
|
||||
_setSelectedObjects(inspector, []);
|
||||
}
|
||||
}
|
||||
|
||||
if (mouse.button === 0 && inspector.selected.length > 0) {
|
||||
for (var i = 0; i < inspector.selected.length; i++) {
|
||||
var item = inspector.selected[i],
|
||||
data = item.data;
|
||||
|
||||
if (data.position) {
|
||||
item.mousedownOffset = {
|
||||
x: mouse.position.x - data.position.x,
|
||||
y: mouse.position.y - data.position.y
|
||||
};
|
||||
} else if (data.pointA && !data.bodyA) {
|
||||
item.mousedownOffset = {
|
||||
x: mouse.position.x - data.pointA.x,
|
||||
y: mouse.position.y - data.pointA.y
|
||||
};
|
||||
} else if (data.pointB && !data.bodyB) {
|
||||
item.mousedownOffset = {
|
||||
x: mouse.position.x - data.pointB.x,
|
||||
y: mouse.position.y - data.pointB.y
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Events.on(engine, 'mousemove', function(event) {
|
||||
var mouse = event.mouse,
|
||||
selected = inspector.selected;
|
||||
|
||||
if (inspector.isPaused) {
|
||||
if (mouse.button !== 0 || mouse.sourceEvents.mousedown || mouse.sourceEvents.mouseup)
|
||||
return;
|
||||
|
||||
for (var i = 0; i < selected.length; i++) {
|
||||
var item = selected[i],
|
||||
data = item.data;
|
||||
|
||||
switch (data.type) {
|
||||
case 'body':
|
||||
|
||||
var delta = {
|
||||
x: mouse.position.x - data.position.x - item.mousedownOffset.x,
|
||||
y: mouse.position.y - data.position.y - item.mousedownOffset.y
|
||||
};
|
||||
|
||||
Body.translate(data, delta);
|
||||
|
||||
break;
|
||||
|
||||
case 'constraint':
|
||||
|
||||
var point = data.pointA;
|
||||
if (data.bodyA)
|
||||
point = data.pointB;
|
||||
|
||||
point.x = mouse.position.x - item.mousedownOffset.x;
|
||||
point.y = mouse.position.y - item.mousedownOffset.y;
|
||||
|
||||
var initialPointA = data.bodyA ? Vector.add(data.bodyA.position, data.pointA) : data.pointA,
|
||||
initialPointB = data.bodyB ? Vector.add(data.bodyB.position, data.pointB) : data.pointB;
|
||||
|
||||
data.length = Vector.magnitude(Vector.sub(initialPointA, initialPointB));
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// can only render if a render context is exposed
|
||||
if (engine.render && engine.render.context) {
|
||||
Events.on(engine, 'afterRender', function() {
|
||||
_render(inspector);
|
||||
});
|
||||
}
|
||||
|
||||
// prevent the backspace key from navigating back
|
||||
// http://stackoverflow.com/questions/1495219/how-can-i-prevent-the-backspace-key-from-navigating-back
|
||||
$(document).unbind('keydown').bind('keydown', function (event) {
|
||||
var doPrevent = false;
|
||||
if (event.keyCode === 8) {
|
||||
var d = event.srcElement || event.target;
|
||||
if ((d.tagName.toUpperCase() === 'INPUT' && (d.type.toUpperCase() === 'TEXT' || d.type.toUpperCase() === 'PASSWORD' || d.type.toUpperCase() === 'FILE' || d.type.toUpperCase() === 'EMAIL' ))
|
||||
|| d.tagName.toUpperCase() === 'TEXTAREA') {
|
||||
doPrevent = d.readOnly || d.disabled;
|
||||
}
|
||||
else {
|
||||
doPrevent = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (doPrevent) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var _setSelectedObjects = function(inspector, objects) {
|
||||
var worldTree = inspector.controls.worldTree.data("jstree"),
|
||||
selectedItems = [];
|
||||
|
||||
for (var i = 0; i < inspector.selected.length; i++) {
|
||||
var item = inspector.selected[i],
|
||||
data = item.data;
|
||||
|
||||
worldTree.deselect_node(data.type + "_" + data.id, true);
|
||||
}
|
||||
|
||||
inspector.selected = [];
|
||||
|
||||
for (i = 0; i < objects.length; i++) {
|
||||
var data = objects[i];
|
||||
_addSelectedObject(inspector, data);
|
||||
worldTree.select_node(data.type + "_" + data.id, true);
|
||||
}
|
||||
};
|
||||
|
||||
var _addSelectedObject = function(inspector, object) {
|
||||
inspector.selected.push({
|
||||
data: object
|
||||
});
|
||||
};
|
||||
|
||||
var _render = function(inspector) {
|
||||
var engine = inspector.engine,
|
||||
mouse = engine.input.mouse,
|
||||
context = engine.render.context,
|
||||
selected = inspector.selected;
|
||||
|
||||
for (var i = 0; i < selected.length; i++) {
|
||||
var item = selected[i].data;
|
||||
|
||||
switch (item.type) {
|
||||
case 'body':
|
||||
|
||||
var bounds = item.bounds;
|
||||
|
||||
context.beginPath();
|
||||
context.rect(bounds.min.x, bounds.min.y, bounds.max.x - bounds.min.x, bounds.max.y - bounds.min.y);
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = 'rgba(255,165,0,0.7)';
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
|
||||
break;
|
||||
|
||||
case 'constraint':
|
||||
|
||||
var point = item.pointA;
|
||||
|
||||
if (item.bodyA)
|
||||
point = item.pointB;
|
||||
|
||||
context.beginPath();
|
||||
context.arc(point.x, point.y, 10, 0, 2 * Math.PI);
|
||||
context.lineWidth = 2;
|
||||
context.strokeStyle = 'rgba(255,165,0,0.7)';
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var _updateTree = function(tree, data) {
|
||||
data.state = data.state || { opened: true };
|
||||
tree.settings.core.data = data;
|
||||
tree.refresh(-1);
|
||||
};
|
||||
|
||||
var _generateCompositeTreeNode = function(composite) {
|
||||
var node = {
|
||||
id: 'composite_' + composite.id,
|
||||
text: (composite.label ? composite.label : 'Composite') + ' ' + composite.id,
|
||||
children: []
|
||||
};
|
||||
|
||||
if (composite.bodies.length > 0)
|
||||
node.children.push(_generateBodiesTreeNode(composite.bodies));
|
||||
|
||||
if (composite.constraints.length > 0)
|
||||
node.children.push(_generateConstraintsTreeNode(composite.constraints));
|
||||
|
||||
if (composite.composites.length > 0)
|
||||
node.children.push(_generateCompositesTreeNode(composite.composites));
|
||||
|
||||
return node;
|
||||
};
|
||||
|
||||
var _generateCompositesTreeNode = function(composites) {
|
||||
var node = {
|
||||
text: 'Composites',
|
||||
children: []
|
||||
};
|
||||
|
||||
for (var i = 0; i < composites.length; i++) {
|
||||
var composite = composites[i];
|
||||
node.children.push(_generateCompositeTreeNode(composite));
|
||||
}
|
||||
|
||||
return node;
|
||||
};
|
||||
|
||||
var _generateBodiesTreeNode = function(bodies) {
|
||||
var node = {
|
||||
text: 'Bodies',
|
||||
children: []
|
||||
};
|
||||
|
||||
for (var i = 0; i < bodies.length; i++) {
|
||||
var body = bodies[i];
|
||||
node.children.push({
|
||||
id: 'body_' + body.id,
|
||||
text: (body.label ? body.label : 'Body') + ' ' + body.id,
|
||||
});
|
||||
}
|
||||
|
||||
return node;
|
||||
};
|
||||
|
||||
var _generateConstraintsTreeNode = function(constraints) {
|
||||
var node = {
|
||||
text: 'Constraints',
|
||||
children: []
|
||||
};
|
||||
|
||||
for (var i = 0; i < constraints.length; i++) {
|
||||
var constraint = constraints[i];
|
||||
node.children.push({
|
||||
id: 'constraint_' + constraint.id,
|
||||
text: (constraint.label ? constraint.label : 'Constraint') + ' ' + constraint.id,
|
||||
});
|
||||
}
|
||||
|
||||
return node;
|
||||
};
|
||||
|
||||
})();
|
||||
Loading…
Reference in a new issue