public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-13 09:46:22 +00:00
Code Issues Releases Wiki Activity

change a magnification by image size #1448

Browse Source
This commit is contained in:
roottool
2019-01-16 22:47:42 +09:00
parent 72df418953
commit ea5970ab1c
1 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
browser/components/MarkdownPreview.js
View File

@@ -838,30 +838,39 @@ export default class MarkdownPreview extends React.Component {
const imgList = item.contentWindow.document.body.querySelectorAll('img') const imgList = item.contentWindow.document.body.querySelectorAll('img')
for (const img of imgList) { for (const img of imgList) {
img.onclick = () => { img.onclick = () => {
const magnification = document.body.clientWidth / img.width const widthMagnification = document.body.clientWidth / img.width
const top = document.body.clientHeight / 2 - img.height * magnification / 2 const heightMagnification = document.body.clientHeight / img.height
const animationSpeed = 300 const baseOnWidth = widthMagnification < heightMagnification
const magnification = baseOnWidth ? widthMagnification : heightMagnification
const zoomImgWidth = img.width * magnification
const zoomImgHeight = img.height * magnification
const zoomInImgTop = document.body.clientHeight / 2 - zoomImgHeight / 2
const zoomInImgLeft = document.body.clientWidth / 2 - zoomImgWidth / 2
const originalImgTop = img.y + rect.top
const originalImgLeft = img.x + rect.left
const originalImgRect = { const originalImgRect = {
top: `${img.y + rect.top}px`, top: `${originalImgTop}px`,
left: `${img.x + rect.left}px`, left: `${originalImgLeft}px`,
width: `${img.width}px`, width: `${img.width}px`,
height: `${img.height}px` height: `${img.height}px`
} }
const zoomInImgRect = { const zoomInImgRect = {
top: `${top}px`, top: `${baseOnWidth ? zoomInImgTop : 0}px`,
left: 0, left: `${baseOnWidth ? 0 : zoomInImgLeft}px`,
width: `100%`, width: `${zoomImgWidth}px`,
height: `${img.height * magnification}px` height: `${zoomImgHeight}px`
} }
const animationSpeed = 300
const zoomImg = document.createElement('img') const zoomImg = document.createElement('img')
zoomImg.src = img.src zoomImg.src = img.src
zoomImg.style = ` zoomImg.style = `
position: absolute; position: absolute;
top: ${top}px; top: ${baseOnWidth ? zoomInImgTop : 0}px;
left: 0; left: ${baseOnWidth ? 0 : zoomInImgLeft}px;
width: 100%; width: ${zoomImgWidth};
height: ${img.height * magnification}px; height: ${zoomImgHeight}px;
` `
zoomImg.animate([ zoomImg.animate([
originalImgRect, originalImgRect,
@@ -882,8 +891,8 @@ export default class MarkdownPreview extends React.Component {
overlay.onclick = () => { overlay.onclick = () => {
zoomImg.style = ` zoomImg.style = `
position: absolute; position: absolute;
top: ${img.y + rect.top}px; top: ${originalImgTop}px;
left: ${img.x + rect.left}px; left: ${originalImgLeft}px;
width: ${img.width}px; width: ${img.width}px;
height: ${img.height}px; height: ${img.height}px;
` `