Restyle context menu

frontend/realtime/src/KonvaApp/Nodes/BaseNode.ts

@@ -166,7 +166,7 @@ export abstract class BaseNode {
       // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which
       // 3: Right mouse button
       // If right click, let context event handle it
-      if (e.evt.button === 3) {
+      if (e.evt.button === 2) {
         return;
       }
 
@@ -182,7 +182,7 @@ export abstract class BaseNode {
       // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which
       // 3: Right mouse button
       // If right click, let context event handle it
-      if (e.evt.button === 3) {
+      if (e.evt.button === 2) {
         return;
       }
 

frontend/realtime/src/KonvaApp/Nodes/ShapeNode.ts

@@ -30,6 +30,7 @@ export class ShapeNode extends NetworkedNode {
 
   public shapeType: ShapeType;
   public size: number;
+  public color: string;
 
   constructor({
     canvasPosition,
@@ -171,6 +172,7 @@ export class ShapeNode extends NetworkedNode {
 
     this.shapeType = shapeType;
     this.size = size;
+    this.color = color;
 
     // Add shape to group
     const centerPosition = NodeUtilities.positionNodeOnCanvasCenter({

frontend/realtime/src/KonvaApp/NodesManagers/SelectionManager.ts

@@ -289,7 +289,7 @@ export class SelectionManager {
           knodeIds: [node.kNode.id()],
           locked: node.isLocked(),
           buttonStates: getShapeNodeButtonStates({ locked: node.isLocked() }),
-          color: node.getNodeData({ x: 0, y: 0 })?.textNodeData?.color ?? "#000000",
+          color: node.color
         });
       }
       else if (node instanceof TextNode) {

frontend/realtime/src/KonvaRootComponent/ContextualToolbarNode.tsx

@@ -8,6 +8,7 @@ import { dispatchUiEvents } from "~/signals/uiEvents";
 import { ToolbarNode } from "~/components/features/ToolbarNode";
 import { ToolbarNodeButtonNames } from "~/components/features/ToolbarNode/enums";
 import { transitionTimingStyles } from "~/components/styles";
+import { useSignals } from "@preact/signals-react/runtime";
 
 export const ContextualToolbarNode = () => {
   const [winSize, setWinSize] = useState<{ width: number; height: number }>({
@@ -64,6 +65,9 @@ export const ContextualToolbarNode = () => {
     dispatchUiEvents.toolbarNode.setSelectedColor({ kNodeId: nodeID, color });
   }
 
+  useSignals();
+  const color = uiAccess.toolbarNode.signal.value.color;
+
   const boundedTopPosition = Math.min(position.y, winSize.height - 164);
   return (
     <Transition
@@ -85,7 +89,7 @@ export const ContextualToolbarNode = () => {
         onLockClicked={(e) => {
           dispatchUiEvents.toolbarNode.lock(e);
         }}
-        color={uiAccess.toolbarNode.signal.value.color}
+        color={color}
         onColorChange={handleColorChange}
       />
     </Transition>

frontend/realtime/src/components/features/ToolbarNode/ToolbarNode.tsx

@@ -14,6 +14,7 @@ import { paperWrapperStyles, toolTipStyles } from "~/components/styles";
 import { ToolbarNodeButtonNames } from "./enums";
 import { ToolbarNodeButtonData } from "./data";
 import { ColorPicker } from "~/components/ui/TextEditor/ColorPicker";
+import { DEFAULT_PAINT_COLOR } from "~/signals/uiEvents/toolbarMain/paintMode";
 
 export interface ToolbarNodeProps {
   disabled?: boolean;
@@ -35,7 +36,7 @@ export const ToolbarNode = ({
   lockDisabled,
   onLockClicked,
   buttonsProps,
-  color = "#000000",
+  color = DEFAULT_PAINT_COLOR,
   onColorChange = () => { },
 }: ToolbarNodeProps) => {
   const handleOnLockClicked: React.MouseEventHandler<HTMLButtonElement> = (
@@ -46,12 +47,13 @@ export const ToolbarNode = ({
     }
   };
   const lockDisabledOrUnknown = lockDisabled || locked === "unknown";
+  const lockText = locked === "unknown" ? "Unavailable" : locked ? "Unlock" : "Lock"
   return (
     <div
       className={twMerge(
         paperWrapperStyles,
         disabled && "pointer-events-none cursor-default bg-ui-border shadow-md",
-        "flex flex-col gap-2 transition",
+        "flex flex-col gap-1 transition",
       )}
     >
       <ToolbarButton
@@ -60,12 +62,10 @@ export const ToolbarNode = ({
             locked && "text-primary hover:bg-primary hover:text-white",
             lockDisabledOrUnknown &&
             "text-secondary-300 hover:text-secondary-300",
+            "w-full p-2"
           ),
           disabled: lockDisabledOrUnknown,
         }}
-        tooltip={
-          locked === "unknown" ? "Unavailable" : locked ? "Unlock" : "Lock"
-        }
         icon={
           locked === "unknown"
             ? faUnlockKeyhole
@@ -74,7 +74,9 @@ export const ToolbarNode = ({
               : faLockKeyholeOpen
         }
         onClick={handleOnLockClicked}
-      />
+      >
+        <span className="text-[16px]">{lockText}</span>
+      </ToolbarButton>
       <span className="border-r border-r-ui-border" />
       {ToolbarNodeButtonData.map((buttonDatum, idx) => {
         const buttonProps = buttonsProps?.[buttonDatum.name];
@@ -87,14 +89,18 @@ export const ToolbarNode = ({
           return (
             <ToolbarButton
               icon={buttonDatum.icon}
-              tooltip={buttonDatum.tooltip}
               key={idx}
-              buttonProps={buttonProps}
-            />
+              buttonProps={{ ...buttonProps, className: "w-full p-2" }}
+            >
+              <span className="text-[16px]">{buttonDatum.tooltip}</span>
+            </ToolbarButton>
+
           );
         } else {
           return (
-            <ColorPicker color={color} onChange={onColorChange} faIcon={faPalette} borderStyle="" key={idx} />
+            <ColorPicker color={color} onChange={onColorChange} faIcon={faPalette} borderStyle="w-full justify-start h-auto gap-2.5 text-white/80" showBar={false} key={idx}>
+              <span className="text-[16px]">{buttonDatum.tooltip}</span>
+            </ColorPicker>
           )
         }
       })}

frontend/realtime/src/components/ui/TextEditor/ColorPicker.tsx

@@ -26,6 +26,7 @@ export const ColorPicker = ({
   streamChanges = false,
   defaultOpen = false,
   closeOnMouseLeave = false,
+  children,
 }: {
   color: string;
   onChange: (newColor: string) => void;
@@ -39,6 +40,7 @@ export const ColorPicker = ({
   streamChanges?: boolean;
   defaultOpen?: boolean;
   closeOnMouseLeave?: boolean;
+  children?: React.ReactNode;
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   const [{ currColor, textInput }, setStates] = useState<{
@@ -87,8 +89,8 @@ export const ColorPicker = ({
           <PopoverButton
             className={twMerge(
               "flex size-10 items-center gap-1 rounded-lg bg-ui-controls p-2",
-              borderStyle,
               showBar ? "flex-col" : "justify-center",
+              borderStyle,
             )}
             style={fillBg ? { backgroundColor: prevColor } : {}}
             onMouseEnter={() => defaultOpen && setIsOpen(true)}
@@ -97,6 +99,7 @@ export const ColorPicker = ({
               icon={faIcon}
               color={staticIconColor ?? (fillBg ? undefined : prevColor)}
             />
+            {children}
             {showBar && (
               <span
                 className="h-1 w-full"

frontend/realtime/src/signals/uiAccess/toolbarNode.ts

@@ -1,6 +1,7 @@
 import { signal } from "@preact/signals-react";
 import { ContextualUi } from "./type";
 import { ToolbarNodeButtonNames as ButtonNames } from "~/components/features/ToolbarNode/enums";
+import { DEFAULT_PAINT_COLOR } from "../uiEvents/toolbarMain/paintMode";
 
 type ButtonStates = {
   [key in ButtonNames]: {
@@ -33,7 +34,7 @@ const toolbarNodeSignal = signal<ContextualToolbarProps>({
   locked: false,
   lockDisabled: false,
   buttonStates: initButtonStates(),
-  color: "#000000",
+  color: DEFAULT_PAINT_COLOR,
 });
 
 export const toolbarNode = {