thm/line-and-surface
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Wiki Activity

pan to #start element on load; reduce css classes

Browse source
This commit is contained in:
Tomáš Mládek 2021-01-10 22:14:56 +01:00
parent d368d81f17
commit 48e813471f
1 changed files with 45 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
app/src/components/SVGContent.vue
View file

@ -70,6 +70,39 @@ export default defineComponent({
});
panzoom.value = pz;
function panToElement(element: SVGRectElement, smooth: boolean) {
const transform = pz.getTransform();
const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
const ratio = svg.clientWidth / svg.viewBox.baseVal.width;
const targetScale = window.innerWidth / (element.width.baseVal.value * ratio);
const svgTargetX = element.x.baseVal.value + element.width.baseVal.value / 2;
const svgTargetY = element.y.baseVal.value + element.height.baseVal.value / 2;
if (smooth) {
pz.smoothMoveTo(
svgTargetX * currentRatio * -1 + window.innerWidth / 2,
svgTargetY * currentRatio * -1 + window.innerHeight / 2,
);
setTimeout(() => {
pz.smoothZoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale);
}, 400 * 2);
} else {
pz.moveTo(
svgTargetX * currentRatio * -1 + window.innerWidth / 2,
svgTargetY * currentRatio * -1 + window.innerHeight / 2,
);
pz.zoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale);
}
}
// Pan to start element
const start = processStart(svg);
if (start) {
panToElement(start, false);
}
pz.on("transform", function (_) {
const transform = pz.getTransform();
const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
@ -123,22 +156,7 @@ export default defineComponent({
// Anchors
anchors.value = processAnchors(svg);
panToAnchor.value = (anchor: SVGRectElement) => {
const transform = pz.getTransform();
const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
const ratio = svg.clientWidth / svg.viewBox.baseVal.width;
const targetScale = window.innerWidth / (anchor.width.baseVal.value * ratio);
const svgTargetX = anchor.x.baseVal.value + anchor.width.baseVal.value / 2;
const svgTargetY = anchor.y.baseVal.value + anchor.height.baseVal.value / 2;
pz.smoothMoveTo(
svgTargetX * currentRatio * -1 + window.innerWidth / 2,
svgTargetY * currentRatio * -1 + window.innerHeight / 2,
);
setTimeout(() => {
pz.smoothZoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale);
}, 400 * 2);
panToElement(anchor, true);
};
// DEBUG
@ -176,7 +194,7 @@ function processAnchors(document: XMLDocument): SVGRectElement[] {
if (anchor === null) {
break;
}
anchor.classList.add("svgcontent_anchor");
anchor.classList.add("hidden");
result.push(anchor);
i++;
}
@ -219,7 +237,7 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
return Array.from(svg.getElementsByTagName("circle"))
.filter((el) => Array.from(el.children).some((el) => el.tagName == "desc"))
.map((el) => {
el.classList.add("svgcontent_audio");
el.classList.add("hidden");
const descNode = el.children[0]; // to fix
const audioSrc = descNode.textContent!.trim();
@ -233,11 +251,19 @@ function processAudio(svg: XMLDocument): AudioAreaDef[] {
});
}
function processStart(svg: XMLDocument): SVGRectElement | null {
const start = svg.getElementById("start");
if (start){
start.classList.add("hidden")
}
return start as (SVGRectElement | null);
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.svgcontent_anchor, .svgcontent_audio {
.hidden {
visibility: hidden;
}
</style>