@plurid/plurid-engine 0.0.0-11 → 0.0.0-14

package/distribution/index.es.js

@@ -1,6 +1,6 @@
-import { defaultConfiguration, protocols, HTTPS_PROTOCOL, HTTP_PROTOCOL, compareTypes, defaultTreePlane, internationalization, ROOTS_GAP, LAYOUT_TYPES, PLANE_DEFAULT_ANGLE, PLURID_ROUTER_LOCATION_CHANGED } from "@plurid/plurid-data";
+import { defaultConfiguration, internationalization, protocols, HTTPS_PROTOCOL, HTTP_PROTOCOL, compareTypes, ROOTS_GAP, LAYOUT_TYPES, PLANE_DEFAULT_ANGLE, PLURID_ROUTER_LOCATION_CHANGED } from "@plurid/plurid-data";
 
-import { objects, uuid, mathematics } from "@plurid/plurid-functions";
+import { objects, mathematics, uuid } from "@plurid/plurid-functions";
 
 import themes, { THEME_NAMES } from "@plurid/plurid-themes";
 
@@ -25,91 +25,17 @@ const resolveTheme = (theme, type) => {
 };
 
 const merge = (configuration, target) => {
-    var _a, _b, _c, _d, _e;
-    const targetConfiguration = Object.assign(Object.assign({}, defaultConfiguration), target);
+    const targetConfiguration = Object.assign(Object.assign({}, objects.clone(defaultConfiguration)), objects.clone(target || {}));
     if (!configuration) {
-        return Object.assign({}, targetConfiguration);
+        return targetConfiguration;
     }
-    const specifiedOrDefault = (path, type, configuration) => {
-        const item = objects.getNested(configuration, path);
-        if (typeof item === type) {
-            return item;
-        }
-        return objects.getNested(targetConfiguration, path);
-    };
-    const layout = configuration && configuration.space && typeof configuration.space.layout === "object" ? configuration.space.layout : targetConfiguration.space.layout;
-    const mergedConfiguration = Object.assign(Object.assign({}, targetConfiguration), {
-        global: {
-            micro: specifiedOrDefault("global.micro", "boolean", configuration),
-            transparentUI: specifiedOrDefault("global.transparentUI", "boolean", configuration),
-            language: specifiedOrDefault("global.language", "string", configuration),
-            render: specifiedOrDefault("global.render", "string", configuration),
-            theme: {
+    const mergedConfiguration = objects.merge(targetConfiguration, configuration, {
+        "global.theme": () => {
+            var _a, _b;
+            return {
                 general: resolveTheme((_a = configuration.global) === null || _a === void 0 ? void 0 : _a.theme, "general"),
                 interaction: resolveTheme((_b = configuration.global) === null || _b === void 0 ? void 0 : _b.theme, "interaction")
-            }
-        },
-        elements: Object.assign(Object.assign({}, targetConfiguration.elements), {
-            toolbar: {
-                show: specifiedOrDefault("elements.toolbar.show", "boolean", configuration),
-                opaque: specifiedOrDefault("elements.toolbar.opaque", "boolean", configuration),
-                conceal: specifiedOrDefault("elements.toolbar.conceal", "boolean", configuration),
-                transformIcons: specifiedOrDefault("elements.toolbar.transformIcons", "boolean", configuration),
-                transformButtons: specifiedOrDefault("elements.toolbar.transformButtons", "boolean", configuration),
-                drawers: configuration.elements && configuration.elements.toolbar && configuration.elements.toolbar.drawers ? configuration.elements.toolbar.drawers : targetConfiguration.elements.toolbar.drawers,
-                toggledDrawers: configuration.elements && configuration.elements.toolbar && configuration.elements.toolbar.toggledDrawers ? configuration.elements.toolbar.toggledDrawers : targetConfiguration.elements.toolbar.toggledDrawers
-            },
-            viewcube: {
-                show: specifiedOrDefault("elements.viewcube.show", "boolean", configuration),
-                opaque: specifiedOrDefault("elements.viewcube.opaque", "boolean", configuration),
-                conceal: specifiedOrDefault("elements.viewcube.conceal", "boolean", configuration),
-                buttons: specifiedOrDefault("elements.viewcube.buttons", "boolean", configuration)
-            },
-            plane: {
-                width: specifiedOrDefault("elements.plane.width", "number", configuration),
-                opacity: specifiedOrDefault("elements.plane.opacity", "number", configuration),
-                controls: {
-                    show: specifiedOrDefault("elements.plane.controls.show", "boolean", configuration),
-                    pathbar: {
-                        domainURL: specifiedOrDefault("elements.plane.controls.pathbar.domainURL", "boolean", configuration)
-                    }
-                }
-            },
-            switch: {
-                show: (_e = (_d = (_c = configuration === null || configuration === void 0 ? void 0 : configuration.elements) === null || _c === void 0 ? void 0 : _c.switch) === null || _d === void 0 ? void 0 : _d.show) !== null && _e !== void 0 ? _e : false
-            }
-        }),
-        space: Object.assign(Object.assign({}, targetConfiguration.space), {
-            layout: layout,
-            camera: specifiedOrDefault("space.camera", "string", configuration),
-            perspective: specifiedOrDefault("space.perspective", "number", configuration),
-            opaque: specifiedOrDefault("space.opaque", "boolean", configuration),
-            fadeInTime: specifiedOrDefault("space.fadeInTime", "number", configuration),
-            center: specifiedOrDefault("space.center", "boolean", configuration),
-            transformOrigin: {
-                show: specifiedOrDefault("space.transformOrigin.show", "boolean", configuration),
-                size: specifiedOrDefault("space.transformOrigin.size", "string", configuration)
-            },
-            transformLocks: {
-                rotationX: specifiedOrDefault("space.transformLocks.rotationX", "boolean", configuration),
-                rotationY: specifiedOrDefault("space.transformLocks.rotationY", "boolean", configuration),
-                translationX: specifiedOrDefault("space.transformLocks.translationX", "boolean", configuration),
-                translationY: specifiedOrDefault("space.transformLocks.translationY", "boolean", configuration),
-                translationZ: specifiedOrDefault("space.transformLocks.translationZ", "boolean", configuration),
-                scale: specifiedOrDefault("space.transformLocks.scale", "boolean", configuration)
-            },
-            transformMode: specifiedOrDefault("space.transformMode", "string", configuration),
-            transformMultimode: specifiedOrDefault("space.transformMultimode", "boolean", configuration),
-            transformTouch: specifiedOrDefault("space.transformTouch", "string", configuration),
-            firstPerson: specifiedOrDefault("space.firstPerson", "boolean", configuration)
-        }),
-        network: {
-            host: specifiedOrDefault("network.host", "string", configuration),
-            protocol: specifiedOrDefault("network.protocol", "string", configuration)
-        },
-        development: {
-            planeDebugger: specifiedOrDefault("development.planeDebugger", "boolean", configuration),
-            spaceDebugger: specifiedOrDefault("development.spaceDebugger", "boolean", configuration)
+            };
         }
     });
     return mergedConfiguration;
@@ -120,1263 +46,1337 @@ var index$k = Object.freeze({
     merge: merge
 });
 
-const extractPathname = location => {
-    const queryIndex = location.indexOf("?");
-    const noQueryPath = queryIndex === -1 ? location : location.substring(0, queryIndex);
-    const fragmentIndex = noQueryPath.indexOf("#:~:");
-    const noFragmentPath = fragmentIndex === -1 ? noQueryPath : noQueryPath.substring(0, fragmentIndex);
-    return noFragmentPath;
-};
-
-const extractParametersAndMatch = (location, route) => {
-    const routeElements = splitPath(route);
-    const parameters = [];
-    routeElements.forEach((routeElement => {
-        if (routeElement[0] === ":") {
-            parameters.push(routeElement);
-        } else {
-            parameters.push("");
+const updateTreePlane$1 = (tree, page) => {
+    const updatedTree = tree.map((treePlane => {
+        if (treePlane.planeID === page.planeID) {
+            return Object.assign({}, page);
+        }
+        if (treePlane.children) {
+            return Object.assign(Object.assign({}, treePlane), {
+                children: updateTreePlane$1(treePlane.children, page)
+            });
         }
+        return treePlane;
     }));
-    const {locationElements: locationElements, comparingPath: comparingPath} = computeComparingPath(location, parameters);
-    if (comparingPath !== route) {
-        return {
-            match: false,
-            parameters: {},
-            elements: locationElements
-        };
-    }
-    const parametersValues = extractParametersValues(parameters, locationElements);
-    return {
-        match: true,
-        parameters: parametersValues,
-        elements: locationElements
-    };
+    return updatedTree;
 };
 
-const extractParametersValues = (parameters, pathElements) => {
-    const parametersValues = {};
-    parameters.forEach(((parameter, index) => {
-        if (parameter) {
-            const parameterKey = parameter.slice(1);
-            parametersValues[parameterKey] = pathElements[index];
+const updateTreeByPlaneIDWithLinkCoordinates = (tree, planeID, linkCoordinates) => {
+    const updatedTree = tree.map((treePlane => {
+        if (treePlane.planeID === planeID) {
+            const updatedPlane = Object.assign(Object.assign({}, treePlane), {
+                linkCoordinates: linkCoordinates
+            });
+            return updatedPlane;
+        }
+        if (treePlane.children) {
+            const updatedChildren = updateTreeByPlaneIDWithLinkCoordinates(treePlane.children, planeID, linkCoordinates);
+            const updatedPlane = Object.assign(Object.assign({}, treePlane), {
+                children: updatedChildren
+            });
+            return updatedPlane;
         }
+        return treePlane;
     }));
-    return parametersValues;
+    return updatedTree;
 };
 
-const computeComparingPath = (path, parameters) => {
-    const pathname = extractPathname(path);
-    const locationElements = splitPath(pathname);
-    const comparingPathElements = [ ...locationElements ];
-    for (const index of locationElements.keys()) {
-        if (parameters[index]) {
-            comparingPathElements[index] = parameters[index];
-        }
-    }
-    const comparingPath = comparingPathElements.join("/");
-    return {
-        locationElements: locationElements,
-        comparingPath: comparingPath
-    };
-};
+var index$j = Object.freeze({
+    __proto__: null,
+    updateTreePlane: updateTreePlane$1,
+    updateTreeByPlaneIDWithLinkCoordinates: updateTreeByPlaneIDWithLinkCoordinates
+});
 
-const splitPath = path => path.split("/").filter((i => i !== ""));
+var index$i = Object.freeze({
+    __proto__: null,
+    configuration: index$k,
+    tree: index$j
+});
 
-const extractQuery = path => {
-    const fragmentIndex = path.indexOf("#:~:");
-    const noFragmentPath = fragmentIndex === -1 ? path : path.substring(0, fragmentIndex);
-    const querySplit = noFragmentPath.split("?");
-    if (querySplit.length === 2) {
-        const queryValues = {};
-        const query = querySplit[1];
-        const queryItems = query.split("&");
-        for (const item of queryItems) {
-            const queryValue = item.split("=");
-            const id = queryValue[0];
-            const value = decodeURIComponent(queryValue[1]);
-            queryValues[id] = value;
-        }
-        return queryValues;
-    } else {
-        return {};
+const getWheelDirection = (deltas, ABSTHRESHOLD = 10, THRESHOLD = 0) => {
+    let direction = "left";
+    const wheelDeltaX = deltas.deltaX;
+    const wheelDeltaY = deltas.deltaY;
+    const absWheelDeltaX = Math.abs(wheelDeltaX);
+    const absWheelDeltaY = Math.abs(wheelDeltaY);
+    if (wheelDeltaX > THRESHOLD && absWheelDeltaY < ABSTHRESHOLD && absWheelDeltaX > absWheelDeltaY) {
+        direction = "left";
     }
-};
-
-const extractFragments = location => {
-    if (!location) {
-        return {
-            texts: [],
-            elements: []
-        };
+    if (wheelDeltaX < THRESHOLD && absWheelDeltaY < ABSTHRESHOLD && absWheelDeltaX > absWheelDeltaY) {
+        direction = "right";
     }
-    const split = location.split("#:~:");
-    const fragmentsValues = split[1];
-    if (!fragmentsValues) {
-        return {
-            texts: [],
-            elements: []
-        };
+    if (wheelDeltaY > THRESHOLD && absWheelDeltaX < ABSTHRESHOLD && absWheelDeltaY > absWheelDeltaX) {
+        direction = "up";
     }
-    const fragmentItems = fragmentsValues.split("&");
-    const textFragments = [];
-    const elementFragments = [];
-    for (const item of fragmentItems) {
-        const parsedFragment = parseFragment(item);
-        if (parsedFragment) {
-            switch (parsedFragment.type) {
-              case "text":
-                textFragments.push(parsedFragment);
-                break;
-
-              case "element":
-                elementFragments.push(parsedFragment);
-                break;
-            }
-        }
+    if (wheelDeltaY < THRESHOLD && absWheelDeltaX < ABSTHRESHOLD && absWheelDeltaY > absWheelDeltaX) {
+        direction = "down";
     }
-    return {
-        texts: textFragments,
-        elements: elementFragments
-    };
+    return direction;
 };
 
-const parseFragment = fragment => {
-    const fragmentData = fragment.split("=");
-    const fragmentType = fragmentData[0];
-    const fragmentValues = fragmentData[1];
-    switch (fragmentType.toLowerCase()) {
-      case "text":
-        {
-            const textValues = fragmentValues.split(",");
-            const textStart = textValues[0];
-            const textEnd = textValues[1];
-            const textOccurence = extractOccurence(textValues[2]);
-            if (!textStart) {
-                return;
-            }
-            return {
-                type: "text",
-                start: textStart,
-                end: textEnd || "",
-                occurence: textOccurence
-            };
-        }
+var index$h = Object.freeze({
+    __proto__: null,
+    getWheelDirection: getWheelDirection
+});
 
-      case "element":
-        {
-            const elementValues = fragmentValues.split(",");
-            const elementID = elementValues[0];
-            const elementOccurence = extractOccurence(elementValues[1]);
-            if (!elementID) {
-                return;
-            }
-            return {
-                type: "element",
-                id: elementID,
-                occurence: elementOccurence
-            };
-        }
-    }
-    return undefined;
-};
+const degToRad = deg => deg * .01745329252;
 
-const extractOccurence = occurence => {
-    if (!occurence) {
-        return 0;
-    }
-    const occurenceMatch = occurence.match(/\[(\d*)\]/);
-    const occurenceValue = occurenceMatch ? parseInt(occurenceMatch[1]) : 0;
-    return occurenceValue;
-};
+const radToDeg = rad => rad * 57.2957795131;
 
-const stringInsertInitial = (value, insert) => {
-    if (!value.startsWith(insert)) {
-        value = insert + value;
-    }
-    return value;
-};
+const makeQuaternion = (x, y, z, w) => ({
+    x: x,
+    y: y,
+    z: z,
+    w: w
+});
 
-const stringRemoveTrailing = (value, trail) => {
-    if (value.endsWith(trail)) {
-        value = value.slice(0, value.length - trail.length);
-    }
-    return value;
-};
+const zeroQuaternion = () => makeQuaternion(0, 0, 0, 0);
 
-const PATH_SEPARATOR = "/";
+function inverseQuaternion(quaternion) {
+    return makeQuaternion(quaternion.x, quaternion.y, quaternion.z, -quaternion.w);
+}
 
-const cleanupPath = value => {
-    value = stringInsertInitial(value, PATH_SEPARATOR);
-    value = stringRemoveTrailing(value, PATH_SEPARATOR);
-    return value;
-};
+function conjugateQuaternion(quaternion) {
+    return makeQuaternion(-quaternion.x, -quaternion.y, -quaternion.z, quaternion.w);
+}
 
-const computePlaneAddress = (plane, route, origin = "origin") => {
-    if (origin === "origin" && typeof location !== "undefined") {
-        origin = location.host;
-    }
-    const cleanPlane = extractPathname(plane);
-    const planeAddressType = checkPlaneAddressType(cleanPlane);
-    switch (planeAddressType) {
-      case "http":
-      case "https":
-      case "pttp":
-        return cleanPlane;
-    }
-    origin = stringRemoveTrailing(origin, "/");
-    const absolutePlane = isAbsolutePlane(plane);
-    const path = route && route !== "/" ? absolutePlane ? cleanupPath(cleanPlane) : cleanupPath(route) + cleanupPath(cleanPlane) : cleanupPath(cleanPlane);
-    const planeAddress = protocols.plurid + origin + path;
-    return planeAddress;
-};
+function computeQuaternionFromEulers(alpha, beta, gamma, radians = true) {
+    const x = radians ? beta : degToRad(beta);
+    const y = radians ? gamma : degToRad(gamma);
+    const z = radians ? alpha : degToRad(alpha);
+    const cX = Math.cos(x / 2);
+    const cY = Math.cos(y / 2);
+    const cZ = Math.cos(z / 2);
+    const sX = Math.sin(x / 2);
+    const sY = Math.sin(y / 2);
+    const sZ = Math.sin(z / 2);
+    const xQ = sX * cY * cZ - cX * sY * sZ;
+    const yQ = cX * sY * cZ + sX * cY * sZ;
+    const zQ = cX * cY * sZ + sX * sY * cZ;
+    const wQ = cX * cY * cZ - sX * sY * sZ;
+    return makeQuaternion(xQ, yQ, zQ, wQ);
+}
 
-const isAbsolutePlane = value => value[0] === "/";
+function quaternionFromAxisAngle(x, y, z, angle) {
+    const q = zeroQuaternion();
+    const halfAngle = angle / 2;
+    const sine = Math.sin(halfAngle);
+    q.x = x * sine;
+    q.y = y * sine;
+    q.z = z * sine;
+    q.w = Math.cos(halfAngle);
+    return q;
+}
 
-const checkPlaneAddressType = value => {
-    value = value.toLowerCase().trim();
-    if (value.startsWith(protocols.plurid)) {
-        return "pttp";
-    }
-    if (value.startsWith(protocols.https)) {
-        return HTTPS_PROTOCOL;
-    }
-    if (value.startsWith(protocols.http)) {
-        return HTTP_PROTOCOL;
-    }
-    return "relative";
-};
+function quaternionMultiply(quaternionArray) {
+    const firstQuaternion = quaternionArray[0];
+    const valueQuaternion = Object.assign({}, firstQuaternion);
+    for (let i = 1; i < quaternionArray.length; i++) {
+        const nextQuaternion = quaternionArray[i];
+        const w = valueQuaternion.w * nextQuaternion.w - valueQuaternion.x * nextQuaternion.x - valueQuaternion.y * nextQuaternion.y - valueQuaternion.z * nextQuaternion.z;
+        const x = valueQuaternion.x * nextQuaternion.w + valueQuaternion.w * nextQuaternion.x + valueQuaternion.y * nextQuaternion.z - valueQuaternion.z * nextQuaternion.y;
+        const y = valueQuaternion.y * nextQuaternion.w + valueQuaternion.w * nextQuaternion.y + valueQuaternion.z * nextQuaternion.x - valueQuaternion.x * nextQuaternion.z;
+        const z = valueQuaternion.z * nextQuaternion.w + valueQuaternion.w * nextQuaternion.z + valueQuaternion.x * nextQuaternion.y - valueQuaternion.y * nextQuaternion.x;
+        valueQuaternion.x = x;
+        valueQuaternion.y = y;
+        valueQuaternion.z = z;
+        valueQuaternion.w = w;
+    }
+    return valueQuaternion;
+}
 
-const removeTrailingSlash = value => {
-    if (value.endsWith("/") && value.length > 1) {
-        return value.slice(0, value.length - 1);
-    }
-    return value;
-};
+function rotatePointViaQuaternion(pointRotate, quaternion) {
+    const temporaryQuaternion = {
+        x: pointRotate[0],
+        y: pointRotate[1],
+        z: pointRotate[2],
+        w: 0
+    };
+    const rotatedPointQuaternion = quaternionMultiply([ quaternion, temporaryQuaternion, conjugateQuaternion(quaternion) ]);
+    return rotatedPointQuaternion;
+}
 
-const cleanPathValue = value => {
-    const queryStart = value.indexOf("?");
-    if (queryStart < 0) {
-        return removeTrailingSlash(value);
-    }
-    return removeTrailingSlash(value.substring(0, queryStart));
-};
+function makeRotationMatrixFromQuaternion(quaternion) {
+    const num = quaternion.x * 2;
+    const num2 = quaternion.y * 2;
+    const num3 = quaternion.z * 2;
+    const num4 = quaternion.x * num;
+    const num5 = quaternion.y * num2;
+    const num6 = quaternion.z * num3;
+    const num7 = quaternion.x * num2;
+    const num8 = quaternion.x * num3;
+    const num9 = quaternion.y * num3;
+    const num10 = quaternion.w * num;
+    const num11 = quaternion.w * num2;
+    const num12 = quaternion.w * num3;
+    return [ 1 - (num5 + num6), num7 - num12, num8 + num11, 0, num7 + num12, 1 - (num4 + num6), num9 - num10, 0, num8 - num11, num9 + num10, 1 - (num4 + num5), 0, 0, 0, 0, 1 ];
+}
 
-const checkParameterLength = (parameter, length, compareType) => {
-    const parameterLength = parameter.length;
-    switch (compareType) {
-      case compareTypes.equal:
-        return parameterLength === length;
+var index$g = Object.freeze({
+    __proto__: null,
+    degToRad: degToRad,
+    radToDeg: radToDeg,
+    makeQuaternion: makeQuaternion,
+    zeroQuaternion: zeroQuaternion,
+    inverseQuaternion: inverseQuaternion,
+    conjugateQuaternion: conjugateQuaternion,
+    computeQuaternionFromEulers: computeQuaternionFromEulers,
+    quaternionFromAxisAngle: quaternionFromAxisAngle,
+    quaternionMultiply: quaternionMultiply,
+    rotatePointViaQuaternion: rotatePointViaQuaternion,
+    makeRotationMatrixFromQuaternion: makeRotationMatrixFromQuaternion
+});
 
-      case compareTypes.equalLessThan:
-        return parameterLength <= length;
+function rotateMatrix(xAngle, yAngle, zAngle = 0) {
+    const xQuaternion = computeQuaternionFromEulers(0, xAngle, 0);
+    const yQuaternion = computeQuaternionFromEulers(0, 0, yAngle);
+    const zQuaternion = computeQuaternionFromEulers(zAngle, 0, 0);
+    const quartenionMultiplication = quaternionMultiply([ yQuaternion, xQuaternion, zQuaternion ]);
+    const rotationMatrix = makeRotationMatrixFromQuaternion(quartenionMultiplication);
+    return rotationMatrix;
+}
 
-      case compareTypes.lessThan:
-        return parameterLength < length;
+function translateMatrix$1(x, y, z) {
+    return [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1 ];
+}
 
-      case compareTypes.equalGreaterThan:
-        return parameterLength >= length;
+function scaleMatrix$1(s) {
+    return [ s, 0, 0, 0, 0, s, 0, 0, 0, 0, s, 0, 0, 0, 0, 1 ];
+}
 
-      case compareTypes.greaterThan:
-        return parameterLength > length;
+function multiplyMatrices$1(matrixA, matrixB) {
+    const result = [];
+    const a00 = matrixA[0];
+    const a01 = matrixA[1];
+    const a02 = matrixA[2];
+    const a03 = matrixA[3];
+    const a10 = matrixA[4];
+    const a11 = matrixA[5];
+    const a12 = matrixA[6];
+    const a13 = matrixA[7];
+    const a20 = matrixA[8];
+    const a21 = matrixA[9];
+    const a22 = matrixA[10];
+    const a23 = matrixA[11];
+    const a30 = matrixA[12];
+    const a31 = matrixA[13];
+    const a32 = matrixA[14];
+    const a33 = matrixA[15];
+    let b0 = matrixB[0];
+    let b1 = matrixB[1];
+    let b2 = matrixB[2];
+    let b3 = matrixB[3];
+    result[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
+    result[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
+    result[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
+    result[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
+    b0 = matrixB[4];
+    b1 = matrixB[5];
+    b2 = matrixB[6];
+    b3 = matrixB[7];
+    result[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
+    result[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
+    result[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
+    result[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
+    b0 = matrixB[8];
+    b1 = matrixB[9];
+    b2 = matrixB[10];
+    b3 = matrixB[11];
+    result[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
+    result[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
+    result[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
+    result[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
+    b0 = matrixB[12];
+    b1 = matrixB[13];
+    b2 = matrixB[14];
+    b3 = matrixB[15];
+    result[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
+    result[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
+    result[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
+    result[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
+    return result;
+}
 
-      default:
-        return parameterLength <= length;
+function multiplyArrayOfMatrices(matrices) {
+    let inputMatrix = matrices[0];
+    for (let i = 1; i < matrices.length; i++) {
+        inputMatrix = multiplyMatrices$1(inputMatrix, matrices[i]);
     }
+    return inputMatrix;
+}
+
+function matrixArrayToCSSMatrix(array) {
+    return "matrix3d(" + array.join(",") + ")";
+}
+
+var index$f = Object.freeze({
+    __proto__: null,
+    rotateMatrix: rotateMatrix,
+    translateMatrix: translateMatrix$1,
+    scaleMatrix: scaleMatrix$1,
+    multiplyMatrices: multiplyMatrices$1,
+    multiplyArrayOfMatrices: multiplyArrayOfMatrices,
+    matrixArrayToCSSMatrix: matrixArrayToCSSMatrix
+});
+
+const getInitialMatrix = () => {
+    const matrix = [ [ 1, 0, 0, 0 ], [ 0, 1, 0, 0 ], [ 0, 0, 1, 0 ], [ 0, 0, 0, 1 ] ];
+    return matrix;
 };
 
-const checkValidPath = (validationParameters, parameters) => {
-    if (validationParameters) {
-        for (const [parameterKey, parameterData] of Object.entries(validationParameters)) {
-            const {length: length, lengthType: lengthType, startsWith: startsWith, endsWith: endsWith, includes: includes} = parameterData;
-            const paramaterValue = parameters[parameterKey];
-            if (!paramaterValue) {
-                return false;
-            }
-            if (startsWith && !paramaterValue.startsWith(startsWith)) {
-                return false;
-            }
-            if (endsWith && !paramaterValue.endsWith(endsWith)) {
-                return false;
-            }
-            if (includes && !includes.includes(paramaterValue)) {
-                return false;
-            }
-            if (length) {
-                const validLength = checkParameterLength(paramaterValue, length, lengthType);
-                return validLength;
+const multiplyMatrices = (m1, m2) => {
+    const result = [];
+    for (let i = 0; i < m1.length; i++) {
+        result[i] = [];
+        for (let j = 0; j < m2[0].length; j++) {
+            let sum = 0;
+            for (let k = 0; k < m1[0].length; k++) {
+                sum += m1[i][k] * m2[k][j];
             }
+            result[i][j] = sum;
         }
     }
-    return true;
+    return result;
 };
 
-const cleanPathElement = path => {
-    if (path[0] === "/") {
-        return path.slice(1);
+const multiplyMatricesArray = matrices => {
+    if (matrices.length < 2) {
+        throw new Error("invalid number of matrices");
     }
-    return path;
-};
-
-var index$j = Object.freeze({
-    __proto__: null,
-    cleanPathElement: cleanPathElement
-});
-
-const mapPathsToRoutes = (paths, view) => {
-    const routes = [];
-    for (const [key, path] of Object.entries(paths)) {
-        const pathView = view[key];
-        if (pathView) {
-            const route = {
-                value: ""
-            };
-            routes.push(route);
+    const first = matrices[0];
+    let result = first;
+    for (const [index, matrix] of matrices.entries()) {
+        if (index === 0) {
+            continue;
         }
+        result = multiplyMatrices(result, matrix);
     }
-    return routes;
+    return result;
 };
 
-const pluridLinkPathDivider = route => {
-    const windowProtocol = typeof window === "undefined" ? "http" : window.location.protocol.replace(":", "");
-    const windowHost = typeof window === "undefined" ? "localhost:63000" : window.location.host;
-    const split = route.split("://").filter((value => value !== "")).map((value => cleanPathElement(value)));
-    let protocol = windowProtocol;
-    const host = {
-        value: windowHost,
-        controlled: false
-    };
-    const path = {
-        value: "",
-        parameters: {},
-        query: {}
-    };
-    const space = {
-        value: "",
-        parameters: {},
-        query: {}
-    };
-    const universe = {
-        value: "",
-        parameters: {},
-        query: {}
-    };
-    const cluster = {
-        value: "",
-        parameters: {},
-        query: {}
-    };
-    const plane = {
-        value: "",
-        parameters: {},
-        query: {},
-        fragments: {
-            texts: [],
-            elements: []
-        }
-    };
-    const valid = false;
-    if (split.length === 0 || split.length > 7) {
-        const url = {
-            protocol: {
-                value: protocol,
-                secure: true
-            },
-            host: host,
-            path: path,
-            space: space,
-            universe: universe,
-            cluster: cluster,
-            plane: plane,
-            valid: valid
-        };
-        return url;
+const arrayToMatrix = array => {
+    const matrix = [];
+    for (let i = 0; i < array.length; i += 4) {
+        const row = [];
+        row.push(array[i]);
+        row.push(array[i + 1]);
+        row.push(array[i + 2]);
+        row.push(array[i + 3]);
+        matrix.push(row);
     }
-    if (route.startsWith("/://")) {
-        const routeSplit = split.slice(1);
-        switch (routeSplit.length) {
-          case 1:
-            path.value = routeSplit[0];
-            break;
+    return matrix;
+};
 
-          case 5:
-            path.value = routeSplit[0];
-            space.value = routeSplit[1];
-            universe.value = routeSplit[2];
-            cluster.value = routeSplit[3];
-            plane.value = routeSplit[4];
-            break;
+const matrixToArray = matrix => matrix.flat();
+
+const matrix3DToMatrix = value => {
+    const values = value.replace("matrix3d(", "").replace(")", "").split(",").map((val => parseFloat(val)));
+    return arrayToMatrix(values);
+};
+
+const printMatrix = (matrix, name) => {
+    const normalize = value => {
+        if (value === 1 || value === 0) {
+            return value + "     ";
         }
-        const url = {
-            protocol: {
-                value: protocol,
-                secure: true
-            },
-            host: host,
-            path: path,
-            space: space,
-            universe: universe,
-            cluster: cluster,
-            plane: plane,
-            valid: true
-        };
-        return url;
+        if (value > 0) {
+            return value.toFixed(2) + "  ";
+        }
+        return value.toFixed(2) + " ";
+    };
+    console.log("matrix", name + ":");
+    for (const row of matrix) {
+        console.log(normalize(row[0]), normalize(row[1]), normalize(row[2]), normalize(row[3]));
     }
-    if (split[0] !== "http" && split[0] !== "https" && split[0] !== "chrome-extension") {
-        switch (split.length) {
-          case 1:
-            plane.value = split[0];
-            break;
+    console.log(`matrix3d(${matrix.flat().join(",")})`);
+    console.log();
+};
 
-          case 2:
-            cluster.value = split[0];
-            plane.value = split[1];
-            break;
+const rotateXMatrix = angle => {
+    const x = Math.cos(angle);
+    const y = -1 * Math.sin(angle);
+    const z = Math.sin(angle);
+    const m = [ [ 1, 0, 0, 0 ], [ 0, x, y, 0 ], [ 0, z, x, 0 ], [ 0, 0, 0, 1 ] ];
+    return m;
+};
 
-          case 3:
-            universe.value = split[0];
-            cluster.value = split[1];
-            plane.value = split[2];
-            break;
+const rotateYMatrix = angle => {
+    const x = Math.cos(angle);
+    const y = -1 * Math.sin(angle);
+    const z = Math.sin(angle);
+    const m = [ [ x, 0, z, 0 ], [ 0, 1, 0, 0 ], [ y, 0, x, 0 ], [ 0, 0, 0, 1 ] ];
+    return m;
+};
 
-          case 4:
-            space.value = split[0];
-            universe.value = split[1];
-            cluster.value = split[2];
-            plane.value = split[3];
-            break;
+const rotateZMatrix = angle => {
+    const x = Math.cos(angle);
+    const y = -1 * Math.sin(angle);
+    const z = Math.sin(angle);
+    const m = [ [ x, y, 0, 0 ], [ z, x, 0, 0 ], [ 0, 0, 1, 0 ], [ 0, 0, 0, 1 ] ];
+    return m;
+};
 
-          case 5:
-            path.value = split[0];
-            space.value = split[1];
-            universe.value = split[2];
-            cluster.value = split[3];
-            plane.value = split[4];
-            break;
+const translateMatrix = (x = 0, y = 0, z = 0) => {
+    const m = [ [ 1, 0, 0, 0 ], [ 0, 1, 0, 0 ], [ 0, 0, 1, 0 ], [ x, y, z, 1 ] ];
+    return m;
+};
 
-          case 6:
-            host.value = split[0];
-            path.value = split[1];
-            space.value = split[2];
-            universe.value = split[3];
-            cluster.value = split[4];
-            plane.value = split[5];
-            break;
+const scaleMatrix = s => [ [ s, 0, 0, 0 ], [ 0, s, 0, 0 ], [ 0, 0, s, 0 ], [ 0, 0, 0, 1 ] ];
 
-          default:
-            const url = {
-                protocol: {
-                    value: protocol,
-                    secure: true
-                },
-                host: host,
-                path: path,
-                space: space,
-                universe: universe,
-                cluster: cluster,
-                plane: plane,
-                valid: valid
-            };
-            return url;
-        }
-    } else {
-        switch (split.length) {
-          case 3:
-            protocol = split[0];
-            host.value = split[1];
-            path.value = split[2];
-            break;
+function rotationMatrixFromQuaternion(quaternion) {
+    const num = quaternion.x * 2;
+    const num2 = quaternion.y * 2;
+    const num3 = quaternion.z * 2;
+    const num4 = quaternion.x * num;
+    const num5 = quaternion.y * num2;
+    const num6 = quaternion.z * num3;
+    const num7 = quaternion.x * num2;
+    const num8 = quaternion.x * num3;
+    const num9 = quaternion.y * num3;
+    const num10 = quaternion.w * num;
+    const num11 = quaternion.w * num2;
+    const num12 = quaternion.w * num3;
+    return [ [ 1 - (num5 + num6), num7 - num12, num8 + num11, 0 ], [ num7 + num12, 1 - (num4 + num6), num9 - num10, 0 ], [ num8 - num11, num9 + num10, 1 - (num4 + num5), 0 ], [ 0, 0, 0, 1 ] ];
+}
 
-          case 7:
-            protocol = split[0];
-            host.value = split[1];
-            path.value = split[2];
-            space.value = split[3];
-            universe.value = split[4];
-            cluster.value = split[5];
-            plane.value = split[6];
-            break;
+const matrixToCSSMatrix = matrix => {
+    const value = matrix.flat().join(",");
+    return `matrix3d(${value})`;
+};
 
-          default:
-            const url = {
-                protocol: {
-                    value: protocol,
-                    secure: true
-                },
-                host: host,
-                path: path,
-                space: space,
-                universe: universe,
-                cluster: cluster,
-                plane: plane,
-                valid: valid
-            };
-            return url;
+const identityMatrix = () => {
+    const matrix = [ [ 1, 0, 0, 0 ], [ 0, 1, 0, 0 ], [ 0, 0, 1, 0 ], [ 0, 0, 0, 1 ] ];
+    return matrix;
+};
+
+const inverseMatrix = matrix => {
+    const cols = 4;
+    const rows = 4;
+    const A = [ ...matrix ];
+    const B = identityMatrix();
+    let r;
+    let s;
+    let f;
+    let temp;
+    for (let c = 0; c < cols; c++) {
+        let ABig = Math.abs(A[c][c]);
+        let rBig = c;
+        r = c + 1;
+        while (r < rows) {
+            if (Math.abs(A[r][c]) > ABig) {
+                ABig = Math.abs(A[r][c]);
+                rBig = r;
+            }
+            r++;
+        }
+        if (ABig === 0) {
+            throw Error("Cannot calculate inverse, determinant is zero");
+        }
+        r = rBig;
+        if (r !== c) {
+            temp = A[c];
+            A[c] = A[r];
+            A[r] = temp;
+            temp = B[c];
+            B[c] = B[r];
+            B[r] = temp;
+        }
+        const Ac = A[c];
+        const Bc = B[c];
+        for (r = 0; r < rows; r++) {
+            const Ar = A[r];
+            const Br = B[r];
+            if (r !== c) {
+                if (Ar[c] !== 0) {
+                    f = -Ar[c] / Ac[c];
+                    for (s = c; s < cols; s++) {
+                        Ar[s] = Ar[s] + f * Ac[s];
+                    }
+                    for (s = 0; s < cols; s++) {
+                        Br[s] = Br[s] + f * Bc[s];
+                    }
+                }
+            } else {
+                f = Ac[c];
+                for (s = c; s < cols; s++) {
+                    Ar[s] = Ar[s] / f;
+                }
+                for (s = 0; s < cols; s++) {
+                    Br[s] = Br[s] / f;
+                }
+            }
         }
     }
-    const url = {
-        protocol: {
-            value: protocol,
-            secure: true
-        },
-        host: host,
-        path: path,
-        space: space,
-        universe: universe,
-        cluster: cluster,
-        plane: plane,
-        valid: true
-    };
-    return url;
+    return B;
 };
 
-const resolveRoute = (route, protocol, host) => {
-    const windowProtocol = typeof window === "undefined" ? protocol || "http" : window.location.protocol.replace(":", "");
-    const windowHost = typeof window === "undefined" ? host || "localhost:63000" : window.location.host;
-    const divisions = pluridLinkPathDivider(route);
-    const defaultPathname = typeof window !== "undefined" ? window.location.pathname === "/" ? "p" : window.location.pathname.slice(1) : divisions.path.value ? divisions.path.value : "p";
-    const protocolDivision = divisions.protocol.value || windowProtocol;
-    const hostDivision = divisions.host.value ? divisions.host : {
-        value: windowHost,
-        controlled: true
-    };
-    const path = divisions.path.value ? divisions.path : {
-        value: defaultPathname,
-        parameters: {},
-        query: {}
-    };
-    const space = divisions.space.value ? divisions.space : {
-        value: "s",
-        parameters: {},
-        query: {}
-    };
-    const universe = divisions.universe.value ? divisions.universe : {
-        value: "u",
-        parameters: {},
-        query: {}
-    };
-    const cluster = divisions.cluster.value ? divisions.cluster : {
-        value: "c",
-        parameters: {},
-        query: {}
-    };
-    const plane = divisions.plane;
-    const separator = "://";
-    if (!plane.value && route !== "/") {
-        const resolvers = [ protocolDivision, hostDivision.value, path.value ];
-        const absoluteRoute = resolvers.join(separator);
-        return {
-            protocol: protocolDivision,
-            host: hostDivision,
-            path: path,
-            space: space,
-            universe: universe,
-            cluster: cluster,
-            plane: plane,
-            route: absoluteRoute
-        };
-    }
-    [ protocolDivision, hostDivision.value, path.value, space.value, universe.value, cluster.value, cleanPathElement(plane.value) ];
-    return {
-        protocol: "",
-        host: "",
-        path: path,
-        space: "",
-        universe: "",
-        cluster: "",
-        plane: "",
-        route: route
-    };
-};
+var index$e = Object.freeze({
+    __proto__: null,
+    getInitialMatrix: getInitialMatrix,
+    multiplyMatrices: multiplyMatrices,
+    multiplyMatricesArray: multiplyMatricesArray,
+    arrayToMatrix: arrayToMatrix,
+    matrixToArray: matrixToArray,
+    matrix3DToMatrix: matrix3DToMatrix,
+    printMatrix: printMatrix,
+    rotateXMatrix: rotateXMatrix,
+    rotateYMatrix: rotateYMatrix,
+    rotateZMatrix: rotateZMatrix,
+    translateMatrix: translateMatrix,
+    scaleMatrix: scaleMatrix,
+    rotationMatrixFromQuaternion: rotationMatrixFromQuaternion,
+    matrixToCSSMatrix: matrixToCSSMatrix,
+    identityMatrix: identityMatrix,
+    inverseMatrix: inverseMatrix
+});
 
-const createTreePlane = (contextPlane, documentPlane) => {
-    const routeDivisions = pluridLinkPathDivider(contextPlane.path);
-    const treePlane = Object.assign(Object.assign({}, defaultTreePlane), {
-        routeDivisions: routeDivisions,
-        sourceID: contextPlane.id,
-        planeID: uuid.generate(),
-        route: contextPlane.path,
-        show: true
-    });
-    return treePlane;
-};
+function getMatrixValues(matrix3d) {
+    const matrixValues = matrix3d.split("(")[1].split(")")[0].split(",");
+    const matrixValuesInt = [];
+    for (let i = 0; i < matrixValues.length; i++) {
+        matrixValuesInt[i] = parseFloat(matrixValues[i]);
+    }
+    return matrixValuesInt;
+}
 
-const updateTreePlane$1 = (tree, page) => {
-    const updatedTree = tree.map((treePlane => {
-        if (treePlane.planeID === page.planeID) {
-            return Object.assign({}, page);
+function getRotationMatrix(matrix3d) {
+    const valuesMatrix = getMatrixValues(matrix3d);
+    const scale = getScalationValue(matrix3d);
+    if (valuesMatrix.length === 16) {
+        for (let i = 0; i < 11; i++) {
+            valuesMatrix[i] /= scale;
         }
-        if (treePlane.children) {
-            return Object.assign(Object.assign({}, treePlane), {
-                children: updateTreePlane$1(treePlane.children, page)
-            });
+    } else if (valuesMatrix.length === 6) {
+        for (let i = 0; i < 4; i++) {
+            valuesMatrix[i] /= scale;
         }
-        return treePlane;
-    }));
-    return updatedTree;
-};
+    }
+    const rotationMatrix = valuesMatrix;
+    return rotationMatrix;
+}
 
-const updateTreeByPlaneIDWithLinkCoordinates = (tree, planeID, linkCoordinates) => {
-    const updatedTree = tree.map((treePlane => {
-        if (treePlane.planeID === planeID) {
-            const updatedPlane = Object.assign(Object.assign({}, treePlane), {
-                linkCoordinates: linkCoordinates
-            });
-            return updatedPlane;
-        }
-        if (treePlane.children) {
-            const updatedChildren = updateTreeByPlaneIDWithLinkCoordinates(treePlane.children, planeID, linkCoordinates);
-            const updatedPlane = Object.assign(Object.assign({}, treePlane), {
-                children: updatedChildren
-            });
-            return updatedPlane;
-        }
-        return treePlane;
-    }));
-    return updatedTree;
-};
+function getTranslationMatrix(matrix3d) {
+    const valuesMatrix = getMatrixValues(matrix3d);
+    let translationMatrix;
+    if (valuesMatrix.length === 16) {
+        translationMatrix = getMatrixValues(matrix3d).slice(12, 15);
+    } else if (valuesMatrix.length === 6) {
+        translationMatrix = getMatrixValues(matrix3d).slice(4);
+    }
+    return translationMatrix;
+}
 
-var index$i = Object.freeze({
-    __proto__: null,
-    createTreePlane: createTreePlane,
-    updateTreePlane: updateTreePlane$1,
-    updateTreeByPlaneIDWithLinkCoordinates: updateTreeByPlaneIDWithLinkCoordinates
-});
+function getScalationValue(matrix3d) {
+    const valuesMatrix = getMatrixValues(matrix3d);
+    let temp = 0;
+    let scale;
+    if (valuesMatrix.length === 16) {
+        const scaleMatrix = getMatrixValues(matrix3d).slice(0, 4);
+        scale = 0;
+        for (const el of scaleMatrix) {
+            scale += parseFloat(el) * parseFloat(el);
+        }
+        scale = parseFloat(Math.sqrt(scale).toPrecision(4));
+    } else if (valuesMatrix.length === 6) {
+        temp = valuesMatrix[0] * valuesMatrix[0] + valuesMatrix[1] * valuesMatrix[1];
+        scale = parseFloat(Math.sqrt(temp).toPrecision(4));
+    }
+    return scale;
+}
 
-var index$h = Object.freeze({
-    __proto__: null,
-    configuration: index$k,
-    tree: index$i
-});
+function setTransform(rotationMatrix, translationMatrix, scalationMatrix) {
+    const transformMatrix = multiplyArrayOfMatrices([ translationMatrix, rotationMatrix, scalationMatrix ]);
+    return matrixArrayToCSSMatrix(transformMatrix);
+}
 
-const getWheelDirection = (deltas, ABSTHRESHOLD = 10, THRESHOLD = 0) => {
-    let direction = "left";
-    const wheelDeltaX = deltas.deltaX;
-    const wheelDeltaY = deltas.deltaY;
-    const absWheelDeltaX = Math.abs(wheelDeltaX);
-    const absWheelDeltaY = Math.abs(wheelDeltaY);
-    if (wheelDeltaX > THRESHOLD && absWheelDeltaY < ABSTHRESHOLD && absWheelDeltaX > absWheelDeltaY) {
-        direction = "left";
-    }
-    if (wheelDeltaX < THRESHOLD && absWheelDeltaY < ABSTHRESHOLD && absWheelDeltaX > absWheelDeltaY) {
-        direction = "right";
-    }
-    if (wheelDeltaY > THRESHOLD && absWheelDeltaX < ABSTHRESHOLD && absWheelDeltaY > absWheelDeltaX) {
-        direction = "up";
+function getTransformRotate(matrix3d) {
+    const pi = Math.PI;
+    const values = getRotationMatrix(matrix3d);
+    let rotateX = 0;
+    let rotateY = 0;
+    if (values.length === 6) {
+        const cosa = values[0];
+        const sina = values[1];
+        if (cosa === 1 && sina === 0) {
+            rotateX = Math.asin(sina);
+            rotateY = Math.acos(cosa);
+        }
     }
-    if (wheelDeltaY < THRESHOLD && absWheelDeltaX < ABSTHRESHOLD && absWheelDeltaY > absWheelDeltaX) {
-        direction = "down";
+    if (values.length === 16) {
+        const cosaX1 = values[5];
+        const sinaX3 = values[9];
+        if (sinaX3 <= 0) {
+            rotateX = Math.acos(cosaX1);
+        }
+        if (sinaX3 > 0) {
+            rotateX = 2 * pi - Math.acos(cosaX1);
+        }
+        const cosaY1 = values[0];
+        const sinaY2 = values[2];
+        if (sinaY2 <= 0) {
+            rotateY = Math.acos(cosaY1);
+        }
+        if (sinaY2 > 0) {
+            rotateY = 2 * pi - Math.acos(cosaY1);
+        }
+        rotateX = Math.atan2(values[9], values[5]);
+        rotateY = Math.atan2(values[2], values[0]);
     }
-    return direction;
-};
-
-var index$g = Object.freeze({
-    __proto__: null,
-    getWheelDirection: getWheelDirection
-});
-
-const degToRad = deg => deg * .01745329252;
-
-const radToDeg = rad => rad * 57.2957795131;
-
-const makeQuaternion = (x, y, z, w) => ({
-    x: x,
-    y: y,
-    z: z,
-    w: w
-});
-
-const zeroQuaternion = () => makeQuaternion(0, 0, 0, 0);
+    return {
+        rotateX: rotateX,
+        rotateY: rotateY,
+        rotateZ: 0
+    };
+}
 
-function inverseQuaternion(quaternion) {
-    return makeQuaternion(quaternion.x, quaternion.y, quaternion.z, -quaternion.w);
+function getTransformTranslate(matrix3d) {
+    const values = getTranslationMatrix(matrix3d);
+    const translateX = values[0];
+    const translateY = values[1];
+    const translateZ = values[2];
+    return {
+        translateX: translateX,
+        translateY: translateY,
+        translateZ: translateZ
+    };
 }
 
-function conjugateQuaternion(quaternion) {
-    return makeQuaternion(-quaternion.x, -quaternion.y, -quaternion.z, quaternion.w);
+function getTransformScale(matrix3d) {
+    const scale = getScalationValue(matrix3d);
+    return {
+        scale: scale
+    };
 }
 
-function computeQuaternionFromEulers(alpha, beta, gamma) {
-    const x = beta;
-    const y = gamma;
-    const z = alpha;
-    const cX = Math.cos(x / 2);
-    const cY = Math.cos(y / 2);
-    const cZ = Math.cos(z / 2);
-    const sX = Math.sin(x / 2);
-    const sY = Math.sin(y / 2);
-    const sZ = Math.sin(z / 2);
-    const xQ = sX * cY * cZ - cX * sY * sZ;
-    const yQ = cX * sY * cZ + sX * cY * sZ;
-    const zQ = cX * cY * sZ + sX * sY * cZ;
-    const wQ = cX * cY * cZ - sX * sY * sZ;
-    return makeQuaternion(xQ, yQ, zQ, wQ);
-}
-
-function quaternionFromAxisAngle(x, y, z, angle) {
-    const q = zeroQuaternion();
-    const halfAngle = angle / 2;
-    q.x = x * Math.sin(halfAngle);
-    q.y = y * Math.sin(halfAngle);
-    q.z = z * Math.sin(halfAngle);
-    q.w = Math.cos(halfAngle);
-    return q;
-}
-
-function quaternionMultiply(quaternionArray) {
-    const temporaryQuaternion = quaternionArray[0];
-    const copyQuaternion = {
-        x: temporaryQuaternion.x,
-        y: temporaryQuaternion.y,
-        z: temporaryQuaternion.z,
-        w: temporaryQuaternion.w
-    };
-    for (let i = 1; i < quaternionArray.length; i++) {
-        const secondaryTemporaryQuaternion = quaternionArray[i];
-        const nextQuaternion = {
-            x: secondaryTemporaryQuaternion.x,
-            y: secondaryTemporaryQuaternion.y,
-            z: secondaryTemporaryQuaternion.z,
-            w: secondaryTemporaryQuaternion.w
-        };
-        const w = copyQuaternion.w * nextQuaternion.w - copyQuaternion.x * nextQuaternion.x - copyQuaternion.y * nextQuaternion.y - copyQuaternion.z * nextQuaternion.z;
-        const x = copyQuaternion.x * nextQuaternion.w + copyQuaternion.w * nextQuaternion.x + copyQuaternion.y * nextQuaternion.z - copyQuaternion.z * nextQuaternion.y;
-        const y = copyQuaternion.y * nextQuaternion.w + copyQuaternion.w * nextQuaternion.y + copyQuaternion.z * nextQuaternion.x - copyQuaternion.x * nextQuaternion.z;
-        const z = copyQuaternion.z * nextQuaternion.w + copyQuaternion.w * nextQuaternion.z + copyQuaternion.x * nextQuaternion.y - copyQuaternion.y * nextQuaternion.x;
-        copyQuaternion.x = x;
-        copyQuaternion.y = y;
-        copyQuaternion.z = z;
-        copyQuaternion.w = w;
-    }
-    return copyQuaternion;
+function rotatePlurid(matrix3d, direction = "", angleIncrement = .07) {
+    const transformRotate = getTransformRotate(matrix3d);
+    const rotateX = transformRotate.rotateX;
+    let rotateY = transformRotate.rotateY;
+    const rotateZ = transformRotate.rotateZ;
+    const transformTranslate = getTransformTranslate(matrix3d);
+    const translateX = transformTranslate.translateX;
+    const translateY = transformTranslate.translateY;
+    const translateZ = transformTranslate.translateZ;
+    const scale = getTransformScale(matrix3d).scale;
+    let valRotationMatrix = rotateMatrix(rotateX, rotateY, rotateZ);
+    const valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
+    const valScalationMatrix = scaleMatrix$1(scale);
+    if (direction === "left") {
+        rotateY -= angleIncrement;
+        valRotationMatrix = rotateMatrix(rotateX, rotateY);
+    }
+    if (direction === "right") {
+        rotateY += angleIncrement;
+        valRotationMatrix = rotateMatrix(rotateX, rotateY);
+    }
+    if (direction === "up") {
+        rotateY -= angleIncrement;
+        valRotationMatrix = rotateMatrix(rotateX, rotateY);
+    }
+    if (direction === "down") {
+        rotateY += angleIncrement;
+        valRotationMatrix = rotateMatrix(rotateX, rotateY);
+    }
+    const transformedMatrix3d = setTransform(valRotationMatrix, valTranslationMatrix, valScalationMatrix);
+    return transformedMatrix3d;
 }
 
-function rotatePointViaQuaternion(pointRotate, quaternion) {
-    const temporaryQuaternion = {
-        x: pointRotate[0],
-        y: pointRotate[1],
-        z: pointRotate[2],
-        w: 0
-    };
-    const rotatedPoint = quaternionMultiply([ quaternion, temporaryQuaternion, conjugateQuaternion(quaternion) ]);
-    return {
-        x: rotatedPoint.x,
-        y: rotatedPoint.y,
-        z: rotatedPoint.z,
-        w: rotatedPoint.w
-    };
+function translatePlurid(matrix3d, direction = "", linearIncrement = 50) {
+    const transformRotate = getTransformRotate(matrix3d);
+    const rotateX = transformRotate.rotateX;
+    const rotateY = transformRotate.rotateY;
+    const rotateZ = transformRotate.rotateZ;
+    const transformTranslate = getTransformTranslate(matrix3d);
+    let translateX = transformTranslate.translateX;
+    let translateY = transformTranslate.translateY;
+    const translateZ = transformTranslate.translateZ;
+    const scale = getTransformScale(matrix3d).scale;
+    const valRotationMatrix = rotateMatrix(rotateX, rotateY, rotateZ);
+    let valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
+    const valScalationMatrix = scaleMatrix$1(scale);
+    scale < .5 ? linearIncrement = 50 : linearIncrement = 30;
+    if (direction === "left") {
+        translateX += linearIncrement;
+        valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
+    }
+    if (direction === "right") {
+        translateX -= linearIncrement;
+        valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
+    }
+    if (direction === "up") {
+        translateY += linearIncrement;
+        valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
+    }
+    if (direction === "down") {
+        translateY -= linearIncrement;
+        valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
+    }
+    const transformedMatrix3d = setTransform(valRotationMatrix, valTranslationMatrix, valScalationMatrix);
+    return transformedMatrix3d;
 }
 
-function makeRotationMatrixFromQuaternion(quaternion) {
-    const num = quaternion.x * 2;
-    const num2 = quaternion.y * 2;
-    const num3 = quaternion.z * 2;
-    const num4 = quaternion.x * num;
-    const num5 = quaternion.y * num2;
-    const num6 = quaternion.z * num3;
-    const num7 = quaternion.x * num2;
-    const num8 = quaternion.x * num3;
-    const num9 = quaternion.y * num3;
-    const num10 = quaternion.w * num;
-    const num11 = quaternion.w * num2;
-    const num12 = quaternion.w * num3;
-    return [ 1 - (num5 + num6), num7 - num12, num8 + num11, 0, num7 + num12, 1 - (num4 + num6), num9 - num10, 0, num8 - num11, num9 + num10, 1 - (num4 + num5), 0, 0, 0, 0, 1 ];
+function scalePlurid(matrix3d, direction = "", scaleIncrement = .05) {
+    const transformRotate = getTransformRotate(matrix3d);
+    const rotateX = transformRotate.rotateX;
+    const rotateY = transformRotate.rotateY;
+    const rotateZ = transformRotate.rotateZ;
+    const transformTranslate = getTransformTranslate(matrix3d);
+    const translateX = transformTranslate.translateX;
+    const translateY = transformTranslate.translateY;
+    const translateZ = transformTranslate.translateZ;
+    let scale = getTransformScale(matrix3d).scale;
+    const valRotationMatrix = rotateMatrix(rotateX, rotateY, rotateZ);
+    const valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
+    let valScalationMatrix = scaleMatrix$1(scale);
+    if (direction === "up") {
+        scale -= scaleIncrement;
+        if (scale < .1) {
+            scale = .1;
+        }
+        valScalationMatrix = scaleMatrix$1(scale);
+    }
+    if (direction === "down") {
+        scale += scaleIncrement;
+        if (scale > 4) {
+            scale = 4;
+        }
+        valScalationMatrix = scaleMatrix$1(scale);
+    }
+    const transformedMatrix3d = setTransform(valRotationMatrix, valTranslationMatrix, valScalationMatrix);
+    return transformedMatrix3d;
 }
 
-var index$f = Object.freeze({
+var index$d = Object.freeze({
     __proto__: null,
-    degToRad: degToRad,
-    radToDeg: radToDeg,
-    makeQuaternion: makeQuaternion,
-    zeroQuaternion: zeroQuaternion,
-    inverseQuaternion: inverseQuaternion,
-    conjugateQuaternion: conjugateQuaternion,
-    computeQuaternionFromEulers: computeQuaternionFromEulers,
-    quaternionFromAxisAngle: quaternionFromAxisAngle,
-    quaternionMultiply: quaternionMultiply,
-    rotatePointViaQuaternion: rotatePointViaQuaternion,
-    makeRotationMatrixFromQuaternion: makeRotationMatrixFromQuaternion
+    getMatrixValues: getMatrixValues,
+    getRotationMatrix: getRotationMatrix,
+    getTranslationMatrix: getTranslationMatrix,
+    getScalationValue: getScalationValue,
+    setTransform: setTransform,
+    getTransformRotate: getTransformRotate,
+    getTransformTranslate: getTransformTranslate,
+    getTransformScale: getTransformScale,
+    rotatePlurid: rotatePlurid,
+    translatePlurid: translatePlurid,
+    scalePlurid: scalePlurid
 });
 
-function rotateMatrix(xAngle, yAngle, zAngle = 0) {
-    const xQuaternion = computeQuaternionFromEulers(0, xAngle, 0);
-    const yQuaternion = computeQuaternionFromEulers(0, 0, yAngle);
-    const zQuaternion = computeQuaternionFromEulers(zAngle, 0, 0);
-    const quartenionMultiplication = quaternionMultiply([ yQuaternion, xQuaternion, zQuaternion ]);
-    const rotationMatrix = makeRotationMatrixFromQuaternion(quartenionMultiplication);
-    return rotationMatrix;
-}
+var index$c = Object.freeze({
+    __proto__: null,
+    general: index$e,
+    matrix3d: index$d
+});
 
-function translateMatrix$1(x, y, z) {
-    return [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, x, y, z, 1 ];
-}
+var index$b = Object.freeze({
+    __proto__: null,
+    direction: index$h,
+    matrix: index$f,
+    quaternion: index$g,
+    transform: index$c
+});
 
-function scaleMatrix(s) {
-    return [ s, 0, 0, 0, 0, s, 0, 0, 0, 0, s, 0, 0, 0, 0, 1 ];
-}
+const internatiolate = (lamguage, field) => internationalization[lamguage][field];
 
-function multiplyMatrices$1(matrixA, matrixB) {
-    const result = [];
-    const a00 = matrixA[0];
-    const a01 = matrixA[1];
-    const a02 = matrixA[2];
-    const a03 = matrixA[3];
-    const a10 = matrixA[4];
-    const a11 = matrixA[5];
-    const a12 = matrixA[6];
-    const a13 = matrixA[7];
-    const a20 = matrixA[8];
-    const a21 = matrixA[9];
-    const a22 = matrixA[10];
-    const a23 = matrixA[11];
-    const a30 = matrixA[12];
-    const a31 = matrixA[13];
-    const a32 = matrixA[14];
-    const a33 = matrixA[15];
-    let b0 = matrixB[0];
-    let b1 = matrixB[1];
-    let b2 = matrixB[2];
-    let b3 = matrixB[3];
-    result[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    result[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    result[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    result[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    b0 = matrixB[4];
-    b1 = matrixB[5];
-    b2 = matrixB[6];
-    b3 = matrixB[7];
-    result[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    result[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    result[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    result[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    b0 = matrixB[8];
-    b1 = matrixB[9];
-    b2 = matrixB[10];
-    b3 = matrixB[11];
-    result[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    result[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    result[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    result[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    b0 = matrixB[12];
-    b1 = matrixB[13];
-    b2 = matrixB[14];
-    b3 = matrixB[15];
-    result[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    result[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    result[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    result[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    return result;
-}
+const resolvePluridPlaneData = plane => {
+    if (Array.isArray(plane)) {
+        const [route, component, options] = plane;
+        return Object.assign({
+            route: route,
+            component: component
+        }, options);
+    }
+    return plane;
+};
 
-function multiplyArrayOfMatrices(matrices) {
-    let inputMatrix = matrices[0];
-    for (let i = 1; i < matrices.length; i++) {
-        inputMatrix = multiplyMatrices$1(inputMatrix, matrices[i]);
+const resolvePluridRoutePlaneData = plane => {
+    if (Array.isArray(plane)) {
+        const [value, component, options] = plane;
+        return Object.assign({
+            value: value,
+            component: component
+        }, options);
     }
-    return inputMatrix;
-}
+    return plane;
+};
 
-function matrixArrayToCSSMatrix(array) {
-    return "matrix3d(" + array.join(",") + ")";
-}
+const getPluridPlaneIDByData = element => {
+    if (!element) {
+        return "";
+    }
+    const parent = element.parentElement;
+    if (parent && parent.dataset.pluridPlane) {
+        return parent.dataset.pluridPlane;
+    }
+    return getPluridPlaneIDByData(parent);
+};
 
-var index$e = Object.freeze({
-    __proto__: null,
-    rotateMatrix: rotateMatrix,
-    translateMatrix: translateMatrix$1,
-    scaleMatrix: scaleMatrix,
-    multiplyMatrices: multiplyMatrices$1,
-    multiplyArrayOfMatrices: multiplyArrayOfMatrices,
-    matrixArrayToCSSMatrix: matrixArrayToCSSMatrix
-});
+const extractPathname = location => {
+    const queryIndex = location.indexOf("?");
+    const noQueryPath = queryIndex === -1 ? location : location.substring(0, queryIndex);
+    const fragmentIndex = noQueryPath.indexOf("#:~:");
+    const noFragmentPath = fragmentIndex === -1 ? noQueryPath : noQueryPath.substring(0, fragmentIndex);
+    return noFragmentPath;
+};
 
-const multiplyMatrices = (m1, m2) => {
-    const result = [];
-    for (let i = 0; i < m1.length; i++) {
-        result[i] = [];
-        for (let j = 0; j < m2[0].length; j++) {
-            let sum = 0;
-            for (let k = 0; k < m1[0].length; k++) {
-                sum += m1[i][k] * m2[k][j];
-            }
-            result[i][j] = sum;
+const extractParametersAndMatch = (location, route) => {
+    const routeElements = splitPath(route);
+    const parameters = [];
+    routeElements.forEach((routeElement => {
+        if (routeElement[0] === ":") {
+            parameters.push(routeElement);
+        } else {
+            parameters.push("");
         }
+    }));
+    const {locationElements: locationElements, comparingPath: comparingPath} = computeComparingPath(location, parameters);
+    if (comparingPath !== route) {
+        return {
+            match: false,
+            parameters: {},
+            elements: locationElements
+        };
     }
-    return result;
+    const parametersValues = extractParametersValues(parameters, locationElements);
+    return {
+        match: true,
+        parameters: parametersValues,
+        elements: locationElements
+    };
 };
 
-const arrayToMatrix = array => {
-    const matrix = [];
-    for (let i = 0; i < array.length; i += 4) {
-        const row = [];
-        row.push(array[i]);
-        row.push(array[i + 1]);
-        row.push(array[i + 2]);
-        row.push(array[i + 3]);
-        matrix.push(row);
+const extractParametersValues = (parameters, pathElements) => {
+    const parametersValues = {};
+    parameters.forEach(((parameter, index) => {
+        if (parameter) {
+            const parameterKey = parameter.slice(1);
+            parametersValues[parameterKey] = pathElements[index];
+        }
+    }));
+    return parametersValues;
+};
+
+const computeComparingPath = (path, parameters) => {
+    const pathname = extractPathname(path);
+    const locationElements = splitPath(pathname);
+    const comparingPathElements = [ ...locationElements ];
+    for (const index of locationElements.keys()) {
+        if (parameters[index]) {
+            comparingPathElements[index] = parameters[index];
+        }
     }
-    return matrix;
+    const comparingPath = comparingPathElements.join("/");
+    return {
+        locationElements: locationElements,
+        comparingPath: comparingPath
+    };
 };
 
-const matrixToArray = matrix => matrix.flat();
+const splitPath = path => path.split("/").filter((i => i !== ""));
 
-const printMatrix = (matrix, name) => {
-    const normalize = value => {
-        if (value === 1 || value === 0) {
-            return value + "     ";
-        }
-        if (value > 0) {
-            return value.toFixed(2) + "  ";
+const extractQuery = path => {
+    const fragmentIndex = path.indexOf("#:~:");
+    const noFragmentPath = fragmentIndex === -1 ? path : path.substring(0, fragmentIndex);
+    const querySplit = noFragmentPath.split("?");
+    if (querySplit.length === 2) {
+        const queryValues = {};
+        const query = querySplit[1];
+        const queryItems = query.split("&");
+        for (const item of queryItems) {
+            const queryValue = item.split("=");
+            const id = queryValue[0];
+            const value = decodeURIComponent(queryValue[1]);
+            queryValues[id] = value;
         }
-        return value.toFixed(2) + " ";
-    };
-    console.log("matrix", name + ":");
-    for (const row of matrix) {
-        console.log(normalize(row[0]), normalize(row[1]), normalize(row[2]), normalize(row[3]));
+        return queryValues;
+    } else {
+        return {};
     }
-    console.log(`matrix3d(${matrix.flat().join(",")})`);
-    console.log();
 };
 
-const rotateXMatrix = angle => {
-    const x = Math.cos(angle);
-    const y = -1 * Math.sin(angle);
-    const z = Math.sin(angle);
-    const m = [ [ 1, 0, 0, 0 ], [ 0, x, y, 0 ], [ 0, z, x, 0 ], [ 0, 0, 0, 1 ] ];
-    return m;
-};
+const extractFragments = location => {
+    if (!location) {
+        return {
+            texts: [],
+            elements: []
+        };
+    }
+    const split = location.split("#:~:");
+    const fragmentsValues = split[1];
+    if (!fragmentsValues) {
+        return {
+            texts: [],
+            elements: []
+        };
+    }
+    const fragmentItems = fragmentsValues.split("&");
+    const textFragments = [];
+    const elementFragments = [];
+    for (const item of fragmentItems) {
+        const parsedFragment = parseFragment(item);
+        if (parsedFragment) {
+            switch (parsedFragment.type) {
+              case "text":
+                textFragments.push(parsedFragment);
+                break;
 
-const rotateYMatrix = angle => {
-    const x = Math.cos(angle);
-    const y = -1 * Math.sin(angle);
-    const z = Math.sin(angle);
-    const m = [ [ x, 0, z, 0 ], [ 0, 1, 0, 0 ], [ y, 0, x, 0 ], [ 0, 0, 0, 1 ] ];
-    return m;
+              case "element":
+                elementFragments.push(parsedFragment);
+                break;
+            }
+        }
+    }
+    return {
+        texts: textFragments,
+        elements: elementFragments
+    };
 };
 
-const rotateZMatrix = angle => {
-    const x = Math.cos(angle);
-    const y = -1 * Math.sin(angle);
-    const z = Math.sin(angle);
-    const m = [ [ x, y, 0, 0 ], [ z, x, 0, 0 ], [ 0, 0, 1, 0 ], [ 0, 0, 0, 1 ] ];
-    return m;
+const parseFragment = fragment => {
+    const fragmentData = fragment.split("=");
+    const fragmentType = fragmentData[0];
+    const fragmentValues = fragmentData[1];
+    switch (fragmentType.toLowerCase()) {
+      case "text":
+        {
+            const textValues = fragmentValues.split(",");
+            const textStart = textValues[0];
+            const textEnd = textValues[1];
+            const textOccurence = extractOccurence(textValues[2]);
+            if (!textStart) {
+                return;
+            }
+            return {
+                type: "text",
+                start: textStart,
+                end: textEnd || "",
+                occurence: textOccurence
+            };
+        }
+
+      case "element":
+        {
+            const elementValues = fragmentValues.split(",");
+            const elementID = elementValues[0];
+            const elementOccurence = extractOccurence(elementValues[1]);
+            if (!elementID) {
+                return;
+            }
+            return {
+                type: "element",
+                id: elementID,
+                occurence: elementOccurence
+            };
+        }
+    }
+    return undefined;
 };
 
-const translateMatrix = (x = 0, y = 0, z = 0) => {
-    const m = [ [ 1, 0, 0, 0 ], [ 0, 1, 0, 0 ], [ 0, 0, 1, 0 ], [ x, y, z, 1 ] ];
-    return m;
+const extractOccurence = occurence => {
+    if (!occurence) {
+        return 0;
+    }
+    const occurenceMatch = occurence.match(/\[(\d*)\]/);
+    const occurenceValue = occurenceMatch ? parseInt(occurenceMatch[1]) : 0;
+    return occurenceValue;
 };
 
-var index$d = Object.freeze({
-    __proto__: null,
-    multiplyMatrices: multiplyMatrices,
-    arrayToMatrix: arrayToMatrix,
-    matrixToArray: matrixToArray,
-    printMatrix: printMatrix,
-    rotateXMatrix: rotateXMatrix,
-    rotateYMatrix: rotateYMatrix,
-    rotateZMatrix: rotateZMatrix,
-    translateMatrix: translateMatrix
-});
+const stringInsertInitial = (value, insert) => {
+    if (!value.startsWith(insert)) {
+        value = insert + value;
+    }
+    return value;
+};
 
-function getMatrixValues(matrix3d) {
-    const matrixValues = matrix3d.split("(")[1].split(")")[0].split(",");
-    const matrixValuesInt = [];
-    for (let i = 0; i < matrixValues.length; i++) {
-        matrixValuesInt[i] = parseFloat(matrixValues[i]);
+const stringRemoveTrailing = (value, trail) => {
+    if (value.endsWith(trail)) {
+        value = value.slice(0, value.length - trail.length);
     }
-    return matrixValuesInt;
-}
+    return value;
+};
 
-function getRotationMatrix(matrix3d) {
-    const valuesMatrix = getMatrixValues(matrix3d);
-    const scale = getScalationValue(matrix3d);
-    if (valuesMatrix.length === 16) {
-        for (let i = 0; i < 11; i++) {
-            valuesMatrix[i] /= scale;
-        }
-    } else if (valuesMatrix.length === 6) {
-        for (let i = 0; i < 4; i++) {
-            valuesMatrix[i] /= scale;
-        }
-    }
-    const rotationMatrix = valuesMatrix;
-    return rotationMatrix;
-}
-
-function getTranslationMatrix(matrix3d) {
-    const valuesMatrix = getMatrixValues(matrix3d);
-    let translationMatrix;
-    if (valuesMatrix.length === 16) {
-        translationMatrix = getMatrixValues(matrix3d).slice(12, 15);
-    } else if (valuesMatrix.length === 6) {
-        translationMatrix = getMatrixValues(matrix3d).slice(4);
-    }
-    return translationMatrix;
-}
-
-function getScalationValue(matrix3d) {
-    const valuesMatrix = getMatrixValues(matrix3d);
-    let temp = 0;
-    let scale;
-    if (valuesMatrix.length === 16) {
-        const scaleMatrix = getMatrixValues(matrix3d).slice(0, 4);
-        scale = 0;
-        for (const el of scaleMatrix) {
-            scale += parseFloat(el) * parseFloat(el);
-        }
-        scale = parseFloat(Math.sqrt(scale).toPrecision(4));
-    } else if (valuesMatrix.length === 6) {
-        temp = valuesMatrix[0] * valuesMatrix[0] + valuesMatrix[1] * valuesMatrix[1];
-        scale = parseFloat(Math.sqrt(temp).toPrecision(4));
-    }
-    return scale;
-}
+const PATH_SEPARATOR = "/";
 
-function setTransform(rotationMatrix, translationMatrix, scalationMatrix) {
-    const transformMatrix = multiplyArrayOfMatrices([ translationMatrix, rotationMatrix, scalationMatrix ]);
-    return matrixArrayToCSSMatrix(transformMatrix);
-}
+const cleanupPath = value => {
+    value = stringInsertInitial(value, PATH_SEPARATOR);
+    value = stringRemoveTrailing(value, PATH_SEPARATOR);
+    return value;
+};
 
-function getTransformRotate(matrix3d) {
-    const pi = Math.PI;
-    const values = getRotationMatrix(matrix3d);
-    let rotateX = 0;
-    let rotateY = 0;
-    if (values.length === 6) {
-        const cosa = values[0];
-        const sina = values[1];
-        if (cosa === 1 && sina === 0) {
-            rotateX = Math.asin(sina);
-            rotateY = Math.acos(cosa);
-        }
+const computePlaneAddress = (plane, route, origin = "origin") => {
+    if (origin === "origin" && typeof location !== "undefined") {
+        origin = location.host;
     }
-    if (values.length === 16) {
-        const cosaX1 = values[5];
-        const sinaX3 = values[9];
-        if (sinaX3 <= 0) {
-            rotateX = Math.acos(cosaX1);
-        }
-        if (sinaX3 > 0) {
-            rotateX = 2 * pi - Math.acos(cosaX1);
-        }
-        const cosaY1 = values[0];
-        const sinaY2 = values[2];
-        if (sinaY2 <= 0) {
-            rotateY = Math.acos(cosaY1);
-        }
-        if (sinaY2 > 0) {
-            rotateY = 2 * pi - Math.acos(cosaY1);
-        }
-        rotateX = Math.atan2(values[9], values[5]);
-        rotateY = Math.atan2(values[2], values[0]);
+    const cleanPlane = extractPathname(plane);
+    const planeAddressType = checkPlaneAddressType(cleanPlane);
+    switch (planeAddressType) {
+      case "http":
+      case "https":
+      case "pttp":
+        return cleanPlane;
     }
-    return {
-        rotateX: rotateX,
-        rotateY: rotateY,
-        rotateZ: 0
-    };
-}
-
-function getTransformTranslate(matrix3d) {
-    const values = getTranslationMatrix(matrix3d);
-    const translateX = values[0];
-    const translateY = values[1];
-    const translateZ = values[2];
-    return {
-        translateX: translateX,
-        translateY: translateY,
-        translateZ: translateZ
-    };
-}
+    origin = stringRemoveTrailing(origin, "/");
+    const absolutePlane = isAbsolutePlane(plane);
+    const path = route && route !== "/" ? absolutePlane ? cleanupPath(cleanPlane) : cleanupPath(route) + cleanupPath(cleanPlane) : cleanupPath(cleanPlane);
+    const planeAddress = protocols.plurid + origin + path;
+    return planeAddress;
+};
 
-function getTransformScale(matrix3d) {
-    const scale = getScalationValue(matrix3d);
-    return {
-        scale: scale
-    };
-}
+const isAbsolutePlane = value => value[0] === "/";
 
-function rotatePlurid(matrix3d, direction = "", angleIncrement = .07) {
-    const transformRotate = getTransformRotate(matrix3d);
-    const rotateX = transformRotate.rotateX;
-    let rotateY = transformRotate.rotateY;
-    const rotateZ = transformRotate.rotateZ;
-    const transformTranslate = getTransformTranslate(matrix3d);
-    const translateX = transformTranslate.translateX;
-    const translateY = transformTranslate.translateY;
-    const translateZ = transformTranslate.translateZ;
-    const scale = getTransformScale(matrix3d).scale;
-    let valRotationMatrix = rotateMatrix(rotateX, rotateY, rotateZ);
-    const valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
-    const valScalationMatrix = scaleMatrix(scale);
-    if (direction === "left") {
-        rotateY -= angleIncrement;
-        valRotationMatrix = rotateMatrix(rotateX, rotateY);
+const checkPlaneAddressType = value => {
+    value = value.toLowerCase().trim();
+    if (value.startsWith(protocols.plurid)) {
+        return "pttp";
     }
-    if (direction === "right") {
-        rotateY += angleIncrement;
-        valRotationMatrix = rotateMatrix(rotateX, rotateY);
+    if (value.startsWith(protocols.https)) {
+        return HTTPS_PROTOCOL;
     }
-    if (direction === "up") {
-        rotateY -= angleIncrement;
-        valRotationMatrix = rotateMatrix(rotateX, rotateY);
+    if (value.startsWith(protocols.http)) {
+        return HTTP_PROTOCOL;
     }
-    if (direction === "down") {
-        rotateY += angleIncrement;
-        valRotationMatrix = rotateMatrix(rotateX, rotateY);
+    return "relative";
+};
+
+const removeTrailingSlash = value => {
+    if (value.endsWith("/") && value.length > 1) {
+        return value.slice(0, value.length - 1);
     }
-    const transformedMatrix3d = setTransform(valRotationMatrix, valTranslationMatrix, valScalationMatrix);
-    return transformedMatrix3d;
-}
+    return value;
+};
 
-function translatePlurid(matrix3d, direction = "", linearIncrement = 50) {
-    const transformRotate = getTransformRotate(matrix3d);
-    const rotateX = transformRotate.rotateX;
-    const rotateY = transformRotate.rotateY;
-    const rotateZ = transformRotate.rotateZ;
-    const transformTranslate = getTransformTranslate(matrix3d);
-    let translateX = transformTranslate.translateX;
-    let translateY = transformTranslate.translateY;
-    const translateZ = transformTranslate.translateZ;
-    const scale = getTransformScale(matrix3d).scale;
-    const valRotationMatrix = rotateMatrix(rotateX, rotateY, rotateZ);
-    let valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
-    const valScalationMatrix = scaleMatrix(scale);
-    scale < .5 ? linearIncrement = 50 : linearIncrement = 30;
-    if (direction === "left") {
-        translateX += linearIncrement;
-        valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
+const cleanPathValue = value => {
+    const queryStart = value.indexOf("?");
+    if (queryStart < 0) {
+        return removeTrailingSlash(value);
     }
-    if (direction === "right") {
-        translateX -= linearIncrement;
-        valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
+    return removeTrailingSlash(value.substring(0, queryStart));
+};
+
+const checkParameterLength = (parameter, length, compareType) => {
+    const parameterLength = parameter.length;
+    switch (compareType) {
+      case compareTypes.equal:
+        return parameterLength === length;
+
+      case compareTypes.equalLessThan:
+        return parameterLength <= length;
+
+      case compareTypes.lessThan:
+        return parameterLength < length;
+
+      case compareTypes.equalGreaterThan:
+        return parameterLength >= length;
+
+      case compareTypes.greaterThan:
+        return parameterLength > length;
+
+      default:
+        return parameterLength <= length;
     }
-    if (direction === "up") {
-        translateY += linearIncrement;
-        valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
+};
+
+const checkValidPath = (validationParameters, parameters) => {
+    if (validationParameters) {
+        for (const [parameterKey, parameterData] of Object.entries(validationParameters)) {
+            const {length: length, lengthType: lengthType, startsWith: startsWith, endsWith: endsWith, includes: includes} = parameterData;
+            const paramaterValue = parameters[parameterKey];
+            if (!paramaterValue) {
+                return false;
+            }
+            if (startsWith && !paramaterValue.startsWith(startsWith)) {
+                return false;
+            }
+            if (endsWith && !paramaterValue.endsWith(endsWith)) {
+                return false;
+            }
+            if (includes && !includes.includes(paramaterValue)) {
+                return false;
+            }
+            if (length) {
+                const validLength = checkParameterLength(paramaterValue, length, lengthType);
+                return validLength;
+            }
+        }
     }
-    if (direction === "down") {
-        translateY -= linearIncrement;
-        valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
+    return true;
+};
+
+const cleanPathElement = path => {
+    if (path[0] === "/") {
+        return path.slice(1);
     }
-    const transformedMatrix3d = setTransform(valRotationMatrix, valTranslationMatrix, valScalationMatrix);
-    return transformedMatrix3d;
-}
+    return path;
+};
 
-function scalePlurid(matrix3d, direction = "", scaleIncrement = .05) {
-    const transformRotate = getTransformRotate(matrix3d);
-    const rotateX = transformRotate.rotateX;
-    const rotateY = transformRotate.rotateY;
-    const rotateZ = transformRotate.rotateZ;
-    const transformTranslate = getTransformTranslate(matrix3d);
-    const translateX = transformTranslate.translateX;
-    const translateY = transformTranslate.translateY;
-    const translateZ = transformTranslate.translateZ;
-    let scale = getTransformScale(matrix3d).scale;
-    const valRotationMatrix = rotateMatrix(rotateX, rotateY, rotateZ);
-    const valTranslationMatrix = translateMatrix$1(translateX, translateY, translateZ);
-    let valScalationMatrix = scaleMatrix(scale);
-    if (direction === "up") {
-        scale -= scaleIncrement;
-        if (scale < .1) {
-            scale = .1;
+var index$a = Object.freeze({
+    __proto__: null,
+    cleanPathElement: cleanPathElement
+});
+
+const mapPathsToRoutes = (paths, view) => {
+    const routes = [];
+    for (const [key, path] of Object.entries(paths)) {
+        const pathView = view[key];
+        if (pathView) {
+            const route = {
+                value: ""
+            };
+            routes.push(route);
         }
-        valScalationMatrix = scaleMatrix(scale);
     }
-    if (direction === "down") {
-        scale += scaleIncrement;
-        if (scale > 4) {
-            scale = 4;
+    return routes;
+};
+
+const pluridLinkPathDivider = route => {
+    const windowProtocol = typeof window === "undefined" ? "http" : window.location.protocol.replace(":", "");
+    const windowHost = typeof window === "undefined" ? "localhost:63000" : window.location.host;
+    const split = route.split("://").filter((value => value !== "")).map((value => cleanPathElement(value)));
+    let protocol = windowProtocol;
+    const host = {
+        value: windowHost,
+        controlled: false
+    };
+    const path = {
+        value: "",
+        parameters: {},
+        query: {}
+    };
+    const space = {
+        value: "",
+        parameters: {},
+        query: {}
+    };
+    const universe = {
+        value: "",
+        parameters: {},
+        query: {}
+    };
+    const cluster = {
+        value: "",
+        parameters: {},
+        query: {}
+    };
+    const plane = {
+        value: "",
+        parameters: {},
+        query: {},
+        fragments: {
+            texts: [],
+            elements: []
         }
-        valScalationMatrix = scaleMatrix(scale);
+    };
+    const valid = false;
+    if (split.length === 0 || split.length > 7) {
+        const url = {
+            protocol: {
+                value: protocol,
+                secure: true
+            },
+            host: host,
+            path: path,
+            space: space,
+            universe: universe,
+            cluster: cluster,
+            plane: plane,
+            valid: valid
+        };
+        return url;
+    }
+    if (route.startsWith("/://")) {
+        const routeSplit = split.slice(1);
+        switch (routeSplit.length) {
+          case 1:
+            path.value = routeSplit[0];
+            break;
+
+          case 5:
+            path.value = routeSplit[0];
+            space.value = routeSplit[1];
+            universe.value = routeSplit[2];
+            cluster.value = routeSplit[3];
+            plane.value = routeSplit[4];
+            break;
+        }
+        const url = {
+            protocol: {
+                value: protocol,
+                secure: true
+            },
+            host: host,
+            path: path,
+            space: space,
+            universe: universe,
+            cluster: cluster,
+            plane: plane,
+            valid: true
+        };
+        return url;
     }
-    const transformedMatrix3d = setTransform(valRotationMatrix, valTranslationMatrix, valScalationMatrix);
-    return transformedMatrix3d;
-}
+    if (split[0] !== "http" && split[0] !== "https" && split[0] !== "chrome-extension") {
+        switch (split.length) {
+          case 1:
+            plane.value = split[0];
+            break;
 
-var index$c = Object.freeze({
-    __proto__: null,
-    getMatrixValues: getMatrixValues,
-    getRotationMatrix: getRotationMatrix,
-    getTranslationMatrix: getTranslationMatrix,
-    getScalationValue: getScalationValue,
-    setTransform: setTransform,
-    getTransformRotate: getTransformRotate,
-    getTransformTranslate: getTransformTranslate,
-    getTransformScale: getTransformScale,
-    rotatePlurid: rotatePlurid,
-    translatePlurid: translatePlurid,
-    scalePlurid: scalePlurid
-});
+          case 2:
+            cluster.value = split[0];
+            plane.value = split[1];
+            break;
 
-var index$b = Object.freeze({
-    __proto__: null,
-    general: index$d,
-    matrix3d: index$c
-});
+          case 3:
+            universe.value = split[0];
+            cluster.value = split[1];
+            plane.value = split[2];
+            break;
 
-var index$a = Object.freeze({
-    __proto__: null,
-    direction: index$g,
-    matrix: index$e,
-    quaternion: index$f,
-    transform: index$b
-});
+          case 4:
+            space.value = split[0];
+            universe.value = split[1];
+            cluster.value = split[2];
+            plane.value = split[3];
+            break;
 
-const internatiolate = (lamguage, field) => internationalization[lamguage][field];
+          case 5:
+            path.value = split[0];
+            space.value = split[1];
+            universe.value = split[2];
+            cluster.value = split[3];
+            plane.value = split[4];
+            break;
 
-const resolvePluridPlaneData = plane => {
-    if (Array.isArray(plane)) {
-        const [route, component, options] = plane;
-        return Object.assign({
-            route: route,
-            component: component
-        }, options);
-    }
-    return plane;
-};
+          case 6:
+            host.value = split[0];
+            path.value = split[1];
+            space.value = split[2];
+            universe.value = split[3];
+            cluster.value = split[4];
+            plane.value = split[5];
+            break;
 
-const resolvePluridRoutePlaneData = plane => {
-    if (Array.isArray(plane)) {
-        const [value, component, options] = plane;
-        return Object.assign({
-            value: value,
-            component: component
-        }, options);
-    }
-    return plane;
-};
+          default:
+            const url = {
+                protocol: {
+                    value: protocol,
+                    secure: true
+                },
+                host: host,
+                path: path,
+                space: space,
+                universe: universe,
+                cluster: cluster,
+                plane: plane,
+                valid: valid
+            };
+            return url;
+        }
+    } else {
+        switch (split.length) {
+          case 3:
+            protocol = split[0];
+            host.value = split[1];
+            path.value = split[2];
+            break;
 
-const createInternalStatePlane = plane => {
-    const planeData = resolvePluridPlaneData(plane);
-    const statePlane = {
-        id: uuid.generate(),
-        path: planeData.route
-    };
-    return statePlane;
-};
+          case 7:
+            protocol = split[0];
+            host.value = split[1];
+            path.value = split[2];
+            space.value = split[3];
+            universe.value = split[4];
+            cluster.value = split[5];
+            plane.value = split[6];
+            break;
 
-const createInternalContextPlane = plane => {
-    const planeData = resolvePluridPlaneData(plane);
-    const {route: route, component: component} = planeData;
-    const contextPlane = {
-        id: uuid.generate(),
-        path: route,
-        component: component
+          default:
+            const url = {
+                protocol: {
+                    value: protocol,
+                    secure: true
+                },
+                host: host,
+                path: path,
+                space: space,
+                universe: universe,
+                cluster: cluster,
+                plane: plane,
+                valid: valid
+            };
+            return url;
+        }
+    }
+    const url = {
+        protocol: {
+            value: protocol,
+            secure: true
+        },
+        host: host,
+        path: path,
+        space: space,
+        universe: universe,
+        cluster: cluster,
+        plane: plane,
+        valid: true
     };
-    return contextPlane;
+    return url;
 };
 
-const getPluridPlaneIDByData = element => {
-    if (!element) {
-        return "";
-    }
-    const parent = element.parentElement;
-    if (parent && parent.dataset.pluridPlane) {
-        return parent.dataset.pluridPlane;
+const resolveRoute = (route, protocol, host) => {
+    const windowProtocol = typeof window === "undefined" ? protocol || "http" : window.location.protocol.replace(":", "");
+    const windowHost = typeof window === "undefined" ? host || "localhost:63000" : window.location.host;
+    const divisions = pluridLinkPathDivider(route);
+    const defaultPathname = typeof window !== "undefined" ? window.location.pathname === "/" ? "p" : window.location.pathname.slice(1) : divisions.path.value ? divisions.path.value : "p";
+    const protocolDivision = divisions.protocol.value || windowProtocol;
+    const hostDivision = divisions.host.value ? divisions.host : {
+        value: windowHost,
+        controlled: true
+    };
+    const path = divisions.path.value ? divisions.path : {
+        value: defaultPathname,
+        parameters: {},
+        query: {}
+    };
+    const space = divisions.space.value ? divisions.space : {
+        value: "s",
+        parameters: {},
+        query: {}
+    };
+    const universe = divisions.universe.value ? divisions.universe : {
+        value: "u",
+        parameters: {},
+        query: {}
+    };
+    const cluster = divisions.cluster.value ? divisions.cluster : {
+        value: "c",
+        parameters: {},
+        query: {}
+    };
+    const plane = divisions.plane;
+    const separator = "://";
+    if (!plane.value && route !== "/") {
+        const resolvers = [ protocolDivision, hostDivision.value, path.value ];
+        const absoluteRoute = resolvers.join(separator);
+        return {
+            protocol: protocolDivision,
+            host: hostDivision,
+            path: path,
+            space: space,
+            universe: universe,
+            cluster: cluster,
+            plane: plane,
+            route: absoluteRoute
+        };
     }
-    return getPluridPlaneIDByData(parent);
+    [ protocolDivision, hostDivision.value, path.value, space.value, universe.value, cluster.value, cleanPathElement(plane.value) ];
+    return {
+        protocol: "",
+        host: "",
+        path: path,
+        space: "",
+        universe: "",
+        cluster: "",
+        plane: "",
+        route: route
+    };
 };
 
 class IsoMatcher {
@@ -1664,10 +1664,10 @@ var index$9 = Object.freeze({
 });
 
 class PluridPlanesRegistrar {
-    constructor(planes) {
+    constructor(planes, origin = "origin") {
         this.isoMatcher = new IsoMatcher({
             planes: planes
-        });
+        }, origin);
     }
     register(planes) {
         this.isoMatcher.index({
@@ -1718,7 +1718,7 @@ class PluridPlanesRegistrar {
     }
 }
 
-const registerPlanes = (planes, planesRegistrar) => {
+const registerPlanes = (planes, planesRegistrar, origin = "origin") => {
     if (!planes) {
         return;
     }
@@ -1730,7 +1730,7 @@ const registerPlanes = (planes, planesRegistrar) => {
         return;
     }
     if (typeof window.__pluridPlanesRegistrar__ === "undefined") {
-        const pluridPlanesRegistrar = new PluridPlanesRegistrar;
+        const pluridPlanesRegistrar = new PluridPlanesRegistrar([], origin);
         window.__pluridPlanesRegistrar__ = pluridPlanesRegistrar;
         window.__pluridPlanesRegistrar__.register(planes);
         return;
@@ -1779,8 +1779,6 @@ var index$8 = Object.freeze({
     __proto__: null,
     resolvePluridPlaneData: resolvePluridPlaneData,
     resolvePluridRoutePlaneData: resolvePluridRoutePlaneData,
-    createInternalStatePlane: createInternalStatePlane,
-    createInternalContextPlane: createInternalContextPlane,
     getPluridPlaneIDByData: getPluridPlaneIDByData,
     registerPlanes: registerPlanes,
     getPlanesRegistrar: getPlanesRegistrar,
@@ -2110,10 +2108,10 @@ var index$5 = Object.freeze({
     computeZigZagLayout: computeZigZagLayout
 });
 
-const resolveViewItem = (planes, view, configuration) => {
+const resolveViewItem = (planes, view, configuration, origin = "origin") => {
     const {protocol: protocol, host: host} = configuration.network;
     const viewData = typeof view === "string" ? view : view.plane;
-    const viewAddress = computePlaneAddress(viewData);
+    const viewAddress = computePlaneAddress(viewData, undefined, origin);
     const iPlanes = planes.values();
     const pluridPlanes = [];
     for (const iPlane of iPlanes) {
@@ -2125,7 +2123,7 @@ const resolveViewItem = (planes, view, configuration) => {
     }
     const isoMatcher = new IsoMatcher({
         planes: pluridPlanes
-    });
+    }, origin);
     const match = isoMatcher.match(viewData);
     if (match) {
         const route = match.match.value;
@@ -2189,10 +2187,10 @@ const resolveViewItem = (planes, view, configuration) => {
     return;
 };
 
-const computeSpaceTree = (planes, view, configuration) => {
+const computeSpaceTree = (planes, view, configuration, origin = "origin") => {
     const treePlanes = [];
     for (const viewItem of view) {
-        const treePlane = resolveViewItem(planes, viewItem, configuration);
+        const treePlane = resolveViewItem(planes, viewItem, configuration, origin);
         if (treePlane) {
             treePlanes.push(treePlane);
         }
@@ -2276,14 +2274,14 @@ const assignPagesFromView = (planes, view) => {
     return tree;
 };
 
-const updateTreePlane = (tree, updatedPage) => {
+const updateTreePlane = (tree, updatedPlane) => {
     const updatedTree = tree.map((treePlane => {
-        if (treePlane.planeID === updatedPage.planeID) {
-            return updatedPage;
+        if (treePlane.planeID === updatedPlane.planeID) {
+            return updatedPlane;
         }
         if (treePlane.children) {
-            const pageTree = updateTreePlane(treePlane.children, updatedPage);
-            treePlane.children = pageTree;
+            const children = updateTreePlane(treePlane.children, updatedPlane);
+            treePlane.children = children;
             return treePlane;
         }
         return treePlane;
@@ -2291,7 +2289,7 @@ const updateTreePlane = (tree, updatedPage) => {
     return updatedTree;
 };
 
-const updateTreeWithNewPlane = (planeRoute, parentPlaneID, linkCoordinates, tree, planesRegistry, configuration) => {
+const updateTreeWithNewPlane = (planeRoute, parentPlaneID, linkCoordinates, tree, planesRegistry, configuration, hostname = "origin") => {
     const parentPlane = getTreePlaneByPlaneID(tree, parentPlaneID);
     if (!parentPlane) {
         return {
@@ -2300,7 +2298,7 @@ const updateTreeWithNewPlane = (planeRoute, parentPlaneID, linkCoordinates, tree
         };
     }
     const location = computePluridPlaneLocation(linkCoordinates, parentPlane);
-    const treePlane = resolveViewItem(planesRegistry, planeRoute, configuration);
+    const treePlane = resolveViewItem(planesRegistry, planeRoute, configuration, hostname);
     if (!treePlane) {
         return {
             pluridPlaneID: "",
@@ -2334,6 +2332,24 @@ const updateTreeWithNewPlane = (planeRoute, parentPlaneID, linkCoordinates, tree
     };
 };
 
+const updatePlaneLocation = (tree, parentPlaneID, planeID, linkCoordinates) => {
+    const parentPlane = getTreePlaneByPlaneID(tree, parentPlaneID);
+    const plane = getTreePlaneByPlaneID(tree, planeID);
+    if (!parentPlane || !plane) {
+        return tree;
+    }
+    const location = computePluridPlaneLocation(linkCoordinates, parentPlane);
+    plane.location = {
+        translateX: location.x,
+        translateY: location.y,
+        translateZ: location.z,
+        rotateX: 0,
+        rotateY: parentPlane.location.rotateY + PLANE_DEFAULT_ANGLE
+    };
+    const updatedTree = updateTreePlane(tree, plane);
+    return updatedTree;
+};
+
 const updateTreeWithNewPage = (tree, treePageParentPlaneID, pagePath, pageID, linkCoordinates, parameters) => {
     const treePageParent = getTreePlaneByPlaneID(tree, treePageParentPlaneID);
     if (treePageParent) {
@@ -2448,21 +2464,35 @@ const toggleChildren = children => {
     return updatedChildren;
 };
 
-const togglePlaneFromTree = (tree, pluridPlaneID) => {
+const toggleAllChildren = (tree, show) => {
+    for (const plane of tree) {
+        if (plane.children) {
+            plane.children = toggleAllChildren(plane.children, show);
+        }
+        plane.show = show;
+    }
+    return tree;
+};
+
+const togglePlaneFromTree = (tree, pluridPlaneID, forceShow) => {
     const updatedTree = [];
     let updatedPlane;
     for (const plane of tree) {
         if (plane.planeID === pluridPlaneID) {
+            const show = forceShow !== null && forceShow !== void 0 ? forceShow : !plane.show;
             const treeUpdatedPlane = Object.assign(Object.assign({}, plane), {
-                show: !plane.show,
-                children: []
+                show: show
             });
+            if (treeUpdatedPlane.children) {
+                const children = toggleAllChildren(treeUpdatedPlane.children, show);
+                treeUpdatedPlane.children = children;
+            }
             updatedTree.push(treeUpdatedPlane);
             updatedPlane = Object.assign({}, treeUpdatedPlane);
             continue;
         }
         if (plane.children) {
-            const {updatedTree: childrenUpdatedTree, updatedPlane: childrenUpdatedPlane} = togglePlaneFromTree(plane.children, pluridPlaneID);
+            const {updatedTree: childrenUpdatedTree, updatedPlane: childrenUpdatedPlane} = togglePlaneFromTree(plane.children, pluridPlaneID, forceShow);
             plane.children = [ ...childrenUpdatedTree ];
             updatedTree.push(plane);
             if (childrenUpdatedPlane) {
@@ -2478,6 +2508,46 @@ const togglePlaneFromTree = (tree, pluridPlaneID) => {
     };
 };
 
+const getTreePlaneByID = (stateTree, id) => {
+    if (!id) {
+        return;
+    }
+    for (const plane of stateTree) {
+        if (plane.planeID === id) {
+            return plane;
+        }
+        if (plane.children) {
+            const found = getTreePlaneByID(plane.children, id);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return;
+};
+
+const removeRootFromTree = (tree, pluridPlaneID) => {
+    const updatedTree = tree.filter((plane => plane.planeID !== pluridPlaneID));
+    return {
+        updatedTree: updatedTree
+    };
+};
+
+const removePlaneFromTree = (tree, pluridPlaneID) => {
+    const updatedTree = [];
+    for (const plane of tree) {
+        if (plane.planeID === pluridPlaneID) {
+            continue;
+        }
+        if (plane.children) {
+            const children = removePlaneFromTree(plane.children, pluridPlaneID);
+            plane.children = children;
+        }
+        updatedTree.push(plane);
+    }
+    return updatedTree;
+};
+
 var logic = Object.freeze({
     __proto__: null,
     resolveViewItem: resolveViewItem,
@@ -2487,19 +2557,25 @@ var logic = Object.freeze({
     assignPagesFromView: assignPagesFromView,
     updateTreePlane: updateTreePlane,
     updateTreeWithNewPlane: updateTreeWithNewPlane,
+    updatePlaneLocation: updatePlaneLocation,
     updateTreeWithNewPage: updateTreeWithNewPage,
     removePageFromTree: removePageFromTree,
     toggleChildren: toggleChildren,
-    togglePlaneFromTree: togglePlaneFromTree
+    toggleAllChildren: toggleAllChildren,
+    togglePlaneFromTree: togglePlaneFromTree,
+    getTreePlaneByID: getTreePlaneByID,
+    removeRootFromTree: removeRootFromTree,
+    removePlaneFromTree: removePlaneFromTree
 });
 
 class Tree {
-    constructor(data) {
+    constructor(data, origin = "origin") {
         this.data = data;
+        this.origin = origin;
     }
     compute() {
         const {planes: planes, view: view, configuration: configuration} = this.data;
-        return computeSpaceTree(planes, view, configuration);
+        return computeSpaceTree(planes, view, configuration, this.origin);
     }
 }
 
@@ -2567,15 +2643,15 @@ var index$2 = Object.freeze({
     view: index$3
 });
 
-const resolveSpace = (view, configuration, planesRegistrar, currentState, localState, precomputedState, contextState) => {
+const resolveSpace = (view, configuration, planesRegistrar, currentState, localState, precomputedState, contextState, hostname = "origin") => {
     const registeredPlanes = getRegisteredPlanes(planesRegistrar);
     const spaceTree = new Tree({
         planes: registeredPlanes,
         configuration: configuration,
         view: view
-    });
+    }, hostname);
     const computedTree = spaceTree.compute();
-    const stateSpace = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({
+    const stateSpace = Object.assign(Object.assign(Object.assign(Object.assign({
         loading: true,
         animatedTransform: false,
         transformTime: 450,
@@ -2605,12 +2681,10 @@ const resolveSpace = (view, configuration, planesRegistrar, currentState, localS
                 z: 0
             }
         },
-        culledView: []
-    }, precomputedState === null || precomputedState === void 0 ? void 0 : precomputedState.space), contextState === null || contextState === void 0 ? void 0 : contextState.space), localState === null || localState === void 0 ? void 0 : localState.space), currentState === null || currentState === void 0 ? void 0 : currentState.space), {
+        culledView: [],
         view: view,
-        initialTree: computedTree,
         tree: computedTree
-    });
+    }, precomputedState === null || precomputedState === void 0 ? void 0 : precomputedState.space), contextState === null || contextState === void 0 ? void 0 : contextState.space), localState === null || localState === void 0 ? void 0 : localState.space), currentState === null || currentState === void 0 ? void 0 : currentState.space);
     if (currentState) {
         stateSpace.translationX = currentState.space.translationX;
         stateSpace.translationY = currentState.space.translationY;
@@ -2658,10 +2732,15 @@ const resolveThemes = (configuration, precomputedState) => {
     return stateThemes;
 };
 
-const compute = (view, configuration, planesRegistrar, currentState, localState, precomputedState, contextState) => {
-    const specifiedConfiguration = merge(configuration);
-    const stateConfiguration = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, specifiedConfiguration), precomputedState === null || precomputedState === void 0 ? void 0 : precomputedState.configuration), contextState === null || contextState === void 0 ? void 0 : contextState.configuration), localState === null || localState === void 0 ? void 0 : localState.configuration), currentState === null || currentState === void 0 ? void 0 : currentState.configuration);
-    const stateSpace = resolveSpace(view, stateConfiguration, planesRegistrar, currentState, localState, precomputedState, contextState);
+const compute = (view, configuration, planesRegistrar, currentState, localState, precomputedState, contextState, hostname = "origin") => {
+    let stateConfiguration = merge(configuration);
+    const configurations = [ precomputedState === null || precomputedState === void 0 ? void 0 : precomputedState.configuration, contextState === null || contextState === void 0 ? void 0 : contextState.configuration, localState === null || localState === void 0 ? void 0 : localState.configuration, currentState === null || currentState === void 0 ? void 0 : currentState.configuration ];
+    for (const configuration of configurations) {
+        if (configuration) {
+            stateConfiguration = merge(configuration);
+        }
+    }
+    const stateSpace = resolveSpace(view, stateConfiguration, planesRegistrar, currentState, localState, precomputedState, contextState, hostname);
     const stateThemes = resolveThemes(stateConfiguration, precomputedState);
     const state = {
         configuration: Object.assign({}, stateConfiguration),
@@ -2722,5 +2801,5 @@ const pluridRouterNavigate = path => {
     window.dispatchEvent(event);
 };
 
-export { cleanTemplate, index$h as general, index$a as interaction, internatiolate, index$8 as planes, pluridRouterNavigate, index$9 as routing, index$2 as space, index as state, index$j as utilities };
+export { cleanTemplate, index$i as general, index$b as interaction, internatiolate, index$8 as planes, pluridRouterNavigate, index$9 as routing, index$2 as space, index as state, index$a as utilities };
 //# sourceMappingURL=index.es.js.map