github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-15 05:36:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

all 70%

Browse Source
This commit is contained in:
kangwei 2020-02-17 18:43:21 +08:00
parent 30da8146bb
commit a12aa43c64
6 changed files with 32 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/designer/src/builtins/simulator/auxilary/auxiliary.tsx
View File

@ -2,7 +2,7 @@ import { observer } from '@ali/recore';
import { Component } from 'react';
import { getCurrentDocument } from '../../globals';
import './auxiliary.less';
import { EdgingView } from './edging';
import { EdgingView } from './gliding';
import { InsertionView } from './insertion';
import { SelectingView } from './selecting';
import EmbedEditorToolbar from './embed-editor-toolbar';

39
packages/designer/src/builtins/simulator/auxilary/edging.less
View File

@ -1,39 +0,0 @@
.my-edging {
box-sizing: border-box;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
border: 1px dashed var(--color-brand-light);
z-index: 1;
background: rgba(95, 240, 114, 0.04);
will-change: transform, width, height;
transition-property: transform, width, height;
transition-duration: 60ms;
transition-timing-function: linear;
overflow: visible;
>.title {
position: absolute;
color: var(--color-brand-light);
top: -20px;
left: 0;
font-weight: lighter;
}
&.x-shadow {
border-color: rgba(138, 93, 226, 0.8);
background: rgba(138, 93, 226, 0.04);
>.title {
color: rgba(138, 93, 226, 1.0);
}
}
&.x-flow {
border-color: rgba(255, 99, 8, 0.8);
background: rgba(255, 99, 8, 0.04);
>.title {
color: rgb(255, 99, 8);
}
}
}

62
packages/designer/src/builtins/simulator/auxilary/edging.tsx
View File

@ -1,62 +0,0 @@
import { observer } from '@ali/recore';
import { Component } from 'react';
import { edging } from '../../globals/edging';
import './edging.less';
import { hasConditionFlow } from '../../document/node';
import { isShadowNode } from '../../document/node/shadow-node';
import { isConditionFlow } from '../../document/node/condition-flow';
import { current } from '../../globals';
@observer
export class EdgingView extends Component {
shouldComponentUpdate() {
return false;
}
render() {
const node = edging.watching;
if (!node || !edging.enable || (current.selection && current.selection.has(node.id))) {
return null;
}
// TODO: think of multi rects
// TODO: findDOMNode cause a render bug
const rect = node.document.computeRect(node);
if (!rect) {
return null;
}
const { scale, scrollTarget } = node.document.viewport;
const sx = scrollTarget!.left;
const sy = scrollTarget!.top;
const style = {
width: rect.width * scale,
height: rect.height * scale,
transform: `translate(${(sx + rect.left) * scale}px, ${(sy + rect.top) * scale}px)`,
} as any;
let className = 'my-edging';
// handle x-for node
if (isShadowNode(node)) {
className += ' x-shadow';
}
// handle x-if/else-if/else node
if (isConditionFlow(node) || hasConditionFlow(node)) {
className += ' x-flow';
}
// TODO:
// 1. thinkof icon
// 2. thinkof top|bottom|inner space
return (
<div className={className} style={style}>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a className="title">{(node as any).title || node.tagName}</a>
</div>
);
}
}

40
packages/designer/src/designer/designer.ts
View File

@ -1,15 +1,17 @@
import { ComponentType } from 'react';
import { obx, computed } from '@recore/obx';
import { SimulatorView as BuiltinSimulatorView } from '../builtins/simulator';
import Dragon, { isDragNodeObject, isDragNodeDataObject, LocateEvent, DragObject } from './dragon';
import Project from './project';
import { ProjectSchema } from './schema';
import DocumentModel from './document/document-model';
import Dragon, { isDragNodeObject, isDragNodeDataObject, LocateEvent, DragObject } from './dragon';
import ActiveTracker from './active-tracker';
import Hovering from './hovering';
import Location, { LocationData, isLocationChildrenDetail } from './location';
import DocumentModel from './document/document-model';
import Node, { insertChildren } from './document/node/node';
import { isRootNode } from './document/node/root-node';
import { ComponentDescriptionSpec, ComponentConfig } from './document/node/component-config';
import Scroller, { IScrollable } from './scroller';
export interface DesignerProps {
className?: string;
@ -33,12 +35,14 @@ export default class Designer {
// readonly hotkey: Hotkey;
readonly dragon = new Dragon(this);
readonly activeTracker = new ActiveTracker();
readonly hovering = new Hovering();
readonly project: Project;
constructor(props: DesignerProps) {
this.project = new Project(this, props.defaultSchema);
this.dragon.onDragstart(e => {
this.hovering.enable = false;
const { dragObject } = e;
if (isDragNodeObject(dragObject) && dragObject.nodes.length === 1) {
// ensure current selecting
@ -78,7 +82,7 @@ export default class Designer {
if (this.props?.onDragend) {
this.props.onDragend(e, loc);
}
// this.enableEdging();
this.hovering.enable = true;
});
this.activeTracker.onChange(({ node, detail }) => {
@ -110,6 +114,10 @@ export default class Designer {
this._dropLocation = undefined;
}
createScroller(scrollable: IScrollable) {
return new Scroller(scrollable);
}
/**
* 获得合适的插入位置
*/
@ -152,7 +160,7 @@ export default class Designer {
this.suspensed = props.suspensed;
}
if (props.componentDescriptionSpecs !== this.props.componentDescriptionSpecs && props.componentDescriptionSpecs != null) {
this.buildComponentConfigMaps(props.componentDescriptionSpecs);
this.buildComponentConfigsMap(props.componentDescriptionSpecs);
}
} else {
// init hotkeys
@ -169,7 +177,7 @@ export default class Designer {
this.suspensed = props.suspensed;
}
if (props.componentDescriptionSpecs != null) {
this.buildComponentConfigMaps(props.componentDescriptionSpecs);
this.buildComponentConfigsMap(props.componentDescriptionSpecs);
}
}
this.props = props;
@ -213,33 +221,41 @@ export default class Designer {
// todo:
}
@obx.val private _componentConfigMaps = new Map<string, ComponentConfig>();
@obx.val private _componentConfigsMap = new Map<string, ComponentConfig>();
private buildComponentConfigMaps(specs: ComponentDescriptionSpec[]) {
private buildComponentConfigsMap(specs: ComponentDescriptionSpec[]) {
specs.forEach(spec => {
const key = spec.componentName;
const had = this._componentConfigMaps.get(key);
const had = this._componentConfigsMap.get(key);
if (had) {
had.spec = spec;
} else {
this._componentConfigMaps.set(key, new ComponentConfig(spec));
this._componentConfigsMap.set(key, new ComponentConfig(spec));
}
});
}
getComponentConfig(componentName: string): ComponentConfig {
if (this._componentConfigMaps.has(componentName)) {
return this._componentConfigMaps.get(componentName)!;
if (this._componentConfigsMap.has(componentName)) {
return this._componentConfigsMap.get(componentName)!;
}
const config = new ComponentConfig({
componentName,
});
this._componentConfigMaps.set(componentName, config);
this._componentConfigsMap.set(componentName, config);
return config;
}
get componentsMap(): { [key: string]: ComponentDescriptionSpec } {
const maps: any = {};
this._componentConfigsMap.forEach((config, key) => {
maps[key] = config.spec;
});
return maps;
}
purge() {
// todo:
}

4
packages/designer/src/designer/dragon.ts
View File

@ -277,8 +277,8 @@ export default class Dragon {
doc.removeEventListener('keyup', checkcopy as any, false);
} else {
masterSensors.forEach(item => {
const odoc = item.ownerDocument;
if (odoc && odoc !== doc) {
const odoc = item.contentDocument;
if (odoc) {
odoc.removeEventListener('mousemove', move, true);
odoc.removeEventListener('mouseup', over, true);
odoc.removeEventListener('mousedown', over, true);

2
packages/designer/src/utils/react.ts
View File

@ -18,7 +18,7 @@ function elementsFromFiber(fiber: any, elements: Array<Element | Text>) {
}
}
export function findDOMNodes(elem: Element | ReactInstance | null): Array<Element | Text> | null {
export function findDOMNodes(elem: ReactInstance | null): Array<Element | Text> | null {
if (!elem) {
return null;
}