Make updating code controls async

This commit is contained in:
Steve Ruiz 2021-06-25 12:01:22 +01:00
parent 85dc3028b4
commit 0ee26a8493
27 changed files with 212 additions and 75 deletions

View file

@ -0,0 +1,57 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`selection creates a code control: generated code controls from code 1`] = `Object {}`;
exports[`selection generates shapes: generated rectangle from code 1`] = `
Array [
Object {
"childIndex": 1,
"id": "test-rectangle",
"isAspectRatioLocked": false,
"isGenerated": true,
"isHidden": false,
"isLocked": false,
"name": "Test Rectangle",
"parentId": "page1",
"point": Array [
100,
100,
],
"radius": 2,
"rotation": 0,
"size": Array [
200,
200,
],
"style": Object {
"color": "Red",
"dash": "Dotted",
"isFilled": false,
"size": "Medium",
},
"type": "rectangle",
},
]
`;
exports[`selection updates a code control: data in state after changing control 1`] = `
Object {
"test-number-control": Object {
"id": "test-number-control",
"label": "x",
"step": 1,
"type": "number",
"value": 100,
},
"test-vector-control": Object {
"id": "test-vector-control",
"isNormalized": false,
"label": "size",
"type": "vector",
"value": Array [
0,
0,
],
},
}
`;

View file

@ -33,6 +33,7 @@ describe('selection', () => {
it('generates shapes', async () => {
const code = `
const rectangle = new Rectangle({
id: "test-rectangle",
name: 'Test Rectangle',
point: [100, 100],
size: [200, 200],
@ -45,20 +46,72 @@ describe('selection', () => {
`
const { controls, shapes } = await generateFromCode(state.data, code)
state.send('GENERATED_FROM_CODE', { controls, shapes })
expect(getShapes(state.data).length).toBe(1)
expect(getShapes(state.data)).toMatchSnapshot(
'generated rectangle from code'
)
})
it('creates a code control', () => {
null
it('creates a code control', async () => {
const code = `
const rectangle = new Rectangle({
id: "test-rectangle",
name: 'Test Rectangle',
point: [100, 100],
size: [200, 200],
style: {
size: SizeStyle.Medium,
color: ColorStyle.Red,
dash: DashStyle.Dotted,
},
})
`
const { controls, shapes } = await generateFromCode(state.data, code)
state.send('GENERATED_FROM_CODE', { controls, shapes })
expect(state.data.codeControls).toMatchSnapshot(
'generated code controls from code'
)
})
it('updates a code control', () => {
null
})
it('updates a code control', async () => {
const code = `
const rectangle = new Rectangle({
id: "test-rectangle",
name: 'Test Rectangle',
point: [100, 100],
size: [200, 200],
style: {
size: SizeStyle.Medium,
color: ColorStyle.Red,
dash: DashStyle.Dotted,
},
})
it('updates a code control', () => {
null
new NumberControl({
id: "test-number-control",
label: "x"
})
new VectorControl({
id: "test-vector-control",
label: "size"
})
`
const { controls, shapes } = await generateFromCode(state.data, code)
state.send('GENERATED_FROM_CODE', { controls, shapes })
state.send('CHANGED_CODE_CONTROL', { 'test-number-control': 100 })
expect(state.data.codeControls).toMatchSnapshot(
'data in state after changing control'
)
})
/* -------------------- Readonly -------------------- */

View file

@ -65,7 +65,6 @@ type ShapeStyles = {
interface BaseShape {
id: string
seed: number
type: ShapeType
parentId: string
childIndex: number
@ -335,27 +334,27 @@ interface BaseCodeControl {
interface NumberCodeControl extends BaseCodeControl {
type: ControlType.Number
min: number
max: number
value: number
step: number
format: (value: number) => number
min?: number
max?: number
step?: number
format?: (value: number) => number
}
interface VectorCodeControl extends BaseCodeControl {
type: ControlType.Vector
min: number
max: number
step: number
value: number[]
isNormalized: boolean
format: (value: number[]) => number[]
min?: number
max?: number
step?: number
isNormalized?: boolean
format?: (value: number[]) => number[]
}
interface TextCodeControl extends BaseCodeControl {
type: ControlType.Text
value: string
format: (value: string) => string
format?: (value: string) => string
}
interface SelectCodeControl<T extends string = ''>
@ -1972,6 +1971,10 @@ interface ShapeUtility<K extends Shape> {
return this
}
get id(): string {
return this._shape.id
}
/**
* The shape's underlying shape.
*/
@ -2057,7 +2060,7 @@ interface ShapeUtility<K extends Shape> {
constructor(props = {} as ShapeProps<DotShape>) {
super({
id: uniqueId(),
seed: Math.random(),
parentId: (window as any).currentPageId,
type: ShapeType.Dot,
isGenerated: true,
@ -2085,7 +2088,6 @@ interface ShapeUtility<K extends Shape> {
constructor(props = {} as ShapeProps<EllipseShape>) {
super({
id: uniqueId(),
seed: Math.random(),
parentId: (window as any).currentPageId,
type: ShapeType.Ellipse,
isGenerated: true,
@ -2119,7 +2121,7 @@ interface ShapeUtility<K extends Shape> {
constructor(props = {} as ShapeProps<LineShape>) {
super({
id: uniqueId(),
seed: Math.random(),
parentId: (window as any).currentPageId,
type: ShapeType.Line,
isGenerated: true,
@ -2152,7 +2154,7 @@ interface ShapeUtility<K extends Shape> {
constructor(props = {} as ShapeProps<PolylineShape>) {
super({
id: uniqueId(),
seed: Math.random(),
parentId: (window as any).currentPageId,
type: ShapeType.Polyline,
isGenerated: true,
@ -2184,7 +2186,7 @@ interface ShapeUtility<K extends Shape> {
constructor(props = {} as ShapeProps<RayShape>) {
super({
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Ray,
isGenerated: true,
name: 'Ray',
@ -2242,7 +2244,7 @@ interface ShapeUtility<K extends Shape> {
super({
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Arrow,
isGenerated: false,
name: 'Arrow',
@ -2311,7 +2313,7 @@ interface ShapeUtility<K extends Shape> {
constructor(props = {} as ShapeProps<DrawShape>) {
super({
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Draw,
isGenerated: false,
parentId: (window as any).currentPageId,
@ -2339,7 +2341,7 @@ interface ShapeUtility<K extends Shape> {
constructor(props = {} as ShapeProps<RectangleShape>) {
super({
id: uniqueId(),
seed: Math.random(),
parentId: (window as any).currentPageId,
type: ShapeType.Rectangle,
isGenerated: true,

1
next-env.d.ts vendored
View file

@ -1,2 +1,3 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

View file

@ -36,7 +36,7 @@ export default class Arrow extends CodeShape<ArrowShape> {
super({
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Arrow,
isGenerated: false,
name: 'Arrow',

View file

@ -13,17 +13,17 @@ export const codeControls = new Set<CodeControl>([])
/* ----------------- Start Copy Here ---------------- */
export class Control<T extends CodeControl> {
control: T
_control: T
constructor(control: Omit<T, 'id'>) {
this.control = { ...control, id: uniqueId() } as T
codeControls.add(this.control)
constructor(control: T) {
this._control = { ...control }
codeControls.add(this._control)
// Could there be a better way to prevent this?
// When updating, constructor should just bind to
// the existing control rather than creating a new one?
if (!(window as any).isUpdatingCode) {
controls[this.control.label] = this.control.value
controls[this._control.label] = this._control.value
}
}
@ -32,39 +32,52 @@ export class Control<T extends CodeControl> {
delete controls[this.control.label]
}
get control(): T {
return this._control
}
get id(): string {
return this.control.id
}
get value(): T['value'] {
return this.control.value
}
set value(value: T['value']) {
this.control.value = value
}
}
type ControlProps<T extends CodeControl> = Omit<Partial<T>, 'id' | 'type'>
type ControlProps<T extends CodeControl> = Omit<Partial<T>, 'type'>
export class NumberControl extends Control<NumberCodeControl> {
constructor(options: ControlProps<NumberCodeControl>) {
const { label = 'Number', value = 0, step = 1 } = options
const { id = uniqueId(), label = 'Number', value = 0, step = 1 } = options
super({
type: ControlType.Number,
...options,
label,
value,
step,
id,
})
}
}
export class VectorControl extends Control<VectorCodeControl> {
constructor(options: ControlProps<VectorCodeControl>) {
const { label = 'Vector', value = [0, 0], isNormalized = false } = options
const {
id = uniqueId(),
label = 'Vector',
value = [0, 0],
isNormalized = false,
} = options
super({
type: ControlType.Vector,
...options,
label,
value,
isNormalized,
id,
})
}
}

View file

@ -9,7 +9,7 @@ export default class Dot extends CodeShape<DotShape> {
constructor(props = {} as ShapeProps<DotShape>) {
super({
id: uniqueId(),
seed: Math.random(),
parentId: (window as any).currentPageId,
type: ShapeType.Dot,
isGenerated: true,

View file

@ -9,7 +9,7 @@ export default class Draw extends CodeShape<DrawShape> {
constructor(props = {} as ShapeProps<DrawShape>) {
super({
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Draw,
isGenerated: false,
parentId: (window as any).currentPageId,

View file

@ -9,7 +9,6 @@ export default class Ellipse extends CodeShape<EllipseShape> {
constructor(props = {} as ShapeProps<EllipseShape>) {
super({
id: uniqueId(),
seed: Math.random(),
parentId: (window as any).currentPageId,
type: ShapeType.Ellipse,
isGenerated: true,

View file

@ -184,6 +184,10 @@ export default class CodeShape<T extends Shape> {
return this
}
get id(): string {
return this._shape.id
}
/**
* The shape's underlying shape.
*/

View file

@ -9,7 +9,7 @@ export default class Line extends CodeShape<LineShape> {
constructor(props = {} as ShapeProps<LineShape>) {
super({
id: uniqueId(),
seed: Math.random(),
parentId: (window as any).currentPageId,
type: ShapeType.Line,
isGenerated: true,

View file

@ -9,7 +9,7 @@ export default class Polyline extends CodeShape<PolylineShape> {
constructor(props = {} as ShapeProps<PolylineShape>) {
super({
id: uniqueId(),
seed: Math.random(),
parentId: (window as any).currentPageId,
type: ShapeType.Polyline,
isGenerated: true,

View file

@ -9,7 +9,7 @@ export default class Ray extends CodeShape<RayShape> {
constructor(props = {} as ShapeProps<RayShape>) {
super({
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Ray,
isGenerated: true,
name: 'Ray',

View file

@ -9,7 +9,7 @@ export default class Rectangle extends CodeShape<RectangleShape> {
constructor(props = {} as ShapeProps<RectangleShape>) {
super({
id: uniqueId(),
seed: Math.random(),
parentId: (window as any).currentPageId,
type: ShapeType.Rectangle,
isGenerated: true,

View file

@ -218,7 +218,7 @@ export function getTranslateSnapshot(data: Data) {
const clone: Shape = {
...shape,
id: uniqueId(),
seed: Math.random(),
parentId: shape.parentId,
childIndex: getChildIndexAbove(cData, shape.id),
isGenerated: false,

View file

@ -61,7 +61,7 @@ const arrow = registerShapeUtils<ArrowShape>({
return {
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Arrow,
isGenerated: false,
name: 'Arrow',

View file

@ -11,7 +11,7 @@ const dot = registerShapeUtils<DotShape>({
create(props) {
return {
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Dot,
isGenerated: false,
name: 'Dot',

View file

@ -23,7 +23,7 @@ const draw = registerShapeUtils<DrawShape>({
create(props) {
return {
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Draw,
isGenerated: false,
name: 'Draw',

View file

@ -24,7 +24,7 @@ const ellipse = registerShapeUtils<EllipseShape>({
create(props) {
return {
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Ellipse,
isGenerated: false,
name: 'Ellipse',

View file

@ -15,7 +15,7 @@ const group = registerShapeUtils<GroupShape>({
create(props) {
return {
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Group,
isGenerated: false,
name: 'Group',

View file

@ -13,7 +13,7 @@ const line = registerShapeUtils<LineShape>({
create(props) {
return {
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Line,
isGenerated: false,
name: 'Line',

View file

@ -16,7 +16,7 @@ const polyline = registerShapeUtils<PolylineShape>({
create(props) {
return {
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Polyline,
isGenerated: false,
name: 'Polyline',

View file

@ -13,7 +13,7 @@ const ray = registerShapeUtils<RayShape>({
create(props) {
return {
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Ray,
isGenerated: false,
name: 'Ray',

View file

@ -15,7 +15,7 @@ const rectangle = registerShapeUtils<RectangleShape>({
create(props) {
return {
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Rectangle,
isGenerated: false,
name: 'Rectangle',

View file

@ -53,7 +53,7 @@ const text = registerShapeUtils<TextShape>({
create(props) {
return {
id: uniqueId(),
seed: Math.random(),
type: ShapeType.Text,
isGenerated: false,
name: 'Text',

View file

@ -300,7 +300,7 @@ const state = createState({
ZOOMED_CAMERA: 'zoomCamera',
INCREASED_CODE_FONT_SIZE: 'increaseCodeFontSize',
DECREASED_CODE_FONT_SIZE: 'decreaseCodeFontSize',
CHANGED_CODE_CONTROL: 'updateControls',
CHANGED_CODE_CONTROL: { to: 'updatingControls' },
TOGGLED_TOOL_LOCK: 'toggleToolLock',
ZOOMED_TO_SELECTION: {
if: 'hasSelection',
@ -605,6 +605,13 @@ const state = createState({
CANCELLED: { do: 'cancelSession', to: 'selecting' },
},
},
updatingControls: {
onEnter: 'updateControls',
async: {
await: 'getUpdatedShapes',
onResolve: { do: 'updateGeneratedShapes', to: 'selecting' },
},
},
},
},
editingShape: {
@ -1742,6 +1749,15 @@ const state = createState({
) {
commands.generate(data, payload.shapes)
},
updateGeneratedShapes(data, payload, result: { shapes: Shape[] }) {
setSelectedIds(data, [])
history.disable()
commands.generate(data, result.shapes)
history.enable()
},
setCodeControls(data, payload: { controls: CodeControl[] }) {
data.codeControls = Object.fromEntries(
payload.controls.map((control) => [control.id, control])
@ -1757,21 +1773,6 @@ const state = createState({
for (const key in payload) {
data.codeControls[key].value = payload[key]
}
history.disable()
setSelectedIds(data, [])
try {
updateFromCode(
data,
data.document.code[data.currentCodeFileId].code
).then(({ shapes }) => commands.generate(data, shapes))
} catch (e) {
console.error(e)
}
history.enable()
},
/* -------------------- Settings -------------------- */
@ -1896,6 +1897,14 @@ const state = createState({
return commonStyle
},
},
asyncs: {
async getUpdatedShapes(data) {
return updateFromCode(
data,
data.document.code[data.currentCodeFileId].code
)
},
},
})
export default state

View file

@ -115,7 +115,6 @@ export type ShapeStyles = {
export interface BaseShape {
id: string
seed: number
type: ShapeType
parentId: string
childIndex: number