feat: remove flickering (#77)

* fix flickering

* feat: add the current project title to topbar (#73)

* feat: local store projects (#75)

* feat: local store projects

* feat: empty projects notice

* feat: translations

* feat: add new assets to stored scene

* feat: translation gizmo (#80)

* feat: gizmo

* fix flickering

* chore: gizmo events

* fix: position changes in ECS scene

* chore: move gizmo dependency to decentraland-ecs

* chore: small refactor

* chore: small fixes

* chore: update package.json

* chore: remove startEditor action

.gitignore

@@ -23,4 +23,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.vscode
+.vscode
+
+src/ecsScene/scene.js

buildScene.json

@@ -0,0 +1,8 @@
+[
+  {
+    "name": "Compile ecs scene",
+    "kind": "Webpack",
+    "file": "./src/ecsScene/scene.ts",
+    "target": "web"
+  }
+]

package.json

@@ -23,7 +23,6 @@
     "css-loader": "1.0.0",
     "decentraland-commons": "^5.1.0",
     "decentraland-dapps": "^3.11.0",
-    "decentraland-ecs": "^1.0.1-20181220152036.commit-d560183",
     "decentraland-eth": "^8.6.0",
     "decentraland-ui": "^1.17.0",
     "dotenv": "6.0.0",
@@ -79,18 +78,20 @@
     "workbox-webpack-plugin": "3.6.3"
   },
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
-    "build:ci": "npm run lint && node scripts/build.js",
+    "start": "npm run build:scene && concurrently -n \"scene,builder\" \"decentraland-compiler buildScene.json --watch\" \"node scripts/start.js\"",
+    "build:scene": "decentraland-compiler buildScene.json",
+    "build": "npm run build:scene && node scripts/build.js",
+    "build:ci": "npm run lint && npm run build:scene && node scripts/build.js",
     "test": "node scripts/test.js",
     "lint": "tslint --project tsconfig.json -e '*.json' -c tslint.json 'src/**/*.ts{,x}'",
+    "postinstall": "node ./scripts/postinstall.js",
     "bundle:svg": "npx svg-sprite -D src/components/Icon --css-dimensions \"\" --cs icons.svg --css --css-dest . --css-bust false --css-prefix \".Icon.%s\" --css-render-css src/icons/*.svg"
   },
   "eslintConfig": {
     "extends": "react-app"
   },
   "eslintIgnore": [
-    "src/modules/editor/ecs.js"
+    "src/ecsScene/scene.js"
   ],
   "browserslist": [
     ">0.2%",
@@ -110,7 +111,10 @@
     "@types/react-dom": "16.0.11",
     "@types/react-redux": "^6.0.11",
     "@types/react-router-dom": "^4.3.1",
+    "concurrently": "^4.1.0",
     "dcl-tslint-config-standard": "^1.1.0",
+    "decentraland-ecs": "5.0.1-20190129203733.commit-4f35844",
+    "decentraland-rpc": "^3.1.5",
     "prettier": "^1.15.3",
     "tslint-plugin-prettier": "^2.0.1"
   },

scripts/postinstall.js

@@ -2,7 +2,5 @@ const fs = require('fs')
 const path = require('path')
 
 const editorPath = process.argv[2] || '../node_modules/decentraland-ecs/artifacts/editor.js'
-const ecsPath = process.argv[3] || '../node_modules/decentraland-ecs/dist/src/index.js'
 
 fs.copyFileSync(path.resolve(__dirname, editorPath), path.resolve(__dirname, '../public/editor.js'))
-fs.copyFileSync(path.resolve(__dirname, ecsPath), path.resolve(__dirname, '../src/modules/editor/ecs.js'))

src/components/EditorPage/EditorPage.container.ts

@@ -2,8 +2,9 @@ import { connect } from 'react-redux'
 
 import { loadAssetPacksRequest } from 'modules/assetPack/actions'
 import { RootState } from 'modules/common/types'
-import { bindEditorKeyboardShortcuts, unbindEditorKeyboardShortcuts, startEditor, closeEditor } from 'modules/editor/actions'
+import { bindEditorKeyboardShortcuts, unbindEditorKeyboardShortcuts, closeEditor } from 'modules/editor/actions'
 import { isSidebarOpen, isPreviewing } from 'modules/editor/selectors'
+
 import EditorPage from './EditorPage'
 import { MapStateProps, MapDispatch, MapDispatchProps } from './EditorPage.types'
 
@@ -13,7 +14,6 @@ const mapState = (state: RootState): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onStartEditor: () => dispatch(startEditor()),
   onLoadAssetPacks: () => dispatch(loadAssetPacksRequest()),
   onBindKeyboardShortcuts: () => dispatch(bindEditorKeyboardShortcuts()),
   onUnbindKeyboardShortcuts: () => dispatch(unbindEditorKeyboardShortcuts()),

src/components/EditorPage/EditorPage.tsx

@@ -10,7 +10,6 @@ import './EditorPage.css'
 
 export default class EditorPage extends React.PureComponent<Props> {
   componentWillMount() {
-    this.props.onStartEditor()
     this.props.onLoadAssetPacks()
     this.props.onBindKeyboardShortcuts()
   }

src/components/EditorPage/EditorPage.types.ts

@@ -2,11 +2,9 @@ import { Dispatch } from 'redux'
 
 import { loadAssetPacksRequest, LoadAssetPacksRequestAction } from 'modules/assetPack/actions'
 import {
-  startEditor,
   closeEditor,
   bindEditorKeyboardShortcuts,
   unbindEditorKeyboardShortcuts,
-  StartEditorAction,
   CloseEditorAction,
   BindEditorKeybardShortcutsAction,
   UnbindEditorKeybardShortcutsAction
@@ -15,22 +13,14 @@ import {
 export type Props = {
   isSidebarOpen: boolean
   isPreviewing: boolean
-  onStartEditor: typeof startEditor
   onLoadAssetPacks: typeof loadAssetPacksRequest
   onBindKeyboardShortcuts: typeof bindEditorKeyboardShortcuts
   onUnbindKeyboardShortcuts: typeof unbindEditorKeyboardShortcuts
   onCloseEditor: typeof closeEditor
 }
 
 export type MapStateProps = Pick<Props, 'isSidebarOpen' | 'isPreviewing'>
-export type MapDispatchProps = Pick<
-  Props,
-  'onStartEditor' | 'onLoadAssetPacks' | 'onBindKeyboardShortcuts' | 'onUnbindKeyboardShortcuts' | 'onCloseEditor'
->
+export type MapDispatchProps = Pick<Props, 'onLoadAssetPacks' | 'onBindKeyboardShortcuts' | 'onUnbindKeyboardShortcuts' | 'onCloseEditor'>
 export type MapDispatch = Dispatch<
-  | LoadAssetPacksRequestAction
-  | StartEditorAction
-  | BindEditorKeybardShortcutsAction
-  | UnbindEditorKeybardShortcutsAction
-  | CloseEditorAction
+  LoadAssetPacksRequestAction | BindEditorKeybardShortcutsAction | UnbindEditorKeybardShortcutsAction | CloseEditorAction
 >

src/components/Preview/Preview.tsx

@@ -1,16 +1,11 @@
 import * as React from 'react'
-import { env } from 'decentraland-commons'
 import { Loader } from 'decentraland-ui'
 
 import { EditorWindow } from './Preview.types'
 import './Preview.css'
 
 const editorWindow = window as EditorWindow
 
-const CONTENT_SERVER = env.get('REACT_APP_CONTENT_SERVER', () => {
-  throw new Error('Missing REACT_APP_CONTENT_SERVER env variable')
-})
-
 export default class Preview extends React.Component {
   private canvas = React.createRef<HTMLDivElement>()
 
@@ -39,7 +34,7 @@ export default class Preview extends React.Component {
   moveCanvas = (canvas: HTMLCanvasElement) => {
     if (this.canvas.current && canvas) {
       this.canvas.current.appendChild(canvas)
-      editorWindow.editor.initEngine(CONTENT_SERVER as string)
+      editorWindow.editor.initEngine()
       editorWindow.editor.resize()
     }
   }

src/components/Preview/Preview.types.ts

@@ -1,10 +1,14 @@
+import { UpdateEditorAction } from 'modules/editor/actions'
+
 export type Editor = {
-  initEngine: (baseUrl: string) => void
+  initEngine: () => void
   resize: () => void
   getDCLCanvas: () => Promise<HTMLCanvasElement>
   enableGizmo: (entityId: string) => void
   on: (event: string, listener: (...args: any[]) => void) => void
   off: (event: string, listener: (...args: any[]) => void) => void
+  handleMessage: (msg: { type: 'update'; payload: any }) => void
+  sendExternalAction: (action: UpdateEditorAction) => void
   setPlayMode: (enabled: boolean) => void
 }
 

src/ecsScene/scene.ts

@@ -0,0 +1,98 @@
+import { log, engine, GLTFShape, Transform, Entity, Gizmos, OnDragEnded } from 'decentraland-ecs'
+import { DecentralandInterface } from 'decentraland-ecs/dist/decentraland/Types'
+import { EntityDefinition, AnyComponent, ComponentData, ComponentType } from 'modules/scene/types'
+declare var dcl: DecentralandInterface
+
+const editorComponents: Record<string, any> = {}
+
+const gizmo = new Gizmos()
+gizmo.position = true
+gizmo.rotation = false
+gizmo.scale = false
+gizmo.updateEntity = false
+
+let gizmoEvent = new OnDragEnded((e: any) => log('drag ended received in ECS', e))
+gizmoEvent.data.uuid = 'dragEndedEvent-editor'
+
+function getComponentById(id: string) {
+  if (id in editorComponents) {
+    return editorComponents[id]
+  }
+  return null
+}
+
+function handleExternalAction(message: { type: string; payload: Record<string, any> }) {
+  switch (message.type) {
+    case 'Update editor':
+      const {
+        scene: { components, entities }
+      } = message.payload
+
+      createComponents(components)
+      createEntities(entities)
+      // TODO: remove unused components
+      // TODO: remove unused entities
+      break
+  }
+}
+
+function createComponents(components: AnyComponent[]) {
+  for (let id in components) {
+    const { type, data } = components[id]
+
+    if (!getComponentById(id)) {
+      switch (type) {
+        case 'GLTFShape':
+          editorComponents[id] = new GLTFShape((data as ComponentData[ComponentType.GLTFShape]).src)
+          editorComponents[id].isPickable = true
+          break
+        case 'Transform':
+          editorComponents[id] = new Transform()
+          break
+      }
+    }
+
+    const component = editorComponents[id]
+
+    if (component) {
+      if (type === 'Transform') {
+        const transform = component as Transform
+        const transformData = data as ComponentData[ComponentType.Transform]
+        transformData.position && transform.position.copyFrom(transformData.position)
+      }
+    }
+  }
+}
+
+function createEntities(entities: EntityDefinition[]) {
+  for (let id in entities) {
+    let entity: Entity = engine.entities[id]
+
+    if (!entity) {
+      entity = new Entity()
+      ;(entity as any).uuid = id
+      entity.set(gizmoEvent)
+      entity.set(gizmo)
+      engine.addEntity(entity)
+    }
+
+    for (let componentId of entities[id].components) {
+      const component = getComponentById(componentId)
+      if (component) {
+        entity.set(component)
+      }
+    }
+  }
+}
+
+function subscribeToExternalActions() {
+  dcl.subscribe('externalAction')
+
+  dcl.onEvent(e => {
+    if ((e.type as any) === 'externalAction') {
+      handleExternalAction(e.data as any)
+    }
+  })
+}
+
+subscribeToExternalActions()

src/ecsScene/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": "../",
+    "experimentalDecorators": true,
+    "outDir": "."
+  },
+  "includes": "*.ts",
+  "exclude": []
+}

src/modules/editor/actions.ts

@@ -1,5 +1,7 @@
 import { action } from 'typesafe-actions'
-import { EditorScene, EditorMode } from './types'
+import { SceneDefinition } from 'modules/scene/types'
+import { AssetMappings } from 'modules/asset/types'
+import { EditorMode } from './types'
 
 // Bind keyboard shortcuts
 
@@ -17,14 +19,6 @@ export const unbindEditorKeyboardShortcuts = () => action(UNBIND_KEYBOARD_SHORTC
 
 export type UnbindEditorKeybardShortcutsAction = ReturnType<typeof unbindEditorKeyboardShortcuts>
 
-// Start editor
-
-export const START_EDITOR = 'Start editor'
-
-export const startEditor = () => action(START_EDITOR, {})
-
-export type StartEditorAction = ReturnType<typeof startEditor>
-
 // Close editor
 
 export const CLOSE_EDITOR = 'Close editor'
@@ -37,7 +31,8 @@ export type CloseEditorAction = ReturnType<typeof closeEditor>
 
 export const UPDATE_EDITOR = 'Update editor'
 
-export const updateEditor = (sceneId: string, scene: EditorScene) => action(UPDATE_EDITOR, { sceneId, scene })
+export const updateEditor = (sceneId: string, scene: SceneDefinition, mappings: AssetMappings) =>
+  action(UPDATE_EDITOR, { sceneId, scene, mappings })
 
 export type UpdateEditorAction = ReturnType<typeof updateEditor>