amis-editor-core 5.2.0-beta.0

package/lib/util.d.ts

@@ -0,0 +1,80 @@
+/**
+ * @file 功能类函数集合。
+ */
+import { utils } from 'amis';
+import { Diff } from 'deep-diff';
+import type { Schema } from 'amis/lib/types';
+declare const guid: typeof utils.guid, omitControls: typeof utils.omitControls, isObjectShallowModified: typeof utils.isObjectShallowModified, cloneObject: typeof utils.cloneObject, anyChanged: typeof utils.anyChanged, noop: typeof utils.noop, makeHorizontalDeeper: typeof utils.makeHorizontalDeeper, isEmpty: typeof utils.isEmpty, eachTree: typeof utils.eachTree, createObject: typeof utils.createObject;
+export { guid, isObjectShallowModified, anyChanged, noop, makeHorizontalDeeper, omitControls, isEmpty, cloneObject, eachTree, createObject };
+export declare function __uri(id: string): string;
+export declare function cleanUndefined(obj: any): any;
+/**
+ * 把 schema 处理一下传给 Preview 去渲染
+ * 给每个节点加个 $$id 这样方便编辑
+ * @param obj
+ */
+export declare function JSONPipeIn(obj: any): any;
+export declare function JSONPipeOut(obj: any, filterHiddenProps?: boolean | ((key: string, prop: any) => boolean)): any;
+export declare function JSONGetByPath(json: any, paths: Array<string>, stacks?: Array<any>): any;
+export declare function JSONGetPathById(json: any, id: string): Array<string> | null;
+export declare function JSONGetById(json: any, id: string): any;
+export declare function JSONGetParentById(json: any, id: string, skipArray?: boolean): any;
+export declare function JSONUpdate(json: any, id: string, value: any, replace?: boolean): any;
+export declare function JSONDelete(json: any, id: string, pathsRef?: Array<string>, deleteIfEmpty?: boolean): any;
+export declare function JSONMerge(json: any, target: any): any;
+export declare function JSONChangeInArray(json: any, id: string, operation: (arr: Array<any>, node: any, index: number) => void): any;
+export declare function JSONCanMoveUp(json: any, id: string): boolean;
+export declare function JSONMoveUpById(json: any, id: string): any;
+export declare function JSONCanMoveDown(json: any, id: string): boolean | 0;
+export declare function JSONMoveDownById(json: any, id: string): any;
+export declare function JSONDuplicate(json: any, id: string): any;
+/**
+ * 用于复制或粘贴的时候重新生成
+ * @param json
+ */
+export declare function reGenerateID(json: any): any;
+export declare function createElementFromHTML(htmlString: string): HTMLElement;
+export declare function deepFind(schema: any, keyValue: any, result?: any): any;
+/**
+ * 处理一下schema的$$commonSchema
+ * @param schema
+ * @valueWithConfig 带commonConfig 配置项的schema
+ */
+export declare function filterSchemaForConfig(schema: any, valueWithConfig?: any): any;
+/**
+ * 给编辑器前处理一下，把 visibleOn, hiddenOn 什么的处理掉，要不没办法编辑。
+ * @param schema
+ */
+export declare function filterSchemaForEditor(schema: any): any;
+export declare function blackList(list: Array<string>): (str: string) => boolean;
+export declare function sortByList(list: Array<string>, attr: string | Function): (a: any, b: any) => 0 | 1 | -1;
+export declare function persistGet(key: string, defaultValue?: any): any;
+export declare function persistSet(key: string, value: any): void;
+export declare function normalizeId(id: string): string;
+export declare const autobind: typeof import("amis").autobindMethod;
+export declare function addDragingClass(el: HTMLElement): void;
+export declare function removeDragingClass(el: HTMLElement): void;
+export declare function camelize(str: string): string;
+export declare const reactionWithOldValue: <T>(expression: () => T, effect: (newValue: T, oldValue?: T | undefined) => void) => import("mobx").IReactionDisposer;
+export declare function repeatArray<T>(child: T, count?: number): Array<T>;
+export declare type DiffChange = Diff<any, any>;
+export declare function diff(left: any, right: any, prefilter?: (currentPath: Array<string>, key: string) => boolean): Array<DiffChange> | undefined;
+export declare function patchDiff(left: any, changes: Array<DiffChange> | undefined): any;
+/**
+ * 遍历 schema
+ * @param json
+ * @param mapper
+ */
+export declare function JSONTraverse(json: any, mapper: (value: any, key: string | number, host: Object) => any): void;
+export declare type PanelSchemaObject = Schema;
+/**
+ * 判断输入内容是否为数字格式
+ */
+export declare const isNumeric: (value: any) => boolean;
+export declare const string2CSSUnit: (value: any, unit?: string) => any;
+export declare function isString(obj: any): boolean;
+/**
+ *  判断是否是对象类型
+ * */
+export declare function isObject(curObj: any): boolean;
+export declare function jsonToJsonSchema(json?: any): any;

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "amis-editor-core",
+  "version": "5.2.0-beta.0",
+  "description": "amis 可视化编辑器",
+  "main": "lib/index.min.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npm run clean-dist && webpack",
+    "clean-dist": "rimraf lib/* esm/*"
+  },
+  "keywords": [
+    "amis",
+    "editor"
+  ],
+  "author": "@fex",
+  "license": "ISC",
+  "files": [
+    "lib",
+    "static",
+    "scss"
+  ],
+  "lint-staged": {
+    "{src,scss,examples}/**/**/*.{js,jsx,ts,tsx,scss,json}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "amis-editor-comp": "*",
+    "deep-diff": "1.0.2",
+    "json-ast-comments": "^1.1.0",
+    "lodash": "^4.17.15",
+    "mobx": "^4.5.0",
+    "mobx-react": "^6.1.4",
+    "mobx-state-tree": "^3.17.3",
+    "sortablejs": "^1.14.0"
+  },
+  "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.15.3",
+    "@svgr/webpack": "^5.5.0",
+    "@types/async": "^2.0.45",
+    "@types/classnames": "^2.2.3",
+    "@types/codemirror": "^5.60.5",
+    "@types/deep-diff": "^1.0.0",
+    "@types/history": "^4.6.0",
+    "@types/hoist-non-react-statics": "^3.0.1",
+    "@types/lodash": "^4.14.76",
+    "@types/node": "^14.0.24",
+    "@types/qs": "^6.5.1",
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.9.4",
+    "@types/react-router": "^4.0.16",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/sortablejs": "^1.10.7",
+    "@types/tinycolor2": "^1.4.3",
+    "ajv": "^8.8.2",
+    "amis": "^2.0.0-rc.10",
+    "amis-core": "^2.0.0-rc.10",
+    "amis-formula": "^2.0.0-rc.10",
+    "amis-ui": "^2.0.0-rc.10",
+    "axios": "0.21.1",
+    "concurrently": "^6.2.0",
+    "css-loader": "^6.2.0",
+    "faker": "^5.5.3",
+    "fis-parser-sass": "^1.1.0",
+    "fis-parser-svgr": "^1.0.1",
+    "fis3": "^3.5.0-beta.0",
+    "fis3-hook-commonjs": "^0.1.32",
+    "fis3-hook-node_modules": "^2.3.1",
+    "fis3-parser-typescript": "^1.4.0",
+    "fis3-postpackager-loader": "^2.1.12",
+    "fis3-prepackager-stand-alone-pack": "^1.0.1",
+    "fis3-preprocessor-js-require-css": "^0.1.3",
+    "fis3-preprocessor-js-require-file": "^0.1.3",
+    "husky": "^7.0.0",
+    "lint-staged": "^12.1.2",
+    "mini-css-extract-plugin": "^2.3.0",
+    "prettier": "^2.2.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-overlays": "5.1.1",
+    "react-router": "5.2.0",
+    "react-router-dom": "5.2.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.49.7",
+    "sass-loader": "^12.5.0",
+    "style-loader": "^3.2.1",
+    "ts-loader": "^9.2.5",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.2",
+    "webpack": "^5.52.1",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "peerDependencies": {
+    "amis": "*",
+    "amis-core": "*",
+    "amis-formula": "*",
+    "amis-ui": "*"
+  }
+}

package/scss/_backTop.scss

@@ -0,0 +1,55 @@
+.editor-backTop {
+  position: fixed;
+  right: 30px;
+  bottom: 32px;
+  z-index: 10000;
+  width: 32px;
+  height: 32px;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  cursor: pointer;
+  visibility: visible;
+  transition: all 0.3s;
+
+  &.hidden {
+    visibility: hidden;
+  }
+}
+.editor-backTop:empty {
+  display: none;
+}
+.backTop-content {
+  width: 40px;
+  height: 40px;
+  overflow: hidden;
+  color: #fff;
+  text-align: center;
+  background-color: rgba($Editor-theme, 0.85);
+  border-radius: 20px;
+  transition: all 0.3s;
+}
+.backTop-content:hover {
+  background-color: $Editor-theme;
+  transition: all 0.3s;
+}
+.backTop-icon {
+  font-size: 20px;
+  line-height: 40px;
+}
+@media screen and (max-width: 768px) {
+  .editor-backTop {
+    right: 60px;
+  }
+}
+@media screen and (max-width: 480px) {
+  .editor-backTop {
+    right: 20px;
+  }
+}

package/scss/_bcn.scss

@@ -0,0 +1,157 @@
+.ae-Breadcrumb {
+  flex: 0 0 42px;
+  position: relative;
+  padding: 0;
+  background: #fff;
+  box-sizing: border-box;
+  border-bottom: 1px solid $editor-border-color;
+  z-index: 1000;
+
+  .ae-Breadcrumb-content {
+    position: relative;
+    left: 0;
+    height: 100%;
+    width: max-content;
+    padding: 0 16px;
+
+    white-space: nowrap;
+    height: 42px;
+    line-height: 42px;
+    background: #fff;
+    letter-spacing: 0;
+    font-family: PingFangSC-Regular;
+    font-size: 12px;
+    color: #5c5f66;
+    font-weight: 400;
+    user-select: none;
+
+    box-sizing: border-box;
+    z-index: 10000;
+    transition: left ease-out 0.15s;
+
+    > ul {
+      list-style: none;
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+      > li {
+        display: inline-block;
+        margin: 0 0 0 8px;
+        padding: 0;
+        position: relative;
+
+        &:first-child {
+          margin: 0;
+        }
+
+        > span {
+          display: inline-block;
+          padding-right: 8px;
+          line-height: 42px !important; // 避免被覆盖
+          cursor: pointer;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+        // 同级元素选择弹层
+        > ul {
+          position: absolute;
+          top: 46px;
+          left: 0;
+          min-width: 100px;
+          max-height: 320px;
+          line-height: 20px; // 32 - 12
+          padding: 0;
+          font-family: PingFangSC-Regular;
+          font-size: 12px;
+          color: #151b26;
+          font-weight: 400;
+          box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12);
+          border-radius: 4px;
+          background: #fff;
+          list-style: none;
+          z-index: 100000; // 设置一个最大的层级
+          visibility: hidden;
+          transition: all ease-out 0.15s;
+          @include minScrollBar();
+          > li > span {
+            display: block;
+            padding: 6px 12px;
+            cursor: pointer;
+            &:hover {
+              background: $active-bg-color;
+              text-decoration: none;
+            }
+            &.is-active {
+              color: $Editor-theme;
+            }
+          }
+        }
+        &:hover > ul,
+        & > ul:hover {
+          visibility: visible;
+        }
+      }
+      > li:not(:last-child):after {
+        color: #5e626a;
+        content: '\003E';
+      }
+
+      > li:last-child > span {
+        font-family: PingFangSC-Medium;
+        font-size: 12px;
+        color: #151b26;
+        line-height: 20px;
+        font-weight: 500;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .ae-Breadcrumb-scrollLeft-btn,
+  .ae-Breadcrumb-scrollRight-btn {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 40px;
+    height: 41px;
+    background-color: #fff;
+    box-sizing: border-box;
+    box-shadow: 2px 0 20px 0 rgb(0 0 0 / 10%);
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    visibility: hidden;
+    z-index: 100000;
+
+    svg {
+      color: #151b26;
+      width: 16px;
+      height: 16px;
+      transform: rotate(180deg);
+
+      &:hover {
+        color: $editor-active-color;
+      }
+    }
+  }
+
+  .ae-Breadcrumb-scrollRight-btn {
+    left: auto;
+    right: 0;
+    box-shadow: -2px 0 20px 0 rgb(0 0 0 / 10%);
+
+    svg.icon-editor-double-arrow {
+      transform: rotate(0deg);
+    }
+  }
+
+  &:hover {
+    .ae-Breadcrumb-scrollLeft-btn,
+    .ae-Breadcrumb-scrollRight-btn {
+      visibility: visible;
+    }
+  }
+}

package/scss/_classname-picker.scss

@@ -0,0 +1,57 @@
+.ae-ClassNamePicker-popover {
+  padding: 10px;
+  width: 610px;
+  max-height: 400px;
+  overflow: auto;
+
+  &.ae-PopOver--leftBottomLeftTop {
+    margin-top: 1px;
+  }
+
+  &.ae-PopOver--leftTopLeftBottom {
+    margin-top: -1px;
+  }
+}
+
+.ae-ClassNameControl-group {
+  margin: 10px;
+  display: inline-block;
+  width: 265px;
+
+  &.w2x {
+    width: 550px;
+  }
+
+  .ae-ClassNameControl-group {
+    padding-left: 65px;
+    margin: 0;
+    display: block;
+    width: auto;
+
+    &:not(:last-child) {
+      margin: 0 0 10px 0;
+    }
+
+    .ae-ClassNameControl-groupLabel {
+      float: left;
+      border: none;
+      padding-top: 5px;
+      padding-bottom: 0;
+      text-align: right;
+      margin: 0 0 0 -60px;
+      font-size: 12px;
+    }
+  }
+
+  .ae-ButtonGroup + .ae-ButtonGroup {
+    margin-left: 5px;
+  }
+}
+
+.ae-ClassNameControl-groupLabel {
+  border-bottom: px2rem(1px) solid lighten($color: $borderColor, $amount: 5%);
+  display: block;
+  padding-bottom: 5px;
+  margin-bottom: 10px;
+  font-size: 14px;
+}

package/scss/_context-menu-setting.scss

@@ -0,0 +1,109 @@
+.context-menu-setting {
+  position: relative;
+  width: 260px;
+  background: #fff;
+  box-shadow: -2px 0 20px 0 rgba(0, 0, 0, 0.1);
+  z-index: 5;
+  // 搞点动画？
+  transition: width ease-in-out 0.2s;
+  transform: translateZ(0);
+  display: flex;
+  flex-direction: column;
+
+  .setting-header {
+    flex: 0 0 48px;
+    font-family: PingFangSC-Regular;
+    font-size: 14px;
+    color: #141a25;
+    line-height: 48px;
+    letter-spacing: 0;
+    font-weight: 400;
+    border-bottom: 1px solid #e6e6e8;
+    text-align: center;
+  }
+
+  .setting-body {
+    flex: 1 1 auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 12px 6px;
+    display: flex;
+    justify-content: flex-start;
+    align-content: flex-start;
+    flex-wrap: wrap;
+
+    .setting-item {
+      margin: 0 2px 12px 6px; // 兼容右侧可能出现滚动条情况
+      padding-top: 12px;
+      flex: 0 0 112px;
+      height: 62px;
+      cursor: pointer;
+      box-sizing: border-box;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+
+      .icon-box {
+        width: 24px;
+        height: 24px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        > svg {
+          width: 24px;
+          height: 24px;
+          fill: #bcbcbc;
+        }
+      }
+
+      .setting-info {
+        margin-top: 4px;
+        flex: 1 1 auto;
+        font-family: PingFangSC-Regular;
+        font-size: 12px;
+        color: #141a25;
+        font-weight: 400;
+        user-select: none;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &:hover {
+        background: #e9effd;
+        border: 1px solid $Editor-theme-color;
+        border-radius: 4px;
+
+        .icon-box > svg {
+          fill: $Editor-theme-color;
+        }
+
+        .setting-info {
+          color: $Editor-theme-color;
+        }
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+        // pointer-events: none;
+        background: rgba(#bdbdbd, 0.15);
+        border: 1px solid #ddd;
+        border-radius: 4px;
+
+        .icon-box > svg {
+          fill: #bdbdbd;
+        }
+
+        .setting-info {
+          color: #bdbdbd;
+        }
+      }
+    }
+  }
+}

package/scss/_data-chain.scss

@@ -0,0 +1,39 @@
+.aeDataChain {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  min-height: 300px;
+
+  &-aside {
+    width: 60px;
+    flex-shrink: 0;
+    border-right: 1px solid #ccc;
+    margin-right: 10px;
+    padding-right: 10px;
+
+    > ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      > li {
+        display: block;
+        cursor: pointer;
+        text-align: center;
+        color: #999;
+        padding: 2px 5px;
+        font-size: 12px;
+
+        &.is-active {
+          color: #333;
+          background: darken(#f6f7fb, 2.5%);
+        }
+      }
+    }
+  }
+
+  &-main {
+    flex-grow: 1;
+    flex-basis: auto;
+  }
+}