mirror of https://github.com/halo-dev/halo
fix: editor's image cannot be resized proportionally (#4993)
<!-- Thanks for sending a pull request! Here are some tips for you: 1. 如果这是你的第一次,请阅读我们的贡献指南:<https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>。 1. If this is your first time, please read our contributor guidelines: <https://github.com/halo-dev/halo/blob/master/CONTRIBUTING.md>. 2. 请根据你解决问题的类型为 Pull Request 添加合适的标签。 2. Please label this pull request according to what type of issue you are addressing, especially if this is a release targeted pull request. 3. 请确保你已经添加并运行了适当的测试。 3. Ensure you have added or ran the appropriate tests for your PR. --> #### What type of PR is this? /kind bug /area editor <!-- 添加其中一个类别: Add one of the following kinds: /kind bug /kind cleanup /kind documentation /kind feature /kind improvement 适当添加其中一个或多个类别(可选): Optionally add one or more of the following kinds if applicable: /kind api-change /kind deprecation /kind failing-test /kind flake /kind regression --> #### What this PR does / why we need it: 修复#4985 中调整图片大小时的高度变化bug #### Which issue(s) this PR fixes: <!-- PR 合并时自动关闭 issue。 Automatically closes linked issue when PR is merged. 用法:`Fixes #<issue 号>`,或者 `Fixes (粘贴 issue 完整链接)` Usage: `Fixes #<issue number>`, or `Fixes (paste link of issue)`. --> Fixes #4985 #### Special notes for your reviewer: 似乎是因为横纵比aspectRatio在调整大小的doDrag函数中被动态的更新数值,导致依赖aspectRatio来计算的高度也会出现问题。直接把aspectRatio移动到函数外,只在挂载后更新一次值即可解决。 #### Does this PR introduce a user-facing change? <!-- 如果当前 Pull Request 的修改不会造成用户侧的任何变更,在 `release-note` 代码块儿中填写 `NONE`。 否则请填写用户侧能够理解的 Release Note。如果当前 Pull Request 包含破坏性更新(Break Change), Release Note 需要以 `action required` 开头。 If no, just write "NONE" in the release-note block below. If yes, a release note is required: Enter your extended release note in the block below. If the PR requires additional action from users switching to the new release, include the string "action required". --> ```release-note 这会修复当前console的editor中图片比例拉伸的bug ```pull/5008/head
parent
197c622b35
commit
4fab6976d1
|
@ -50,9 +50,17 @@ function handleSetFocus() {
|
|||
props.editor.commands.setNodeSelection(props.getPos());
|
||||
}
|
||||
|
||||
const aspectRatio = ref<number>(0);
|
||||
const inputRef = ref();
|
||||
const resizeRef = ref<HTMLDivElement>();
|
||||
|
||||
function onImageLoaded() {
|
||||
if (!resizeRef.value) return;
|
||||
|
||||
aspectRatio.value =
|
||||
resizeRef.value.clientWidth / resizeRef.value.clientHeight;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!src.value) {
|
||||
inputRef.value.focus();
|
||||
|
@ -73,20 +81,17 @@ onMounted(() => {
|
|||
function doDrag(e: MouseEvent) {
|
||||
if (!resizeRef.value) return;
|
||||
|
||||
const aspectRatio =
|
||||
resizeRef.value.clientWidth / resizeRef.value.clientHeight;
|
||||
|
||||
const newWidth = Math.min(
|
||||
startWidth + e.clientX - startX,
|
||||
resizeRef.value.parentElement?.clientWidth || 0
|
||||
);
|
||||
|
||||
const width = newWidth.toFixed(0) + "px";
|
||||
const height = (newWidth / aspectRatio).toFixed(0) + "px";
|
||||
const height = (newWidth / aspectRatio.value).toFixed(0) + "px";
|
||||
props.editor
|
||||
.chain()
|
||||
.updateAttributes(Image.name, { width, height })
|
||||
.setNodeSelection(props.editor.state.selection.from)
|
||||
.setNodeSelection(props.getPos())
|
||||
.focus()
|
||||
.run();
|
||||
}
|
||||
|
@ -128,6 +133,7 @@ onMounted(() => {
|
|||
:alt="alt"
|
||||
:href="href"
|
||||
class="w-full h-full"
|
||||
@load="onImageLoaded"
|
||||
/>
|
||||
</div>
|
||||
</node-view-wrapper>
|
||||
|
|
Loading…
Reference in New Issue