@/utils#deepCopy TypeScript Examples

The following examples show how to use @/utils#deepCopy. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: App.tsx    From ant-simple-draw with MIT License 5 votes vote down vote up
App: FC = () => {
  const { allModuleConfigList } = useGetCompentConfigList();

  const { decompose } = useEdit();

  const dispatch = useDispatch();

  const [isClickComponent, curComponent] = useSelector(
    createSelector([(state: storeType) => state.component], (component) => {
      return [component.isClickComponent, component.curComponent] as const;
    }),
  );

  const handleDrop: React.DragEventHandler<HTMLDivElement> = async (e) => {
    e.preventDefault();
    e.stopPropagation();
    const id = e.dataTransfer.getData('id');
    const rectInfo = $('#editor').getBoundingClientRect();
    if (id) {
      const component = deepCopy(
        getSingleArrayVal<templateDateInterface>(allModuleConfigList, 'id', id),
      ) as templateDataType;
      component.style!.top = e.clientY - rectInfo.y;
      component.style!.left = e.clientX - rectInfo.x;
      component.propValue.x = component.style!.left;
      component.propValue.y = component.style!.top;
      component.componentId = getRandomStr();
      dispatch(addComponent(component));
      dispatch(recordSnapshot());
    }
  };

  const handleDragOver: React.DragEventHandler<HTMLDivElement> = (e) => {
    e.preventDefault();
    // console.log(`onDragOver------`, e);
  };

  const handleMouseUp: React.MouseEventHandler<HTMLDivElement> = (e) => {
    // 这里点击空白区域的时候,不选中组件,且按键不显示
    if (!isClickComponent) {
      if (curComponent && curComponent.component === 'Group') {
        decompose(curComponent, [curComponent.componentId!]);
      }
      dispatch(curComponentAction(null));
    }
    if (e.button !== 2) {
      dispatch(hideContextMenuAction());
    }
  };
  return (
    <>
      <Toolbar />
      <div className={styles.main}>
        <div className={styles.left}>
          <SliderNav />
        </div>
        <div className={styles.center}>
          <div
            className={styles.content}
            onDrop={handleDrop}
            onDragOver={handleDragOver}
            onMouseDown={(e) => {
              dispatch(isClickComponentAction(false));
            }}
            onMouseUp={handleMouseUp}
          >
            <Edit />
          </div>
        </div>
        <div className={styles.right}>
          <Attr />
        </div>
      </div>
    </>
  );
}