|
@@ -1,8 +1,8 @@
|
|
|
import { IconRotate , IconMove} from "@/assets/icons";
|
|
|
-import { CompToolbars } from "@/modules/editor/objects/Toolbars";
|
|
|
import { css } from "@linaria/core";
|
|
|
-import { defineComponent, onMounted, onUnmounted, ref, nextTick, reactive, watch } from "vue";
|
|
|
+import { defineComponent, ref, nextTick, reactive, watch } from "vue";
|
|
|
import { useEditor } from "../../../..";
|
|
|
+import { LiveToolbars } from "@/modules/editor/objects/Toolbars/liveTools";
|
|
|
|
|
|
|
|
|
export const SelectTransfer = defineComponent({
|
|
@@ -15,18 +15,11 @@ export const SelectTransfer = defineComponent({
|
|
|
|
|
|
const state = reactive({
|
|
|
toolbarW: 0,
|
|
|
- toolbarOpts: [] as any[],
|
|
|
})
|
|
|
|
|
|
watch(()=>[store.selectId, store.selected], ()=>{
|
|
|
console.log("changing--")
|
|
|
- if (store.selected.length == 1) {
|
|
|
- const comp = store.compMap[store.selected[0]];
|
|
|
- //@ts-ignore
|
|
|
- state.toolbarOpts = CompToolbars[comp.compKey] || CompToolbars.default;
|
|
|
- } else {
|
|
|
- state.toolbarOpts = CompToolbars.MultiSelector;
|
|
|
- }
|
|
|
+
|
|
|
nextTick(()=>{
|
|
|
nextTick(()=>{
|
|
|
if (!toolbarRef.value) {
|
|
@@ -48,7 +41,11 @@ export const SelectTransfer = defineComponent({
|
|
|
|
|
|
const w :any = selectCtrl.objContainer?.getBound();
|
|
|
const isTextEdit = selectCtrl.selected.length == 1 && selectCtrl.selected[0].comp.compKey == "Text";
|
|
|
-
|
|
|
+ let yTop = w?.y;
|
|
|
+ if ( yTop < 0) {
|
|
|
+ yTop = 0;
|
|
|
+ }
|
|
|
+
|
|
|
return (
|
|
|
<div
|
|
|
class={[
|
|
@@ -59,17 +56,17 @@ export const SelectTransfer = defineComponent({
|
|
|
top: transferStyle.baseCardTop
|
|
|
}}
|
|
|
>
|
|
|
- {/* <div
|
|
|
+ <div
|
|
|
id= "toolbar"
|
|
|
class={toolbarStyle}
|
|
|
style={{
|
|
|
- top: w?.y + "px",
|
|
|
+ top: yTop + "px",
|
|
|
left: (w?.x + w?.width / 2.0 - state.toolbarW / 2.0) + "px",
|
|
|
}}
|
|
|
ref= {toolbarRef}
|
|
|
>
|
|
|
{
|
|
|
- state.toolbarOpts.map((item) => {
|
|
|
+ LiveToolbars.map((item) => {
|
|
|
return item.getVisible.call(editor, comp) ? (
|
|
|
<item.component
|
|
|
class="p-4px"
|
|
@@ -79,7 +76,7 @@ export const SelectTransfer = defineComponent({
|
|
|
) : null;
|
|
|
})
|
|
|
}
|
|
|
- </div> */}
|
|
|
+ </div>
|
|
|
|
|
|
<div
|
|
|
class={["absolute", selctRectStyle]}
|
|
@@ -283,8 +280,13 @@ const toolbarStyle = css`
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 50%;
|
|
|
- transform: translate(0%, -60px);
|
|
|
+ transform: translate(0%, -45px);
|
|
|
+ box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
|
|
|
z-index: 999;
|
|
|
+ color: black;
|
|
|
+ padding: 0 !important;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
`;
|
|
|
|
|
|
const resizeHeightBtnCls = css`
|