ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add client lib @kittycad/lib (#214)

Browse Source 
* add client lib

* tsc after build

* update after spec update

* remove uneeded check

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fixes

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fix camera drag

* fix throttle typing

* comment with link to issue

---------

Signed-off-by: Jess Frazelle <github@jessfraz.com>
Co-authored-by: Jess Frazelle <github@jessfraz.com>
This commit is contained in:
Kurt Hutten
2023-08-02 15:41:59 +10:00
committed by GitHub
parent aabb88ee45
commit 5419039fae
12 changed files with 140 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/test.yml vendored
View File

@ -14,6 +14,7 @@ jobs:
node-version-file: '.nvmrc'
- run: yarn install
- run: yarn build:wasm
- run: yarn tsc
- run: yarn simpleserver:ci
- run: yarn test:nowatch
- run: yarn test:cov

1
package.json
View File

@ -8,6 +8,7 @@
"@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@headlessui/react": "^1.7.13",
"@kittycad/lib": "^0.0.22",
"@react-hook/resize-observer": "^1.2.6",
"@tauri-apps/api": "^1.3.0",
"@testing-library/jest-dom": "^5.14.1",

2
src/App.tsx
View File

@ -20,7 +20,6 @@ import { Stream } from './components/Stream'
import ModalContainer from 'react-modal-promise'
import { EngineCommandManager } from './lang/std/engineConnection'
import { isOverlap } from './lib/utils'
import { SetToken } from './components/TokenInput'
import { AppHeader } from './components/AppHeader'
import { isTauri } from './lib/isTauri'
import { KCLError } from './lang/errors'
@ -88,7 +87,6 @@ export function App() {
addKCLError: s.addKCLError,
theme: s.theme,
}))
const showTauriTokenInput = isTauri() && !token
// const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
const onChange = (value: string, viewUpdate: ViewUpdate) => {
setCode(value)

12
src/components/DebugPanel.tsx
View File

@ -6,13 +6,17 @@ import { useState } from 'react'
import { ActionButton } from '../components/ActionButton'
import { faCheck } from '@fortawesome/free-solid-svg-icons'
type SketchModeCmd = EngineCommand['cmd']['DefaultCameraEnableSketchMode']
type SketchModeCmd = Extract<
EngineCommand['cmd'],
{ type: 'default_camera_enable_sketch_mode' }
>
export const DebugPanel = () => {
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 },
x_axis: { x: 1, y: 0, z: 0 },
y_axis: { x: 0, y: 1, z: 0 },
@ -56,10 +60,8 @@ export const DebugPanel = () => {
<ActionButton
onClick={() => {
engineCommandManager?.sendSceneCommand({
type: 'ModelingCmdReq',
cmd: {
DefaultCameraEnableSketchMode: sketchModeCmd,
},
type: 'modeling_cmd_req',
cmd: sketchModeCmd,
cmd_id: uuidv4(),
file_id: uuidv4(),
})

18
src/components/Stream.tsx
View File

@ -3,6 +3,7 @@ import { PanelHeader } from '../components/PanelHeader'
import { v4 as uuidv4 } from 'uuid'
import { useStore } from '../useStore'
import { throttle } from '../lib/utils'
import { EngineCommand } from '../lang/std/engineConnection'
export const Stream = () => {
const videoRef = useRef<HTMLVideoElement>(null)
@ -25,7 +26,7 @@ export const Stream = () => {
const file_id = uuidv4()
const debounceSocketSend = throttle((message) => {
const debounceSocketSend = throttle<EngineCommand>((message) => {
engineCommandManager?.sendSceneCommand(message)
}, 16)
const handleMouseMove: MouseEventHandler<HTMLVideoElement> = ({
@ -41,16 +42,15 @@ export const Stream = () => {
const interaction = ctrlKey ? 'pan' : 'rotate'
debounceSocketSend({
type: 'ModelingCmdReq',
type: 'modeling_cmd_req',
cmd: {
CameraDragMove: {
type: 'camera_drag_move',
interaction,
window: {
x: x,
y: y,
},
},
},
cmd_id: uuidv4(),
file_id: file_id,
})
@ -73,16 +73,15 @@ export const Stream = () => {
const interaction = ctrlKey ? 'pan' : 'rotate'
engineCommandManager?.sendSceneCommand({
type: 'ModelingCmdReq',
type: 'modeling_cmd_req',
cmd: {
CameraDragStart: {
type: 'camera_drag_start',
interaction,
window: {
x: x,
y: y,
},
},
},
cmd_id: newId,
file_id,
})
@ -104,16 +103,15 @@ export const Stream = () => {
const interaction = ctrlKey ? 'pan' : 'rotate'
engineCommandManager?.sendSceneCommand({
type: 'ModelingCmdReq',
type: 'modeling_cmd_req',
cmd: {
CameraDragEnd: {
type: 'camera_drag_end',
interaction,
window: {
x: x,
y: y,
},
},
},
cmd_id: uuidv4(),
file_id: file_id,
})

12
src/components/TokenInput.tsx
View File

@ -1,12 +0,0 @@
import { LoginButton } from './LoginButton'
export const SetToken = () => {
if (!(window as any).__TAURI__) {
return <div />
}
return (
<div className="w-full flex gap-2">
<LoginButton />
</div>
)
}

64
src/lang/std/engineConnection.ts
View File

@ -1,6 +1,7 @@
import { SourceRange } from '../executor'
import { Selections } from '../../useStore'
import { VITE_KC_API_WS_MODELING_URL } from '../../env'
import { Models } from '@kittycad/lib'
interface ResultCommand {
type: 'result'
@ -48,43 +49,13 @@ interface XYZ {
y: number
z: number
}
export interface EngineCommand {
type: 'ModelingCmdReq'
cmd: {
StartPath?: {}
MovePathPen?: {
path: uuid
to: XYZ
}
ExtendPath?: {
path: uuid
segment: {
Line: {
end: XYZ
}
}
}
ClosePath?: {
path_id: uuid
}
Extrude?: {
target: uuid
distance: number
cap: boolean
}
CameraDragMove?: MouseDrag
CameraDragStart?: MouseStuff
CameraDragEnd?: MouseStuff
DefaultCameraEnableSketchMode?: {
origin: XYZ
x_axis: XYZ
y_axis: XYZ
distance_to_plane: number
ortho: boolean
}
}
cmd_id: uuid
file_id: uuid
export type _EngineCommand = Models['ModelingCmdReq_type']
// TODO extending this type to add the type property is a work around
// see https://github.com/KittyCAD/api-deux/issues/1096
export interface EngineCommand extends _EngineCommand {
type: 'modeling_cmd_req'
}
export class EngineCommandManager {
@ -152,12 +123,12 @@ export class EngineCommandManager {
console.warn('something went wrong: ', event.data)
} else {
const message = JSON.parse(event.data)
if (message.type === 'SDPAnswer') {
if (message.type === 's_d_p_answer') {
this.pc?.setRemoteDescription(
new RTCSessionDescription(message.answer)
)
} else if (message.type === 'IceServerInfo' && this.pc) {
console.log('received IceServerInfo')
} else if (message.type === 'ice_server_info' && this.pc) {
console.log('received ice_server_info')
this.pc?.setConfiguration({
iceServers: message.ice_servers,
})
@ -173,10 +144,10 @@ export class EngineCommandManager {
this.pc.addEventListener('icecandidate', (event) => {
if (!this.pc || !this.socket) return
if (event.candidate === null) {
console.log('sent SDPOffer')
console.log('sent s_d_p_offer')
this.socket.send(
JSON.stringify({
type: 'SDPOffer',
type: 's_d_p_offer',
offer: this.pc.localDescription,
})
)
@ -191,9 +162,9 @@ export class EngineCommandManager {
.createOffer()
.then(async (descriptionInit) => {
await this?.pc?.setLocalDescription(descriptionInit)
console.log('sent SDPOffer begin')
console.log('sent s_d_p_offer begin')
const msg = JSON.stringify({
type: 'SDPOffer',
type: 's_d_p_offer',
offer: this.pc?.localDescription,
})
this.socket?.send(msg)
@ -297,9 +268,10 @@ export class EngineCommandManager {
console.log('socket not ready')
return
}
if (command.cmd.CameraDragMove && this.lossyDataChannel) {
const cmd = command.cmd
if (cmd.type === 'camera_drag_move' && this.lossyDataChannel) {
console.log('sending lossy command', command, this.lossyDataChannel)
command.cmd.CameraDragMove.sequence = this.sequence
cmd.sequence = this.sequence
this.sequence++
this.lossyDataChannel.send(JSON.stringify(command))
return

5
src/lang/std/extrude.ts
View File

@ -41,14 +41,13 @@ export const extrude: InternalFn = (
],
range: sourceRange,
command: {
type: 'ModelingCmdReq',
type: 'modeling_cmd_req',
cmd: {
Extrude: {
type: 'extrude',
target: sketch.id,
distance: length,
cap: true,
},
},
cmd_id: id,
file_id: uuidv4(),
},

22
src/lang/std/sketch.ts
View File

@ -268,12 +268,12 @@ export const line: SketchLineHelper = {
params: [lineData, previousSketch],
range: sourceRange,
command: {
type: 'ModelingCmdReq',
type: 'modeling_cmd_req',
cmd: {
ExtendPath: {
type: 'extend_path',
path: sketchGroup.id,
segment: {
Line: {
type: 'line',
end: {
x: lineData.to[0],
y: lineData.to[1],
@ -281,8 +281,6 @@ export const line: SketchLineHelper = {
},
},
},
},
},
cmd_id: id,
file_id: uuidv4(),
},
@ -1571,12 +1569,11 @@ export const close: InternalFn = (
params: [lineData],
range: sourceRange,
command: {
type: 'ModelingCmdReq',
type: 'modeling_cmd_req',
cmd: {
ClosePath: {
type: 'close_path',
path_id: sketchGroup.id,
},
},
cmd_id: id,
file_id: uuidv4(),
},
@ -1637,18 +1634,18 @@ export const startSketchAt: InternalFn = (
params: [lineData],
range: sourceRange,
command: {
type: 'ModelingCmdReq',
type: 'modeling_cmd_req',
cmd: {
StartPath: {},
type: 'start_path',
},
cmd_id: pathId,
file_id: uuidv4(),
},
})
engineCommandManager.sendSceneCommand({
type: 'ModelingCmdReq',
type: 'modeling_cmd_req',
cmd: {
MovePathPen: {
type: 'move_path_pen',
path: pathId,
to: {
x: lineData.to[0],
@ -1656,7 +1653,6 @@ export const startSketchAt: InternalFn = (
z: 0,
},
},
},
cmd_id: id,
file_id: uuidv4(),
})

14
src/lib/utils.ts
View File

@ -28,26 +28,26 @@ export function normaliseAngle(angle: number): number {
return result > 180 ? result - 360 : result
}
export function throttle(
func: (...args: any[]) => any,
export function throttle<T>(
func: (args: T) => any,
wait: number
): (...args: any[]) => any {
): (args: T) => any {
let timeout: ReturnType<typeof setTimeout> | null
let latestArgs: any[]
let latestArgs: T
let latestTimestamp: number
function later() {
timeout = null
func(...latestArgs)
func(latestArgs)
}
function throttled(...args: any[]) {
function throttled(args: T) {
const currentTimestamp = Date.now()
latestArgs = args
if (!latestTimestamp || currentTimestamp - latestTimestamp >= wait) {
latestTimestamp = currentTimestamp
func(...latestArgs)
func(latestArgs)
} else if (!timeout) {
timeout = setTimeout(later, wait - (currentTimestamp - latestTimestamp))
}

2
tsconfig.json
View File

@ -14,7 +14,7 @@
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "CommonJS",
"module": "ES2022",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,

59
yarn.lock
View File

@ -1710,6 +1710,16 @@
resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
"@kittycad/lib@^0.0.22":
version "0.0.22"
resolved "https://registry.yarnpkg.com/@kittycad/lib/-/lib-0.0.22.tgz#3d9b063c6cfe6593cdf7b61d3ffb5c1251262401"
integrity sha512-H9AS3/8Ag2fJRZqNNkbOjy/08kEqeOxWEWsmQIzJ/dNGYRD0B7Fm+UM6T8eSEkPP2+KKrIhoHMYEfGd9KjY1uQ==
dependencies:
node-fetch "3.3.2"
openapi-types "^12.0.0"
ts-node "^10.9.1"
tslib "~2.4"
"@lezer/common@^1.0.0":
version "1.0.3"
resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.3.tgz#1808f70e2b0a7b1fdcbaf5c074723d2d4ed1e4c5"
@ -3039,6 +3049,11 @@ damerau-levenshtein@^1.0.8:
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
data-uri-to-buffer@^4.0.0:
version "4.0.1"
resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e"
integrity sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==
data-urls@^3.0.2:
version "3.0.2"
resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
@ -3720,6 +3735,14 @@ fbjs@^3.0.0, fbjs@^3.0.1:
setimmediate "^1.0.5"
ua-parser-js "^1.0.35"
fetch-blob@^3.1.2, fetch-blob@^3.1.4:
version "3.2.0"
resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.2.0.tgz#f09b8d4bbd45adc6f0c20b7e787e793e309dcce9"
integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==
dependencies:
node-domexception "^1.0.0"
web-streams-polyfill "^3.0.3"
file-entry-cache@^6.0.1:
version "6.0.1"
resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@ -3792,6 +3815,13 @@ form-data@^4.0.0:
combined-stream "^1.0.8"
mime-types "^2.1.12"
formdata-polyfill@^4.0.10:
version "4.0.10"
resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
dependencies:
fetch-blob "^3.1.2"
fraction.js@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
@ -5141,6 +5171,20 @@ natural-compare@^1.4.0:
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
node-domexception@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
node-fetch@3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.2.tgz#d1e889bacdf733b4ff3b2b243eb7a12866a0b78b"
integrity sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==
dependencies:
data-uri-to-buffer "^4.0.0"
fetch-blob "^3.1.4"
formdata-polyfill "^4.0.10"
node-fetch@^2.6.1, node-fetch@^2.6.12:
version "2.6.12"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.12.tgz#02eb8e22074018e3d5a83016649d04df0e348fba"
@ -5277,6 +5321,11 @@ onetime@^5.1.2:
dependencies:
mimic-fn "^2.1.0"
openapi-types@^12.0.0:
version "12.1.3"
resolved "https://registry.yarnpkg.com/openapi-types/-/openapi-types-12.1.3.tgz#471995eb26c4b97b7bd356aacf7b91b73e777dd3"
integrity sha512-N4YtSYJqghVu4iek2ZUvcN/0aqH1kRDuNqzcycDxhOUpg7GdvLa2F3DgS6yBNhInhv2r/6I0Flkn7CqL8+nIcw==
opener@^1.5.1:
version "1.5.2"
resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
@ -6287,6 +6336,11 @@ tslib@^1.8.1:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@~2.4:
version "2.4.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.1.tgz#0d0bfbaac2880b91e22df0768e55be9753a5b17e"
integrity sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==
tsutils@^3.21.0:
version "3.21.0"
resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@ -6557,6 +6611,11 @@ wasm-pack@^0.12.1:
dependencies:
binary-install "^1.0.1"
web-streams-polyfill@^3.0.3:
version "3.2.1"
resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz#71c2718c52b45fd49dbeee88634b3a60ceab42a6"
integrity sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q==
web-vitals@^2.1.0:
version "2.1.4"
resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.4.tgz#76563175a475a5e835264d373704f9dde718290c"