From 43ce56771439887a4796e422486cb39a4043f0f4 Mon Sep 17 00:00:00 2001 From: liabru Date: Tue, 29 Apr 2014 17:35:27 +0100 Subject: [PATCH] further work on Matter.Inspector --- demo/css/matter-gui.css | 104 ---------- demo/css/matter-inspector.css | 157 --------------- demo/css/matter-tools.css | 357 ++++++++++++++++++++++++++++++++++ demo/css/style.css | 8 + demo/dev.html | 3 +- demo/index.html | 2 +- demo/js/Demo.js | 3 + src/render/Render.js | 70 +++++++ src/tools/Inspector.js | 177 ++++++++--------- 9 files changed, 517 insertions(+), 364 deletions(-) delete mode 100644 demo/css/matter-gui.css delete mode 100644 demo/css/matter-inspector.css create mode 100644 demo/css/matter-tools.css diff --git a/demo/css/matter-gui.css b/demo/css/matter-gui.css deleted file mode 100644 index 256e759..0000000 --- a/demo/css/matter-gui.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/demo/css/matter-inspector.css b/demo/css/matter-inspector.css deleted file mode 100644 index ef8368d..0000000 --- a/demo/css/matter-inspector.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/demo/css/matter-tools.css b/demo/css/matter-tools.css new file mode 100644 index 0000000..4870ff0 --- /dev/null +++ b/demo/css/matter-tools.css @@ -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; +} \ No newline at end of file diff --git a/demo/css/style.css b/demo/css/style.css index 0fe2f98..739c327 100644 --- a/demo/css/style.css +++ b/demo/css/style.css @@ -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%; } diff --git a/demo/dev.html b/demo/dev.html index f5bf456..98778cf 100644 --- a/demo/dev.html +++ b/demo/dev.html @@ -7,13 +7,12 @@ - - + diff --git a/demo/index.html b/demo/index.html index aba02df..f17f4dc 100644 --- a/demo/index.html +++ b/demo/index.html @@ -16,7 +16,7 @@

Matter.js Physics Engine Demo

-

Mobile Demo · Project page · GitHub

+

Mobile Demo · Project page · GitHub