Wonderful review
Getting started with online IDE development: implementing an online code editor from scratch
Summary of TS core knowledge points and analysis of actual project cases
Preface
When I was writing H5-dooring, I found that the popover we used would flicker, and even the first flicker, there will be a flicker in the other direction every time.
So I probably checked Baidu, and basically said that you need to fix the width and height. After trying it, I found it to be useless. Even if the trigger component and the pop-up element are given the width and height, it will also flicker. Since the underlying implementation of antd's popover is a set of other third-party libraries, the third-party libraries use other front-end components, so Lockheart implements one by itself.
text
Initial realization
First of all, I implemented popover roughly, mainly because of a pop-up window positioning problem. Then I realized it as I expected and found that there would be a flicker, but only the first time it would flicker, and then it was normal: you can see, first The secondary display will be on the left, and subsequent display positions are ok. So the idea is to let it be processed when it is displayed for the first time, and the animation effect is realized by the way, so that it will not appear so abrupt. Since I want to make a zero dependency other than react, I don't consider react-transition-group or styledcomponent, and directly perform hand animation.
Realization idea
From the above figure, we can find that the first drift problem is solved directly by animation, just set opacity to 0.
@keyframes yhmodalopenanimate{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes yhmodalcloseanimate{
0%{
opacity:1;
}
100%{
opacity: 0;
}
}
.yhmodalopen{
animation: yhmodalopenanimate 0.15s ease-in;
}
.yhmodalclose{
animation: yhmodalcloseanimate 0.15s ease-in;
}
复制代码
In the implementation process, I found that if the element (that is, the wrapped element plus the element of the pop-up window) deforms or has that kind of animation that changes the shape, it will cause the positioning to be incorrect. I need to get the dom of both when calculating the position. . In addition, you need to expose the forced refresh method. In some cases, you need to refresh the function, such as listening to the resize event of windows, so that after the position changes, click again and it will not appear to the original position.
code show as below:
useEffect(() => {
if (callback) {
callback(() => forceRender((v) => v + 1));
}
}, [callback]);
useEffect(() => {
const handler = () => {
forceRender((prev) => prev + 1);
};
window.addEventListener("resize", handler);
return () => {
window.removeEventListener("resize", handler);
};
}, [forceRender]);
复制代码
There is also the problem of monitoring events. Here I expose the parameters to let the user determine whether they need to click outside the Modal to close. The rest is physical work, just count the position:
export type PopDirections =
| "TL"
| "TOP"
| "TR"
| "LT"
| "LEFT"
| "LB"
| "BL"
| "BOTTOM"
| "BR"
| "RT"
| "RIGHT"
| "RB";
export function switchPosition(
sign: PopDirections,
modalrect: DOMRect,
popconfirmrect: DOMRect,
scroll: number
): CSSProperties {
let triangle = 8;
switch (sign) {
case "TL":
return {
top: popconfirmrect.top + scroll - modalrect.height - triangle,
left: popconfirmrect.left,
};
case "TOP":
....
case "TR":
....
.........
}
}
复制代码
Show results
You can see the final effect of my popover in the H5 editor (H 5-Dooring), which can completely replace the antd popover component and is lightweight.
Popover address: https://www.npmjs.com/package/yh-react-popover
There is a specific usage introduction.
At present, the first landing version of our H5-Dooring is basically completed, and the main functions are as follows:
Drag and display of component library
Component library dynamic editing
H5 page real-time/scan code preview function
Download H5 page configuration file
Save as template library function
H5 mobile terminal cross-terminal adaptation
Media component (video component)
Online download website code function
Add typescript support
Form designer/custom form component
Visual chart component realization, including editing chart, chart data import and export
Online programming module (Mini Web IDE)
Add a picture library, support users to select picture materials online
Add customer service robot
Preliminary completion of dooring management background
The number of fixed bugs is 20+, and the github issue processing rate is 92%. You are welcome to submit interesting issues.
Planning feature
Support PSD file import one key to generate H5
Interactive component development
Audio component development
Nestable component development
At last
The author of the above tutorial has been integrated into H5-Dooring. For some more complex interactive functions, it can also be realized through reasonable design. You can explore and study by yourself.
github????：H5-Dooring
If you want to learn more H5 games, webpack, node, gulp, css3, javascript, nodeJS, canvas data visualization and other front-end knowledge and actual combat, welcome to study and discuss together in "Interesting Frontend" to explore the front-end boundary together.