senangwebs-aframe-editor 1.6.5

package/src/lib/shortcuts.js

@@ -0,0 +1,211 @@
+import Events from './Events';
+import {
+  removeSelectedEntity,
+  cloneSelectedEntity,
+  cloneEntity
+} from './entity';
+import { getOS } from './utils';
+
+const os = getOS();
+
+function shouldCaptureKeyEvent(event) {
+  return (
+    event.target.closest('#cameraToolbar') ||
+    (event.target.tagName !== 'INPUT' && event.target.tagName !== 'TEXTAREA')
+  );
+}
+
+export const Shortcuts = {
+  enabled: false,
+  shortcuts: {
+    default: {},
+    modules: {}
+  },
+  onKeyUp: function (event) {
+    if (!shouldCaptureKeyEvent(event) || !AFRAME.INSPECTOR.opened) {
+      return;
+    }
+
+    var keyCode = event.keyCode;
+
+    // h: help
+    if (keyCode === 72) {
+      Events.emit('openhelpmodal');
+    }
+
+    // esc: unselect entity
+    if (keyCode === 27) {
+      if (this.inspector.selectedEntity) {
+        this.inspector.selectEntity(null);
+      }
+    }
+
+    // w: translate
+    if (keyCode === 87) {
+      Events.emit('transformmodechange', 'translate');
+    }
+
+    // e: rotate
+    if (keyCode === 69) {
+      Events.emit('transformmodechange', 'rotate');
+    }
+
+    // r: scale
+    if (keyCode === 82) {
+      Events.emit('transformmodechange', 'scale');
+    }
+
+    // o: transform space
+    if (keyCode === 79) {
+      Events.emit('transformspacechange');
+    }
+
+    // g: toggle grid
+    if (keyCode === 71) {
+      Events.emit('togglegrid');
+    }
+
+    // n: new entity
+    if (keyCode === 78) {
+      Events.emit('entitycreate', { element: 'a-entity', components: {} });
+    }
+
+    // backspace & delete: remove selected entity
+    if (keyCode === 8 || keyCode === 46) {
+      removeSelectedEntity();
+    }
+
+    // d: clone selected entity
+    if (keyCode === 68) {
+      cloneSelectedEntity();
+    }
+
+    // f: Focus on selected entity.
+    if (keyCode === 70) {
+      const selectedEntity = AFRAME.INSPECTOR.selectedEntity;
+      if (selectedEntity !== undefined && selectedEntity !== null) {
+        Events.emit('objectfocus', selectedEntity.object3D);
+      }
+    }
+
+    if (keyCode === 49) {
+      Events.emit('cameraperspectivetoggle');
+    } else if (keyCode === 50) {
+      Events.emit('cameraorthographictoggle', 'left');
+    } else if (keyCode === 51) {
+      Events.emit('cameraorthographictoggle', 'right');
+    } else if (keyCode === 52) {
+      Events.emit('cameraorthographictoggle', 'top');
+    } else if (keyCode === 53) {
+      Events.emit('cameraorthographictoggle', 'bottom');
+    } else if (keyCode === 54) {
+      Events.emit('cameraorthographictoggle', 'back');
+    } else if (keyCode === 55) {
+      Events.emit('cameraorthographictoggle', 'front');
+    }
+
+    for (var moduleName in this.shortcuts.modules) {
+      var shortcutsModule = this.shortcuts.modules[moduleName];
+      if (
+        shortcutsModule[keyCode] &&
+        (!shortcutsModule[keyCode].mustBeActive ||
+          (shortcutsModule[keyCode].mustBeActive &&
+            AFRAME.INSPECTOR.modules[moduleName].active))
+      ) {
+        this.shortcuts.modules[moduleName][keyCode].callback();
+      }
+    }
+  },
+  onKeyDown: function (event) {
+    if (!shouldCaptureKeyEvent(event) || !AFRAME.INSPECTOR.opened) {
+      return;
+    }
+
+    if (
+      (event.ctrlKey && os !== 'macos') ||
+      (event.metaKey && os === 'macos')
+    ) {
+      if (
+        AFRAME.INSPECTOR.selectedEntity &&
+        document.activeElement.tagName !== 'INPUT'
+      ) {
+        // c: copy selected entity
+        if (event.keyCode === 67) {
+          AFRAME.INSPECTOR.entityToCopy = AFRAME.INSPECTOR.selectedEntity;
+        }
+
+        // v: paste copied entity
+        if (event.keyCode === 86) {
+          cloneEntity(AFRAME.INSPECTOR.entityToCopy);
+        }
+      }
+
+      // s: focus search input
+      if (event.keyCode === 83) {
+        event.preventDefault();
+        event.stopPropagation();
+        document.getElementById('filter').focus();
+      }
+    }
+
+    // 0: toggle sidebars visibility
+    if (event.keyCode === 48) {
+      Events.emit('togglesidebar', { which: 'all' });
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  },
+  enable: function () {
+    if (this.enabled) {
+      this.disable();
+    }
+
+    window.addEventListener('keydown', this.onKeyDown, false);
+    window.addEventListener('keyup', this.onKeyUp, false);
+    this.enabled = true;
+  },
+  disable: function () {
+    window.removeEventListener('keydown', this.onKeyDown);
+    window.removeEventListener('keyup', this.onKeyUp);
+    this.enabled = false;
+  },
+  checkModuleShortcutCollision: function (keyCode, moduleName, mustBeActive) {
+    if (
+      this.shortcuts.modules[moduleName] &&
+      this.shortcuts.modules[moduleName][keyCode]
+    ) {
+      console.warn(
+        'Keycode <%s> already registered as shortcut within the same module',
+        keyCode
+      );
+    }
+  },
+  registerModuleShortcut: function (
+    keyCode,
+    callback,
+    moduleName,
+    mustBeActive
+  ) {
+    if (this.checkModuleShortcutCollision(keyCode, moduleName, mustBeActive)) {
+      return;
+    }
+
+    if (!this.shortcuts.modules[moduleName]) {
+      this.shortcuts.modules[moduleName] = {};
+    }
+
+    if (mustBeActive !== false) {
+      mustBeActive = true;
+    }
+
+    this.shortcuts.modules[moduleName][keyCode] = {
+      callback,
+      mustBeActive
+    };
+  },
+  init: function (inspector) {
+    this.inspector = inspector;
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onKeyUp = this.onKeyUp.bind(this);
+  }
+};

package/src/lib/utils.js

@@ -0,0 +1,118 @@
+export function getNumber(value) {
+  return parseFloat(value.toFixed(3));
+}
+
+export function getMajorVersion(version) {
+  var major = version.split('.');
+  var clean = false;
+  for (var i = 0; i < major.length; i++) {
+    if (clean) {
+      major[i] = 0;
+    } else if (major[i] !== '0') {
+      clean = true;
+    }
+  }
+  return major.join('.');
+}
+
+export function equal(var1, var2) {
+  var keys1;
+  var keys2;
+  var type1 = typeof var1;
+  var type2 = typeof var2;
+  if (type1 !== type2) {
+    return false;
+  }
+  if (type1 !== 'object' || var1 === null || var2 === null) {
+    return var1 === var2;
+  }
+  keys1 = Object.keys(var1);
+  keys2 = Object.keys(var2);
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (var i = 0; i < keys1.length; i++) {
+    if (!equal(var1[keys1[i]], var2[keys2[i]])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function getOS() {
+  var userAgent = window.navigator.userAgent;
+  var platform = window.navigator.platform;
+  var macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'];
+  var windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];
+  var iosPlatforms = ['iPhone', 'iPad', 'iPod'];
+  var os = null;
+
+  if (macosPlatforms.indexOf(platform) !== -1) {
+    os = 'macos';
+  } else if (iosPlatforms.indexOf(platform) !== -1) {
+    os = 'ios';
+  } else if (windowsPlatforms.indexOf(platform) !== -1) {
+    os = 'windows';
+  } else if (/Android/.test(userAgent)) {
+    os = 'android';
+  } else if (!os && /Linux/.test(platform)) {
+    os = 'linux';
+  }
+
+  return os;
+}
+
+export function injectCSS(url) {
+  var link = document.createElement('link');
+  link.href = url;
+  link.type = 'text/css';
+  link.rel = 'stylesheet';
+  link.media = 'screen,print';
+  link.setAttribute('data-aframe-inspector', 'style');
+  document.head.appendChild(link);
+}
+
+export function injectJS(url, onLoad, onError) {
+  var link = document.createElement('script');
+  link.src = url;
+  link.charset = 'utf-8';
+  link.setAttribute('data-aframe-inspector', 'style');
+
+  if (onLoad) {
+    link.addEventListener('load', onLoad);
+  }
+
+  if (onError) {
+    link.addEventListener('error', onError);
+  }
+
+  document.head.appendChild(link);
+}
+
+export function saveString(text, filename, mimeType) {
+  saveBlob(new Blob([text], { type: mimeType }), filename);
+}
+
+export function saveBlob(blob, filename) {
+  var link = document.createElement('a');
+  link.style.display = 'none';
+  document.body.appendChild(link);
+  const url = URL.createObjectURL(blob);
+  link.href = url;
+  link.download = filename || 'ascene.html';
+  link.click();
+  URL.revokeObjectURL(url);
+  link.remove();
+}
+
+// Compares 2 vector objects up to size 4
+// Expect v1 and v2 to take format {x: number, y: number, z: number, w:number}
+// Smaller vectors (ie. vec2) should work as well since their z & w vals will be the same (undefined)
+export function areVectorsEqual(v1, v2) {
+  return (
+    Object.is(v1.x, v2.x) &&
+    Object.is(v1.y, v2.y) &&
+    Object.is(v1.z, v2.z) &&
+    Object.is(v1.w, v2.w)
+  );
+}

package/src/lib/viewport.js

@@ -0,0 +1,268 @@
+/* eslint-disable no-unused-vars */
+import TransformControls from './TransformControls.js';
+import EditorControls from './EditorControls.js';
+
+import { initRaycaster } from './raycaster';
+import Events from './Events';
+
+/**
+ * Transform controls stuff mostly.
+ */
+export function Viewport(inspector) {
+  // Initialize raycaster and picking in differentpmodule.
+  const mouseCursor = initRaycaster(inspector);
+  const sceneEl = inspector.sceneEl;
+
+  sceneEl.addEventListener('camera-set-active', (event) => {
+    // If we're in edit mode, save the newly active camera and activate when exiting.
+    if (inspector.opened) {
+      inspector.cameras.original = event.detail.cameraEl;
+    }
+  });
+
+  // Helpers.
+  const sceneHelpers = inspector.sceneHelpers;
+  const grid = new THREE.GridHelper(30, 60, 0xaaaaaa, 0x262626);
+  sceneHelpers.add(grid);
+
+  const selectionBox = new THREE.BoxHelper();
+  selectionBox.material.depthTest = false;
+  selectionBox.material.transparent = true;
+  selectionBox.material.color.set(0x1faaf2);
+  selectionBox.visible = false;
+  sceneHelpers.add(selectionBox);
+
+  function updateHelpers(object) {
+    object.traverse((node) => {
+      if (inspector.helpers[node.uuid] && inspector.helpers[node.uuid].update) {
+        inspector.helpers[node.uuid].update();
+      }
+    });
+  }
+
+  const camera = inspector.camera;
+  const transformControls = new THREE.TransformControls(
+    camera,
+    inspector.container
+  );
+  transformControls.size = 0.75;
+  transformControls.addEventListener('objectChange', (evt) => {
+    const object = transformControls.object;
+    if (object === undefined) {
+      return;
+    }
+
+    selectionBox.setFromObject(object);
+
+    updateHelpers(object);
+
+    // Emit update event for watcher.
+    let component;
+    let value;
+    if (evt.mode === 'translate') {
+      component = 'position';
+      value = `${object.position.x} ${object.position.y} ${object.position.z}`;
+    } else if (evt.mode === 'rotate') {
+      component = 'rotation';
+      const d = THREE.MathUtils.radToDeg;
+      value = `${d(object.rotation.x)} ${d(object.rotation.y)} ${d(
+        object.rotation.z
+      )}`;
+    } else if (evt.mode === 'scale') {
+      component = 'scale';
+      value = `${object.scale.x} ${object.scale.y} ${object.scale.z}`;
+    }
+
+    // We need to call setAttribute for component attrValue to be up to date,
+    // so that entity.flushToDOM() works correctly when duplicating an entity.
+    transformControls.object.el.setAttribute(component, value);
+
+    Events.emit('entityupdate', {
+      component: component,
+      entity: transformControls.object.el,
+      property: '',
+      value: value
+    });
+  });
+
+  transformControls.addEventListener('mouseDown', () => {
+    controls.enabled = false;
+  });
+
+  transformControls.addEventListener('mouseUp', () => {
+    controls.enabled = true;
+  });
+
+  sceneHelpers.add(transformControls);
+
+  Events.on('entityupdate', (detail) => {
+    const object = detail.entity.object3D;
+    if (
+      inspector.selected === object &&
+      inspector.selectedEntity.object3DMap.mesh
+    ) {
+      selectionBox.setFromObject(inspector.selected);
+    }
+  });
+
+  // Controls need to be added *after* main logic.
+  const controls = new THREE.EditorControls(camera, inspector.container);
+  controls.center.set(0, 1.6, 0);
+  controls.rotationSpeed = 0.0035;
+  controls.zoomSpeed = 0.05;
+  controls.setAspectRatio(sceneEl.canvas.width / sceneEl.canvas.height);
+  controls.addEventListener('change', () => {
+    transformControls.update(true); // true is updateScale
+    Events.emit('camerachanged');
+  });
+
+  Events.on('cameratoggle', (data) => {
+    controls.setCamera(data.camera);
+    transformControls.setCamera(data.camera);
+    updateAspectRatio();
+  });
+
+  function disableControls() {
+    mouseCursor.disable();
+    transformControls.dispose();
+    controls.enabled = false;
+  }
+
+  function enableControls() {
+    mouseCursor.enable();
+    transformControls.activate();
+    controls.enabled = true;
+  }
+  enableControls();
+
+  Events.on('inspectorcleared', () => {
+    controls.center.set(0, 0, 0);
+  });
+
+  Events.on('transformmodechange', (mode) => {
+    transformControls.setMode(mode);
+  });
+
+  Events.on('translationsnapchanged', (dist) => {
+    transformControls.setTranslationSnap(dist);
+  });
+
+  Events.on('rotationsnapchanged', (dist) => {
+    transformControls.setRotationSnap(dist);
+  });
+
+  Events.on('transformspacechanged', (space) => {
+    transformControls.setSpace(space);
+  });
+
+  Events.on('objectselect', (object) => {
+    selectionBox.visible = false;
+    transformControls.detach();
+    if (object && object.el) {
+      if (object.el.getObject3D('mesh')) {
+        selectionBox.setFromObject(object);
+        selectionBox.visible = true;
+      } else if (object.el.hasAttribute('gltf-model')) {
+        const listener = (event) => {
+          if (event.target !== object.el) return; // we got an event for a child, ignore
+          selectionBox.setFromObject(object);
+          selectionBox.visible = true;
+          object.el.removeEventListener('model-loaded', listener);
+        };
+        object.el.addEventListener('model-loaded', listener);
+      }
+
+      transformControls.attach(object);
+    }
+  });
+
+  Events.on('objectfocus', (object) => {
+    controls.focus(object);
+  });
+
+  Events.on('geometrychanged', (object) => {
+    if (object !== null) {
+      selectionBox.setFromObject(object);
+    }
+  });
+
+  Events.on('entityupdate', (detail) => {
+    const object = detail.entity.object3D;
+    if (inspector.selected === object) {
+      // Hack because object3D always has geometry :(
+      if (
+        object.geometry &&
+        ((object.geometry.vertices && object.geometry.vertices.length > 0) ||
+          (object.geometry.attributes &&
+            object.geometry.attributes.position &&
+            object.geometry.attributes.position.array.length))
+      ) {
+        selectionBox.setFromObject(object);
+      }
+    }
+
+    transformControls.update();
+    if (object instanceof THREE.PerspectiveCamera) {
+      object.updateProjectionMatrix();
+    }
+
+    updateHelpers(object);
+  });
+
+  function updateAspectRatio() {
+    if (!inspector.opened) return;
+    // Modifying aspect for perspective camera is done by aframe a-scene.resize function
+    // when the perspective camera is the active camera, so we actually do it a second time here,
+    // but we need to modify it ourself when we switch from ortho camera to perspective camera (updateAspectRatio() is called in cameratoggle handler).
+    const camera = inspector.camera;
+    const aspect =
+      inspector.container.offsetWidth / inspector.container.offsetHeight;
+    if (camera.isPerspectiveCamera) {
+      camera.aspect = aspect;
+    } else if (camera.isOrthographicCamera) {
+      const frustumSize = camera.top - camera.bottom;
+      camera.left = (-frustumSize * aspect) / 2;
+      camera.right = (frustumSize * aspect) / 2;
+      camera.top = frustumSize / 2;
+      camera.bottom = -frustumSize / 2;
+    }
+
+    controls.setAspectRatio(aspect); // for zoom in/out to work correctly for orthographic camera
+    camera.updateProjectionMatrix();
+
+    const cameraHelper = inspector.helpers[camera.uuid];
+    if (cameraHelper) cameraHelper.update();
+  }
+
+  inspector.sceneEl.addEventListener('rendererresize', updateAspectRatio);
+
+  Events.on('gridvisibilitychanged', (showGrid) => {
+    grid.visible = showGrid;
+  });
+
+  Events.on('togglegrid', () => {
+    grid.visible = !grid.visible;
+  });
+
+  Events.on('inspectortoggle', (active) => {
+    if (active) {
+      enableControls();
+      AFRAME.scenes[0].camera = inspector.camera;
+      Array.prototype.slice
+        .call(document.querySelectorAll('.a-enter-vr,.rs-base'))
+        .forEach((element) => {
+          element.style.display = 'none';
+        });
+    } else {
+      disableControls();
+      inspector.cameras.original.setAttribute('camera', 'active', 'true');
+      AFRAME.scenes[0].camera =
+        inspector.cameras.original.getObject3D('camera');
+      Array.prototype.slice
+        .call(document.querySelectorAll('.a-enter-vr,.rs-base'))
+        .forEach((element) => {
+          element.style.display = 'block';
+        });
+    }
+  });
+}