reorganize
This commit is contained in:
parent
52b5dda707
commit
d597aa9ae0
1 changed files with 43 additions and 30 deletions
|
@ -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[] {
|
||||
|
|
Loading…
Reference in a new issue