Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/image #6

Merged
merged 4 commits into from
Jun 12, 2024
Merged

Feat/image #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
25e7616
feat: support rect angle
neuqzxy Jun 11, 2024
3c9273a
feat: support translate
neuqzxy Jun 11, 2024
75662b2
feat: support image edit
neuqzxy Jun 12, 2024
b5264ca
feat: support text edit
neuqzxy Jun 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 70 additions & 1 deletion packages/vstory/demo/src/demos/GraphicEdit.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading