diff --git a/frontend/src/components/visual-editor/v2/AdvancedLink/AdvancedLinkFactory.tsx b/frontend/src/components/visual-editor/v2/AdvancedLink/AdvancedLinkFactory.tsx index 79f63582..969c03b8 100644 --- a/frontend/src/components/visual-editor/v2/AdvancedLink/AdvancedLinkFactory.tsx +++ b/frontend/src/components/visual-editor/v2/AdvancedLink/AdvancedLinkFactory.tsx @@ -1,18 +1,18 @@ /* - * Copyright © 2024 Hexastack. All rights reserved. + * Copyright © 2025 Hexastack. All rights reserved. * * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). */ + import { css, keyframes } from "@emotion/react"; import styled from "@emotion/styled"; import { DefaultLinkFactory, DefaultLinkWidget, } from "@projectstorm/react-diagrams"; -import React from "react"; import { AdvancedLinkModel } from "./AdvancedLinkModel"; diff --git a/frontend/src/components/visual-editor/v2/BackgroundLayerWidget.tsx b/frontend/src/components/visual-editor/v2/BackgroundLayerWidget.tsx new file mode 100644 index 00000000..c8c3ae27 --- /dev/null +++ b/frontend/src/components/visual-editor/v2/BackgroundLayerWidget.tsx @@ -0,0 +1,62 @@ +/* + * Copyright © 2025 Hexastack. All rights reserved. + * + * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: + * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. + * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). + */ + +import { css } from "@emotion/react"; +import styled from "@emotion/styled"; +import { CanvasModel } from "@projectstorm/react-canvas-core"; +import * as React from "react"; +import { CSSProperties } from "react"; + +export interface BackgroundLayerWidgetProps { + model: CanvasModel; +} + +namespace S { + const shared = css` + top: 0; + left: 0; + right: 0; + bottom: 0; + position: absolute; + pointer-events: none; + transform-origin: 0 0; + width: 200%; + height: 200%; + overflow: visible; + background-color: #f2f4f7; + background-image: radial-gradient( + circle, + rgba(0, 0, 0, 0.075) 8%, + transparent 10% + ); + background-size: 16px 16px; + `; + + export const DivLayer = styled.div` + ${shared} + `; +} + +export class BackgroundLayerWidget extends React.Component< + React.PropsWithChildren +> { + constructor(props: BackgroundLayerWidgetProps) { + super(props); + this.state = {}; + } + + getTransformStyle(): CSSProperties { + return { + backgroundPosition: `${this.props.model.getOffsetX()}px ${this.props.model.getOffsetY()}px`, + }; + } + + render() { + return ; + } +} diff --git a/frontend/src/components/visual-editor/v2/CustomCanvasWidget.tsx b/frontend/src/components/visual-editor/v2/CustomCanvasWidget.tsx index eb356c78..5435932a 100644 --- a/frontend/src/components/visual-editor/v2/CustomCanvasWidget.tsx +++ b/frontend/src/components/visual-editor/v2/CustomCanvasWidget.tsx @@ -1,11 +1,12 @@ /* - * Copyright © 2024 Hexastack. All rights reserved. + * Copyright © 2025 Hexastack. All rights reserved. * * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). */ + import styled from "@emotion/styled"; import { CanvasEngine, @@ -14,6 +15,8 @@ import { } from "@projectstorm/react-diagrams"; import * as React from "react"; +import { BackgroundLayerWidget } from "./BackgroundLayerWidget"; + export interface DiagramProps { engine: CanvasEngine; className?: string; @@ -115,6 +118,7 @@ export class CustomCanvasWidget extends React.Component { this.props.engine.getActionEventBus().fireAction({ event }); }} > + ; {model.getLayers().map((layer) => { return ( diff --git a/frontend/src/components/visual-editor/v2/CustomDiagramNodes/NodeWidget.tsx b/frontend/src/components/visual-editor/v2/CustomDiagramNodes/NodeWidget.tsx index 5a330780..f0db023b 100644 --- a/frontend/src/components/visual-editor/v2/CustomDiagramNodes/NodeWidget.tsx +++ b/frontend/src/components/visual-editor/v2/CustomDiagramNodes/NodeWidget.tsx @@ -1,11 +1,12 @@ /* - * Copyright © 2024 Hexastack. All rights reserved. + * Copyright © 2025 Hexastack. All rights reserved. * * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms: * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission. * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file). */ + import BrokenImageOutlinedIcon from "@mui/icons-material/BrokenImageOutlined"; import ChatBubbleOutlineOutlinedIcon from "@mui/icons-material/ChatBubbleOutlineOutlined"; import ExtensionOutlinedIcon from "@mui/icons-material/ExtensionOutlined"; @@ -76,7 +77,7 @@ class NodeAbstractWidget extends React.Component< > {this.props.node.starts_conversation ? (
-
+
) : null}