Commit 5e799b5b authored by Jean Rabreau's avatar Jean Rabreau
Browse files

馃悰force resize after mount

parent 01e90569
Pipeline #60591 failed with stages
in 3 minutes
......@@ -26,7 +26,7 @@
left:0px;
width:100%;
height:100%;
background-color:rgb(0, 0, 0, 0.5);
background-color:rgba(0, 0, 0, 0.5);
}
.relight-info-content {
display:none;
......
This diff is collapsed.
......@@ -222,11 +222,13 @@ onLightChange: function(f) {
},
resize: function(width, height) {
this.canvas.width = width;
this.canvas.height = height;
if (width && height) {
this.canvas.width = width;
this.canvas.height = height;
this.layers.forEach((layer) => { layer.prefetch(); });
this.redraw();
this.layers.forEach((layer) => { layer.prefetch(); });
this.redraw();
}
},
zoom: function(dz, dt) {
......@@ -245,7 +247,8 @@ centerAndScale: function(dt) {
const zoom = Math.pow(2, t.pos.z);
const scale = Math.max(zoom*(box[2]-box[0])/t.canvas.width, zoom*(box[3]-box[1])/t.canvas.height);
const z = Math.log(scale)/Math.LN2;
t.setPosition(dt, (box[2] + box[0])/2, (box[3] + box[1])/2, z, t.pos.a);
// t.setPosition(dt, (box[2] + box[0])/2, (box[3] + box[1])/2, z, t.pos.a);
t.setPosition(dt, 0, 0, 0, 0);
},
pan: function(dt, dx, dy) { //dx and dy expressed as pixels in the current size!
......
......@@ -12,8 +12,8 @@ function formatMm(val) {
return (val/1000000).toFixed(2) + " km";
}
const RelightViewer = function (div, options) {
var t = this;
const RelightViewer = function (div, options = {}) {
const t = this;
if(typeof(div) == "string")
div = document.querySelector(div);
t.div = div;
......@@ -32,7 +32,7 @@ const RelightViewer = function (div, options) {
zoomout: { title: 'Zoom Out', task: function(/*event*/) { t.zoom(+t.nav.zoomstep, t.nav.zoomdelay); } },
rotate: { title: 'Rotate', task: function(/*event*/) { t.rotate(t.nav.zoomstep, 45); } },
light: { title: 'Light', task: function(event) { t.toggleLight(event); } },
normals: { title: 'Normals', task: function(event) { t.toggleNormals(event); } },
normals: { title: 'Normals', task: function(event) { t.toggleNormals(event); } },
full: { title: 'Fullscreen', task: function(event) { t.toggleFullscreen(event); } },
info: { title: 'info', task: function(/*event*/) { t.showInfo(); } }
},
......@@ -48,7 +48,7 @@ const RelightViewer = function (div, options) {
if({}.hasOwnProperty.call(options, i))
t.nav[i] = options[i];
var info = document.querySelector(".relight-info-content");
const info = document.querySelector(".relight-info-content");
if(info)
info.remove();
else
......@@ -58,7 +58,7 @@ const RelightViewer = function (div, options) {
' <canvas></canvas>\n' +
' <div class="relight-toolbox">\n';
for(let i in t.nav.actions) {
var action = t.nav.actions[i];
const action = t.nav.actions[i];
if(i === 'light' && t.nav.lighting)
i += ' relight-light_on';
if(i === 'normal' && t.nav.normals)
......@@ -97,14 +97,14 @@ const RelightViewer = function (div, options) {
t.nav.pagemap.area = div.querySelector(".relight-pagemap-area");
}
for(var i in t.nav.actions)
for(const i in t.nav.actions)
t.addAction(div, '.relight-' + i, t.nav.actions[i].task);
var canvas = div.querySelector('canvas');
const canvas = div.querySelector('canvas');
RelightCanvas.call(this, canvas, options);
var support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers
const support = "onwheel" in document.createElement("div") ? "wheel" : // Modern browsers
document.onmousewheel !== undefined ? "mousewheel" : // Webkit and IE support at least "mousewheel"
"DOMMouseScroll"; // older Firefox
t.canvas.addEventListener(support, function(e) { t.mousewheel(e); }, false);
......@@ -112,7 +112,7 @@ const RelightViewer = function (div, options) {
t.canvas.addEventListener('contextmenu', function(e) { e.preventDefault(); return false; });
var mc = new Hammer.Manager(t.canvas);
const mc = new Hammer.Manager(t.canvas);
mc.add( new Hammer.Pan({ pointers:1, direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
mc.on('panstart', function(ev) { t.mousedown(ev); });
mc.on('panmove', function(ev) { t.mousemove(ev); });
......@@ -126,7 +126,6 @@ const RelightViewer = function (div, options) {
mc.add( new Hammer.Tap({ taps:2 }) );
mc.on('tap', function(/*event*/) { t.zoom(-2*t.nav.zoomstep, t.nav.zoomdelay); });
t.resize(canvas.offsetWidth, canvas.offsetHeight);
if(options.scale)
t.onPosChange(function() { t.updateScale(); });
//remember size (add exif into json!)
......
<template>
<v-row class="d-flex fill-height">
<v-col cols="10">
<div id="relight__container">
<!-- <v-navigation-drawer-->
<!-- v-model="toolAccess"-->
<!-- absolute-->
<!-- :mini-variant="!help"-->
<!-- >-->
<!-- <v-list dense>-->
<!-- <v-list-item @click="toolAccess = !toolAccess">-->
<!-- <v-icon >mdi-chevron-left</v-icon>-->
<!-- <v-subheader>{{ $t('hop.close') }}</v-subheader>-->
<!-- </v-list-item>-->
<!-- <v-list-item @click="reset">-->
<!-- <v-icon>mdi-home</v-icon>-->
<!-- <v-subheader>{{ $t('hop.reset') }}</v-subheader>-->
<!-- </v-list-item>-->
<!-- &lt;!&ndash; <v-list-item @click="">&ndash;&gt;-->
<!-- &lt;!&ndash; <v-icon>{{ fullscreen.icon }}</v-icon>&ndash;&gt;-->
<!-- &lt;!&ndash; <v-subheader>{{ fullscreen.help }}</v-subheader>&ndash;&gt;-->
<!-- &lt;!&ndash; </v-list-item>&ndash;&gt;-->
<!-- <ZoomButton @zoom="zoomIn" opp="plus"/>-->
<!-- <ZoomButton @zoom="zoomOut" opp="minus"/>-->
<!-- &lt;!&ndash; <v-list-item @click="cameraType.switch">&ndash;&gt;-->
<!-- &lt;!&ndash; <v-icon>mdi-camera-flip-outline</v-icon>&ndash;&gt;-->
<!-- &lt;!&ndash; <v-subheader>{{ cameraType.nextType }}</v-subheader>&ndash;&gt;-->
<!-- &lt;!&ndash; </v-list-item>&ndash;&gt;-->
<!-- </v-list>-->
<!-- </v-navigation-drawer>-->
<!-- <transition name="slide">-->
<!-- <v-list-item-->
<!-- v-if="!toolAccess"-->
<!-- id="toolbar"-->
<!-- @click="toolAccess = !toolAccess"-->
<!-- dense-->
<!-- shaped-->
<!-- >-->
<!-- <v-icon>mdi-tools</v-icon><v-icon>mdi-chevron-right</v-icon>-->
<!-- </v-list-item>-->
<!-- </transition>-->
<div class="relight">
</div>
</div>
</v-col>
</v-row>
<div id="relight__container">
<div class="relight">
</div>
</div>
</template>
<script>
import RelightViewer from '@/assets/relight/relight-interface'
// import ZoomButton from '@/components/renderer/file/model/ZoomButton'
export default {
name: "Rti",
components: {
// ZoomButton
},
props: {
file: {
type: Object,
......@@ -75,35 +29,27 @@ export default {
},
},
mounted() {
this.relightViewer = new RelightViewer('.relight',
{
layers: [{
url: this.file.url.replace(/\/info\.json$/, ''),
layout:"image",
}],
fit: true,
bounded: false,
zbounded: false,
maxzoom: -4,
minzoom: 100,
pos: { x:0, y:0, z:0, a:0 },
rotation: 0,
// pagemap: { /*thumb: 'thumb.jpg', */size:200, autohide:1000 },
scale: 1.0,
background: [0.4, 0.4, 0.4, .3]
}
);
},
methods: {
reset() {
this.relightViewer.centerAndScale(this.nav.zoomdelay)
},
zoomIn() {
this.relightViewer.zoom(-this.nav.zoomstep, this.nav.zoomdelay)
},
zoomOut() {
this.relightViewer.zoom(this.nav.zoomstep, this.nav.zoomdelay)
},
const options ={
layers: [{
url: this.file.url.replace(/\/info\.json$/, ''),
layout:"image",
}],
fit: true,
bounded: true,
zbounded: true,
maxzoom: -4,
minzoom: 100,
pos: { x:0, y:0, z:0, a:0 },
rotation: 0,
// pagemap: { /*thumb: 'thumb.jpg', */size:200, autohide:1000 },
scale: 1.0,
background: [0.7, 0.7, 0.7, 1]
}
this.relightViewer = new RelightViewer('.relight', options)
const relightDiv = this.$el
this.relightViewer.resize(relightDiv.clientWidth, relightDiv.clientHeight)
},
}
</script>
......@@ -112,156 +58,9 @@ export default {
@import '/static/stylesheet/vendor/vcg.isti.cnr.it/relight.css';
#relight__container {
width:100%; height:100%; position: relative;
}
.relight { position:relative; touch-action: none; width:100%; height:100%; }
.relight canvas { width:100%; height:100%; display:block; }
.relight-toolbox { position: absolute; top:0px; left:0px; padding:5px; }
.relight-toolbox > div { background-size:cover; cursor:pointer; margin:5px; opacity:0.7 }
.relight-toolbox > div:hover { opacity:0.9; }
.relight-home { background-image: url(/static/skins/dark/home.png); }
.relight-zoomin { background-image: url(/static/skins/dark/zoomin.png); }
.relight-zoomout { background-image: url(/static/skins/dark/zoomout.png); }
.relight-rotate { background-image: url(/static/skins/dark/rotate.png); }
.relight-light { background-image: url(/static/skins/dark/light.png); }
.relight-light_on { background-image: url(/static/skins/dark/light_on.png); }
.relight-normals { background-image: url(/static/skins/dark/normals.png); }
.relight-normals_on { background-image: url(/static/skins/dark/normals_on.png); }
.relight-full { background-image: url(/static/skins/dark/full.png); }
.relight-full_on { background-image: url(/static/skins/dark/full_on.png); }
.relight-info { background-image: url(/static/skins/dark/help.png); }
.relight {
position:relative;
}
.relight-info-dialog {
display:none;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:rgb(0, 0, 0, 0.5);
}
.relight-info-content {
display:none;
background-color:white;
padding:20px;
max-height: calc(100% - 100px);
width: 80%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 5px;
}
.relight-scale {
position:absolute;
bottom:10px;
right:10px;
padding:20px 10px;
width:5%;
text-align:center;
z-index:1000;
background-color:rgba(0, 0, 0, 0.5);
color:#eee;
transition: opacity 1s ease;
opacity:1.0;
}
.relight-pagemap {
position:absolute;
top:10px;
right:10px;
background-color:rgb(255, 255, 255, 0.1);
transition: opacity 1s ease;
opacity:1.0;
padding: 1rem;
height: calc(100vh - 112px);
width: inherit;
}
.relight-pagemap[style]:hover {
opacity:1.0 !important;
}
.relight-pagemap-area {
position:absolute;
top:0px; left:0px;
border: 1px solid white;
box-shadow: 0 0 0 1px #ccc;
opacity:0.5;
}
@media screen and (max-width: 576px) {
.relight-toolbox > div { width: 9vmin; height: 9vmin; }
.relight-pagemap { display:none; }
.relight-scale { width:15%; }
}
@media screen and (min-width: 576px) {
.relight-toolbox > div {width: 9vmin; height: 9vmin; }
.relight-pagemap { display:none; }
.relight-scale { width:10%; }
}
@media screen and (min-width: 768px) {
.relight-toolbox > div {width: 7vmin; height: 7vmin; }
.relight-pagemap { display:block; width:200px; }
.relight-scale { width:7%; }
}
@media screen and (min-width: 992px) {
.relight-toolbox > div {width: 6vmin; height: 6vmin; }
.relight-pagemap { display:block; width:200px; }
.relight-scale { width:5%; }
}
#toolbar {
position:absolute;
top:8px;
left: 0px;
-webkit-user-select:none;
-webkit-touch-callout:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
touch-action:none;
-ms-touch-action:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
z-index: 1;
background: rgba(255,255,255,0.3);
&.theme--dark {
background: rgba(0,0,0,0.3);
}
}
slide-enter-active {
animation: slide-in 1s;
}
.slide-leave-active {
animation: slide-out .3s;
}
@keyframes slide-out {
0% {
margin-left: 0px;
opacity: 1;
background: transparent;
}
70%{
opacity: 0.7;
}
100% {
margin-left: 56px;
opacity: 0;
}
}
@keyframes slide-in {
0% {
left: -56px;
}
100% {
left: 0px;
}
}
</style>
<template>
<v-row class="d-flex fill-height">
<v-col cols="10">
<iframe
id="frame"
ref="frame"
title="titre"
src="/demo.html"
width="100%"
height="100%"
>
</iframe>
</v-col>
</v-row>
<div id="relight__container">
<iframe
id="frame"
ref="frame"
title="titre"
src="/demo.html"
width="100%"
height="100%"
>
</iframe>
</div>
</template>
<script>
......@@ -34,4 +32,8 @@ export default {
</script>
<style scoped>
#relight__container {
height:100%;
width: 100%;
}
</style>
<template>
<v-row class="d-flex fill-height">
<v-col cols="10">
<div id="relight__container">
<v-navigation-drawer
v-model="toolAccess"
absolute
:mini-variant="!help"
>
<v-list dense>
<v-list-item @click="toolAccess = !toolAccess">
<v-icon >mdi-chevron-left</v-icon>
<v-subheader>{{ $t('hop.close') }}</v-subheader>
</v-list-item>
<v-list-item @click="reset">
<v-icon>mdi-home</v-icon>
<v-subheader>{{ $t('hop.reset') }}</v-subheader>
</v-list-item>
<!-- <v-list-item @click="">-->
<!-- <v-icon>{{ fullscreen.icon }}</v-icon>-->
<!-- <v-subheader>{{ fullscreen.help }}</v-subheader>-->
<!-- </v-list-item>-->
<ZoomButton @zoom="zoomIn" opp="plus"/>
<ZoomButton @zoom="zoomOut" opp="minus"/>
<!-- <v-list-item @click="cameraType.switch">-->
<!-- <v-icon>mdi-camera-flip-outline</v-icon>-->
<!-- <v-subheader>{{ cameraType.nextType }}</v-subheader>-->
<!-- </v-list-item>-->
</v-list>
</v-navigation-drawer>
<transition name="slide">
<v-list-item
v-if="!toolAccess"
id="toolbar"
@click="toolAccess = !toolAccess"
dense
shaped
>
<v-icon>mdi-tools</v-icon><v-icon>mdi-chevron-right</v-icon>
</v-list-item>
</transition>
<div class="relight">
</div>
</div>
</v-col>
</v-row>
<div id="relight__container">
<div class="relight">
</div>
</div>
<!-- <v-navigation-drawer-->
<!-- v-model="toolAccess"-->
<!-- absolute-->
<!-- :mini-variant="!help"-->
<!-- >-->
<!-- <v-list dense>-->
<!-- <v-list-item @click="toolAccess = !toolAccess">-->
<!-- <v-icon >mdi-chevron-left</v-icon>-->
<!-- <v-subheader>{{ $t('hop.close') }}</v-subheader>-->
<!-- </v-list-item>-->
<!-- <v-list-item @click="reset">-->
<!-- <v-icon>mdi-home</v-icon>-->
<!-- <v-subheader>{{ $t('hop.reset') }}</v-subheader>-->
<!-- </v-list-item>-->
<!-- &lt;!&ndash; <v-list-item @click="">&ndash;&gt;-->
<!-- &lt;!&ndash; <v-icon>{{ fullscreen.icon }}</v-icon>&ndash;&gt;-->
<!-- &lt;!&ndash; <v-subheader>{{ fullscreen.help }}</v-subheader>&ndash;&gt;-->
<!-- &lt;!&ndash; </v-list-item>&ndash;&gt;-->
<!-- <ZoomButton @zoom="zoomIn" opp="plus"/>-->
<!-- <ZoomButton @zoom="zoomOut" opp="minus"/>-->
<!-- &lt;!&ndash; <v-list-item @click="cameraType.switch">&ndash;&gt;-->
<!-- &lt;!&ndash; <v-icon>mdi-camera-flip-outline</v-icon>&ndash;&gt;-->
<!-- &lt;!&ndash; <v-subheader>{{ cameraType.nextType }}</v-subheader>&ndash;&gt;-->
<!-- &lt;!&ndash; </v-list-item>&ndash;&gt;-->
<!-- </v-list>-->
<!-- </v-navigation-drawer>-->
<!-- <transition name="slide">-->
<!-- <v-list-item-->
<!-- v-if="!toolAccess"-->
<!-- id="toolbar"-->
<!-- @click="toolAccess = !toolAccess"-->
<!-- dense-->
<!-- shaped-->
<!-- >-->
<!-- <v-icon>mdi-tools</v-icon><v-icon>mdi-chevron-right</v-icon>-->
<!-- </v-list-item>-->
<!-- </transition>-->
</template>
......@@ -70,24 +66,27 @@ export default {
},
mounted() {
const url2 = 'items/c950b2d5-d748-467c-bb69-8f4c7bf5eda6/mediafiles/get_rti';
this.relightViewer = new RelightViewer('.relight',
{
layers: [{
url:`${process.env.VUE_APP_AXIOS_BASE_URL}${url2}`,
layout:"image",
}],
fit: true,
bounded: false,
zbounded: false,
maxzoom: -4,
minzoom: 100,
pos: { x:0, y:0, z:0, a:0 },
rotation: 0,
// pagemap: { /*thumb: 'thumb.jpg', */size:200, autohide:1000 },
scale: 1.0,
background: [0.7, 0.7, 0.7, 1]
}
);
const options ={
layers: [{
url:`${process.env.VUE_APP_AXIOS_BASE_URL}${url2}`,
layout:"image",
}],
fit: true,
bounded: true,
zbounded: true,
maxzoom: -4,
minzoom: 100,
pos: { x:0, y:0, z:0, a:0 },
rotation: 0,
// pagemap: { /*thumb: 'thumb.jpg', */size:200, autohide:1000 },
scale: 1.0,
background: [0.7, 0.7, 0.7, 1]
}
this.relightViewer = new RelightViewer('.relight', options)
const relightDiv = this.$el
this.relightViewer.resize(relightDiv.clientWidth, relightDiv.clientHeight)
},
methods: {
reset() {
......@@ -107,131 +106,33 @@ export default {
@import '/static/stylesheet/vendor/vcg.isti.cnr.it/relight.css';
#relight__container {
width:100%; height:100%; position: relative;
padding: 1rem;
height: calc(100vh - 112px);
width: inherit;
}
.relight { position:relative; touch-action: none; width:100%; height:100%; }
.relight canvas { width:100%; height:100%; display:block; }
.relight-toolbox { position: absolute; top:0px; left:0px; padding:5px; }
.relight-toolbox > div { background-size:cover; cursor:pointer; margin:5px; opacity:0.7 }
.relight-toolbox > div:hover { opacity:0.9; }
.relight-home { background-image: url(/static/skins/dark/home.png); }
.relight-zoomin { background-image: url(/static/skins/dark/zoomin.png); }
.relight-zoomout { background-image: url(/static/skins/dark/zoomout.png); }
.relight-rotate { background-image: url(/static/skins/dark/rotate.png); }
.relight-light { background-image: url(/static/skins/dark/light.png); }
.relight-light_on { background-image: url(/static/skins/dark/light_on.png); }
.relight-normals { background-image: url(/static/skins/dark/normals.png); }
.relight-normals_on { background-image: url(/static/skins/dark/normals_on.png); }
.relight-full { background-image: url(/static/skins/dark/full.png); }
.relight-full_on { background-image: url(/static/skins/dark/full_on.png); }
.relight-info { background-image: url(/static/skins/dark/help.png); }
.relight {