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

package/distribution/components/structural/Space/index.d.ts

@@ -6,9 +6,10 @@ export interface PluridSpaceOwnProperties {
 export interface PluridSpaceStateProperties {
     stateConfiguration: PluridConfiguration;
     stateGeneralTheme: Theme;
+    stateResolvedLayout: boolean;
 }
 export interface PluridSpaceDispatchProperties {
 }
 export declare type PluridSpaceProperties = PluridSpaceOwnProperties & PluridSpaceStateProperties & PluridSpaceDispatchProperties;
-declare const ConnectedPluridSpace: import("react-redux").ConnectedComponent<React.FC<PluridSpaceProperties>, Omit<PluridSpaceProperties, "stateGeneralTheme" | "stateConfiguration"> & import("react-redux").ConnectProps>;
+declare const ConnectedPluridSpace: import("react-redux").ConnectedComponent<React.FC<PluridSpaceProperties>, Omit<PluridSpaceProperties, "stateGeneralTheme" | "stateConfiguration" | "stateResolvedLayout"> & import("react-redux").ConnectProps>;
 export default ConnectedPluridSpace;

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

@@ -14,6 +14,7 @@ export interface PluridViewStateProperties {
     state: AppState;
     stateConfiguration: PluridAppConfiguration;
     stateSpaceLoading: boolean;
+    stateResolvedLayout: boolean;
     stateTransform: SpaceTransform;
     stateTree: TreePlane[];
     stateSpaceView: PluridApplicationView;
@@ -44,5 +45,5 @@ export interface PluridViewDispatchProperties {
     dispatchSpaceSetView: DispatchAction<typeof actions.space.spaceSetView>;
 }
 export declare type PluridViewProperties = PluridViewOwnProperties & PluridViewStateProperties & PluridViewDispatchProperties;
-declare const ConnectedPluridView: import("react-redux").ConnectedComponent<React.FC<PluridViewProperties>, Omit<PluridViewProperties, "dispatch" | "stateGeneralTheme" | "stateConfiguration" | "stateTree" | "dispatchSetSpaceField" | "dispatchSetGeneralTheme" | "dispatchSetInteractionTheme" | "dispatchRotateX" | "dispatchRotateY" | "dispatchSetAnimatedTransform" | "dispatchRotateXWith" | "dispatchRotateYWith" | "state" | "stateSpaceLoading" | "stateTransform" | "stateSpaceView" | "dispatchSetConfiguration" | "dispatchSetConfigurationMicro" | "dispatchSetSpaceLoading" | "dispatchSetTransformTime" | "dispatchSetSpaceLocation" | "dispatchSetTree" | "dispatchTranslateXWith" | "dispatchTranslateYWith" | "dispatchTranslateZWith" | "dispatchScaleUpWith" | "dispatchScaleDownWith" | "dispatchSpaceSetViewSize" | "dispatchSpaceSetView"> & import("react-redux").ConnectProps>;
+declare const ConnectedPluridView: import("react-redux").ConnectedComponent<React.FC<PluridViewProperties>, Omit<PluridViewProperties, "dispatch" | "stateGeneralTheme" | "stateConfiguration" | "stateTree" | "dispatchSetSpaceField" | "stateResolvedLayout" | "dispatchSetGeneralTheme" | "dispatchSetInteractionTheme" | "dispatchRotateX" | "dispatchRotateY" | "dispatchSetAnimatedTransform" | "dispatchRotateXWith" | "dispatchRotateYWith" | "state" | "stateSpaceLoading" | "stateTransform" | "stateSpaceView" | "dispatchSetConfiguration" | "dispatchSetConfigurationMicro" | "dispatchSetSpaceLoading" | "dispatchSetTransformTime" | "dispatchSetSpaceLocation" | "dispatchSetTree" | "dispatchTranslateXWith" | "dispatchTranslateYWith" | "dispatchTranslateZWith" | "dispatchScaleUpWith" | "dispatchScaleDownWith" | "dispatchSpaceSetViewSize" | "dispatchSpaceSetView"> & import("react-redux").ConnectProps>;
 export default ConnectedPluridView;

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

@@ -8,10 +8,12 @@ declare class PluridApplication extends Component<PluridApplicationProperties<Pl
     private store;
     private storeUnubscriber;
     private storeID;
+    private planesRegistrar;
     constructor(properties: PluridApplicationProperties<PluridReactComponent>, context: React.ContextType<typeof PluridProviderContext>);
     componentDidUpdate(): void;
     componentWillUnmount(): void;
     render(): JSX.Element;
+    private prepare;
     private computeStore;
     private subscribeStore;
 }

package/distribution/index.d.ts

@@ -87,7 +87,7 @@ declare const Plurid: {
         readonly NAVIGATE_TO_ROOT: "space.navigateToRoot";
     };
     /** Server */
-    serverComputeMetastate: (isoMatch: PluridRouteMatch, paths: PluridRoute<PluridReactComponent<any, PluridPlaneComponentProperty | PluridRouteComponentProperty>, any>[], globals: Record<string, string> | undefined) => Promise<import("@plurid/plurid-data").PluridMetastate>;
+    serverComputeMetastate: (isoMatch: PluridRouteMatch, paths: PluridRoute<PluridReactComponent<any, PluridPlaneComponentProperty | PluridRouteComponentProperty>, any>[], globals: Record<string, string> | undefined, hostname?: string) => Promise<import("@plurid/plurid-data").PluridMetastate>;
     /** Router */
     IsoMatcher: typeof routing.IsoMatcher;
     routerNavigate: (path: string) => void;

package/distribution/index.es.js

@@ -272,6 +272,8 @@ const getSpace = state => state.space;
 
 const getLoading = state => state.space.loading;
 
+const getResolvedLayout = state => state.space.resolvedLayout;
+
 const getTransformMatrix = state => state.space.transform;
 
 const getAnimatedTransform = state => state.space.animatedTransform;
@@ -319,6 +321,7 @@ var selectors$3 = Object.freeze({
     __proto__: null,
     getSpace: getSpace,
     getLoading: getLoading,
+    getResolvedLayout: getResolvedLayout,
     getTransformMatrix: getTransformMatrix,
     getAnimatedTransform: getAnimatedTransform,
     getTransformTime: getTransformTime,
@@ -343,6 +346,7 @@ const {toRadians: toRadians} = mathematics.geometry;
 
 const initialState$2 = {
     loading: true,
+    resolvedLayout: false,
     transform: "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)",
     animatedTransform: false,
     transformTime: 450,
@@ -717,20 +721,6 @@ const store = store$1;
 
 const StateContext = React.createContext({});
 
-const loadStateFromContext = (context, space) => {
-    if (!context) {
-        return;
-    }
-    if (!space) {
-        if (typeof window === "undefined") {
-            return;
-        }
-        const defaultContext = context.states[window.location.pathname];
-        return defaultContext;
-    }
-    return context.states[space];
-};
-
 function __awaiter(thisArg, _arguments, P, generator) {
     function adopt(value) {
         return value instanceof P ? value : new P((function(resolve) {
@@ -780,17 +770,8 @@ const {getTransformRotate: getTransformRotate, getTransformTranslate: getTransfo
 
 const {rotateMatrix: rotateMatrix$1, translateMatrix: translateMatrixArray, scaleMatrix: scaleMatrix$1, multiplyArrayOfMatrices: multiplyArrayOfMatrices$1} = matrix;
 
-const computeApplication = (planes, configuration, view) => {
+const computeApplication = (planes, configuration, view, origin = "origin") => {
     const appConfiguration = general$2.configuration.merge(configuration);
-    if (planes) {
-        for (const plane of planes) {
-            const planeData = resolvePluridPlaneData(plane);
-            const linkPath = routing.resolveRoute(planeData.route);
-            if (!linkPath) {
-                continue;
-            }
-        }
-    }
     const currentView = view || [];
     const absoluteView = [];
     for (const viewItem of currentView) {
@@ -802,7 +783,6 @@ const computeApplication = (planes, configuration, view) => {
             absoluteView.push(viewPath.route);
         }
     }
-    const origin = "localhost:63000";
     const registrar = new PluridPlanesRegistrar(planes, origin);
     const registrarPlanes = registrar.getAll();
     const spaceTree = new space$2.tree.Tree({
@@ -1056,8 +1036,6 @@ const closeActivePlane = (state, pubsub) => {
     });
 };
 
-const {direction: directionLogic} = interaction;
-
 const handleGlobalShortcuts = (dispatch, state, pubsub, event, firstPerson, locks) => {
     if (event.defaultPrevented) {
         return;
@@ -1251,7 +1229,7 @@ const handleGlobalWheel = (dispatch, event, modes, locks) => {
         deltaY: event.deltaY
     };
     const absoluteThreshold = 100;
-    const direction = directionLogic.getWheelDirection(deltas, absoluteThreshold);
+    const direction = interaction.direction.getWheelDirection(deltas, absoluteThreshold);
     if (modes.rotation) {
         if (direction === directions.left && locks.rotationY) {
             return dispatch(actions.space.rotateLeft());
@@ -2113,24 +2091,13 @@ const ConnectedPluridRoots = connect(mapStateToProperties$g, mapDispatchToProper
     context: StateContext
 })(PluridRoots);
 
-const fadeIn = keyframes`
-    from {
-        opacity: 0%;
-    }
-
-    to {
-        opacity: 100%;
-    }
-`;
-
-const fadeInAnimation = fadeInTime => css`${fadeIn} ${fadeInTime}ms linear 100ms forwards`;
-
 const StyledPluridSpace = styled.div`
     position: relative;
     height: 100%;
     overflow: hidden;
     perspective: 2000px;
     outline: none;
+    transition: opacity ${({fadeInTime: fadeInTime}) => fadeInTime}ms linear;
 
     background: ${({opaque: opaque, theme: theme}) => {
     if (opaque) {
@@ -2140,24 +2107,10 @@ const StyledPluridSpace = styled.div`
     }
     return "transparent";
 }};
-
-    /* TOFIX */
-    /* opacity: ${({fadeInTime: fadeInTime}) => {
-    if (fadeInTime) {
-        return "0";
-    }
-    return "1";
-}};
-    animation: ${({isMounted: isMounted, fadeInTime: fadeInTime}) => {
-    if (isMounted && fadeInTime) {
-        return fadeInAnimation(fadeInTime);
-    }
-    return "";
-}}; */
 `;
 
 const PluridSpace = properties => {
-    const {stateConfiguration: stateConfiguration, stateGeneralTheme: stateGeneralTheme} = properties;
+    const {stateConfiguration: stateConfiguration, stateGeneralTheme: stateGeneralTheme, stateResolvedLayout: stateResolvedLayout} = properties;
     const {space: space} = stateConfiguration;
     const {opaque: opaque, fadeInTime: fadeInTime} = space;
     const [isMounted, setIsMounted] = useState(false);
@@ -2169,13 +2122,17 @@ const PluridSpace = properties => {
         opaque: opaque,
         isMounted: isMounted,
         fadeInTime: fadeInTime,
-        "data-plurid-entity": PLURID_ENTITY_SPACE
+        "data-plurid-entity": PLURID_ENTITY_SPACE,
+        style: {
+            opacity: stateResolvedLayout ? 1 : 0
+        }
     }, React.createElement(ConnectedPluridRoots, null));
 };
 
 const mapStateToProperties$f = state => ({
     stateConfiguration: selectors.configuration.getConfiguration(state),
-    stateGeneralTheme: selectors.themes.getGeneralTheme(state)
+    stateGeneralTheme: selectors.themes.getGeneralTheme(state),
+    stateResolvedLayout: selectors.space.getResolvedLayout(state)
 });
 
 const mapDispatchToProperties$f = dispatch => ({});
@@ -2243,6 +2200,18 @@ const ConnectedOrigin = connect(mapStateToProperties$e, mapDispatchToProperties$
     context: StateContext
 })(Origin);
 
+const fadeIn = keyframes`
+    from {
+        opacity: 0%;
+    }
+
+    to {
+        opacity: 100%;
+    }
+`;
+
+const fadeInAnimation = fadeInTime => css`${fadeIn} ${fadeInTime}ms linear 100ms forwards`;
+
 var MENUS;
 
 (function(MENUS) {
@@ -4319,7 +4288,7 @@ const ConnectedPluridViewcube = connect(mapStateToProperties$8, mapDispatchToPro
 const PluridViewContainer = _properties => React.createElement(React.Fragment, null, React.createElement(ConnectedPluridSpace, null), React.createElement(ConnectedOrigin, null), React.createElement(ConnectedPluridToolbar, null), React.createElement(ConnectedPluridViewcube, null));
 
 const PluridView = properties => {
-    const {planesRegistrar: planesRegistrar, customPlane: customPlane, planeContext: planeContext, planeContextValue: planeContextValue, pubsub: pubsub, planeNotFound: planeNotFound, planeRenderError: planeRenderError, matchedRoute: matchedRoute, hostname: hostname, state: state, stateConfiguration: stateConfiguration, stateTransform: stateTransform, stateSpaceView: stateSpaceView, stateTree: stateTree, stateGeneralTheme: stateGeneralTheme, dispatch: dispatch, dispatchSetConfiguration: dispatchSetConfiguration, dispatchSetGeneralTheme: dispatchSetGeneralTheme, dispatchSetInteractionTheme: dispatchSetInteractionTheme, dispatchSetSpaceField: dispatchSetSpaceField, dispatchSetSpaceLocation: dispatchSetSpaceLocation, dispatchSetAnimatedTransform: dispatchSetAnimatedTransform, dispatchSetTransformTime: dispatchSetTransformTime, dispatchSetTree: dispatchSetTree, dispatchRotateXWith: dispatchRotateXWith, dispatchRotateX: dispatchRotateX, dispatchRotateYWith: dispatchRotateYWith, dispatchRotateY: dispatchRotateY, dispatchTranslateXWith: dispatchTranslateXWith, dispatchTranslateYWith: dispatchTranslateYWith, dispatchTranslateZWith: dispatchTranslateZWith, dispatchScaleUpWith: dispatchScaleUpWith, dispatchScaleDownWith: dispatchScaleDownWith, dispatchSpaceSetViewSize: dispatchSpaceSetViewSize, dispatchSpaceSetView: dispatchSpaceSetView} = properties;
+    const {planesRegistrar: planesRegistrar, customPlane: customPlane, planeContext: planeContext, planeContextValue: planeContextValue, pubsub: pubsub, planeNotFound: planeNotFound, planeRenderError: planeRenderError, matchedRoute: matchedRoute, hostname: hostname, state: state, stateConfiguration: stateConfiguration, stateResolvedLayout: stateResolvedLayout, stateTransform: stateTransform, stateSpaceView: stateSpaceView, stateTree: stateTree, stateGeneralTheme: stateGeneralTheme, dispatch: dispatch, dispatchSetConfiguration: dispatchSetConfiguration, dispatchSetGeneralTheme: dispatchSetGeneralTheme, dispatchSetInteractionTheme: dispatchSetInteractionTheme, dispatchSetSpaceField: dispatchSetSpaceField, dispatchSetSpaceLocation: dispatchSetSpaceLocation, dispatchSetAnimatedTransform: dispatchSetAnimatedTransform, dispatchSetTransformTime: dispatchSetTransformTime, dispatchSetTree: dispatchSetTree, dispatchRotateXWith: dispatchRotateXWith, dispatchRotateX: dispatchRotateX, dispatchRotateYWith: dispatchRotateYWith, dispatchRotateY: dispatchRotateY, dispatchTranslateXWith: dispatchTranslateXWith, dispatchTranslateYWith: dispatchTranslateYWith, dispatchTranslateZWith: dispatchTranslateZWith, dispatchScaleUpWith: dispatchScaleUpWith, dispatchScaleDownWith: dispatchScaleDownWith, dispatchSpaceSetViewSize: dispatchSpaceSetViewSize, dispatchSpaceSetView: dispatchSpaceSetView} = properties;
     const viewElement = useRef(null);
     const scrollTimeout = useRef();
     const [pluridPubSub, setPluridPubSub] = useState(pubsub ? [ pubsub ] : [ new PluridPubSub ]);
@@ -4333,6 +4302,10 @@ const PluridView = properties => {
             setPreventOverscroll(false);
         }), PLURID_DEFAULT_PREVENT_OVERSCROLL_TIMEOUT);
     };
+    const resolveLayout = () => {
+        const layout = true;
+        treeUpdate(stateSpaceView, stateConfiguration, layout);
+    };
     const shortcutsCallback = useCallback((event => {
         const {transformLocks: transformLocks} = stateConfiguration.space;
         handleGlobalShortcuts(dispatch, state, pluridPubSub[0], event, stateConfiguration.space.firstPerson, transformLocks);
@@ -4347,12 +4320,13 @@ const PluridView = properties => {
         };
         handleGlobalWheel(dispatch, event, transformModes, transformLocks);
     }), [ dispatch, stateConfiguration.space.transformMode, stateConfiguration.space.transformLocks ]);
-    const treeUpdate = (view, configuration = stateConfiguration) => {
+    const treeUpdate = (view, configuration = stateConfiguration, layout) => {
         const planes = getRegisteredPlanes(planesRegistrar);
         const spaceTree = new space$2.tree.Tree({
             planes: planes,
             configuration: configuration,
-            view: view
+            view: view,
+            layout: layout
         }, hostname);
         const computedTree = spaceTree.compute();
         for (const statePlane of stateTree) {
@@ -4368,7 +4342,7 @@ const PluridView = properties => {
         dispatchSetTree(computedTree);
     };
     const treeUpdateCallback = useCallback((() => {
-        treeUpdate(stateSpaceView);
+        treeUpdate(stateSpaceView, stateConfiguration);
     }), [ hostname, stateSpaceView, stateConfiguration, JSON.stringify(stateTree) ]);
     const handlePubSubSubscribe = pubsub => {
         const subscriptions = [ {
@@ -4869,6 +4843,15 @@ const PluridView = properties => {
     useEffect((() => {
         treeUpdateCallback();
     }), []);
+    useEffect((() => {
+        if (!stateResolvedLayout) {
+            resolveLayout();
+            dispatchSetSpaceField({
+                field: "resolvedLayout",
+                value: true
+            });
+        }
+    }), [ stateResolvedLayout ]);
     const pluridContext = {
         planesRegistrar: planesRegistrar,
         planeContext: planeContext,
@@ -4898,6 +4881,7 @@ const mapStateToProperties$7 = state => ({
     state: state,
     stateConfiguration: selectors.configuration.getConfiguration(state),
     stateTransform: selectors.space.getTransform(state),
+    stateResolvedLayout: selectors.space.getResolvedLayout(state),
     stateTree: selectors.space.getTree(state),
     stateSpaceLoading: selectors.space.getLoading(state),
     stateSpaceView: selectors.space.getView(state),
@@ -4938,8 +4922,8 @@ class PluridApplication extends Component {
         super(properties);
         this.storeID = properties.id || "default";
         this.context = context;
-        const defaultStore = this.computeStore();
-        this.store = store(defaultStore);
+        this.prepare();
+        this.store = store(this.computeStore());
         this.subscribeStore();
     }
     componentDidUpdate() {
@@ -4958,15 +4942,20 @@ class PluridApplication extends Component {
         return React.createElement(Provider, {
             store: this.store,
             context: StateContext
-        }, React.createElement(ConnectedPluridView, Object.assign({}, this.props)));
+        }, React.createElement(ConnectedPluridView, Object.assign({}, this.props, {
+            planesRegistrar: this.planesRegistrar
+        })));
+    }
+    prepare() {
+        this.planesRegistrar = typeof window === "undefined" && !this.props.planesRegistrar ? new PluridPlanesRegistrar(this.props.planes, this.props.hostname) : this.props.planesRegistrar;
     }
     computeStore() {
-        const {view: view, planes: planes, configuration: configuration, precomputedState: precomputedState, planesRegistrar: planesRegistrar, useLocalStorage: useLocalStorage, hostname: hostname, space: space} = this.props;
-        registerPlanes(planes, planesRegistrar, hostname);
+        const {view: view, planes: planes, configuration: configuration, precomputedState: precomputedState, useLocalStorage: useLocalStorage, hostname: hostname, space: space} = this.props;
+        registerPlanes(planes, this.planesRegistrar, hostname);
         const currentState = this.store ? this.store.getState() : undefined;
         const localState = state.local.load(this.storeID, useLocalStorage);
-        const contextState = loadStateFromContext(this.context, space);
-        const store = state.compute(view, configuration, planesRegistrar, currentState, localState, precomputedState, contextState, hostname);
+        const contextState = undefined;
+        const store = state.compute(view, configuration, this.planesRegistrar, currentState, localState, precomputedState, contextState, hostname);
         return store;
     }
     subscribeStore() {
@@ -6355,14 +6344,13 @@ const ConnectedPluridSpaceDebugger = connect(mapStateToProperties, mapDispatchTo
     context: StateContext
 })(PluridSpaceDebugger);
 
-const serverComputeMetastate = (isoMatch, paths, globals) => __awaiter(void 0, void 0, void 0, (function*() {
+const serverComputeMetastate = (isoMatch, paths, globals, hostname = "origin") => __awaiter(void 0, void 0, void 0, (function*() {
     const protocol = "http";
-    const host = "localhost:63000";
-    const pluridApplications = yield collectApplicationsFromPath(isoMatch, protocol, host, globals);
+    const pluridApplications = yield collectApplicationsFromPath(isoMatch, protocol, hostname, globals);
     const states = {};
     for (const application of pluridApplications) {
         const {planes: planes, view: view, configuration: configuration} = application;
-        const {computedTree: computedTree, appConfiguration: appConfiguration} = computeApplication(planes, isoMatch.data.defaultConfiguration, view);
+        const {computedTree: computedTree, appConfiguration: appConfiguration} = computeApplication(planes, isoMatch.data.defaultConfiguration, view, hostname);
         const state = {
             configuration: Object.assign({}, appConfiguration),
             shortcuts: {
@@ -6377,6 +6365,7 @@ const serverComputeMetastate = (isoMatch, paths, globals) => __awaiter(void 0, v
             },
             space: {
                 loading: false,
+                resolvedLayout: false,
                 animatedTransform: false,
                 transform: "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)",
                 scale: 1,