|
@@ -4,29 +4,6 @@ import { useEditor } from "../../../..";
|
|
|
import { TransferCtrl } from "@/modules/editor/controllers/TransferCtrl";
|
|
|
import { CompToolbars } from "@/modules/editor/objects/Toolbars";
|
|
|
|
|
|
-const btnStyles = {
|
|
|
- top: {
|
|
|
- top: 0,
|
|
|
- left: "50%",
|
|
|
- transform: "translate(-50%, -50%)",
|
|
|
- },
|
|
|
- bottom: {
|
|
|
- bottom: 0,
|
|
|
- left: "50%",
|
|
|
- transform: "rotate(180deg) translate(50%, -50%)",
|
|
|
- },
|
|
|
- left: {
|
|
|
- top: "50%",
|
|
|
- left: 0,
|
|
|
- transform: "rotate(-90deg) translate(50%, -50%)",
|
|
|
- },
|
|
|
- right: {
|
|
|
- top: "50%",
|
|
|
- right: 0,
|
|
|
- transform: "rotate(90deg) translate(-50%, -50%)",
|
|
|
- },
|
|
|
-};
|
|
|
-
|
|
|
export const Transfer = defineComponent({
|
|
|
setup() {
|
|
|
const editor = useEditor();
|
|
@@ -36,7 +13,7 @@ export const Transfer = defineComponent({
|
|
|
|
|
|
onMounted(() => {
|
|
|
setTimeout(() => {
|
|
|
- const pageEl = document.querySelector(".page-content");
|
|
|
+ const pageEl = document.querySelector(".page-editing-content");
|
|
|
if (pageEl) {
|
|
|
transferCtrl.init(pageEl as HTMLElement);
|
|
|
}
|
|
@@ -55,6 +32,9 @@ export const Transfer = defineComponent({
|
|
|
const comp = store.currComp;
|
|
|
const toolbarOpts =
|
|
|
CompToolbars[store.currComp.compKey] || CompToolbars.default;
|
|
|
+
|
|
|
+ const showTransfer =
|
|
|
+ store.isEditComp || store.pageCompIds.includes(comp.id);
|
|
|
return (
|
|
|
transferStyle.width && (
|
|
|
<div
|
|
@@ -71,55 +51,59 @@ export const Transfer = defineComponent({
|
|
|
width: transferStyle.width,
|
|
|
height: transferStyle.height,
|
|
|
}}
|
|
|
- ></div>
|
|
|
- <div
|
|
|
- class={resizeStyle}
|
|
|
- style={{ marginBottom: "-" + transferStyle.height }}
|
|
|
- onMousedown={(e) => transferCtrl.mousedown(e, "scale")}
|
|
|
- ></div>
|
|
|
- <div class={toolbarStyle}>
|
|
|
- {toolbarOpts.map((item) => {
|
|
|
- return item.getVisible.call(editor, comp) ? (
|
|
|
- <item.component
|
|
|
- class="p-4px"
|
|
|
- value={item.getValue?.(comp)}
|
|
|
- onClick={() => item.onClick.call(editor, comp)}
|
|
|
- />
|
|
|
- ) : null;
|
|
|
- })}
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- class={transformBtnsStyle}
|
|
|
- style={{ marginBottom: "-" + transferStyle.height }}
|
|
|
- >
|
|
|
- <div
|
|
|
- class={transBtnStyle}
|
|
|
- onMousedown={(e) => transferCtrl.mousedown(e, "move")}
|
|
|
- >
|
|
|
- +
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class={transBtnStyle}
|
|
|
- onMousedown={(e) => transferCtrl.mousedown(e, "rotate")}
|
|
|
- >
|
|
|
- -
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {/* {Object.entries(btnStyles).map(([name, style]) => (
|
|
|
- <div
|
|
|
- class={[fanBtnStyle, "drag-disable"]}
|
|
|
- style={style}
|
|
|
- onMousedown={(e) =>
|
|
|
- transferCtrl.mousedown(
|
|
|
- e,
|
|
|
- `offset_${name as keyof typeof btnStyles}`
|
|
|
- )
|
|
|
- }
|
|
|
- >
|
|
|
- ↑
|
|
|
- </div>
|
|
|
- ))} */}
|
|
|
+ />
|
|
|
+ {showTransfer && (
|
|
|
+ <>
|
|
|
+ <div
|
|
|
+ class={resizeStyle}
|
|
|
+ style={{ marginBottom: "-" + transferStyle.height }}
|
|
|
+ onMousedown={(e) =>
|
|
|
+ transferCtrl.mousedown(
|
|
|
+ e,
|
|
|
+ comp.compKey === "Image" ? "resizeXY" : "scale"
|
|
|
+ )
|
|
|
+ }
|
|
|
+ />
|
|
|
+ <div class={toolbarStyle}>
|
|
|
+ {toolbarOpts.map((item) => {
|
|
|
+ return item.getVisible.call(editor, comp) ? (
|
|
|
+ <item.component
|
|
|
+ class="p-4px"
|
|
|
+ value={item.getValue?.(comp)}
|
|
|
+ onClick={() => item.onClick.call(editor, comp)}
|
|
|
+ />
|
|
|
+ ) : null;
|
|
|
+ })}
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={transformBtnsStyle}
|
|
|
+ style={{ marginBottom: "-" + transferStyle.height }}
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class={transBtnStyle}
|
|
|
+ onMousedown={(e) => transferCtrl.mousedown(e, "move")}
|
|
|
+ >
|
|
|
+ 偏移
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={transBtnStyle}
|
|
|
+ onMousedown={(e) => transferCtrl.mousedown(e, "rotate")}
|
|
|
+ >
|
|
|
+ 旋转
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class={resizeHeightBtnCls}
|
|
|
+ style={{ top: transferStyle.height }}
|
|
|
+ onMousedown={(e) => transferCtrl.mousedown(e, "resizeY")}
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class={resizeWidthBtnCls}
|
|
|
+ style={{ top: parseInt(transferStyle.height) / 2 + "px" }}
|
|
|
+ onMousedown={(e) => transferCtrl.mousedown(e, "resizeX")}
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
</div>
|
|
|
)
|
|
|
);
|
|
@@ -185,28 +169,43 @@ const transBtnStyle = css`
|
|
|
}
|
|
|
`;
|
|
|
|
|
|
-const fanBtnStyle = css`
|
|
|
+const toolbarStyle = css`
|
|
|
+ @apply bg-white shadow rounded space-x-4px p-4px whitespace-nowrap;
|
|
|
position: absolute;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: rgba(255, 255, 255, 0.3);
|
|
|
- font-size: 12px;
|
|
|
- text-align: center;
|
|
|
- clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
|
|
|
- cursor: grab;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -40px);
|
|
|
z-index: 999;
|
|
|
+`;
|
|
|
|
|
|
+const resizeHeightBtnCls = css`
|
|
|
+ position: absolute;
|
|
|
+ width: 30px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -4px);
|
|
|
+ cursor: ns-resize;
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
&:hover {
|
|
|
background: @inf-primary-color;
|
|
|
}
|
|
|
+ @apply shadow;
|
|
|
+ z-index: 999;
|
|
|
`;
|
|
|
|
|
|
-const toolbarStyle = css`
|
|
|
- @apply bg-white shadow rounded space-x-4px p-4px whitespace-nowrap;
|
|
|
+const resizeWidthBtnCls = css`
|
|
|
position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -40px);
|
|
|
+ width: 8px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 4px;
|
|
|
+ right: 0;
|
|
|
+ transform: translate(4px, -50%);
|
|
|
+ cursor: ew-resize;
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
+ &:hover {
|
|
|
+ background: @inf-primary-color;
|
|
|
+ }
|
|
|
+ @apply shadow;
|
|
|
z-index: 999;
|
|
|
`;
|