Skip to content

Commit

Permalink
various fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@kepper
kepper committed Sep 20, 2023
1 parent 06168a6 commit e192950
Show file tree
Hide file tree
Showing 6 changed files with 216 additions and 62 deletions.
133 changes: 94 additions & 39 deletions src/components/FacsimileComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<script>
import OpenSeadragon from 'openseadragon'
// import { rotatePoint } from '@/tools/trigonometry.js'
import { getMediaFragmentBBoxRect, getMediaFragmentRect, getMediaFragmentInnerBoxRect } from '@/tools/facsimileHelpers.js'
import { /* getMediaFragmentBBoxRect, getMediaFragmentRect, */ /* getMediaFragmentInnerBoxRect, */ getOsdRects } from '@/tools/facsimileHelpers.js'
const osdOptions = {
id: 'facsimileContainer',
Expand Down Expand Up @@ -123,7 +123,7 @@ export default {
click.page = clickedPagePos
// }
console.log(click)
// console.log(click)
// check for click to svg shape
if (click.target.localName === 'path') {
Expand Down Expand Up @@ -198,7 +198,8 @@ export default {
// this.$store.dispatch('resetPageBorderPoints')
const ts = this.tileSource
ts.degrees = 0
// ts.degrees = 0
this.viewer.open(ts)
},
Expand Down Expand Up @@ -509,23 +510,35 @@ export default {
* rotate the page facsimile
*/
setPageRotation () {
/* const tiledImage = this.viewer.world.getItemAt(0)
const rotation = parseFloat(this.$store.getters.currentPageRotation)
const tiledImage = this.viewer.world.getItemAt(0)
const tileSource = this.$store.getters.osdTileSourceForCurrentPage
if (!tiledImage || !rotation) {
if (!tiledImage || !tileSource) {
return null
}
tiledImage.setRotation(rotation) */
const rotation = parseFloat(this.$store.getters.currentPageRotation)
const newPos = new OpenSeadragon.Point(tileSource.x, tileSource.y)
tiledImage.setRotation(tileSource.degrees)
tiledImage.setPosition(newPos)
console.log('setPos to ', newPos)
/* const rotation = parseFloat(this.$store.getters.currentPageRotation)
if (!rotation) {
return null
}
const page = getMediaFragmentInnerBoxRect(OpenSeadragon, this.$store.getters)
const pageDimensions = this.$store.getters.currentPageDimensions
this.viewer.viewport.setRotationWithPivot(rotation, page.location.getCenter())
if (!pageDimensions) {
return null
}
console.log('pageDim', pageDimensions)
const center = new OpenSeadragon.Point(parseFloat(pageDimensions.mmWidth) / 2, parseFloat(pageDimensions.mmHeight) / 2)
const page = getMediaFragmentInnerBoxRect(OpenSeadragon, this.$store.getters)
console.log('page', page) */
// this.viewer.viewport.setRotationWithPivot(rotation, page.location.getCenter())
},
renderPageBorders () {
Expand All @@ -547,69 +560,92 @@ export default {
return null
}
const outerPos = getMediaFragmentBBoxRect(OpenSeadragon, this.$store.getters)
const centerPos = getMediaFragmentRect(OpenSeadragon, this.$store.getters)
const innerPos = getMediaFragmentInnerBoxRect(OpenSeadragon, this.$store.getters)
const pageIndex = this.$store.getters.currentPageZeroBased
const path = this.$store.getters.filepath
const pages = this.$store.getters.documentPagesForSidebars(path)
const page = pages[pageIndex]
if (!outerPos || !centerPos || !innerPos) {
if (!page) {
return null
}
const rects = getOsdRects(page)
if (!rects) {
// console.log('rectangles unavailable', outerPos, centerPos, innerPos)
return null
}
console.log('relevant rects: ', rects)
const invertedRot = rects.rotation * -1
// the bounding box of the media fragment, which could be loaded by IIIF
const existingBBoxOverlay = document.querySelector('.overlay.pageBorder.bbox')
// the media fragment as stored in the data
const existingImage = document.querySelector('.overlay.imageBorder')
const imageLocation = new OpenSeadragon.Rect(rects.image.x, rects.image.y, rects.image.w, rects.image.h)
if (!existingBBoxOverlay) {
if (!existingImage) {
const element = document.createElement('div')
element.classList.add('overlay')
element.classList.add('pageBorder')
element.classList.add('bbox')
element.classList.add('imageBorder')
const innerRot = document.createElement('div')
innerRot.classList.add('rotatedBox')
innerRot.classList.add('overlay')
innerRot.style.transform = 'rotate(' + invertedRot + 'deg)'
element.append(innerRot)
this.viewer.addOverlay({
element,
location: outerPos.location,
placement: outerPos.placement,
rotationMode: outerPos.rotationMode
location: imageLocation // ,
// rotationMode: centerPos.rotationMode
})
} else {
this.viewer.updateOverlay(existingBBoxOverlay, outerPos.location)
this.viewer.updateOverlay(existingImage, imageLocation)
existingImage.querySelector('.rotatedBox').style.transform = 'rotate(' + invertedRot + 'deg)'
}
// the actual rectangle stored in the data
const existingOverlay = document.querySelector('.overlay.pageBorder.mediaFragment')
// the media fragment as stored in the data
const existingMediaFrag = document.querySelector('.overlay.pageBorder.mediaFragment')
const mediaFragLocation = new OpenSeadragon.Rect(rects.mediaFrag.x, rects.mediaFrag.y, rects.mediaFrag.w, rects.mediaFrag.h)
if (!existingOverlay) {
if (!existingMediaFrag) {
const element = document.createElement('div')
element.classList.add('overlay')
element.classList.add('pageBorder')
element.classList.add('mediaFragment')
element.title = 'Generated IIIF Selection'
const innerRot = document.createElement('div')
innerRot.classList.add('rotatedBox')
innerRot.classList.add('overlay')
innerRot.style.transform = 'rotate(' + invertedRot + 'deg)'
element.append(innerRot)
this.viewer.addOverlay({
element,
location: centerPos.location,
rotationMode: centerPos.rotationMode
location: mediaFragLocation // ,
// rotationMode: centerPos.rotationMode
})
} else {
this.viewer.updateOverlay(existingOverlay, centerPos.location)
this.viewer.updateOverlay(existingMediaFrag, mediaFragLocation)
existingMediaFrag.querySelector('.rotatedBox').style.transform = 'rotate(' + invertedRot + 'deg)'
}
// get innermost rectangle
const existingInnerOverlay = document.querySelector('.overlay.pageBorder.actualPage')
const existingPageOverlay = document.querySelector('.overlay.pageBorder.actualPage')
const pageLocation = new OpenSeadragon.Rect(rects.page.x, rects.page.y, rects.page.w, rects.page.h)
if (!existingInnerOverlay) {
if (!existingPageOverlay) {
const element = document.createElement('div')
element.classList.add('overlay')
element.classList.add('pageBorder')
element.classList.add('actualPage')
this.viewer.addOverlay({
element,
location: innerPos.location,
rotationMode: innerPos.rotationMode
location: pageLocation //,
// rotationMode: innerPos.rotationMode
})
} else {
this.viewer.updateOverlay(existingInnerOverlay, innerPos.location)
this.viewer.updateOverlay(existingPageOverlay, pageLocation)
}
//
Expand Down Expand Up @@ -989,16 +1025,35 @@ export default {
position: relative;
}
.overlay.pageBorder.bbox {
outline: 1px solid #ff00ff;
.overlay.imageBorder {
// outline: 1px solid #ff00ff;
.rotatedBox.overlay {
transform-origin: top left;
position: relative;
outline: 1px solid #ff00ff;
// background-color: #ff00ff22;
width: 100%;
height: 100%;
}
}
.overlay.pageBorder.mediaFragment {
outline: 1px solid #00ffff;
// outline: 1px solid #00ffff;
.rotatedBox.overlay {
transform-origin: top left;
position: relative;
outline: 1px solid #00ffff;
// background-color: #00ffff22;
width: 100%;
height: 100%;
}
}
.overlay.pageBorder.actualPage {
outline: 8px solid #0000ff99;
outline: 5px solid #0000ff99;
// background-color: #0000ff22;
}
.grid {
Expand Down
4 changes: 2 additions & 2 deletions src/components/HomeTab.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
Kombination mit einer annotierten Transkription eine diplomatische zu erstellen.
</p>
<div class="externalMessages"><SourceSelector :table="true" /></div>
<h2>Info</h2>
<!--<h2>Info</h2>
<table class="table">
<tr><td>Repository</td><td>{{ infoRepo }}</td></tr>
<tr><td>Branch</td><td>{{ infoBranch }}</td></tr>
Expand All @@ -19,7 +19,7 @@
<template v-else>
<tr><td>GitHub API Rate Limit Reached.</td><td></td></tr>
</template>
</table>
</table>-->
</div>
<!--
<div class="internalMessages">
Expand Down
4 changes: 2 additions & 2 deletions src/components/shared/VerovioComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,8 @@ export default {
}
&.transcribing svg {
max-width: 100%;
max-height: 100%;
max-width: 150%;
max-height: 150%;
}
}
Expand Down
32 changes: 21 additions & 11 deletions src/store/data/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
// import { dom2base64, str2base64 } from '@/tools/github'
import { uuid } from '@/tools/uuid.js'
// import OpenSeadragon from 'openseadragon'
import { rotatePoint, getOuterBoundingRect } from '@/tools/trigonometry.js'
// import { rotatePoint, getOuterBoundingRect } from '@/tools/trigonometry.js'
import { getOsdRects } from '@/tools/facsimileHelpers.js'
import { /* convertRectUnits, */ sortRastrumsByVerticalPosition } from '@/tools/mei.js'
// import { getRectFromFragment } from '@/tools/trigonometry.js'
// import { Base64 } from 'js-base64'
Expand Down Expand Up @@ -568,7 +569,7 @@ const dataModule = {
* @param {[type]} rotation [description]
*/
setPageRotation ({ commit, getters, dispatch }, rotation) {
if (!rotation) {
if (!rotation && rotation !== 0) {
return null
}
const modifiedDom = getters.documentWithCurrentPage.cloneNode(true)
Expand Down Expand Up @@ -687,7 +688,7 @@ const dataModule = {
* @param {[type]} x [description]
*/
setPageFragX ({ commit, getters, dispatch }, x) {
if (!x) {
if (!x && x !== 0) {
return null
}
const modifiedDom = getters.documentWithCurrentPage.cloneNode(true)
Expand Down Expand Up @@ -740,7 +741,7 @@ const dataModule = {
* @param {[type]} y [description]
*/
setPageFragY ({ commit, getters, dispatch }, y) {
if (!y) {
if (!y && y !== 0) {
return null
}
const modifiedDom = getters.documentWithCurrentPage.cloneNode(true)
Expand Down Expand Up @@ -794,7 +795,7 @@ const dataModule = {
* @param {[type]} w [description]
*/
setPageFragW ({ commit, getters, dispatch }, w) {
if (!w) {
if (!w && w !== 0) {
return null
}
const modifiedDom = getters.documentWithCurrentPage.cloneNode(true)
Expand Down Expand Up @@ -847,7 +848,7 @@ const dataModule = {
* @param {[type]} h [description]
*/
setPageFragH ({ commit, getters, dispatch }, h) {
if (!h) {
if (!h && h !== 0) {
return null
}
const modifiedDom = getters.documentWithCurrentPage.cloneNode(true)
Expand Down Expand Up @@ -1869,7 +1870,7 @@ const dataModule = {
return null
}

const fragmentRaw = page.uri.split('#xywh=')[1]
/* const fragmentRaw = page.uri.split('#xywh=')[1]
const fragment = {
x: 0,
y: 0,
Expand Down Expand Up @@ -1920,12 +1921,21 @@ const dataModule = {
const imageOriginY = fragment.y * xScale * -1
const imageOriginW = xScale * page.width
// console.log('imageOriginW', imageOriginW)
*/

const rects = getOsdRects(page)

if (!rects) {
return null
}

const tileSource = {
tileSource: page.uri,
x: imageOriginX,
y: imageOriginY,
width: imageOriginW,
degrees: deg
x: rects.image.x,
y: rects.image.y,
width: rects.image.w,
degrees: rects.rotation * -1
}

// console.log('tileSource ', tileSource)
Expand Down
Loading

0 comments on commit e192950

Please sign in to comment.