Merge branch 'dev' of http://124.70.149.18:10880/lianghj/queenshow into dev

src/modules/editor/components/CompUI/basicUI/Text/component.tsx

@@ -7,11 +7,55 @@ import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
 import { Link } from "@ckeditor/ckeditor5-link";
 import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
 import { css } from "@linaria/core";
-import { defineComponent, onUnmounted, watch, watchEffect , ref} from "vue";
+import { defineComponent, onUnmounted, watch, watchEffect , ref, reactive, onMounted} from "vue";
 import { string} from "vue-types";
 import { useCompData } from ".";
 import { View } from "../View";
 import { nextTick } from "process";
+import { settingsStore } from "@queenjs-modules/queditor/module/stores/settings";
+
+function GetConfig() {
+  const fontSizeOptions=[];
+  const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60]
+  for (const s of list) {
+    fontSizeOptions.push({title: s+"", model: s + "px"})
+  }
+  const config = {
+    // updateSourceElementOnDestroy: true,
+    language: "zh-cn",
+    plugins: [
+      Essentials,
+      Bold,
+      Italic,
+      Link,
+      Paragraph,
+      FontColor,
+      FontSize,
+      FontFamily,
+      Alignment,
+    ],
+    fontSize: {
+      options: fontSizeOptions,
+      supportAllValues:true,
+    },
+    toolbar: {
+      items: [
+        // "undo",
+        // "redo",
+        // "|",
+        "fontColor",
+        "fontsize",
+        "bold",
+        "italic",
+        "|",
+        "alignment",
+        // "|",
+        // "link",
+      ],
+    },
+  };
+  return config;
+}
 
 export const Component = defineComponent({
   props: {
@@ -19,81 +63,77 @@ export const Component = defineComponent({
   },
   setup(props) {
     const comp = useCompData(props.compId);
-    const { store, actions , helper, controls} = useEditor();
+    const { store, actions} = useEditor();
 
-    const fontSizeOptions=[];
-    const list = [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60]
-    for (const s of list) {
-      fontSizeOptions.push({title: s+"", model: s + "px"})
+    const state = reactive({
+       editableId: ""
+    })
+    
+    if (store.isEditMode ) {
+        actions.on("textFocus", function(compId, focus){
+            if (compId != props.compId) return;
+            if (focus) {
+              state.editableId = "" + Date.now();
+              return;
+            }
+            state.editableId = "";
+        })
     }
-    const config = {
-      language: "zh-cn",
-      plugins: [
-        Essentials,
-        Bold,
-        Italic,
-        Link,
-        Paragraph,
-        FontColor,
-        FontSize,
-        FontFamily,
-        Alignment,
-      ],
-      fontSize: {
-        options: fontSizeOptions,
-        supportAllValues:true,
-      },
-      toolbar: {
-        items: [
-          // "undo",
-          // "redo",
-          // "|",
-          "fontColor",
-          "fontsize",
-          "bold",
-          "italic",
-          "|",
-          "alignment",
-          // "|",
-          // "link",
-        ],
-      },
-    };
-
-    let editorInstance: InlineEditor;
 
-    watch(
-      () => comp.value,
-      () => {
-        if (!store.textEditingState) {
-          editorInstance?.setData(comp.value);
-        }
+    return () => (
+      <View
+        class={[textStyle]}
+        compId={props.compId}
+        onDblclick={()=>{
+           if (store.isEditMode) {
+              state.editableId = "" + Date.now();
+           }
+        }}
+      >
+      {
+          state.editableId ? <EditorComp compId={props.compId} key={state.editableId} onLost={()=>{
+            state.editableId = "";
+          }} /> 
+          : <div innerHTML={comp.value} class={readOnlyText} />
       }
+      </View>
     );
+  },
+});
 
-    let blurCanceler: any = null;
-    watchEffect(() => {
-      blurCanceler?.();
-      if (store.currCompId === props.compId) {
-        blurCanceler = blurHandle();
-      }
-    });
+const EditorComp = defineComponent({
+  props: {
+    compId: string().isRequired,
+  },
+  emits: ["lost"],
 
-    onUnmounted(() => {
-      blurCanceler?.();
+  setup(props, {emit}) {
+    const inputRef = ref();
+    let editorInstance = ref<InlineEditor>();
+    const comp = useCompData(props.compId);
+    const { store, actions , helper, controls} = useEditor();
+
+   let blurCanceler:any= null;
+    onMounted(()=>{
+      blurCanceler = blurHandle();
     });
+    onUnmounted(()=>{
+      blurCanceler?.();
+    })
 
     function blurHandle() {
       function blur(e: MouseEvent) {
         const target = e.target as HTMLElement;
+        if ( !editorInstance.value) return;
         if (
-          editorInstance.ui.view.toolbar.element?.contains(target) ||
-          editorInstance.ui.view.editable.element?.contains(target)
+          editorInstance.value.ui.view.toolbar.element?.contains(target) ||
+          editorInstance.value.ui.view.editable.element?.contains(target)
         ) {
+          e.stopPropagation();
           return;
         }
-        store.setTextEditingState(false);
         actions.submitUpdate();
+        emit("lost");
       }
       document.addEventListener("mousedown", blur, {
         capture: true,
@@ -102,53 +142,52 @@ export const Component = defineComponent({
         document.removeEventListener("mousedown", blur, { capture: true });
       };
     }
-    const inputRef = ref<any>();
-    if (store.isEditMode) {
-      actions.on("textFocus", (compId, focus:boolean)=>{
-        if (compId != props.compId) return;
 
-        if (focus) {
-          editorInstance.focus();
-          return;
-        } 
-      })  
-    }
-    
-    return () => (
-      <View
-        class={[textStyle, store.currCompId === props.compId && "drag-disable"]}
-        compId={props.compId}
-      >
-        <ckeditor
+    const preHeight = ref<number>(0);
+
+    return ()=><ckeditor
           class={textStyle}
           ref={inputRef}
           editor={InlineEditor}
-          onFocus={() => {
-            console.log("on  onn focus !!!")
-            store.setTextEditingState(true);
-          }}
           onInput={(value: any) => {
-            if (editorInstance && comp.value !== value) {
-              // actions.updateCompData(comp, "value", value);
+            if (editorInstance.value && comp.value !== value) {
+              actions.updateCompData(comp, "value", value);
               nextTick(()=>{
-                actions.updateCompDatas(comp, ["value", "layout.size.1"], [value, helper.pxToDesignSize(inputRef.value?.$el.clientHeight)])
-                controls.selectCtrl.upgateGizmoStyle();
+              
+                const h = helper.pxToDesignSize(inputRef.value?.$el.clientHeight);
+                const isChange = Math.abs(preHeight.value - h) > 1;
+                preHeight.value = h;
+                actions.updateCompDatas(comp, ["value", "layout.size.1"], [value, preHeight.value])
+                helper.extendStreamCard(store.currStreamCardId);
+                if (isChange) {
+                  console.log("changing=>", isChange);
+                   actions.selectObjs([]);
+                   setTimeout(() => {
+                      actions.selectObjs([props.compId]);
+                   }, 0);
+                }
               })
             }
           }}
           onReady={(editor: InlineEditor) => {
-            editorInstance = editor;
+            editorInstance.value = editor;
+            console.log("editor")
             editor.setData(comp.value);
-            if (store.isPreview) {
-              editor.enableReadOnlyMode("editor");
-            }
+            editor.focus();
+            const range = document.createRange();
+            range.selectNodeContents(inputRef.value.$el);
+            const  selection = window.getSelection();
+            selection?.removeAllRanges();
+            selection?.addRange(range);
           }}
-          config={config}
+          config={GetConfig()}
         />
-      </View>
-    );
   },
-});
+})
+
+const readOnlyText = css`
+  pointer-events: none;
+`
 
 const textStyle = css`
   font-size: 0.24rem;
@@ -157,21 +196,16 @@ const textStyle = css`
   p {
     margin: 0;
   }
+
   .ck.ck-editor__editable_inline {
     cursor: text;
     overflow: hidden;
-    pointer-events: none;
 
     > :last-child,
     > :first-child {
       margin-top: 0;
       margin-bottom: 0;
     }
-  }
-
-  &.drag-disable {
-    .ck.ck-editor__editable_inline {
-      pointer-events: auto;
-    }
+    padding: 0 !important;
   }
 `;

src/modules/editor/components/CompUI/basicUI/Text/component2.tsx

@@ -1,134 +0,0 @@
-import { useEditor } from "@/modules/editor";
-import { Alignment } from "@ckeditor/ckeditor5-alignment";
-import { Bold, Italic } from "@ckeditor/ckeditor5-basic-styles";
-import { InlineEditor } from "@ckeditor/ckeditor5-editor-inline";
-import { Essentials } from "@ckeditor/ckeditor5-essentials";
-import { FontColor, FontFamily, FontSize } from "@ckeditor/ckeditor5-font";
-import { Link } from "@ckeditor/ckeditor5-link";
-import { Paragraph } from "@ckeditor/ckeditor5-paragraph";
-import { css } from "@linaria/core";
-import { defineComponent, watch, watchEffect, onMounted } from "vue";
-import { string } from "vue-types";
-import { useCompData } from ".";
-import { View } from "../View";
-import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
-export const Component = defineComponent({
-  props: {
-    compId: string().def(""),
-  },
-  setup(props) {
-    const comp = useCompData(props.compId);
-    const { store, helper, actions } = useEditor();
-    const config = {
-      //   language: "zh-cn",
-
-      plugins: [
-        Essentials,
-        Bold,
-        Italic,
-        Link,
-        Paragraph,
-        FontColor,
-        FontSize,
-        FontFamily,
-        Alignment,
-      ],
-      //   fontSize: {
-      //     options: [12, 14, 16, 18, 20, 24, 28, 32, 38, 42, 46, 52, 60],
-      //   },
-      toolbar: {
-        items: [
-          // "undo",
-          // "redo",
-          // "|",
-          "fontColor",
-          "fontsize",
-          "bold",
-          "italic",
-          "|",
-          "alignment",
-          // "|",
-          // "link",
-        ],
-      },
-    };
-
-    let editorInstance: InlineEditor;
-
-    // watchEffect(() => {
-    //   if (!store.textEditingState) {
-    //     editorInstance?.setData(comp.value);
-    //   }
-    // });
-    onMounted(() => {
-      initEditor();
-    });
-    const initEditor = async () => {
-      const dom = document.querySelector(`#${props.compId}`);
-      if (!dom) return;
-      editorInstance = await InlineEditor.create(dom as any, config);
-      editorInstance.setData(comp.value);
-      console.log(comp);
-      if (store.isPreview) {
-        editorInstance.enableReadOnlyMode("editor");
-      }
-    };
-    return () => (
-      <View
-        class={[textStyle, store.currCompId === props.compId && "drag-disable"]}
-        compId={props.compId}
-      >
-        <div id={props.compId}></div>
-        {/* <ckeditor
-          class={textStyle}
-          editor={InlineEditor}
-          onBlur={() => {
-            actions.updateCompData(
-              helper.findComp(props.compId) as DesignComp,
-              "value",
-              editorInstance.getData()
-            );
-            store.setTextEditingState(false);
-          }}
-          onFocus={() => {
-            store.setTextEditingState(true);
-          }}
-          onReady={(editor: InlineEditor) => {
-            editorInstance = editor;
-            editor.setData(comp.value);
-            if (store.isPreview) {
-              editor.enableReadOnlyMode("editor");
-            }
-          }}
-          config={config}
-        /> */}
-      </View>
-    );
-  },
-});
-
-const textStyle = css`
-  height: 100%;
-  font-size: 16px;
-  color: #666;
-  p {
-    margin: 0;
-  }
-  .ck.ck-editor__editable_inline {
-    cursor: text;
-    overflow: hidden;
-    pointer-events: none;
-
-    > :last-child,
-    > :first-child {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &.drag-disable {
-    .ck.ck-editor__editable_inline {
-      pointer-events: auto;
-    }
-  }
-`;

src/modules/editor/components/CompUI/basicUI/Text/index.ts

@@ -10,7 +10,7 @@ export const options = {
 };
 
 export const { createComp, useCompData } = createCompHooks({
-  value: `<p><span style="font-size:0.36rem;">请输入内容</span></p>`,
+  value: `<p style="text-align:center;"><span style="font-size:0.36rem;">请输入内容</span></p>`,
   layout: {
     size: [750, 60],
   },

src/modules/editor/components/CompUI/basicUI/Transfer/select.tsx

@@ -231,6 +231,7 @@ const transformBtnsStyle = css`
   z-index: 999;
   pointer-events: auto;
   transform-origin: 50% 100%;
+  pointer-events: none;
 `;
 
 const transBtnStyle = css`
@@ -246,7 +247,8 @@ const transBtnStyle = css`
   position: relative;
   top: 50px;
   @apply shadow cursor-move;
-
+  pointer-events: auto;
+  
   &:hover {
     color: #fff;
     background-color: @inf-primary-color;

src/modules/editor/components/Viewport/Content/index.tsx

@@ -85,7 +85,6 @@ export default defineUI({
                           onDragStart={() => (state.draging = true)}
                           onDragEnd={() => {
                             state.draging = false
-                            controls.selectCtrl.selecteObjs([])
                           }}
                           non-drag-area-selector={".drag-disable"}
                         >

src/modules/editor/controllers/SelectCtrl/index.ts

@@ -121,14 +121,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
   _downClickedCompId = "";
   onDocMouseDown(e: MouseEvent) {
     this._mouseDownTimestamp = Date.now();
-
-    const compKey = this.getDivFlag(e.target as any, "compKey");
-    console.log("compKey === >", compKey);
-    if (compKey == "Text" && !this.transferStyle.editingText) {
-       e.preventDefault();
-       e.stopPropagation();
-    }
-
     if (!this.pageEl || !this.selCanvas) return;
     if (this.store.textEditingState) return;
 
@@ -391,27 +383,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
     if (this._mouseDownFlag == "toolbar") {
       return;
     }
-
-    if (isClick) {
-      this.actions.pickComp(this._downClickedCompId);
-    }
-
+    
     if (isClick) {
       this._state = MODE_NONE;
-
-      if (this._downClickedCompId) {
-        const compKey = this.getDivFlag(e.target as any, "compKey");
-        console.log("up compKey === >", compKey);
-        if (compKey == "Text" ) { //点击鼠标上来后 focus文本选中
-             const compId = this.getDivFlag(e.target as any, "compId");
-             if ( this.selected.length ==  1 && this.store.currComp.id == compId ) {
-                //取消当前选择
-                this.selecteObjs([])
-                this.actions.textFocus(compId);
-                this.transferStyle.editingText = true;
-             }
-        }
-      }
+      this.actions.pickComp(this._downClickedCompId);
     }
 
     if (this._state == MODE_SEL_RECT && !isClick) {
@@ -459,10 +434,6 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
       this._initMovePos.x = -1;
       this._initMovePos.y = -1;
 
-      if ( !clicked && this.store.selected.length == 1 && this.store.currComp.compKey == "Text") {
-          this.actions.textFocus(this.store.currCompId, false)
-      }
-
       if (initX == -1 && initY == -1) return;
 
 

src/modules/editor/module/actions/edit.ts

@@ -8,7 +8,7 @@ import { ICompKeys, Layout } from "../../typings";
 
 export const editActions = EditorModule.action({
 
-  pickComp(compId: string) {
+  pickComp(compId: string, selected = true) {
     if (compId == "") {//空的时候,就选择根页面
       compId = "root";
     }
@@ -26,13 +26,12 @@ export const editActions = EditorModule.action({
     }
 
     if (this.store.currCompId == compId) {
-      //this.controls.selectCtrl.upgateGizmoStyle();
       return;
     }
-
     this.store.setCurrComp(compId);
-
-    selectCardChild(compId);
+    if (selected) {
+      selectCardChild(compId);
+    }
   },
 
   
@@ -84,9 +83,13 @@ export const editActions = EditorModule.action({
     const obj = new CompObject(currComp)
     obj.worldTransform.translate(xOffset, yOffset);
     currComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
+  
     this.actions.pickComp(compId)
-
     this.helper.extendStreamCard(currCard.id);
+
+    if (compKey == "Text") {
+      this.actions.textFocus(compId, true);
+    }
   },
 
   // 通过拖拽添加组件到画布
@@ -103,7 +106,13 @@ export const editActions = EditorModule.action({
       this.helper.designSizeToPx(375 - (currComp.layout.size?.[0] || 750) / 2),
       cardPoints.y
     );
+
     this.helper.extendStreamCard(this.store.currStreamCardId);
+
+    if (compKey == "Text") {
+      this.actions.selectObjs([]);
+      this.actions.textFocus(currComp.id, true);
+    }
   },
   
    async selectObjs(ids: string[]) {

src/modules/launcher/actions/index.ts

@@ -1,5 +1,7 @@
 import { LauncherModule } from "..";
 
 export const actions = LauncherModule.action({
-  init() {},
+  init() {
+    this.store.setApps([])
+  },
 });

src/modules/launcher/components/Viewport/index.tsx

@@ -2,6 +2,8 @@ import { defineComponent } from "vue";
 
 export const Viewport = defineComponent({
   setup() {
-    return () => <div></div>;
+    return () => <div>
+      
+    </div>;
   },
 });

src/modules/launcher/index.ts

@@ -3,8 +3,13 @@ import { actions } from "./actions";
 import { components } from "./components";
 import { stores } from "./stores";
 import { BusController } from "@/controllers/natsController";
+import { IAppKeys } from "./objects/Application/types";
 
 export class LauncherModule extends ModuleRoot {
+  config = this.setConfig({
+    supportApps: ["queentree"] as IAppKeys[],
+  });
+
   components = this.useComponents(components);
   store = this.createStore(stores);
   actions = this.createActions(actions);

src/modules/launcher/objects/Application/index.ts

@@ -0,0 +1,12 @@
+import { IAppKeys } from "./types";
+
+export class Application {
+  visible = false;
+  disable = false;
+  constructor(
+    public appKey: IAppKeys,
+    options: Partial<Application>
+  ) {
+    Object.assign(this, options);
+  }
+}

src/modules/launcher/objects/Application/types.ts

@@ -0,0 +1,16 @@
+export type IAppKeys = keyof typeof ApplicationTypes;
+
+export const ApplicationTypes = {
+  queentree: {
+    name: "数字资产库",
+    thumbnail: "",
+  },
+  queengine: {
+    name: "鲲擎",
+    thumbnail: "",
+  },
+  queenter: {
+    name: "鲲特",
+    thumbnail: "",
+  },
+};

src/modules/launcher/stores/index.ts

@@ -1,7 +1,14 @@
 import { LauncherModule } from "..";
+import { Application } from "../objects/Application";
 
 export const stores = LauncherModule.store({
   state: () => ({
     readyState: false,
+    apps: [] as Application[],
   }),
+  actions: {
+    setApps(apps: Application[]) {
+      this.store.apps = apps;
+    },
+  },
 });

src/pages/editor/index.ts

@@ -5,7 +5,7 @@ import CKEditor from "@ckeditor/ckeditor5-vue";
 import router from "./router";
 import { initResource } from "@/modules/resource";
 
-document.title = "推广编辑器"
+document.title = "推广编辑器";
 
 startApp(router, [initAuthDef, initRemSize, initResource], (app) => {
   app.use(CKEditor);