Feat/component selector

packages/vstory/demo/src/demos/API.tsx

@@ -11,6 +11,7 @@ export const API = () => {
 
  const chartSpec = {
  type: 'bar',
+ animation: false,
  data: [
  {
  id: 'barData',
@@ -39,7 +40,8 @@ export const API = () => {
  top: 40,
  left: 50,
  width: 250,
- height: 100
+ height: 100,
+ angle: 0.3
  },
  options: {
  graphic: {
@@ -83,7 +85,8 @@ export const API = () => {
  top: 100,
  left: 100,
  width: 400,
- height: 400
+ height: 400,
+ angle: 0.3
  },
  options: {
  spec: chartSpec
@@ -97,7 +100,8 @@ export const API = () => {
  x: 200,
  y: 200,
  width: 200,
- height: 200
+ height: 200,
+ angle: 0.3
  },
  options: {
  graphic: {
@@ -153,7 +157,6 @@ export const API = () => {
  // 删除character
  document.addEventListener('keydown', e => {
  if (e.key === 'Backspace') {
- debugger;
  const sc = selectedCharacter;
  edit.stopEdit();
  sc && story.removeCharacter(sc.id);
@@ -163,6 +166,10 @@ export const API = () => {
  });
  // 导出DSL
  console.log(story.toDSL());
+
+ setTimeout(() => {
+ edit.selectCharacter('test-chart-0');
+ }, 3000);
  // story读取DSL
  } catch (e) {
  console.error(e);

packages/vstory/demo/src/demos/GraphicEdit.tsx

@@ -6,6 +6,7 @@ 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';
+import { EditActionEnum } from '../../../src/edit/interface';
 
 loadAllSelection();
 
@@ -56,7 +57,7 @@ export const GraphicEdit = () => {
  options: {
  graphic: {
  fill: 'red',
- visible: false
+ visible: true
  },
  text: {
  text: 'title2',
@@ -157,6 +158,10 @@ export const GraphicEdit = () => {
  }
  });
 
+ edit.emitter.on(EditActionEnum.richTextPluginEdit, msg => {
+ console.log(msg);
+ });
+
  // let i = 0;
  // story.getPlayer().setCurrentChapter(0);
  // setInterval(() => {

packages/vstory/demo/src/demos/VChartGraphic.tsx

@@ -966,6 +966,9 @@ export const VChartGraphic = () => {
  edit.emitter.on('startEdit', (...args) => {
  console.log(args);
  });
+ edit.emitter.on('resize', (...args) => {
+ console.log('resize', args);
+ });
 
  // const vchart = story.getCharactersById('vchart')?.graphic.vchart;
  // window.vchart = vchart;

packages/vstory/package.json

@@ -24,15 +24,15 @@
  "test-watch": "DEBUG_MODE=1 jest --watch"
  },
  "dependencies": {
- "@visactor/vchart": "1.12.4-alpha.1",
- "@visactor/vrender": "0.20.1",
- "@visactor/vrender-core": "0.20.1",
- "@visactor/vrender-kits": "0.20.1",
- "@visactor/vrender-components": "0.20.1",
- "@visactor/vutils": "~0.18.4",
+ "@visactor/vchart": "1.12.7",
+ "@visactor/vrender": "0.20.8",
+ "@visactor/vrender-core": "0.20.8",
+ "@visactor/vrender-kits": "0.20.8",
+ "@visactor/vrender-components": "0.20.8",
+ "@visactor/vutils": "~0.18.17",
  "@visactor/vchart-extension": "0.0.2",
- "@visactor/vdataset": "~0.18.4",
- "@visactor/vscale": "~0.18.4"
+ "@visactor/vdataset": "~0.18.17",
+ "@visactor/vscale": "~0.18.17"
  },
  "devDependencies": {
  "@internal/bundler": "workspace:*",

packages/vstory/src/edit/edit-component/base-selection.ts

@@ -198,7 +198,8 @@ export abstract class BaseSelection implements IEditComponent {
  protected handlerTransformChange(data: IUpdateParams, event?: VRenderPointerEvent): void {
  if (this._activeCharacter) {
  this.edit.emitter.emit('resize', {
- position: data
+ position: data,
+ character: this._activeCharacter
  });
  this._activeCharacter.setConfig({ position: data });
  }

packages/vstory/src/edit/edit-component/box-selection.ts

@@ -13,6 +13,10 @@ export class BoxSelection extends BaseSelection implements IEditComponent {
  super.endEdit();
  return;
  }
+
+ checkOver(actionInfo: IEditActionInfo): void {
+ return;
+ }
  checkAction(actionInfo: IEditActionInfo): boolean {
  if (this._isSelection) {
  if (actionInfo.type === 'pointerup') {

packages/vstory/src/edit/edit-component/chart-selection.ts

@@ -13,6 +13,10 @@ export class ChartSelection extends BaseSelection implements IEditComponent {
  super(edit);
  }
 
+ checkOver(actionInfo: IEditActionInfo): void {
+ return;
+ }
+
  updateComponent() {
  const actionInfo = this._actionInfo as IEditSelectionInfo;
  if (!(actionInfo && actionInfo.character)) {

packages/vstory/src/edit/edit-component/edit-control/richtext-control.ts

@@ -21,11 +21,18 @@ export class RichTextControl {
  this._edit.editAction.emitter.on(EditActionEnum.richTextPluginEdit, this.onRichTextPluginEdit);
  }
 
- onRichTextPluginEdit = ({ type, p }: { type: string; p: RichTextEditPlugin }) => {
+ onRichTextPluginEdit = (msg: { type: string; p: RichTextEditPlugin }) => {
+ this._edit.emitter.emit(EditActionEnum.richTextPluginEdit, { data: msg, character: this._character });
+ const { type, p } = msg;
  if (p.currRt !== this._richText) {
  console.warn('current edit richtext not match in richtext-control.onRichTextPluginEdit');
  return;
  }
+ if (msg.type === 'change' && this._character) {
+ this._character.setConfig({
+ options: { graphic: { textConfig: this._richText.attribute.textConfig } }
+ });
+ }
  // do noting 富文本编辑消息的处理
  // console.log('onRichTextPluginEdit', type, p);
  };