@plurid/plurid-react 0.0.0-15 → 0.0.0-18

package/distribution/index.js

@@ -743,8 +743,12 @@ var shortcuts = Object.freeze({
     Types: index$f
 });
 
+const SET_SPACE_FIELD = "SET_SPACE_FIELD";
+
 const SET_SPACE_LOADING = "SET_SPACE_LOADING";
 
+const SET_TRANSFORM = "SET_TRANSFORM";
+
 const SET_ANIMATED_TRANSFORM = "SET_ANIMATED_TRANSFORM";
 
 const SET_TRANSFORM_TIME = "SET_TRANSFORM_TIME";
@@ -833,7 +837,9 @@ const SPACE_SET_CULLED_VIEW = "SPACE_SET_CULLED_VIEW";
 
 var index$b = Object.freeze({
     __proto__: null,
+    SET_SPACE_FIELD: SET_SPACE_FIELD,
     SET_SPACE_LOADING: SET_SPACE_LOADING,
+    SET_TRANSFORM: SET_TRANSFORM,
     SET_ANIMATED_TRANSFORM: SET_ANIMATED_TRANSFORM,
     SET_TRANSFORM_TIME: SET_TRANSFORM_TIME,
     SET_SPACE_LOCATION: SET_SPACE_LOCATION,
@@ -879,11 +885,21 @@ var index$b = Object.freeze({
     SPACE_SET_CULLED_VIEW: SPACE_SET_CULLED_VIEW
 });
 
+const setSpaceField$1 = payload => ({
+    type: SET_SPACE_FIELD,
+    payload: payload
+});
+
 const setSpaceLoading$1 = payload => ({
     type: SET_SPACE_LOADING,
     payload: payload
 });
 
+const setTransform$1 = payload => ({
+    type: SET_TRANSFORM,
+    payload: payload
+});
+
 const setAnimatedTransform$1 = payload => ({
     type: SET_ANIMATED_TRANSFORM,
     payload: payload
@@ -1078,7 +1094,9 @@ const spaceSetCulledView$1 = payload => ({
 
 var index$a = Object.freeze({
     __proto__: null,
+    setSpaceField: setSpaceField$1,
     setSpaceLoading: setSpaceLoading$1,
+    setTransform: setTransform$1,
     setAnimatedTransform: setAnimatedTransform$1,
     setTransformTime: setTransformTime$1,
     setSpaceLocation: setSpaceLocation$1,
@@ -1126,6 +1144,7 @@ var index$a = Object.freeze({
 
 const initialState$2 = {
     loading: true,
+    transform: "matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)",
     animatedTransform: false,
     transformTime: 450,
     scale: 1,
@@ -1160,303 +1179,393 @@ const initialState$2 = {
     culledView: []
 };
 
+const {quaternion: quaternion, matrix: matrix} = pluridEngine.interaction;
+
+const {matrixArrayToCSSMatrix: matrixArrayToCSSMatrix$1, rotateMatrix: rotateMatrix$1, multiplyArrayOfMatrices: multiplyArrayOfMatrices$1, scaleMatrix: scaleMatrix$1, translateMatrix: translateMatrix$2} = matrix;
+
+const {degToRad: degToRad$2} = quaternion;
+
+const computeMatrix = spaceState => {
+    const {translationX: translationX, translationY: translationY, translationZ: translationZ, rotationX: rotationX, rotationY: rotationY, scale: scale} = spaceState;
+    const innerWidth = typeof window === "undefined" ? 720 : window.innerWidth / 2;
+    const innerHeight = typeof window === "undefined" ? 400 : window.innerHeight / 2;
+    const transformOriginX = translationX * -1 + innerWidth;
+    const transformOriginY = translationY * -1 + innerHeight;
+    const transformOriginZ = translationZ * -1;
+    const rotationMatrix = rotateMatrix$1(degToRad$2(-rotationX), degToRad$2(-rotationY));
+    const translationMatrix = translateMatrix$2(translationX, translationY, translationZ);
+    const scalationMatrix = scaleMatrix$1(scale);
+    const transformMatrix = multiplyArrayOfMatrices$1([ translationMatrix, multiplyArrayOfMatrices$1([ translateMatrix$2(transformOriginX, transformOriginY, transformOriginZ), rotationMatrix, translateMatrix$2(-transformOriginX, -transformOriginY, -transformOriginZ) ]), scalationMatrix ]);
+    const transform = matrixArrayToCSSMatrix$1(transformMatrix);
+    return transform;
+};
+
 const {toRadians: toRadians} = pluridFunctions.mathematics.geometry;
 
-const setSpaceLoading = (state, action) => Object.assign(Object.assign({}, state), {
-    loading: action.payload
-});
+const getNewState = state => pluridFunctions.objects.clone(state, "any");
 
-const setAnimatedTransform = (state, action) => Object.assign(Object.assign({}, state), {
-    animatedTransform: action.payload
-});
+const setSpaceField = (state, action) => {
+    const {field: field, value: value} = action.payload;
+    const newState = getNewState(state);
+    newState[field] = value;
+    return Object.assign({}, newState);
+};
 
-const setTransformTime = (state, action) => Object.assign(Object.assign({}, state), {
-    transformTime: action.payload
-});
+const setSpaceLoading = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        loading: action.payload
+    });
+};
 
-const setSpaceLocation = (state, action) => Object.assign(Object.assign({}, state), action.payload);
+const setTransform = (state, action) => {
+    const {translationX: translationX, translationY: translationY, translationZ: translationZ, rotationX: rotationX, rotationY: rotationY, scale: scale} = action.payload;
+    const resolvedTranslationX = translationX !== null && translationX !== void 0 ? translationX : state.translationX;
+    const resolvedTranslationY = translationY !== null && translationY !== void 0 ? translationY : state.translationY;
+    const resolvedTranslationZ = translationZ !== null && translationZ !== void 0 ? translationZ : state.translationZ;
+    const resolvedRotationX = rotationX !== null && rotationX !== void 0 ? rotationX : state.rotationX;
+    const resolvedRotationY = rotationY !== null && rotationY !== void 0 ? rotationY : state.rotationY;
+    const resolvedScale = scale !== null && scale !== void 0 ? scale : state.scale;
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        translationX: resolvedTranslationX,
+        translationY: resolvedTranslationY,
+        translationZ: resolvedTranslationZ,
+        rotationX: resolvedRotationX,
+        rotationY: resolvedRotationY,
+        scale: resolvedScale
+    });
+};
 
-const viewCameraMoveForward = state => {
-    const translationZ = state.translationZ + pluridData.TRANSLATION_STEP * 6 * Math.cos(toRadians(-state.rotationY));
-    const translationX = state.translationX + pluridData.TRANSLATION_STEP * 6 * Math.sin(toRadians(-state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
+const setAnimatedTransform = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        animatedTransform: action.payload
     });
 };
 
-const viewCameraMoveBackward = state => {
-    const translationZ = state.translationZ - pluridData.TRANSLATION_STEP * 6 * Math.cos(toRadians(-state.rotationY));
-    const translationX = state.translationX - pluridData.TRANSLATION_STEP * 6 * Math.sin(toRadians(-state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
+const setTransformTime = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        transformTime: action.payload
     });
 };
 
+const setSpaceLocation = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), action.payload);
+};
+
+const viewCameraMoveForward = state => {
+    const newState = getNewState(state);
+    newState.translationZ = state.translationZ + pluridData.TRANSLATION_STEP * 6 * Math.cos(toRadians(-state.rotationY));
+    newState.translationX = state.translationX + pluridData.TRANSLATION_STEP * 6 * Math.sin(toRadians(-state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
+};
+
+const viewCameraMoveBackward = state => {
+    const newState = getNewState(state);
+    newState.translationZ = state.translationZ - pluridData.TRANSLATION_STEP * 6 * Math.cos(toRadians(-state.rotationY));
+    newState.translationX = state.translationX - pluridData.TRANSLATION_STEP * 6 * Math.sin(toRadians(-state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
+};
+
 const viewCameraMoveLeft = state => {
-    const translationX = state.translationX + pluridData.TRANSLATION_STEP * 3 * Math.cos(toRadians(state.rotationY));
-    const translationZ = state.translationZ + pluridData.TRANSLATION_STEP * 3 * Math.sin(toRadians(state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationX = state.translationX + pluridData.TRANSLATION_STEP * 3 * Math.cos(toRadians(state.rotationY));
+    newState.translationZ = state.translationZ + pluridData.TRANSLATION_STEP * 3 * Math.sin(toRadians(state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraMoveRight = state => {
-    const translationX = state.translationX - pluridData.TRANSLATION_STEP * 3 * Math.cos(toRadians(state.rotationY));
-    const translationZ = state.translationZ - pluridData.TRANSLATION_STEP * 3 * Math.sin(toRadians(state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationX = state.translationX - pluridData.TRANSLATION_STEP * 3 * Math.cos(toRadians(state.rotationY));
+    newState.translationZ = state.translationZ - pluridData.TRANSLATION_STEP * 3 * Math.sin(toRadians(state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraMoveUp = state => {
-    const translationY = state.translationY + pluridData.TRANSLATION_STEP * 3;
-    return Object.assign(Object.assign({}, state), {
-        translationY: translationY
-    });
+    const newState = getNewState(state);
+    newState.translationY = state.translationY + pluridData.TRANSLATION_STEP * 3;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraMoveDown = state => {
-    const translationY = state.translationY - pluridData.TRANSLATION_STEP * 3;
-    return Object.assign(Object.assign({}, state), {
-        translationY: translationY
-    });
+    const newState = getNewState(state);
+    newState.translationY = state.translationY - pluridData.TRANSLATION_STEP * 3;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraTurnUp = state => {
-    const rotationX = (state.rotationX + pluridData.ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationX: rotationX
-    });
+    const newState = getNewState(state);
+    newState.rotationX = (state.rotationX + pluridData.ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraTurnDown = state => {
-    const rotationX = (state.rotationX - pluridData.ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationX: rotationX
-    });
+    const newState = getNewState(state);
+    newState.rotationX = (state.rotationX - pluridData.ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraTurnLeft = state => {
-    const rotationY = (state.rotationY - pluridData.ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationY: rotationY
-    });
+    const newState = getNewState(state);
+    newState.rotationY = (state.rotationY - pluridData.ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const viewCameraTurnRight = state => {
-    const rotationY = (state.rotationY + pluridData.ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationY: rotationY
-    });
+    const newState = getNewState(state);
+    newState.rotationY = (state.rotationY + pluridData.ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const rotateUp = state => {
-    const rotationX = (state.rotationX + pluridData.ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationX: rotationX
-    });
+    const newState = getNewState(state);
+    newState.rotationX = (state.rotationX + pluridData.ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const rotateDown = state => {
-    const rotationX = (state.rotationX - pluridData.ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationX: rotationX
-    });
+    const newState = getNewState(state);
+    newState.rotationX = (state.rotationX - pluridData.ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
-const rotateX = (state, action) => Object.assign(Object.assign({}, state), {
-    rotationX: action.payload
-});
+const rotateX = (state, action) => {
+    const newState = getNewState(state);
+    newState.rotationX = action.payload;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
+};
 
 const rotateXWith = (state, action) => {
-    const rotationX = state.rotationX + action.payload;
-    return Object.assign(Object.assign({}, state), {
-        rotationX: rotationX
-    });
+    const newState = getNewState(state);
+    newState.rotationX = state.rotationX + action.payload;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const rotateLeft = state => {
-    const rotationY = (state.rotationY + pluridData.ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationY: rotationY
-    });
+    const newState = getNewState(state);
+    newState.rotationY = (state.rotationY + pluridData.ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const rotateRight = state => {
-    const rotationY = (state.rotationY - pluridData.ROTATION_STEP) % 360;
-    return Object.assign(Object.assign({}, state), {
-        rotationY: rotationY
-    });
+    const newState = getNewState(state);
+    newState.rotationY = (state.rotationY - pluridData.ROTATION_STEP) % 360;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
-const rotateY = (state, action) => Object.assign(Object.assign({}, state), {
-    rotationY: action.payload
-});
+const rotateY = (state, action) => {
+    const newState = getNewState(state);
+    newState.rotationY = action.payload;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
+};
 
 const rotateYWith = (state, action) => {
-    const rotationY = state.rotationY + action.payload;
-    return Object.assign(Object.assign({}, state), {
-        rotationY: rotationY
-    });
+    const newState = getNewState(state);
+    newState.rotationY = state.rotationY + action.payload;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateUp = state => {
-    const translationY = state.translationY - pluridData.TRANSLATION_STEP;
-    return Object.assign(Object.assign({}, state), {
-        translationY: translationY
-    });
+    const newState = getNewState(state);
+    newState.translationY = state.translationY - pluridData.TRANSLATION_STEP;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateDown = state => {
-    const translationY = state.translationY + pluridData.TRANSLATION_STEP;
-    return Object.assign(Object.assign({}, state), {
-        translationY: translationY
-    });
+    const newState = getNewState(state);
+    newState.translationY = state.translationY + pluridData.TRANSLATION_STEP;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateLeft = state => {
-    const translationX = state.translationX - pluridData.TRANSLATION_STEP * Math.cos(toRadians(state.rotationY));
-    const translationZ = state.translationZ - pluridData.TRANSLATION_STEP * Math.sin(toRadians(state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationX = state.translationX - pluridData.TRANSLATION_STEP * Math.cos(toRadians(state.rotationY));
+    newState.translationZ = state.translationZ - pluridData.TRANSLATION_STEP * Math.sin(toRadians(state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateRight = state => {
-    const translationX = state.translationX + pluridData.TRANSLATION_STEP * Math.cos(toRadians(state.rotationY));
-    const translationZ = state.translationZ + pluridData.TRANSLATION_STEP * Math.sin(toRadians(state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationX = state.translationX + pluridData.TRANSLATION_STEP * Math.cos(toRadians(state.rotationY));
+    newState.translationZ = state.translationZ + pluridData.TRANSLATION_STEP * Math.sin(toRadians(state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateIn = state => {
-    const translationZ = state.translationZ - pluridData.TRANSLATION_STEP * 3 * Math.cos(toRadians(-state.rotationY));
-    const translationX = state.translationX - pluridData.TRANSLATION_STEP * 3 * Math.sin(toRadians(-state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationZ = state.translationZ - pluridData.TRANSLATION_STEP * 3 * Math.cos(toRadians(-state.rotationY));
+    newState.translationX = state.translationX - pluridData.TRANSLATION_STEP * 3 * Math.sin(toRadians(-state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateOut = state => {
-    const translationZ = state.translationZ + pluridData.TRANSLATION_STEP * 3 * Math.cos(toRadians(-state.rotationY));
-    const translationX = state.translationX + pluridData.TRANSLATION_STEP * 3 * Math.sin(toRadians(-state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationZ = state.translationZ + pluridData.TRANSLATION_STEP * 3 * Math.cos(toRadians(-state.rotationY));
+    newState.translationX = state.translationX + pluridData.TRANSLATION_STEP * 3 * Math.sin(toRadians(-state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateXWith = (state, action) => {
-    const translationX = state.translationX + action.payload * Math.cos(toRadians(state.rotationY));
-    const translationZ = state.translationZ + action.payload * Math.sin(toRadians(state.rotationY));
-    return Object.assign(Object.assign({}, state), {
-        translationX: translationX,
-        translationZ: translationZ
-    });
+    const newState = getNewState(state);
+    newState.translationX = state.translationX + action.payload * Math.cos(toRadians(state.rotationY));
+    newState.translationZ = state.translationZ + action.payload * Math.sin(toRadians(state.rotationY));
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const translateYWith = (state, action) => {
-    const translationY = state.translationY + action.payload;
-    return Object.assign(Object.assign({}, state), {
-        translationY: translationY
-    });
+    const newState = getNewState(state);
+    newState.translationY = state.translationY + action.payload;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const scaleUp = state => {
     const computedScale = state.scale + pluridData.SCALE_STEP;
     const scale = computedScale < pluridData.SCALE_UPPER_LIMIT ? computedScale : pluridData.SCALE_UPPER_LIMIT;
-    return Object.assign(Object.assign({}, state), {
-        scale: scale
-    });
+    const newState = getNewState(state);
+    newState.scale = scale;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const scaleDown = state => {
     const computedScale = state.scale - pluridData.SCALE_STEP;
     const scale = computedScale > pluridData.SCALE_LOWER_LIMIT ? computedScale : pluridData.SCALE_LOWER_LIMIT;
-    return Object.assign(Object.assign({}, state), {
-        scale: scale
-    });
+    const newState = getNewState(state);
+    newState.scale = scale;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const scaleUpWith = (state, action) => {
     const computedScale = state.scale + Math.abs(action.payload);
     const scale = computedScale < pluridData.SCALE_UPPER_LIMIT ? computedScale : pluridData.SCALE_UPPER_LIMIT;
-    return Object.assign(Object.assign({}, state), {
-        scale: scale
-    });
+    const newState = getNewState(state);
+    newState.scale = scale;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
 const scaleDownWith = (state, action) => {
     const computedScale = state.scale - Math.abs(action.payload);
     const scale = computedScale > pluridData.SCALE_LOWER_LIMIT ? computedScale : pluridData.SCALE_LOWER_LIMIT;
-    return Object.assign(Object.assign({}, state), {
-        scale: scale
-    });
+    const newState = getNewState(state);
+    newState.scale = scale;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
 };
 
-const setInitialTree = (state, action) => Object.assign(Object.assign({}, state), {
-    initialTree: [ ...action.payload ]
-});
+const setInitialTree = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        initialTree: [ ...action.payload ]
+    });
+};
 
-const setTree = (state, action) => Object.assign(Object.assign({}, state), {
-    tree: [ ...action.payload ]
-});
+const setTree = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        tree: [ ...action.payload ]
+    });
+};
 
-const setActiveUniverse = (state, action) => Object.assign(Object.assign({}, state), {
-    activeUniverseID: action.payload
-});
+const setActiveUniverse = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        activeUniverseID: action.payload
+    });
+};
 
-const spaceResetTransform = state => Object.assign(Object.assign({}, state), {
-    scale: 1,
-    rotationX: 0,
-    rotationY: 0,
-    translationX: 0,
-    translationY: 0,
-    translationZ: 0
-});
+const spaceResetTransform = state => {
+    const newState = getNewState(state);
+    newState.scale = 1;
+    newState.rotationX = 0;
+    newState.rotationY = 0;
+    newState.translationX = 0;
+    newState.translationY = 0;
+    newState.translationZ = 0;
+    newState.transform = computeMatrix(newState);
+    return Object.assign({}, newState);
+};
 
-const setViewSize = (state, action) => Object.assign(Object.assign({}, state), {
-    viewSize: Object.assign({}, action.payload)
-});
+const setViewSize = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        viewSize: Object.assign({}, action.payload)
+    });
+};
 
-const setSpaceSize = (state, action) => Object.assign(Object.assign({}, state), {
-    spaceSize: Object.assign({}, action.payload)
-});
+const setSpaceSize = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        spaceSize: Object.assign({}, action.payload)
+    });
+};
 
 const updateSpaceTreePlane = (state, action) => {
-    const updatedTree = pluridEngine.general.tree.updateTreePlane(state.tree, action.payload);
-    return Object.assign(Object.assign({}, state), {
+    const newState = getNewState(state);
+    const updatedTree = pluridEngine.general.tree.updateTreePlane(newState.tree, action.payload);
+    return Object.assign(Object.assign({}, newState), {
         tree: updatedTree
     });
 };
 
 const updateSpaceLinkCoordinates = (state, action) => {
     const {planeID: planeID, linkCoordinates: linkCoordinates} = action.payload;
-    const updatedTree = pluridEngine.general.tree.updateTreeByPlaneIDWithLinkCoordinates(state.tree, planeID, linkCoordinates);
-    return Object.assign(Object.assign({}, state), {
+    const newState = getNewState(state);
+    const updatedTree = pluridEngine.general.tree.updateTreeByPlaneIDWithLinkCoordinates(newState.tree, planeID, linkCoordinates);
+    return Object.assign(Object.assign({}, newState), {
         tree: updatedTree
     });
 };
 
-const spaceSetView = (state, action) => Object.assign(Object.assign({}, state), {
-    view: action.payload
-});
+const spaceSetView = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        view: action.payload
+    });
+};
 
-const spaceSetCulledView = (state, action) => Object.assign(Object.assign({}, state), {
-    culledView: action.payload
-});
+const spaceSetCulledView = (state, action) => {
+    const newState = getNewState(state);
+    return Object.assign(Object.assign({}, newState), {
+        culledView: action.payload
+    });
+};
 
 var index$9 = Object.freeze({
     __proto__: null,
+    setSpaceField: setSpaceField,
     setSpaceLoading: setSpaceLoading,
+    setTransform: setTransform,
     setAnimatedTransform: setAnimatedTransform,
     setTransformTime: setTransformTime,
     setSpaceLocation: setSpaceLocation,
@@ -1507,9 +1616,15 @@ const reducer$2 = (state = initialState$2, action) => {
       case SET_STATE:
         return Object.assign(Object.assign({}, state), action.payload.space);
 
+      case SET_SPACE_FIELD:
+        return setSpaceField(state, action);
+
       case SET_SPACE_LOADING:
         return setSpaceLoading(state, action);
 
+      case SET_TRANSFORM:
+        return setTransform(state, action);
+
       case SET_ANIMATED_TRANSFORM:
         return setAnimatedTransform(state, action);
 
@@ -1646,6 +1761,8 @@ const reducer$2 = (state = initialState$2, action) => {
 
 const getLoading = state => state.space.loading;
 
+const getTransformMatrix = state => state.space.transform;
+
 const getAnimatedTransform = state => state.space.animatedTransform;
 
 const getTransformTime = state => state.space.transformTime;
@@ -1685,6 +1802,7 @@ const getCulledView = state => state.space.culledView;
 
 var index$8 = {
     getLoading: getLoading,
+    getTransformMatrix: getTransformMatrix,
     getAnimatedTransform: getAnimatedTransform,
     getTransformTime: getTransformTime,
     getRotationX: getRotationX,
@@ -2316,8 +2434,7 @@ const StyledPluridPlane = styled__default["default"].div`
     height: auto;
     width: 100%;
     font-size: 0.9rem;
-    font-family: Ubuntu, -apple-system, BlinkMacSystemFont, Roboto,
-        'Open Sans', 'Helvetica Neue', 'Lucida Sans', sans-serif;
+    font-family: ${({theme: theme}) => theme.fontFamilySansSerif};
     transition: background-color 300ms linear;
 
     display: grid;
@@ -2362,14 +2479,14 @@ const PluridPlaneBridge = properties => {
     });
 };
 
-const mapStateToProperties$g = state => ({
+const mapStateToProperties$i = state => ({
     stateGeneralTheme: selectors.themes.getGeneralTheme(state),
     stateConfiguration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProperties$g = dispatch => ({});
+const mapDispatchToProperties$i = dispatch => ({});
 
-const ConnectedPluridPlaneBridge = reactRedux.connect(mapStateToProperties$g, mapDispatchToProperties$g, null, {
+const ConnectedPluridPlaneBridge = reactRedux.connect(mapStateToProperties$i, mapDispatchToProperties$i, null, {
     context: StateContext
 })(PluridPlaneBridge);
 
@@ -2420,9 +2537,9 @@ const PluridPlaneControls = properties => {
     const {route: route, routeDivisions: routeDivisions} = treePlane;
     const {protocol: protocol, host: host} = routeDivisions;
     const gateway = "gateway";
-    const gatewayAddress = `${protocol}://${host.value}/${gateway}?plurid=` + encodeURIComponent(route);
-    const [path, setPath] = React.useState(routeDivisions.plane.value);
-    const [showAddress, setShowAddress] = React.useState(false);
+    `${protocol}://${host.value}/${gateway}?plurid=` + encodeURIComponent(route);
+    const [path, setPath] = React.useState(treePlane.route);
+    React.useState(false);
     const [showSearch, setShowSearch] = React.useState(false);
     const onPathInput = event => {
         setPath(event.target.value);
@@ -2450,29 +2567,27 @@ const PluridPlaneControls = properties => {
         "data-plurid-entity": pluridData.PLURID_ENTITY_PLANE_CONTROLS
     }, React__default["default"].createElement(StyledPluridPlaneControlsLeft, null), React__default["default"].createElement(StyledPluridPlaneControlsCenter, null, React__default["default"].createElement(PluridTextline, {
         theme: interactionTheme,
-        text: showAddress ? gatewayAddress : path,
+        text: path,
         atChange: onPathInput,
         atKeyDown: handleOnKeyDown,
         ariaLabel: "Plurid Pathbar"
     })), React__default["default"].createElement(StyledPluridPlaneControlsRight, null));
 };
 
-const mapStateToProps$h = state => ({
+const mapStateToProps$g = state => ({
     configuration: selectors.configuration.getConfiguration(state),
     generalTheme: selectors.themes.getGeneralTheme(state),
     interactionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$h = dispatch => ({});
+const mapDispatchToProps$g = dispatch => ({});
 
-const ConnectedPluridPlaneControls = reactRedux.connect(mapStateToProps$h, mapDispatchToProps$h, null, {
+const ConnectedPluridPlaneControls = reactRedux.connect(mapStateToProps$g, mapDispatchToProps$g, null, {
     context: StateContext
 })(PluridPlaneControls);
 
 const StyledPluridPlaneContent = styled__default["default"].div`
     position: relative;
-    font-family: initial !important;
-    font-size: initial !important;
 `;
 
 const PluridPlaneContent = properties => {
@@ -2524,17 +2639,17 @@ const PluridPlane = properties => {
     }, React__default["default"].createElement(PluridPlaneContent, Object.assign({}, planeContentProperties), children)) : React__default["default"].createElement(PluridPlaneContent, Object.assign({}, planeContentProperties), children)));
 };
 
-const mapStateToProps$g = state => ({
+const mapStateToProps$f = state => ({
     stateViewSize: selectors.space.getViewSize(state),
     stateGeneralTheme: selectors.themes.getGeneralTheme(state),
     stateConfiguration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$g = dispatch => ({
+const mapDispatchToProps$f = dispatch => ({
     dispatchUpdateSpaceTreePlane: treePlane => dispatch(actions.space.updateSpaceTreePlane(treePlane))
 });
 
-const ConnectedPluridPlane = reactRedux.connect(mapStateToProps$g, mapDispatchToProps$g, null, {
+const ConnectedPluridPlane = reactRedux.connect(mapStateToProps$f, mapDispatchToProps$f, null, {
     context: StateContext
 })(PluridPlane);
 
@@ -2561,7 +2676,7 @@ const PluridRoot = properties => {
     if (!context) {
         return React__default["default"].createElement(React__default["default"].Fragment, null);
     }
-    const {planesRegistrar: planesRegistrar, planeContext: PlaneContext, planeContextValue: planeContextValue, customPlane: customPlane} = context;
+    const {planesRegistrar: planesRegistrar, planeContext: PlaneContext, planeContextValue: planeContextValue, customPlane: customPlane, matchedRoute: matchedRoute} = context;
     const CustomPluridPlane = customPlane;
     const [childrenPlanes, setChildrenPlanes] = React.useState([]);
     const computeChildrenPlanes = plane => {
@@ -2588,9 +2703,9 @@ const PluridRoot = properties => {
                         query: activePlane.route.query
                     },
                     route: {
-                        value: "",
-                        parameters: {},
-                        query: {}
+                        value: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.value) || "",
+                        parameters: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.parameters) || {},
+                        query: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.query) || {}
                     }
                 };
                 const properties = {
@@ -2643,9 +2758,9 @@ const PluridRoot = properties => {
             query: pluridPlane.route.query
         },
         route: {
-            value: "",
-            parameters: {},
-            query: {}
+            value: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.value) || "",
+            parameters: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.parameters) || {},
+            query: (matchedRoute === null || matchedRoute === void 0 ? void 0 : matchedRoute.match.query) || {}
         }
     };
     const planeProperties = {
@@ -2676,112 +2791,47 @@ const PluridRoot = properties => {
     }, React__default["default"].createElement(Plane, Object.assign({}, planeProperties)))), childrenPlanes);
 };
 
-const mapStateToProperties$f = state => ({});
+const mapStateToProperties$h = state => ({});
 
-const mapDispatchToProperties$f = dispatch => ({});
+const mapDispatchToProperties$h = dispatch => ({});
 
-const ConnectedPluridRoot = reactRedux.connect(mapStateToProperties$f, mapDispatchToProperties$f, null, {
+const ConnectedPluridRoot = reactRedux.connect(mapStateToProperties$h, mapDispatchToProperties$h, null, {
     context: StateContext
 })(PluridRoot);
 
 const StyledPluridRoots = styled__default["default"].div`
     transform-style: preserve-3d;
-`;
-
-const StyledTransformOrigin = styled__default["default"].div`
-    background-color: ${({theme: theme}) => theme.backgroundColorTertiaryAlpha};
-    height: ${({transformOriginSize: transformOriginSize}) => {
-    switch (transformOriginSize) {
-      case pluridData.SIZES.SMALL:
-        return "5px";
-
-      case pluridData.SIZES.NORMAL:
-        return "10px";
-
-      case pluridData.SIZES.LARGE:
-        return "15px";
-
-      default:
-        return "10px";
-    }
-}};
-    width: ${({transformOriginSize: transformOriginSize}) => {
-    switch (transformOriginSize) {
-      case pluridData.SIZES.SMALL:
-        return "5px";
-
-      case pluridData.SIZES.NORMAL:
-        return "10px";
-
-      case pluridData.SIZES.LARGE:
-        return "15px";
-
-      default:
-        return "10px";
-    }
-}};
-
-    position: absolute;
-    z-index: 999;
-    border-radius: 100px;
-    user-select: none;
-    pointer-events: none;
-    touch-action: none;
+    transform-origin: 0 0 0;
 `;
 
 const PluridRoots = properties => {
-    const {stateConfiguration: stateConfiguration, interactionTheme: interactionTheme, animatedTransform: animatedTransform, transformTime: transformTime, spaceScale: spaceScale, spaceRotationX: spaceRotationX, spaceRotationY: spaceRotationY, spaceTranslationX: spaceTranslationX, spaceTranslationY: spaceTranslationY, spaceTranslationZ: spaceTranslationZ, stateTree: stateTree} = properties;
-    const {space: space} = stateConfiguration;
-    const {transformOrigin: transformOrigin} = space;
-    const {show: showTransformOrigin, size: transformOriginSize} = transformOrigin;
-    const innerWidth = typeof window === "undefined" ? 720 : window.innerWidth / 2;
-    const innerHeight = typeof window === "undefined" ? 400 : window.innerHeight / 2;
-    const transformOriginX = spaceTranslationX * -1 + innerWidth;
-    const transformOriginY = spaceTranslationY * -1 + innerHeight;
-    const transformOriginZ = spaceTranslationZ * -1;
-    const transformOriginSizeDifference = transformOriginSize === pluridData.SIZES.SMALL ? 2.5 : transformOriginSize === pluridData.SIZES.NORMAL ? 5 : 7.5;
+    const {spaceTransformMatrix: spaceTransformMatrix, spaceAnimatedTransform: spaceAnimatedTransform, spaceTransformTime: spaceTransformTime, stateTree: stateTree} = properties;
     return React__default["default"].createElement(StyledPluridRoots, {
         suppressHydrationWarning: true,
         style: {
             width: "100%",
             height: typeof window !== "undefined" ? window.innerHeight + "px" : "821px",
-            transform: pluridEngine.cleanTemplate(`\n                    translateX(${spaceTranslationX}px)\n                    translateY(${spaceTranslationY}px)\n                    translateZ(${spaceTranslationZ}px)\n                    scale(${spaceScale})\n                    rotateX(${spaceRotationX}deg)\n                    rotateY(${spaceRotationY}deg)\n                `),
-            transition: animatedTransform ? `transform ${transformTime}ms ease-in-out` : "initial",
-            transformOrigin: pluridEngine.cleanTemplate(`\n                    ${transformOriginX}px\n                    ${transformOriginY}px\n                    ${transformOriginZ}px\n                `)
+            transform: spaceTransformMatrix,
+            transition: spaceAnimatedTransform ? `transform ${spaceTransformTime}ms ease-in-out` : "initial"
         },
         "data-plurid-entity": pluridData.PLURID_ENTITY_ROOTS
-    }, showTransformOrigin && React__default["default"].createElement(StyledTransformOrigin, {
-        suppressHydrationWarning: true,
-        theme: interactionTheme,
-        transformOriginSize: transformOriginSize,
-        style: {
-            transform: pluridEngine.cleanTemplate(`\n                            rotateY(${-spaceRotationY}deg)\n                            translateX(${transformOriginX - transformOriginSizeDifference}px)\n                            translateY(${transformOriginY - transformOriginSizeDifference}px)\n                            translateZ(${transformOriginZ + 5}px)\n                        `),
-            transformOrigin: pluridEngine.cleanTemplate(`\n                            ${transformOriginX - transformOriginSizeDifference}px\n                            ${transformOriginY - transformOriginSizeDifference}px\n                            ${transformOriginZ}px\n                        `)
-        },
-        "data-plurid-entity": pluridData.PLURID_ENTITY_TRANSFORM_ORIGIN
-    }), stateTree.map((plane => React__default["default"].createElement(ConnectedPluridRoot, {
+    }, stateTree.map((plane => React__default["default"].createElement(ConnectedPluridRoot, {
         key: plane.planeID,
         plane: plane
     }))));
 };
 
-const mapStateToProperties$e = state => ({
+const mapStateToProperties$g = state => ({
     stateConfiguration: selectors.configuration.getConfiguration(state),
-    interactionTheme: selectors.themes.getInteractionTheme(state),
-    animatedTransform: selectors.space.getAnimatedTransform(state),
-    transformTime: selectors.space.getTransformTime(state),
-    spaceScale: selectors.space.getScale(state),
-    spaceRotationX: selectors.space.getRotationX(state),
-    spaceRotationY: selectors.space.getRotationY(state),
-    spaceTranslationX: selectors.space.getTranslationX(state),
-    spaceTranslationY: selectors.space.getTranslationY(state),
-    spaceTranslationZ: selectors.space.getTranslationZ(state),
+    spaceTransformMatrix: selectors.space.getTransformMatrix(state),
+    spaceAnimatedTransform: selectors.space.getAnimatedTransform(state),
+    spaceTransformTime: selectors.space.getTransformTime(state),
     stateTree: selectors.space.getTree(state)
 });
 
-const mapDispatchToProperties$e = dispatch => ({});
+const mapDispatchToProperties$g = dispatch => ({});
 
-const ConnectedPluridRoots = reactRedux.connect(mapStateToProperties$e, mapDispatchToProperties$e, null, {
+const ConnectedPluridRoots = reactRedux.connect(mapStateToProperties$g, mapDispatchToProperties$g, null, {
     context: StateContext
 })(PluridRoots);
 
@@ -2845,17 +2895,76 @@ const PluridSpace = properties => {
     }, React__default["default"].createElement(ConnectedPluridRoots, null));
 };
 
-const mapStateToProperties$d = state => ({
+const mapStateToProperties$f = state => ({
     stateConfiguration: selectors.configuration.getConfiguration(state),
     stateGeneralTheme: selectors.themes.getGeneralTheme(state)
 });
 
-const mapDispatchToProperties$d = dispatch => ({});
+const mapDispatchToProperties$f = dispatch => ({});
 
-const ConnectedPluridSpace = reactRedux.connect(mapStateToProperties$d, mapDispatchToProperties$d, null, {
+const ConnectedPluridSpace = reactRedux.connect(mapStateToProperties$f, mapDispatchToProperties$f, null, {
     context: StateContext
 })(PluridSpace);
 
+const resolveSize = ({size: size}) => {
+    switch (size) {
+      case pluridData.SIZES.SMALL:
+        return "5px";
+
+      case pluridData.SIZES.NORMAL:
+        return "10px";
+
+      case pluridData.SIZES.LARGE:
+        return "15px";
+
+      default:
+        return "10px";
+    }
+};
+
+const StyledOrigin = styled__default["default"].div`
+    background-color: ${({theme: theme}) => theme.backgroundColorTertiaryAlpha};
+    height: ${resolveSize};
+    width: ${resolveSize};
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    z-index: 99999;
+    border-radius: 100px;
+    user-select: none;
+    pointer-events: none;
+    touch-action: none;
+`;
+
+const Origin = properties => {
+    const {stateGeneralTheme: stateGeneralTheme, stateConfiguration: stateConfiguration} = properties;
+    const {space: space} = stateConfiguration;
+    const {transformOrigin: transformOrigin} = space;
+    const {show: showTransformOrigin, size: transformOriginSize} = transformOrigin;
+    if (!showTransformOrigin) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }
+    return React__default["default"].createElement(StyledOrigin, {
+        theme: stateGeneralTheme,
+        size: transformOriginSize,
+        "data-plurid-entity": pluridData.PLURID_ENTITY_TRANSFORM_ORIGIN
+    });
+};
+
+const mapStateToProperties$e = state => ({
+    stateGeneralTheme: selectors.themes.getGeneralTheme(state),
+    stateInteractionTheme: selectors.themes.getInteractionTheme(state),
+    stateConfiguration: selectors.configuration.getConfiguration(state)
+});
+
+const mapDispatchToProperties$e = dispatch => ({});
+
+const ConnectedOrigin = reactRedux.connect(mapStateToProperties$e, mapDispatchToProperties$e, null, {
+    context: StateContext
+})(Origin);
+
 var MENUS;
 
 (function(MENUS) {
@@ -3116,16 +3225,16 @@ const PluridMenuUniverses = properties => {
     }, React__default["default"].createElement(StyledPluridMenuUniversesScroll, null));
 };
 
-const mapStateToProps$f = state => ({
+const mapStateToProps$e = state => ({
     interactionTheme: selectors.themes.getInteractionTheme(state),
     activeUniverseID: selectors.space.getActiveUniverseID(state)
 });
 
-const mapDispatchToProps$f = dispatch => ({
+const mapDispatchToProps$e = dispatch => ({
     dispatchSetActiveUniverse: documentID => dispatch(actions.space.setActiveUniverse(documentID))
 });
 
-const ConnectedPluridMenuUniverses = reactRedux.connect(mapStateToProps$f, mapDispatchToProps$f, null, {
+const ConnectedPluridMenuUniverses = reactRedux.connect(mapStateToProps$e, mapDispatchToProps$e, null, {
     context: StateContext
 })(PluridMenuUniverses);
 
@@ -3199,14 +3308,14 @@ const PluridDrawer = properties => {
     }, heading)), toggled && React__default["default"].createElement(StyledPluridDrawerItems, null, items));
 };
 
-const mapStateToProps$e = state => ({
+const mapStateToProps$d = state => ({
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$e = dispatch => ({});
+const mapDispatchToProps$d = dispatch => ({});
 
-const ConnectedPluridDrawer = reactRedux.connect(mapStateToProps$e, mapDispatchToProps$e, null, {
+const ConnectedPluridDrawer = reactRedux.connect(mapStateToProps$d, mapDispatchToProps$d, null, {
     context: StateContext
 })(PluridDrawer);
 
@@ -3338,13 +3447,13 @@ const PluridMenuMoreGlobal = properties => {
     })));
 };
 
-const mapStateToProps$d = state => ({
+const mapStateToProps$c = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$d = dispatch => ({
+const mapDispatchToProps$c = dispatch => ({
     dispatchSetConfigurationThemeGeneralAction: theme => dispatch(actions.configuration.setConfigurationThemeGeneralAction(theme)),
     dispatchSetConfigurationThemeInteractionAction: theme => dispatch(actions.configuration.setConfigurationThemeInteractionAction(theme)),
     dispatchSetConfigurationLanguage: language => dispatch(actions.configuration.setConfigurationLanguageAction(language)),
@@ -3352,7 +3461,7 @@ const mapDispatchToProps$d = dispatch => ({
     dispatchSetInteractionTheme: theme => dispatch(actions.themes.setInteractionTheme(theme))
 });
 
-const ConnectedPluridMenuMoreGlobal = reactRedux.connect(mapStateToProps$d, mapDispatchToProps$d, null, {
+const ConnectedPluridMenuMoreGlobal = reactRedux.connect(mapStateToProps$c, mapDispatchToProps$c, null, {
     context: StateContext
 })(PluridMenuMoreGlobal);
 
@@ -3413,19 +3522,19 @@ const PluridMenuMoreTransform = properties => {
     })));
 };
 
-const mapStateToProps$c = state => ({
+const mapStateToProps$b = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$c = dispatch => ({
+const mapDispatchToProps$b = dispatch => ({
     dispatchToggleConfigurationSpaceTransformMultimode: multimode => dispatch(actions.configuration.toggleConfigurationSpaceTransformMultimode(multimode)),
     dispatchSetConfigurationSpaceTransformTouch: touch => dispatch(actions.configuration.setConfigurationSpaceTransformTouch(touch)),
     dispatchSetConfigurationSpaceTransformLocks: lock => dispatch(actions.configuration.setConfigurationSpaceTransformLocks(lock))
 });
 
-const ConnectedPluridMenuMoreTransform = reactRedux.connect(mapStateToProps$c, mapDispatchToProps$c, null, {
+const ConnectedPluridMenuMoreTransform = reactRedux.connect(mapStateToProps$b, mapDispatchToProps$b, null, {
     context: StateContext
 })(PluridMenuMoreTransform);
 
@@ -3487,12 +3596,12 @@ const PluridMenuMoreSpace = properties => {
     })));
 };
 
-const mapStateToProps$b = state => ({
+const mapStateToProps$a = state => ({
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$b = dispatch => ({
+const mapDispatchToProps$a = dispatch => ({
     dispatchSetConfigurationPlaneOpacity: value => dispatch(actions.configuration.setConfigurationPlaneOpacity(value)),
     dispatchToggleConfigurationSpaceTransparentUI: () => dispatch(actions.configuration.toggleConfigurationSpaceTransparentUI()),
     dispatchToggleConfigurationSpaceShowTransformOrigin: () => dispatch(actions.configuration.toggleConfigurationSpaceShowTransformOrigin()),
@@ -3500,7 +3609,7 @@ const mapDispatchToProps$b = dispatch => ({
     dispatchSetConfigurationSpaceLayoutType: layoutType => dispatch(actions.configuration.setConfigurationSpaceLayoutType(layoutType))
 });
 
-const ConnectedPluridMenuMoreSpace = reactRedux.connect(mapStateToProps$b, mapDispatchToProps$b, null, {
+const ConnectedPluridMenuMoreSpace = reactRedux.connect(mapStateToProps$a, mapDispatchToProps$a, null, {
     context: StateContext
 })(PluridMenuMoreSpace);
 
@@ -3547,21 +3656,21 @@ const PluridMenuMoreToolbar = properties => {
     })));
 };
 
-const mapStateToProps$a = state => ({
+const mapStateToProps$9 = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state),
     viewSize: selectors.space.getViewSize(state)
 });
 
-const mapDispatchToProps$a = dispatch => ({
+const mapDispatchToProps$9 = dispatch => ({
     dispatchToggleConfigurationToolbarConceal: () => dispatch(actions.configuration.toggleConfigurationToolbarConceal()),
     dispatchToggleConfigurationToolbarTransformIcons: () => dispatch(actions.configuration.toggleConfigurationToolbarTransformIcons()),
     dispatchToggleConfigurationToolbarTransformButtons: () => dispatch(actions.configuration.toggleConfigurationToolbarTransformButtons()),
     dispatchToggleConfigurationToolbarOpaque: () => dispatch(actions.configuration.toggleConfigurationToolbarOpaque())
 });
 
-const ConnectedPluridMenuMoreToolbar = reactRedux.connect(mapStateToProps$a, mapDispatchToProps$a, null, {
+const ConnectedPluridMenuMoreToolbar = reactRedux.connect(mapStateToProps$9, mapDispatchToProps$9, null, {
     context: StateContext
 })(PluridMenuMoreToolbar);
 
@@ -3602,20 +3711,20 @@ const PluridMenuMoreViewcube = properties => {
     }))));
 };
 
-const mapStateToProps$9 = state => ({
+const mapStateToProps$8 = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$9 = dispatch => ({
+const mapDispatchToProps$8 = dispatch => ({
     dispatchToggleConfigurationViewcubeHide: toggle => dispatch(actions.configuration.toggleConfigurationViewcubeHide(toggle)),
     dispatchToggleConfigurationViewcubeButtons: toggle => dispatch(actions.configuration.toggleConfigurationViewcubeButtons(toggle)),
     dispatchToggleConfigurationViewcubeOpaque: toggle => dispatch(actions.configuration.toggleConfigurationViewcubeOpaque(toggle)),
     dispatchToggleConfigurationViewcubeConceal: () => dispatch(actions.configuration.toggleConfigurationViewcubeConceal())
 });
 
-const ConnectedPluridMenuMoreViewcube = reactRedux.connect(mapStateToProps$9, mapDispatchToProps$9, null, {
+const ConnectedPluridMenuMoreViewcube = reactRedux.connect(mapStateToProps$8, mapDispatchToProps$8, null, {
     context: StateContext
 })(PluridMenuMoreViewcube);
 
@@ -3643,17 +3752,17 @@ const PluridMenuMoreTechnical = properties => {
     })));
 };
 
-const mapStateToProps$8 = state => ({
+const mapStateToProps$7 = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     stateConfiguration: selectors.configuration.getConfiguration(state),
     stateInteractionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$8 = dispatch => ({
+const mapDispatchToProps$7 = dispatch => ({
     dispatchSetConfigurationSpaceCullingDistance: value => dispatch(actions.configuration.setConfigurationSpaceCullingDistance(value))
 });
 
-const ConnectedPluridMenuMoreTechnical = reactRedux.connect(mapStateToProps$8, mapDispatchToProps$8, null, {
+const ConnectedPluridMenuMoreTechnical = reactRedux.connect(mapStateToProps$7, mapDispatchToProps$7, null, {
     context: StateContext
 })(PluridMenuMoreTechnical);
 
@@ -3678,14 +3787,14 @@ const PluridMenuMoreShortcuts = properties => {
     })));
 };
 
-const mapStateToProps$7 = state => ({
+const mapStateToProps$6 = state => ({
     interactionTheme: selectors.themes.getInteractionTheme(state),
     configuration: selectors.configuration.getConfiguration(state)
 });
 
-const mapDispatchToProps$7 = dispatch => ({});
+const mapDispatchToProps$6 = dispatch => ({});
 
-const ConnectedPluridMenuMoreShortcuts = reactRedux.connect(mapStateToProps$7, mapDispatchToProps$7, null, {
+const ConnectedPluridMenuMoreShortcuts = reactRedux.connect(mapStateToProps$6, mapDispatchToProps$6, null, {
     context: StateContext
 })(PluridMenuMoreShortcuts);
 
@@ -3788,19 +3897,19 @@ const PluridMoreMenu = properties => {
     }))));
 };
 
-const mapStateToProperties$c = state => ({
+const mapStateToProperties$d = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     stateInteractionTheme: selectors.themes.getInteractionTheme(state),
     stateConfiguration: selectors.configuration.getConfiguration(state),
     stateToolbarMenuScrollPosition: selectors.ui.getToolbarScrollPosition(state)
 });
 
-const mapDispatchToProperties$c = dispatch => ({
+const mapDispatchToProperties$d = dispatch => ({
     dispatchToggleConfigurationToolbarToggleDrawer: drawer => dispatch(actions.configuration.toggleConfigurationToolbarToggleDrawer(drawer)),
     dispatchSetUIToolbarScrollPosition: value => dispatch(actions.ui.setUIToolbarScrollPosition(value))
 });
 
-const ConnectedPluridMoreMenu = reactRedux.connect(mapStateToProperties$c, mapDispatchToProperties$c, null, {
+const ConnectedPluridMoreMenu = reactRedux.connect(mapStateToProperties$d, mapDispatchToProperties$d, null, {
     context: StateContext
 })(PluridMoreMenu);
 
@@ -3825,55 +3934,75 @@ const StyledPluridTransformArrow = styled__default["default"].div`
     display: grid;
     place-content: center;
     padding: 2px;
-    background-color: ${props => {
-    if (props.pressed) {
-        return props.theme.backgroundColorTertiary;
+
+    background-color: ${({pressed: pressed, theme: theme}) => {
+    if (pressed) {
+        return theme.backgroundColorTertiary;
     }
     return "initial";
 }};
 
     :hover {
-        background-color: ${props => props.theme.backgroundColorTertiary};
+        background-color: ${({theme: theme}) => theme.backgroundColorTertiary};
     }
 `;
 
+const arrowSigns = {
+    left: "◀",
+    right: "▶",
+    up: "▲",
+    down: "▼"
+};
+
 const PluridTransformArrow = properties => {
     const {direction: direction, transform: transform, interactionTheme: interactionTheme} = properties;
-    React.useRef(null);
+    const arrowSign = arrowSigns[direction];
+    const pressingInterval = React.useRef(null);
     const arrowElement = React.useRef(null);
-    const [arrowSign, setArrowSign] = React.useState("");
     const [pressed, setPressed] = React.useState(false);
-    React.useEffect((() => {
-        switch (direction) {
-          case "left":
-            setArrowSign("◀");
-            break;
-
-          case "right":
-            setArrowSign("▶");
+    const handleTouch = event => {
+        switch (event.type) {
+          case "tap":
+            transform();
+            if (pressingInterval.current) {
+                setPressed(false);
+                clearInterval(pressingInterval.current);
+            }
             break;
 
-          case "up":
-            setArrowSign("▲");
+          case "press":
+            setPressed(true);
+            pressingInterval.current = setInterval((() => {
+                transform();
+            }), 30);
             break;
 
-          case "down":
-            setArrowSign("▼");
+          case "pressup":
+            setPressed(false);
+            if (pressingInterval.current) {
+                clearInterval(pressingInterval.current);
+            }
             break;
         }
-    }), [ direction ]);
+    };
+    const handleMouseLeave = () => {
+        if (pressingInterval.current) {
+            setPressed(false);
+            clearInterval(pressingInterval.current);
+        }
+    };
     React.useEffect((() => {
         if (typeof window === "undefined") {
             return;
         }
         let touch;
-        const handleTouch = () => __awaiter(void 0, void 0, void 0, (function*() {
+        const loadTouch = () => __awaiter(void 0, void 0, void 0, (function*() {
             const HammerImport = yield loadHammer();
             const Hammer = HammerImport.default;
             touch = new Hammer(arrowElement.current);
             touch.on("tap press pressup", handleTouch);
         }));
-        handleTouch();
+        loadTouch();
         return () => {
             if (touch) {
                 touch.off("tap press pressup", handleTouch);
@@ -3883,17 +4012,18 @@ const PluridTransformArrow = properties => {
     return React__default["default"].createElement(StyledPluridTransformArrow, {
         ref: arrowElement,
         theme: interactionTheme,
-        pressed: pressed
+        pressed: pressed,
+        onMouseLeave: () => handleMouseLeave()
     }, arrowSign);
 };
 
-const mapStateToProps$6 = state => ({
+const mapStateToProps$5 = state => ({
     interactionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$6 = dispatch => ({});
+const mapDispatchToProps$5 = dispatch => ({});
 
-const ConnectedPluridTransformArrow = reactRedux.connect(mapStateToProps$6, mapDispatchToProps$6, null, {
+const ConnectedPluridTransformArrow = reactRedux.connect(mapStateToProps$5, mapDispatchToProps$5, null, {
     context: StateContext
 })(PluridTransformArrow);
 
@@ -3923,19 +4053,19 @@ const PluridToolbarRotate = properties => {
     })));
 };
 
-const mapStateToProps$5 = state => ({
+const mapStateToProps$4 = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$5 = dispatch => ({
+const mapDispatchToProps$4 = dispatch => ({
     rotateUp: () => dispatch(actions.space.rotateUp()),
     rotateDown: () => dispatch(actions.space.rotateDown()),
     rotateLeft: () => dispatch(actions.space.rotateLeft()),
     rotateRight: () => dispatch(actions.space.rotateRight())
 });
 
-const ConnectedPluridToolbarRotate = reactRedux.connect(mapStateToProps$5, mapDispatchToProps$5, null, {
+const ConnectedPluridToolbarRotate = reactRedux.connect(mapStateToProps$4, mapDispatchToProps$4, null, {
     context: StateContext
 })(PluridToolbarRotate);
 
@@ -3971,17 +4101,17 @@ const PluridToolbarScale = properties => {
     }));
 };
 
-const mapStateToProps$4 = state => ({
+const mapStateToProps$3 = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$4 = dispatch => ({
+const mapDispatchToProps$3 = dispatch => ({
     scaleUp: () => dispatch(actions.space.scaleUp()),
     scaleDown: () => dispatch(actions.space.scaleDown())
 });
 
-const ConnectedPluridToolbarScale = reactRedux.connect(mapStateToProps$4, mapDispatchToProps$4, null, {
+const ConnectedPluridToolbarScale = reactRedux.connect(mapStateToProps$3, mapDispatchToProps$3, null, {
     context: StateContext
 })(PluridToolbarScale);
 
@@ -4023,19 +4153,19 @@ const PluridToolbarTranslate = properties => {
     })));
 };
 
-const mapStateToProps$3 = state => ({
+const mapStateToProperties$c = state => ({
     stateLanguage: selectors.configuration.getConfiguration(state).global.language,
     interactionTheme: selectors.themes.getInteractionTheme(state)
 });
 
-const mapDispatchToProps$3 = dispatch => ({
+const mapDispatchToProperties$c = dispatch => ({
     translateUp: () => dispatch(actions.space.translateUp()),
     translateDown: () => dispatch(actions.space.translateDown()),
     translateLeft: () => dispatch(actions.space.translateLeft()),
     translateRight: () => dispatch(actions.space.translateRight())
 });
 
-const ConnectedPluridToolbarTranslate = reactRedux.connect(mapStateToProps$3, mapDispatchToProps$3, null, {
+const ConnectedPluridToolbarTranslate = reactRedux.connect(mapStateToProperties$c, mapDispatchToProperties$c, null, {
     context: StateContext
 })(PluridToolbarTranslate);
 
@@ -4046,6 +4176,7 @@ const PluridToolbar = properties => {
     const {firstPerson: firstPerson, transformMode: transformMode, fadeInTime: fadeInTime} = space;
     const {toolbar: toolbar} = elements;
     const {conceal: conceal, opaque: opaque, transformIcons: transformIcons, transformButtons: transformButtons} = toolbar;
+    const showToolbar = toolbar.show;
     const menuTimeout = React.useRef(null);
     const [mouseIn, setMouseIn] = React.useState(false);
     const [showMenu, setShowMenu] = React.useState(MENUS.NONE);
@@ -4098,6 +4229,9 @@ const PluridToolbar = properties => {
             }
         };
     }), [ mouseIn ]);
+    if (!showToolbar) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }
     return React__default["default"].createElement(StyledToolbar, {
         onMouseEnter: () => setMouseIn(true),
         onMouseLeave: () => setMouseIn(false),
@@ -4662,6 +4796,10 @@ const StyledPluridViewcubeModelCube = styled__default["default"].div`
     height: 50px;
 `;
 
+const {matrixArrayToCSSMatrix: matrixArrayToCSSMatrix, rotateMatrix: rotateMatrix, multiplyArrayOfMatrices: multiplyArrayOfMatrices, scaleMatrix: scaleMatrix, translateMatrix: translateMatrix$1} = pluridEngine.interaction.matrix;
+
+const {degToRad: degToRad$1} = pluridEngine.interaction.quaternion;
+
 const PluridViewcubeModel = properties => {
     const {mouseOver: mouseOver, stateLanguage: stateLanguage, spaceRotationX: spaceRotationX, spaceRotationY: spaceRotationY, stateAnimatedTransform: stateAnimatedTransform, stateTransformTime: stateTransformTime} = properties;
     const [hoveredZone, setHoveredZone] = React.useState("");
@@ -4669,15 +4807,35 @@ const PluridViewcubeModel = properties => {
     const handleMouseLeave = () => {
         setHoveredZone("");
     };
+    const computeTransform = () => {
+        const offsets = {
+            x: 32,
+            y: 23,
+            z: 0
+        };
+        const transformOrigins = {
+            x: 0,
+            y: 0,
+            z: 0
+        };
+        const scale = 1;
+        const rotationMatrix = rotateMatrix(degToRad$1(-spaceRotationX), degToRad$1(-spaceRotationY));
+        const translationMatrix = translateMatrix$1(offsets.x, offsets.y, offsets.z);
+        const scalationMatrix = scaleMatrix(scale);
+        const transformMatrix = multiplyArrayOfMatrices([ translationMatrix, multiplyArrayOfMatrices([ translateMatrix$1(transformOrigins.x, transformOrigins.y, transformOrigins.z), rotationMatrix, translateMatrix$1(-transformOrigins.x, -transformOrigins.y, -transformOrigins.z) ]), scalationMatrix ]);
+        const transform = matrixArrayToCSSMatrix(transformMatrix);
+        return transform;
+    };
     React.useEffect((() => {
         if (!hoveredZone) {
             setActiveZone("");
         }
     }), [ spaceRotationX, spaceRotationY ]);
+    const transform = computeTransform();
     return React__default["default"].createElement(StyledPluridViewcubeModel, null, React__default["default"].createElement(StyledPluridViewcubeModelContainer, null, React__default["default"].createElement(StyledPluridViewcubeModelCube, {
         suppressHydrationWarning: true,
         style: {
-            transform: `\n                            translateX(32px)\n                            translateY(23px)\n                            rotateX(${spaceRotationX}deg)\n                            rotateY(${spaceRotationY}deg)\n                        `,
+            transform: transform,
             transition: mouseOver || stateAnimatedTransform ? `transform ${stateTransformTime}ms ease-in-out` : ""
         },
         onMouseLeave: () => handleMouseLeave()
@@ -4752,6 +4910,7 @@ const PluridViewcube = properties => {
     const {viewcube: viewcube} = elements;
     const {buttons: buttons, conceal: conceal} = viewcube;
     const {fadeInTime: fadeInTime} = space;
+    const showViewcube = viewcube.show;
     const [mouseOver, setMouseOver] = React.useState(false);
     const [isMounted, setIsMounted] = React.useState(false);
     const animatedRotate = (type, value) => {
@@ -4782,6 +4941,9 @@ const PluridViewcube = properties => {
     React.useEffect((() => {
         setIsMounted(true);
     }), []);
+    if (!showViewcube) {
+        return React__default["default"].createElement(React__default["default"].Fragment, null);
+    }
     return React__default["default"].createElement(StyledPluridViewcube, {
         onMouseEnter: () => setMouseOver(true),
         onMouseLeave: () => setMouseOver(false),
@@ -4846,18 +5008,9 @@ const ConnectedPluridViewcube = reactRedux.connect(mapStateToProperties$8, mapDi
     context: StateContext
 })(PluridViewcube);
 
-const PluridPlanesView = properties => {
-    const {stateConfiguration: stateConfiguration} = properties;
-    const {elements: elements} = stateConfiguration;
-    const {toolbar: toolbar, viewcube: viewcube} = elements;
-    const showToolbar = toolbar.show;
-    const showViewcube = viewcube.show;
-    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(ConnectedPluridSpace, null), showToolbar && React__default["default"].createElement(ConnectedPluridToolbar, null), showViewcube && React__default["default"].createElement(ConnectedPluridViewcube, null));
-};
+const PluridPlanesView = properties => React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(ConnectedPluridSpace, null), React__default["default"].createElement(ConnectedOrigin, null), React__default["default"].createElement(ConnectedPluridToolbar, null), React__default["default"].createElement(ConnectedPluridViewcube, null));
 
-const mapStateToProps$2 = state => ({
-    stateConfiguration: selectors.configuration.getConfiguration(state)
-});
+const mapStateToProps$2 = state => ({});
 
 const mapDispatchToProps$2 = dispatch => ({});
 
@@ -4875,7 +5028,7 @@ const handleView = view => {
 const {getRegisteredPlanes: getRegisteredPlanes} = pluridEngine.planes;
 
 const PluridView = properties => {
-    const {planesRegistrar: planesRegistrar, customPlane: customPlane, planeContext: planeContext, planeContextValue: planeContextValue, pubsub: pubsub, planeNotFound: planeNotFound, planeRenderError: planeRenderError, stateConfiguration: stateConfiguration, stateTransform: stateTransform, stateSpaceView: stateSpaceView, dispatch: dispatch, dispatchSetConfiguration: dispatchSetConfiguration, dispatchSetGeneralTheme: dispatchSetGeneralTheme, dispatchSetInteractionTheme: dispatchSetInteractionTheme, dispatchSetSpaceLocation: dispatchSetSpaceLocation, dispatchSetAnimatedTransform: dispatchSetAnimatedTransform, dispatchSetTransformTime: dispatchSetTransformTime, dispatchSetTree: dispatchSetTree, dispatchRotateXWith: dispatchRotateXWith, dispatchRotateX: dispatchRotateX, dispatchRotateYWith: dispatchRotateYWith, dispatchRotateY: dispatchRotateY, dispatchTranslateXWith: dispatchTranslateXWith, dispatchTranslateYWith: dispatchTranslateYWith, 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, stateConfiguration: stateConfiguration, stateTransform: stateTransform, stateSpaceView: stateSpaceView, dispatch: dispatch, dispatchSetConfiguration: dispatchSetConfiguration, dispatchSetGeneralTheme: dispatchSetGeneralTheme, dispatchSetInteractionTheme: dispatchSetInteractionTheme, dispatchSetSpaceLocation: dispatchSetSpaceLocation, dispatchSetAnimatedTransform: dispatchSetAnimatedTransform, dispatchSetTransformTime: dispatchSetTransformTime, dispatchSetTree: dispatchSetTree, dispatchRotateXWith: dispatchRotateXWith, dispatchRotateX: dispatchRotateX, dispatchRotateYWith: dispatchRotateYWith, dispatchRotateY: dispatchRotateY, dispatchTranslateXWith: dispatchTranslateXWith, dispatchTranslateYWith: dispatchTranslateYWith, dispatchScaleUpWith: dispatchScaleUpWith, dispatchScaleDownWith: dispatchScaleDownWith, dispatchSpaceSetViewSize: dispatchSpaceSetViewSize, dispatchSpaceSetView: dispatchSpaceSetView} = properties;
     const viewElement = React.useRef(null);
     const [pluridPubSub, setPluridPubSub] = React.useState(pubsub ? [ pubsub ] : []);
     const shortcutsCallback = React.useCallback((event => {
@@ -5286,9 +5439,6 @@ const PluridView = properties => {
             handlePubSubPublish(pubsub);
         }
     }), [ pluridPubSub.length, stateConfiguration, stateTransform ]);
-    React.useEffect((() => {
-        treeUpdateCallback();
-    }), [ stateSpaceView ]);
     const pluridContext = {
         planesRegistrar: planesRegistrar,
         planeContext: planeContext,
@@ -5296,6 +5446,7 @@ const PluridView = properties => {
         customPlane: customPlane,
         planeNotFound: planeNotFound,
         planeRenderError: planeRenderError,
+        matchedRoute: matchedRoute,
         registerPubSub: registerPubSub
     };
     const viewContainer = handleView(stateSpaceView);
@@ -5824,7 +5975,8 @@ const computePluridRoute = (matchedRoute, planesRegistrar, isoMatcher, directPla
                 view: view,
                 planesRegistrar: planesRegistrar,
                 configuration: defaultConfiguration,
-                pubsub: pubsub
+                pubsub: pubsub,
+                matchedRoute: matchedRoute
             });
             const PluridRoute = () => React__default["default"].createElement(React__default["default"].Fragment, null, PluridRouteExterior && React__default["default"].createElement(PluridRouteExterior, {
                 plurid: pluridRouteProperty,
@@ -5903,10 +6055,12 @@ const renderDirectPlane = (routePlane, planesRegistrar) => {
             }
         }
     }
+    const {defaultConfiguration: defaultConfiguration} = routePlane === null || routePlane === void 0 ? void 0 : routePlane.data;
     const DirectPlane = () => {
         const PluridRoute = () => React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(PluridApplication, {
             view: [ routePlane.match.value ],
-            planesRegistrar: planesRegistrar
+            planesRegistrar: planesRegistrar,
+            configuration: defaultConfiguration
         }));
         return PluridRoute;
     };
@@ -6143,13 +6297,21 @@ const {resolveRoute: resolveRoute, computePlaneAddress: computePlaneAddress} = p
 
 const {getPlanesRegistrar: getPlanesRegistrar, getPluridPlaneIDByData: getPluridPlaneIDByData$1} = pluridEngine.planes;
 
+const {degToRad: degToRad, radToDeg: radToDeg} = pluridEngine.interaction.quaternion;
+
+const {multiplyMatrices: multiplyMatrices, translateMatrix: translateMatrix, rotateYMatrix: rotateYMatrix} = pluridEngine.interaction.transform.general;
+
+const {getTransformRotate: getTransformRotate, getTransformTranslate: getTransformTranslate, getTransformScale: getTransformScale} = pluridEngine.interaction.transform.matrix3d;
+
 const PluridLink = properties => {
-    const {children: children, route: planeRoute, devisible: _devisible, suffix: _suffix, atClick: atClick, style: style, className: className, stateTree: stateTree, stateGeneralTheme: stateGeneralTheme, stateConfiguration: stateConfiguration, stateViewSize: stateViewSize, dispatchSetTree: dispatchSetTree, dispatchUpdateSpaceLinkCoordinates: dispatchUpdateSpaceLinkCoordinates} = properties;
+    const {children: children, route: planeRoute, devisible: _devisible, suffix: _suffix, atClick: atClick, style: style, className: className, stateTree: stateTree, stateGeneralTheme: stateGeneralTheme, stateConfiguration: stateConfiguration, stateViewSize: stateViewSize, dispatchSetTree: dispatchSetTree, dispatchSetAnimatedTransform: dispatchSetAnimatedTransform, dispatchSetTransform: dispatchSetTransform, dispatchSetSpaceField: dispatchSetSpaceField, dispatchUpdateSpaceLinkCoordinates: dispatchUpdateSpaceLinkCoordinates} = properties;
     const planeControls = stateConfiguration.elements.plane.controls.show;
     const previewAppearTime = pluridData.PLURID_DEFAULT_CONFIGURATION_LINK_PREVIEW_FADE_IN;
     const previewDisappearTime = pluridData.PLURID_DEFAULT_CONFIGURATION_LINK_PREVIEW_FADE_OUT;
     const planeRouteResolved = computePlaneAddress(planeRoute);
     const absolutePlaneRoute = resolveRoute(planeRouteResolved, stateConfiguration.network.protocol, stateConfiguration.network.host);
+    const suffix = _suffix !== null && _suffix !== void 0 ? _suffix : pluridData.PLURID_DEFAULT_CONFIGURATION_LINK_SUFFIX;
+    const devisible = _devisible !== null && _devisible !== void 0 ? _devisible : false;
     const context = React.useContext(Context);
     if (!context) {
         return React__default["default"].createElement(React__default["default"].Fragment, null, children);
@@ -6169,8 +6331,6 @@ const PluridLink = properties => {
     const [pluridPlaneID, setPluridPlaneID] = React.useState("");
     const [parentPlaneID, setParentPlaneID] = React.useState("");
     const [linkCoordinates, setLinkCoordinates] = React.useState(defaultLinkCoordinates);
-    const [suffix, setSuffix] = React.useState(_suffix !== null && _suffix !== void 0 ? _suffix : pluridData.PLURID_DEFAULT_CONFIGURATION_LINK_SUFFIX);
-    const [devisible, setDevisible] = React.useState(_devisible !== null && _devisible !== void 0 ? _devisible : false);
     const getPluridLinkCoordinates = () => {
         const link = linkElement.current;
         if (!link) {
@@ -6220,38 +6380,69 @@ const PluridLink = properties => {
             y: y
         };
     };
-    const updateLinkCoordinates = () => {
-        const linkCoordinates = getPluridLinkCoordinates();
-        const payload = {
-            planeID: pluridPlaneID,
-            linkCoordinates: linkCoordinates
-        };
-        dispatchUpdateSpaceLinkCoordinates(payload);
-    };
-    const updateTreeWithLink = () => {
+    const updateTreeWithLink = event => {
         if (!parentPlaneID || !absolutePlaneRoute) {
             return;
         }
         const {route: route} = absolutePlaneRoute;
         const linkCoordinates = getPluridLinkCoordinates();
-        const {pluridPlaneID: pluridPlaneID, updatedTree: updatedTree} = pluridEngine.space.tree.logic.updateTreeWithNewPlane(route, parentPlaneID, linkCoordinates, stateTree, planesRegistry.getAll(), stateConfiguration);
+        const {pluridPlaneID: pluridPlaneID, updatedTree: updatedTree, updatedTreePlane: updatedTreePlane} = pluridEngine.space.tree.logic.updateTreeWithNewPlane(route, parentPlaneID, linkCoordinates, stateTree, planesRegistry.getAll(), stateConfiguration);
         if (pluridPlaneID) {
+            navigateToPluridPlane(event, updatedTreePlane);
             dispatchSetTree(updatedTree);
             setShowLink(true);
             setPluridPlaneID(pluridPlaneID);
         }
     };
-    const toggleLinkFromTree = () => {
-        const updatedTree = pluridEngine.space.tree.logic.togglePlaneFromTree(stateTree, pluridPlaneID);
+    const toggleLinkFromTree = event => {
+        const {updatedTree: updatedTree, updatedPlane: updatedPlane} = pluridEngine.space.tree.logic.togglePlaneFromTree(stateTree, pluridPlaneID);
+        navigateToPluridPlane(event, updatedPlane);
         dispatchSetTree(updatedTree);
         setShowLink((show => !show));
         setShowPreview(false);
     };
-    const handleShowPluridPlane = () => {
+    const navigateToPluridPlane = (event, updatedPlane) => {
+        if (!updatedPlane) {
+            return;
+        }
+        if (showLink) {
+            return;
+        }
+        if (event.ctrlKey || event.metaKey) {
+            return;
+        }
+        const {location: location} = updatedPlane;
+        const {translateX: translateX, translateY: translateY, translateZ: translateZ, rotateY: rotateY} = location;
+        const zSign1 = rotateY < 100 ? 1 : -1;
+        const zSign2 = rotateY < 100 ? -1 : 1;
+        const xOffset = rotateY < 100 ? 200 : 0;
+        const newMatrix = multiplyMatrices(multiplyMatrices(multiplyMatrices(translateMatrix(-translateX, -translateY, zSign1 * translateZ), rotateYMatrix(degToRad(rotateY))), translateMatrix(translateX, translateY, zSign2 * translateZ)), translateMatrix(-(translateX + xOffset), -translateY, zSign1 * translateZ));
+        const matrix3d = `matrix3d(${newMatrix.flat().join(",")})`;
+        const rotate = getTransformRotate(matrix3d);
+        const translate = getTransformTranslate(matrix3d);
+        const scale = getTransformScale(matrix3d);
+        dispatchSetAnimatedTransform(true);
+        dispatchSetSpaceField({
+            field: "transform",
+            value: matrix3d
+        });
+        dispatchSetTransform({
+            translationX: translate.translateX,
+            translationY: translate.translateY,
+            translationZ: translate.translateZ,
+            rotationX: radToDeg(rotate.rotateX),
+            rotationY: radToDeg(rotate.rotateY) * -1,
+            scale: scale.scale
+        });
+        setTimeout((() => {
+            dispatchSetAnimatedTransform(false);
+        }), 500);
+    };
+    const handleShowPluridPlane = event => {
         if (!showLink && !pluridPlaneID) {
-            updateTreeWithLink();
+            updateTreeWithLink(event);
         } else {
-            toggleLinkFromTree();
+            toggleLinkFromTree(event);
         }
     };
     const handleClick = React.useCallback((event => {
@@ -6259,21 +6450,8 @@ const PluridLink = properties => {
         if (atClick !== undefined) {
             atClick(event);
         }
-        handleShowPluridPlane();
+        handleShowPluridPlane(event);
     }), [ linkElement.current, stateTree ]);
-    React.useEffect((() => {
-        if (_suffix !== undefined) {
-            setSuffix(_suffix);
-        }
-        if (_devisible !== undefined) {
-            setDevisible(_devisible);
-        }
-    }), [ _suffix, _devisible ]);
-    React.useEffect((() => {
-        if (showLink) {
-            updateLinkCoordinates();
-        }
-    }), [ stateViewSize ]);
     React.useEffect((() => {
         const parentPlaneID = getPluridPlaneIDByData$1(linkElement.current);
         setParentPlaneID(parentPlaneID);
@@ -6334,6 +6512,9 @@ const mapStateToProperties$5 = state => ({
 
 const mapDispatchToProperties$5 = dispatch => ({
     dispatchSetTree: tree => dispatch(actions.space.setTree(tree)),
+    dispatchSetAnimatedTransform: payload => dispatch(actions.space.setAnimatedTransform(payload)),
+    dispatchSetTransform: payload => dispatch(actions.space.setTransform(payload)),
+    dispatchSetSpaceField: payload => dispatch(actions.space.setSpaceField(payload)),
     dispatchUpdateSpaceLinkCoordinates: payload => dispatch(actions.space.updateSpaceLinkCoordinates(payload))
 });