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> </template>
<script lang="ts"> <script lang="ts">
import {defineComponent, onMounted, ref} from "vue"; import {defineComponent, onMounted, reactive, ref} from "vue";
import createPanZoom, {PanZoom} from "panzoom"; import createPanZoom, {PanZoom} from "panzoom";
export default defineComponent({ export default defineComponent({
@ -16,62 +16,75 @@ export default defineComponent({
}, },
}, },
setup(props) { setup(props) {
const domparser = new DOMParser();
const root = ref(null); 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 () => { onMounted(async () => {
const element = root.value as unknown as HTMLDivElement; 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, smoothScroll: false,
zoomSpeed: 0.05 zoomSpeed: 0.05
}); });
panzoom.value = pz;
panzoom.on("transform", function (panzoom: PanZoom) { function updateBBox(panzoom: PanZoom) {
const transform = panzoom.getTransform(); const transform = panzoom.getTransform();
// console.log(transform); // console.log(transform);
});
panzoom.on("panend", function (panzoom: PanZoom) {
console.log("panend");
});
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(); updateBBox(pz);
console.log(transform); pz.on("transform", updateBBox);
anchors.value = processAnchors(svg);
panToAnchor.value = (anchor: SVGRectElement) => {
const transform = pz.getTransform();
const currentRatio = svg.clientWidth * transform.scale / svg.viewBox.baseVal.width; 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 svgTargetX = anchor.x.baseVal.value + anchor.width.baseVal.value / 2;
const svgTargetY = anchor.y.baseVal.value + anchor.height.baseVal.value / 2; const svgTargetY = anchor.y.baseVal.value + anchor.height.baseVal.value / 2;
console.log(svgTargetX * currentRatio + transform.x); pz.smoothMoveTo(
panzoom.smoothMoveTo(
svgTargetX * currentRatio * -1 + window.innerWidth / 2, svgTargetX * currentRatio * -1 + window.innerWidth / 2,
svgTargetY * currentRatio * -1 + window.innerHeight / 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 { return {
root root,
panzoom,
anchors,
panToAnchor
}; };
} },
}); });
function processAnchors(document: XMLDocument): SVGRectElement[] { function processAnchors(document: XMLDocument): SVGRectElement[] {