Skip to content

Commit

Permalink
Merge pull request #6 from VisActor/feat/image
Browse files Browse the repository at this point in the history 
Feat/image
  • Loading branch information
@neuqzxy
neuqzxy authored Jun 12, 2024
2 parents 14453ff + b5264ca commit aab9059
Show file tree
Hide file tree
Showing 17 changed files with 406 additions and 63 deletions.
71 changes: 70 additions & 1 deletion packages/vstory/demo/src/demos/GraphicEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Story } from '../../../src/story/story';
import { Edit } from '../../../src/edit/edit';
import '../../../src/story/index';
import { loadAllSelection } from '../../../src/edit/edit-component';
import img from '../assets/scene3/chart-3.png';

loadAllSelection();

Expand Down Expand Up @@ -41,6 +42,45 @@ export const GraphicEdit = () => {
]
}
}
},
{
type: 'RectComponent',
id: 'rect',
zIndex: 0,
position: {
top: 40,
left: 250,
width: 200,
height: 100
},
options: {
graphic: {
fill: 'red',
visible: false
},
text: {
text: 'title2',
fill: 'black'
},
angle: 0,
shapePoints: []
}
},
{
type: 'ImageComponent',
id: `image`,
zIndex: 1,
position: {
top: 225,
left: 260,
width: 200,
height: 160
},
options: {
graphic: {
image: img
}
}
}
],
acts: [
Expand All @@ -60,14 +100,43 @@ export const GraphicEdit = () => {
payload: {
animation: {
duration: 700,
easing: 'easeInOutQuad',
move: {
from: 'right'
}
}
}
}
]
},
{
characterId: 'rect',
characterActions: [
{
startTime: 1,
duration: 800,
action: 'appear',
payload: {
animation: {
duration: 700
}
}
}
]
},
{
characterId: 'image',
characterActions: [
{
startTime: 1,
duration: 800,
action: 'appear',
payload: {
animation: {
duration: 700
}
}
}
]
}
]
}
Expand Down
31 changes: 24 additions & 7 deletions packages/vstory/src/edit/edit-component/base-selection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,12 @@ import { EditActionEnum, type IEditActionInfo, type IEditComponent } from '../in
import { StoryEvent } from '../../story/interface/runtime-interface';
import type { Edit } from '../edit';
import type { AbstractComponent } from '@visactor/vrender-components';
import type { ITransformControl } from './edit-control/transform-control';
import type { ITransformControl, IUpdateParams } from './edit-control/transform-control';
import { TransformControl, type TransformAttributes } from './edit-control/transform-control';
import { throwError } from '../../util/common';
import type { VRenderPointerEvent } from '../../interface/type';
import { IGraphic } from '@visactor/vrender-core';
import type { ICharacter } from '../../story/character';

export abstract class BaseSelection implements IEditComponent {
declare readonly level: number;
Expand All @@ -14,18 +17,27 @@ export abstract class BaseSelection implements IEditComponent {
protected _isSelection = false;
isEditing: boolean = false;
protected _layoutComponent?: ITransformControl;
protected _activeCharacter?: ICharacter | null;

constructor(public readonly edit: Edit) {}
editEnd(): void {
this.isEditing = false;
this._actionInfo = null;
this._activeCharacter = null;
this.inActiveLayoutComponent();
}
abstract checkAction(actionInfo: IEditSelectionInfo): boolean;

getActiveCharacter() {
return this._activeCharacter;
}

startEdit(actionInfo: IEditActionInfo) {
this.isEditing = true;
this._actionInfo = actionInfo;
if (actionInfo && (actionInfo as IEditSelectionInfo).character) {
this._activeCharacter = (actionInfo as IEditSelectionInfo).character;
}
this.activeLayoutComponent();
}

Expand All @@ -47,11 +59,16 @@ export abstract class BaseSelection implements IEditComponent {
}
});

component.onUpdate(this.handlerTransformChange.bind(this));
return component;
}

protected handlerTransformChange(data: IUpdateParams, event?: VRenderPointerEvent) {
return;
}

protected _createLayoutComponent(attributes: Partial<TransformAttributes>): ITransformControl | undefined {
return new TransformControl(attributes);
return new TransformControl(this, attributes);
}

activeLayoutComponent() {
Expand All @@ -67,15 +84,15 @@ export abstract class BaseSelection implements IEditComponent {
}

inActiveLayoutComponent() {
if (!this._layoutComponent) {
this._layoutComponent = this.createLayoutComponent();
}
if (!this._layoutComponent) {
return;
}

this._layoutComponent.onInActive();
this.detachComponent(this._layoutComponent);
// this._layoutComponent.onInActive();
// this.detachComponent(this._layoutComponent);
// TODO 直接release
this._layoutComponent.release();
this._layoutComponent = null;
}

updateComponent() {
Expand Down
20 changes: 10 additions & 10 deletions packages/vstory/src/edit/edit-component/box-selection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@ export class BoxSelection extends BaseSelection implements IEditComponent {
return false;
}

startEdit(actionInfo: IEditActionInfo) {
super.startEdit(actionInfo);
this.edit.startEdit({
type: 'boxSelection',
actionInfo: this._actionInfo,
updateCharacter: (params: any) => {
// nothing 不支持任何修改
}
});
}
// startEdit(actionInfo: IEditActionInfo) {
// super.startEdit(actionInfo);
// // this.edit.startEdit({
// // type: 'boxSelection',
// // actionInfo: this._actionInfo,
// // updateCharacter: (params: any) => {
// // // nothing 不支持任何修改
// // }
// // });
// }
}
40 changes: 34 additions & 6 deletions packages/vstory/src/edit/edit-component/edit-control/richtext-transform-control.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import type {
ILineGraphicAttribute,
IGroup
} from '@visactor/vrender-core';
import { createRect } from '@visactor/vrender-core';
import { createRect, getTheme } from '@visactor/vrender-core';
import type { IAABBBounds, IAABBBoundsLike, IPointLike } from '@visactor/vutils';
import { AABBBounds, merge, normalizePadding, pi } from '@visactor/vutils';
import { AbstractComponent } from '@visactor/vrender-components';
Expand Down Expand Up @@ -49,12 +49,16 @@ export class RichTextTransformControl extends TransformControl implements ITrans
const { x, y, width, height } = this.rect.attribute;
const container = document.createElement('div');
container.style.position = 'relative';
container.style.display = 'flex';
container.style.justifyContent = 'center';
container.style.left = x + 'px';
container.style.top = y + 'px';
container.style.width = width + 'px';
container.style.height = height + 'px';
container.style.pointerEvents = 'none';
const bg = document.createElement('div');
bg.style.position = 'absolute';
bg.style.zIndex = '-1';
bg.style.width = '100%';
bg.style.height = '100%';
bg.style.opacity = '0.2';
Expand All @@ -63,6 +67,35 @@ export class RichTextTransformControl extends TransformControl implements ITrans
container.appendChild(bg);
stage.window.getContainer().appendChild(container);
this.domTextEditor = container;

// 添加textArea
const character = this.editComponent.getActiveCharacter();
const text = (character as any)._text && (character as any)._text._graphic;
if (text) {
const textArea = document.createElement('textArea') as HTMLTextAreaElement;
const bounds = text.AABBBounds;
const theme = getTheme(text).text;
const {
fontFamily = theme.fontFamily,
fontSize = theme.fontSize,
fontWeight = theme.fontWeight
} = text.attribute;
textArea.style.alignSelf = `center`;
textArea.style.width = `${bounds.width()}px`;
textArea.style.height = `${bounds.height()}px`;
textArea.innerText = text.attribute.text;
textArea.style.border = 'none';
textArea.style.fontFamily = fontFamily;
textArea.style.fontSize = fontSize;
textArea.style.fontWeight = fontWeight;
textArea.style.overflow = 'hidden';
textArea.style.outline = 'none';
textArea.style.resize = 'none';
textArea.style.pointerEvents = 'all';
container.appendChild(textArea);
}

// textArea.value = this.activeGraphic;
}

protected render() {
Expand All @@ -83,11 +116,6 @@ export class RichTextTransformControl extends TransformControl implements ITrans
}
}

onInActive(): void {
super.onInActive();
this.detachDomTextEditor();
}

release(): void {
this.detachDomTextEditor();
super.release();
Expand Down
Loading

0 comments on commit aab9059

Please sign in to comment.