mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-02-28 04:40:32 +00:00
UIfiled & hotkey
This commit is contained in:
wangying.jwy
parent
5dc04152d5
commit
097d61f7ed
@ -16,7 +16,7 @@ hotkey.bind(['backspace', 'del'], (e: KeyboardEvent) => {
|
||||
const sel = doc.selection;
|
||||
const topItems = sel.getTopNodes();
|
||||
// TODO: check can remove
|
||||
topItems.forEach(node => {
|
||||
topItems.forEach((node) => {
|
||||
doc.removeNode(node);
|
||||
});
|
||||
sel.clear();
|
||||
@ -54,7 +54,7 @@ hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => {
|
||||
if (!selected || selected.length < 1) return;
|
||||
|
||||
const componentsMap = {};
|
||||
const componentsTree = selected.map(item => item.export(false));
|
||||
const componentsTree = selected.map((item) => item.export(false));
|
||||
|
||||
const data = { type: 'nodeSchema', componentsMap, componentsTree };
|
||||
|
||||
@ -84,14 +84,13 @@ hotkey.bind(['command+v', 'ctrl+v'], (e) => {
|
||||
}
|
||||
const nodes = insertChildren(target, componentsTree, index);
|
||||
if (nodes) {
|
||||
doc.selection.selectAll(nodes.map(o => o.id));
|
||||
doc.selection.selectAll(nodes.map((o) => o.id));
|
||||
setTimeout(() => designer.activeTracker.track(nodes[0]), 10);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// command + z undo
|
||||
hotkey.bind(['command+z', 'ctrl+z'], (e) => {
|
||||
const his = focusing.focusDesigner?.currentHistory;
|
||||
|
||||
@ -25,7 +25,7 @@ export interface HooksFuncs {
|
||||
[idx: number]: (msg: string, handler: (...args: []) => void) => void;
|
||||
}
|
||||
|
||||
export type KeyType = Function | Symbol | string;
|
||||
export type KeyType = Function | symbol | string;
|
||||
export type ClassType = Function | (new (...args: any[]) => any);
|
||||
export interface GetOptions {
|
||||
forceNew?: boolean;
|
||||
|
||||
@ -18,6 +18,7 @@
|
||||
"@ali/lowcode-editor-core": "^0.8.5",
|
||||
"@ali/lowcode-globals": "^0.9.2",
|
||||
"@ali/lowcode-plugin-outline-pane": "^0.8.8",
|
||||
"@ali/ve-stage-box": "^4.0.0",
|
||||
"@alifd/next": "^1.19.16",
|
||||
"classnames": "^2.2.6",
|
||||
"react": "^16"
|
||||
|
||||
130
packages/plugin-settings-pane/src/field/fields.tsx
Normal file
130
packages/plugin-settings-pane/src/field/fields.tsx
Normal file
@ -0,0 +1,130 @@
|
||||
import { Component } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { Icon } from '@alifd/next';
|
||||
import { Title, TitleContent } from '@ali/lowcode-globals';
|
||||
import './index.less';
|
||||
import { PopupPipe, PopupContext } from '../popup';
|
||||
|
||||
export interface FieldProps {
|
||||
className?: string;
|
||||
// span
|
||||
title?: TitleContent | null;
|
||||
}
|
||||
|
||||
export class CommonField extends Component<FieldProps> {
|
||||
private shell: HTMLDivElement | null = null;
|
||||
|
||||
private checkIsBlockField() {
|
||||
if (this.shell) {
|
||||
const setter = this.shell.lastElementChild!.firstElementChild;
|
||||
if (setter && setter.classList.contains('lc-block-setter')) {
|
||||
this.shell.classList.add('lc-block-field');
|
||||
this.shell.classList.remove('lc-inline-field');
|
||||
} else {
|
||||
this.shell.classList.remove('lc-block-field');
|
||||
this.shell.classList.add('lc-inline-field');
|
||||
}
|
||||
}
|
||||
}
|
||||
componentDidUpdate() {
|
||||
this.checkIsBlockField();
|
||||
}
|
||||
componentDidMount() {
|
||||
this.checkIsBlockField();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, children, title } = this.props;
|
||||
return (
|
||||
<div ref={(shell) => (this.shell = shell)} className={classNames('lc-field lc-inline-field', className)}>
|
||||
{title && (
|
||||
<div className="lc-field-head">
|
||||
<div className="lc-field-title">
|
||||
<Title title={title} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="lc-field-body">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export interface PopupFieldProps extends FieldProps {
|
||||
width?: number;
|
||||
}
|
||||
|
||||
export class PopupField extends Component<PopupFieldProps> {
|
||||
static contextType = PopupContext;
|
||||
private pipe: any;
|
||||
|
||||
static defaultProps: PopupFieldProps = {
|
||||
width: 300,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { className, children, title, width } = this.props;
|
||||
if (!this.pipe) {
|
||||
this.pipe = (this.context as PopupPipe).create({ width });
|
||||
}
|
||||
|
||||
const titleElement = title && (
|
||||
<div className="lc-field-title">
|
||||
<Title title={title} />
|
||||
</div>
|
||||
);
|
||||
|
||||
this.pipe.send(<div className="lc-field-body">{children}</div>, titleElement);
|
||||
|
||||
return (
|
||||
<div className={classNames('lc-field lc-popup-field', className)}>
|
||||
{title && (
|
||||
<div
|
||||
className="lc-field-head"
|
||||
onClick={(e) => {
|
||||
this.pipe.show((e as any).target);
|
||||
}}
|
||||
>
|
||||
<div className="lc-field-title">
|
||||
<Title title={title} />
|
||||
</div>
|
||||
<Icon className="lc-field-icon" type="arrow-left" size="xs" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export type EntryFieldProps = FieldProps;
|
||||
|
||||
export class EntryField extends Component<EntryFieldProps> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { propName, stageName, tip, title, className } = this.props;
|
||||
const classNameList = classNames('engine-setting-field', 'engine-entry-field', className);
|
||||
const fieldProps: any = {};
|
||||
|
||||
if (stageName) {
|
||||
// 为 stage 切换奠定基础
|
||||
fieldProps['data-stage-target'] = stageName;
|
||||
}
|
||||
|
||||
const innerElements = [
|
||||
<span className="engine-field-title" key="field-title">
|
||||
{title}
|
||||
</span>,
|
||||
renderTip(tip, { propName }),
|
||||
<Icons name="arrow" className="engine-field-arrow" size="12px" key="engine-field-arrow-icon" />,
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={classNameList} {...fieldProps}>
|
||||
{innerElements}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -3,50 +3,22 @@ import classNames from 'classnames';
|
||||
import { Icon } from '@alifd/next';
|
||||
import { Title, TitleContent } from '@ali/lowcode-globals';
|
||||
import './index.less';
|
||||
import { CommonField, PopupField } from './fields';
|
||||
|
||||
export interface FieldProps {
|
||||
className?: string;
|
||||
// span
|
||||
title?: TitleContent | null;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
export class Field extends Component<FieldProps> {
|
||||
private shell: HTMLDivElement | null = null;
|
||||
|
||||
private checkIsBlockField() {
|
||||
if (this.shell) {
|
||||
const setter = this.shell.lastElementChild!.firstElementChild;
|
||||
if (setter && setter.classList.contains('lc-block-setter')) {
|
||||
this.shell.classList.add('lc-block-field');
|
||||
this.shell.classList.remove('lc-inline-field');
|
||||
} else {
|
||||
this.shell.classList.remove('lc-block-field');
|
||||
this.shell.classList.add('lc-inline-field');
|
||||
}
|
||||
}
|
||||
}
|
||||
componentDidUpdate() {
|
||||
this.checkIsBlockField();
|
||||
}
|
||||
componentDidMount() {
|
||||
this.checkIsBlockField();
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className, children, title } = this.props;
|
||||
|
||||
return (
|
||||
<div ref={shell => (this.shell = shell)} className={classNames('lc-field lc-inline-field', className)}>
|
||||
{title && (
|
||||
<div className="lc-field-head">
|
||||
<div className="lc-field-title">
|
||||
<Title title={title} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="lc-field-body">{children}</div>
|
||||
</div>
|
||||
);
|
||||
const { type, ...rest } = this.props;
|
||||
if (type === 'popup') {
|
||||
return <PopupField {...rest} />;
|
||||
}
|
||||
return <CommonField {...rest} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -28,12 +28,15 @@ export class PopupPipe {
|
||||
},
|
||||
show: (target: Element, actionKey?: string) => {
|
||||
this.currentId = id;
|
||||
this.popup({
|
||||
...props,
|
||||
actionKey,
|
||||
content: sendContent,
|
||||
title: sendTitle,
|
||||
}, target);
|
||||
this.popup(
|
||||
{
|
||||
...props,
|
||||
actionKey,
|
||||
content: sendContent,
|
||||
title: sendTitle,
|
||||
},
|
||||
target,
|
||||
);
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -121,7 +124,7 @@ export class PopupContent extends PureComponent<{ safeId?: string }> {
|
||||
safeNode={id}
|
||||
visible={visible}
|
||||
style={{ width }}
|
||||
onVisibleChange={visible => {
|
||||
onVisibleChange={(visible) => {
|
||||
if (avoidLaterHidden) {
|
||||
return;
|
||||
}
|
||||
@ -136,7 +139,11 @@ export class PopupContent extends PureComponent<{ safeId?: string }> {
|
||||
shouldUpdatePosition
|
||||
>
|
||||
<div className="lc-ballon-title">{title}</div>
|
||||
<div className="lc-ballon-content"><PopupService actionKey={actionKey} safeId={id}>{content}</PopupService></div>
|
||||
<div className="lc-ballon-content">
|
||||
<PopupService actionKey={actionKey} safeId={id}>
|
||||
{content}
|
||||
</PopupService>
|
||||
</div>
|
||||
</Balloon>
|
||||
);
|
||||
}
|
||||
|
||||
@ -7,10 +7,10 @@ import {
|
||||
shallowIntl,
|
||||
isSetterConfig,
|
||||
createSetterContent,
|
||||
shallowEqual
|
||||
shallowEqual,
|
||||
} from '@ali/lowcode-globals';
|
||||
import { SettingField, isSettingField, SettingTarget } from './main';
|
||||
import { Field, FieldGroup } from './field';
|
||||
import { Field, FieldGroup, PopupField } from './field';
|
||||
import PopupService from './popup';
|
||||
|
||||
class SettingFieldView extends Component<{ field: SettingField }> {
|
||||
@ -34,7 +34,7 @@ class SettingFieldView extends Component<{ field: SettingField }> {
|
||||
} else if (setter) {
|
||||
this.setterType = setter;
|
||||
}
|
||||
let firstRun: boolean = true;
|
||||
let firstRun = true;
|
||||
this.dispose = field.onEffect(() => {
|
||||
const state: any = {};
|
||||
const { extraProps } = field;
|
||||
@ -133,7 +133,7 @@ class SettingGroupView extends Component<{ field: SettingField }> {
|
||||
super(props);
|
||||
const { field } = this.props;
|
||||
const { condition } = field.extraProps;
|
||||
let firstRun: boolean = true;
|
||||
let firstRun = true;
|
||||
this.dispose = field.onEffect(() => {
|
||||
const state: any = {};
|
||||
state.visible = field.isOne && typeof condition === 'function' ? !condition(field) : true;
|
||||
@ -200,7 +200,7 @@ export default class SettingsPane extends Component<{ target: SettingTarget }> {
|
||||
super(props);
|
||||
|
||||
const { target } = this.props;
|
||||
let firstRun: boolean = true;
|
||||
let firstRun = true;
|
||||
this.dispose = target.onEffect(() => {
|
||||
const state = {
|
||||
items: target.items.slice(),
|
||||
|
||||
@ -29,6 +29,7 @@
|
||||
"@ali/vu-logger": "^1.0.7",
|
||||
"@ali/vu-style-sheet": "^2.4.0",
|
||||
"@alifd/next": "^1.19.12",
|
||||
"@ali/ve-stage-box": "^4.0.0",
|
||||
"@alife/theme-lowcode-dark": "^0.1.0",
|
||||
"@alife/theme-lowcode-light": "^0.1.0",
|
||||
"react": "^16.8.1",
|
||||
|
||||
@ -18,16 +18,24 @@ const VEOldAPIs = {
|
||||
* Core UI Components
|
||||
*/
|
||||
ui: {
|
||||
// FIELD_TYPE_MAP
|
||||
Field: {
|
||||
SettingField,
|
||||
Stage,
|
||||
CaptionField,
|
||||
PopupField,
|
||||
EntryField,
|
||||
// SettingField,
|
||||
// Stage,
|
||||
// CaptionField,
|
||||
// PopupField,
|
||||
// EntryField,
|
||||
// AccordionField,
|
||||
// BlockField,
|
||||
// InlineField,
|
||||
// PlainField
|
||||
AccordionField,
|
||||
BlockField,
|
||||
InlineField,
|
||||
PlainField
|
||||
BlockField,
|
||||
CaptionField, // 不支持 variableSwitcher 版的 BlockField
|
||||
PlainField, // 不渲染 title 的 InlineField
|
||||
EntryField,
|
||||
PopupField,
|
||||
},
|
||||
Icon: Icons,
|
||||
Icons,
|
||||
|
||||
@ -93,7 +93,9 @@ const GlobalPropsConfigure: IGlobalPropConfig[] = [
|
||||
},
|
||||
],
|
||||
disabled() {
|
||||
const proto = this.getProps().getNode().getPrototype();
|
||||
const proto = this.getProps()
|
||||
.getNode()
|
||||
.getPrototype();
|
||||
if (!proto) {
|
||||
return true;
|
||||
}
|
||||
@ -226,13 +228,7 @@ export interface IPropConfig {
|
||||
/**
|
||||
* when current prop value mutate, the mutator function shall be called
|
||||
*/
|
||||
mutator?(
|
||||
this: Prop,
|
||||
value: any,
|
||||
hotValue: any,
|
||||
preValue: any,
|
||||
preHotValue: any,
|
||||
): void;
|
||||
mutator?(this: Prop, value: any, hotValue: any, preValue: any, preHotValue: any): void;
|
||||
/**
|
||||
* other values' change will trigger sync function here
|
||||
*/
|
||||
@ -242,10 +238,7 @@ export interface IPropConfig {
|
||||
* @param toHotValue hot value for the setter
|
||||
* @param toViewValue static value for the view
|
||||
*/
|
||||
transformer?(
|
||||
toHotValue: (data: any) => any,
|
||||
toViewValue: (str: string) => any,
|
||||
): any;
|
||||
transformer?(toHotValue: (data: any) => any, toViewValue: (str: string) => any): any;
|
||||
/**
|
||||
* user click var to change current field to
|
||||
* variable setting field
|
||||
@ -254,10 +247,7 @@ export interface IPropConfig {
|
||||
}
|
||||
|
||||
export interface IGlobalPropConfig extends IPropConfig {
|
||||
position?:
|
||||
| 'top'
|
||||
| 'bottom'
|
||||
| { [key in 'before' | 'after']: { prop: string; value: any } };
|
||||
position?: 'top' | 'bottom' | { [key in 'before' | 'after']: { prop: string; value: any } };
|
||||
}
|
||||
|
||||
export interface SettingFieldConfig {
|
||||
@ -325,9 +315,7 @@ export interface ISnippet {
|
||||
schema: any;
|
||||
}
|
||||
|
||||
function toPropConfig(
|
||||
configure: Array<SettingFieldConfig | SettingGroupConfig>,
|
||||
): IPropConfig[] {
|
||||
function toPropConfig(configure: Array<SettingFieldConfig | SettingGroupConfig>): IPropConfig[] {
|
||||
if (!configure) {
|
||||
return [];
|
||||
}
|
||||
@ -364,9 +352,7 @@ function accessLibrary(library: string | object) {
|
||||
return (window as any)[library];
|
||||
}
|
||||
|
||||
export function setPackages(
|
||||
packages: Array<{ package: string; library: object | string }>,
|
||||
) {
|
||||
export function setPackages(packages: Array<{ package: string; library: object | string }>) {
|
||||
packages.forEach((item) => {
|
||||
let lib: any;
|
||||
if (packageMaps.hasOwnProperty(item.package)) {
|
||||
@ -477,15 +463,11 @@ function npmToURI(npm: {
|
||||
return uri;
|
||||
}
|
||||
|
||||
function toOlderSpec(
|
||||
options: ComponentDecoratorSpec,
|
||||
): IComponentPrototypeConfigure {
|
||||
function toOlderSpec(options: ComponentDecoratorSpec): IComponentPrototypeConfigure {
|
||||
const uri = options.uri || npmToURI(options.npm);
|
||||
const spec: any = {
|
||||
packageName: options.npm ? options.npm.package : '',
|
||||
category:
|
||||
options.category ||
|
||||
(Array.isArray(options.tags) ? options.tags[0] : options.tags),
|
||||
category: options.category || (Array.isArray(options.tags) ? options.tags[0] : options.tags),
|
||||
componentName: options.componentName,
|
||||
docUrl: options.docUrl,
|
||||
defaultProps: {},
|
||||
@ -514,8 +496,7 @@ function toOlderSpec(
|
||||
spec.canDropIn = options.configure.component.nestingRule.childWhitelist;
|
||||
}
|
||||
if (options.configure.component.nestingRule.parentWhitelist) {
|
||||
spec.canDropTo =
|
||||
options.configure.component.nestingRule.parentWhitelist;
|
||||
spec.canDropTo = options.configure.component.nestingRule.parentWhitelist;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -526,10 +507,7 @@ function toOlderSpec(
|
||||
function isNewSpec(options: any): options is ComponentDecoratorSpec {
|
||||
return (
|
||||
options &&
|
||||
(options.npm ||
|
||||
options.props ||
|
||||
(options.configure &&
|
||||
(options.configure.props || options.configure.component)))
|
||||
(options.npm || options.props || (options.configure && (options.configure.props || options.configure.component)))
|
||||
);
|
||||
}
|
||||
|
||||
@ -602,26 +580,10 @@ export declare interface IComponentPrototypeConfigure {
|
||||
didDropOut?: (container: any | Prototype, dragment: any) => boolean;
|
||||
didDropIn?: (container: any | Prototype, dragment: any) => boolean;
|
||||
|
||||
canResizing?:
|
||||
| ((dragment: Node, triggerDirection: string) => boolean)
|
||||
| boolean;
|
||||
onResizeStart?: (
|
||||
e: MouseEvent,
|
||||
triggerDirection: string,
|
||||
dragment: Node,
|
||||
) => void;
|
||||
onResize?: (
|
||||
e: MouseEvent,
|
||||
triggerDirection: string,
|
||||
dragment: Node,
|
||||
moveX: number,
|
||||
moveY: number,
|
||||
) => void;
|
||||
onResizeEnd?: (
|
||||
e: MouseEvent,
|
||||
triggerDirection: string,
|
||||
dragment: Node,
|
||||
) => void;
|
||||
canResizing?: ((dragment: Node, triggerDirection: string) => boolean) | boolean;
|
||||
onResizeStart?: (e: MouseEvent, triggerDirection: string, dragment: Node) => void;
|
||||
onResize?: (e: MouseEvent, triggerDirection: string, dragment: Node, moveX: number, moveY: number) => void;
|
||||
onResizeEnd?: (e: MouseEvent, triggerDirection: string, dragment: Node) => void;
|
||||
|
||||
/**
|
||||
* when sub-node of the current node changed
|
||||
@ -635,13 +597,13 @@ export interface IComponentPrototypeExtraConfigs {
|
||||
}
|
||||
|
||||
class Prototype {
|
||||
public static addGlobalNodeCanDragConfig = addGlobalNodeCanDragConfig;
|
||||
public static addGlobalPropsReducer = addGlobalPropsReducer;
|
||||
public static addGlobalPropsConfigure = addGlobalPropsConfigure;
|
||||
public static addGlobalExtraActions = addGlobalExtraActions;
|
||||
public static removeGlobalPropsConfigure = removeGlobalPropsConfigure;
|
||||
public static overridePropsConfigure = overridePropsConfigure;
|
||||
public static create = function create(
|
||||
static addGlobalNodeCanDragConfig = addGlobalNodeCanDragConfig;
|
||||
static addGlobalPropsReducer = addGlobalPropsReducer;
|
||||
static addGlobalPropsConfigure = addGlobalPropsConfigure;
|
||||
static addGlobalExtraActions = addGlobalExtraActions;
|
||||
static removeGlobalPropsConfigure = removeGlobalPropsConfigure;
|
||||
static overridePropsConfigure = overridePropsConfigure;
|
||||
static create = function create(
|
||||
options: IComponentPrototypeConfigure | ComponentDecoratorSpec,
|
||||
extraConfigs: IComponentPrototypeExtraConfigs = {},
|
||||
) {
|
||||
@ -659,7 +621,7 @@ class Prototype {
|
||||
* is this prototype auto-generated by prototypeMocker
|
||||
* from a normal VIEW file (React Component Class)
|
||||
*/
|
||||
private autoGenerated: boolean = false;
|
||||
private autoGenerated = false;
|
||||
|
||||
constructor(
|
||||
options: IComponentPrototypeConfigure | ComponentDecoratorSpec,
|
||||
@ -676,50 +638,50 @@ class Prototype {
|
||||
}
|
||||
}
|
||||
|
||||
public getId() {
|
||||
getId() {
|
||||
return this.id;
|
||||
}
|
||||
|
||||
public getUri() {
|
||||
getUri() {
|
||||
return this.options.uri;
|
||||
}
|
||||
|
||||
public getConfig(configName?: keyof IComponentPrototypeConfigure) {
|
||||
getConfig(configName?: keyof IComponentPrototypeConfigure) {
|
||||
if (configName) {
|
||||
return this.options[configName];
|
||||
}
|
||||
return this.options;
|
||||
}
|
||||
|
||||
public getPackageName() {
|
||||
getPackageName() {
|
||||
return this.packageName || this.options.packageName;
|
||||
}
|
||||
|
||||
public getContextInfo(name?: string): any {
|
||||
getContextInfo(name?: string): any {
|
||||
return name ? get(this.options, ['context', name], '') : this.options;
|
||||
}
|
||||
|
||||
public getTitle() {
|
||||
getTitle() {
|
||||
return this.options.title || this.getComponentName();
|
||||
}
|
||||
|
||||
public getComponentName() {
|
||||
getComponentName() {
|
||||
return this.componentName || this.options.componentName || null;
|
||||
}
|
||||
|
||||
public getDocUrl() {
|
||||
getDocUrl() {
|
||||
return this.options.docUrl;
|
||||
}
|
||||
|
||||
public getDefaultProps() {
|
||||
getDefaultProps() {
|
||||
return this.options.defaultProps || {};
|
||||
}
|
||||
|
||||
public getPropConfigs() {
|
||||
getPropConfigs() {
|
||||
return this.options;
|
||||
}
|
||||
|
||||
public getExtraActions() {
|
||||
getExtraActions() {
|
||||
let extraActions = this.options.extraActions;
|
||||
if (!extraActions) {
|
||||
return GlobalExtraActions;
|
||||
@ -730,7 +692,7 @@ class Prototype {
|
||||
return [...GlobalExtraActions, ...extraActions];
|
||||
}
|
||||
|
||||
public getCategory() {
|
||||
getCategory() {
|
||||
if (this.category !== undefined) {
|
||||
return this.category;
|
||||
}
|
||||
@ -740,31 +702,31 @@ class Prototype {
|
||||
return '*';
|
||||
}
|
||||
|
||||
public hasSlot() {
|
||||
hasSlot() {
|
||||
return this.options.hasSlot;
|
||||
}
|
||||
|
||||
public setCategory(category: string) {
|
||||
setCategory(category: string) {
|
||||
this.category = category;
|
||||
}
|
||||
|
||||
public getIcon() {
|
||||
getIcon() {
|
||||
return this.options.icon || '';
|
||||
}
|
||||
|
||||
public setView(view: ComponentClass) {
|
||||
setView(view: ComponentClass) {
|
||||
this.view = view;
|
||||
}
|
||||
|
||||
public getView() {
|
||||
getView() {
|
||||
return this.view || this.options.view || null;
|
||||
}
|
||||
|
||||
public getInitialChildren() {
|
||||
getInitialChildren() {
|
||||
return this.options.initialChildren || null;
|
||||
}
|
||||
|
||||
public getConfigure() {
|
||||
getConfigure() {
|
||||
let res = (this.options.configure || []).slice();
|
||||
GlobalPropsConfigure.forEach((config) => {
|
||||
const position = config.position || 'bottom';
|
||||
@ -810,45 +772,45 @@ class Prototype {
|
||||
return res;
|
||||
}
|
||||
|
||||
public getRectSelector() {
|
||||
getRectSelector() {
|
||||
return this.options.rectSelector;
|
||||
}
|
||||
|
||||
public isInline() {
|
||||
isInline() {
|
||||
return this.options.isInline != null ? this.options.isInline : null;
|
||||
}
|
||||
|
||||
public isContainer() {
|
||||
isContainer() {
|
||||
if (isFunction(this.options.isContainer)) {
|
||||
return (this.options.isContainer as any)(this);
|
||||
}
|
||||
return this.options.isContainer != null ? this.options.isContainer : false;
|
||||
}
|
||||
|
||||
public isModal() {
|
||||
isModal() {
|
||||
return this.options.isModal || false;
|
||||
}
|
||||
|
||||
public isFloating() {
|
||||
isFloating() {
|
||||
return this.options.isFloating || false;
|
||||
}
|
||||
|
||||
public isAutoGenerated() {
|
||||
isAutoGenerated() {
|
||||
return this.autoGenerated;
|
||||
}
|
||||
|
||||
public setPackageName(name: string) {
|
||||
setPackageName(name: string) {
|
||||
this.packageName = name;
|
||||
}
|
||||
|
||||
public setComponentName(componentName: string) {
|
||||
setComponentName(componentName: string) {
|
||||
this.componentName = componentName;
|
||||
}
|
||||
|
||||
/**
|
||||
* transform value from hot-value to view
|
||||
*/
|
||||
public reduce(props: any) {
|
||||
reduce(props: any) {
|
||||
let reducers = this.options.reducers || [];
|
||||
|
||||
if (!Array.isArray(reducers)) {
|
||||
@ -871,7 +833,7 @@ class Prototype {
|
||||
return props;
|
||||
}
|
||||
|
||||
public transformToActive(props: any) {
|
||||
transformToActive(props: any) {
|
||||
let transducers = this.options.transducers;
|
||||
if (!transducers) {
|
||||
return props;
|
||||
@ -888,7 +850,7 @@ class Prototype {
|
||||
return props;
|
||||
}
|
||||
|
||||
public transformToStatic(props: any) {
|
||||
transformToStatic(props: any) {
|
||||
let transducers = this.options.transducers;
|
||||
if (!transducers) {
|
||||
return props;
|
||||
@ -905,12 +867,9 @@ class Prototype {
|
||||
return props;
|
||||
}
|
||||
|
||||
public canDragging(node?: Node) {
|
||||
canDragging(node?: Node) {
|
||||
if (this.canSelecting()) {
|
||||
const draggable =
|
||||
this.options.canDragging === false || this.options.canDraging === false
|
||||
? false
|
||||
: true;
|
||||
const draggable = this.options.canDragging === false || this.options.canDraging === false ? false : true;
|
||||
if (GlobalNodeCanDragConfig.length > 0) {
|
||||
if (!flow(GlobalNodeCanDragConfig)(node)) {
|
||||
return false;
|
||||
@ -924,73 +883,65 @@ class Prototype {
|
||||
return false;
|
||||
}
|
||||
|
||||
public canHovering() {
|
||||
canHovering() {
|
||||
return this.options.canHovering != null ? this.options.canHovering : true;
|
||||
}
|
||||
|
||||
public canSelecting() {
|
||||
canSelecting() {
|
||||
return this.options.canSelecting != null ? this.options.canSelecting : true;
|
||||
}
|
||||
|
||||
public canOperating() {
|
||||
canOperating() {
|
||||
return this.options.canOperating != null ? this.options.canOperating : true;
|
||||
}
|
||||
|
||||
public canSetting() {
|
||||
canSetting() {
|
||||
return this.canSelecting();
|
||||
}
|
||||
|
||||
public canUseCondition() {
|
||||
return this.options.canUseCondition != null
|
||||
? this.options.canUseCondition
|
||||
: true;
|
||||
canUseCondition() {
|
||||
return this.options.canUseCondition != null ? this.options.canUseCondition : true;
|
||||
}
|
||||
|
||||
public canLoop() {
|
||||
canLoop() {
|
||||
return this.options.canLoop != null ? this.options.canLoop : true;
|
||||
}
|
||||
|
||||
public canDropTo(container: Node) {
|
||||
canDropTo(container: Node) {
|
||||
if (!this.canDragging()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const oCanDropTo =
|
||||
this.options.canDropTo != null
|
||||
? this.options.canDropTo
|
||||
: this.options.canDropto;
|
||||
const oCanDropTo = this.options.canDropTo != null ? this.options.canDropTo : this.options.canDropto;
|
||||
if (oCanDropTo != null) {
|
||||
return this.xcan(oCanDropTo, container);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
public canDropIn(dragment: Node) {
|
||||
const oCanDropIn =
|
||||
this.options.canDropIn != null
|
||||
? this.options.canDropIn
|
||||
: this.options.canDroping;
|
||||
canDropIn(dragment: Node) {
|
||||
const oCanDropIn = this.options.canDropIn != null ? this.options.canDropIn : this.options.canDroping;
|
||||
if (oCanDropIn != null) {
|
||||
return this.xcan(oCanDropIn, dragment);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
public didDropIn(dragment: Node, container: any) {
|
||||
didDropIn(dragment: Node, container: any) {
|
||||
const fn = this.options.didDropIn;
|
||||
if (typeof fn === 'function') {
|
||||
fn.call(container || this, dragment);
|
||||
}
|
||||
}
|
||||
|
||||
public didDropOut(dragment: Node, container: any) {
|
||||
didDropOut(dragment: Node, container: any) {
|
||||
const fn = this.options.didDropOut;
|
||||
if (typeof fn === 'function') {
|
||||
fn.call(container || this, dragment);
|
||||
}
|
||||
}
|
||||
|
||||
public canContain(dragment: Node) {
|
||||
canContain(dragment: Node) {
|
||||
const oCanContain = this.options.canContain;
|
||||
if (oCanContain != null) {
|
||||
return this.xcan(oCanContain, dragment);
|
||||
@ -998,14 +949,11 @@ class Prototype {
|
||||
return true;
|
||||
}
|
||||
|
||||
public clone(options: IComponentPrototypeConfigure) {
|
||||
clone(options: IComponentPrototypeConfigure) {
|
||||
return new Prototype(assign({}, this.options, options || {}));
|
||||
}
|
||||
|
||||
private xcan(
|
||||
ocan: ((dragment: Node) => boolean) | string | string[],
|
||||
placement: Node,
|
||||
): boolean;
|
||||
private xcan(ocan: ((dragment: Node) => boolean) | string | string[], placement: Node): boolean;
|
||||
private xcan(ocan: any, placement: Node): boolean {
|
||||
const t = typeof ocan;
|
||||
if (t === 'function') {
|
||||
|
||||
3
packages/vision-polyfill/src/hotkey.ts
Normal file
3
packages/vision-polyfill/src/hotkey.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import { hotkey } from '@ali/lowcode-designer';
|
||||
|
||||
export default hotkey;
|
||||
@ -149,11 +149,11 @@ export class Skeleton {
|
||||
return;
|
||||
}
|
||||
Object.keys(plugins).forEach((area) => {
|
||||
plugins[area].forEach(item => {
|
||||
plugins[area].forEach((item) => {
|
||||
const { pluginKey, type, props = {}, pluginProps } = item;
|
||||
const config: any = {
|
||||
area,
|
||||
type: "Widget",
|
||||
type: 'Widget',
|
||||
name: pluginKey,
|
||||
contentProps: pluginProps,
|
||||
};
|
||||
@ -181,7 +181,7 @@ export class Skeleton {
|
||||
}
|
||||
this.add(config);
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
postEvent(event: SkeletonEvents, ...args: any[]) {
|
||||
@ -218,9 +218,9 @@ export class Skeleton {
|
||||
createContainer(
|
||||
name: string,
|
||||
handle: (item: any) => any,
|
||||
exclusive: boolean = false,
|
||||
exclusive = false,
|
||||
checkVisible: () => boolean = () => true,
|
||||
defaultSetCurrent: boolean = false,
|
||||
defaultSetCurrent = false,
|
||||
) {
|
||||
const container = new WidgetContainer(name, handle, exclusive, checkVisible, defaultSetCurrent);
|
||||
this.containers.set(name, container);
|
||||
@ -231,7 +231,7 @@ export class Skeleton {
|
||||
const { content, ...restConfig } = config;
|
||||
if (content) {
|
||||
if (typeof content === 'object' && !isValidElement(content)) {
|
||||
Object.keys(content).forEach(key => {
|
||||
Object.keys(content).forEach((key) => {
|
||||
if (/props$/i.test(key) && restConfig[key]) {
|
||||
restConfig[key] = {
|
||||
...restConfig[key],
|
||||
@ -247,17 +247,24 @@ export class Skeleton {
|
||||
}
|
||||
const { area } = restConfig;
|
||||
switch (area) {
|
||||
case 'leftArea': case 'left':
|
||||
case 'leftArea':
|
||||
case 'left':
|
||||
return this.leftArea.add(restConfig as any);
|
||||
case 'rightArea': case 'right':
|
||||
case 'rightArea':
|
||||
case 'right':
|
||||
return this.rightArea.add(restConfig as any);
|
||||
case 'topArea': case 'top':
|
||||
case 'topArea':
|
||||
case 'top':
|
||||
return this.topArea.add(restConfig as any);
|
||||
case 'toolbar':
|
||||
return this.toolbar.add(restConfig as any);
|
||||
case 'mainArea': case 'main': case 'center': case 'centerArea':
|
||||
case 'mainArea':
|
||||
case 'main':
|
||||
case 'center':
|
||||
case 'centerArea':
|
||||
return this.mainArea.add(restConfig as any);
|
||||
case 'bottomArea': case 'bottom':
|
||||
case 'bottomArea':
|
||||
case 'bottom':
|
||||
return this.bottomArea.add(restConfig as any);
|
||||
case 'leftFixedArea':
|
||||
return this.leftFixedArea.add(restConfig as any);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user