From f4996cac6483e0884bfc6992c14135265c03ff4b Mon Sep 17 00:00:00 2001 From: _Kerman Date: Thu, 30 Nov 2023 17:38:09 +0800 Subject: [PATCH] upd: adapt to changes in refina --- packages/monaco-editor/src/component.r.ts | 37 +++-- packages/northstar/src/app.r.ts | 49 +++--- .../src/blocks/component/getContent.r.ts | 16 +- .../src/blocks/special/FuncBlockBase.r.ts | 8 +- packages/northstar/src/views/preview.r.ts | 106 ++++++------- packages/northstar/src/views/properties.r.ts | 5 +- .../runtime/src/components/appLayout.r.ts | 8 +- packages/runtime/src/components/button.r.ts | 4 +- packages/runtime/src/components/card.r.ts | 6 +- packages/runtime/src/components/div.r.ts | 4 +- packages/runtime/src/components/forEach.r.ts | 4 +- packages/runtime/src/components/ifElse.r.ts | 4 +- packages/runtime/src/components/input.r.ts | 10 +- packages/runtime/src/components/list.r.ts | 10 +- .../runtime/src/components/paragraph.r.ts | 4 +- packages/runtime/src/components/span.r.ts | 4 +- packages/runtime/src/components/subPage.r.ts | 6 +- packages/runtime/src/components/table.r.ts | 10 +- .../runtime/src/components/tableItem.r.ts | 4 +- packages/runtime/src/components/textNode.r.ts | 4 +- packages/visual-flow/src/view/block.r.ts | 4 +- packages/visual-flow/src/view/creator.r.ts | 4 +- packages/visual-flow/src/view/graph.r.ts | 139 +++++++++--------- packages/visual-flow/src/view/socket.r.ts | 6 +- 24 files changed, 225 insertions(+), 231 deletions(-) diff --git a/packages/monaco-editor/src/component.r.ts b/packages/monaco-editor/src/component.r.ts index c6a4190..5e30410 100644 --- a/packages/monaco-editor/src/component.r.ts +++ b/packages/monaco-editor/src/component.r.ts @@ -1,12 +1,5 @@ import * as monaco from "monaco-editor"; -import { - ComponentContext, - D, - HTMLElementComponent, - TriggerComponent, - getD, - ref, -} from "refina"; +import { Context, HTMLElementComponent, TriggerComponent, ref } from "refina"; import Monaco from "./plugin"; @Monaco.triggerComponent("monacoEditor") @@ -14,7 +7,7 @@ export class MonacoEditor extends TriggerComponent { containerRef = ref>(); editor: monaco.editor.IStandaloneCodeEditor | null = null; main( - _: ComponentContext, + _: Context, initialValue: string, language: string, options: Omit< @@ -25,8 +18,8 @@ export class MonacoEditor extends TriggerComponent { _.$css`height:100%`; _.$ref(this.containerRef) && _._div(); - if (_.$updating) { - _.$app.pushHook("afterModifyDOM", () => { + if (_.$updateState) { + _.$app.pushOnetimeHook("afterModifyDOM", () => { setTimeout(() => { if (!this.editor) { const node = this.containerRef.current!.node; @@ -44,17 +37,21 @@ export class MonacoEditor extends TriggerComponent { const parent = node.parentElement!; - window.addEventListener("resize", () => { - // make editor as small as possible - this.editor!.layout({ width: 0, height: 0 }); + if (_.$updateState) + window.addEventListener("resize", () => { + // make editor as small as possible + this.editor!.layout({ width: 0, height: 0 }); - // wait for next frame to ensure last layout finished - window.requestAnimationFrame(() => { - // get the parent dimensions and re-layout the editor - const rect = parent.getBoundingClientRect(); - this.editor!.layout({ width: rect.width, height: rect.height }); + // wait for next frame to ensure last layout finished + window.requestAnimationFrame(() => { + // get the parent dimensions and re-layout the editor + const rect = parent.getBoundingClientRect(); + this.editor!.layout({ + width: rect.width, + height: rect.height, + }); + }); }); - }); } }); }); diff --git a/packages/northstar/src/app.r.ts b/packages/northstar/src/app.r.ts index 0ebc3fb..8b773ac 100644 --- a/packages/northstar/src/app.r.ts +++ b/packages/northstar/src/app.r.ts @@ -28,7 +28,9 @@ setAutoSaveInterval(); initMonaco(); app.use(FluentUI).use(Vf).use(Basics).use(Monaco)(_ => { - _.$rootCls`fixed top-0 left-0 right-0 bottom-0`; + if (_.$updateState) { + _.$root.addCls(`fixed top-0 left-0 right-0 bottom-0`); + } _.documentTitle("Quasi Studio"); @@ -84,29 +86,30 @@ app.use(FluentUI).use(Vf).use(Basics).use(Monaco)(_ => { _.$ref(graphElRef) && _._div({}, _ => _.vfGraph(currentProject.activeGraph)); - _.$app.registerDocumentEventListener("keydown", ev => { - if (ev.ctrlKey) { - if (ev.key === "z" && currentProject.activeGraph.canUndo) { - currentProject.activeGraph.undo(); - _.$update(); - } else if (ev.key === "y" && currentProject.activeGraph.canRedo) { - currentProject.activeGraph.redo(); - _.$update(); - } else if (ev.key === "s") { - saveAs(); - } else if (ev.key === "d" && hasBlocksToDuplicate()) { - duplicateBlocks(); - _.$update(); - } - ev.preventDefault(); - } else if (ev.key === "Delete") { - if (hasBlocksToRemove()) { - removeBlocks(); - _.$update(); + if (_.$updateState) + _.$window.addEventListener("keydown", ev => { + if (ev.ctrlKey) { + if (ev.key === "z" && currentProject.activeGraph.canUndo) { + currentProject.activeGraph.undo(); + _.$update(); + } else if (ev.key === "y" && currentProject.activeGraph.canRedo) { + currentProject.activeGraph.redo(); + _.$update(); + } else if (ev.key === "s") { + saveAs(); + } else if (ev.key === "d" && hasBlocksToDuplicate()) { + duplicateBlocks(); + _.$update(); + } + ev.preventDefault(); + } else if (ev.key === "Delete") { + if (hasBlocksToRemove()) { + removeBlocks(); + _.$update(); + } + ev.preventDefault(); } - ev.preventDefault(); - } - }); + }); // a workaround to update the position of the graph setTimeout(() => currentProject.activeGraph.updatePosition()); diff --git a/packages/northstar/src/blocks/component/getContent.r.ts b/packages/northstar/src/blocks/component/getContent.r.ts index 71d4b21..4d59af7 100644 --- a/packages/northstar/src/blocks/component/getContent.r.ts +++ b/packages/northstar/src/blocks/component/getContent.r.ts @@ -33,13 +33,15 @@ export function getContent(block: ComponentBlock) { false, primaryInputInfo.displayName, ); - inputRef.current!.inputRef.current!.node.onchange = () => { - currentProject.activeGraph.pushRecord(); - }; - inputRef.current!.inputRef.current!.node.onfocus = () => { - currentProject.activeGraph.addSelectedBlock(block, false); - _.$update(); - }; + if (_.$updateState) { + inputRef.current!.inputRef.current!.node.onchange = () => { + currentProject.activeGraph.pushRecord(); + }; + inputRef.current!.inputRef.current!.node.onfocus = () => { + currentProject.activeGraph.addSelectedBlock(block, false); + _.$update(); + }; + } }, ); }; diff --git a/packages/northstar/src/blocks/special/FuncBlockBase.r.ts b/packages/northstar/src/blocks/special/FuncBlockBase.r.ts index 8016706..e97c5cc 100644 --- a/packages/northstar/src/blocks/special/FuncBlockBase.r.ts +++ b/packages/northstar/src/blocks/special/FuncBlockBase.r.ts @@ -72,9 +72,11 @@ export abstract class FuncBlockBase extends RectBlock implements SpecialBlock { _.fTextarea(this.inputValue, false, this.placeholder, "none") : _.$css`min-height:24px;margin-left:-4px` && _.fUnderlineTextInput(this.inputValue, false, this.placeholder)); - inputRef.current!.inputRef.current!.node.onchange = () => { - currentProject.activeGraph.pushRecord(); - }; + if (_.$updateState) { + inputRef.current!.inputRef.current!.node.onchange = () => { + currentProject.activeGraph.pushRecord(); + }; + } if (this.useTextarea) { const slots = this.slots; diff --git a/packages/northstar/src/views/preview.r.ts b/packages/northstar/src/views/preview.r.ts index 202f918..14be6b7 100644 --- a/packages/northstar/src/views/preview.r.ts +++ b/packages/northstar/src/views/preview.r.ts @@ -48,7 +48,6 @@ export default view(_ => { _._pre({}, errorMsg); } - _.$noPreserve(); _.$ref(iframe) && _._iframe({ // src: iframeURL, @@ -57,65 +56,66 @@ export default view(_ => { height: "100%", }); - _.$app.pushHook("afterModifyDOM", () => { - if (!_.$updating || !codeModified) return; - codeModified = false; - const iframeNode = iframe.current!.node; - - iframeNode.src = iframeURL; - iframeNode.onload = () => { - if (errorMsg !== "") { - errorMsg = ""; - _.$update(); - } - - iframeNode.contentWindow!.onerror = ( - event: Event | string, - source?: string, - lineno?: number, - colno?: number, - error?: Error, - ) => { - if (errorReported) return; - - errorMsg = `ERROR: ${event} + _.$updateState && + _.$app.pushOnetimeHook("afterModifyDOM", () => { + if (!_.$updateState || !codeModified) return; + codeModified = false; + const iframeNode = iframe.current!.node; + + iframeNode.src = iframeURL; + iframeNode.onload = () => { + if (errorMsg !== "") { + errorMsg = ""; + _.$update(); + } + + iframeNode.contentWindow!.onerror = ( + event: Event | string, + source?: string, + lineno?: number, + colno?: number, + error?: Error, + ) => { + if (errorReported) return; + + errorMsg = `ERROR: ${event} source: ${source} lineno: ${lineno} colno: ${colno} error: ${error}`; - _.$update(); - errorReported = true; - }; - //@ts-ignore - iframeNode.contentWindow!.console.error = (...args: any[]) => { - errorMsg += "\nCONSOLE ERROR: \n" + args.join(" "); - console.error(...args); - _.$update(); - }; - - const scriptNode = iframeNode.contentDocument!.getElementById( - "app-script", - ) as HTMLScriptElement; - scriptNode.innerHTML = code.js; - - const styleNode = iframeNode.contentDocument!.getElementById( - "app-style", - ) as HTMLStyleElement; - styleNode.innerHTML = code.css; + _.$update(); + errorReported = true; + }; + //@ts-ignore + iframeNode.contentWindow!.console.error = (...args: any[]) => { + errorMsg += "\nCONSOLE ERROR: \n" + args.join(" "); + console.error(...args); + _.$update(); + }; + + const scriptNode = iframeNode.contentDocument!.getElementById( + "app-script", + ) as HTMLScriptElement; + scriptNode.innerHTML = code.js; - if (import.meta.env.DEV) { const styleNode = iframeNode.contentDocument!.getElementById( - "mdui-style-dev", - ) as HTMLLinkElement; - styleNode.href = mduiStyleUrl; - } else { - const styleNode = iframeNode.contentDocument!.getElementById( - "mdui-style", + "app-style", ) as HTMLStyleElement; - styleNode.innerHTML = mduiStyleContent; - } - }; - }); + styleNode.innerHTML = code.css; + + if (import.meta.env.DEV) { + const styleNode = iframeNode.contentDocument!.getElementById( + "mdui-style-dev", + ) as HTMLLinkElement; + styleNode.href = mduiStyleUrl; + } else { + const styleNode = iframeNode.contentDocument!.getElementById( + "mdui-style", + ) as HTMLStyleElement; + styleNode.innerHTML = mduiStyleContent; + } + }; + }); }); diff --git a/packages/northstar/src/views/properties.r.ts b/packages/northstar/src/views/properties.r.ts index b164b64..4ba378d 100644 --- a/packages/northstar/src/views/properties.r.ts +++ b/packages/northstar/src/views/properties.r.ts @@ -12,7 +12,10 @@ export default view(_ => { { onclick: () => { ( - r.current?.$mainEl?.firstChild as HTMLElement | null | undefined + r.current?.$mainEl?.node.firstChild as + | HTMLElement + | null + | undefined )?.focus(); }, }, diff --git a/packages/runtime/src/components/appLayout.r.ts b/packages/runtime/src/components/appLayout.r.ts index 4267d6a..27a3de4 100644 --- a/packages/runtime/src/components/appLayout.r.ts +++ b/packages/runtime/src/components/appLayout.r.ts @@ -1,7 +1,7 @@ /// import { - ComponentContext, Content, + Context, HTMLElementComponent, OutputComponent, ref, @@ -40,11 +40,7 @@ export class AppLayoutModel { @QuasiRuntime.outputComponent("qAppLayout") export class QAppLayout extends OutputComponent { navRailRef = ref>(); - main( - _: ComponentContext, - model: AppLayoutModel, - props: AppLayoutProps, - ): void { + main(_: Context, model: AppLayoutModel, props: AppLayoutProps): void { _.$cls(props.class); _.$css`position:fixed;width:100%;height:100%`; _.mdLayout(_ => { diff --git a/packages/runtime/src/components/button.r.ts b/packages/runtime/src/components/button.r.ts index d59ff07..96e3993 100644 --- a/packages/runtime/src/components/button.r.ts +++ b/packages/runtime/src/components/button.r.ts @@ -1,4 +1,4 @@ -import { ComponentContext, Content, OutputComponent } from "refina"; +import { Content, Context, OutputComponent } from "refina"; import QuasiRuntime from "../plugin"; import { component, content, event, input, textProp } from "../types"; @@ -27,7 +27,7 @@ export interface ButtonProps { @QuasiRuntime.outputComponent("qButton") export class QButton extends OutputComponent { - main(_: ComponentContext, props: ButtonProps): void { + main(_: Context, props: ButtonProps): void { _.$cls(props.class); if (_.mdButton(props.inner, props.disabled)) { props.onClick(); diff --git a/packages/runtime/src/components/card.r.ts b/packages/runtime/src/components/card.r.ts index 29fcf44..9cbae0c 100644 --- a/packages/runtime/src/components/card.r.ts +++ b/packages/runtime/src/components/card.r.ts @@ -1,6 +1,6 @@ -import { OutputComponent, ComponentContext, Content } from "refina"; +import { Content, Context, OutputComponent } from "refina"; +import { Direction, component, content, textProp } from ".."; import QuasiRuntime from "../plugin"; -import { component, content, Direction, textProp } from ".."; export default component({ displayName: () => "Card", @@ -21,7 +21,7 @@ export interface CardProps { @QuasiRuntime.outputComponent("qCard") export class QCard extends OutputComponent { - main(_: ComponentContext, props: CardProps): void { + main(_: Context, props: CardProps): void { _.$css`width:100%;padding:18px;padding-top:0`; _.$cls(props.class); _._mdui_card( diff --git a/packages/runtime/src/components/div.r.ts b/packages/runtime/src/components/div.r.ts index e0e832a..77aaffb 100644 --- a/packages/runtime/src/components/div.r.ts +++ b/packages/runtime/src/components/div.r.ts @@ -1,4 +1,4 @@ -import { ComponentContext, Content, OutputComponent } from "refina"; +import { Content, Context, OutputComponent } from "refina"; import QuasiRuntime from "../plugin"; import { component, content, textProp } from "../types"; @@ -19,7 +19,7 @@ export interface DivProps { @QuasiRuntime.outputComponent("qDiv") export class QDiv extends OutputComponent { - main(_: ComponentContext, props: DivProps): void { + main(_: Context, props: DivProps): void { _.$cls(props.class); _._div({}, props.inner); } diff --git a/packages/runtime/src/components/forEach.r.ts b/packages/runtime/src/components/forEach.r.ts index a6c214e..cc14725 100644 --- a/packages/runtime/src/components/forEach.r.ts +++ b/packages/runtime/src/components/forEach.r.ts @@ -1,4 +1,4 @@ -import { ComponentContext, Content, OutputComponent } from "refina"; +import { Content, Context, OutputComponent } from "refina"; import QuasiRuntime from "../plugin"; import { component, content, input, output } from "../types"; @@ -27,7 +27,7 @@ export class ForEachModel { @QuasiRuntime.outputComponent("qForEach") export class QForEach extends OutputComponent { - main(_: ComponentContext, model: ForEachModel, props: ForEachProps): void { + main(_: Context, model: ForEachModel, props: ForEachProps): void { let index = 0; for (const v of props.iterable) { model.current = v; diff --git a/packages/runtime/src/components/ifElse.r.ts b/packages/runtime/src/components/ifElse.r.ts index ae23f61..a006470 100644 --- a/packages/runtime/src/components/ifElse.r.ts +++ b/packages/runtime/src/components/ifElse.r.ts @@ -1,4 +1,4 @@ -import { ComponentContext, Content, OutputComponent } from "refina"; +import { Content, Context, OutputComponent } from "refina"; import QuasiRuntime from "../plugin"; import { Direction, component, content, input } from "../types"; @@ -21,7 +21,7 @@ export interface IfElseProps { @QuasiRuntime.outputComponent("qIfElse") export class QIfElse extends OutputComponent { - main(_: ComponentContext, props: IfElseProps): void { + main(_: Context, props: IfElseProps): void { if (props.condition) { _.embed(props.then); } else { diff --git a/packages/runtime/src/components/input.r.ts b/packages/runtime/src/components/input.r.ts index cd654cb..b2b8df1 100644 --- a/packages/runtime/src/components/input.r.ts +++ b/packages/runtime/src/components/input.r.ts @@ -1,4 +1,4 @@ -import { ComponentContext, OutputComponent, fromProp } from "refina"; +import { Context, OutputComponent, fromProp } from "refina"; import QuasiRuntime from "../plugin"; import { component, @@ -50,7 +50,7 @@ export interface InputProps { label: string; initial: string; disabled: boolean; - onInput: (newVal: string) => void; + onInput: (newVal: string | number) => void; validator: (value: string) => string | true; } @@ -70,7 +70,7 @@ export class InputModel { @QuasiRuntime.outputComponent("qInput") export class QInput extends OutputComponent { - main(_: ComponentContext, model: InputModel, props: InputProps): void { + main(_: Context, model: InputModel, props: InputProps): void { model.type = props.type; model.value ??= props.initial; _.$cls(props.class); @@ -84,7 +84,9 @@ export class QInput extends OutputComponent { ) : _.mdTextField(fromProp(model, "_value"), props.label, props.disabled) ) { - props.onInput?.(props.type === "number" ? +_.$ev : _.$ev); + //@ts-ignore + const newVal = _.$ev as string; + props.onInput?.(props.type === "number" ? +newVal : newVal); } } } diff --git a/packages/runtime/src/components/list.r.ts b/packages/runtime/src/components/list.r.ts index 3c7b518..da68c5f 100644 --- a/packages/runtime/src/components/list.r.ts +++ b/packages/runtime/src/components/list.r.ts @@ -1,10 +1,4 @@ -import { - ComponentContext, - Content, - OutputComponent, - byIndex, - bySelf, -} from "refina"; +import { Content, Context, OutputComponent, byIndex, bySelf } from "refina"; import QuasiRuntime from "../plugin"; import { component, content, input, output, textProp } from "../types"; @@ -38,7 +32,7 @@ export class ListModel { @QuasiRuntime.outputComponent("qList") export class QList extends OutputComponent { - main(_: ComponentContext, model: ListModel, props: ListProps): void { + main(_: Context, model: ListModel, props: ListProps): void { _.$cls(props.class); _.mdList( props.data, diff --git a/packages/runtime/src/components/paragraph.r.ts b/packages/runtime/src/components/paragraph.r.ts index c620307..d87543c 100644 --- a/packages/runtime/src/components/paragraph.r.ts +++ b/packages/runtime/src/components/paragraph.r.ts @@ -1,4 +1,4 @@ -import { ComponentContext, Content, OutputComponent } from "refina"; +import { Content, Context, OutputComponent } from "refina"; import QuasiRuntime from "../plugin"; import { component, content, textProp } from "../types"; @@ -19,7 +19,7 @@ export interface ParagraphProps { @QuasiRuntime.outputComponent("qParagraph") export class QParagraph extends OutputComponent { - main(_: ComponentContext, props: ParagraphProps): void { + main(_: Context, props: ParagraphProps): void { _.$cls(props.class); _._p({}, props.inner); } diff --git a/packages/runtime/src/components/span.r.ts b/packages/runtime/src/components/span.r.ts index 012d7a1..40d1eb2 100644 --- a/packages/runtime/src/components/span.r.ts +++ b/packages/runtime/src/components/span.r.ts @@ -1,4 +1,4 @@ -import { ComponentContext, Content, OutputComponent } from "refina"; +import { Content, Context, OutputComponent } from "refina"; import QuasiRuntime from "../plugin"; import { component, content, textProp } from "../types"; @@ -19,7 +19,7 @@ export interface SpanProps { @QuasiRuntime.outputComponent("qSpan") export class QSpan extends OutputComponent { - main(_: ComponentContext, props: SpanProps): void { + main(_: Context, props: SpanProps): void { _.$cls(props.class); _._span({}, props.inner); } diff --git a/packages/runtime/src/components/subPage.r.ts b/packages/runtime/src/components/subPage.r.ts index 339f8d9..6121382 100644 --- a/packages/runtime/src/components/subPage.r.ts +++ b/packages/runtime/src/components/subPage.r.ts @@ -1,7 +1,7 @@ -import { ComponentContext, Content, OutputComponent } from "refina"; +import { Content, Context, OutputComponent } from "refina"; import QuasiRuntime from "../plugin"; -import { AppLayoutModel, currentNavSymbol } from "./appLayout.r"; import { component, content, input, textProp } from "../types"; +import { AppLayoutModel, currentNavSymbol } from "./appLayout.r"; export default component({ displayName: () => "Sub page", @@ -24,7 +24,7 @@ export interface SubPageProps { @QuasiRuntime.outputComponent("qSubPage") export class QSubPage extends OutputComponent { - main(_: ComponentContext, props: SubPageProps): void { + main(_: Context, props: SubPageProps): void { const model = _.$runtimeData[currentNavSymbol] as AppLayoutModel; if (model.renderingState === "nav") { diff --git a/packages/runtime/src/components/table.r.ts b/packages/runtime/src/components/table.r.ts index a97f63d..4026cd1 100644 --- a/packages/runtime/src/components/table.r.ts +++ b/packages/runtime/src/components/table.r.ts @@ -1,10 +1,4 @@ -import { - ComponentContext, - Content, - OutputComponent, - byIndex, - bySelf, -} from "refina"; +import { Content, Context, OutputComponent, byIndex, bySelf } from "refina"; import QuasiRuntime from "../plugin"; import { Direction, @@ -51,7 +45,7 @@ export class TableModel { @QuasiRuntime.outputComponent("qTable") export class QTable extends OutputComponent { - main(_: ComponentContext, model: TableModel, props: TableProps): void { + main(_: Context, model: TableModel, props: TableProps): void { _.provide(currentTableSymbol, model, _ => { _.$cls(props.class); _.mdTable( diff --git a/packages/runtime/src/components/tableItem.r.ts b/packages/runtime/src/components/tableItem.r.ts index 2eb2cba..f0e6a36 100644 --- a/packages/runtime/src/components/tableItem.r.ts +++ b/packages/runtime/src/components/tableItem.r.ts @@ -1,4 +1,4 @@ -import { ComponentContext, Content, OutputComponent } from "refina"; +import { Content, Context, OutputComponent } from "refina"; import QuasiRuntime from "../plugin"; import { Direction, @@ -43,7 +43,7 @@ export class TableColModel { @QuasiRuntime.outputComponent("qTableCol") export class QTableCol extends OutputComponent { - main(_: ComponentContext, model: TableColModel, props: TableColProps): void { + main(_: Context, model: TableColModel, props: TableColProps): void { const currentTable = _.$runtimeData[currentTableSymbol] as TableModel; if (currentTable.renderingState === "head") { _.$cls(props.headClass); diff --git a/packages/runtime/src/components/textNode.r.ts b/packages/runtime/src/components/textNode.r.ts index bde3fae..d47e0b6 100644 --- a/packages/runtime/src/components/textNode.r.ts +++ b/packages/runtime/src/components/textNode.r.ts @@ -1,4 +1,4 @@ -import { ComponentContext, OutputComponent } from "refina"; +import { Context, OutputComponent } from "refina"; import QuasiRuntime from "../plugin"; import { component, content } from "../types"; @@ -15,7 +15,7 @@ export interface TextNodeProps { @QuasiRuntime.outputComponent("qTextNode") export class QTextNode extends OutputComponent { - main(_: ComponentContext, props: TextNodeProps): void { + main(_: Context, props: TextNodeProps): void { _.t(props.text ?? ""); } } diff --git a/packages/visual-flow/src/view/block.r.ts b/packages/visual-flow/src/view/block.r.ts index ffb0122..ad24e53 100644 --- a/packages/visual-flow/src/view/block.r.ts +++ b/packages/visual-flow/src/view/block.r.ts @@ -1,11 +1,11 @@ -import { ComponentContext, OutputComponent } from "refina"; +import { Context, OutputComponent } from "refina"; import { Block } from "../model"; import Vf from "../plugin"; import styles, { PADDING_FOR_SOCKETS } from "./block.styles"; @Vf.outputComponent("vfBlock") export class VfBlock extends OutputComponent { - main(_: ComponentContext, model: Block): void { + main(_: Context, model: Block): void { const { x, y } = model.attached ? model.graphPos : model.pagePos; const padding = PADDING_FOR_SOCKETS * model.graph.boardScale; diff --git a/packages/visual-flow/src/view/creator.r.ts b/packages/visual-flow/src/view/creator.r.ts index aa64c12..bc844cd 100644 --- a/packages/visual-flow/src/view/creator.r.ts +++ b/packages/visual-flow/src/view/creator.r.ts @@ -1,4 +1,4 @@ -import { ComponentContext, Content, D, TriggerComponent } from "refina"; +import { Content, Context, D, TriggerComponent } from "refina"; import { Block, Graph } from "../model"; import Vf from "../plugin"; import styles from "./creator.styles"; @@ -8,7 +8,7 @@ const DRAGGING_START_PADDING = 20; @Vf.triggerComponent("vfCreator") export class VfCreator extends TriggerComponent { main( - _: ComponentContext, + _: Context, graph: Graph, inner: D, factory: () => Block, diff --git a/packages/visual-flow/src/view/graph.r.ts b/packages/visual-flow/src/view/graph.r.ts index 04a445b..2f49f72 100644 --- a/packages/visual-flow/src/view/graph.r.ts +++ b/packages/visual-flow/src/view/graph.r.ts @@ -1,88 +1,89 @@ -import { ComponentContext, OutputComponent } from "refina"; +import { Context, OutputComponent } from "refina"; import { Graph } from "../model"; import Vf from "../plugin"; import styles from "./graph.styles"; @Vf.outputComponent("vfGraph") export class VfGraph extends OutputComponent { - main(_: ComponentContext, model: Graph): void { + main(_: Context, model: Graph): void { model.app = _.$app; - _.$app.registerWindowEventListener( - "resize", - () => { - model.onResize(); - // not update here, because it will cause performance issue - }, - { - passive: true, - }, - ); - _.$app.registerDocumentEventListener( - "mousemove", - ev => { + + if (_.$updateState) { + _.$window.addEventListener( + "resize", + () => { + model.onResize(); + // not update here, because it will cause performance issue + }, + { + passive: true, + }, + ); + _.$window.addEventListener( + "mousemove", + ev => { + model.setMousePos(ev); + if (model.onMouseMove((ev.buttons & 1) !== 0, ev.shiftKey)) { + window.getSelection()?.removeAllRanges(); + _.$update(); + } + }, + { + passive: true, + }, + ); + _.$window.addEventListener("mousedown", ev => { model.setMousePos(ev); - if (model.onMouseMove((ev.buttons & 1) !== 0, ev.shiftKey)) { + if (model.onMouseDown(ev.shiftKey)) { window.getSelection()?.removeAllRanges(); + if (document.activeElement instanceof HTMLElement) { + document.activeElement?.blur(); + } + ev.preventDefault(); _.$update(); + return false; } - }, - { - passive: true, - }, - ); - _.$app.registerDocumentEventListener("mousedown", ev => { - model.setMousePos(ev); - if (model.onMouseDown(ev.shiftKey)) { - window.getSelection()?.removeAllRanges(); - if (document.activeElement instanceof HTMLElement) { - document.activeElement?.blur(); - } - ev.preventDefault(); - _.$update(); - return false; - } - return true; - }); - _.$app.registerDocumentEventListener("mouseup", ev => { - model.setMousePos(ev); - if (model.onMouseUp(ev.shiftKey)) { - ev.preventDefault(); - _.$update(); - return false; - } - return true; - }); - _.$app.registerRootEventListener( - "wheel", - ev => { + return true; + }); + _.$window.addEventListener("mouseup", ev => { model.setMousePos(ev); - if (!model.isMouseInsideGraph) { - return; + if (model.onMouseUp(ev.shiftKey)) { + ev.preventDefault(); + _.$update(); + return false; } - if (ev.ctrlKey) { - if (model.onScaling(-ev.deltaY / 1500)) { - ev.preventDefault(); - _.$update(); - } - } else if (ev.shiftKey) { - if (model.onHorizontalScroll(ev.deltaY / 2)) { - ev.preventDefault(); - _.$update(); + return true; + }); + _.$root.addEventListener( + "wheel", + ev => { + model.setMousePos(ev); + if (!model.isMouseInsideGraph) { + return; } - } else { - if (model.onVerticalScroll(ev.deltaY / 2)) { - ev.preventDefault(); - _.$update(); + if (ev.ctrlKey) { + if (model.onScaling(-ev.deltaY / 1500)) { + ev.preventDefault(); + _.$update(); + } + } else if (ev.shiftKey) { + if (model.onHorizontalScroll(ev.deltaY / 2)) { + ev.preventDefault(); + _.$update(); + } + } else { + if (model.onVerticalScroll(ev.deltaY / 2)) { + ev.preventDefault(); + _.$update(); + } } - } - return true; - }, - { - passive: false, - }, - ); + return true; + }, + { + passive: false, + }, + ); - if (_.$updating) { model.blocks.forEach(block => block.updateSockets()); } diff --git a/packages/visual-flow/src/view/socket.r.ts b/packages/visual-flow/src/view/socket.r.ts index 65287b4..2973607 100644 --- a/packages/visual-flow/src/view/socket.r.ts +++ b/packages/visual-flow/src/view/socket.r.ts @@ -1,12 +1,12 @@ -import { ComponentContext, OutputComponent } from "refina"; +import { Context, OutputComponent } from "refina"; import { Socket } from "../model"; import Vf from "../plugin"; +import { Direction } from "../types"; import styles from "./socket.styles"; -import { Direction, Point } from "../types"; @Vf.outputComponent("vfSocket") export class VfSocket extends OutputComponent { - main(_: ComponentContext, model: Socket): void { + main(_: Context, model: Socket): void { styles.root(model.disabled)(_); _.$css`transform: translate(${model.blockDisplayX}px, ${model.blockDisplayY}px) scale(${model.graph.boardScale})`; _.$ref(model.ref) &&