update mdc, cell libs

public/core/app.js

@@ -1248,7 +1248,7 @@ class App {
   async loadIndexLibs() {
 
     return loadjs([
-      '/lib/ui/cell.js',
+      '/lib/ui/cell.min.js',
       '/lib/ui/treeview/treeview.min.css',
       '/lib/ui/treeview/treeview.min.js',
       '/lib/ui/mdc/dist/material-components-web.min.css',
@@ -1553,7 +1553,7 @@ class App {
 
     const confLibsDefaults = {
       '/drivers/model/aframe':[
-          '/drivers/model/aframe/aframe-master.js',
+          '/drivers/model/aframe/aframe-master.min.js',
           '/drivers/model/aframe/addon/SkyShader.js',
           '/drivers/model/aframe/addon/BVHLoader.js',
           '/drivers/model/aframe/addon/TransformControls.js',
@@ -1574,7 +1574,7 @@ class App {
         '/drivers/view/webrtc/adapter-latest.js'
       ],
       '/drivers/view/editor': [
-        '/lib/ui/cell.js',
+        '/lib/ui/cell.min.js',
         '/lib/ui/treeview/treeview.min.css',
         '/lib/ui/treeview/treeview.min.js',
         '/lib/ui/mdc/dist/material-components-web.min.css',

public/drivers/model/aframe/addon/TransformControls.js

@@ -271,8 +271,8 @@ THREE.TransformControls = function ( camera, domElement ) {
 
 			if ( planeIntersect ) {
 
-				let viewDriver = vwf.views["/drivers/view/aframeComponent"];
-				viewDriver.interpolateView = false;
+				// let viewDriver = vwf.views["/drivers/view/aframeComponent"];
+				//viewDriver.interpolateView = false;
 
 				event.preventDefault();
 				event.stopPropagation();
@@ -578,7 +578,7 @@ THREE.TransformControls = function ( camera, domElement ) {
 
 		if ( pointer.button !== 0 ) return;
 
-		let viewDriver = vwf.views["/drivers/view/aframeComponent"];
+		// let viewDriver = vwf.views["/drivers/view/aframeComponent"];
 		
 		if ( this.dragging && ( this.axis !== null ) ) {
 
@@ -590,7 +590,7 @@ THREE.TransformControls = function ( camera, domElement ) {
 		this.dragging = false;
 		this.axis = null;
 
-		viewDriver.interpolateView = true;
+		//viewDriver.interpolateView = true;
 
 	};
 

public/drivers/view/editor.js

@@ -1463,28 +1463,36 @@ class LCSEditor extends Fabric {
                     }
                     if (sliderPropNames.includes(m.name)) {
     
-                        let currenValue = JSON.parse(m.getValue());
+                        let currentValue = parseInt(JSON.parse(m.getValue()));
     
+                        let max = (currentValue > sliderProps[m.name].max) ? currentValue + 10 : sliderProps[m.name].max;
+
                         var sliderComponent = self.widgets.sliderContinuous({
                             'id': 'prop-slider-' + m.name,
                             'label': 'Slider',
                             'min': sliderProps[m.name].min,
-                            'max': sliderProps[m.name].max,
+                            'max': max,
                             'step': sliderProps[m.name].step ? sliderProps[m.name].step : 0.1,
-                            'value': parseInt(currenValue),
+                            'value': currentValue, //parseInt(currenValue),
                             'init': function () {
-    
-    
-                                const myEl = this;
+                                
+                                const myEl = document.querySelector('#prop-slider-' + m.name);//this;
+                                if(myEl){
+                                myEl.children[0].setAttribute("value", currentValue);
+
                                 var continuousSlider = new mdc.slider.MDCSlider(myEl);
+                            
                                 this._comp = continuousSlider;
                                 continuousSlider.listen('MDCSlider:input', function (e) {
                                     // console.log(continuousSlider.value)
                                     let myEl = e.currentTarget;
                                     // let prop = myEl._prop.body;
                                     //document.querySelector('#propAceEditor').env.editor.setValue(prop);
-                                    self.kernel.setProperty(myEl._currentNode, m.name, continuousSlider.value);
+                                    let value = continuousSlider.getValue();
+                                    self.kernel.setProperty(myEl._currentNode, m.name, value);
                                     //continuousValue.textContent = continuousSlider.value;
+
+                               
     
                                 });
                                 continuousSlider.listen('MDCSlider:change', function (e) {
@@ -1492,12 +1500,17 @@ class LCSEditor extends Fabric {
                                     let myEl = e.currentTarget;
                                     // let prop = myEl._prop.body;
                                     //document.querySelector('#propAceEditor').env.editor.setValue(prop);
-                                    self.kernel.setProperty(myEl._currentNode, m.name, continuousSlider.value);
+                                    let value = continuousSlider.getValue();
+                                    self.kernel.setProperty(myEl._currentNode, m.name, value);
     
                                     //continuousCommittedValue.textContent = continuousSlider.value;
                                 })
+
+                            }
+
                             }
                         })
+                        //sliderComponent._initMDC();
     
                     } else {
                         sliderComponent = {}
@@ -2047,28 +2060,58 @@ class LCSEditor extends Fabric {
                                         self.widgets.switch({
                                             'id': 'editnode',
                                             'init': function () {
-                                                vwf_view.kernel.getProperty(this._currentNode, 'edit');
-                                                this._switch = new mdc.switchControl.MDCSwitch(this);
-                                                this._switch.checked = false;
-                                            },
-                                            'onchange': function (e) {
-    
-                                                var nodeID = document.querySelector('#currentNode')._currentNode;
-                                                if (this._switch) {
-                                                    let chkAttr = this._switch.checked;//this.getAttribute('checked');
-                                                    if (chkAttr) {
-                                                        self.kernel.setProperty(this._currentNode, 'edit', true);
-                                                        //this._switch.checked = false;
-                                                    } else {
-                                                        self.kernel.setProperty(this._currentNode, 'edit', false);
-                                                        //this._switch.checked = true;
+                                                //vwf_view.kernel.getProperty(this._currentNode, 'edit');
+                                                //let nodeID = document.querySelector('#currentNode')._currentNode;
+                                                let viewNode = document.querySelector("[id='" + this._currentNode + "']");
+                                                let gizmo = viewNode.getAttribute('gizmo')
+
+                                                const myEl = document.querySelector('#editnode');//this;
+                                                if(myEl){
+                                                var editorSwitch = new mdc.switchControl.MDCSwitch(this);
+                                                editorSwitch.checked = gizmo ? true : false;
+                                                myEl.addEventListener('change', 
+                                                
+                                                function (e) {
+                                                   
+                                                    //let gizmo = viewNode.getAttribute('gizmo')
+    
+                                                    //let nodeID = document.querySelector('#currentNode')._currentNode;
+                                                    if (editorSwitch) {
+                                                        let viewNode = document.querySelector("[id='" + this._currentNode + "']");
+                                                        let chkAttr = editorSwitch.checked;//this.getAttribute('checked');
+                                                        if (chkAttr) {
+                                                            //self.kernel.setProperty(this._currentNode, 'edit', true);
+                                                            viewNode.setAttribute('gizmo',{});
+                                                            let inter = viewNode.getAttribute('interpolation');
+                                                            if(inter){
+                                                                let viewDriver = vwf.views["/drivers/view/aframeComponent"];
+                                                                viewDriver.interpolateView = false;
+                                                            }
+                                                            //editorSwitch.checked = false;
+                                                            
+                                                        } else {
+                                                            //self.kernel.setProperty(this._currentNode, 'edit', false);
+                                                            //editorSwitch.checked = true;
+                                                            viewNode.removeAttribute('gizmo');
+                                                            let inter = viewNode.getAttribute('interpolation');
+                                                            if(inter){
+                                                                let viewDriver = vwf.views["/drivers/view/aframeComponent"];
+                                                                viewDriver.interpolateView = true;
+                                                                
+                                                            }
+                                                        }
+        
+                                                        //vwf_view.kernel.callMethod(nodeID, "createEditTool");
+                                                        //vwf_view.kernel.callMethod(nodeID, "showCloseGizmo");
+                                                        
                                                     }
-    
-                                                    //vwf_view.kernel.callMethod(nodeID, "createEditTool");
-                                                    vwf_view.kernel.callMethod(nodeID, "showCloseGizmo");
-                                                    
                                                 }
-                                            }
+                                                
+                                                );
+                                                //this._switch.checked = gizmo ? true : false;
+                                                }
+                                            },
+                                            'onchange': ""
                                         }
                                         )
                                     ]
@@ -2082,7 +2125,10 @@ class LCSEditor extends Fabric {
                                             imgSrc: "/drivers/view/editor/images/ui/icons/translate.png",
                                             styleClass: "editButton",
                                             onclickfunc: function (e) {
-                                                vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['translate'])
+                                                let viewNode = document.querySelector("[id='" + this._currentNode + "']");
+                                                let gizmo = viewNode.getAttribute('gizmo');
+                                                gizmo ? viewNode.setAttribute('gizmo', {mode: 'translate'}): null;
+                                               // vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['translate'])
                                             }
                                         })
                                     ]
@@ -2096,7 +2142,10 @@ class LCSEditor extends Fabric {
                                             imgSrc: "/drivers/view/editor/images/ui/icons/rotate.png",
                                             styleClass: "editButton",
                                             onclickfunc: function (e) {
-                                                vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['rotate'])
+                                                let viewNode = document.querySelector("[id='" + this._currentNode + "']");
+                                                let gizmo = viewNode.getAttribute('gizmo');
+                                                gizmo ? viewNode.setAttribute('gizmo', {mode: 'rotate'}): null;
+                                                //vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['rotate'])
                                             }
                                         })
                                     ]
@@ -2110,7 +2159,10 @@ class LCSEditor extends Fabric {
                                             imgSrc: "/drivers/view/editor/images/ui/icons/scale.png",
                                             styleClass: "editButton",
                                             onclickfunc: function (e) {
-                                                vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['scale'])
+                                                let viewNode = document.querySelector("[id='" + this._currentNode + "']");
+                                                let gizmo = viewNode.getAttribute('gizmo');
+                                                gizmo ? viewNode.setAttribute('gizmo', {mode: 'scale'}): null;
+                                                //vwf_view.kernel.callMethod(this._currentNode, "setGizmoMode", ['scale'])
                                             }
                                         })
                                     ]

public/lib/ui/mdc/dist/material-components-web.d.ts

@@ -1,6 +1,7 @@
 // Generated by dts-bundle v0.7.3
 // Dependencies for this module:
 //   ../../@material/auto-init/index
+//   ../../@material/banner/index
 //   ../../@material/base/index
 //   ../../@material/checkbox/index
 //   ../../@material/chips/index
@@ -20,6 +21,7 @@
 //   ../../@material/notched-outline/index
 //   ../../@material/radio/index
 //   ../../@material/ripple/index
+//   ../../@material/segmented-button/index
 //   ../../@material/select/index
 //   ../../@material/slider/index
 //   ../../@material/snackbar/index
@@ -29,6 +31,7 @@
 //   ../../@material/tab-scroller/index
 //   ../../@material/tab/index
 //   ../../@material/textfield/index
+//   ../../@material/tooltip/index
 //   ../../@material/top-app-bar/index
 
 declare module 'material-components-web' {
@@ -55,6 +58,7 @@ declare module 'material-components-web' {
       * THE SOFTWARE.
       */
     import autoInit from '@material/auto-init/index';
+    import * as banner from '@material/banner/index';
     import * as base from '@material/base/index';
     import * as checkbox from '@material/checkbox/index';
     import * as chips from '@material/chips/index';
@@ -74,6 +78,7 @@ declare module 'material-components-web' {
     import * as notchedOutline from '@material/notched-outline/index';
     import * as radio from '@material/radio/index';
     import * as ripple from '@material/ripple/index';
+    import * as segmentedButton from '@material/segmented-button/index';
     import * as select from '@material/select/index';
     import * as slider from '@material/slider/index';
     import * as snackbar from '@material/snackbar/index';
@@ -83,7 +88,8 @@ declare module 'material-components-web' {
     import * as tabScroller from '@material/tab-scroller/index';
     import * as tab from '@material/tab/index';
     import * as textField from '@material/textfield/index';
+    import * as tooltip from '@material/tooltip/index';
     import * as topAppBar from '@material/top-app-bar/index';
-    export { autoInit, base, checkbox, chips, circularProgress, dataTable, dialog, dom, drawer, floatingLabel, formField, iconButton, lineRipple, linearProgress, list, menu, menuSurface, notchedOutline, radio, ripple, select, slider, snackbar, switchControl, tab, tabBar, tabIndicator, tabScroller, textField, topAppBar, };
+    export { autoInit, banner, base, checkbox, chips, circularProgress, dataTable, dialog, dom, drawer, floatingLabel, formField, iconButton, lineRipple, linearProgress, list, menu, menuSurface, notchedOutline, radio, ripple, segmentedButton, select, slider, snackbar, switchControl, tab, tabBar, tabIndicator, tabScroller, textField, tooltip, topAppBar, };
 }
 

public/lib/ui/widgets.js

@@ -420,61 +420,95 @@ Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contribu
         }
 
         sliderContinuous(obj) {
+
+          
+        
             return {
                 $cell: true,
                 $type: "div",
-                class: "mdc-slider",
-                role: "slider",
-                tabindex: 0,
                 'id': obj.id,
-                'aria-valuemin': obj.min,
-                'aria-valuemax': obj.max,
-                'aria-label': obj.label,
-                'aria-valuenow': obj.value,
-                'data-step': obj.step,
+                class: "mdc-slider",
+                //tabindex: 0,
                 $init: obj.init,
                 $components: [
                     {
                         $cell: true,
+                        $type: "input",
+                        class: "mdc-slider__input",
+                        'value': obj.value,
+                        'type': "range",
+                        'data-step': obj.step,
+                        'min': obj.min,
+                        'max': obj.max,
+                        'aria-label': obj.label
+                    },
+                    {
+                       // $cell: true,
                         $type: "div",
-                        class: "mdc-slider__track-container",
+                        class: "mdc-slider__track",
                         $components: [
-                            {
-                                $cell: true,
+                           {
+                            //$cell: true,
+                            $type: "div",
+                            class: "mdc-slider__track--active",
+                            $components: [
+                               { 
+                                //$cell: true,
                                 $type: "div",
-                                class: "mdc-slider__track",
-                                
+                                class: "mdc-slider__track--active_fill"
                             }
+                            ]
+                           },
+                           {
+                            //$cell: true,
+                            $type: "div",
+                            class: "mdc-slider__track--inactive"
+                           }
                         ]
+                        
                     },
                     {
-                        $cell: true,
+                        //$cell: true,
                         $type: "div",
-                        class: "mdc-slider__thumb-container",
+                        class: "mdc-slider__thumb",
                         $components: [
                             {
-                                $cell: true,
-                                $type: "svg",
-                                class: "mdc-slider__thumb",
-                                width: 21,
-                                height: 21,
-                                $components: [
-                                    {
-                                        $cell: true,
-                                        $type: "circle",
-                                        cx: 10.5,
-                                        cy: 10.5,
-                                        r: 7.875
-                                    }
-                                ]
-                            },
-                            {
-                                $cell: true,
-                                $type: "div",
-                                class: "mdc-slider__focus-ring"
-                            }
+                        //$cell: true,
+                        $type: "div",
+                        class: "mdc-slider__thumb-knob"}
                         ]
+                       
                     }
+        
+                  
+                    // {
+                    //     $cell: true,
+                    //     $type: "div",
+                    //     class: "mdc-slider__thumb-container",
+                    //     $components: [
+                    //         {
+                    //             $cell: true,
+                    //             $type: "svg",
+                    //             class: "mdc-slider__thumb",
+                    //             width: 21,
+                    //             height: 21,
+                    //             $components: [
+                    //                 {
+                    //                     $cell: true,
+                    //                     $type: "circle",
+                    //                     cx: 10.5,
+                    //                     cy: 10.5,
+                    //                     r: 7.875
+                    //                 }
+                    //             ]
+                    //         },
+                    //         {
+                    //             $cell: true,
+                    //             $type: "div",
+                    //             class: "mdc-slider__focus-ring"
+                    //         }
+                    //     ]
+                    // }
                 ]
             }
         }
@@ -652,6 +686,7 @@ Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contribu
                 class: "mdc-switch",
                 _switch: null,
                 id: obj.id,
+                //change: obj.onchange,
                 $init: obj.init, 
                 //function(){
                 //     new mdc.switchControl.MDCSwitch(this);
@@ -671,12 +706,13 @@ Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contribu
                                 $components:[
                                     {
                                         $type: "input",
-                                        type: "checkbox",
+                                        "type": "checkbox",
                                         class: "mdc-switch__native-control",
                                         id: 'input-' + obj.id,
                                         //$init: obj.init,
                                         //id: "basic-switch",
-                                        onchange: obj.onchange,
+                                        
+                                        "aria-checked": false,
                                         role: "switch"
                                     }
                                 ]