mirror of
https://github.com/liabru/matter-js.git
synced 2024-12-26 13:49:01 -05:00
further work on Matter.Inspector
This commit is contained in:
liabru
parent
964898bea2
commit
43ce567714
9 changed files with 517 additions and 364 deletions
|
|
@ -1,104 +0,0 @@
|
|||
body .dg.main.taller-than-window .close-button {
|
||||
border-top: 1px solid #444;
|
||||
border-right: 4px solid #444;
|
||||
}
|
||||
|
||||
body .dg.main .close-button {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
body .dg.main .close-button:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
body .dg {
|
||||
color: #aaa;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
body .dg.main::-webkit-scrollbar {
|
||||
background: #3d3d3d;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
body .dg.main::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
width: 5px;
|
||||
border-left: 5px solid #3d3d3d;
|
||||
border-right: 6px solid rgba(0,0,0,0.2);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
body .dg li:not(.folder) {
|
||||
background: #3d3d3d;
|
||||
border-bottom: 0px;
|
||||
padding: 0 0 0 12px;
|
||||
}
|
||||
|
||||
body .dg .cr.function {
|
||||
border-top: 1px solid #444;
|
||||
}
|
||||
|
||||
body .dg li.save-row .button {
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
body .dg li.title {
|
||||
padding-left: 22px;
|
||||
background: #444 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 10px 10px no-repeat;
|
||||
}
|
||||
|
||||
body .dg .cr.boolean:hover {
|
||||
background: #3d3d3d;
|
||||
}
|
||||
|
||||
body .dg .cr.function:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
body .dg .c select {
|
||||
margin-top: 2px;
|
||||
margin-left: -5px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
body .dg .c select,
|
||||
body .dg .c input[type=text],
|
||||
body .dg .cr.number input[type=text] {
|
||||
background: #333;
|
||||
color: #999;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body .dg .c input[type=text]:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
body .dg .c input[type=text]:focus {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body .dg .c .slider {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
body .dg .c .slider:hover {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
body .dg .c .slider-fg {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
body .dg .c .slider:hover .slider-fg {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
body .dg li.folder {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
body .dg.a {
|
||||
border-right:4px solid #3d3d3d;
|
||||
}
|
||||
|
|
@ -1,157 +0,0 @@
|
|||
.ins-cursor-move canvas {
|
||||
cursor: move !important;
|
||||
}
|
||||
|
||||
.ins-cursor-rotate canvas {
|
||||
cursor: ew-resize !important;
|
||||
}
|
||||
|
||||
.ins-cursor-scale canvas {
|
||||
cursor: nwse-resize !important;
|
||||
}
|
||||
|
||||
.ins-container {
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
width: 220px;
|
||||
height: 98%;
|
||||
left: 0;
|
||||
background: #3d3d3d;
|
||||
padding: 1% 20px;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
border-right: 2px solid #3d3d3d;
|
||||
}
|
||||
|
||||
.ins-world-tree {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
left: -17px;
|
||||
right: 0px;
|
||||
top: 92px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
.ins-control-group {
|
||||
display: block;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ins-button {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 2px;
|
||||
font-size: 11px;
|
||||
padding: 6px 8px;
|
||||
min-width: 50px;
|
||||
text-align: center;
|
||||
background: #333;
|
||||
border: 0;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-wholerow-hovered,
|
||||
.jstree-default .jstree-hovered {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-wholerow {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-wholerow-clicked,
|
||||
.jstree-default .jstree-clicked {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-open > .jstree-children > .jstree-node > .jstree-anchor:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 1px;
|
||||
height: 26px;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-anchor.jstree-clicked:before {
|
||||
background: #373737 !important;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-node-type-body > .jstree-anchor:before {
|
||||
border-right: 3px solid #e1115f !important;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-node-type-constraint > .jstree-anchor:before {
|
||||
border-right: 3px solid #1ed36f !important;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-node-type-composite > .jstree-anchor:before {
|
||||
border-right: 3px solid #2fa1d6 !important;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-node,
|
||||
.jstree-default .jstree-leaf .jstree-ocl {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default .jstree-open .jstree-ocl {
|
||||
background-position: -36px -4px;
|
||||
}
|
||||
.jstree-default .jstree-closed .jstree-ocl {
|
||||
background-position: -4px -4px;
|
||||
}
|
||||
|
||||
.jstree-anchor {
|
||||
padding: 1px 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.jstree-anchor .jstree-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jstree-node-type-bodies > .jstree-anchor,
|
||||
.jstree-node-type-constraints > .jstree-anchor,
|
||||
.jstree-node-type-composites > .jstree-anchor {
|
||||
color: #888;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ins-container *::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.ins-container *::-webkit-scrollbar-thumb:vertical {
|
||||
border-left: 3px solid #3d3d3d;
|
||||
background: rgba(0,0,0,0.2);
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.ins-container *::-webkit-scrollbar-thumb:horizontal {
|
||||
border-top: 3px solid #3d3d3d;
|
||||
background: rgba(0,0,0,0.2);
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.ins-container *::-webkit-scrollbar-track,
|
||||
.ins-container *::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#vakata-dnd {
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
357
demo/css/matter-tools.css
Normal file
357
demo/css/matter-tools.css
Normal file
|
|
@ -0,0 +1,357 @@
|
|||
/*
|
||||
* Matter.Gui
|
||||
*/
|
||||
|
||||
body .dg.main {
|
||||
box-shadow: 0 0 8px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
body.gui-auto-hide .dg.ac {
|
||||
right: -233px;
|
||||
|
||||
-webkit-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
-moz-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
-o-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); /* custom */
|
||||
|
||||
-webkit-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
-moz-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
-o-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); /* custom */
|
||||
|
||||
transition-delay: 3s;
|
||||
-webkit-transition-delay: 3s;
|
||||
}
|
||||
|
||||
body .dg.ac:hover,
|
||||
body.gui-show .dg.ac {
|
||||
right: 0px;
|
||||
|
||||
-webkit-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
-moz-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
-o-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); /* custom */
|
||||
|
||||
-webkit-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
-moz-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
-o-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); /* custom */
|
||||
|
||||
transition-delay: 0;
|
||||
-webkit-transition-delay: 0;
|
||||
}
|
||||
|
||||
|
||||
body .dg.main.taller-than-window .close-button {
|
||||
border-top: 1px solid #444;
|
||||
border-right: 4px solid #444;
|
||||
}
|
||||
|
||||
body .dg.main .close-button {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
body .dg.main .close-button:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
body .dg.main::-webkit-scrollbar {
|
||||
background: #3d3d3d;
|
||||
width: 9px;
|
||||
}
|
||||
|
||||
body .dg.main::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
width: 5px;
|
||||
border-left: 5px solid #3d3d3d;
|
||||
border-right: 6px solid rgba(0,0,0,0.2);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
body .dg {
|
||||
color: #aaa;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
body .dg li:not(.folder) {
|
||||
background: #3d3d3d;
|
||||
border-bottom: 0px;
|
||||
padding: 0 0 0 12px;
|
||||
}
|
||||
|
||||
body .dg .cr.function {
|
||||
border-top: 1px solid #444;
|
||||
}
|
||||
|
||||
body .dg li.save-row .button {
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
body .dg li.title {
|
||||
padding-left: 22px;
|
||||
background: #444 url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 10px 10px no-repeat;
|
||||
}
|
||||
|
||||
body .dg .cr.boolean:hover {
|
||||
background: #3d3d3d;
|
||||
}
|
||||
|
||||
body .dg .cr.function:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
body .dg .c select {
|
||||
margin-top: 2px;
|
||||
margin-left: -5px;
|
||||
padding: 3px 5px;
|
||||
}
|
||||
|
||||
body .dg .c select,
|
||||
body .dg .c input[type=text],
|
||||
body .dg .cr.number input[type=text] {
|
||||
background: #333;
|
||||
color: #999;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body .dg .c input[type=text]:hover {
|
||||
background: #444;
|
||||
}
|
||||
|
||||
body .dg .c input[type=text]:focus {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
body .dg .c .slider {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
body .dg .c .slider:hover {
|
||||
background: #666;
|
||||
}
|
||||
|
||||
body .dg .c .slider-fg {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
body .dg .c .slider:hover .slider-fg {
|
||||
background: #999;
|
||||
}
|
||||
|
||||
body .dg li.folder {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
body .dg.a {
|
||||
border-right:4px solid #3d3d3d;
|
||||
}
|
||||
|
||||
/*
|
||||
* Matter.Inspector
|
||||
*/
|
||||
|
||||
.ins-cursor-move canvas {
|
||||
cursor: move !important;
|
||||
}
|
||||
|
||||
.ins-cursor-rotate canvas {
|
||||
cursor: ew-resize !important;
|
||||
}
|
||||
|
||||
.ins-cursor-scale canvas {
|
||||
cursor: nwse-resize !important;
|
||||
}
|
||||
|
||||
.ins-container {
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
width: 220px;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: #3d3d3d;
|
||||
padding: 1% 20px;
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
border-right: 2px solid #3d3d3d;
|
||||
box-shadow: 0 0 8px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.ins-auto-hide .ins-container {
|
||||
left: -245px;
|
||||
border-right: 1px dotted #888;
|
||||
|
||||
-webkit-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
-moz-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
-o-transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
transition: all 500ms cubic-bezier(0.965, 0.025, 0.735, 0.415); /* custom */
|
||||
|
||||
-webkit-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
-moz-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
-o-transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415);
|
||||
transition-timing-function: cubic-bezier(0.965, 0.025, 0.735, 0.415); /* custom */
|
||||
|
||||
transition-delay: 3s;
|
||||
-webkit-transition-delay: 3s;
|
||||
}
|
||||
|
||||
.ins-container:hover,
|
||||
.ins-show .ins-container {
|
||||
left: 0px;
|
||||
border-right: 0px dotted #888;
|
||||
|
||||
-webkit-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
-moz-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
-o-transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
transition: all 500ms cubic-bezier(0.095, 0.665, 0.400, 0.835); /* custom */
|
||||
|
||||
-webkit-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
-moz-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
-o-transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835);
|
||||
transition-timing-function: cubic-bezier(0.095, 0.665, 0.400, 0.835); /* custom */
|
||||
|
||||
transition-delay: 0;
|
||||
-webkit-transition-delay: 0;
|
||||
}
|
||||
|
||||
.ins-world-tree {
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
left: -24px;
|
||||
right: 0px;
|
||||
top: 60px;
|
||||
bottom: 8px;
|
||||
}
|
||||
|
||||
.ins-control-group {
|
||||
display: block;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.ins-button {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0 2px;
|
||||
font-size: 11px;
|
||||
padding: 6px 8px;
|
||||
min-width: 51px;
|
||||
text-align: center;
|
||||
background: #333;
|
||||
border: 0;
|
||||
color: #aaa;
|
||||
border-radius: 2px;
|
||||
border-bottom: 2px solid #2e2e2e;
|
||||
}
|
||||
|
||||
.ins-button:hover {
|
||||
background: #3a3a3a;
|
||||
border-bottom: 2px solid #2fa1d6;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-wholerow-hovered,
|
||||
.jstree-default .jstree-hovered {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-wholerow {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-wholerow-clicked,
|
||||
.jstree-default .jstree-clicked {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-open > .jstree-children > .jstree-node > .jstree-anchor:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
left: 0;
|
||||
right: 1px;
|
||||
height: 26px;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-anchor.jstree-clicked:before {
|
||||
background: #373737 !important;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-node-type-body > .jstree-anchor:before {
|
||||
border-right: 3px solid #e1115f !important;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-node-type-constraint > .jstree-anchor:before {
|
||||
border-right: 3px solid #1ed36f !important;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-node-type-composite > .jstree-anchor:before {
|
||||
border-right: 3px solid #2fa1d6 !important;
|
||||
}
|
||||
|
||||
.jstree-default .jstree-node,
|
||||
.jstree-default .jstree-leaf .jstree-ocl {
|
||||
background: transparent;
|
||||
}
|
||||
.jstree-default .jstree-open .jstree-ocl {
|
||||
background-position: -36px -4px;
|
||||
}
|
||||
.jstree-default .jstree-closed .jstree-ocl {
|
||||
background-position: -4px -4px;
|
||||
}
|
||||
|
||||
.jstree-anchor {
|
||||
padding: 1px 0;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.jstree-anchor .jstree-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.jstree-node-type-bodies > .jstree-anchor,
|
||||
.jstree-node-type-constraints > .jstree-anchor,
|
||||
.jstree-node-type-composites > .jstree-anchor {
|
||||
color: #888;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ins-container *::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.ins-container *::-webkit-scrollbar-thumb:vertical {
|
||||
border-left: 3px solid #3d3d3d;
|
||||
background: rgba(0,0,0,0.2);
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.ins-container *::-webkit-scrollbar-thumb:horizontal {
|
||||
border-top: 3px solid #3d3d3d;
|
||||
background: rgba(0,0,0,0.2);
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.ins-container *::-webkit-scrollbar-track,
|
||||
.ins-container *::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#vakata-dnd {
|
||||
font-family: Arial;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
|
@ -42,6 +42,14 @@ h1 {
|
|||
padding: 64px 280px 0 280px;
|
||||
}
|
||||
|
||||
.ins-auto-hide .container {
|
||||
padding-left: 32px;
|
||||
}
|
||||
|
||||
.gui-auto-hide .container {
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.is-mobile .container {
|
||||
padding: 6% 6% 0 6%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,13 +7,12 @@
|
|||
<meta name="robots" content="noindex">
|
||||
|
||||
<!-- only required if using Matter.Gui -->
|
||||
<link rel="stylesheet" href="./css/matter-gui.css" type="text/css">
|
||||
<script type="text/javascript" src="./js/lib/dat.gui.min.js"></script>
|
||||
<script type="text/javascript" src="./js/lib/resurrect.js"></script>
|
||||
|
||||
<!-- only required if using Matter.Inspector -->
|
||||
<link rel="stylesheet" href="./js/lib/jstree/themes/default/style.css" type="text/css">
|
||||
<link rel="stylesheet" href="./css/matter-inspector.css" type="text/css">
|
||||
<link rel="stylesheet" href="./css/matter-tools.css" type="text/css">
|
||||
<script type="text/javascript" src="./js/lib/jquery-1.11.0.min.js"></script>
|
||||
<script type="text/javascript" src="./js/lib/jstree/jstree.min.js"></script>
|
||||
<script type="text/javascript" src="./js/lib/keymaster.js"></script>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<h1>Matter.js Physics Engine Demo</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>
|
||||
|
|
|
|||
|
|
@ -910,6 +910,9 @@
|
|||
Events.off(_engine);
|
||||
}*/
|
||||
|
||||
// reset id pool
|
||||
Common._nextId = 0;
|
||||
|
||||
_engine.enableSleeping = false;
|
||||
_engine.world.gravity.y = 1;
|
||||
|
||||
|
|
|
|||
|
|
@ -688,6 +688,76 @@ var Render = {};
|
|||
c.stroke();
|
||||
};
|
||||
|
||||
/**
|
||||
* Description
|
||||
* @method inspector
|
||||
* @param {inspector} inspector
|
||||
* @param {RenderingContext} context
|
||||
*/
|
||||
Render.inspector = function(inspector, context) {
|
||||
var engine = inspector.engine,
|
||||
mouse = engine.input.mouse,
|
||||
selected = inspector.selected,
|
||||
c = context,
|
||||
options = engine.render.options,
|
||||
bounds;
|
||||
|
||||
for (var i = 0; i < selected.length; i++) {
|
||||
var item = selected[i].data;
|
||||
|
||||
context.translate(0.5, 0.5);
|
||||
context.lineWidth = 1;
|
||||
context.strokeStyle = 'rgba(255,165,0,0.8)';
|
||||
|
||||
switch (item.type) {
|
||||
|
||||
case 'body':
|
||||
|
||||
// render body selections
|
||||
bounds = item.bounds;
|
||||
context.beginPath();
|
||||
context.rect(Math.floor(bounds.min.x - 3), Math.floor(bounds.min.y - 3),
|
||||
Math.floor(bounds.max.x - bounds.min.x + 6), Math.floor(bounds.max.y - bounds.min.y + 6));
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
|
||||
break;
|
||||
|
||||
case 'constraint':
|
||||
|
||||
// render constraint selections
|
||||
var point = item.pointA;
|
||||
if (item.bodyA)
|
||||
point = item.pointB;
|
||||
context.beginPath();
|
||||
context.arc(point.x, point.y, 10, 0, 2 * Math.PI);
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
context.translate(-0.5, -0.5);
|
||||
}
|
||||
|
||||
// render selection region
|
||||
if (inspector.selectStart !== null) {
|
||||
context.translate(0.5, 0.5);
|
||||
context.lineWidth = 1;
|
||||
context.setLineDash([1,2]);
|
||||
context.strokeStyle = 'rgba(255,165,0,0.5)';
|
||||
bounds = inspector.selectBounds;
|
||||
context.beginPath();
|
||||
context.rect(Math.floor(bounds.min.x), Math.floor(bounds.min.y),
|
||||
Math.floor(bounds.max.x - bounds.min.x), Math.floor(bounds.max.y - bounds.min.y));
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
context.setLineDash([0]);
|
||||
context.translate(-0.5, -0.5);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Description
|
||||
* @method _createCanvas
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ var Inspector = {};
|
|||
root: Composite.create()
|
||||
};
|
||||
|
||||
inspector = Common.extend(inspector, options);
|
||||
|
||||
if (Resurrect) {
|
||||
inspector.serializer = new Resurrect({ prefix: '$' });
|
||||
inspector.serializer.parse = inspector.serializer.resurrect;
|
||||
|
|
@ -50,6 +52,8 @@ var Inspector = {};
|
|||
_key = window.key || {};
|
||||
Inspector.instance = inspector;
|
||||
|
||||
$body.addClass('ins-auto-hide gui-auto-hide');
|
||||
|
||||
Composite.add(inspector.root, engine.world);
|
||||
engine.world.parent = null;
|
||||
|
||||
|
|
@ -57,8 +61,7 @@ var Inspector = {};
|
|||
_initEngineEvents(inspector);
|
||||
_initTree(inspector);
|
||||
_initKeybinds(inspector);
|
||||
_setPaused(inspector, true);
|
||||
|
||||
|
||||
return inspector;
|
||||
};
|
||||
|
||||
|
|
@ -70,15 +73,17 @@ var Inspector = {};
|
|||
$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>');
|
||||
$pauseButton = $('<button class="ins-pause-button ins-button">Pause</button>'),
|
||||
$helpButton = $('<button class="ins-help-button ins-button">Help</button>');
|
||||
|
||||
$buttonGroup.append($pauseButton, $importButton, $exportButton);
|
||||
$buttonGroup.append($pauseButton, $importButton, $exportButton, $helpButton);
|
||||
$inspectorContainer.prepend($buttonGroup);
|
||||
$body.prepend($inspectorContainer);
|
||||
|
||||
controls.pauseButton = $pauseButton;
|
||||
controls.importButton = $importButton;
|
||||
controls.exportButton = $exportButton;
|
||||
controls.helpButton = $helpButton;
|
||||
controls.container = $inspectorContainer;
|
||||
|
||||
controls.pauseButton.click(function() {
|
||||
|
|
@ -92,6 +97,24 @@ var Inspector = {};
|
|||
controls.importButton.click(function() {
|
||||
_importFile(inspector);
|
||||
});
|
||||
|
||||
controls.helpButton.click(function() {
|
||||
var help = "matter-inspector quick help \n\n";
|
||||
|
||||
help += "drag nodes in the tree to move them between composites \n\n";
|
||||
help += "[shift + space] to pause or play simulation \n";
|
||||
help += "[right click] and drag to select objects \n";
|
||||
help += "[del] or [backspace] to delete selected objects \n";
|
||||
help += "[shift + s] to scale-xy selected objects with mouse \n";
|
||||
help += "[shift + s + d] to scale-x selected objects with mouse \n";
|
||||
help += "[shift + s + f] to scale-y selected objects with mouse \n";
|
||||
help += "[shift + r] to rotate selected objects with mouse \n";
|
||||
help += "[shift + i] to import objects \n";
|
||||
help += "[shift + o] to export selected objects\n";
|
||||
help += "\nnote: inspector will only render if the renderer in use supports it";
|
||||
|
||||
alert(help);
|
||||
});
|
||||
};
|
||||
|
||||
var _initKeybinds = function(inspector) {
|
||||
|
|
@ -187,22 +210,15 @@ var Inspector = {};
|
|||
worldObject = Composite.get(engine.world, objectId, objectType);
|
||||
|
||||
switch (objectType) {
|
||||
|
||||
case 'body':
|
||||
case 'constraint':
|
||||
|
||||
case 'composite':
|
||||
selected.push(worldObject);
|
||||
|
||||
break;
|
||||
|
||||
case 'composite':
|
||||
case 'composites':
|
||||
case 'bodies':
|
||||
case 'constraints':
|
||||
|
||||
if (objectType === 'composite')
|
||||
selected.push(worldObject);
|
||||
|
||||
var node = worldTree.get_node(nodeId),
|
||||
children = worldTree.get_node(nodeId).children;
|
||||
|
||||
|
|
@ -210,7 +226,6 @@ var Inspector = {};
|
|||
worldTree.select_node(children[j], false);
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -243,6 +258,15 @@ var Inspector = {};
|
|||
|
||||
Composite.move(prevComposite, worldObject, newComposite);
|
||||
node.data.compositeId = newCompositeId;
|
||||
|
||||
/*if (newComposite === engine.world) {
|
||||
// if moved to the world, remove old tree node
|
||||
// it will be regenerated automatically
|
||||
worldTree.set_id(nodeId, nodeId + "-dupe");
|
||||
//setTimeout(function() {
|
||||
// worldTree.delete_node(nodeId);
|
||||
//}, 1);
|
||||
}*/
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -450,7 +474,18 @@ var Inspector = {};
|
|||
case 'body':
|
||||
|
||||
var scale = 1 + Common.sign(mouse.position.x - mousePrevPosition.x) * 0.02;
|
||||
Body.scale(data, scale, scale);
|
||||
|
||||
if (_key.isPressed('d')) {
|
||||
scaleX = scale;
|
||||
scaleY = 1;
|
||||
} else if (_key.isPressed('f')) {
|
||||
scaleX = 1;
|
||||
scaleY = scale;
|
||||
} else {
|
||||
scaleX = scaleY = scale;
|
||||
}
|
||||
|
||||
Body.scale(data, scaleX, scaleY);
|
||||
|
||||
if (data.circleRadius)
|
||||
data.circleRadius *= scale;
|
||||
|
|
@ -517,12 +552,13 @@ var Inspector = {};
|
|||
}
|
||||
});
|
||||
|
||||
// can only render if a render context is exposed
|
||||
if (engine.render && engine.render.context) {
|
||||
Events.on(engine, 'afterRender', function() {
|
||||
_render(inspector);
|
||||
});
|
||||
}
|
||||
// render hook
|
||||
Events.on(engine, 'afterRender', function() {
|
||||
var renderController = engine.render.controller,
|
||||
context = engine.render.context;
|
||||
if (renderController.inspector)
|
||||
renderController.inspector(inspector, context);
|
||||
});
|
||||
};
|
||||
|
||||
var _setPaused = function(inspector, isPaused) {
|
||||
|
|
@ -581,69 +617,6 @@ var Inspector = {};
|
|||
worldTree.select_node(object.type + '_' + object.id, true);
|
||||
};
|
||||
|
||||
var _render = function(inspector) {
|
||||
var engine = inspector.engine,
|
||||
mouse = engine.input.mouse,
|
||||
context = engine.render.context,
|
||||
selected = inspector.selected,
|
||||
bounds;
|
||||
|
||||
for (var i = 0; i < selected.length; i++) {
|
||||
var item = selected[i].data;
|
||||
|
||||
context.translate(0.5, 0.5);
|
||||
context.lineWidth = 1;
|
||||
context.strokeStyle = 'rgba(255,165,0,0.8)';
|
||||
|
||||
switch (item.type) {
|
||||
|
||||
case 'body':
|
||||
|
||||
// render body selections
|
||||
bounds = item.bounds;
|
||||
context.beginPath();
|
||||
context.rect(Math.floor(bounds.min.x - 3), Math.floor(bounds.min.y - 3),
|
||||
Math.floor(bounds.max.x - bounds.min.x + 6), Math.floor(bounds.max.y - bounds.min.y + 6));
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
|
||||
break;
|
||||
|
||||
case 'constraint':
|
||||
|
||||
// render constraint selections
|
||||
var point = item.pointA;
|
||||
if (item.bodyA)
|
||||
point = item.pointB;
|
||||
context.beginPath();
|
||||
context.arc(point.x, point.y, 10, 0, 2 * Math.PI);
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
context.translate(-0.5, -0.5);
|
||||
}
|
||||
|
||||
// render selection region
|
||||
if (inspector.selectStart !== null) {
|
||||
context.translate(0.5, 0.5);
|
||||
context.lineWidth = 1;
|
||||
context.setLineDash([1,2]);
|
||||
context.strokeStyle = 'rgba(255,165,0,0.5)';
|
||||
bounds = inspector.selectBounds;
|
||||
context.beginPath();
|
||||
context.rect(Math.floor(bounds.min.x), Math.floor(bounds.min.y),
|
||||
Math.floor(bounds.max.x - bounds.min.x), Math.floor(bounds.max.y - bounds.min.y));
|
||||
context.closePath();
|
||||
context.stroke();
|
||||
context.setLineDash([0]);
|
||||
context.translate(-0.5, -0.5);
|
||||
}
|
||||
};
|
||||
|
||||
var _updateTree = function(tree, data) {
|
||||
data.state = data.state || { opened: true };
|
||||
tree.settings.core.data = tree.settings.core.data || [data];
|
||||
|
|
@ -768,10 +741,23 @@ var Inspector = {};
|
|||
toExport = [];
|
||||
|
||||
if (inspector.serializer) {
|
||||
for (var i = 0; i < inspector.selected.length; i++)
|
||||
toExport.push(inspector.selected[i].data);
|
||||
var exportComposite = Composite.create({
|
||||
label: 'Exported Objects'
|
||||
});
|
||||
|
||||
var json = inspector.serializer.stringify(toExport, function(key, value) {
|
||||
// add everything else
|
||||
for (var i = 0; i < inspector.selected.length; i++) {
|
||||
var object = inspector.selected[i].data;
|
||||
|
||||
// skip if it's already in the composite tree
|
||||
// this means orphans will be added in the root
|
||||
if (Composite.get(exportComposite, object.id, object.type))
|
||||
continue;
|
||||
|
||||
Composite.add(exportComposite, object);
|
||||
}
|
||||
|
||||
var json = inspector.serializer.stringify(exportComposite, function(key, value) {
|
||||
// skip non-required values
|
||||
if (key === 'path')
|
||||
return undefined;
|
||||
|
|
@ -809,23 +795,14 @@ var Inspector = {};
|
|||
var reader = new FileReader();
|
||||
|
||||
reader.onload = function(e) {
|
||||
var importedObjects;
|
||||
var importedComposite;
|
||||
|
||||
if (inspector.serializer)
|
||||
importedObjects = inspector.serializer.parse(reader.result);
|
||||
importedComposite = inspector.serializer.parse(reader.result);
|
||||
|
||||
if (importedObjects) {
|
||||
var importedComposite = Composite.create({
|
||||
label: 'Imported Objects'
|
||||
});
|
||||
|
||||
for (var i = 0; i < importedObjects.length; i++) {
|
||||
var object = importedObjects[i];
|
||||
if (object.type === 'body') {
|
||||
object.id = Body.nextId();
|
||||
Composite.add(importedComposite, object);
|
||||
}
|
||||
}
|
||||
if (importedComposite) {
|
||||
Composite.rebase(importedComposite);
|
||||
importedComposite.label = 'Imported Objects';
|
||||
|
||||
var worldTree = inspector.controls.worldTree.data('jstree'),
|
||||
data = _generateCompositeTreeNode(importedComposite),
|
||||
|
|
|
|||
Loading…
Reference in a new issue