diff --git a/frontend/realtime/src/KonvaApp/Engine.ts b/frontend/realtime/src/KonvaApp/Engine.ts index 0ba0082587..b24f88f0bf 100644 --- a/frontend/realtime/src/KonvaApp/Engine.ts +++ b/frontend/realtime/src/KonvaApp/Engine.ts @@ -1,6 +1,5 @@ import Konva from "konva"; - import { uiAccess, uiEvents } from "~/signals"; import { ShapeNode } from "./Nodes"; @@ -99,7 +98,6 @@ export class Engine { this.stage.add(this.nodeIsolationLayer); this.stage.add(this.uiLayer); - // Konva Transformer this.nodeTransformer = new NodeTransformer(); this.uiLayer.add(this.nodeTransformer.getKonvaNode()); @@ -120,7 +118,7 @@ export class Engine { height: VideoResolutions.SQUARE_1024.height, mediaLayerRef: this.mediaLayer, bgLayerRef: this.bgLayer, - offScreenCanvas: this.offScreenCanvas + offScreenCanvas: this.offScreenCanvas, }); // Collection of all Nodes @@ -180,13 +178,8 @@ export class Engine { // hence, lastly, setup these events this.setupEventSystem(); this.setAppMode(AppModes.SELECT); - - - } - - private setAppMode(newAppMode: AppModes) { this.appMode = newAppMode; switch (this.appMode) { @@ -368,7 +361,6 @@ export class Engine { uiEvents.toolbarMain.SAVE.onClick(async (/*event*/) => { await this.realTimeDrawEngine.saveOutput(); - }); uiEvents.toolbarMain.SELECT.onClick(() => { @@ -411,8 +403,6 @@ export class Engine { this.addImage(image); }); - - uiEvents.onAddTextToEngine((textdata) => { this.addText(textdata); }); @@ -477,7 +467,7 @@ export class Engine { return; } this.changeNodeColor(nodeColor); - }) + }); } disableAllButtons() { @@ -513,7 +503,7 @@ export class Engine { } // Sandbox is quickly a way to test your idea. - public async sandbox() { } + public async sandbox() {} public onMessage(event: MessageEvent) { console.log("Message From Shared Worker"); @@ -541,9 +531,9 @@ export class Engine { x: 10, y: 80, text: "", - fontSize: 24, + fontSize: 18, fontFamily: "Source Sans 3", - fill: "black", + fill: "white", }); const anim = new Konva.Animation((frame) => { if (frame && import.meta.env.DEV) { @@ -561,18 +551,20 @@ export class Engine { } private changeNodeColor(nodeColor: NodeColor) { - console.log('Changing node color:', nodeColor); + console.log("Changing node color:", nodeColor); // Find the node that is selected with the id - const idSelector = '#' + nodeColor.kNodeId; + const idSelector = "#" + nodeColor.kNodeId; const selectedNode = this.mediaLayer.findOne(idSelector); - console.log('Selected node:', selectedNode); - console.log('ID selector:', idSelector); - console.log('Media layer:', this.mediaLayer); + console.log("Selected node:", selectedNode); + console.log("ID selector:", idSelector); + console.log("Media layer:", this.mediaLayer); // TODO: Change the color of the node // Turns out shapes are image nodes... how do we change the image's fill?? if (selectedNode) { // Get the shape node from the real time drawing engine's image nodes - const shapeNode = this.realTimeDrawEngine.findImageNodeById(nodeColor.kNodeId); + const shapeNode = this.realTimeDrawEngine.findImageNodeById( + nodeColor.kNodeId, + ); if (shapeNode && shapeNode instanceof ShapeNode) { // Create new shape node with updated color const newShapeNode = new ShapeNode({ @@ -582,7 +574,7 @@ export class Engine { size: shapeNode.size, color: nodeColor.color, mediaLayerRef: this.mediaLayer, - selectionManagerRef: this.selectionManager + selectionManagerRef: this.selectionManager, }); newShapeNode.kNode.position(shapeNode.kNode.position()); newShapeNode.kNode.zIndex(shapeNode.kNode.zIndex()); @@ -613,7 +605,7 @@ export class Engine { size: size, color: color, mediaLayerRef: this.mediaLayer, - selectionManagerRef: this.selectionManager + selectionManagerRef: this.selectionManager, }); shapeNode.kNode.zIndex(1); // Replace desiredZIndex with a number @@ -677,7 +669,7 @@ export class Engine { if ( longestVideoNode === undefined || node.videoComponent.duration > - longestVideoNode.videoComponent.duration + longestVideoNode.videoComponent.duration ) { longestVideoNode = node; } diff --git a/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts b/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts index 8fe24454e7..7e28a2120d 100644 --- a/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts +++ b/frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts @@ -23,7 +23,6 @@ interface ShapeNodeConstructor { } export class ShapeNode extends NetworkedNode { - retry(): void { throw new Error("Method not implemented."); } @@ -36,7 +35,7 @@ export class ShapeNode extends NetworkedNode { canvasSize, shapeType, size, - color = "#ff0000", // Default red if no color provided + color = "#2D81FF", // Default red if no color provided transform: existingTransform, mediaLayerRef, selectionManagerRef, @@ -49,7 +48,7 @@ export class ShapeNode extends NetworkedNode { }); let shape = null; - + switch (shapeType) { case ShapeType.CIRCLE: const circleShape = new Konva.Circle({ @@ -72,7 +71,7 @@ export class ShapeNode extends NetworkedNode { width: circleShape.width(), height: circleShape.height(), ...transform, - fill: 'transparent', + fill: "transparent", strokeScaleEnabled: false, draggable: true, }); @@ -107,7 +106,7 @@ export class ShapeNode extends NetworkedNode { width: squareShape.width(), height: squareShape.height(), ...transform, - fill: 'transparent', + fill: "transparent", strokeScaleEnabled: false, draggable: true, }); @@ -142,7 +141,7 @@ export class ShapeNode extends NetworkedNode { width: triangleShape.width(), height: triangleShape.height(), ...transform, - fill: 'transparent', + fill: "transparent", strokeScaleEnabled: false, draggable: true, }); diff --git a/frontend/realtime/src/KonvaApp/Nodes/constants.ts b/frontend/realtime/src/KonvaApp/Nodes/constants.ts index e6f46020ae..c2a1fcc1c8 100644 --- a/frontend/realtime/src/KonvaApp/Nodes/constants.ts +++ b/frontend/realtime/src/KonvaApp/Nodes/constants.ts @@ -4,12 +4,12 @@ export enum NodeType { IMAGE = "image", TEXT = "text", VIDEO = "video", - SHAPE = "shape" + SHAPE = "shape", } export const transparent = Colors.transparent; export const primaryOrange = Colors.primaryOrange; -export const highlightStrokeWidth = 10; +export const highlightStrokeWidth = 2; export const minNodeSize = { width: 200, height: 200, diff --git a/frontend/realtime/src/KonvaApp/NodesManagers/SelectorSquare.ts b/frontend/realtime/src/KonvaApp/NodesManagers/SelectorSquare.ts index 0f8247fd9d..4ca69ecb58 100644 --- a/frontend/realtime/src/KonvaApp/NodesManagers/SelectorSquare.ts +++ b/frontend/realtime/src/KonvaApp/NodesManagers/SelectorSquare.ts @@ -40,8 +40,9 @@ export class SelectorSquare { stageRef: Konva.Stage; }) { this.kSquare = new Konva.Rect({ - fill: " rgb(250, 128, 114, 0.3)", - stroke: "salmon", + fill: "rgba(45, 129, 255, 0.3)", + stroke: "#00a1ff", + strokeWidth: 1, visible: false, // disable events to not interrupt with events listening: false, diff --git a/frontend/realtime/src/KonvaApp/constants.ts b/frontend/realtime/src/KonvaApp/constants.ts index 79e10cbae9..964a1bb87c 100644 --- a/frontend/realtime/src/KonvaApp/constants.ts +++ b/frontend/realtime/src/KonvaApp/constants.ts @@ -16,5 +16,5 @@ export const VideoResolutions = { export const Colors = { transparent: "rgba(0,0,0,0)", translucentBlack: "rgba(0,0,0,0.3)", - primaryOrange: "rgba(230,100,98,1)", + primaryOrange: "rgba(45, 129, 255, 1)", }; diff --git a/frontend/realtime/src/KonvaRootComponent/SignaledPromptSlider.tsx b/frontend/realtime/src/KonvaRootComponent/SignaledPromptSlider.tsx index 308a87151c..a8391ce567 100644 --- a/frontend/realtime/src/KonvaRootComponent/SignaledPromptSlider.tsx +++ b/frontend/realtime/src/KonvaRootComponent/SignaledPromptSlider.tsx @@ -1,22 +1,28 @@ - import { useSignalEffect } from "@preact/signals-react"; -import { Slider } from "~/components/ui" -import { dispatchUiEvents } from "~/signals" +import { Slider } from "~/components/ui"; +import { dispatchUiEvents } from "~/signals"; import { promptStrength } from "~/signals/uiEvents/promptSettings"; export const SignaledPromptSlider = () => { + const sliderValue = promptStrength.value; + const onSliderValueChanged = + dispatchUiEvents.promptSettings.setPromptStrength; - const sliderValue = promptStrength.value - const onSliderValueChanged = dispatchUiEvents.promptSettings.setPromptStrength + // This makes component re-render whenever the signal value changes + useSignalEffect(() => { + promptStrength.value; + }); - // This makes component re-render whenever the signal value changes - useSignalEffect(() => { - promptStrength.value; - }) - - return ( -
- -
- ) -} \ No newline at end of file + return ( +
+ +
+ ); +}; diff --git a/frontend/realtime/src/KonvaRootComponent/SignaledPromptText.tsx b/frontend/realtime/src/KonvaRootComponent/SignaledPromptText.tsx index 8ab5130141..a5203ab6aa 100644 --- a/frontend/realtime/src/KonvaRootComponent/SignaledPromptText.tsx +++ b/frontend/realtime/src/KonvaRootComponent/SignaledPromptText.tsx @@ -1,31 +1,17 @@ import { useSignalEffect } from "@preact/signals-react"; -import { useCallback, useEffect, useRef } from "react"; +import { useRef } from "react"; import { ResizeType, Textarea } from "~/components/ui"; import { dispatchUiEvents } from "~/signals"; import { promptText } from "~/signals/uiEvents/promptSettings"; -export const SignaledPromptText = ({ -}) => { +export const SignaledPromptText = ({}) => { const textAreaRef = useRef(null); - const focusOnTextArea = useCallback(() => { - if (textAreaRef.current === null) { - return; - } - textAreaRef.current.focus(); - }, []); - - useEffect(() => { - focusOnTextArea(); - }, []); const TextAreaStates = { - style: { - width: "530px", - height: "200px", - }, - placeholder: "", + placeholder: "Type your prompt here...", label: "", resize: "none" as ResizeType, + rows: 3, }; const textContent = promptText.value; @@ -36,11 +22,18 @@ export const SignaledPromptText = ({ // This makes component re-render whenever the signal value changes useSignalEffect(() => { promptText.value; - }) + }); return ( -
-