feat: support PanelDock icon pointer cursor is always pointer

This commit is contained in:
liujuping 2023-03-20 16:01:57 +08:00 committed by 林熠
parent 21f74f0cc1
commit a645af7e0b
10 changed files with 61 additions and 45 deletions

View File

@ -95,7 +95,10 @@ function isDragEvent(e: any): e is DragEvent {
return e?.type?.startsWith('drag');
}
export interface IDragon extends IPublicModelDragon<INode> {
export interface IDragon extends IPublicModelDragon<
INode,
ILocateEvent
> {
emitter: IEventBus;
}

View File

@ -17,6 +17,7 @@ import {
IPublicTypePluginMeta,
IPublicTypePluginRegisterOptions,
} from '@alilc/lowcode-types';
import PluginContext from './plugin-context';
export type PluginPreference = Map<string, Record<string, IPublicTypePreferenceValueType>>;
@ -81,6 +82,7 @@ export interface ILowCodePluginManagerCore {
delete(pluginName: string): any;
setDisabled(pluginName: string, flag: boolean): void;
dispose(): void;
_getLowCodePluginContext (options: IPluginContextOptions): PluginContext;
}
export type ILowCodePluginManager = ILowCodePluginManagerCore & ILowCodePluginManagerPluginAccessor;

View File

@ -26,13 +26,11 @@ export class TipContainer extends Component {
}
render() {
ReactDOM.createPortal(
return ReactDOM.createPortal(
<div className="lc-tips-container">
<TipItem />
</div>,
document.querySelector('body')!,
);
return null;
}
}

View File

@ -1,7 +1,7 @@
import { Component, isValidElement, ReactNode } from 'react';
import classNames from 'classnames';
import { createIcon, isI18nData } from '@alilc/lowcode-utils';
import { IPublicTypeTitleContent, IPublicTypeI18nData } from '@alilc/lowcode-types';
import { createIcon, isI18nData, isTitleConfig } from '@alilc/lowcode-utils';
import { IPublicTypeTitleContent, IPublicTypeI18nData, IPublicTypeTitleConfig } from '@alilc/lowcode-types';
import { intl } from '../../intl';
import { Tip } from '../tip';
import './title.less';
@ -88,7 +88,8 @@ export class Title extends Component<{
render() {
// eslint-disable-next-line prefer-const
let { title, className } = this.props;
const { title, className } = this.props;
let _title: IPublicTypeTitleConfig;
if (title == null) {
return null;
}
@ -96,34 +97,40 @@ export class Title extends Component<{
return title;
}
if (typeof title === 'string' || isI18nData(title)) {
title = { label: title };
_title = { label: title };
} else if (isTitleConfig(title)) {
_title = title;
} else {
_title = {
label: title,
};
}
const icon = title.icon ? createIcon(title.icon, { size: 20 }) : null;
const icon = _title.icon ? createIcon(_title.icon, { size: 20 }) : null;
let tip: any = null;
if (title.tip) {
if (isValidElement(title.tip) && title.tip.type === Tip) {
tip = title.tip;
if (_title.tip) {
if (isValidElement(_title.tip) && _title.tip.type === Tip) {
tip = _title.tip;
} else {
const tipProps =
typeof title.tip === 'object' && !(isValidElement(title.tip) || isI18nData(title.tip))
? title.tip
: { children: title.tip };
typeof _title.tip === 'object' && !(isValidElement(_title.tip) || isI18nData(_title.tip))
? _title.tip
: { children: _title.tip };
tip = <Tip {...tipProps} />;
}
}
return (
<span
className={classNames('lc-title', className, title.className, {
className={classNames('lc-title', className, _title.className, {
'has-tip': !!tip,
'only-icon': !title.label,
'only-icon': !_title.label,
})}
onClick={this.handleClick}
>
{icon ? <b className="lc-title-icon">{icon}</b> : null}
{this.renderLabel(title.label)}
{this.renderLabel(_title.label)}
{tip}
</span>
);

View File

@ -47,6 +47,8 @@ function HelpTip({ tip }: any) {
@observer
export class PanelDockView extends Component<DockProps & { dock: PanelDock }> {
private lastActived = false;
componentDidMount() {
this.checkActived();
}
@ -55,8 +57,6 @@ export class PanelDockView extends Component<DockProps & { dock: PanelDock }> {
this.checkActived();
}
private lastActived = false;
checkActived() {
const { dock } = this.props;
if (dock.actived !== this.lastActived) {
@ -134,7 +134,7 @@ export class DraggableLineView extends Component<{ panel: Panel }> {
// 默认 关闭,通过配置开启
const enableDrag = this.props.panel.config.props?.enableDrag;
const isRightArea = this.props.panel.config?.area === 'rightArea';
if (isRightArea || !enableDrag || this.props.panel?.parent.name === 'leftFixedArea') {
if (isRightArea || !enableDrag || this.props.panel?.parent?.name === 'leftFixedArea') {
return null;
}
return (
@ -159,6 +159,8 @@ export class DraggableLineView extends Component<{ panel: Panel }> {
@observer
export class TitledPanelView extends Component<{ panel: Panel; area?: string }> {
private lastVisible = false;
componentDidMount() {
this.checkVisible();
}
@ -167,8 +169,6 @@ export class TitledPanelView extends Component<{ panel: Panel; area?: string }>
this.checkVisible();
}
private lastVisible = false;
checkVisible() {
const { panel } = this.props;
const currentVisible = panel.inited && panel.visible;
@ -218,6 +218,8 @@ export class PanelView extends Component<{
hideOperationRow?: boolean;
hideDragLine?: boolean;
}> {
private lastVisible = false;
componentDidMount() {
this.checkVisible();
}
@ -226,8 +228,6 @@ export class PanelView extends Component<{
this.checkVisible();
}
private lastVisible = false;
checkVisible() {
const { panel } = this.props;
const currentVisible = panel.inited && panel.visible;
@ -331,6 +331,9 @@ class PanelTitle extends Component<{ panel: Panel; className?: string }> {
@observer
export class WidgetView extends Component<{ widget: IWidget }> {
private lastVisible = false;
private lastDisabled: boolean | undefined = false;
componentDidMount() {
this.checkVisible();
this.checkDisabled();
@ -341,9 +344,6 @@ export class WidgetView extends Component<{ widget: IWidget }> {
this.checkDisabled();
}
private lastVisible = false;
private lastDisabled = false;
checkVisible() {
const { widget } = this.props;
const currentVisible = widget.visible;

View File

@ -323,10 +323,8 @@ body {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&.has-tip {
cursor: pointer;
}
&.actived {
color: #0079f2;
}

View File

@ -1,5 +1,7 @@
import {
IDragon,
ILocateEvent as InnerLocateEvent,
INode,
} from '@alilc/lowcode-designer';
import { dragonSymbol, nodeSymbol } from '../symbols';
import LocateEvent from './locate-event';
@ -11,18 +13,19 @@ import {
IPublicModelDragObject,
IPublicTypeDragNodeDataObject,
IPublicModelNode,
IPublicTypeDragObject,
} from '@alilc/lowcode-types';
export const innerDragonSymbol = Symbol('innerDragonSymbol');
export class Dragon implements IPublicModelDragon {
private readonly [innerDragonSymbol]: IPublicModelDragon;
private readonly [innerDragonSymbol]: IDragon;
constructor(innerDragon: IPublicModelDragon, readonly workspaceMode: boolean) {
constructor(innerDragon: IDragon, readonly workspaceMode: boolean) {
this[innerDragonSymbol] = innerDragon;
}
get [dragonSymbol](): any {
get [dragonSymbol](): IDragon {
if (this.workspaceMode) {
return this[innerDragonSymbol];
}
@ -38,7 +41,7 @@ export class Dragon implements IPublicModelDragon {
}
static create(
dragon: IPublicModelDragon | null,
dragon: IDragon | null,
workspaceMode: boolean,
): IPublicModelDragon | null {
if (!dragon) {
@ -102,11 +105,13 @@ export class Dragon implements IPublicModelDragon {
* @param dragObject
* @param boostEvent
*/
boost(dragObject: DragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: Node | IPublicModelNode): void {
boost(dragObject: IPublicTypeDragObject, boostEvent: MouseEvent | DragEvent, fromRglNode?: IPublicModelNode & {
[nodeSymbol]: INode;
}): void {
return this[dragonSymbol].boost({
...dragObject,
nodes: dragObject.nodes.map((node: any) => node[nodeSymbol]),
}, boostEvent, fromRglNode);
}, boostEvent, fromRglNode?.[nodeSymbol]);
}
/**

View File

@ -1,16 +1,16 @@
import { ILocateEvent as InnerLocateEvent } from '@alilc/lowcode-designer';
import { ILocateEvent } from '@alilc/lowcode-designer';
import { locateEventSymbol } from '../symbols';
import { DragObject } from './drag-object';
import { IPublicModelLocateEvent, IPublicModelDragObject } from '@alilc/lowcode-types';
export default class LocateEvent implements IPublicModelLocateEvent {
private readonly [locateEventSymbol]: InnerLocateEvent;
private readonly [locateEventSymbol]: ILocateEvent;
constructor(locateEvent: InnerLocateEvent) {
constructor(locateEvent: ILocateEvent) {
this[locateEventSymbol] = locateEvent;
}
static create(locateEvent: InnerLocateEvent): IPublicModelLocateEvent | null {
static create(locateEvent: ILocateEvent): IPublicModelLocateEvent | null {
if (!locateEvent) {
return null;
}

View File

@ -3,7 +3,8 @@ import { IPublicTypeDragNodeDataObject, IPublicTypeDragObject } from '../type';
import { IPublicModelDragObject, IPublicModelLocateEvent, IPublicModelNode } from './';
export interface IPublicModelDragon<
Node = IPublicModelNode
Node = IPublicModelNode,
LocateEvent = IPublicModelLocateEvent
> {
/**
@ -18,7 +19,7 @@ export interface IPublicModelDragon<
* @param func
* @returns
*/
onDragstart(func: (e: IPublicModelLocateEvent) => any): () => void;
onDragstart(func: (e: LocateEvent) => any): () => void;
/**
* drag
@ -26,7 +27,7 @@ export interface IPublicModelDragon<
* @param func
* @returns
*/
onDrag(func: (e: IPublicModelLocateEvent) => any): () => void;
onDrag(func: (e: LocateEvent) => any): () => void;
/**
* dragend

View File

@ -73,7 +73,9 @@ export class Resource implements IResource {
constructor(readonly resourceData: IPublicResourceData, readonly resourceType: IResourceType, readonly workspace: IWorkspace) {
this.context = new BasicContext(workspace, `resource-${resourceData.resourceName || resourceType.name}`);
this.resourceTypeInstance = resourceType.resourceTypeModel(this.context.innerPlugins._getLowCodePluginContext(), this.options);
this.resourceTypeInstance = resourceType.resourceTypeModel(this.context.innerPlugins._getLowCodePluginContext({
pluginName: '',
}), this.options);
this.init();
if (this.resourceTypeInstance.editorViews) {
this.resourceTypeInstance.editorViews.forEach((d: any) => {