Skip to content

Commit c754027

Browse files
cruxcodecruxcode
authored
added overlay hints (#705)
* bugfix: before_app_load to unset the comp id state * handleBreakpointChange & bugfix * removed console.log * select overlay done * overlay for hover done * bugfix: update hovered on re-hoverWhileSelected * removed console.log
1 parent 8127a39 commit c754027

File tree

20 files changed

+643
-19
lines changed

20 files changed

+643
-19
lines changed

‎packages/atri-app-core/src/canvasMachine.ts‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -375,10 +375,6 @@ function mouseIsNotBackInTheRepositionComponent(
375375
context: CanvasMachineContext,
376376
event: MOUSE_UP_EVENT
377377
) {
378-
console.log(
379-
"mouseIsNotBackInTheRepositionComponent",
380-
!mouseIsBackInTheRepositionComponent(context, event)
381-
);
382378
return !mouseIsBackInTheRepositionComponent(context, event);
383379
}
384380

@@ -409,7 +405,9 @@ type SubscribeStates =
409405
| typeof COMPONENT_REWIRED
410406
| typeof PROPS_UPDATED
411407
| typeof KEY_UP
412-
| typeof KEY_DOWN;
408+
| typeof KEY_DOWN
409+
| "hoverWhileSelected"
410+
| "hoverWhileSelectedEnd";
413411

414412
export function createCanvasMachine(id: string) {
415413
const subscribers: { [key in SubscribeStates]: Callback[] } = {
@@ -436,6 +434,8 @@ export function createCanvasMachine(id: string) {
436434
[PROPS_UPDATED]: [],
437435
[KEY_UP]: [],
438436
[KEY_DOWN]: [],
437+
hoverWhileSelected: [],
438+
hoverWhileSelectedEnd: [],
439439
};
440440
function subscribeCanvasMachine(state: SubscribeStates, cb: Callback) {
441441
subscribers[state].push(cb);
@@ -653,6 +653,7 @@ export function createCanvasMachine(id: string) {
653653
[MOUSE_MOVE]: {
654654
target: hoverWhileSelected,
655655
cond: selectedDifferentComponent,
656+
actions: ["setHoverComponent"],
656657
},
657658
},
658659
},
@@ -661,10 +662,21 @@ export function createCanvasMachine(id: string) {
661662
[MOUSE_MOVE]: {
662663
target: hoverWhileSelected,
663664
cond: selectedDifferentComponent,
665+
actions: ["setHoverComponent"],
664666
},
665667
[SCROLL]: { target: selectIdle },
666668
[OUTSIDE_CANVAS]: { target: selectIdle },
667669
},
670+
entry: (context, event) => {
671+
callSubscribers("hoverWhileSelected", context, event);
672+
},
673+
exit: (context, event) => {
674+
callSubscribers(
675+
"hoverWhileSelectedEnd",
676+
context,
677+
event
678+
);
679+
},
668680
},
669681
},
670682
},

‎packages/atri-app-core/src/editor-components/CanvasOverlay/CanvasOverlay.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1-
import { useDragDrop } from "./hooks/useDragDrop";
1+
import { useDragDrop, useSelectHints } from "./hooks";
2+
import { useHoverHints } from "./hooks/useHoverHints";
23

34
export function CanvasOverlay() {
45
const { dragFC, dragOverlayStyle } = useDragDrop();
6+
useSelectHints();
7+
useHoverHints();
58
return (
69
<>
710
{dragFC?.Comp && dragOverlayStyle ? (

‎packages/atri-app-core/src/editor-components/CanvasOverlay/components/FilledLine.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export type FilledLineProps = {
2+
fill: string;
3+
};
4+
5+
export const FilledLine: React.FC<FilledLineProps> = (props) => {
6+
return (
7+
<div
8+
style={{ background: props.fill, height: "100%", width: "100%" }}
9+
></div>
10+
);
11+
};

‎packages/atri-app-core/src/editor-components/CanvasOverlay/components/OpacityBox.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export type OpacityBoxProps = {
2+
opacity: number;
3+
};
4+
5+
export const OpacityBox: React.FC<OpacityBoxProps> = (props) => {
6+
return (
7+
<div
8+
style={{
9+
opacity: props.opacity,
10+
height: "100%",
11+
width: "100%",
12+
backgroundColor: "white",
13+
}}
14+
></div>
15+
);
16+
};

‎packages/atri-app-core/src/editor-components/CanvasOverlay/hooks/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from "./useDragDrop";
2+
export * from "./useSelectHints";

‎packages/atri-app-core/src/editor-components/CanvasOverlay/hooks/useHoverHints.tsx‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import { orange600 } from "@atrilabs/design-system";
2+
import { useEffect, useRef, useCallback } from "react";
3+
import { subscribeCanvasMachine } from "../../../api";
4+
import { getId } from "../../../utils/getId";
5+
import {
6+
removeHintOverlays,
7+
addOrModifyHintOverlays,
8+
} from "../../VisualHints/hintOverlays";
9+
import { FilledLine } from "../components/FilledLine";
10+
11+
const thickness = 2;
12+
13+
export function useHoverHints() {
14+
const topLineHoverId = useRef<string | null>(null);
15+
const rightLineHoverId = useRef<string | null>(null);
16+
const bottomLineHoverId = useRef<string | null>(null);
17+
const leftLineHoverId = useRef<string | null>(null);
18+
const compId = useRef<string | null>(null);
19+
20+
const clearOverlay = useCallback(() => {
21+
if (topLineHoverId.current) {
22+
removeHintOverlays([topLineHoverId.current]);
23+
topLineHoverId.current = null;
24+
}
25+
if (rightLineHoverId.current) {
26+
removeHintOverlays([rightLineHoverId.current]);
27+
rightLineHoverId.current = null;
28+
}
29+
if (bottomLineHoverId.current) {
30+
removeHintOverlays([bottomLineHoverId.current]);
31+
bottomLineHoverId.current = null;
32+
}
33+
if (leftLineHoverId.current) {
34+
removeHintOverlays([leftLineHoverId.current]);
35+
leftLineHoverId.current = null;
36+
}
37+
}, []);
38+
39+
const renderFn = useCallback(() => {
40+
if (
41+
topLineHoverId.current &&
42+
rightLineHoverId.current &&
43+
bottomLineHoverId.current &&
44+
leftLineHoverId.current &&
45+
compId.current
46+
) {
47+
// top line
48+
addOrModifyHintOverlays({
49+
[topLineHoverId.current]: {
50+
compId: compId.current,
51+
comp: <FilledLine fill={orange600} />,
52+
overlayId: topLineHoverId.current,
53+
box: (dim) => {
54+
return {
55+
dimension: {
56+
width: dim.dimension.width,
57+
height: thickness,
58+
},
59+
position: { top: -thickness, left: 0 },
60+
};
61+
},
62+
},
63+
});
64+
// right line
65+
addOrModifyHintOverlays({
66+
[rightLineHoverId.current]: {
67+
compId: compId.current,
68+
comp: <FilledLine fill={orange600} />,
69+
overlayId: rightLineHoverId.current,
70+
box: (dim) => {
71+
return {
72+
dimension: {
73+
width: thickness,
74+
height: dim.dimension.height + 2 * thickness,
75+
},
76+
position: { top: -thickness, left: dim.dimension.width },
77+
};
78+
},
79+
},
80+
});
81+
// bottom line
82+
addOrModifyHintOverlays({
83+
[bottomLineHoverId.current]: {
84+
compId: compId.current,
85+
comp: <FilledLine fill={orange600} />,
86+
overlayId: bottomLineHoverId.current,
87+
box: (dim) => {
88+
return {
89+
dimension: {
90+
width: dim.dimension.width,
91+
height: thickness,
92+
},
93+
position: { top: dim.dimension.height, left: 0 },
94+
};
95+
},
96+
},
97+
});
98+
// left line
99+
addOrModifyHintOverlays({
100+
[leftLineHoverId.current]: {
101+
compId: compId.current,
102+
comp: <FilledLine fill={orange600} />,
103+
overlayId: leftLineHoverId.current,
104+
box: (dim) => {
105+
return {
106+
dimension: {
107+
width: thickness,
108+
height: dim.dimension.height + 2 * thickness,
109+
},
110+
position: { top: -thickness, left: -thickness },
111+
};
112+
},
113+
},
114+
});
115+
}
116+
}, []);
117+
118+
useEffect(() => {
119+
return subscribeCanvasMachine("hover", (context) => {
120+
topLineHoverId.current = getId();
121+
rightLineHoverId.current = getId();
122+
bottomLineHoverId.current = getId();
123+
leftLineHoverId.current = getId();
124+
compId.current = context.hovered;
125+
renderFn();
126+
});
127+
}, []);
128+
129+
useEffect(() => {
130+
return subscribeCanvasMachine("hoverEnd", () => {
131+
clearOverlay();
132+
compId.current = null;
133+
});
134+
}, []);
135+
136+
useEffect(() => {
137+
return subscribeCanvasMachine("hoverWhileSelected", (context) => {
138+
topLineHoverId.current = getId();
139+
rightLineHoverId.current = getId();
140+
bottomLineHoverId.current = getId();
141+
leftLineHoverId.current = getId();
142+
compId.current = context.hovered;
143+
renderFn();
144+
});
145+
}, []);
146+
147+
useEffect(() => {
148+
return subscribeCanvasMachine("hoverWhileSelectedEnd", () => {
149+
clearOverlay();
150+
compId.current = null;
151+
});
152+
}, []);
153+
}

‎packages/atri-app-core/src/editor-components/CanvasOverlay/hooks/useSelectHints.tsx‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
import { orange600 } from "@atrilabs/design-system";
2+
import { useEffect, useRef, useCallback } from "react";
3+
import { subscribeCanvasMachine } from "../../../api";
4+
import { getId } from "../../../utils/getId";
5+
import {
6+
removeHintOverlays,
7+
addOrModifyHintOverlays,
8+
} from "../../VisualHints/hintOverlays";
9+
import { FilledLine } from "../components/FilledLine";
10+
11+
const thickness = 2;
12+
13+
export function useSelectHints() {
14+
const topLineHoverId = useRef<string | null>(null);
15+
const rightLineHoverId = useRef<string | null>(null);
16+
const bottomLineHoverId = useRef<string | null>(null);
17+
const leftLineHoverId = useRef<string | null>(null);
18+
const compId = useRef<string | null>(null);
19+
20+
const clearOverlay = useCallback(() => {
21+
if (topLineHoverId.current) {
22+
removeHintOverlays([topLineHoverId.current]);
23+
topLineHoverId.current = null;
24+
}
25+
if (rightLineHoverId.current) {
26+
removeHintOverlays([rightLineHoverId.current]);
27+
rightLineHoverId.current = null;
28+
}
29+
if (bottomLineHoverId.current) {
30+
removeHintOverlays([bottomLineHoverId.current]);
31+
bottomLineHoverId.current = null;
32+
}
33+
if (leftLineHoverId.current) {
34+
removeHintOverlays([leftLineHoverId.current]);
35+
leftLineHoverId.current = null;
36+
}
37+
}, []);
38+
39+
const renderFn = useCallback(() => {
40+
if (
41+
topLineHoverId.current &&
42+
rightLineHoverId.current &&
43+
bottomLineHoverId.current &&
44+
leftLineHoverId.current &&
45+
compId.current
46+
) {
47+
// top line
48+
addOrModifyHintOverlays({
49+
[topLineHoverId.current]: {
50+
compId: compId.current,
51+
comp: <FilledLine fill={orange600} />,
52+
overlayId: topLineHoverId.current,
53+
box: (dim) => {
54+
return {
55+
dimension: {
56+
width: dim.dimension.width,
57+
height: thickness,
58+
},
59+
position: { top: -thickness, left: 0 },
60+
};
61+
},
62+
},
63+
});
64+
// right line
65+
addOrModifyHintOverlays({
66+
[rightLineHoverId.current]: {
67+
compId: compId.current,
68+
comp: <FilledLine fill={orange600} />,
69+
overlayId: rightLineHoverId.current,
70+
box: (dim) => {
71+
return {
72+
dimension: {
73+
width: thickness,
74+
height: dim.dimension.height + 2 * thickness,
75+
},
76+
position: { top: -thickness, left: dim.dimension.width },
77+
};
78+
},
79+
},
80+
});
81+
// bottom line
82+
addOrModifyHintOverlays({
83+
[bottomLineHoverId.current]: {
84+
compId: compId.current,
85+
comp: <FilledLine fill={orange600} />,
86+
overlayId: bottomLineHoverId.current,
87+
box: (dim) => {
88+
return {
89+
dimension: {
90+
width: dim.dimension.width,
91+
height: thickness,
92+
},
93+
position: { top: dim.dimension.height, left: 0 },
94+
};
95+
},
96+
},
97+
});
98+
// left line
99+
addOrModifyHintOverlays({
100+
[leftLineHoverId.current]: {
101+
compId: compId.current,
102+
comp: <FilledLine fill={orange600} />,
103+
overlayId: leftLineHoverId.current,
104+
box: (dim) => {
105+
return {
106+
dimension: {
107+
width: thickness,
108+
height: dim.dimension.height + 2 * thickness,
109+
},
110+
position: { top: -thickness, left: -thickness },
111+
};
112+
},
113+
},
114+
});
115+
}
116+
}, []);
117+
118+
useEffect(() => {
119+
return subscribeCanvasMachine("select", (context, event) => {
120+
topLineHoverId.current = getId();
121+
rightLineHoverId.current = getId();
122+
bottomLineHoverId.current = getId();
123+
leftLineHoverId.current = getId();
124+
compId.current = context.selected;
125+
renderFn();
126+
});
127+
}, []);
128+
129+
useEffect(() => {
130+
return subscribeCanvasMachine("selectEnd", (context, event) => {
131+
clearOverlay();
132+
compId.current = null;
133+
});
134+
}, []);
135+
}

0 commit comments

Comments
 (0)