queenshow/src/modules/editor/components/Viewport/Toolbar/index.tsx

import { useEditor } from "@/modules/editor";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import {
  TopToolbarsLeft,
  TopToolbarsRight,
} from "@/modules/editor/objects/Toolbars/topToolbars";
import { useLauncher } from "@/modules/launcher";
import { css, cx } from "@linaria/core";
import { IconPlus, IconReduce } from "@queenjs/icons";
import { InputNumber } from "ant-design-vue";
import { defineUI } from "queenjs";
import { TipIcons } from "../../TipIcons";
import { IconFit } from "@/assets/icons";
import History from "./History";
import SaveOrShare from "../Header/SaveOrShare";
export default defineUI({
  setup() {
    const editor = useEditor();
    const { controls, store, actions, helper } = editor;
    const { editorCtrl } = controls;
    const launcher = useLauncher();

    return () => {
      const comp = helper.findComp(controls.selectCtrl.gizmo.selectedIds[0]);
      const toolsLeft = comp
        ? TopToolbarsLeft.filter((t) => t.getVisible.call(editor, comp))
        : [];
      const toolsRight = comp
        ? TopToolbarsRight.filter((t) => t.getVisible.call(editor, comp))
        : [];

      const scale = editorCtrl.state.scale;

      return (
        <div>
          {false && (
            <div
              id="toptoolbar"
              class={"p-10px h-50px flex items-center justify-between"}
            >
              <div class="flex-grow flex items-center">
                {toolsLeft.map((item) => {
                  return (
                    <item.component
                      class="p-4px"
                      value={item.getValue?.(comp as DesignComp)}
                      onClick={() =>
                        item.onClick.call(editor, comp as DesignComp)
                      }
                    />
                  );
                })}
              </div>
              <div class="flex items-center">
                {toolsRight.map((item) => {
                  return (
                    <item.component
                      class="p-4px"
                      value={item.getValue?.(comp as DesignComp)}
                      onClick={() =>
                        item.onClick.call(editor, comp as DesignComp)
                      }
                    />
                  );
                })}
              </div>
            </div>
          )}
          <div class={"p-10px h-55px  flex items-center justify-between"}>
            <History class="ml-20px" />
            <SaveOrShare />
          </div>

          <div class="absolute bottom-30px right-20px flex items-center justify-center z-1000 space-x-10px">
            
            <div
              class={cx(group, "flex items-center p-4px rounded bg-[#262626]")}
            >
              <IconFit
                class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
                onClick={() => editorCtrl.autoInScreen()}
              />
              <IconReduce
                class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
                onClick={() => editorCtrl.clickChangeScale(scale - 0.1)}
              />
              <IconPlus
                class="text-light-50 text-36px cursor-pointer rounded transition hover:bg-dark-800"
                onClick={() => editorCtrl.clickChangeScale(scale + 0.1)}
              />
              <InputNumber
                min={0.5}
                max={2}
                bordered={false}
                controls={false}
                value={scale}
                class="!w-60px text-center !bg-[#303030] rounded"
                formatter={(v: any) => Math.floor(v * 100) + "%"}
                onPressEnter={(e: any) => {
                  const newScale = e.target.value.split("%")[0] / 100;
                  editorCtrl.clickChangeScale(newScale);
                }}
              />
            </div>
            {/* <TipIcons.Move
              class={cx(
                "p-10px rounded text-18px cursor-pointer transition hover:opacity-70",
                editorCtrl.state.moveMode
                  ? "!text-orange bg-[#382916] !hover:(bg-[#382916])"
                  : "!text-light-50 bg-[#262626] !hover:(bg-[#262626])"
              )}
              onClick={() => editorCtrl.moveEditor()}
            /> */}
            <TipIcons.QueenService
              class={bottomBtnStyles}
              onClick={() => {
                launcher.showModal(<launcher.components.Viewport />, {
                  width: "400px",
                });
              }}
            />
            <TipIcons.Screenshot
              class={bottomBtnStyles}
              onClick={() => actions.updateThumbnailByScreenshot(true)}
            />
          </div>
        </div>
      );
    };
  },
});

const bottomBtnStyles = css`
  padding: 10px;
  border-radius: 50%;
  background-color: #333;
  @apply shadow;
`;

const group = css`
  .ant-input-number,
  .inficon {
    transition: all 0.3s ease-in-out;
  }
  .inficon {
    margin-right: -36px;
    line-height: 0;
  }
  .ant-input-number-input {
    height: 36px;
    line-height: 36px;
    text-align: center;
  }
  &:hover {
    .ant-input-number {
      margin-left: 10px;
    }
    .inficon {
      margin-right: 0;
    }
  }
`;