@plurid/plurid-react 0.0.0-24 → 0.0.0-27

package/README.md

@@ -62,13 +62,12 @@ npm install \
     @plurid/plurid-themes \
     @plurid/plurid-ui-components-react \
     @plurid/plurid-ui-state-react \
+    @reduxjs/toolkit \
     cross-fetch \
     hammerjs \
     react \
     react-dom \
     react-redux \
-    redux \
-    redux-thunk \
     styled-components
 ```
 
@@ -87,13 +86,12 @@ yarn add \
     @plurid/plurid-themes \
     @plurid/plurid-ui-components-react \
     @plurid/plurid-ui-state-react \
+    @reduxjs/toolkit \
     cross-fetch \
     hammerjs \
     react \
     react-dom \
     react-redux \
-    redux \
-    redux-thunk \
     styled-components
 ```
 
@@ -126,7 +124,8 @@ A simple, rendering-test application component, could look like
 /** imports */
 import React from 'react';
 
-import PluridApplication, {
+import {
+    PluridApplication,
     PluridPlane,
 } from '@plurid/plurid-react';
 
@@ -136,13 +135,10 @@ import PluridApplication, {
 const Application: React.FC<any> = () => {
     /** plurid' planes */
     const pluridPlanes: PluridPlane[] = [
-        {
-            route: '/',
-            component: {
-                kind: 'react',
-                element: () => (<div>Plurid' Application</div>),
-            },
-        },
+        [
+            '/',
+            () => (<div>Plurid' Application Plane</div>),
+        ],
     ];
 
     /** plurid' view */

package/distribution/containers/Application/View/index.d.ts

@@ -3,7 +3,7 @@ import { AnyAction, ThunkDispatch } from '@reduxjs/toolkit';
 import { Theme } from '@plurid/plurid-themes';
 import { 
 /** interfaces */
-PluridApplication as PluridApplicationProperties, PluridConfiguration as PluridAppConfiguration, TreePlane, PluridApplicationView } from '@plurid/plurid-data';
+PluridApplication as PluridApplicationProperties, PluridConfiguration as PluridAppConfiguration, TreePlane, SpaceTransform, PluridApplicationView } from '@plurid/plurid-data';
 import { PluridReactComponent } from "../../../data/interfaces";
 import { AppState } from "../../../services/state/store";
 import actions from "../../../services/state/actions";
@@ -14,7 +14,7 @@ export interface PluridViewStateProperties {
     state: AppState;
     stateConfiguration: PluridAppConfiguration;
     stateSpaceLoading: boolean;
-    stateTransform: any;
+    stateTransform: SpaceTransform;
     stateTree: TreePlane[];
     stateSpaceView: PluridApplicationView;
     stateGeneralTheme: Theme;

package/distribution/containers/RouterBrowser/styled.d.ts

@@ -0,0 +1 @@
+export declare const PluridScrollTop: import("styled-components").StyledComponent<"div", any, {}, never>;

package/distribution/index.es.js

@@ -380,8 +380,10 @@ const initialState$2 = {
     lastClosedPlane: ""
 };
 
+const name = "space";
+
 const space = createSlice({
-    name: "space,",
+    name: name,
     initialState: initialState$2,
     reducers: {
         setSpaceField: (state, action) => {
@@ -414,7 +416,11 @@ const space = createSlice({
             state.transformTime = action.payload;
         },
         setSpaceLocation: (state, action) => {
-            state = Object.assign(Object.assign({}, state), action.payload);
+            const newState = Object.assign(Object.assign({}, state), action.payload);
+            const transform = computeMatrix(newState);
+            return Object.assign(Object.assign({}, newState), {
+                transform: transform
+            });
         },
         viewCameraMoveForward: state => {
             state.translationZ = state.translationZ + TRANSLATION_STEP * 6 * Math.cos(toRadians(-state.rotationY));
@@ -602,6 +608,7 @@ const reducer$3 = space.reducer;
 
 var space$1 = Object.freeze({
     __proto__: null,
+    name: name,
     space: space,
     actions: actions$3,
     selectors: selectors$3,
@@ -955,9 +962,16 @@ const navigateToRoot = (dispatch, state, type) => {
         return;
     }
     const treeIndex = type === "previous" ? rootIndex - 1 || 0 : rootIndex + 1;
-    const root = tree[treeIndex];
+    let root = tree[treeIndex];
     if (!root) {
-        return;
+        if (type === "previous") {
+            root = tree[tree.length - 1];
+        } else {
+            root = tree[0];
+        }
+        if (!root) {
+            return;
+        }
     }
     navigateToPluridPlane(dispatch, root, undefined, true);
 };
@@ -1053,127 +1067,174 @@ const handleGlobalShortcuts = (dispatch, state, pubsub, event, firstPerson, lock
         return;
     }
     const noModifiers = !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey;
+    const handleEvent = () => {
+        event.preventDefault();
+    };
     if (event.code === "KeyF" && noModifiers) {
+        handleEvent();
         return dispatch(actions.configuration.toggleConfigurationSpaceFirstPerson());
     }
     if (firstPerson) {
         if (event.code === "KeyW" && noModifiers && locks.translationZ) {
+            handleEvent();
             return dispatch(actions.space.viewCameraMoveForward());
         }
         if (event.code === "KeyS" && noModifiers && locks.translationZ) {
+            handleEvent();
             return dispatch(actions.space.viewCameraMoveBackward());
         }
         if (event.code === "KeyA" && noModifiers && locks.translationX) {
+            handleEvent();
             return dispatch(actions.space.viewCameraMoveLeft());
         }
         if (event.code === "KeyA" && event.shiftKey && locks.rotationY) {
+            handleEvent();
             return dispatch(actions.space.viewCameraTurnLeft());
         }
         if (event.code === "KeyD" && noModifiers && locks.translationX) {
+            handleEvent();
             return dispatch(actions.space.viewCameraMoveRight());
         }
         if (event.code === "KeyD" && event.shiftKey && locks.rotationY) {
+            handleEvent();
             return dispatch(actions.space.viewCameraTurnRight());
         }
         if (event.code === "KeyQ" && noModifiers && locks.rotationX) {
+            handleEvent();
             return dispatch(actions.space.viewCameraTurnUp());
         }
         if (event.code === "KeyZ" && noModifiers && locks.rotationX) {
+            handleEvent();
             return dispatch(actions.space.viewCameraTurnDown());
         }
         if (event.code === "KeyE" && noModifiers && locks.translationY) {
+            handleEvent();
             return dispatch(actions.space.viewCameraMoveUp());
         }
         if (event.code === "KeyC" && noModifiers && locks.translationY) {
+            handleEvent();
             return dispatch(actions.space.viewCameraMoveDown());
         }
     }
     if (event.code === "KeyR" && noModifiers) {
+        handleEvent();
         return dispatch(actions.configuration.setConfigurationSpaceTransformMode(TRANSFORM_MODES.ROTATION));
     }
     if (event.code === "KeyT" && noModifiers) {
+        handleEvent();
         return dispatch(actions.configuration.setConfigurationSpaceTransformMode(TRANSFORM_MODES.TRANSLATION));
     }
     if (event.code === "KeyS" && noModifiers && !firstPerson) {
+        handleEvent();
         return dispatch(actions.configuration.setConfigurationSpaceTransformMode(TRANSFORM_MODES.SCALE));
     }
     if (event.key === "ArrowRight") {
         if (event.shiftKey && locks.rotationY) {
+            handleEvent();
             return dispatch(actions.space.rotateLeft());
         }
         if (event.altKey && locks.translationX) {
+            handleEvent();
             return dispatch(actions.space.translateRight());
         }
     }
     if (event.key === "ArrowLeft") {
         if (event.shiftKey && locks.rotationY) {
+            handleEvent();
             return dispatch(actions.space.rotateRight());
         }
         if (event.altKey && locks.translationX) {
+            handleEvent();
             return dispatch(actions.space.translateLeft());
         }
     }
     if (event.key === "ArrowUp") {
         if (event.shiftKey && event.altKey && locks.translationZ) {
+            handleEvent();
             return dispatch(actions.space.translateIn());
         }
         if (event.shiftKey && !event.altKey && locks.rotationX) {
+            handleEvent();
             return dispatch(actions.space.rotateUp());
         }
         if (event.altKey && !event.shiftKey && locks.translationY) {
+            handleEvent();
             return dispatch(actions.space.translateUp());
         }
         if (event.metaKey || event.ctrlKey && locks.scale) {
+            handleEvent();
             return dispatch(actions.space.scaleUp());
         }
     }
     if (event.key === "ArrowDown") {
         if (event.shiftKey && event.altKey && locks.translationZ) {
+            handleEvent();
             return dispatch(actions.space.translateOut());
         }
         if (event.shiftKey && !event.altKey && locks.rotationX) {
+            handleEvent();
             return dispatch(actions.space.rotateDown());
         }
         if (event.altKey && !event.shiftKey && locks.translationY) {
+            handleEvent();
             return dispatch(actions.space.translateDown());
         }
         if (event.metaKey || event.ctrlKey && locks.scale) {
+            handleEvent();
             return dispatch(actions.space.scaleDown());
         }
     }
     if (event.altKey && event.code === "KeyF") {
+        handleEvent();
         focusActivePlane(dispatch, state);
         return;
     }
     if (event.altKey && event.code === "KeyB") {
+        handleEvent();
         focusParentActivePlane(dispatch, state);
         return;
     }
     if (event.altKey && event.code === "KeyR") {
+        handleEvent();
         refreshActivePlane(state, pubsub);
         return;
     }
     if (event.altKey && event.code === "KeyE") {
+        handleEvent();
         isolateActivePlane(state, pubsub);
         return;
     }
     if (event.altKey && event.shiftKey && event.code === "KeyT") {
+        handleEvent();
         openClosedPlane(pubsub);
         return;
     }
     if (event.altKey && event.code === "KeyW") {
+        handleEvent();
         closeActivePlane(state, pubsub);
         return;
     }
     if (event.altKey && event.code === "KeyA") {
+        handleEvent();
         focusPreviousRoot(dispatch, state);
         return;
     }
     if (event.altKey && event.code === "KeyD") {
+        handleEvent();
         focusNextRoot(dispatch, state);
         return;
     }
+    if (event.altKey && event.code === "Tab") {
+        handleEvent();
+        if (event.shiftKey) {
+            focusPreviousRoot(dispatch, state);
+        } else {
+            focusNextRoot(dispatch, state);
+        }
+        return;
+    }
     if (event.altKey && event.code.startsWith("Digit")) {
+        handleEvent();
         const index = parseInt(event.code.replace("Digit", "")) - 1;
         focusRootIndex(dispatch, state, index);
         return;
@@ -4308,7 +4369,7 @@ const PluridView = properties => {
     };
     const treeUpdateCallback = useCallback((() => {
         treeUpdate(stateSpaceView);
-    }), [ hostname, stateSpaceView, stateConfiguration ]);
+    }), [ hostname, stateSpaceView, stateConfiguration, JSON.stringify(stateTree) ]);
     const handlePubSubSubscribe = pubsub => {
         const subscriptions = [ {
             topic: PLURID_PUBSUB_TOPIC.CONFIGURATION,
@@ -4718,7 +4779,7 @@ const PluridView = properties => {
         return () => {
             window.removeEventListener("resize", treeUpdateCallback);
         };
-    }), [ stateSpaceView, stateConfiguration ]);
+    }), [ stateSpaceView, stateConfiguration, JSON.stringify(stateTree) ]);
     useEffect((() => {
         if (typeof window === "undefined") {
             return;
@@ -5359,10 +5420,16 @@ const renderDirectPlane = (routePlane, planesRegistrar, hostname = "origin") =>
     return DirectPlane;
 };
 
+const PluridScrollTop = styled.div`
+    height: 0;
+    width: 0;
+`;
+
 const PluridRouterBrowser = properties => {
-    const {routes: routes, planes: planes, exterior: exterior, shell: shell, hostname: hostname, static: staticContext, view: cleanNavigationView, cleanNavigation: cleanNavigation, notFoundPath: notFoundPathProperty} = properties;
+    const {routes: routes, planes: planes, exterior: exterior, shell: shell, hostname: hostname, scrollToTop: scrollToTop, static: staticContext, view: cleanNavigationView, cleanNavigation: cleanNavigation, notFoundPath: notFoundPathProperty} = properties;
     const notFoundPath = notFoundPathProperty || "/not-found";
     const pluridPlanes = gatherPluridPlanes(routes, planes);
+    const topContainer = useRef(null);
     const pluridPlanesRegistrar = useRef(new PluridPlanesRegistrar(pluridPlanes, hostname));
     const pluridIsoMatcher = useRef(new PluridIsoMatcher$1({
         routes: routes,
@@ -5372,6 +5439,15 @@ const PluridRouterBrowser = properties => {
     const [matchedPath, setMatchedPath] = useState(computeInitialMatchedPath(staticContext));
     const [matchedRoute, setMatchedRoute] = useState(pluridIsoMatcher.current.match(matchedPath, "route"));
     const [PluridRoute, setPluridRoute] = useState(computePluridRoute(matchedRoute, pluridPlanesRegistrar.current, pluridIsoMatcher.current, staticContext && staticContext.directPlane ? pluridIsoMatcher.current.match(staticContext.directPlane, "route") : undefined, hostname));
+    const scrollTop = () => {
+        if (!topContainer.current || scrollToTop === false) {
+            return;
+        }
+        const behavior = typeof scrollToTop === "undefined" || scrollToTop === true || scrollToTop === "smooth" ? "smooth" : "auto";
+        topContainer.current.scrollIntoView({
+            behavior: behavior
+        });
+    };
     const handleLocation = event => {
         let matchedPath;
         if (event && event.detail && event.detail.path && !matchedPath) {
@@ -5385,6 +5461,7 @@ const PluridRouterBrowser = properties => {
             matchedPath = pathname + window.location.search;
         }
         setMatchedPath(matchedPath);
+        scrollTop();
     };
     useEffect((() => {
         window.addEventListener("popstate", handleLocation);
@@ -5446,7 +5523,9 @@ const PluridRouterBrowser = properties => {
             PluridRouterShell.displayName = "PluridRouterShell";
         }
     }
-    return React.createElement(React.Fragment, null, PluridRouterExterior && React.createElement(PluridRouterExterior, {
+    return React.createElement(React.Fragment, null, React.createElement(PluridScrollTop, {
+        ref: topContainer
+    }), PluridRouterExterior && React.createElement(PluridRouterExterior, {
         matchedRoute: matchedRoute
     }), React.createElement(PluridRouterShell, {
         matchedRoute: matchedRoute
@@ -6299,6 +6378,7 @@ const serverComputeMetastate = (isoMatch, paths, globals) => __awaiter(void 0, v
             space: {
                 loading: false,
                 animatedTransform: false,
+                transform: "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)",
                 scale: 1,
                 rotationX: 0,
                 rotationY: 0,