{message}
;\r\n}\r\n\r\nfunction getInputMimeTypes(args) {\r\n if (args && args.allowedMimeTypes && args.allowedMimeTypes.length > 0)\r\n return args.allowedMimeTypes.join();\r\n else\r\n return '*.*';\r\n}\r\n\r\nfunction hasValidExtension(file, activityArgs) {\r\n if (file && file.name) {\r\n if (!activityArgs || !activityArgs.allowedExtensions) {\r\n return true;\r\n }\r\n else {\r\n const ext = (\".\" + getExtension(file.name)).toLowerCase();\r\n return !!(activityArgs.allowedExtensions.find(e => e === ext));\r\n }\r\n }\r\n\r\n return false;\r\n}\r\n\r\nfunction getExtension(fileName) {\r\n return fileName.split('.').pop();\r\n}\r\n\r\nfunction limitFileNameChars(input) {\r\n const max = 40;\r\n if (input.length <= max)\r\n return input;\r\n\r\n const ext = getExtension(input);\r\n return input.slice(0, max - 3 - ext.length) + \".. .\" + ext;\r\n}\r\n\r\n\r\nexport function UploadFileActivityUI(props) {\r\n const t = useTranslate('Upload');\r\n const common = useTranslate('Common');\r\n const theme = useContext(ThemeContext);\r\n const [state, setState] = useState(State.ready);\r\n const [ignoreFile, setIgnoreFile] = useState(false);\r\n const [uploadResult, setUploadResult] = useState(undefined);\r\n const [uploadProgress, setUploadProgress] = useState(0);\r\n\r\n const { acceptedFiles, fileRejections, isDragActive, getRootProps, getInputProps } = useDropzone(\r\n {\r\n accept: getInputMimeTypes(props.activityArgs),\r\n multiple: false,\r\n preventDropOnDocument: false,\r\n maxSize: MAXSIZE_BYTE,\r\n onDrop: _ => {\r\n setIgnoreFile(false);\r\n setUploadResult(undefined);\r\n },\r\n disabled: state === State.sending\r\n });\r\n \r\n const style = useMemo(() => {\r\n const baseStyle = { borderColor: theme.baseColor };\r\n const activeStyle = { borderColor: 'white', backgroundColor: theme.baseColor };\r\n return isDragActive ? activeStyle : baseStyle;\r\n }, [isDragActive, theme]);\r\n \r\n\r\n let file;\r\n // Check extension after Input's built-in check to deal with deltas between Extensions and MimeTypes\r\n // (MimeTypes are more permissive, but needed for Safari)\r\n if (acceptedFiles && hasValidExtension(acceptedFiles[0], props.activityArgs))\r\n file = acceptedFiles[0];\r\n\r\n const hasFile = !!file && !ignoreFile;\r\n\r\n useEffect(() => {\r\n if (state === State.sending) {\r\n let cancelled = false;\r\n\r\n const task = props.sendFileAsync(file, setUploadProgress);\r\n\r\n task.promise.then(e => {\r\n console.log(\"upload ended succesfully\");\r\n console.log(e);\r\n\r\n setIgnoreFile(true);\r\n setUploadResult({ success: true });\r\n setState(State.ready);\r\n }).catch(e => {\r\n if (cancelled)\r\n console.log(\"upload canceled\");\r\n else {\r\n setUploadResult({\r\n success: false,\r\n message: e.target.response\r\n });\r\n setState(State.error);\r\n }\r\n });\r\n\r\n return () => {\r\n cancelled = true;\r\n task.cancel();\r\n }\r\n }\r\n else {\r\n return undefined;\r\n }\r\n }, [state, file, props.sendFileAsync, setUploadProgress, setIgnoreFile, setUploadResult, setState]);\r\n\r\n function sendFile(event) {\r\n event.preventDefault();\r\n\r\n if (!hasFile)\r\n return;\r\n \r\n setUploadProgress(0);\r\n setState(State.sending);\r\n }\r\n \r\n function onDelete(event) {\r\n setIgnoreFile(true);\r\n event.stopPropagation();\r\n }\r\n\r\n return (<>\r\n \r\n );\r\n}","import React from 'react';\r\nimport { getCSRFToken } from '../../../utils/CSRFHelper';\r\nimport { fetchWithProgress } from '../../../utils/Fetch';\r\nimport { UploadFileActivityUI } from './UploadFileActivityUI';\r\n\r\n\r\nexport function UploadFileActivity(props) {\r\n\r\n function sendFileAsync(file, onUploadProgress) {\r\n const formData = new FormData();\r\n formData.append('file', file);\r\n\r\n return fetchWithProgress('api/files', {\r\n method: 'POST',\r\n body: formData,\r\n headers: {\r\n SessionId: props.sessionId,\r\n UserId: props.userId,\r\n RequestVerificationToken: getCSRFToken()\r\n },\r\n onProgress: e => {\r\n onUploadProgress(Math.round(100 * e.loaded / e.total));\r\n }\r\n });\r\n }\r\n\r\n return\r\n changePage(currentPageIndex - 1)}>\r\n = pageCount - 1) ? true : false}\r\n style={{ backgroundColor: theme.darkColor }}\r\n onClick={() => changePage(currentPageIndex + 1)}>\r\n
);\r\n }\r\n return <>;\r\n}","import React, { useContext } from 'react';\r\nimport { ThemeContext, defaultTheme } from '../../../Theme';\r\nimport './Tools.css';\r\n\r\nexport function PencilIcon(props) {\r\n\r\n const { isSelected, color } = props;\r\n const theme = useContext(ThemeContext) || defaultTheme;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n
);\r\n}\r\n\r\nexport function EraserIcon(props) {\r\n\r\n const { isSelected } = props;\r\n const theme = useContext(ThemeContext) || defaultTheme;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n
);\r\n}\r\n\r\nexport function PaletteIcon(props) {\r\n\r\n return (\r\n \r\n \r\n
);\r\n}\r\n\r\nexport function HandIcon(props) {\r\n\r\n return (\r\n \r\n \r\n
);}\r\n\r\nexport function StylusIcon(props) {\r\n return (\r\n \r\n \r\n
);\r\n}","//utils for ToolBar and ToolPalette ans some highers components\r\n\r\nimport React from 'react';\r\nimport './Tools.css';\r\n\r\nexport const colors = {\r\n YELLOW: '#f4d000',\r\n WHITE: '#fcfcfc',\r\n TURQUOISE: '#00c5d5',\r\n ORANGE: '#f45b00',\r\n BLACK: '#000000',\r\n BLUE: '#0055d5',\r\n RED: '#ff0000',\r\n EXCENSE: '#e43b5c',\r\n GREEN: '#008000',\r\n}\r\n\r\nexport const sizes = {\r\n SMALL: 2,\r\n MEDIUM: 4,\r\n LARGE: 10\r\n}\r\n\r\nexport const types = {\r\n HAND: 'hand',\r\n PEN: 'pen',\r\n ERASER: 'eraser',\r\n TEXT: 'text'\r\n}\r\n\r\nexport const defaultTool = {\r\n color: colors.RED,\r\n size: sizes.SMALL,\r\n type: types.PEN\r\n}\r\n\r\nexport function Action(props) {\r\n const { tool, setTool, target, value, disabled } = props;\r\n\r\n function click() {\r\n setTool(previousTool => {\r\n var newTool = { ...previousTool };\r\n newTool[target] = value;\r\n return newTool;\r\n });\r\n }\r\n\r\n const isSelected = tool[target] === value;\r\n\r\n return (\r\n \r\n \r\n {isSelected\r\n ? (
\r\n );\r\n}","import React, { useState, useContext, useEffect } from 'react';\r\nimport { PencilIcon, EraserIcon, PaletteIcon, HandIcon, StylusIcon } from './Icons'\r\nimport { ThemeContext, defaultTheme } from '../../../Theme';\r\nimport { types } from './Tools'\r\nimport './Tools.css';\r\n\r\nexport function ToolFloatingButton(props) {\r\n const [floatingButtonState, setFloatingButtonState] = useState(\"HandNotSelected\");\r\n\r\n switch (floatingButtonState) {\r\n case \"HandNotSelected\":\r\n return (\r\n \r\n
)\r\n : ()\r\n }\r\n \r\n \r\n
\r\n \r\n )\r\n}\r\n\r\n///////////old version///////////////////\r\n\r\nexport function ToolButton({ paletteIsOpen, setPaletteIsOpen, tool, setTool }) {\r\n\r\n const [pencilIsOpen, setPencilIsOpen] = useState(false);\r\n const theme = useContext(ThemeContext) || defaultTheme;\r\n\r\n useEffect(() => {\r\n if (!pencilIsOpen) {\r\n setTool(previousTool => {\r\n var newTool = { ...previousTool };\r\n newTool[\"type\"] = types.HAND;\r\n return newTool;\r\n });\r\n } else {\r\n setTool(previousTool => {\r\n var newTool = { ...previousTool };\r\n newTool[\"type\"] = types.PEN;\r\n return newTool;\r\n });\r\n }\r\n }, [pencilIsOpen]);\r\n\r\n return (\r\n \r\n {\r\n setPencilIsOpen(!pencilIsOpen);\r\n setPaletteIsOpen(false);\r\n }}>\r\n {(tool[\"type\"] === types.ERASER && pencilIsOpen)\r\n ? {\r\n setPaletteIsOpen(true);\r\n }}>\r\n
\r\n )\r\n}","import React, { useState, useContext, useEffect, useRef } from 'react';\r\nimport { TimesIcon } from 'react-line-awesome'\r\nimport { PencilIcon, EraserIcon } from './Icons'\r\nimport { useTranslate } from \"react-translate\";\r\nimport { ThemeContext, defaultTheme } from '../../../Theme';\r\nimport { types, sizes, colors, Action, ActionColor } from './Tools'\r\nimport './Tools.css';\r\n\r\nexport function ToolPalette(props) {\r\n\r\n const t = useTranslate(\"Presenter\");\r\n const theme = useContext(ThemeContext) || defaultTheme;\r\n const [isEraser, setIsEraser] = useState(false);\r\n const ref = useRef();\r\n const { tool, setTool, setPaletteIsOpen, colorsArgs, colorGridCol, colorGridRow } = props;\r\n\r\n const background = theme.darkColor;\r\n\r\n useClickOutside(ref, () => setPaletteIsOpen(false));\r\n\r\n useEffect(() => {\r\n if (tool[\"type\"] === types.ERASER) {\r\n setIsEraser(true);\r\n } else {\r\n setIsEraser(false);\r\n }\r\n }, [tool[\"type\"]]);\r\n\r\n return (\r\n \r\n
\r\n \r\n ) : (<>)}\r\n\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nconst useClickOutside = (ref, onClick) => {\r\n useEffect(() => {\r\n if (!ref?.current) {\r\n return;\r\n }\r\n const handleClickOutside = (e) => {\r\n if (onClick && !ref.current.contains(e.target)) {\r\n onClick(e);\r\n }\r\n };\r\n document.addEventListener('pointerdown', handleClickOutside);\r\n return () => {\r\n document.removeEventListener('pointerdown', handleClickOutside);\r\n };\r\n }, [ref, onClick]);\r\n};\r\n\r\n////////////////OLD VERSION///////////////////\r\nexport function ToolPaletteOld(props) {\r\n\r\n const t = useTranslate(\"Presenter\");\r\n const theme = useContext(ThemeContext) || defaultTheme;\r\n const [isEraser, setIsEraser] = useState(\"\");\r\n const ref = useRef();\r\n const { tool, setTool, setPaletteIsOpen } = props;\r\n const background = theme.darkColor;\r\n\r\n useClickOutside(ref, () => setPaletteIsOpen(false));\r\n\r\n useEffect(() => {\r\n if (tool[\"type\"] === types.ERASER) {\r\n setIsEraser(\"opacity\");\r\n } else {\r\n setIsEraser(\"\");\r\n }\r\n }, [tool[\"type\"]]);\r\n\r\n return (\r\n \r\n {colorsArgs.map(elem => (\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n )\r\n};","import React, { useState, useEffect } from 'react';\r\nimport { ToolFloatingButton } from './ToolFloatingButton';\r\nimport { ToolPalette } from './ToolPalette'\r\nimport './Tools.css';\r\n\r\nexport function ToolMenu(props) {\r\n\r\n const { tool, setTool, surfaceRef, setStylusDetected, paletteColors } = props;\r\n const [paletteIsOpen, setPaletteIsOpen] = useState(false);\r\n // array of elements : {color, row, col}\r\n const [colorsArgs, setColorsArgs] = useState(new Array());\r\n const [colorGridRow, setColorGridRow] = useState(3);\r\n const [colorGridCol, setColorGridCol] = useState(3);\r\n\r\n function constructColorArgs(colorTab) {\r\n var tab = new Array();\r\n var length = colorTab.length;\r\n var index = 0;\r\n var row = 3;\r\n var col = 3;\r\n\r\n if (length > 9) {\r\n col = 4;\r\n }\r\n if (length > 12) {\r\n row = 4;\r\n }\r\n for (var i = 1; i <= row; i++) {\r\n for (var j = 1; j <= col; j++) {\r\n if (index < length) {\r\n tab[index] = { color: colorTab[index], row: i, col: j };\r\n index++;\r\n }\r\n }\r\n }\r\n setColorGridCol(col);\r\n setColorGridRow(row);\r\n setColorsArgs(tab);\r\n }\r\n\r\n useEffect(() => {\r\n if (paletteColors) {\r\n constructColorArgs(paletteColors);\r\n } else {\r\n constructColorArgs([\"#f4d000\", \"#fcfcfc\", \"#00c5d5\", \"#f45b00\", \"#000000\", \"#0055d5\", \"#ff0000\", \"#e43b5c\", \"#008000\"]);\r\n }\r\n }, []);\r\n\r\n function setToolType(newType) {\r\n setTool(previousTool => {\r\n var newTool = { ...previousTool };\r\n newTool[\"type\"] = newType;\r\n return newTool;\r\n });\r\n }\r\n\r\n return (<>\r\n { paletteIsOpen\r\n ? (<>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n}","// Forked from https://github.com/embiem/react-canvas-draw/\r\n\r\n\r\nimport React, { PureComponent } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { LazyBrush } from \"lazy-brush\";\r\n// import { Catenary } from \"catenary-curve\";\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nimport ResizeObserver from \"resize-observer-polyfill\";\r\n\r\nfunction midPointBtw(p1, p2) {\r\n return {\r\n x: p1.x + (p2.x - p1.x) / 2,\r\n y: p1.y + (p2.y - p1.y) / 2\r\n };\r\n}\r\n\r\nconst canvasStyle = {\r\n display: \"block\",\r\n position: \"absolute\"\r\n};\r\n\r\nconst canvasTypes = [\r\n {\r\n name: \"interface\",\r\n zIndex: 15\r\n },\r\n {\r\n name: \"drawing\",\r\n zIndex: 11\r\n },\r\n {\r\n name: \"temp\",\r\n zIndex: 12\r\n }\r\n];\r\n\r\nconst dimensionPropType = PropTypes.oneOfType([\r\n PropTypes.number,\r\n PropTypes.string\r\n]);\r\n\r\nconst sizePropType = PropTypes.shape({\r\n width: dimensionPropType,\r\n height: dimensionPropType\r\n});\r\n\r\nconst penPropType = PropTypes.shape({\r\n size: PropTypes.number,\r\n color: PropTypes.string,\r\n eraser: PropTypes.bool\r\n});\r\n\r\nexport class DrawingSurface extends PureComponent {\r\n static propTypes = {\r\n pen: penPropType,\r\n canvasSize: sizePropType,\r\n scaleFactor: PropTypes.number,\r\n hideInterface: PropTypes.bool,\r\n\r\n penSizeRatio: PropTypes.number,\r\n isStylus: PropTypes.bool,\r\n canDraw: PropTypes.bool,\r\n\r\n annotations: PropTypes.array.isRequired,\r\n addLines: PropTypes.func.isRequired,\r\n removeLines: PropTypes.func.isRequired,\r\n\r\n onChange: PropTypes.func,\r\n loadTimeOffset: PropTypes.number,\r\n lazyRadius: PropTypes.number,\r\n // catenaryColor: PropTypes.string,\r\n backgroundColor: PropTypes.string,\r\n disabled: PropTypes.bool,\r\n saveData: PropTypes.string,\r\n immediateLoading: PropTypes.bool\r\n };\r\n\r\n static defaultProps = {\r\n pen: {\r\n size: 5,\r\n color: '#F00',\r\n eraser: false\r\n },\r\n canvasSize: { width: 400, height: 400 },\r\n scaleFactor: 1,\r\n hideInterface: false,\r\n\r\n penSizeRatio: 1,\r\n isStylus: false,\r\n canDraw: false,\r\n\r\n annotations: [],\r\n addLines: () => { },\r\n removeLines: () => { },\r\n\r\n onChange: null,\r\n loadTimeOffset: 5,\r\n lazyRadius: 1,\r\n // catenaryColor: \"#0a0302\",\r\n backgroundColor: \"transparent\",\r\n disabled: false,\r\n saveData: \"\",\r\n immediateLoading: false,\r\n };\r\n\r\n constructor(props) {\r\n super(props);\r\n\r\n this.canvas = {};\r\n this.ctx = {};\r\n\r\n // this.catenary = new Catenary();\r\n\r\n this.points = [];\r\n this.penID = -1;\r\n\r\n this.mouseHasMoved = true;\r\n this.penChanged = true;\r\n this.isDrawing = false;\r\n this.isPressing = false;\r\n\r\n this.containerRef = React.createRef();\r\n }\r\n\r\n componentDidMount() {\r\n this.lazy = new LazyBrush({\r\n radius: this.props.lazyRadius * window.devicePixelRatio,\r\n enabled: true,\r\n initialPoint: {\r\n x: window.innerWidth / 2,\r\n y: window.innerHeight / 2\r\n }\r\n });\r\n this.chainLength = this.props.lazyRadius * window.devicePixelRatio;\r\n\r\n this.canvasObserver = new ResizeObserver((entries, observer) =>\r\n this.handleCanvasResize(entries, observer)\r\n );\r\n\r\n if (this.containerRef && this.containerRef.current) {\r\n this.canvasObserver.observe(this.containerRef.current);\r\n\r\n this.containerRef.current.onpointerover = (e) => {\r\n if (this.props.isStylus && e.pointerType === \"pen\") {\r\n this.penID = e.pointerID;\r\n }\r\n }\r\n\r\n this.containerRef.current.onpointerdown = (e) => {\r\n console.log(\"down : isPrimary ? \" + e.isPrimary + \" canDraw ? \" + this.props.canDraw +\r\n \" pointerType ? \" + e.pointerType);\r\n if (!e.isPrimary) {\r\n this.isDrawing = false;\r\n this.isPressing = false;\r\n this.saveLine();\r\n }\r\n if (this.isDrawable(e)) {\r\n console.log(\"start draw\");\r\n this.handleDrawStart(e);\r\n }\r\n };\r\n this.containerRef.current.onpointermove = (e) => {\r\n if (this.isDrawable(e)) {\r\n if (this.isPressing) {\r\n this.handleDrawMove(e);\r\n } else {\r\n if (e.pressure !== 0) {\r\n this.handleDrawStart(e);\r\n }\r\n }\r\n }\r\n };\r\n this.containerRef.current.onpointerup = (e) => {\r\n if (this.isDrawable(e)) {\r\n this.handleDrawEnd(e);\r\n }\r\n };\r\n this.containerRef.current.onpointerout = (e) => {\r\n if (this.isDrawable(e)) {\r\n this.handleDrawEnd(e);\r\n }\r\n };\r\n this.containerRef.current.onpointercancel = (e) => {\r\n if (this.isDrawable(e)) {\r\n this.handleDrawEnd(e);\r\n }\r\n };\r\n this.containerRef.current.onpointerleave = (e) => {\r\n if (this.isDrawable(e)) {\r\n this.handleDrawEnd(e);\r\n }\r\n };\r\n }\r\n\r\n this.loop();\r\n\r\n window.setTimeout(() => {\r\n const initX = window.innerWidth / 2;\r\n const initY = window.innerHeight / 2;\r\n this.lazy.update(\r\n { x: initX - this.chainLength / 4, y: initY },\r\n { both: true }\r\n );\r\n this.lazy.update(\r\n { x: initX + this.chainLength / 4, y: initY },\r\n { both: false }\r\n );\r\n this.mouseHasMoved = true;\r\n this.penChanged = true;\r\n this.clear();\r\n\r\n // Load saveData from prop if it exists\r\n if (this.props.saveData) {\r\n this.loadSaveData(this.props.saveData);\r\n }\r\n }, 100);\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.lazyRadius !== this.props.lazyRadius) {\r\n // Set new lazyRadius values\r\n this.chainLength = this.props.lazyRadius * window.devicePixelRatio;\r\n this.lazy.setRadius(this.props.lazyRadius * window.devicePixelRatio);\r\n }\r\n\r\n let prevLines = prevProps.annotations; \r\n let newLines = this.props.annotations;\r\n\r\n if ( prevLines.length !== newLines.length || // added or removed line(s)\r\n (prevLines.length === 0 || newLines.length === 0 || prevLines[0].id !== newLines[0].id)) // whole array changed\r\n {\r\n this.redraw();\r\n }\r\n\r\n if (JSON.stringify(prevProps.pen) !== JSON.stringify(this.props.pen)) {\r\n // Signal this.loop function that values changed\r\n this.penChanged = true;\r\n }\r\n\r\n if (prevProps.canDraw !== this.props.canDraw) {\r\n this.saveLine();\r\n }\r\n\r\n }\r\n\r\n componentWillUnmount = () => {\r\n if (this.containerRef && this.containerRef.current)\r\n this.canvasObserver.unobserve(this.containerRef.current);\r\n };\r\n\r\n isDrawable = (e) => {\r\n return (!this.props.isStylus || e.pointerType === \"pen\" || e.pointerID === this.penID) && this.props.canDraw && e.isPrimary;\r\n }\r\n\r\n undo = () => {\r\n if (this.props.annotations.length > 0) {\r\n this.props.removeLines(this.props.annotations[this.props.annotations.length - 1]);\r\n }\r\n };\r\n\r\n redraw = () => {\r\n this.ctx.drawing.clearRect(0.5, 0.5, this.canvas.drawing.width, this.canvas.drawing.height);\r\n\r\n this.props.annotations.forEach(line => {\r\n this.drawPoints({\r\n points: line.points.map(p => this.unNormalize(p)),\r\n brushColor: line.brushColor,\r\n brushRadius: (line.brushRadius * this.props.scaleFactor) / 2.0,\r\n tmp: false\r\n });\r\n });\r\n };\r\n\r\n handleDrawStart = e => {\r\n // e.preventDefault();\r\n // e.stopPropagation();\r\n\r\n // Start drawing\r\n this.isPressing = true;\r\n\r\n const { x, y } = this.getPointerPos(e);\r\n\r\n if (e.touches && e.touches.length > 0) {\r\n // on touch, set catenary position to touch pos\r\n this.lazy.update({ x, y }, { both: true });\r\n }\r\n // Reset points array\r\n this.points.length = 0;\r\n\r\n // Ensure the initial down position gets added to our line\r\n this.handlePointerMove(x, y);\r\n };\r\n\r\n handleDrawMove = e => {\r\n // e.preventDefault();\r\n // e.stopPropagation();\r\n\r\n const { x, y } = this.getPointerPos(e);\r\n this.handlePointerMove(x, y);\r\n };\r\n\r\n handleDrawEnd = e => {\r\n // e.preventDefault();\r\n // e.stopPropagation();\r\n\r\n // Draw to this end pos\r\n this.handleDrawMove(e);\r\n\r\n // Stop drawing & save the drawn line\r\n this.isDrawing = false;\r\n this.isPressing = false;\r\n this.saveLine();\r\n };\r\n\r\n handleCanvasResize = (entries, observer) => {\r\n for (const entry of entries) {\r\n const { width, height } = entry.contentRect;\r\n this.setCanvasSize(this.canvas.interface, width, height);\r\n this.setCanvasSize(this.canvas.drawing, width, height);\r\n this.setCanvasSize(this.canvas.temp, width, height);\r\n\r\n this.loop({ once: true });\r\n }\r\n this.redraw();\r\n };\r\n\r\n setCanvasSize = (canvas, width, height) => {\r\n canvas.width = width;\r\n canvas.height = height;\r\n canvas.style.width = width;\r\n canvas.style.height = height;\r\n };\r\n\r\n getPointerPos = e => {\r\n const rect = this.canvas.interface.getBoundingClientRect();\r\n\r\n // use cursor pos as default\r\n let clientX = e.clientX;\r\n let clientY = e.clientY;\r\n\r\n // use first touch if available\r\n if (e.changedTouches && e.changedTouches.length > 0) {\r\n clientX = e.changedTouches[0].clientX;\r\n clientY = e.changedTouches[0].clientY;\r\n }\r\n\r\n // return mouse/touch position inside canvas\r\n return {\r\n x: (clientX - rect.left) / this.props.scaleFactor,\r\n y: (clientY - rect.top) / this.props.scaleFactor\r\n };\r\n };\r\n\r\n handlePointerMove = (x, y) => {\r\n if (this.props.disabled) return;\r\n\r\n this.lazy.update({ x, y });\r\n const isDisabled = !this.lazy.isEnabled();\r\n\r\n if (\r\n (this.isPressing && !this.isDrawing) ||\r\n (isDisabled && this.isPressing)\r\n ) {\r\n // Start drawing and add point\r\n this.isDrawing = true;\r\n\r\n if (!this.props.pen.eraser)\r\n this.points.push({ x: this.lazy.brush.x + 0.5, y: this.lazy.brush.y + 0.5 });\r\n }\r\n\r\n if (this.isDrawing) {\r\n if (this.props.pen.eraser) {\r\n const { x: nX, y: nY } = this.normalize({ x, y });\r\n const { x: nSize, y: _ } = this.normalize({ x: this.props.pen.size, y: 0 });\r\n\r\n var removedLines = this.props.annotations\r\n .filter(l => l.points.some(nP => {\r\n let dX = Math.abs(nP.x - nX);\r\n let dY = Math.abs(nP.y - nY);\r\n\r\n return dX < nSize && dY < nSize;\r\n }));\r\n\r\n if (removedLines.length > 0) {\r\n this.props.removeLines(removedLines);\r\n }\r\n\r\n } else {\r\n // Add new point\r\n this.points.push({ x: this.lazy.brush.x + 0.5, y: this.lazy.brush.y + 0.5 });\r\n\r\n // Draw current points\r\n this.drawPoints({\r\n points: this.points,\r\n brushColor: this.props.pen.color,\r\n brushRadius: this.props.pen.size\r\n });\r\n }\r\n }\r\n\r\n this.mouseHasMoved = true;\r\n };\r\n\r\n drawPoints = ({ points, brushColor, brushRadius, tmp = true }) => {\r\n const destination = tmp ?\r\n this.ctx.temp :\r\n this.ctx.drawing;\r\n\r\n destination.lineJoin = \"round\";\r\n destination.lineCap = \"round\";\r\n destination.strokeStyle = brushColor;\r\n\r\n if (tmp) {\r\n destination.clearRect(\r\n 0.5,\r\n 0.5,\r\n destination.canvas.width,\r\n destination.canvas.height\r\n );\r\n }\r\n\r\n destination.lineWidth = (brushRadius * 2.0) / this.props.scaleFactor;\r\n\r\n let p1 = points[0];\r\n let p2 = points[1];\r\n\r\n destination.moveTo(p2.x, p2.y);\r\n destination.beginPath();\r\n\r\n for (var i = 1, len = points.length; i < len; i++) {\r\n // we pick the point between pi+1 & pi+2 as the\r\n // end point and p1 as our control point\r\n var midPoint = midPointBtw(p1, p2);\r\n destination.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);\r\n p1 = points[i];\r\n p2 = points[i + 1];\r\n }\r\n // Draw last line as a straight line while\r\n // we wait for the next point to be able to calculate\r\n // the bezier control point\r\n destination.lineTo(p1.x, p1.y);\r\n destination.stroke();\r\n };\r\n\r\n saveLine = ({ brushColor, brushRadius } = {}) => {\r\n if (this.points.length < 3) return;\r\n\r\n const width = this.canvas.temp.width;\r\n const height = this.canvas.temp.height;\r\n // Save as new line\r\n this.props.addLines([{\r\n id: uuidv4(),\r\n points: this.points.map(p => this.normalize(p)),\r\n brushColor: brushColor || this.props.pen.color, \r\n brushRadius: brushRadius || (this.props.pen.size * 2 / this.props.scaleFactor), \r\n width: width,\r\n height: height\r\n }]);\r\n\r\n // Reset points array\r\n this.points.length = 0;\r\n\r\n // Copy the line to the drawing canvas\r\n this.ctx.drawing.drawImage(this.canvas.temp, 0.5, 0.5, width, height);\r\n\r\n // Clear the temporary line-drawing canvas\r\n this.ctx.temp.clearRect(0.5, 0.5, width, height);\r\n };\r\n\r\n clear = () => {\r\n this.props.removeLines(this.props.annotations);\r\n };\r\n\r\n loop = ({ once = false } = {}) => {\r\n if (this.mouseHasMoved || this.penChanged) {\r\n const pointer = this.lazy.getPointerCoordinates();\r\n const brush = this.lazy.getBrushCoordinates();\r\n\r\n this.drawInterface(this.ctx.interface, pointer, brush);\r\n this.mouseHasMoved = false;\r\n this.penChanged = false;\r\n }\r\n\r\n if (!once) {\r\n window.requestAnimationFrame(() => {\r\n this.loop();\r\n });\r\n }\r\n };\r\n\r\n\r\n drawInterface = (ctx, pointer, brush) => {\r\n if (this.props.hideInterface) {\r\n if (!this.interfaceCleared) {\r\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\r\n this.interfaceCleared = true;\r\n }\r\n return;\r\n }\r\n\r\n this.interfaceCleared = false;\r\n\r\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\r\n\r\n // Draw brush preview\r\n if (this.props.pen.eraser) {\r\n ctx.beginPath();\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = \"white\";\r\n ctx.arc(brush.x, brush.y, (this.props.pen.size * 2) / this.props.scaleFactor, 0, Math.PI * 2, true);\r\n ctx.stroke();\r\n\r\n ctx.beginPath();\r\n ctx.lineWidth = 1;\r\n ctx.strokeStyle = \"black\";\r\n ctx.arc(brush.x, brush.y, ((this.props.pen.size + 2) * 2) / this.props.scaleFactor, 0, Math.PI * 2, true);\r\n ctx.stroke();\r\n\r\n } /* else {\r\n ctx.beginPath();\r\n ctx.fillStyle = this.props.pen.color;\r\n ctx.arc(brush.x, brush.y, (this.props.pen.size * 2) / this.props.scaleFactor, 0, Math.PI * 2, true);\r\n ctx.fill();\r\n } */\r\n\r\n // Draw mouse point (the one directly at the cursor)\r\n // ctx.beginPath();\r\n // ctx.fillStyle = this.props.catenaryColor;\r\n // ctx.arc(pointer.x, pointer.y, 4, 0, Math.PI * 2, true);\r\n // ctx.fill();\r\n\r\n // Draw catenary\r\n // if (this.lazy.isEnabled()) {\r\n // ctx.beginPath();\r\n // ctx.lineWidth = 2;\r\n // ctx.lineCap = \"round\";\r\n // ctx.setLineDash([2, 4]);\r\n // ctx.strokeStyle = this.props.catenaryColor;\r\n // this.catenary.drawToCanvas(\r\n // this.ctx.interface,\r\n // brush,\r\n // pointer,\r\n // this.chainLength\r\n // );\r\n // ctx.stroke();\r\n // }\r\n\r\n // Draw brush point (the one in the middle of the brush preview)\r\n // ctx.beginPath();\r\n // ctx.fillStyle = this.props.catenaryColor;\r\n // ctx.arc(brush.x, brush.y, 2, 0, Math.PI * 2, true);\r\n // ctx.fill();\r\n };\r\n\r\n\r\n // Transform screen position inside a [0, 1]x[0, 1] normalized value\r\n // The annotation zone is extended to a square so as to not deform cursor\r\n normalize = ({ x, y }) => {\r\n let greatestSideLength = Math.max(this.props.canvasSize.width, this.props.canvasSize.height);\r\n\r\n return {\r\n x: x / greatestSideLength,\r\n y: y / greatestSideLength\r\n };\r\n };\r\n\r\n unNormalize = ({ x, y }) => {\r\n let greatestSideLength = Math.max(this.props.canvasSize.width, this.props.canvasSize.height);\r\n\r\n return {\r\n x: x * greatestSideLength,\r\n y: y * greatestSideLength\r\n };\r\n };\r\n\r\n render() {\r\n return (\r\n \r\n {finalSize\r\n ? \r\n : (
\r\n );\r\n}\r\n\r\n\r\nfunction ZoomPanPitchDrawContent(props) {\r\n\r\n const { imageSource, imgSize, finalSize, containerSize, pan, stylusDetected, ...drawingProps } = props;\r\n\r\n return (\r\n {t(\"presentation.pageLoading\")}\r\n
)}\r\n \r\n 
\r\n\r\n
\r\n \r\n
\r\n \r\n
)\r\n : (\r\n {t(\"presentation.pageLoading\")}\r\n
)\r\n }\r\n \r\n
\r\n\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n
\r\n );\r\n }\r\n}\r\n","import React, { useState, useEffect } from 'react';\r\nimport { DocumentPresenter } from './DocumentPresenter';\r\nimport { useTranslate } from \"react-translate\";\r\nimport { useSetTimeout } from \"../../../utils/useSetTimeout\"\r\nimport { AbortError } from '@microsoft/signalr';\r\n\r\nfunction arrayBufferToBase64(buffer) {\r\n var binary = '';\r\n var bytes = new Uint8Array(buffer);\r\n var len = bytes.byteLength;\r\n for (var i = 0; i < len; i++) {\r\n binary += String.fromCharCode(bytes[i]);\r\n }\r\n return window.btoa(binary);\r\n}\r\n\r\n\r\nexport function DocumentDownloader(props) {\r\n const {\r\n pageCount,\r\n startPage,\r\n subscribeToEvent,\r\n callHubAsync,\r\n paletteColors,\r\n setTitleClassName,\r\n setError\r\n } = props;\r\n const [pages, setPages] = useState(Array(pageCount));\r\n const [isTimerRunning, setIsTimerRunning] = useSetTimeout(30000);\r\n const abortController = new AbortController();\r\n const t = useTranslate(\"Presenter\");\r\n\r\n function onReady() {\r\n setPages(prevPages => {\r\n var clone = prevPages.map(p => p);\r\n return clone;\r\n }); // update props\r\n //setIsTimerRunning(false);\r\n }\r\n\r\n async function initPageAsync(page) {\r\n try {\r\n var result = await fetch(page.sourceUrl, { signal: abortController.signal });\r\n if (result && result.ok) {\r\n var blob = await result.blob();\r\n\r\n const reader = new FileReader();\r\n reader.onloadend = () => {\r\n var base64 = arrayBufferToBase64(reader.result);\r\n page.source = \"data:\"+ blob.type + \";base64, \" + base64;\r\n page.ready = true;\r\n onReady();\r\n };\r\n reader.onerror = () => {\r\n setError(t(\"error.pageLoading\"));\r\n };\r\n reader.onabort = () => {\r\n setError(t(\"error.pageLoading\"));\r\n };\r\n reader.readAsArrayBuffer(blob);\r\n } else {\r\n setError(t(\"error.pageLoading\"));\r\n }\r\n } catch (ex) {\r\n if (ex.name === \"AbortError\") {\r\n return;\r\n }\r\n setError(t(\"error.pageLoading\"));\r\n }\r\n \r\n }\r\n\r\n async function alertPageChangedAsync(index) {\r\n var needsUpload = pages[index] === undefined || !pages[index].ready;\r\n if (needsUpload) {\r\n setIsTimerRunning(true);\r\n }\r\n await callHubAsync(\r\n \"changePage\",\r\n index,\r\n needsUpload\r\n );\r\n }\r\n\r\n useEffect(() => {\r\n if (subscribeToEvent) {\r\n var eventName = \"pageUploadStarted\";\r\n\r\n var unsubscriber = subscribeToEvent(eventName, args => {\r\n const { id, index, size } = args;\r\n\r\n var newPage = {\r\n id,\r\n ready: false,\r\n sourceUrl: `api/Files/${id}`,\r\n annotations: []\r\n };\r\n\r\n initPageAsync(newPage);\r\n\r\n setPages(prevPages => {\r\n var clone = prevPages.map(p => p);\r\n clone[index] = newPage;\r\n return clone;\r\n });\r\n\r\n });\r\n\r\n return unsubscriber;\r\n }\r\n\r\n return undefined;\r\n }, [subscribeToEvent, pages]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n setIsTimerRunning(false);\r\n abortController.abort();\r\n }\r\n }, []);\r\n\r\n\r\n return {t(\"presentation.started\")}
\r\n {t(\"presentation.pageLoading\")}\r\n{message}
\r\n{t(\"error.refresh\")}
\r\n \r\n );\r\n}","import React, { useState, useEffect } from \"react\";\r\nimport { DocumentDownloader } from \"./DocumentDownloader\";\r\nimport * as PresenterState from \"./PresenterState\";\r\nimport { useTranslate } from \"react-translate\";\r\nimport './Presenter.css'\r\nimport { ErrorDisplayer } from \"../../Errors/ErrorDisplayer\";\r\n\r\nexport function PresenterActivity(props) {\r\n const t = useTranslate(\"Presenter\");\r\n const { activityArgs, userId, subscribeToEvent, titleRef, setFooterClassName, addFooterClassName, ...otherProps } = props;\r\n const [presenterActivityArgs, setPresenterActivityArgs] = useState(undefined);\r\n const [currentPresenters, setCurrentPresenters] = useState(activityArgs.presenters);\r\n const [presenterState, setPresenterState] = useState(PresenterState.waiting);\r\n const [error, setError] = useState(null);\r\n\r\n function clearTitleClassName(){\r\n if (titleRef && titleRef.current) {\r\n titleRef.current.classList = \"\";\r\n }\r\n }\r\n\r\n function setTitleClassName(name) {\r\n if (titleRef && titleRef.current) {\r\n titleRef.current.classList.add(name);\r\n }\r\n }\r\n\r\n function setDocumentName() {\r\n if (titleRef && titleRef.current && presenterActivityArgs && presenterActivityArgs.documentName) {\r\n const docName = presenterActivityArgs.documentName.trim();\r\n if (docName != \"\") {\r\n const name = document.createTextNode(\" - \" + docName);\r\n titleRef.current.appendChild(name);\r\n } \r\n }\r\n }\r\n \r\n useEffect(() => {\r\n if (subscribeToEvent) {\r\n var eventName = \"presentationStart\";\r\n\r\n var unsubscriber = subscribeToEvent(eventName, (args) => {\r\n setPresenterActivityArgs(args);\r\n if (args.presenterId === userId) {\r\n setPresenterState(PresenterState.presenting);\r\n } else if (presenterState !== PresenterState.presenting) {\r\n setPresenterState(PresenterState.waiting);\r\n }\r\n });\r\n\r\n return unsubscriber;\r\n }\r\n return undefined;\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (subscribeToEvent) {\r\n var eventName = \"presentationStop\";\r\n\r\n var unsubscriber = subscribeToEvent(eventName, (args) => {\r\n setPresenterActivityArgs(args);\r\n if (args.presenterId === userId) {\r\n setPresenterState(PresenterState.waiting);\r\n }\r\n });\r\n return unsubscriber;\r\n }\r\n return undefined;\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (subscribeToEvent) {\r\n var eventName = \"presentersChanged\";\r\n\r\n var unsubscriber = subscribeToEvent(eventName, (args) => {\r\n setCurrentPresenters(args.presenters);\r\n });\r\n return unsubscriber;\r\n }\r\n return undefined;\r\n }, []);\r\n\r\n function Presenter() {\r\n switch (presenterState) {\r\n case PresenterState.waiting:\r\n setFooterClassName('logoContainer');\r\n clearTitleClassName();\r\n if (!currentPresenters || currentPresenters.length === 0) {\r\n return{t(\"instructions\")}
;\r\n } else if (currentPresenters.length === 1) {\r\n return{currentPresenters[0].presenterName} {t(\"presentation.otherpresenter\")}
;\r\n } else {\r\n if (currentPresenters.length === 2) {\r\n return{currentPresenters.map(p => p.presenterName).join(\" et \")} {t(\"presentation.otherpresenters\")}
;\r\n }\r\n else {\r\n return{currentPresenters.slice(0, currentPresenters.length - 1).map(p => `${p.presenterName}`).join(\", \")} et {currentPresenters[currentPresenters.length - 1].presenterName} {t(\"presentation.otherpresenters\")}
;\r\n }\r\n }\r\n case PresenterState.presenting:\r\n if (error) {\r\n setFooterClassName('logoContainer');\r\n clearTitleClassName();\r\n return{t(\"instructions\")}
; \r\n }\r\n }\r\n\r\n return (\r\n <>\r\n displayNumber(value.id + \"_checkButton\")}>\r\n 
\r\n ![\"PossibleChoice\"](\"./assets/check.png\")
\r\n
\r\n )\r\n } else {\r\n binaryData.push(file);\r\n let urlImage = window.URL.createObjectURL(new Blob(binaryData, { type: \"image/png\" }))\r\n itemList.push(\r\n \r\n displayNumber(value.key + \"_checkButton\")}>\r\n \r\n \r\n
\r\n )\r\n }\r\n \r\n }\r\n \r\n }\r\n setItems(itemList)\r\n \r\n return itemList;\r\n }\r\n\r\n async function getFileAsync(fileId) {\r\n return await fetch('api/upload/'+ fileId, {\r\n method: 'GET',\r\n body: null,\r\n headers: {\r\n SessionId: props.sessionId,\r\n ConnectionId: props.connectionId,\r\n UserId: props.userId,\r\n RequestVerificationToken: getCSRFToken()\r\n }\r\n }).then((response) => response.blob())\r\n .then(data => {\r\n return data;\r\n })\r\n }\r\n\r\n function displayNumber(id) {\r\n //rajouter requete http + lien avec le services\r\n if (document.getElementsByClassName(\"clicked\").length === 1 && document.getElementsByClassName(\"clicked\")[0].id === id) {\r\n let boxes = document.querySelectorAll('.clicked');\r\n boxes.forEach(box => {\r\n box.classList.remove('clicked');\r\n });\r\n } else {\r\n let boxes = document.querySelectorAll('.clicked');\r\n boxes.forEach(box => {\r\n box.classList.remove('clicked');\r\n });\r\n document.getElementById(id).classList.add(\"clicked\")\r\n }\r\n let selectedChoices = (Array.from(document.querySelectorAll('.clicked'))[0]?.id)?.replace(\"_checkButton\", '')\r\n setVote(selectedChoices)\r\n sendMessage(selectedChoices)\r\n }\r\n\r\n function sendMessage(event) {\r\n setVote(event)\r\n setState(State.sending);\r\n }\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\n ","import React, { useEffect, useRef} from 'react';\r\nimport { useTranslate } from 'react-translate';\r\nimport * as Activities from './Activities';\r\n\r\nexport function ActivityRenderer(props) {\r\n const t = useTranslate('ActivityManager');\r\n const { activity, projectName, setFooterClassName, addFooterClassName, ...innerProps } = props;\r\n const titleRef = useRef(null);\r\n\r\n useEffect(() => {\r\n document.title = \"Compositeur Digital UX - \" + projectName;\r\n }, [projectName]);\r\n\r\n function Activity() {\r\n switch (activity) {\r\n case Activities.Note:\r\n return \r\n {t('session.noActivity')}
;\r\n }\r\n }\r\n\r\n return (<>\r\n{props.projectName}
\r\n{common('error')}
\r\n{t('session.unknown')}
\r\n{t('session.ended')}
\r\n{t('session.paused')}
\r\n ;\r\n case SessionState.NotLogged:\r\n case SessionState.LoginFailed:\r\n default:\r\n return (<>\r\n{t('session.joining')} {projectName}
\r\n{common('error.retry')}
\r\n }\r\n );\r\n }\r\n } else if (connectionState === State.Reconnecting) {\r\n return <>\r\n{t('connection.reconnecting')}
\r\n ;\r\n } else if (connectionState === State.Disconnected) {\r\n return <>\r\n{t('connection.disconnected')}
\r\n{t('title')}
\r\n{t('instructions.fullUrl')}
{t('instructions.type')}
v{version}
\r\n \r\n );\r\n }\r\n}","import React from 'react';\r\nimport { ErrorDisplayer } from './ErrorDisplayer';\r\n\r\nexport class ErrorBoundary extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = { hasError: false };\r\n }\r\n\r\n componentDidCatch(error, info) {\r\n // Show a reply UI\r\n this.setState({ hasError: true });\r\n console.log(info);\r\n }\r\n\r\n render() {\r\n if (this.state.hasError) {\r\n // You can show any reply UI\r\n return (<>\r\n\r\n
\r\n );\r\n }\r\n return this.props.children;\r\n }\r\n}","import React, { useRef } from 'react';\r\nimport { Route } from 'react-router';\r\nimport { Home } from './Home';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport { ErrorBoundary } from './Errors/ErrorBoundary'\r\nimport { useTranslate } from \"react-translate\";\r\n\r\nexport function Layout(props) {\r\n const footer = useRef(null);\r\n const t = useTranslate(\"Common\");\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from 'react';\r\nimport { TranslatorProvider } from 'react-translate';\r\n\r\nimport en from '../translations/en.json';\r\nimport fr from '../translations/fr.json';\r\n\r\nconst allTranslations = [en, fr];\r\nconst locale = (navigator.language || navigator.userLanguage || 'en').substr(0, 2).toLowerCase(); // Chrome outputs 'fr-FR'\r\n\r\ndocument.documentElement.setAttribute('lang', locale);\r\n\r\nexport function Translator(props) {\r\n\r\n const auto = !props.language || props.language === 'auto';\r\n const desiredLanguage = auto ? locale : props.language;\r\n const translations = allTranslations.find(t => t.locale === desiredLanguage) ?? en;\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n ![\"Compositeur](\"assets/logoCDUX.png\")
\r\n ![\"Compositeur](\"assets/logoCDUX_small.png\")
\r\n \r\n
\r\n \r\n \r\n \r\n