resize (#706)

* start of resize Signed-off-by: Jess Frazelle <github@jessfraz.com> * refactor Signed-off-by: Jess Frazelle <github@jessfraz.com> * check if 0 Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates Signed-off-by: Jess Frazelle <github@jessfraz.com> * updates Signed-off-by: Jess Frazelle <github@jessfraz.com> * will work w new lib Signed-off-by: Jess Frazelle <github@jessfraz.com> * new types Signed-off-by: Jess Frazelle <github@jessfraz.com> * handle resize effect --------- Signed-off-by: Jess Frazelle <github@jessfraz.com> Co-authored-by: Kurt Hutten Irev-Dev <k.hutten@protonmail.ch>
2023-09-25 19:49:53 -07:00
parent a30818ff2b
commit c307ddd1b1
15 changed files with 203 additions and 133 deletions
--- a/src/components/AvailableVarsHelpers.tsx
+++ b/src/components/AvailableVarsHelpers.tsx
@ -10,6 +10,7 @@ import {
 } from '../lang/modifyAst'
 import { findAllPreviousVariables, PrevVariable } from '../lang/queryAst'
 import { useStore } from '../useStore'
+import { engineCommandManager } from '../lang/std/engineConnection'

 export const AvailableVars = ({
  onVarClick,
@ -92,14 +93,11 @@ export function useCalc({
  newVariableInsertIndex: number
  setNewVariableName: (a: string) => void
 } {
-  const { ast, programMemory, selectionRange, engineCommandManager } = useStore(
-    (s) => ({
-      ast: s.ast,
-      programMemory: s.programMemory,
-      selectionRange: s.selectionRanges.codeBasedSelections[0].range,
-      engineCommandManager: s.engineCommandManager,
-    })
-  )
+  const { ast, programMemory, selectionRange } = useStore((s) => ({
+    ast: s.ast,
+    programMemory: s.programMemory,
+    selectionRange: s.selectionRanges.codeBasedSelections[0].range,
+  }))
  const inputRef = useRef<HTMLInputElement>(null)
  const [availableVarInfo, setAvailableVarInfo] = useState<
    ReturnType<typeof findAllPreviousVariables>
@ -140,7 +138,6 @@ export function useCalc({
  }, [ast, programMemory, selectionRange])

  useEffect(() => {
-    if (!engineCommandManager) return
    try {
      const code = `const __result__ = ${value}\nshow(__result__)`
      const ast = parser_wasm(code)
--- a/src/components/DebugPanel.tsx
+++ b/src/components/DebugPanel.tsx
@ -1,5 +1,4 @@
 import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
-import { useStore } from '../useStore'
 import { v4 as uuidv4 } from 'uuid'
 import { EngineCommand } from '../lang/std/engineConnection'
 import { useState } from 'react'
@ -7,6 +6,7 @@ import { ActionButton } from '../components/ActionButton'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
 import { isReducedMotion } from 'lang/util'
 import { AstExplorer } from './AstExplorer'
+import { engineCommandManager } from '../lang/std/engineConnection'

 type SketchModeCmd = Extract<
  Extract<EngineCommand, { type: 'modeling_cmd_req' }>['cmd'],
@ -14,9 +14,6 @@ type SketchModeCmd = Extract<
 >

 export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
-  const { engineCommandManager } = useStore((s) => ({
-    engineCommandManager: s.engineCommandManager,
-  }))
  const [sketchModeCmd, setSketchModeCmd] = useState<SketchModeCmd>({
    type: 'default_camera_enable_sketch_mode',
    origin: { x: 0, y: 0, z: 0 },
@ -81,7 +78,7 @@ export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
        <ActionButton
          Element="button"
          onClick={() => {
-            engineCommandManager?.sendSceneCommand({
+            engineCommandManager.sendSceneCommand({
              type: 'modeling_cmd_req',
              cmd: sketchModeCmd,
              cmd_id: uuidv4(),
--- a/src/components/ExportButton.tsx
+++ b/src/components/ExportButton.tsx
@ -1,11 +1,11 @@
 import { v4 as uuidv4 } from 'uuid'
-import { useStore } from '../useStore'
 import { faFileExport, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { ActionButton } from './ActionButton'
 import Modal from 'react-modal'
 import React from 'react'
 import { useFormik } from 'formik'
 import { Models } from '@kittycad/lib'
+import { engineCommandManager } from '../lang/std/engineConnection'

 type OutputFormat = Models['OutputFormat_type']

@ -18,10 +18,6 @@ interface ExportButtonProps extends React.PropsWithChildren {
 }

 export const ExportButton = ({ children, className }: ExportButtonProps) => {
-  const { engineCommandManager } = useStore((s) => ({
-    engineCommandManager: s.engineCommandManager,
-  }))
-
  const [modalIsOpen, setIsOpen] = React.useState(false)

  const defaultType = 'gltf'
@ -66,7 +62,7 @@ export const ExportButton = ({ children, className }: ExportButtonProps) => {
          },
        }
      }
-      engineCommandManager?.sendSceneCommand({
+      engineCommandManager.sendSceneCommand({
        type: 'modeling_cmd_req',
        cmd: {
          type: 'export',
--- a/src/components/Stream.tsx
+++ b/src/components/Stream.tsx
@ -25,6 +25,7 @@ import { modify_ast_for_sketch } from '../wasm-lib/pkg/wasm_lib'
 import { KCLError } from 'lang/errors'
 import { KclError as RustKclError } from '../wasm-lib/kcl/bindings/KclError'
 import { rangeTypeFix } from 'lang/abstractSyntaxTree'
+import { engineCommandManager } from '../lang/std/engineConnection'

 export const Stream = ({ className = '' }) => {
  const [isLoading, setIsLoading] = useState(true)
@ -32,7 +33,6 @@ export const Stream = ({ className = '' }) => {
  const videoRef = useRef<HTMLVideoElement>(null)
  const {
    mediaStream,
-    engineCommandManager,
    setButtonDownInStream,
    didDragInStream,
    setDidDragInStream,
@ -45,7 +45,6 @@ export const Stream = ({ className = '' }) => {
    programMemory,
  } = useStore((s) => ({
    mediaStream: s.mediaStream,
-    engineCommandManager: s.engineCommandManager,
    setButtonDownInStream: s.setButtonDownInStream,
    fileId: s.fileId,
    didDragInStream: s.didDragInStream,
@ -73,7 +72,7 @@ export const Stream = ({ className = '' }) => {
    if (!videoRef.current) return
    if (!mediaStream) return
    videoRef.current.srcObject = mediaStream
-  }, [mediaStream, engineCommandManager])
+  }, [mediaStream])

  const handleMouseDown: MouseEventHandler<HTMLVideoElement> = (e) => {
    if (!videoRef.current) return
@ -107,7 +106,7 @@ export const Stream = ({ className = '' }) => {
    }

    if (guiMode.mode === 'sketch' && guiMode.sketchMode === ('move' as any)) {
-      engineCommandManager?.sendSceneCommand({
+      engineCommandManager.sendSceneCommand({
        type: 'modeling_cmd_req',
        cmd: {
          type: 'handle_mouse_drag_start',
@ -121,7 +120,7 @@ export const Stream = ({ className = '' }) => {
        guiMode.sketchMode === ('sketch_line' as any)
      )
    ) {
-      engineCommandManager?.sendSceneCommand({
+      engineCommandManager.sendSceneCommand({
        type: 'modeling_cmd_req',
        cmd: {
          type: 'camera_drag_start',
@ -139,7 +138,7 @@ export const Stream = ({ className = '' }) => {
  const handleScroll: WheelEventHandler<HTMLVideoElement> = (e) => {
    if (!cameraMouseDragGuards[cameraControls].zoom.scrollCallback(e)) return

-    engineCommandManager?.sendSceneCommand({
+    engineCommandManager.sendSceneCommand({
      type: 'modeling_cmd_req',
      cmd: {
        type: 'default_camera_zoom',
@ -177,7 +176,7 @@ export const Stream = ({ className = '' }) => {
    }

    if (!didDragInStream) {
-      engineCommandManager?.sendSceneCommand({
+      engineCommandManager.sendSceneCommand({
        type: 'modeling_cmd_req',
        cmd: {
          type: 'select_with_point',
@ -214,7 +213,7 @@ export const Stream = ({ className = '' }) => {
        window: { x, y },
      }
    }
-    engineCommandManager?.sendSceneCommand(command).then(async (resp) => {
+    engineCommandManager.sendSceneCommand(command).then(async (resp) => {
      if (!(guiMode.mode === 'sketch')) return

      if (guiMode.sketchMode === 'selectFace') return
@ -282,7 +281,7 @@ export const Stream = ({ className = '' }) => {
        guiMode.waitingFirstClick &&
        !isEditingExistingSketch
      ) {
-        const curve = await engineCommandManager?.sendSceneCommand({
+        const curve = await engineCommandManager.sendSceneCommand({
          type: 'modeling_cmd_req',
          cmd_id: uuidv4(),
          cmd: {
@ -323,7 +322,7 @@ export const Stream = ({ className = '' }) => {
        resp?.data?.data?.entities_modified?.length &&
        (!guiMode.waitingFirstClick || isEditingExistingSketch)
      ) {
-        const curve = await engineCommandManager?.sendSceneCommand({
+        const curve = await engineCommandManager.sendSceneCommand({
          type: 'modeling_cmd_req',
          cmd_id: uuidv4(),
          cmd: {
@ -368,12 +367,12 @@ export const Stream = ({ className = '' }) => {
          setGuiMode({
            mode: 'default',
          })
-          engineCommandManager?.sendSceneCommand({
+          engineCommandManager.sendSceneCommand({
            type: 'modeling_cmd_req',
            cmd_id: uuidv4(),
            cmd: { type: 'edit_mode_exit' },
          })
-          engineCommandManager?.sendSceneCommand({
+          engineCommandManager.sendSceneCommand({
            type: 'modeling_cmd_req',
            cmd_id: uuidv4(),
            cmd: { type: 'default_camera_disable_sketch_mode' },
--- a/src/components/TextEditor.tsx
+++ b/src/components/TextEditor.tsx
@ -30,6 +30,7 @@ import { isOverlap, roundOff } from 'lib/utils'
 import { kclErrToDiagnostic } from 'lang/errors'
 import { CSSRuleObject } from 'tailwindcss/types/config'
 import interact from '@replit/codemirror-interact'
+import { engineCommandManager } from '../lang/std/engineConnection'

 export const editorShortcutMeta = {
  formatCode: {
@ -52,7 +53,6 @@ export const TextEditor = ({
    code,
    deferredSetCode,
    editorView,
-    engineCommandManager,
    formatCode,
    isLSPServerReady,
    selectionRanges,
@ -64,7 +64,6 @@ export const TextEditor = ({
    code: s.code,
    deferredSetCode: s.deferredSetCode,
    editorView: s.editorView,
-    engineCommandManager: s.engineCommandManager,
    formatCode: s.formatCode,
    isLSPServerReady: s.isLSPServerReady,
    selectionRanges: s.selectionRanges,
@ -173,7 +172,7 @@ export const TextEditor = ({
    const idBasedSelections = codeBasedSelections
      .map(({ type, range }) => {
        const hasOverlap = Object.entries(
-          engineCommandManager?.sourceRangeMap || {}
+          engineCommandManager.sourceRangeMap || {}
        ).filter(([_, sourceRange]) => {
          return isOverlap(sourceRange, range)
        })
@ -186,7 +185,7 @@ export const TextEditor = ({
      })
      .filter(Boolean) as any

-    engineCommandManager?.cusorsSelected({
+    engineCommandManager.cusorsSelected({
      otherSelections: [],
      idBasedSelections,
    })