gizmo tools in new studio (#10311)

* added the gizmo tools

* show only when scene is selected

* IR-2450 link to jira

packages/ui/src/components/editor/panels/Viewport/container/index.tsx

@@ -29,7 +29,7 @@ import { ItemTypes } from '@etherealengine/editor/src/constants/AssetTypes'
 import { EditorControlFunctions } from '@etherealengine/editor/src/functions/EditorControlFunctions'
 import { getCursorSpawnPosition } from '@etherealengine/editor/src/functions/screenSpaceFunctions'
 import { EditorState } from '@etherealengine/editor/src/services/EditorServices'
-import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
+import { useMutableState } from '@etherealengine/hyperflux'
 import { TransformComponent } from '@etherealengine/spatial'
 import { RendererComponent } from '@etherealengine/spatial/src/renderer/WebGLRendererSystem'
 import React, { useEffect, useRef } from 'react'
@@ -38,6 +38,7 @@ import { useTranslation } from 'react-i18next'
 import { twMerge } from 'tailwind-merge'
 import { Vector2, Vector3 } from 'three'
 import Text from '../../../../../primitives/tailwind/Text'
+import GizmoTool from '../tools/GizmoTool'
 import GridTool from '../tools/GridTool'
 import PlayModeTool from '../tools/PlayModeTool'
 import RenderModeTool from '../tools/RenderTool'
@@ -97,9 +98,9 @@ const ViewportDnD = () => {
 
 const ViewPortPanelContainer = () => {
   const { t } = useTranslation()
-  const sceneName = useHookstate(getMutableState(EditorState).sceneName).value
+  const sceneName = useMutableState(EditorState).sceneName.value
   return (
-    <div className="z-30 flex h-full w-full flex-col bg-theme-surface-main">
+    <div className="relative z-30 flex h-full w-full flex-col bg-theme-surface-main">
       <div className="flex gap-1 p-1">
         <TransformSpaceTool />
         <TransformPivotTool />
@@ -109,6 +110,7 @@ const ViewPortPanelContainer = () => {
         <RenderModeTool />
         <PlayModeTool />
       </div>
+      {sceneName ? <GizmoTool /> : null}
       {sceneName ? (
         <ViewportDnD />
       ) : (

packages/ui/src/components/editor/panels/Viewport/tools/GizmoTool.tsx

@@ -0,0 +1,97 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import { EditorControlFunctions } from '@etherealengine/editor/src/functions/EditorControlFunctions'
+import { setTransformMode } from '@etherealengine/editor/src/functions/transformFunctions'
+import { EditorHelperState } from '@etherealengine/editor/src/services/EditorHelperState'
+import { TransformMode } from '@etherealengine/engine/src/scene/constants/transformConstants'
+import { useMutableState } from '@etherealengine/hyperflux'
+import React from 'react'
+import { TbPointer, TbRefresh, TbVector, TbWindowMaximize } from 'react-icons/tb'
+import { twMerge } from 'tailwind-merge'
+import Button from '../../../../../primitives/tailwind/Button'
+
+function Placer() {
+  return (
+    <>
+      <div className="mt-2 h-1 w-6 bg-[#2B2C30]" />
+      <div className="mt-1 h-1 w-6 bg-[#2B2C30]" />
+    </>
+  )
+}
+
+export default function GizmoTool() {
+  const editorHelperState = useMutableState(EditorHelperState)
+  const transformMode = editorHelperState.transformMode.value
+
+  return (
+    <div className="absolute left-4 top-14 z-10 flex flex-col items-center rounded-lg bg-black p-2">
+      <Placer />
+      <div className="mt-2 flex flex-col rounded bg-theme-surface-main">
+        <Button
+          variant="transparent"
+          className={twMerge('border-b border-b-theme-primary p-2 text-[#A3A3A3]')}
+          iconContainerClassName="m-0"
+          startIcon={<TbPointer />}
+          title="Pointer"
+          onClick={() => EditorControlFunctions.replaceSelection([])}
+        />
+        <Button
+          variant="transparent"
+          className={twMerge(
+            'border-b border-b-theme-primary p-2 text-[#A3A3A3]',
+            transformMode === TransformMode.translate && 'bg-theme-highlight text-white'
+          )}
+          iconContainerClassName="m-0"
+          startIcon={<TbVector />}
+          title="Translate"
+          onClick={() => setTransformMode(TransformMode.translate)}
+        />
+        <Button
+          variant="transparent"
+          className={twMerge(
+            'border-b border-b-theme-primary p-2 text-[#A3A3A3]',
+            transformMode === TransformMode.rotate && 'bg-theme-highlight text-white'
+          )}
+          iconContainerClassName="m-0"
+          startIcon={<TbRefresh />}
+          title="Rotate"
+          onClick={() => setTransformMode(TransformMode.rotate)}
+        />
+        <Button
+          variant="transparent"
+          className={twMerge(
+            'p-2 text-[#A3A3A3]',
+            transformMode === TransformMode.scale && 'bg-theme-highlight text-white'
+          )}
+          iconContainerClassName="m-0"
+          startIcon={<TbWindowMaximize />}
+          title="Scale"
+          onClick={() => setTransformMode(TransformMode.scale)}
+        />
+      </div>
+    </div>
+  )
+}

packages/ui/src/components/editor/panels/Viewport/tools/GridTool.tsx

@@ -43,7 +43,7 @@ const GridTool = () => {
   }
 
   return (
-    <div id="transform-space" className="flex items-center bg-theme-surfaceInput">
+    <div className="flex items-center bg-theme-surfaceInput">
       <Button
         startIcon={<MdBorderClear />}
         onClick={onToggleGridVisible}