Merge from vscode c58aaab8a1cc22a7139b761166a0d4f37d41e998 (#7880)

* Merge from vscode c58aaab8a1cc22a7139b761166a0d4f37d41e998

* fix pipelines

* fix strict-null-checks

* add missing files
This commit is contained in:
Anthony Dresser
2019-10-21 22:12:22 -07:00
committed by GitHub
parent 7c9be74970
commit 1e22f47304
913 changed files with 18898 additions and 16536 deletions

View File

@@ -4,8 +4,9 @@
*--------------------------------------------------------------------------------------------*/
html, body {
width: 100%;
height: 100%;
max-height: 100%;
text-align: center;
}
body img {
@@ -77,22 +78,38 @@ body img {
margin-left: 5px;
}
.loading {
position: fixed;
.container.loading,
.container.error {
display: flex;
justify-content: center;
align-items: center;
}
.loading-indicator {
width: 30px;
height: 30px;
left: 50%;
top: 50%;
margin-top: -15px;
margin-left: -15px;
background-image: url('./loading.svg');
background-size: cover;
}
.vscode-dark .loading {
.loading-indicator,
.image-load-error-message {
display: none;
}
.loading .loading-indicator,
.error .image-load-error-message {
display: block;
}
.image-load-error-message {
margin: 1em;
}
.vscode-dark .loading-indicator {
background-image: url('./loading-dark.svg');
}
.vscode-high-contrast .loading {
.vscode-high-contrast .loading-indicator {
background-image: url('./loading-hc.svg');
}

View File

@@ -70,9 +70,10 @@
let ctrlPressed = false;
let altPressed = false;
let hasLoadedImage = false;
let consumeClick = false;
// Elements
const container = /** @type {HTMLElement} */(document.querySelector('body'));
const container = document.body;
const image = document.createElement('img');
function updateScale(newScale) {
@@ -88,9 +89,6 @@
image.style.width = 'auto';
vscode.setState(undefined);
} else {
const oldWidth = image.width;
const oldHeight = image.height;
scale = clamp(newScale, MIN_SCALE, MAX_SCALE);
if (scale >= PIXELATION_THRESHOLD) {
image.classList.add('pixelated');
@@ -98,25 +96,19 @@
image.classList.remove('pixelated');
}
const { scrollTop, scrollLeft } = image.parentElement;
const dx = (scrollLeft + image.parentElement.clientWidth / 2) / image.parentElement.scrollWidth;
const dy = (scrollTop + image.parentElement.clientHeight / 2) / image.parentElement.scrollHeight;
const dx = (window.scrollX + container.clientWidth / 2) / container.scrollWidth;
const dy = (window.scrollY + container.clientHeight / 2) / container.scrollHeight;
image.classList.remove('scale-to-fit');
image.style.minWidth = `${(image.naturalWidth * scale)}px`;
image.style.width = `${(image.naturalWidth * scale)}px`;
const newWidth = image.width;
const scaleFactor = (newWidth - oldWidth) / oldWidth;
const newScrollX = container.scrollWidth * dx - container.clientWidth / 2;
const newScrollY = container.scrollHeight * dy - container.clientHeight / 2;
const newScrollLeft = ((oldWidth * scaleFactor * dx) + scrollLeft);
const newScrollTop = ((oldHeight * scaleFactor * dy) + scrollTop);
// scrollbar.setScrollPosition({
// scrollLeft: newScrollLeft,
// scrollTop: newScrollTop,
// });
window.scrollTo(newScrollX, newScrollY);
vscode.setState({ scale: scale, offsetX: newScrollLeft, offsetY: newScrollTop });
vscode.setState({ scale: scale, offsetX: newScrollX, offsetY: newScrollY });
}
vscode.postMessage({
@@ -125,6 +117,18 @@
});
}
function changeActive(value) {
if (value) {
container.classList.add('zoom-in');
consumeClick = true;
} else {
ctrlPressed = false;
altPressed = false;
container.classList.remove('zoom-out');
container.classList.remove('zoom-in');
}
}
function firstZoom() {
if (!image || !hasLoadedImage) {
return;
@@ -161,6 +165,18 @@
}
});
container.addEventListener('mousedown', (/** @type {MouseEvent} */ e) => {
if (!image || !hasLoadedImage) {
return;
}
if (e.button !== 0) {
return;
}
consumeClick = false;
});
container.addEventListener('click', (/** @type {MouseEvent} */ e) => {
if (!image || !hasLoadedImage) {
return;
@@ -170,6 +186,18 @@
return;
}
ctrlPressed = e.ctrlKey;
altPressed = e.altKey;
if (isMac ? altPressed : ctrlPressed) {
container.classList.remove('zoom-in');
container.classList.add('zoom-out');
}
if (consumeClick) {
consumeClick = false;
return;
}
// left click
if (scale === 'fit') {
firstZoom();
@@ -227,24 +255,19 @@
});
container.classList.add('image');
container.classList.add('zoom-in');
image.classList.add('scale-to-fit');
image.addEventListener('load', () => {
document.querySelector('.loading').remove();
hasLoadedImage = true;
if (!image) {
return;
}
vscode.postMessage({
type: 'size',
value: `${image.naturalWidth}x${image.naturalHeight}`,
});
container.classList.add('ready');
document.body.classList.remove('loading');
document.body.classList.add('ready');
document.body.append(image);
updateScale(scale);
@@ -254,6 +277,12 @@
}
});
image.addEventListener('error', () => {
hasLoadedImage = true;
document.body.classList.add('error');
document.body.classList.remove('loading');
});
image.src = decodeURI(settings.src);
window.addEventListener('message', e => {
@@ -261,6 +290,9 @@
case 'setScale':
updateScale(e.data.scale);
break;
case 'setActive':
changeActive(e.data.value);
break;
}
});
}());