amis-editor 4.2.0-beta.0 → 5.2.0-beta.0

package/src/plugin/IFrame.tsx

@@ -1,70 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {BasePlugin} from '../plugin';
-import {defaultValue, getSchemaTpl, valuePipeOut} from '../component/schemaTpl';
-
-export class IFramePlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'iframe';
-  $schema = '/schemas/IFrameSchema.json';
-
-  // 组件名称
-  name = 'iFrame';
-  isBaseComponent = true;
-  description = '可以用来嵌入现有页面。';
-  tags = ['容器'];
-  icon = 'fa fa-window-maximize';
-  scaffold = {
-    type: 'iframe',
-    src: '//www.baidu.com'
-  };
-  previewSchema = {
-    type: 'tpl',
-    tpl: 'iFrame'
-  };
-
-  panelTitle = 'iFrame';
-  panelBody = [
-    getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          {
-            name: 'src',
-            label: '页面地址',
-            type: 'input-text',
-            description: ''
-          }
-        ]
-      },
-      {
-        title: '外观',
-        body: [
-          {
-            name: 'width',
-            label: 'iFrame 宽度',
-            type: 'input-text',
-            pipeIn: defaultValue('100%'),
-            pipeOut: valuePipeOut
-          },
-          {
-            name: 'height',
-            label: 'iFrame 高度',
-            type: 'input-text',
-            pipeOut: valuePipeOut
-          },
-          getSchemaTpl('className')
-        ]
-      },
-      {
-        title: '显隐',
-        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
-      }
-    ])
-  ];
-
-  renderRenderer(props: any) {
-    return this.renderPlaceholder(`IFrame 页面（${props.src}）`);
-  }
-}
-
-registerEditorPlugin(IFramePlugin);

package/src/plugin/Image.tsx

@@ -1,314 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {
-  ActiveEventContext,
-  BaseEventContext,
-  BasePlugin,
-  PluginEvent,
-  ResizeMoveEventContext
-} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {mockValue} from '../mocker';
-
-export class ImagePlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'image';
-  $schema = '/schemas/ImageSchema.json';
-
-  // 组件名称
-  name = '图片展示';
-  isBaseComponent = true;
-  description =
-    '可以用来展示一张图片，支持静态设置图片地址，也可以配置 <code>name</code> 与变量关联。';
-  tags = ['展示'];
-  icon = 'fa fa-photo';
-  scaffold = {
-    type: 'image'
-  };
-  previewSchema = {
-    ...this.scaffold,
-    thumbMode: 'cover',
-    value: mockValue({type: 'image'})
-  };
-
-  panelTitle = '图片';
-  panelBodyCreator = (context: BaseEventContext) => {
-    const isUnderField = /\/field\/\w+$/.test(context.path as string);
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: [
-            {
-              name: 'imageMode',
-              label: '展示模式',
-              type: 'select',
-              pipeIn: defaultValue('thumb'),
-              options: [
-                {
-                  label: '缩率图',
-                  value: 'thumb'
-                },
-                {
-                  label: '原图',
-                  value: 'original'
-                }
-              ]
-            },
-            {
-              name: 'title',
-              type: 'input-text',
-              label: '图片标题'
-            },
-            {
-              name: 'imageCaption',
-              type: 'input-text',
-              label: '图片描述'
-            },
-
-            {
-              name: 'width',
-              label: '宽度',
-              type: 'input-number'
-            },
-            {
-              name: 'height',
-              label: '高度',
-              type: 'input-number'
-            },
-
-            isUnderField
-              ? null
-              : getSchemaTpl('imageUrl', {
-                  name: 'src',
-                  type: 'input-text',
-                  label: '缩略图地址',
-                  description: '如果已绑定字段名，可以不用设置，支持用变量。'
-                }),
-            {
-              type: 'input-text',
-              label: '打开外部链接',
-              name: 'href'
-            },
-            getSchemaTpl('imageUrl', {
-              name: 'defaultImage',
-              label: '无数据时显示的图片'
-            })
-          ]
-        },
-        {
-          title: '外观',
-          body: [
-            {
-              type: 'switch',
-              name: 'enlargeAble',
-              label: '开启图片放大功能',
-              mode: 'inline',
-              className: 'w-full'
-            },
-
-            getSchemaTpl('imageUrl', {
-              name: 'originalSrc',
-              visibleOn: 'this.enlargeAble',
-              label: '原图地址',
-              description: '如果不配置将默认使用缩略图地址。'
-            }),
-
-            {
-              type: 'switch',
-              name: 'showDimensions',
-              label: '是否显示图片尺寸',
-              mode: 'inline',
-              className: 'w-full'
-            },
-            {
-              name: 'thumbMode',
-              type: 'button-group-select',
-              label: '缩略图展示模式',
-              size: 'sm',
-              pipeIn: defaultValue('contain'),
-              options: [
-                {
-                  label: '宽度占满',
-                  value: 'w-full'
-                },
-
-                {
-                  label: '高度占满',
-                  value: 'h-full'
-                },
-
-                {
-                  label: '包含',
-                  value: 'contain'
-                },
-
-                {
-                  label: '铺满',
-                  value: 'cover'
-                }
-              ]
-            },
-
-            {
-              name: 'thumbRatio',
-              type: 'button-group-select',
-              label: '缩略图比率',
-              size: 'sm',
-              pipeIn: defaultValue('1:1'),
-              options: [
-                {
-                  label: '1:1',
-                  value: '1:1'
-                },
-
-                {
-                  label: '4:3',
-                  value: '4:3'
-                },
-
-                {
-                  label: '16:9',
-                  value: '16:9'
-                }
-              ]
-            },
-
-            getSchemaTpl('className', {
-              autoComplete: false
-            }),
-
-            getSchemaTpl('className', {
-              name: 'imageClassName',
-              label: '图片 CSS 类名'
-            }),
-
-            getSchemaTpl('className', {
-              name: 'thumbClassName',
-              label: '缩略图 CSS 类名'
-            })
-          ]
-        },
-        {
-          title: '显隐',
-          body: [
-            // getSchemaTpl('ref'),
-            getSchemaTpl('visible')
-          ]
-        }
-      ])
-    ];
-  };
-
-  onActive(event: PluginEvent<ActiveEventContext>) {
-    const context = event.context;
-
-    if (context.info?.plugin !== this || !context.node) {
-      return;
-    }
-
-    const node = context.node!;
-    node.setHeightMutable(true);
-    node.setWidthMutable(true);
-  }
-
-  onWidthChangeStart(
-    event: PluginEvent<
-      ResizeMoveEventContext,
-      {
-        onMove(e: MouseEvent): void;
-        onEnd(e: MouseEvent): void;
-      }
-    >
-  ) {
-    return this.onSizeChangeStart(event, 'horizontal');
-  }
-
-  onHeightChangeStart(
-    event: PluginEvent<
-      ResizeMoveEventContext,
-      {
-        onMove(e: MouseEvent): void;
-        onEnd(e: MouseEvent): void;
-      }
-    >
-  ) {
-    return this.onSizeChangeStart(event, 'vertical');
-  }
-
-  onSizeChangeStart(
-    event: PluginEvent<
-      ResizeMoveEventContext,
-      {
-        onMove(e: MouseEvent): void;
-        onEnd(e: MouseEvent): void;
-      }
-    >,
-    direction: 'both' | 'vertical' | 'horizontal' = 'both'
-  ) {
-    const context = event.context;
-    const node = context.node;
-    if (node.info?.plugin !== this) {
-      return;
-    }
-
-    const resizer = context.resizer;
-    const dom = context.dom;
-    const frameRect = dom.parentElement!.getBoundingClientRect();
-    const rect = dom.getBoundingClientRect();
-    const startX = context.nativeEvent.pageX;
-    const startY = context.nativeEvent.pageY;
-
-    event.setData({
-      onMove: (e: MouseEvent) => {
-        const dy = e.pageY - startY;
-        const dx = e.pageX - startX;
-        const height = Math.max(50, rect.height + dy);
-        const width = Math.max(100, Math.min(rect.width + dx, frameRect.width));
-        const state: any = {
-          width,
-          height
-        };
-
-        if (direction === 'both') {
-          resizer.setAttribute('data-value', `${width}px x ${height}px`);
-        } else if (direction === 'vertical') {
-          resizer.setAttribute('data-value', `${height}px`);
-          delete state.width;
-        } else {
-          resizer.setAttribute('data-value', `${width}px`);
-          delete state.height;
-        }
-
-        node.updateState(state);
-
-        requestAnimationFrame(() => {
-          node.calculateHighlightBox();
-        });
-      },
-      onEnd: (e: MouseEvent) => {
-        const dy = e.pageY - startY;
-        const dx = e.pageX - startX;
-        const height = Math.max(50, rect.height + dy);
-        const width = Math.max(100, Math.min(rect.width + dx, frameRect.width));
-        const state: any = {
-          width,
-          height
-        };
-
-        if (direction === 'vertical') {
-          delete state.width;
-        } else if (direction === 'horizontal') {
-          delete state.height;
-        }
-
-        resizer.removeAttribute('data-value');
-        node.updateSchema(state);
-        requestAnimationFrame(() => {
-          node.calculateHighlightBox();
-        });
-      }
-    });
-  }
-}
-
-registerEditorPlugin(ImagePlugin);

package/src/plugin/Images.tsx

@@ -1,231 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {BaseEventContext, BasePlugin} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import {mockValue} from '../mocker';
-
-export class ImagesPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'images';
-  $schema = '/schemas/ImagesSchema.json';
-
-  // 组件名称
-  name = '图片集';
-  isBaseComponent = true;
-  description = '展示多张图片';
-  tags = ['展示'];
-  icon = 'fa fa-clone';
-  scaffold = {
-    type: 'images'
-  };
-  previewSchema = {
-    ...this.scaffold,
-    listClassName: 'nowrap',
-    thumbMode: 'cover',
-    value: [
-      {
-        title: '图片1',
-        image: mockValue({type: 'image'}),
-        src: mockValue({type: 'image'})
-      },
-      {
-        title: '图片2',
-        image: mockValue({type: 'image'}),
-        src: mockValue({type: 'image'})
-      }
-    ]
-  };
-
-  panelTitle = '图片集';
-  panelBodyCreator = (context: BaseEventContext) => {
-    const isUnderField = /\/field\/\w+$/.test(context.path as string);
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: (isUnderField
-            ? []
-            : [
-                {
-                  type: 'formula',
-                  name: '__mode',
-                  autoSet: false,
-                  formula:
-                    '!this.name && !this.source && Array.isArray(this.options) ? 2 : 1'
-                },
-                {
-                  label: '数据源',
-                  name: '__mode',
-                  type: 'button-group-select',
-                  size: 'xs',
-                  mode: 'inline',
-                  className: 'w-full',
-                  options: [
-                    {
-                      label: '关联字段',
-                      value: 1
-                    },
-                    {
-                      label: '静态设置',
-                      value: 2
-                    }
-                  ],
-                  onChange: (
-                    value: any,
-                    oldValue: any,
-                    model: any,
-                    form: any
-                  ) => {
-                    if (value !== oldValue && value == 1) {
-                      form.deleteValueByName('options');
-                    }
-                  }
-                },
-                {
-                  name: 'source',
-                  type: 'input-text',
-                  label: '关联数据',
-                  description:
-                    '比如：\\${listVar}，用来关联作用域中的已有数据。',
-                  visibleOn: 'this.__mode == 1'
-                },
-                {
-                  type: 'combo',
-                  name: 'options',
-                  visibleOn: 'this.__mode == 2',
-                  minLength: 1,
-                  label: '图片集数据',
-                  multiple: true,
-                  multiLine: true,
-                  addable: true,
-                  removable: true,
-                  items: [
-                    getSchemaTpl('imageUrl', {
-                      name: 'image',
-                      label: '缩略图'
-                    }),
-                    getSchemaTpl('imageUrl', {
-                      name: 'src',
-                      label: '原图'
-                    }),
-                    {
-                      type: 'input-text',
-                      label: '图片标题',
-                      name: 'title'
-                    },
-                    {
-                      type: 'textarea',
-                      label: '图片描述',
-                      name: 'caption'
-                    }
-                  ]
-                }
-              ]
-          ).concat([
-            getSchemaTpl('imageUrl', {
-              name: 'defaultImage',
-              label: '无数据时显示的图片'
-            })
-          ])
-        },
-        {
-          title: '外观',
-          body: [
-            {
-              type: 'switch',
-              name: 'enlargeAble',
-              label: '开启图片放大功能',
-              mode: 'inline',
-              className: 'w-full'
-            },
-
-            {
-              name: 'originalSrc',
-              visibleOn: 'this.enlargeAble',
-              type: 'input-text',
-              label: '原图地址',
-              description: '如果不配置将默认使用缩略图地址。'
-            },
-
-            {
-              type: 'switch',
-              name: 'showDimensions',
-              label: '是否显示图片尺寸',
-              mode: 'inline',
-              className: 'w-full'
-            },
-            {
-              name: 'thumbMode',
-              type: 'button-group-select',
-              label: '缩略图展示模式',
-              size: 'sm',
-              pipeIn: defaultValue('contain'),
-              options: [
-                {
-                  label: '宽度占满',
-                  value: 'w-full'
-                },
-
-                {
-                  label: '高度占满',
-                  value: 'h-full'
-                },
-
-                {
-                  label: '包含',
-                  value: 'contain'
-                },
-
-                {
-                  label: '铺满',
-                  value: 'cover'
-                }
-              ]
-            },
-
-            {
-              name: 'thumbRatio',
-              type: 'button-group-select',
-              label: '缩略图比率',
-              size: 'sm',
-              pipeIn: defaultValue('1:1'),
-              options: [
-                {
-                  label: '1:1',
-                  value: '1:1'
-                },
-
-                {
-                  label: '4:3',
-                  value: '4:3'
-                },
-
-                {
-                  label: '16:9',
-                  value: '16:9'
-                }
-              ]
-            },
-
-            getSchemaTpl('className', {
-              autoComplete: false
-            }),
-
-            getSchemaTpl('className', {
-              name: 'listClassName',
-              label: '图片列表 CSS 类名'
-            })
-          ]
-        },
-        {
-          title: '显隐',
-          body: [
-            // getSchemaTpl('ref'),
-            getSchemaTpl('visible')
-          ]
-        }
-      ])
-    ];
-  };
-}
-
-registerEditorPlugin(ImagesPlugin);

package/src/plugin/Json.tsx

@@ -1,69 +0,0 @@
-import {registerEditorPlugin} from '../manager';
-import {BaseEventContext, BasePlugin} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-import flatten = require('lodash/flatten');
-export class JsonPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'json';
-  $schema = '/schemas/JsonSchema.json';
-
-  // 组件名称
-  name = 'JSON展示';
-  isBaseComponent = true;
-  description = '用来展示 JSON 数据。';
-  docLink = '/amis/zh-CN/components/json';
-  tags = ['展示'];
-  icon = 'fa fa-code';
-  scaffold = {
-    type: 'json'
-  };
-  previewSchema = {
-    ...this.scaffold,
-    name: 'json',
-    value: {
-      a: 1,
-      b: {
-        c: 2
-      }
-    }
-  };
-
-  panelTitle = 'JSON';
-  panelBodyCreator = (context: BaseEventContext) => {
-    const isUnderField = /\/field\/\w+$/.test(context.path as string);
-    return [
-      getSchemaTpl('tabs', [
-        {
-          title: '常规',
-          body: flatten([
-            isUnderField
-              ? {
-                  type: 'tpl',
-                  inline: false,
-                  className: 'text-info text-sm',
-                  tpl: '<p>当前为字段内容节点配置，选择上层还有更多的配置。</p>'
-                }
-              : null,
-
-            {
-              name: 'levelExpand',
-              type: 'input-number',
-              label: '默认展开级别',
-              pipeIn: defaultValue(1)
-            }
-          ])
-        },
-        {
-          title: '外观',
-          body: flatten([getSchemaTpl('className')])
-        },
-        {
-          title: '显隐',
-          body: flatten([getSchemaTpl('ref'), getSchemaTpl('visible')])
-        }
-      ])
-    ];
-  };
-}
-
-registerEditorPlugin(JsonPlugin);