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

fix(attribute): 修改属性无法编辑的问题 #11

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(attribute): 修改属性无法编辑的问题 #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 0 additions & 3 deletions components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ declare module '@vue/runtime-core' {
AudioIcon: typeof import('./src/components/icons/AudioIcon.vue')['default']
AudioItem: typeof import('./src/components/item/trackItem/template/AudioItem.vue')['default']
AudioPanel: typeof import('./src/components/AudioPanel/index.vue')['default']
AudioResourceItem: typeof import('./src/components/item/resourcesItem/AudioResourceItem.vue')['default']
CanvasPlayer: typeof import('./src/components/container/CanvasPlayer.vue')['default']
ColorPicker: typeof import('./src/components/item/formItem/color/ColorPicker.vue')['default']
DeleteIcon: typeof import('./src/components/icons/DeleteIcon.vue')['default']
Expand Down Expand Up @@ -47,7 +46,6 @@ declare module '@vue/runtime-core' {
Loading: typeof import('./src/components/Loading.vue')['default']
LocalPanel: typeof import('./src/components/LocalPanel/index.vue')['default']
MenuList: typeof import('./src/components/MenuList.vue')['default']
OtherResource: typeof import('./src/components/item/resourcesItem/OtherResource.vue')['default']
Player: typeof import('./src/components/item/player/Player.vue')['default']
PlayerControl: typeof import('./src/components/item/player/PlayerControl.vue')['default']
PlayerMoveable: typeof import('./src/components/item/player/PlayerMoveable.vue')['default']
Expand All @@ -58,7 +56,6 @@ declare module '@vue/runtime-core' {
SplitIcon: typeof import('./src/components/icons/SplitIcon.vue')['default']
SplitLine: typeof import('./src/components/SplitLine.vue')['default']
SubIcon: typeof import('./src/components/icons/SubIcon.vue')['default']
SubList: typeof import('./src/components/SubList.vue')['default']
Subsection: typeof import('./src/components/Subsection/index.vue')['default']
Tabs: typeof import('./src/components/Tabs/index.vue')['default']
TextIcon: typeof import('./src/components/icons/TextIcon.vue')['default']
Expand Down
39 changes: 23 additions & 16 deletions src/class/TextTrack.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,30 +21,39 @@ export class TextTrack implements BaseTractItem {
stroke?: string;
textBackgroundColor?: string;
// 影响文本绘制的属性都使用getter/setter，在设置时，需要重新计算文本宽高
#fontSize = 24;
_fontSize = 24;
get fontSize() {
return this.#fontSize;
return this._fontSize;
}
set fontSize(value: number) {
this.#fontSize = value;
this._fontSize = value;
// 绘制文本时，需要重新计算文本宽高
this.calcSize();
}
#fontFamily = 'Arial';
_fontFamily = 'Arial';
get fontFamily() {
return this.#fontFamily;
return this._fontFamily;
}
set fontFamily(value: string) {
this.#fontFamily = value;
this._fontFamily = value;
// 绘制文本时，需要重新计算文本宽高
this.calcSize();
}
#content = '';
_content = '';
get content() {
return this.#content;
return this._content;
}
set content(value: string) {
this.#content = value;
this._content = value;
// 绘制文本时，需要重新计算文本宽高
this.calcSize();
}
_scale = 100;
get scale() {
return this._scale;
}
set scale(value: number) {
this._scale = value;
// 绘制文本时，需要重新计算文本宽高
this.calcSize();
}
Expand All @@ -54,12 +63,12 @@ export class TextTrack implements BaseTractItem {

this.source = source;
// 设置文字信息
this.#content = source.content;
this._content = source.content;
this._fontSize = source.fontSize;
this._fontFamily = source.fontFamily;
this.fill = source.fill;
this.stroke = source.stroke;
this.textBackgroundColor = source.textBackgroundColor;
this.#fontSize = source.fontSize;
this.#fontFamily = source.fontFamily;
this.name = source.name;
// 对于文本意义不大
this.format = 'text';
Expand All @@ -70,15 +79,14 @@ export class TextTrack implements BaseTractItem {
// 设置绘制信息
this.centerX = 0;
this.centerY = 0;
this.scale = 100;

this.calcSize();
}
calcSize() {
const { width, height } = getTextRect({ text: this.#content, fontSize: this.#fontSize, fontFamily: this.#fontFamily });
const { width, height } = getTextRect({ text: this._content, fontSize: this._fontSize, fontFamily: this._fontFamily });
// 计算文本宽高
this.height = height;
this.width = width;
this.height = height;
}
get drawWidth() {
return this.width * this.scale / 100;
Expand All @@ -89,7 +97,6 @@ export class TextTrack implements BaseTractItem {
type: TrackType = 'text';
centerX = 0;
centerY = 0;
scale = 100;
width = 0;
height = 0;
getDrawX(width: number) {
Expand Down
4 changes: 2 additions & 2 deletions src/components/item/formItem/FormItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,8 +130,8 @@
const { selectResource, selectTrackItem, trackList } = storeToRefs(trackStore);
const formValue = computed({
get() {
if (selectResource.value) {
return get(toRaw(trackList.value[selectTrackItem.value.line].list[selectTrackItem.value.index]), props.componentData.mappingKey);
if (trackStore.selectResource) {
return get(trackStore.trackList[trackStore.selectTrackItem.line].list[trackStore.selectTrackItem.index], props.componentData.mappingKey);
} else {
return null;
}
Expand Down
8 changes: 4 additions & 4 deletions src/data/options/text.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,10 +43,10 @@ export const Options = {
maxRows: 4
},
placeholder: '请输入内容'
}, name: '内容', mappingKey: 'text', defaultValue: '默认文本' }),
mappingFormItem('Color', { name: '颜色', mappingKey: 'style.fill', defaultValue: '#ffffff' }),
mappingFormItem('Color', { name: '描边', mappingKey: 'style.stroke' }),
mappingFormItem('Color', { name: '背景', mappingKey: 'style.textBackgroundColor' })
}, name: '内容', mappingKey: 'content', defaultValue: '默认文本' }),
mappingFormItem('Color', { name: '颜色', mappingKey: 'fill', defaultValue: '#ffffff' }),
mappingFormItem('Color', { name: '描边', mappingKey: 'stroke' }),
mappingFormItem('Color', { name: '背景', mappingKey: 'textBackgroundColor' })
]
})
]
Expand Down