reorganize
This commit is contained in:
parent
52b5dda707
commit
d597aa9ae0
1 changed files with 43 additions and 30 deletions
|
@ -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) {
|
updateBBox(pz);
|
||||||
console.log("panend");
|
pz.on("transform", updateBBox);
|
||||||
});
|
|
||||||
|
|
||||||
const fetchResult = await fetch(props.url);
|
anchors.value = processAnchors(svg);
|
||||||
const svgParsed = domparser.parseFromString(await fetchResult.text(), "image/svg+xml") as Document;
|
panToAnchor.value = (anchor: SVGRectElement) => {
|
||||||
const svg = element.appendChild(svgParsed.firstElementChild as Element) as any;
|
const transform = pz.getTransform();
|
||||||
|
|
||||||
const anchors = processAnchors(svg);
|
|
||||||
const anchor = anchors[0];
|
|
||||||
window.addEventListener("keydown", (ev) => {
|
|
||||||
if (ev.key !== " ") {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const transform = panzoom.getTransform();
|
|
||||||
console.log(transform);
|
|
||||||
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[] {
|
||||||
|
|
Loading…
Reference in a new issue