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 };