Skip to content

Commit 4b70e61

Browse files
joehecnjoehecn
committed
some comment
1 parent e949c87 commit 4b70e61

File tree

3 files changed

+195
-190
lines changed

3 files changed

+195
-190
lines changed

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,8 @@ npm version patch # Bumping a new version
106106
- [x] tests
107107
- [x] properties form helper
108108
- [x] tree component requestUpdate
109-
- [ ] after double click edit constent
109+
- [ ] can edit constent (contenteditable)
110+
- [ ] can replace block
110111
- [ ] vue
111112
- [ ] angular
112113
- [ ] react

‎src/ExpressionVisualizerWebComponent.ts‎

Lines changed: 123 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,28 @@ import { loadScript } from './load-script.js';
1111

1212
import './tree-component.js';
1313

14-
const operatorMap = new Map();
15-
operatorMap.set('+', 'add');
16-
operatorMap.set('-', 'subtract');
17-
operatorMap.set('*', 'multiply');
18-
operatorMap.set('/', 'divide');
19-
operatorMap.set('>', 'larger');
20-
21-
operatorMap.set('<', 'smaller');
22-
operatorMap.set('>=', 'largerEq');
23-
operatorMap.set('<=', 'smallerEq');
24-
operatorMap.set('==', 'equal');
25-
operatorMap.set('!=', 'unequal');
26-
27-
operatorMap.set('and', 'and');
28-
operatorMap.set('or', 'or');
29-
operatorMap.set('xor', 'xor');
30-
operatorMap.set('not', 'not');
31-
32-
const funcMap = new Map();
33-
funcMap.set('equalText', true);
14+
const operatorMap = new Map([
15+
['+', 'add'],
16+
['-', 'subtract'],
17+
['*', 'multiply'],
18+
['/', 'divide'],
19+
['>', 'larger'],
20+
21+
['<', 'smaller'],
22+
['>=', 'largerEq'],
23+
['<=', 'smallerEq'],
24+
['==', 'equal'],
25+
['!=', 'unequal'],
26+
27+
['and', 'and'],
28+
['or', 'or'],
29+
['xor', 'xor'],
30+
['not', 'not'],
31+
]);
32+
33+
const funcMap = new Map([
34+
['equalText', true],
35+
]);
3436

3537
function _getScope(
3638
variables: {
@@ -93,7 +95,7 @@ function _handleDragOver(e: DragEvent) {
9395
e.dataTransfer!.dropEffect = 'move';
9496
}
9597

96-
async function _init() {
98+
async function _initMath() {
9799
// math
98100
if (!(window as any).math) {
99101
await loadScript('https://unpkg.com/[email protected]/lib/browser/math.js');
@@ -337,60 +339,7 @@ export class ExpressionVisualizerWebComponent extends LitElement {
337339
return { node: null, parent: null };
338340
}
339341

340-
private _changedHandler(e: CustomEvent) {
341-
e.preventDefault();
342-
343-
const blocks: MathNode[] = JSON.parse(JSON.stringify(this._blocks));
344-
345-
const { sourceId, targetId } = e.detail;
346-
// console.log({ sourceId, targetId });
347-
const { node: sourceNode, parent: sourceParent } = this._findNodeAndParent(
348-
blocks,
349-
sourceId
350-
);
351-
const { node: targetNode, parent: targetParent } = this._findNodeAndParent(
352-
blocks,
353-
targetId
354-
);
355-
356-
// console.log({ sourceNode, sourceParent, targetNode, targetParent });
357-
const { path, index } = sourceNode!;
358-
// console.log({ path, index });
359-
360-
sourceNode!.path = targetNode!.path;
361-
sourceNode!.index = targetNode!.index;
362-
// console.log(targetNode!.path, targetNode!.index)
363-
targetParent!.args!.splice(targetNode!.index!, 1, sourceNode!);
364-
365-
if (sourceParent) {
366-
sourceParent!.args!.splice(index!, 1, {
367-
type: 'ConstantNode',
368-
value: 'U',
369-
uuid: uuidv4(),
370-
isUnknown: true,
371-
path,
372-
index,
373-
});
374-
this._blocks = blocks;
375-
} else {
376-
this._blocks = blocks.filter(block => block.uuid !== sourceNode!.uuid);
377-
}
378-
379-
// 表达式
380-
this._generateExpression();
381-
}
382-
383-
private _deleteBlock(index: number) {
384-
return () => {
385-
this._blocks = this._blocks.filter((_, i) => i !== index);
386-
// 手动触发更新
387-
// this.requestUpdate();
388-
389-
// 表达式
390-
this._generateExpression();
391-
};
392-
}
393-
342+
// 添加常量
394343
private _addConstantNode() {
395344
let { value }: { value: boolean | number | string } = this._input;
396345
if (!value) return;
@@ -416,50 +365,12 @@ export class ExpressionVisualizerWebComponent extends LitElement {
416365
// 表达式
417366
this._generateExpression();
418367
}
419-
420368
private _handleKeydown(e: KeyboardEvent) {
421-
// console.log(this);
422369
if (e.key === 'Enter') {
423370
this._addConstantNode();
424371
}
425372
}
426-
427-
private _handleDrop() {
428-
return (e: DragEvent) => {
429-
e.preventDefault();
430-
431-
// console.log("---- drop 2");
432-
if ((e.target as HTMLElement).className !== 'expression-visualizer')
433-
return;
434-
435-
const blocks: MathNode[] = JSON.parse(JSON.stringify(this._blocks));
436-
437-
const id = e.dataTransfer!.getData('text/plain');
438-
// console.log(this);
439-
// console.log(this._findNodeAndParent);
440-
const { node, parent } = this._findNodeAndParent(blocks, id);
441-
442-
// console.log({ node, parent })
443-
if (!node || !parent) return;
444-
445-
// 原来的位置替换为 UNKNOWN
446-
parent!.args!.splice(node!.index!, 1, {
447-
type: 'ConstantNode',
448-
value: 'U',
449-
uuid: uuidv4(),
450-
isUnknown: true,
451-
path: node!.path,
452-
index: node!.index!,
453-
});
454-
455-
// e.target 一定是class="expression-visualizer" 的 div
456-
this._blocks = [...blocks, node!];
457-
458-
// 表达式
459-
this._generateExpression();
460-
};
461-
}
462-
373+
// 添加运算符
463374
private _addOperatorNode(name: string) {
464375
return () => {
465376
let block: MathNode;
@@ -517,7 +428,7 @@ export class ExpressionVisualizerWebComponent extends LitElement {
517428
this._generateExpression();
518429
};
519430
}
520-
431+
// 添加函数
521432
private _addFunctionNode(name: string) {
522433
return () => {
523434
const block = {
@@ -554,7 +465,7 @@ export class ExpressionVisualizerWebComponent extends LitElement {
554465
this._generateExpression();
555466
};
556467
}
557-
468+
// 添加变量
558469
private _addSymbolNode(name: string) {
559470
return () => {
560471
const block = {
@@ -569,7 +480,100 @@ export class ExpressionVisualizerWebComponent extends LitElement {
569480
this._generateExpression();
570481
};
571482
}
483+
// 修改
484+
// 子组件上报事件
485+
// 拖拽一个表达式到另一个表达式的插槽
486+
private _handleChanged(e: CustomEvent) {
487+
e.preventDefault();
488+
489+
const blocks: MathNode[] = JSON.parse(JSON.stringify(this._blocks));
490+
491+
const { sourceId, targetId } = e.detail;
492+
// console.log({ sourceId, targetId });
493+
const { node: sourceNode, parent: sourceParent } = this._findNodeAndParent(
494+
blocks,
495+
sourceId
496+
);
497+
const { node: targetNode, parent: targetParent } = this._findNodeAndParent(
498+
blocks,
499+
targetId
500+
);
501+
502+
// console.log({ sourceNode, sourceParent, targetNode, targetParent });
503+
const { path, index } = sourceNode!;
504+
// console.log({ path, index });
505+
506+
sourceNode!.path = targetNode!.path;
507+
sourceNode!.index = targetNode!.index;
508+
// console.log(targetNode!.path, targetNode!.index)
509+
targetParent!.args!.splice(targetNode!.index!, 1, sourceNode!);
510+
511+
if (sourceParent) {
512+
sourceParent!.args!.splice(index!, 1, {
513+
type: 'ConstantNode',
514+
value: 'U',
515+
uuid: uuidv4(),
516+
isUnknown: true,
517+
path,
518+
index,
519+
});
520+
this._blocks = blocks;
521+
} else {
522+
this._blocks = blocks.filter(block => block.uuid !== sourceNode!.uuid);
523+
}
524+
525+
// 表达式
526+
this._generateExpression();
527+
}
528+
// 修改
529+
// 拖拽表达式到画布空白处
530+
private _handleDrop() {
531+
return (e: DragEvent) => {
532+
e.preventDefault();
533+
534+
// console.log("---- drop 2");
535+
if ((e.target as HTMLElement).className !== 'expression-visualizer')
536+
return;
537+
538+
const blocks: MathNode[] = JSON.parse(JSON.stringify(this._blocks));
539+
540+
const id = e.dataTransfer!.getData('text/plain');
541+
542+
const { node, parent } = this._findNodeAndParent(blocks, id);
543+
544+
// console.log({ node, parent })
545+
if (!node || !parent) return;
546+
547+
// 原来的位置替换为 UNKNOWN
548+
parent!.args!.splice(node!.index!, 1, {
549+
type: 'ConstantNode',
550+
value: 'U',
551+
uuid: uuidv4(),
552+
isUnknown: true,
553+
path: node!.path,
554+
index: node!.index!,
555+
});
556+
557+
// e.target 一定是class="expression-visualizer" 的 div
558+
this._blocks = [...blocks, node!];
559+
560+
// 表达式
561+
this._generateExpression();
562+
};
563+
}
564+
// 删除 block
565+
private _deleteBlock(index: number) {
566+
return () => {
567+
this._blocks = this._blocks.filter((_, i) => i !== index);
568+
// 手动触发更新
569+
// this.requestUpdate();
570+
571+
// 表达式
572+
this._generateExpression();
573+
};
574+
}
572575

576+
// 将表达式字符串转换为 blocks
573577
private _setExpression(expression: string) {
574578
if (this._expression === expression) return;
575579
this._expression = expression;
@@ -584,7 +588,7 @@ export class ExpressionVisualizerWebComponent extends LitElement {
584588
connectedCallback() {
585589
super.connectedCallback();
586590

587-
_init().then((hasMath: boolean) => {
591+
_initMath().then((hasMath: boolean) => {
588592
this._hasMath = hasMath;
589593

590594
const detail = { hasMath };
@@ -623,6 +627,7 @@ export class ExpressionVisualizerWebComponent extends LitElement {
623627
) {
624628
if (!this._hasMath) return;
625629

630+
// 每当传入表达式字符串发生变化时，都会触发这个函数
626631
this._setExpression(this.expression);
627632
// eslint-disable-next-line no-console
628633
console.log(
@@ -694,7 +699,7 @@ export class ExpressionVisualizerWebComponent extends LitElement {
694699
}
695700
return html`
696701
<tree-component
697-
@changed=${this._changedHandler}
702+
@changed=${this._handleChanged}
698703
.block=${block}
699704
></tree-component>
700705
<button

0 commit comments

Comments
 (0)