amis-editor 4.1.0-beta.4 → 4.2.0-beta.0

package/src/plugin/IFrame.tsx

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,314 @@
+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

@@ -0,0 +1,231 @@
+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

@@ -0,0 +1,69 @@
+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);