jsgui3-server 0.0.91 → 0.0.93

package/examples/{square_box.js → box/square_box.js}

@@ -1,13 +1,12 @@
 const jsgui = require('./square_box_client');
 
 const {Demo_UI, Square_Box} = jsgui.controls;
-const Server = require('../server');
+const Server = require('../../server');
 
 // Want to exclude this from the client bundle.
 //  Some kind of marking to say that it's server-side only?
 
 if (require.main === module) {
-    
     const server = new Server({
         Ctrl: Demo_UI,
         // Giving it the Ctrl and disk path client js should enable to server to get the JS-bundled CSS from the file(s).
@@ -18,7 +17,6 @@ if (require.main === module) {
         'disk_path_client_js': require.resolve('./square_box_client.js')
         //js_client: require.resolve('./square_box.js')
     });
-
     // A callback or event for when the bundling has been completed
     //  a 'ready' event.
 

package/examples/{square_box_client.js → box/square_box_client.js}

@@ -1,4 +1,4 @@
-const jsgui = require('jsgui3-client'); // and will replace this with jsgui-client, I presume.
+const jsgui = require('jsgui3-client');
 const {controls, Control, mixins} = jsgui;
 const {dragable} = mixins;
 
@@ -73,6 +73,9 @@ class Square_Box extends Control {
 
             this.on('dragend', e => {
                 console.log('square box dragend e', e);
+                //this.background.color = '#FF4444';
+                //this.color = '#FF4444';
+                this.dom.el.style.backgroundColor = '#FF4444';
             });
 
         }

package/examples/boxes/square_boxes_client.js

@@ -62,8 +62,10 @@ class Demo_UI extends Control {
             // or even box2.color = ... and it would know which color was meant
             //  or be able to access the .color reference / property name when asked for.
 
+            box2.background.color = '#6655CC';
 
-            box2.dom.attributes.style['background-color'] = '#6655CC';
+
+            //box2.dom.attributes.style['background-color'] = '#6655CC';
             this.add(box2);
 
             const box3 = new Square_Box({
@@ -108,13 +110,10 @@ Demo_UI.css = `
 
 // then if running on the client...?
 
-
-
 //controls.Square_Box = Square_Box;
 // could export jsgui with the updated controls....
 //  so that they are in the correct Page Context.?
 
-
 controls.Demo_UI = Demo_UI;
 controls.Square_Box = Square_Box;
 

package/examples/grids/grid_1_client.js

@@ -40,6 +40,8 @@ Square_Box.css = `
 
 // Relies on extracting CSS from JS files.
 
+const {press_events} = jsgui.mixins;
+
 const Grid = controls.Grid;
 
 class Demo_UI extends Control {
@@ -123,6 +125,106 @@ class Demo_UI extends Control {
             console.log('grid.grid_size', grid.grid_size);
             grid.refresh_size();
 
+            press_events(grid);
+
+            // the grid press start should contain the cell.
+            //  that is the specific kind of API improvement that helps the grid with customised specific events.
+
+            // This is having trouble on iOS with touch events.
+
+            // Better ways to check which cell is being pressed?
+            //  Seems like we don't get the new cell upon the touch move event.
+
+            // Pressing and moving to a different ctrl / cell not working on iOS mobile safari.
+
+            // Maybe improve grid painting for iOS?
+            //  Maybe improve the 'move on grid' event handlings?
+
+            // Maybe press events isn't the best way?
+            //  Or need better handling of iOS within press events even?
+            //   Determining grid square by the coordinates would be possible if there is a rendering model.
+            //   Maybe further work within mixins.
+            //   Maybe within grid / grid mixins.
+
+            // More work within Grid to better enable cell retrieval?
+            //  And then specific work on grid press events?
+            
+
+
+            const setup_grid_painting = () => {
+
+                // ctrl_target maybe is not stable accross all devices and browsers.
+                //  Could be better to get some lower level things working right....
+
+                let paint_color = '#000000';
+                grid.on('press-start', e => {
+                    //console.log('grid press-start ', e);
+                    const {ctrl_target} = e;
+                    const [x, y] = [ctrl_target.x, ctrl_target.y];
+
+                    // grid.get_cell_at_px_coords([xpx, ypx]);
+                    // grid.get_cell_at_pos([x, y]);
+
+                    //console.log('[x, y]', [x, y]);
+
+                    // the colour of the cell there at start determines colour of paint brush?
+                    //  will be best to incorporate painting / grid painting code into the mixins?
+                    //  probably only a few lines of code for the right API.
+
+                    if (ctrl_target.dom.attributes.style['background-color'] === '#000000') {
+                        paint_color = '#FFFFFF';
+                    } else {
+                        paint_color = '#000000';
+                    }
+                    ctrl_target.dom.attributes.style['background-color'] = paint_color;
+
+                    e.preventDefault();
+                });
+
+                // and that would be a press-grid-move? press-gridcell-move?
+                //  this is just a place to set up and test different behaviours for grid ui.
+                //  may have things like area fills, or select area.
+
+                let lastx, lasty;
+                grid.on('press-move', e => {
+
+                    // Not getting the expeced ctrl_target that is right under the movement touch event on iOS.
+                    //  Could we get the specific cell by using its display coords to determine which cell it is over?
+
+                    // Gets the right pixel coords from the event for this.
+
+
+                    console.log('grid press-move ', e);
+
+                    // Not working right on iOS. Not detecting which cell is directly underneith.
+                    const {ctrl_target} = e;
+                    //const {ctrl} = e;
+                    const [x, y] = [ctrl_target.x, ctrl_target.y];
+
+                    if (x !== lastx || y !== lasty) {
+                        grid.raise('press-cell-move', e);
+                    }
+
+                    //console.log('[x, y]', [x, y]);
+                    lastx = x;
+                    lasty = y;
+
+                    //e.preventDefault();
+                });
+
+                grid.on('press-cell-move', e => {
+                    const {ctrl_target} = e;
+                    const [x, y] = [ctrl_target.x, ctrl_target.y];
+                    //console.log('press-cell-move [x, y]', [x, y]);
+                    ctrl_target.dom.attributes.style['background-color'] = paint_color;
+                });
+            }
+            setup_grid_painting();
+
+            
+
+            // 'press-move'
+
 
             // listen for the context events regarding frames, changes, resizing.
 
@@ -132,7 +234,37 @@ class Demo_UI extends Control {
 
             // A delegated click or other event handler may work nicely (for the cells).
 
+            // Could use press events to deal with events more smoothly?
+            // A grid-events mixin?
+            //  Want to make high quality and specific code that is outside of the grid js component.
+            //  More swappable, composable, and upgradable components.
+
+            // More functionality within the mixins makes sense.
+            //  Mixins as interfaces too.
+
+            // grid.enable(Drag_Box)
+            //  or similar.
+            // grid.mx_grid_press_ui possibly.
+            //  details of ui handling behavious moving out of the controls themselves.
+            //  more general within the mixins.
+
+            // grid.on('drag-over') or similar.
+            //  specialised events within the appropriate mixins.
+            //   could try them here first though?
+
+            // a different box-area-select mixin? or just a bit different when on a grid...?
+            //  may need to repeat code a little, but code will be simple at the app level at least.
+
+
+
+
+
+
+
+
             grid.each_cell(cell => {
+
+                /*
                 cell.on('click', e_click => {
                     //console.log('e_click', e_click);
                     //console.log('cell', cell);
@@ -148,6 +280,7 @@ class Demo_UI extends Control {
 
                     
                 })
+                */
             })
 
         }

package/examples/mx_display/mx_display_1.js

@@ -0,0 +1,46 @@
+const jsgui = require('./mx_display_1_client');
+
+const {Demo_UI, Square_Box} = jsgui.controls;
+const Server = require('../../server');
+
+// Want to exclude this from the client bundle.
+//  Some kind of marking to say that it's server-side only?
+
+if (require.main === module) {
+    
+    const server = new Server({
+        Ctrl: Demo_UI,
+        // Giving it the Ctrl and disk path client js should enable to server to get the JS-bundled CSS from the file(s).
+        //  Putting the JS files through proper parsing and into a syntax tree would be best.
+
+
+        //'js_mode': 'debug',
+        'disk_path_client_js': require.resolve('./mx_display_1_client.js')
+        //js_client: require.resolve('./square_box.js')
+    });
+
+    // A callback or event for when the bundling has been completed
+    //  a 'ready' event.
+
+    // then start the server....
+    // be able to choose the port / ports?
+    console.log('waiting for server ready event');
+    server.on('ready', () => {
+        console.log('server ready');
+
+        // server start will change to observable?
+
+        server.start(8080, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                // Should have build it by now...
+    
+                console.log('server started');
+            }
+        });
+    })
+
+    
+
+}