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

Merge pull request #385 from alibaba/fix/resize-handler-symbols

Browse Source 
fix: use uppercase resize trigger names based on material spec
This commit is contained in:
林熠 2022-04-27 16:14:34 +08:00 committed by GitHub
commit 460167642b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
View File

@ -6,6 +6,7 @@ import { SimulatorContext } from '../context';
import { BuiltinSimulatorHost } from '../host'; import { BuiltinSimulatorHost } from '../host';
import { OffsetObserver, Designer } from '../../designer'; import { OffsetObserver, Designer } from '../../designer';
import { Node } from '../../document'; import { Node } from '../../document';
import { normalizeTriggers } from '../../utils/misc';
@observer @observer
export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost }> { export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost }> {
@ -245,12 +246,14 @@ export class BoxResizingInstance extends Component<{
triggerVisible = metadata.configure.advanced.getResizingHandlers(node.internalToShellNode()); triggerVisible = metadata.configure.advanced.getResizingHandlers(node.internalToShellNode());
} }
triggerVisible = normalizeTriggers(triggerVisible);
const baseSideClass = 'lc-borders lc-resize-side'; const baseSideClass = 'lc-borders lc-resize-side';
const baseCornerClass = 'lc-borders lc-resize-corner'; const baseCornerClass = 'lc-borders lc-resize-corner';
return ( return (
<div> <div>
{triggerVisible.includes('n') && ( {triggerVisible.includes('N') && (
<div <div
ref={(ref) => { this.outlineN = ref; }} ref={(ref) => { this.outlineN = ref; }}
className={classNames(baseSideClass, 'n')} className={classNames(baseSideClass, 'n')}
@ -261,7 +264,7 @@ export class BoxResizingInstance extends Component<{
}} }}
/> />
)} )}
{triggerVisible.includes('ne') && ( {triggerVisible.includes('NE') && (
<div <div
ref={(ref) => { this.outlineNE = ref; }} ref={(ref) => { this.outlineNE = ref; }}
className={classNames(baseCornerClass, 'ne')} className={classNames(baseCornerClass, 'ne')}
@ -271,7 +274,7 @@ export class BoxResizingInstance extends Component<{
}} }}
/> />
)} )}
{triggerVisible.includes('e') && ( {triggerVisible.includes('E') && (
<div <div
className={classNames(baseSideClass, 'e')} className={classNames(baseSideClass, 'e')}
ref={(ref) => { this.outlineE = ref; }} ref={(ref) => { this.outlineE = ref; }}
@ -282,7 +285,7 @@ export class BoxResizingInstance extends Component<{
}} }}
/> />
)} )}
{triggerVisible.includes('se') && ( {triggerVisible.includes('SE') && (
<div <div
ref={(ref) => { this.outlineSE = ref; }} ref={(ref) => { this.outlineSE = ref; }}
className={classNames(baseCornerClass, 'se')} className={classNames(baseCornerClass, 'se')}
@ -292,7 +295,7 @@ export class BoxResizingInstance extends Component<{
}} }}
/> />
)} )}
{triggerVisible.includes('s') && ( {triggerVisible.includes('S') && (
<div <div
ref={(ref) => { this.outlineS = ref; }} ref={(ref) => { this.outlineS = ref; }}
className={classNames(baseSideClass, 's')} className={classNames(baseSideClass, 's')}
@ -303,7 +306,7 @@ export class BoxResizingInstance extends Component<{
}} }}
/> />
)} )}
{triggerVisible.includes('sw') && ( {triggerVisible.includes('SW') && (
<div <div
ref={(ref) => { this.outlineSW = ref; }} ref={(ref) => { this.outlineSW = ref; }}
className={classNames(baseCornerClass, 'sw')} className={classNames(baseCornerClass, 'sw')}
@ -313,7 +316,7 @@ export class BoxResizingInstance extends Component<{
}} }}
/> />
)} )}
{triggerVisible.includes('w') && ( {triggerVisible.includes('W') && (
<div <div
ref={(ref) => { this.outlineW = ref; }} ref={(ref) => { this.outlineW = ref; }}
className={classNames(baseSideClass, 'w')} className={classNames(baseSideClass, 'w')}
@ -324,7 +327,7 @@ export class BoxResizingInstance extends Component<{
}} }}
/> />
)} )}
{triggerVisible.includes('nw') && ( {triggerVisible.includes('NW') && (
<div <div
ref={(ref) => { this.outlineNW = ref; }} ref={(ref) => { this.outlineNW = ref; }}
className={classNames(baseCornerClass, 'nw')} className={classNames(baseCornerClass, 'nw')}

8
packages/designer/src/utils/misc.ts
View File

@ -21,3 +21,11 @@ export function isDOMNodeVisible(domNode: Element, viewport: Viewport) {
right <= width + nodeWidth right <= width + nodeWidth
); );
} }
/**
* normalize triggers
* @param triggers
*/
export function normalizeTriggers(triggers: string[]) {
return triggers.map((trigger: string) => trigger?.toUpperCase());
}