Grid improvements. Port change. (#129)

* Preserve grid selection

* Do not raise on_select on Grid render

* Nav raises on_change only when changed, not on every click

* Page.bgcolor

* Allow updating existing controls with the same IDs

* Fix version

* Try goreleaser 1.3.1

* Pglet port changed from 5000 to 8550

.goreleaser.yml

@@ -8,8 +8,8 @@ builds:
       - CGO_ENABLED=0  
     flags:
       - -tags=release
-    ldflags: >
-      -s -w -X github.com/pglet/pglet/internal/commands.version={{.Version}}
+    ldflags:
+      - -s -w -X github.com/pglet/pglet/internal/commands.version={{.Version}}
     goos:
       - linux
       - darwin

client/src/controls/Grid.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { WebSocketContext } from '../WebSocket';
 import { useDispatch, shallowEqual, useSelector } from 'react-redux'
 import { changeProps } from '../slices/pageSlice'
@@ -187,12 +187,33 @@ export const Grid = React.memo<IControlProps>(({control, parentDisabled}) => {
   const _selection = new Selection({
     onSelectionChanged: () => {
       const ids = _selection.getSelection().map((elem: any) => (elem.i)).join(' ');
-      console.log("onSelectionChanged:", ids);
+      const indices = _selection.getSelectedIndices().map(i => i.toString()).join(' ');
+      console.log("onSelectionChanged:", ids, indices);
+
+      let payload = {
+        i: control.i,
+        selectedindices: indices
+      }
+      dispatch(changeProps([payload]));
+      ws.updateControlProps([payload]);
       ws.pageEventFromWeb(control.i, 'select', ids)
     },
     getKey: (item: any) => item.i.toString()
   });
 
+  _selection.setChangeEvents(false, false);
+
+  useEffect(() => {
+    if (control.selectedindices) {
+      control.selectedindices.split(' ').forEach((idx: number) => {
+        if (idx > -1 && idx < items.length) {
+          _selection.setIndexSelected(idx, true, false)
+        }
+      });
+    }
+    _selection.setChangeEvents(true, true);
+  })
+
   // selection mode
   gridProps.selectionMode = SelectionMode.none;
   if (control.selection === 'single' || control.selection === 'multiple') {

client/src/controls/Nav.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { WebSocketContext } from '../WebSocket';
 import { changeProps } from '../slices/pageSlice'
 import { useDispatch, shallowEqual, useSelector } from 'react-redux'
@@ -11,6 +11,7 @@ export const MyNav = React.memo<IControlProps>(({ control, parentDisabled }) =>
   const dispatch = useDispatch();
   const ws = React.useContext(WebSocketContext);
   const theme = useTheme();
+  const [prevSelectedKey, setPrevSelectedKey] = React.useState<string | undefined>();
 
   const navItems = useSelector<any, any>((state: any) => {
     function getNavLinks(parent: any): any {
@@ -92,10 +93,9 @@ export const MyNav = React.memo<IControlProps>(({ control, parentDisabled }) =>
 
   const handleLinkClick = (ev?: React.MouseEvent<HTMLElement>, item?: INavLink) => {
 
-    //console.log("ITEM:", item!.links!.length);
-
     const selectedKey = item!.key as string
-    if (selectedKey === undefined) {
+
+    if (selectedKey === undefined || prevSelectedKey === selectedKey) {
       return
     }
 
@@ -109,9 +109,16 @@ export const MyNav = React.memo<IControlProps>(({ control, parentDisabled }) =>
     dispatch(changeProps(payload));
     ws.updateControlProps(payload);
     ws.pageEventFromWeb(control.i, 'change', selectedKey)
+    setPrevSelectedKey(selectedKey)
   }
 
-  navProps.selectedKey = control.value !== undefined ? control.value : "";
+  const selectedKey = control.value !== undefined ? control.value : "";
+
+  useEffect(() => {
+    setPrevSelectedKey(selectedKey)
+  }, [selectedKey])
+
+  navProps.selectedKey = selectedKey;
 
   return <Nav {...navProps} onLinkClick={handleLinkClick} onLinkExpandClick={handleExpandLink} />;
 })

client/src/controls/Page.tsx

@@ -2,18 +2,19 @@ import React from 'react'
 import { shallowEqual, useSelector, useDispatch } from 'react-redux'
 import { ControlsList } from './ControlsList'
 import useTitle from '../hooks/useTitle'
-import { Stack, IStackProps, IStackTokens } from '@fluentui/react';
+import { Stack, IStackProps, IStackTokens, useTheme } from '@fluentui/react';
 import { Signin } from './Signin'
 import { ISigninProps, IPageProps } from './Control.types'
 import { WebSocketContext } from '../WebSocket';
 import { changeProps } from '../slices/pageSlice'
-import { defaultPixels, getWindowHash, isFalse, isTrue } from './Utils'
+import { defaultPixels, getThemeColor, getWindowHash, isFalse, isTrue } from './Utils'
 
 export const Page = React.memo<IPageProps>(({ control, pageName, updateTheme }) => {
 
   const ws = React.useContext(WebSocketContext);
   const dispatch = useDispatch();
-
+  const theme = useTheme();
+
   // page title
   let title = `${pageName} - pglet`;
   if (control.title) {
@@ -106,7 +107,8 @@ export const Page = React.memo<IPageProps>(({ control, pageName, updateTheme })
         width: control.width ? defaultPixels(control.width) : "100%",
         height: control.height !== undefined ? defaultPixels(control.height) : undefined,
         padding: control.padding ? defaultPixels(control.padding) : "10px",
-        margin: control.margin !== undefined ? defaultPixels(control.margin) : undefined
+        margin: control.margin !== undefined ? defaultPixels(control.margin) : undefined,
+        backgroundColor: control.bgcolor ? getThemeColor(theme, control.bgcolor) : undefined,
       }
     },
   };

client/src/controls/Stack.tsx

@@ -49,6 +49,7 @@ export const MyStack = React.memo<IControlProps>(({ control, parentDisabled }) =
                 borderBottom: control.borderbottom ? control.borderbottom : undefined,
                 overflowX: isTrue(control.scrollx) ? "auto" : undefined,
                 overflowY: isTrue(control.scrolly) ? "auto" : undefined,
+                overflow: control.borderradius ? "hidden" : undefined
             }
         },
     };

client/src/setupProxy.js

@@ -1,11 +1,11 @@
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = app => {
-  app.use(createProxyMiddleware("/ws", {target: "http://localhost:5000", ws: true, changeOrigin: true}))
+  app.use(createProxyMiddleware("/ws", {target: "http://localhost:8550", ws: true, changeOrigin: true}))
   app.use(
     '/api',
     createProxyMiddleware({
-      target: 'http://localhost:5000',
+      target: 'http://localhost:8550',
       changeOrigin: true,
     })
   ); 

client/src/slices/pageSlice.js

@@ -141,18 +141,21 @@ const addControls = (state, controls) => {
             firstParentId = ctrl.p;
         }
 
-        if (!state.controls[ctrl.i]) {
-            state.controls[ctrl.i] = ctrl;
-
-            if (ctrl.p === firstParentId) {
-                // root control
-                if (typeof ctrl.at === 'undefined') {
-                    // append to the end
-                    state.controls[ctrl.p].c.push(ctrl.i)
-                } else {
-                    // insert at specified position
-                    state.controls[ctrl.p].c.splice(ctrl.at, 0, ctrl.i)
-                }
+        const existingControl = state.controls[ctrl.i];
+
+        state.controls[ctrl.i] = ctrl;
+        if (existingControl) {
+            state.controls[ctrl.i].c = existingControl.c
+        }
+
+        if (ctrl.p === firstParentId && !existingControl) {
+            // root control
+            if (typeof ctrl.at === 'undefined') {
+                // append to the end
+                state.controls[ctrl.p].c.push(ctrl.i)
+            } else {
+                // insert at specified position
+                state.controls[ctrl.p].c.splice(ctrl.at, 0, ctrl.i)
             }
         }
     })

install_goreleaser.sh

@@ -1,2 +1,2 @@
-curl -fsSL https://github.com/goreleaser/goreleaser/releases/download/v1.0.0/goreleaser_Linux_x86_64.tar.gz -o /tmp/goreleaser_Linux_x86_64.tar.gz
+curl -fsSL https://github.com/goreleaser/goreleaser/releases/download/v1.3.1/goreleaser_Linux_x86_64.tar.gz -o /tmp/goreleaser_Linux_x86_64.tar.gz
 sudo tar zxf /tmp/goreleaser_Linux_x86_64.tar.gz -C /usr/local/bin

internal/commands/root.go

@@ -0,0 +1,7 @@
+package commands
+
+var (
+	version  = "unknown"
+	commit   = "unknown"
+	LogLevel string
+)

internal/commands/root_unix.go

@@ -6,12 +6,6 @@ import (
 	"github.com/spf13/cobra"
 )
 
-var (
-	version  = "unknown"
-	commit   = "unknown"
-	LogLevel string
-)
-
 func NewRootCmd() *cobra.Command {
 	cmd := &cobra.Command{
 		Use:     "pglet",

internal/commands/root_windows.go

@@ -6,12 +6,6 @@ import (
 	"github.com/spf13/cobra"
 )
 
-var (
-	version  = "unknown"
-	commit   = "unknown"
-	LogLevel string
-)
-
 func NewRootCmd() *cobra.Command {
 	cmd := &cobra.Command{
 		Use:     "pglet",

internal/commands/server.go

@@ -17,7 +17,7 @@ import (
 )
 
 var (
-	defaultPort  int = 5000
+	defaultPort  int = 8550
 	lockFilename string
 )
 

internal/config/config.go

@@ -25,7 +25,7 @@ const (
 	// general settings
 	appURL                         = "APP_URL"
 	defaultAppURL                  = "http://localhost:3000"
-	defaultServerPort              = 5000
+	defaultServerPort              = 8550
 	serverPort                     = "SERVER_PORT"
 	forceSSL                       = "FORCE_SSL"
 	defaultWebSocketMaxMessageSize = 2097152 // 2 MB

internal/model/control.go

@@ -104,6 +104,15 @@ func (ctl *Control) GetChildrenIds() []string {
 	return result
 }
 
+func (ctl *Control) CopyChildren(srcCtl *Control) {
+	ids, _ := (*srcCtl)["c"].([]interface{})
+	copy := make([]string, len(ids))
+	for i, id := range ids {
+		copy[i] = id.(string)
+	}
+	(*ctl)["c"] = copy
+}
+
 func IsSystemAttr(attr string) bool {
 	return utils.ContainsString(systemAttrs, attr)
 }

internal/page/session_handler.go

@@ -794,32 +794,38 @@ func (h *sessionHandler) nextControlID() string {
 
 // addControl adds a control to a page
 func (h *sessionHandler) addControl(ctrl *model.Control) error {
-	if h.getControl(ctrl.ID()) != nil {
-		return nil
+
+	existingControl := h.getControl(ctrl.ID())
+
+	if existingControl != nil {
+		ctrl.CopyChildren(existingControl)
 	}
+
 	err := store.SetSessionControl(h.session, ctrl)
 	if err != nil {
 		return err
 	}
 
 	// find parent
-	parentID := ctrl.ParentID()
-	if parentID != "" {
-		parentctrl := h.getControl(parentID)
+	if existingControl == nil {
+		parentID := ctrl.ParentID()
+		if parentID != "" {
+			parentctrl := h.getControl(parentID)
 
-		if parentctrl == nil {
-			return fmt.Errorf("parent control with id '%s' not found", parentID)
-		}
+			if parentctrl == nil {
+				return fmt.Errorf("parent control with id '%s' not found", parentID)
+			}
 
-		// update parent's childIds
-		if at := ctrl.At(); at != -1 {
-			parentctrl.InsertChildID(ctrl.ID(), at)
-		} else {
-			parentctrl.AddChildID(ctrl.ID())
-		}
-		err = store.SetSessionControl(h.session, parentctrl)
-		if err != nil {
-			return err
+			// update parent's childIds
+			if at := ctrl.At(); at != -1 {
+				parentctrl.InsertChildID(ctrl.ID(), at)
+			} else {
+				parentctrl.AddChildID(ctrl.ID())
+			}
+			err = store.SetSessionControl(h.session, parentctrl)
+			if err != nil {
+				return err
+			}
 		}
 	}
 

internal/server/server.go

@@ -30,7 +30,7 @@ const (
 )
 
 var (
-	Port int = 5000
+	Port int = 8550
 )
 
 var upgrader = websocket.Upgrader{