Skip to content

Commit

Permalink
various improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@kepper
kepper committed Aug 20, 2023
1 parent fef5e23 commit c0a308c
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 48 deletions.
120 changes: 76 additions & 44 deletions src/components/FacsimileComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export default {
const counterRotate = this.viewer.viewport.getRotation()// this.tileSource.degrees * -1
const center = { x: 0, y: 0 }
console.log('counterRotate: ', counterRotate)
console.log('counterRotate: ', counterRotate, this.tileSource.degrees * -1)
console.log(e)
const pageOverlay = this.viewer.getOverlayById(document.querySelector('.overlay.pageBorder'))
Expand Down Expand Up @@ -199,6 +199,7 @@ export default {
* @return {[type]} [description]
*/
openFacsimile () {
console.log('FacsimileComponent:openFasimile() started')
if (!this.tileSource) {
// console.log('Page not available (yet)')
return null
Expand All @@ -223,23 +224,30 @@ export default {
* @return {[type]} [description]
*/
facsimileOpened (data) {
console.log('FacsimileComponent:facsimileOpened()')
this.renderedUri = data.source
this.$store.dispatch('setLoading', false)
// temporary condition
/* if (this.viewer) {
return null
} */
this.setPageRotation()
console.log('facsimileOpened', data)
this.renderGrid(data)
if (this.showPageBorders) {
this.renderPageBorders()
}
console.log('facsimileOpened', data)
},
/**
* updates the facsimile position when borders or dimensions change etc.
* @return {[type]} [description]
*/
updateFacsimile (tileSource, oldSource) {
// console.warn('\nchanging tileSource: ', tileSource, oldSource)
// console.log('FacsimileComponent:updateFacsimile() received new tileSource:', tileSource, oldSource)
if (!tileSource) {
return null
}
Expand All @@ -255,15 +263,29 @@ export default {
tiledImage.setWidth(tileSource.width)
}
} catch (err) {
console.error('Unable to set width of tiledImage to ' + tileSource.width + ': ' + err, err)
console.error('FacsimileComponent:updateFacsimile(): Unable to set width of tiledImage to ' + tileSource.width + ': ' + err, err)
}
try {
if (tileSource.x !== oldSource.x || tileSource.y !== oldSource.y) {
tiledImage.setPosition(new OpenSeadragon.Point(tileSource.x, tileSource.y))
}
} catch (err) {
console.error('Unable to set position of tiledImage to ' + tileSource.x + ' / ' + tileSource.y + ': ' + err, err)
console.error('FacsimileComponent:updateFacsimile(): Unable to set position of tiledImage to ' + tileSource.x + ' / ' + tileSource.y + ': ' + err, err)
}
try {
if (tileSource.degrees !== oldSource.degrees) {
this.setPageRotation()
}
} catch (err) {
console.error('FacsimileComponent:updateFacsimile(): Unable to update page rotation: ' + err, err)
}
try {
this.renderPageBorders()
} catch (err) {
console.error('FacsimileComponent:updateFacsimile(): Unable to update pageBorders: ' + err, err)
}
},
Expand All @@ -272,6 +294,12 @@ export default {
* @return {[type]} [description]
*/
renderGrid () {
console.log('FacsimileComponent:renderGrid()')
// temporary condition
/* if (this.viewer) {
return null
} */
document.querySelectorAll('.grid').forEach(overlay => {
this.viewer.removeOverlay(overlay)
})
Expand Down Expand Up @@ -383,6 +411,11 @@ export default {
},
renderPageBorders () {
// temporary condition
/* if (this.viewer) {
return null
} */
const tiledImage = this.viewer.world.getItemAt(0)
if (!tiledImage) {
Expand All @@ -396,7 +429,8 @@ export default {
return null
}
const existingRotatedOverlay = document.querySelector('.rotatedPageBorder.overlay')
// the bounding box of the media fragment, which could be loaded by IIIF
const existingRotatedOverlay = document.querySelector('.overlay.pageBorder.bbox')
const centerX = parseFloat(pageDimensions.mmWidth) / 2
const centerY = parseFloat(pageDimensions.mmHeight) / 2
Expand All @@ -405,7 +439,8 @@ export default {
if (!existingRotatedOverlay) {
const element = document.createElement('div')
element.classList.add('overlay')
element.classList.add('rotatedPageBorder')
element.classList.add('pageBorder')
element.classList.add('bbox')
this.viewer.addOverlay({
element,
Expand All @@ -417,15 +452,17 @@ export default {
this.viewer.updateOverlay(existingRotatedOverlay, rotatedLocation)
}
// the actual rectangle stored in the data
const location = new OpenSeadragon.Rect(0, 0, parseFloat(pageDimensions.mmWidth), parseFloat(pageDimensions.mmHeight))
const existingOverlay = document.querySelector('.pageBorder.overlay')
const existingOverlay = document.querySelector('.overlay.pageBorder.mediaFragment')
if (!existingOverlay) {
const element = document.createElement('div')
element.classList.add('overlay')
element.classList.add('pageBorder')
element.addEventListener('click', this.pageClickListener)
element.classList.add('mediaFragment')
element.title = 'Generated IIIF Selection'
this.viewer.addOverlay({
element,
Expand All @@ -435,42 +472,36 @@ export default {
} else {
this.viewer.updateOverlay(existingOverlay, location)
}
/*
// get innermost rectangle
const center = location.getCenter()
const deg = this.viewer.viewport.getRotation()
const tl = location.getTopLeft()// .rotate(deg, location.getTopLeft())
const tr = location.getTopRight()// .rotate(deg, location.getTopRight())
const bl = location.getBottomLeft()// .rotate(deg, location.getBottomLeft())
const br = location.getBottomRight()// .rotate(deg, location.getBottomRight())
const tlRotated = tl.rotate(deg, tl)
const trRotated = tr.rotate(deg, tr)
const blRotated = bl.rotate(deg, bl)
const brRotated = br.rotate(deg, br)
const left = deg > 0 ? tlRotated.x : blRotated.x
const top = deg > 0 ? trRotated.y : tlRotated.y
const right = deg > 0 ? brRotated.x : trRotated.x
const bottom = deg > 0 ? blRotated.y : brRotated.y
const width = right - left
const height = bottom - top
const origin = rotatePoint({ x: center.x - width / 2, y: center.y - height / 2 }, { x: tl.x, y: tl.x }, deg)
const offsetX = origin.x - tl.x
const offsetY = origin.y - tl.y
const irX = deg > 0 ? origin.x : origin.x - offsetX
const irY = deg > 0 ? origin.y + offsetY : origin.y
const irW = width - offsetX
const irH = height - offsetY
const centerRotated = center.rotate(deg, tl)
const width = location.width
const height = location.height
const offsetX = Math.abs(center.x - centerRotated.x)
const offsetY = Math.abs(center.y - centerRotated.y)
// const origin = rotatePoint({ x: center.x - width / 2, y: center.y - height / 2 }, { x: tl.x, y: tl.x }, deg * -1)
const irX = deg < 0 ? center.x - width / 2 + offsetX * 2 : center.x - width / 2
const irY = deg < 0 ? center.y - height / 2 : center.y - height / 2 + offsetY * 2
const irW = deg < 0 ? width - offsetX * 2 : width - offsetX * 2
const irH = deg < 0 ? height - offsetY * 2 : height - offsetY * 2
const innerRect = new OpenSeadragon.Rect(irX, irY, irW, irH)
const existingInnerOverlay = document.querySelector('.pageBorderInner.overlay')
const existingInnerOverlay = document.querySelector('.overlay.pageBorder.actualPage')
if (!existingInnerOverlay) {
const element = document.createElement('div')
element.classList.add('overlay')
element.classList.add('pageBorderInner')
element.classList.add('pageBorder')
element.classList.add('actualPage')
element.addEventListener('click', this.pageClickListener)
this.viewer.addOverlay({
element,
Expand All @@ -479,7 +510,7 @@ export default {
})
} else {
this.viewer.updateOverlay(existingInnerOverlay, innerRect)
} */
}
//
/* document.querySelectorAll('.pageBorderPoint.overlay, .fragmentFrame, .pageBorder.overlay').forEach(overlay => {
Expand Down Expand Up @@ -541,6 +572,7 @@ export default {
}
},
created () {
console.log('FacsimileComponent:created()')
this.$watch(
() => this.$route.query,
(to, previous) => {
Expand All @@ -555,9 +587,8 @@ export default {
)
},
mounted () {
this.viewer = OpenSeadragon(osdOptions)
console.log('FacsimileComponent:mounted()')
console.log('FacsimileComponent:created()')
this.viewer = OpenSeadragon(osdOptions)
this.viewer.addHandler('open', (data) => {
this.facsimileOpened(data)
})
Expand All @@ -574,7 +605,8 @@ export default {
this.unwatchPageRotation = this.$store.watch(
(state, getters) => getters.currentPageRotation,
(newRot, oldRot) => {
this.setPageRotation()
// this is done by updateFacsimile, as tileSources.degrees triggers that as well
// this.setPageRotation()
})
this.unwatchPageDimensions = this.$store.watch(
Expand All @@ -600,8 +632,8 @@ export default {
this.openFacsimile()
},
beforeUnmount () {
this.unload()
console.log('FacsimileComponent:beforeUnmount()')
this.unload()
// this.unwatchPageBorders()
this.unwatchPageRotation()
this.unwatchPageDimensions()
Expand Down Expand Up @@ -814,15 +846,15 @@ export default {
position: relative;
}
.overlay.pageBorder {
.overlay.pageBorder.bbox {
outline: 1px solid #ff00ff;
}
.overlay.pageBorderInner {
.overlay.pageBorder.mediaFragment {
outline: 1px solid #00ffff;
}
.overlay.rotatedPageBorder {
.overlay.pageBorder.actualPage {
outline: 8px solid #0000ff99;
}
Expand Down
29 changes: 28 additions & 1 deletion src/components/SliderInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@
</template>

<script>
// inspired by https://kilianvalkhof.com/2020/javascript/supercharging-input-type-number/
export default {
name: 'SliderInput',
props: {
Expand All @@ -27,7 +29,32 @@ export default {
// OpenSeadragonComponent
},
methods: {
//
changeFunc (e) {
/* const isMac = navigator.platform === 'MacIntel';
document.querySelector("input").addEventListener("keydown", e => {
if (['ArrowUp','ArrowDown'].includes(e.key)) {
e.preventDefault();
const currentValue = isNaN(parseFloat(e.target.value))
? parseFloat(e.target.getAttribute("min")) || 0
: parseFloat(e.target.value);
const direction = e.key === 'ArrowUp' ? 1 : -1
const modifier = (isMac ? e.metaKey : e.ctrlKey) ? 100 : e.shiftKey ? 10 : e.altKey ? 0.1 : 1;
const decimals = Math.max(
(currentValue.toString().split(".")[1] || "").length,
e.altKey ? 1 : 0
);
const newValue = currentValue + direction * modifier;
e.target.value = newValue.toFixed(decimals);
}
}) */
}
},
computed: {
percent () {
Expand Down
4 changes: 2 additions & 2 deletions src/router/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,13 @@ router.beforeEach((to, from) => {
store.dispatch('loadContent', { path })
console.log('content opened')
// check if queried page is a proper integer
if (to.query.page && parseInt(to.query.page).toFixed(0) === to.query.page) {
/* if (to.query.page && parseInt(to.query.page).toFixed(0) === to.query.page) {
if (path && store.getters.documentPagesForSidebars(path)[parseInt(to.query.page)] !== undefined) {
store.dispatch('setCurrentPage', parseInt(to.query.page) - 1)
} else {
store.dispatch('setAwaitedPage', parseInt(to.query.page))
}
}
} */
}
}
} catch (err) {
Expand Down
2 changes: 1 addition & 1 deletion src/views/HomeView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<AssignSVGsModal/>
HALLO HOMEVIEW

<HomeTab v-if="explorerTab === 'home'"/>
<HomeTab/>
<!--<PagesTab v-else-if="explorerTab === 'pages'"/>
<ZonesTab v-else-if="explorerTab === 'zones'"/>
<AnnotTab v-else-if="explorerTab === 'annot'"/>
Expand Down

0 comments on commit c0a308c

Please sign in to comment.