Skip to content

Commit ce78338

Browse files
author
jiangtao.yang
committed
feat: finished bubble sort
1 parent 7114007 commit ce78338

21 files changed

Lines changed: 253 additions & 136 deletions

File tree

‎apps/dsv/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"assert": "^2.1.0",
1919
"path-browserify": "^1.0.1",
2020
"buffer": "^6.0.3",
21-
"util": "^0.12.5"
21+
"util": "^0.12.5",
22+
"zustand": "^5.0.3"
2223
},
2324
"devDependencies": {
2425
"@rspack/cli": "^1.2.1",

‎apps/dsv/src/App.tsx‎

Lines changed: 3 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,8 @@
1-
import { useEffect, useState } from 'react';
2-
import { run } from 'parser';
31
import { Chart } from './Chart';
42
import { StructureType } from 'schema';
3+
import { CodeEditor } from './CodeEditor/CodeEditor';
54

65
function App() {
7-
const [code, setCode] = useState(`
8-
const bubbleSort = (arr) => {
9-
for (let i = 0; i < arr.length; i++) {
10-
for (let j = 0; j < arr.length - i - 1; j++) {
11-
if (arr[j] > arr[j + 1]) {
12-
let temp = arr[j];
13-
arr[j] = arr[j + 1];
14-
arr[j + 1] = temp;
15-
}
16-
}
17-
}
18-
return arr;
19-
}
20-
21-
const arr1 = [5, 3, 8, 4, 2, 1, 2, 4];
22-
23-
bubbleSort(arr1)
24-
25-
`);
26-
276
return (
287
<div
298
style={{
@@ -33,39 +12,8 @@ bubbleSort(arr1)
3312
height: '100vh',
3413
}}
3514
>
36-
<textarea
37-
style={{
38-
margin: '12px',
39-
width: '480px',
40-
height: '600px',
41-
padding: '12px',
42-
fontSize: '14px',
43-
fontFamily: 'monospace',
44-
}}
45-
placeholder="在此输入代码..."
46-
value={code}
47-
onChange={(e) => setCode(e.target.value)}
48-
/>
49-
<button onClick={() => run(code)}>Run</button>
50-
<Chart
51-
schema={{
52-
structures: [
53-
{
54-
id: 'array-f5c481',
55-
type: StructureType.Array,
56-
array: [5, 3, 8, 4, 2, 1, 2, 4],
57-
},
58-
],
59-
actions: [
60-
{
61-
structureId: 'array-f5c481',
62-
name: 'swap',
63-
type: 'swap',
64-
args: [0, 1],
65-
},
66-
],
67-
}}
68-
/>
15+
<CodeEditor />
16+
<Chart />
6917
</div>
7018
);
7119
}

‎apps/dsv/src/Chart.tsx‎

Lines changed: 14 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,26 @@ import { useRef } from 'react';
44
import { FC } from 'react';
55
import { ArrayBar } from 'data-structure';
66
import { Schema } from 'schema';
7+
import { useDsv } from './model';
78
VStory.registerAll();
89

9-
interface ChartProps {
10-
schema: Schema;
11-
}
12-
export const Chart: FC<ChartProps> = (props) => {
13-
const { schema } = props;
10+
export const Chart: FC = () => {
11+
const schema = useDsv((state) => state.schema);
1412

1513
const ref = useRef<HTMLDivElement>(null);
1614

1715
useEffect(() => {
1816
if (!ref.current) {
1917
return;
2018
}
21-
22-
const interval = 1000;
19+
if (schema.actions.length === 0 || schema.structures.length === 0) {
20+
return;
21+
}
2322
const arrayBar = new ArrayBar<number>([...schema.structures[0].array], {
2423
id: schema.structures[0].id,
25-
interval: interval,
26-
structure: {
27-
position: {
28-
top: 10,
29-
left: 10,
30-
width: 580,
31-
height: 300,
32-
},
33-
},
24+
interval: 300,
25+
structure: {},
3426
});
35-
3627
schema.actions.forEach((action) => {
3728
if (action.structureId === arrayBar.id) {
3829
if (action.type === 'set') {
@@ -41,6 +32,9 @@ export const Chart: FC<ChartProps> = (props) => {
4132
if (action.type === 'swap') {
4233
arrayBar.swap(action.args[0], action.args[1]);
4334
}
35+
if (action.type === 'appear') {
36+
arrayBar.appear();
37+
}
4438
}
4539
});
4640

@@ -53,37 +47,16 @@ export const Chart: FC<ChartProps> = (props) => {
5347
{
5448
id: 'default-chapter',
5549
scenes: [
56-
// 场景数组，可以包含多个场景，场景与场景是有先后顺序的串联结构
57-
{
58-
id: 'scene0',
59-
// 场景中包含的动作数组，动作中描述了一个或多个character的具体行为，一个场景中可以包含多个动作，动作之间是并行执行的
60-
actions: [
61-
{
62-
characterId: 'array-f5c481',
63-
characterActions: [
64-
{
65-
action: 'appear',
66-
startTime: 0,
67-
payload: {
68-
animation: {
69-
duration: interval,
70-
},
71-
},
72-
},
73-
],
74-
},
75-
],
76-
},
7750
{
78-
id: 'scene1',
51+
id: 'scene',
7952
actions: arrayBar.actions,
8053
},
8154
],
8255
},
8356
],
8457
};
8558

86-
console.log(dsl);
59+
console.log('debug dsl', dsl);
8760

8861
const story = new VStory.Story(dsl, {
8962
dom: ref.current,
@@ -97,11 +70,10 @@ export const Chart: FC<ChartProps> = (props) => {
9770
return () => {
9871
story?.release();
9972
};
100-
}, []);
73+
}, [schema]);
10174

10275
return (
10376
<>
104-
<div>test</div>
10577
<div style={{ width: '600px', height: '600px' }} ref={ref}></div>
10678
</>
10779
);

‎apps/dsv/src/CodeEditor/CodeEditor.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { useCallback, useEffect, useState } from 'react';
2+
import { run } from 'parser';
3+
import { useDsv } from '../model';
4+
5+
export const CodeEditor = () => {
6+
const setSchema = useDsv((state) => state.setSchema);
7+
8+
const [code, setCode] = useState(`Array.prototype.swap = function(i, j){
9+
const temp = this[i]
10+
this[i] = this[j]
11+
this[j] = temp
12+
}
13+
14+
const bubbleSort = (arr) => {
15+
for (let i = 0; i < arr.length; i++) {
16+
for (let j = 0; j < arr.length - i - 1; j++) {
17+
if (arr[j] > arr[j + 1]) {
18+
arr.swap(j, j+1)
19+
}
20+
}
21+
}
22+
console.log("res", arr)
23+
return arr;
24+
}
25+
26+
const arr1 = [5, 3, 8, 4, 2, 1, 2, 4];
27+
28+
bubbleSort(arr1)
29+
`);
30+
31+
const handleExec = useCallback(() => {
32+
const result = run(code);
33+
setSchema(result.schema);
34+
}, [code]);
35+
36+
return (
37+
<>
38+
<textarea
39+
style={{
40+
margin: '12px',
41+
width: '480px',
42+
height: '600px',
43+
padding: '12px',
44+
fontSize: '14px',
45+
fontFamily: 'monospace',
46+
}}
47+
placeholder="在此输入代码..."
48+
value={code}
49+
onChange={(e) => setCode(e.target.value)}
50+
/>
51+
<button onClick={handleExec}>Run</button>
52+
</>
53+
);
54+
};

‎apps/dsv/src/model/createCode.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { StateCreator } from 'zustand';
2+
import { CodeSlice, StoreState } from './types';
3+
4+
export const createCodeSlice: StateCreator<StoreState, [], [], CodeSlice> = (
5+
set,
6+
) => ({
7+
code: '',
8+
setCode: (code) => set({ code }),
9+
});

‎apps/dsv/src/model/createSchema.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { StateCreator } from 'zustand';
2+
import { SchemaSlice, StoreState } from './types';
3+
4+
export const createSchemaSlice: StateCreator<
5+
StoreState,
6+
[],
7+
[],
8+
SchemaSlice
9+
> = (set) => ({
10+
schema: {
11+
structures: [],
12+
actions: [],
13+
},
14+
setSchema: (schema) => set({ schema }),
15+
});

‎apps/dsv/src/model/index.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { create } from 'zustand';
2+
import { StoreState } from './types';
3+
import { createSchemaSlice } from './createSchema';
4+
import { createCodeSlice } from './createCode';
5+
6+
const useDsv = create<StoreState>()((...a) => {
7+
return {
8+
...createSchemaSlice(...a),
9+
...createCodeSlice(...a),
10+
};
11+
});
12+
13+
export { useDsv };

‎apps/dsv/src/model/types.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Schema } from 'schema';
2+
3+
export interface SchemaSlice {
4+
schema: Schema;
5+
setSchema: (schema: Schema) => void;
6+
}
7+
8+
export interface CodeSlice {
9+
code: string;
10+
setCode: (code: string) => void;
11+
}
12+
13+
export type StoreState = SchemaSlice & CodeSlice;

‎apps/dsv/tsconfig.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@
1111
"resolveJsonModule": true,
1212
"moduleResolution": "bundler",
1313
"useDefineForClassFields": true,
14-
"allowImportingTsExtensions": true,
15-
"sourceMap": true
14+
"allowImportingTsExtensions": true
1615
},
1716
"include": ["src"],
1817
"ts-node": {

‎packages/data-structure/src/data-structures/array-bar/array-bar.ts‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@ export class ArrayBar<T> {
3434
type: "VChart",
3535
zIndex: 1,
3636
position: {
37-
top: 200,
38-
left: 200,
39-
width: 580,
40-
height: 190,
37+
top: 0,
38+
left: 0,
39+
width: 500,
40+
height: 200,
4141
},
4242
options: {
4343
// 图表的背景板配置
@@ -70,7 +70,8 @@ export class ArrayBar<T> {
7070
type: "linear",
7171
visible: true,
7272
zero: true,
73-
max: 8,
73+
max: Math.max(...this._data.map((d) => d.value as number)),
74+
nice: true,
7475
},
7576
],
7677
type: "bar",
@@ -105,6 +106,23 @@ export class ArrayBar<T> {
105106
});
106107
}
107108

109+
appear() {
110+
this._actions.push({
111+
characterId: this._id,
112+
characterActions: [
113+
{
114+
action: "appear",
115+
startTime: 0,
116+
payload: {
117+
animation: {
118+
duration: this._interval,
119+
},
120+
},
121+
},
122+
],
123+
});
124+
}
125+
108126
set(index: number, value: T) {
109127
const id = this._id;
110128
const dataId = this._dataId;
@@ -115,7 +133,7 @@ export class ArrayBar<T> {
115133

116134
const action = {
117135
action: "update",
118-
startTime: interval * (length + 1),
136+
startTime: interval * length,
119137
payload: {
120138
id: dataId,
121139
animation: {

0 commit comments

Comments
 (0)