reorganize

This commit is contained in:
Tomáš Mládek 2021-01-09 18:33:38 +01:00
parent 52b5dda707
commit d597aa9ae0

View file

@ -4,7 +4,7 @@
</template>
<script lang="ts">
import {defineComponent, onMounted, ref} from "vue";
import {defineComponent, onMounted, reactive, ref} from "vue";
import createPanZoom, {PanZoom} from "panzoom";
export default defineComponent({
@ -16,62 +16,75 @@ export default defineComponent({
},
},
setup(props) {
const domparser = new DOMParser();
const root = ref(null);
const panzoom = ref<null | PanZoom>(null);
const bbox = reactive({
x: 0,
y: 0,
width: undefined,
height: undefined
});
const anchors = ref<SVGRectElement[]>([]);
const panToAnchor = ref();
onMounted(async () => {
const element = root.value as unknown as HTMLDivElement;
const panzoom = createPanZoom(element, {
// Fetch & load SVG
const fetchResult = await fetch(props.url);
const svgParsed = new DOMParser().parseFromString(await fetchResult.text(), "image/svg+xml") as Document;
const svg = element.appendChild(svgParsed.firstElementChild as Element) as any;
const pz = createPanZoom(element, {
smoothScroll: false,
zoomSpeed: 0.05
});
panzoom.value = pz;
panzoom.on("transform", function (panzoom: PanZoom) {
function updateBBox(panzoom: PanZoom) {
const transform = panzoom.getTransform();
// console.log(transform);
});
}
panzoom.on("panend", function (panzoom: PanZoom) {
console.log("panend");
});
updateBBox(pz);
pz.on("transform", updateBBox);
const fetchResult = await fetch(props.url);
const svgParsed = domparser.parseFromString(await fetchResult.text(), "image/svg+xml") as Document;
const svg = element.appendChild(svgParsed.firstElementChild as Element) as any;
const anchors = processAnchors(svg);
const anchor = anchors[0];
window.addEventListener("keydown", (ev) => {
if (ev.key !== " ") {
return;
}
const transform = panzoom.getTransform();
console.log(transform);
anchors.value = processAnchors(svg);
panToAnchor.value = (anchor: SVGRectElement) => {
const transform = pz.getTransform();
const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width;
const targetScale = 2;
const targetScale = 1; // todo
const svgTargetX = anchor.x.baseVal.value + anchor.width.baseVal.value / 2;
const svgTargetY = anchor.y.baseVal.value + anchor.height.baseVal.value / 2;
console.log(svgTargetX * currentRatio + transform.x);
panzoom.smoothMoveTo(
pz.smoothMoveTo(
svgTargetX * currentRatio * -1 + window.innerWidth / 2,
svgTargetY * currentRatio * -1 + window.innerHeight / 2,
);
setTimeout(() => {
panzoom.smoothZoomAbs(window.innerWidth / 2, window.innerHeight / 2, 1);
}, 1000);
setTimeout(() => {
pz.smoothZoomAbs(window.innerWidth / 2, window.innerHeight / 2, targetScale);
}, 400 * 2);
};
// DEBUG
window.addEventListener("keydown", (ev) => {
if (ev.key !== " ") {
return;
}
panToAnchor.value(anchors.value[0]);
});
});
return {
root
root,
panzoom,
anchors,
panToAnchor
};
}
},
});
function processAnchors(document: XMLDocument): SVGRectElement[] {