diff --git a/package.json b/package.json index 0caa83558355a59b76662e17a5a45904d21ef8b8..7777e7f9f750f8ef5c74678e4f84cab6007a4bc8 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@verdi8/blob-analysis-lab-demo", + "name": "blob-analysis-lab-ecole", "version": "1.0.0", "description": "Un projet éphémère d'analyse de photos de blobs", "private": true, @@ -11,6 +11,9 @@ "keywords": [], "author": "Verdi8", "license": "(c) Laurent Knoll", + "contributors": [ + {"name":"Benjamin Bardiaux","url":"https://gitlab.pasteur.fr/bardiaux/"}, + ], "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.2.0", "@fortawesome/free-regular-svg-icons": "^6.2.0", @@ -24,6 +27,7 @@ "jquery": "3.6.0", "paper": "0.12.15", "react": "^18.2.0", + "react-device-detect": "^2.2.2" "react-bootstrap": "^2.5.0", "react-dom": "^18.2.0" }, diff --git a/src/assets/images/here.svg b/src/assets/images/here.svg index 89a04e90471771fdbe05e653521cc61933d7bd0a..59d7705fbcbaffddd214aa53b99c69ea5addc92d 100644 --- a/src/assets/images/here.svg +++ b/src/assets/images/here.svg @@ -17,8 +17,8 @@ </g> </g> <g transform="translate(10 52.27716039866368) rotate(0 34.5 13)"> - <text x="34.5" y="19" font-family="Indie Flower" font-size="20px" text-anchor="middle" fill="black" + <text x="70" y="5" font-family="Indie Flower" font-size="20px" text-anchor="middle" fill="black" style="white-space: pre;" direction="ltr">départ </text> </g> -</svg> \ No newline at end of file +</svg> diff --git a/src/instruments/instrument.ts b/src/instruments/instrument.ts index ee05178ac921160843fcbf718e7f784357b1d27c..07f5e74fdb214c05e4bc5082f5a3942150a48312 100644 --- a/src/instruments/instrument.ts +++ b/src/instruments/instrument.ts @@ -2,6 +2,7 @@ import * as paper from "paper"; import {Lab} from "../lab"; import {Coords} from "../data/coords/coords"; import {PaperUtils} from "../utils/paperUtils"; +import {isMobile} from "react-device-detect"; /** * Un instrument d'analyse @@ -97,6 +98,10 @@ export abstract class AbstractInstrument<C extends Coords> implements Instrument // Le dessin de l'instrument this.drawIn(this.coords, this.drawGroup); this.drawGroup.strokeWidth = 1; + // Make strike larger on mobile devices + if (isMobile) { + this.drawGroup.strokeWidth = 2; + } this.drawGroup.strokeScaling = false; this.drawGroup.strokeColor = this.outlineColor(this.active); this.drawGroup.fillColor = this.fillColor(this.active, this.coords); @@ -106,7 +111,12 @@ export abstract class AbstractInstrument<C extends Coords> implements Instrument for (let handle of this.handles) { let location = this.locateHandle(this.coords, handle); if (location != null) { - let path = new paper.Path.RegularPolygon(location, 4, PaperUtils.absoluteDimension(5)); + let path = new paper.Path.RegularPolygon(location, 4, PaperUtils.absoluteDimension(5)); + // make handles circle and larger for mobil devices + if (isMobile) { + path = new paper.Path.Circle(location, PaperUtils.absoluteDimension(18)); + path.opacity = 0.6; + } path.strokeColor = new paper.Color("black"); path.fillColor = new paper.Color("white"); if (handle.moveable) { diff --git a/src/instruments/ruler.ts b/src/instruments/ruler.ts index 814fb598b8aa821c83b0f5b4ff8add63240278ba..26e0c585972f3c59cf920fd5ece186da2dde31a1 100644 --- a/src/instruments/ruler.ts +++ b/src/instruments/ruler.ts @@ -20,13 +20,19 @@ export class Ruler extends AbstractInstrument<VectorCoords> implements Instrumen group.addChild(new paper.Path.Line(coords.start, coords.end)); let tickCount = this.lab.data.rulerTickCount; let vector = this.coords.asPointVector(); - for (let i = 0; i < tickCount; i++) { - let tickCircle = new paper.Path.Circle(this.coords.start.add(vector.multiply(i / tickCount)), PaperUtils.absoluteDimension(1)); + for (let i = 0; i <= tickCount; i++) { + let tickCircle = new paper.Path.Circle(this.coords.start.add(vector.multiply(i / tickCount)), PaperUtils.absoluteDimension(3)); group.addChild(tickCircle); } } + // change color of ruler when inactive + protected override fillColor(active: boolean, coords: VectorCoords): paper.Color | null { + let fillColor = active ? new paper.Color("yellow") : new paper.Color("olive"); + return fillColor; + } + locateHandle(coords: VectorCoords, handle: Handle): paper.Point { if(handle.name == "startHandle") { return coords.start; diff --git a/src/ui/steps/rulerStep.tsx b/src/ui/steps/rulerStep.tsx index 05fe8c196bdbb826cc250f02c820a493c409fd79..da40bd47d36c3e54d3b1bf01b6288ae6adf5cd74 100644 --- a/src/ui/steps/rulerStep.tsx +++ b/src/ui/steps/rulerStep.tsx @@ -2,6 +2,7 @@ import {Step, StepProps, StepState} from "./step"; import * as React from "react"; import {Alert, Button, Form, FormText, InputGroup} from "react-bootstrap"; import {DEBUG_MODE, DEFAULT_RULER_TICK_COUNT, MAX_RULER_TICK_COUNT, MIN_RULER_TICK_COUNT} from "../../lab"; +import {isMobile} from "react-device-detect"; interface RulerStepState extends StepState {