diff --git a/src/CourseOptions.js b/src/CourseOptions.js index 82e95a3..4c32c30 100644 --- a/src/CourseOptions.js +++ b/src/CourseOptions.js @@ -87,12 +87,19 @@ export default function CourseOptions({ index={1} onChange={(extent) => setPrintArea({ extent })} /> +
+ Size on paper +
Height: {((extent[3]-extent[1])*(mapScale/printScale)).toFixed(2)} mm ({(printArea.pageHeight/3.937).toFixed()} mm)
+
Width: {((extent[2]-extent[0])*(mapScale/printScale)).toFixed(2)} mm ({(printArea.pageWidth/3.937).toFixed()} mm)
+ ); } + + function ExtentInput({ extent, index, onChange }) { return ( { - const locations = mapExtentToDescriptionLocations( - extent, - map.getView().getProjection(), - (selectedCourse?.controls.length || 0) + 2 - ); - addSpecialObject( - { - kind: "descriptions", - locations, - isAllCourses: false, - }, - selectedCourse.id - ); - const objects = useEvent.getState().specialObjects; - setSelectedObjectId(objects[objects.length - 1].id); - setMode("edit"); + if (extent) { + const locations = mapExtentToDescriptionLocations( + extent, + map.getView().getProjection(), + (selectedCourse?.controls.length || 0) + 2 + ); + addSpecialObject( + { + kind: "descriptions", + locations, + isAllCourses: false, + }, + selectedCourse.id + ); + const objects = useEvent.getState().specialObjects; + setSelectedObjectId(objects[objects.length - 1].id); + setMode("edit"); + } }); map.addInteraction(interaction); diff --git a/src/tools/PrintArea.js b/src/tools/PrintArea.js index 94a33ae..418853a 100644 --- a/src/tools/PrintArea.js +++ b/src/tools/PrintArea.js @@ -10,6 +10,12 @@ import useEvent, { useMap } from "../store"; import shallow from "zustand/shallow"; import ExtentInteraction from "../ol/ExtentInteraction"; import { getPrintAreaExtent } from "../models/course"; +import { printCourse } from "../services/print"; + +import Feature from 'ol/Feature.js'; +import {Vector as VectorLayer} from 'ol/layer.js'; +import {Vector as VectorSource} from 'ol/source.js'; +import {fromExtent} from 'ol/geom/Polygon.js'; export default function PrintArea() { const { map, mapFile } = useMap(getMap); @@ -17,29 +23,78 @@ export default function PrintArea() { const crs = useMemo(() => mapFile?.getCrs(), [mapFile]); + useEffect(() => { if (map && course) { const initialExtent = transformExtent( getPrintAreaExtent(course, crs.scale), (c) => toProjectedCoord(crs, c) ); + + const PrintAreaExtentI = getPrintAreaExtent(course) + const check_height = (course.printArea.pageHeight/3.937)-((PrintAreaExtentI[3]-PrintAreaExtentI[1])*(15000/course.printScale)) + const check_width = (course.printArea.pageWidth/3.937)-((PrintAreaExtentI[2]-PrintAreaExtentI[0])*(15000/course.printScale)) + + + let boxStyle; + + if (check_height < 0 || check_width < 0) { + boxStyle = new Style({ + stroke: new Stroke({ color: "#FF0000", lineDash: [6, 10], width: 3 }), + fill: null, + }); + } else { + boxStyle = new Style({ + stroke: new Stroke({ color: "#444", lineDash: [6, 10], width: 3 }), + fill: null, + }); + } + const interaction = new ExtentInteraction({ extent: initialExtent, boxStyle, pointerStyle: new Style(), }); + + const rectCoords = [] + + + //Papersize on map. 15000 mapscale?? + rectCoords[0] = initialExtent[0] + rectCoords[1] = initialExtent[1] + rectCoords[2] = initialExtent[0]+((course.printArea.pageWidth)*(course.printScale/15000)*(96*(1/25.4))) + rectCoords[3] = initialExtent[1]+((course.printArea.pageHeight)*(course.printScale/15000)*(96*(1/25.4))) + + + const printLayer = new VectorLayer({ + source: new VectorSource({ + features: [ + new Feature( + fromExtent(rectCoords), + ), + ], + }), + }); + + + interaction.on("extentchangeend", ({ extent }) => { + if (extent) { setPrintAreaExtent( course.id, transformExtent(extent, (c) => fromProjectedCoord(crs, c)) ); + + } }); map.addInteraction(interaction); + map.addLayer(printLayer); return () => { map.removeInteraction(interaction); + map.removeLayer(printLayer); }; } }, [crs, mapFile, map, course, setPrintAreaExtent]); @@ -47,10 +102,7 @@ export default function PrintArea() { return null; } -const boxStyle = new Style({ - stroke: new Stroke({ color: "#444", lineDash: [6, 10], width: 3 }), - fill: null, -}); + function getMap({ map, mapFile }) { return { map, mapFile };