Horz/Vert distance constraint with modal workflow (#43)
* button style tweak * Remove duplication constraint ast transforms * giveSketchFnCallTag to return if line already had a tag * remove duplication * update tag name to referenceSegName * Update transform shape to return key details about the transform * add modal to hor vert distance workflow * fix browser env stuff from breaking tests * fmt
This commit is contained in:
Kurt Hutten
GitHub
110
src/components/GetInfoModal.tsx
Normal file
110
src/components/GetInfoModal.tsx
Normal file
@ -0,0 +1,110 @@
|
||||
import { Dialog, Transition } from '@headlessui/react'
|
||||
import { Fragment, useState } from 'react'
|
||||
|
||||
export const GetInfoModal = ({
|
||||
isOpen,
|
||||
onResolve,
|
||||
onReject,
|
||||
// fields: initialFields,
|
||||
segName: initialSegName,
|
||||
isSegNameEditable,
|
||||
value: initialValue,
|
||||
}: {
|
||||
isOpen: boolean
|
||||
onResolve: (a: any) => void
|
||||
onReject: (a: any) => void
|
||||
segName: string
|
||||
isSegNameEditable: boolean
|
||||
value: number
|
||||
}) => {
|
||||
const [segName, setSegName] = useState(initialSegName)
|
||||
const [value, setValue] = useState(initialValue)
|
||||
|
||||
return (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={onResolve}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-black bg-opacity-25" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Dialog.Title
|
||||
as="h3"
|
||||
className="text-lg font-medium leading-6 text-gray-900"
|
||||
>
|
||||
Constraint details
|
||||
</Dialog.Title>
|
||||
<label
|
||||
htmlFor="val"
|
||||
className="block text-sm font-medium text-gray-700 mt-3 font-mono"
|
||||
>
|
||||
Distance
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
type="number"
|
||||
name="val"
|
||||
id="val"
|
||||
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono"
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
setValue(Number(e.target.value))
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
htmlFor="segName"
|
||||
className="block text-sm font-medium text-gray-700 mt-3 font-mono"
|
||||
>
|
||||
Segment Name
|
||||
</label>
|
||||
<div className="mt-1">
|
||||
<input
|
||||
type="text"
|
||||
name="segName"
|
||||
id="segName"
|
||||
disabled={!isSegNameEditable}
|
||||
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono"
|
||||
value={segName}
|
||||
onChange={(e) => {
|
||||
setSegName(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
|
||||
onClick={() => onResolve({ segName, value })}
|
||||
>
|
||||
Add constraining value
|
||||
</button>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
)
|
||||
}
|
||||
@ -5,6 +5,11 @@ export const Stream = () => {
|
||||
const videoRef = useRef<HTMLVideoElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
typeof window === 'undefined' ||
|
||||
typeof RTCPeerConnection === 'undefined'
|
||||
)
|
||||
return
|
||||
const url = 'wss://dev.api.kittycad.io/ws/channel'
|
||||
const [pc, socket] = [new RTCPeerConnection(), new WebSocket(url)]
|
||||
// Connection opened
|
||||
@ -41,15 +46,15 @@ export const Stream = () => {
|
||||
iceServers: message.ice_servers,
|
||||
})
|
||||
pc.ontrack = function (event) {
|
||||
const el = document.createElement(
|
||||
event.track.kind
|
||||
) as HTMLVideoElement
|
||||
|
||||
if (videoRef.current) {
|
||||
videoRef.current.srcObject = event.streams[0]
|
||||
videoRef.current.autoplay = true
|
||||
videoRef.current.controls = true
|
||||
}
|
||||
console.log('has element?', videoRef.current)
|
||||
setTimeout(() => {
|
||||
console.log('has element in timeout?', videoRef.current)
|
||||
if (videoRef.current) {
|
||||
videoRef.current.srcObject = event.streams[0]
|
||||
videoRef.current.autoplay = true
|
||||
videoRef.current.controls = true
|
||||
}
|
||||
})
|
||||
}
|
||||
pc.oniceconnectionstatechange = (e) =>
|
||||
console.log(pc.iceConnectionState)
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
import { isSketchVariablesLinked } from '../../lang/std/sketchConstraints'
|
||||
import {
|
||||
TransformInfo,
|
||||
transformAstForSketchLines,
|
||||
transformSecondarySketchLinesTagFirst,
|
||||
getTransformInfos,
|
||||
} from '../../lang/std/sketchcombos'
|
||||
|
||||
@ -73,7 +73,7 @@ export const Equal = () => {
|
||||
transformInfos &&
|
||||
ast &&
|
||||
updateAst(
|
||||
transformAstForSketchLines({
|
||||
transformSecondarySketchLinesTagFirst({
|
||||
ast,
|
||||
selectionRanges,
|
||||
transformInfos,
|
||||
@ -81,7 +81,7 @@ export const Equal = () => {
|
||||
})?.modifiedAst
|
||||
)
|
||||
}
|
||||
className={`border m-1 px-1 rounded ${
|
||||
className={`border m-1 px-1 rounded text-xs ${
|
||||
enableEqual ? 'bg-gray-50 text-gray-800' : 'bg-gray-200 text-gray-400'
|
||||
}`}
|
||||
disabled={!enableEqual}
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
import {
|
||||
TransformInfo,
|
||||
getTransformInfos,
|
||||
transformAstForHorzVert,
|
||||
transformAstSketchLines,
|
||||
} from '../../lang/std/sketchcombos'
|
||||
|
||||
export const HorzVert = ({
|
||||
@ -55,15 +55,16 @@ export const HorzVert = ({
|
||||
transformInfos &&
|
||||
ast &&
|
||||
updateAst(
|
||||
transformAstForHorzVert({
|
||||
transformAstSketchLines({
|
||||
ast,
|
||||
selectionRanges,
|
||||
transformInfos,
|
||||
programMemory,
|
||||
referenceSegName: '',
|
||||
})?.modifiedAst
|
||||
)
|
||||
}
|
||||
className={`border m-1 px-1 rounded ${
|
||||
className={`border m-1 px-1 rounded text-xs ${
|
||||
enableHorz ? 'bg-gray-50 text-gray-800' : 'bg-gray-200 text-gray-400'
|
||||
}`}
|
||||
disabled={!enableHorz}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { create } from 'react-modal-promise'
|
||||
import { toolTips, useStore } from '../../useStore'
|
||||
import { Value, VariableDeclarator } from '../../lang/abstractSyntaxTree'
|
||||
import {
|
||||
@ -8,9 +9,13 @@ import {
|
||||
import { isSketchVariablesLinked } from '../../lang/std/sketchConstraints'
|
||||
import {
|
||||
TransformInfo,
|
||||
transformAstForSketchLines,
|
||||
transformSecondarySketchLinesTagFirst,
|
||||
getTransformInfos,
|
||||
} from '../../lang/std/sketchcombos'
|
||||
import { GetInfoModal } from '../GetInfoModal'
|
||||
import { createLiteral } from '../../lang/modifyAst'
|
||||
|
||||
const getModalInfo = create(GetInfoModal as any)
|
||||
|
||||
export const SetHorzDistance = ({
|
||||
horOrVert,
|
||||
@ -73,23 +78,41 @@ export const SetHorzDistance = ({
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() =>
|
||||
transformInfos &&
|
||||
ast &&
|
||||
updateAst(
|
||||
transformAstForSketchLines({
|
||||
ast,
|
||||
selectionRanges,
|
||||
transformInfos,
|
||||
programMemory,
|
||||
})?.modifiedAst
|
||||
)
|
||||
}
|
||||
className={`border m-1 px-1 rounded ${
|
||||
onClick={async () => {
|
||||
if (transformInfos && ast) {
|
||||
const { modifiedAst, tagInfo, valueUsedInTransform } =
|
||||
transformSecondarySketchLinesTagFirst({
|
||||
ast: JSON.parse(JSON.stringify(ast)),
|
||||
selectionRanges,
|
||||
transformInfos,
|
||||
programMemory,
|
||||
})
|
||||
const { segName, value }: { segName: string; value: number } =
|
||||
await getModalInfo({
|
||||
segName: tagInfo?.tag,
|
||||
isSegNameEditable: !tagInfo?.isTagExisting,
|
||||
value: valueUsedInTransform,
|
||||
} as any)
|
||||
if (segName === tagInfo?.tag && value === valueUsedInTransform) {
|
||||
updateAst(modifiedAst)
|
||||
} else {
|
||||
// transform again but forcing certain values
|
||||
const { modifiedAst } = transformSecondarySketchLinesTagFirst({
|
||||
ast,
|
||||
selectionRanges,
|
||||
transformInfos,
|
||||
programMemory,
|
||||
forceSegName: segName,
|
||||
forceValueUsedInTransform: createLiteral(value),
|
||||
})
|
||||
updateAst(modifiedAst)
|
||||
}
|
||||
}
|
||||
}}
|
||||
className={`border m-1 px-1 rounded text-xs ${
|
||||
enable ? 'bg-gray-50 text-gray-800' : 'bg-gray-200 text-gray-400'
|
||||
}`}
|
||||
disabled={!enable}
|
||||
title="yo dawg"
|
||||
>
|
||||
{horOrVert}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user