jeong-wonjin
2 years ago
parent
99179fa94d
commit
08313bcc1e
@ -0,0 +1,6 @@
|
|||||||
|
<component name="InspectionProjectProfileManager">
|
||||||
|
<profile version="1.0">
|
||||||
|
<option name="myName" value="Project Default" />
|
||||||
|
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
|
||||||
|
</profile>
|
||||||
|
</component>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1,26 +1,23 @@
|
|||||||
import React from 'react';
|
import React, {useState} from 'react';
|
||||||
import logo from './logo.svg';
|
|
||||||
import './App.css';
|
import './App.css';
|
||||||
|
import {PDFViewer} from "./PDFViewer/PDFViewer";
|
||||||
|
import DrawingCanvas from "./DrawingCanvas";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
/*
|
||||||
<div className="App">
|
return (
|
||||||
<header className="App-header">
|
<DrawingCanvas/>
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
);
|
||||||
<p>
|
*/
|
||||||
Edit <code>src/App.tsx</code> and save to reload.
|
|
||||||
</p>
|
|
||||||
<a
|
return (
|
||||||
className="App-link"
|
<PDFViewer fileUrl="./test3.pdf" scale={1.5} renderText={true} waterMarkText="yaguboo-이정민 2023-10-04 15:10:00"/>
|
||||||
href="https://reactjs.org"
|
);
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Learn React
|
|
||||||
</a>
|
|
||||||
</header>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
@ -0,0 +1,271 @@
|
|||||||
|
import React, { useRef, useState } from 'react';
|
||||||
|
|
||||||
|
type Point = {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
type Drawing = {
|
||||||
|
path: Path2D;
|
||||||
|
offset: Point;
|
||||||
|
};
|
||||||
|
|
||||||
|
const DrawingCanvas: React.FC = () => {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
const [isDrawing, setIsDrawing] = useState(false);
|
||||||
|
const [drawings, setDrawings] = useState<Drawing[]>([]);
|
||||||
|
const [currentPath, setCurrentPath] = useState<Path2D | null>(null);
|
||||||
|
const [drawMode, setDrawMode] = useState(true); // true for drawing, false for selecting
|
||||||
|
const [selectMode, setSelectMode] = useState(false);
|
||||||
|
const [selectMode2, setSelectMode2] = useState(false);
|
||||||
|
const [selectionStart, setSelectionStart] = useState<Point | null>(null);
|
||||||
|
const [selectedArea, setSelectedArea] = useState<{ start: Point; end: Point } | null>(null);
|
||||||
|
const [selectedDrawings, setSelectedDrawings] = useState<number[]>([]);
|
||||||
|
const [mousePos, setMousePos] = useState<Point>();
|
||||||
|
const [dragStartPoint, setDragStartPoint] = useState<Point | null>(null);
|
||||||
|
|
||||||
|
const handleTouchStart = (e: React.TouchEvent) => {
|
||||||
|
handleMouseDown({
|
||||||
|
clientX: e.touches[0].clientX,
|
||||||
|
clientY: e.touches[0].clientY,
|
||||||
|
} as any);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTouchMove = (e: React.TouchEvent) => {
|
||||||
|
handleMouseMove({
|
||||||
|
clientX: e.touches[0].clientX,
|
||||||
|
clientY: e.touches[0].clientY,
|
||||||
|
} as any);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTouchEnd = (e: React.TouchEvent) => {
|
||||||
|
handleMouseUp({
|
||||||
|
clientX: e.changedTouches[0].clientX,
|
||||||
|
clientY: e.changedTouches[0].clientY,
|
||||||
|
} as any);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCanvasRelativePosition = (e: React.MouseEvent): Point => {
|
||||||
|
if (!canvasRef.current) return { x: 0, y: 0 };
|
||||||
|
|
||||||
|
const rect = canvasRef.current.getBoundingClientRect();
|
||||||
|
return {
|
||||||
|
x: e.clientX - rect.left,
|
||||||
|
y: e.clientY - rect.top,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const redraw = () => {
|
||||||
|
if (!canvasRef.current) return;
|
||||||
|
const ctx = canvasRef.current.getContext('2d');
|
||||||
|
if (ctx) {
|
||||||
|
ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
|
||||||
|
ctx.save();
|
||||||
|
drawings.forEach((drawing) => {
|
||||||
|
ctx.translate(drawing.offset.x, drawing.offset.y);
|
||||||
|
ctx.strokeStyle = 'black';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.stroke(drawing.path);
|
||||||
|
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||||
|
});
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
|
// 선택 영역이 있으면 항상 그려줍니다.
|
||||||
|
if (selectedArea) {
|
||||||
|
drawSelectionArea(selectedArea.start, selectedArea.end);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseDown = (e: React.MouseEvent) => {
|
||||||
|
const point = getCanvasRelativePosition(e);
|
||||||
|
setMousePos(point);
|
||||||
|
|
||||||
|
if (drawMode) {
|
||||||
|
setIsDrawing(true);
|
||||||
|
const newPath = new Path2D();
|
||||||
|
newPath.moveTo(point.x, point.y);
|
||||||
|
setCurrentPath(newPath);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectMode) {
|
||||||
|
if (selectedArea && isPointInsideRect(point, selectedArea)) {
|
||||||
|
setDragStartPoint(point);
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
setSelectedDrawings([]);
|
||||||
|
setDragStartPoint(null);
|
||||||
|
setSelectedArea({ start: point, end: point } );
|
||||||
|
setSelectionStart(point);
|
||||||
|
console.log("out");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseMove = (e: React.MouseEvent) => {
|
||||||
|
const point = getCanvasRelativePosition(e);
|
||||||
|
|
||||||
|
if (drawMode && isDrawing && currentPath) {
|
||||||
|
currentPath.lineTo(point.x, point.y);
|
||||||
|
const ctx = canvasRef.current?.getContext('2d');
|
||||||
|
ctx?.stroke(currentPath);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectMode && selectionStart && !dragStartPoint) {
|
||||||
|
const normalizedArea = normalizeSelectionArea(selectionStart, point);
|
||||||
|
setSelectedArea(normalizedArea);
|
||||||
|
redraw();
|
||||||
|
drawSelectionArea(normalizedArea.start, normalizedArea.end);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedDrawings.length && mousePos && dragStartPoint) {
|
||||||
|
const dx = point.x - mousePos.x;
|
||||||
|
const dy = point.y - mousePos.y;
|
||||||
|
const newDrawings = [...drawings];
|
||||||
|
|
||||||
|
for (let index of selectedDrawings) {
|
||||||
|
newDrawings[index].offset.x += dx;
|
||||||
|
newDrawings[index].offset.y += dy;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedArea) {
|
||||||
|
selectedArea.start.x += dx;
|
||||||
|
selectedArea.start.y += dy;
|
||||||
|
selectedArea.end.x += dx;
|
||||||
|
selectedArea.end.y += dy;
|
||||||
|
}
|
||||||
|
|
||||||
|
setDrawings(newDrawings);
|
||||||
|
setMousePos(point);
|
||||||
|
redraw();
|
||||||
|
if (selectedArea) {
|
||||||
|
drawSelectionArea(selectedArea.start, selectedArea.end);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const isPointInsideRect = (point: Point, rect: { start: Point; end: Point }): boolean => {
|
||||||
|
return (
|
||||||
|
point.x >= rect.start.x &&
|
||||||
|
point.x <= rect.end.x &&
|
||||||
|
point.y >= rect.start.y &&
|
||||||
|
point.y <= rect.end.y
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseUp = (e: React.MouseEvent) => {
|
||||||
|
if (drawMode) {
|
||||||
|
setIsDrawing(false);
|
||||||
|
if (currentPath) {
|
||||||
|
setDrawings([...drawings, { path: currentPath, offset: { x: 0, y: 0 } }]);
|
||||||
|
setCurrentPath(null);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectMode && selectionStart) {
|
||||||
|
if (selectedArea) {
|
||||||
|
const normalizedArea = selectedArea;
|
||||||
|
const selected = drawings.map((drawing, index) =>
|
||||||
|
isDrawingInsideSelection(drawing, normalizedArea) ? index : -1
|
||||||
|
).filter(index => index !== -1);
|
||||||
|
|
||||||
|
setSelectedDrawings(selected);
|
||||||
|
redraw();
|
||||||
|
|
||||||
|
if (selected.length === 0) {
|
||||||
|
setSelectedArea(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setSelectionStart(null);
|
||||||
|
setDragStartPoint(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setDragStartPoint(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isDrawingInsideSelection = (drawing: Drawing, selection: { start: Point; end: Point }): boolean => {
|
||||||
|
const ctx = canvasRef.current?.getContext('2d');
|
||||||
|
if (!ctx) return false;
|
||||||
|
|
||||||
|
const { start, end } = selection;
|
||||||
|
for (let x = start.x; x <= end.x; x += 5) {
|
||||||
|
for (let y = start.y; y <= end.y; y += 5) {
|
||||||
|
if (ctx.isPointInPath(drawing.path, x - drawing.offset.x, y - drawing.offset.y)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeSelectionArea = (start: Point, end: Point): { start: Point; end: Point } => {
|
||||||
|
return {
|
||||||
|
start: {
|
||||||
|
x: Math.min(start.x, end.x),
|
||||||
|
y: Math.min(start.y, end.y)
|
||||||
|
},
|
||||||
|
end: {
|
||||||
|
x: Math.max(start.x, end.x),
|
||||||
|
y: Math.max(start.y, end.y)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const drawSelectionArea = (start: Point, end: Point) => {
|
||||||
|
if (!canvasRef.current) return;
|
||||||
|
const ctx = canvasRef.current.getContext('2d');
|
||||||
|
if (ctx) {
|
||||||
|
ctx.setLineDash([5, 5]);
|
||||||
|
ctx.strokeStyle = 'blue';
|
||||||
|
ctx.strokeRect(start.x, start.y, end.x - start.x, end.y - start.y);
|
||||||
|
ctx.setLineDash([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<button onClick={() => {
|
||||||
|
setDrawMode(!drawMode);
|
||||||
|
setSelectMode(false);
|
||||||
|
}}>
|
||||||
|
{drawMode ? 'Draw Mode: ON' : 'Draw Mode: OFF'}
|
||||||
|
</button>
|
||||||
|
<button onClick={() => {
|
||||||
|
setSelectMode(!selectMode);
|
||||||
|
setDrawMode(false);
|
||||||
|
}}>
|
||||||
|
{selectMode ? 'Select Mode: ON' : 'Select Mode: OFF'}
|
||||||
|
</button>
|
||||||
|
<button onClick={() => {
|
||||||
|
setSelectMode2(!selectMode2);
|
||||||
|
setDrawMode(false);
|
||||||
|
setSelectMode(false);
|
||||||
|
}}>
|
||||||
|
{selectMode2 ? 'Select Mode 2: ON' : 'Select Mode 2: OFF'}
|
||||||
|
</button>
|
||||||
|
<br/>
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
width={800}
|
||||||
|
height={600}
|
||||||
|
style={{ border: '1px solid black' }}
|
||||||
|
onMouseDown={handleMouseDown}
|
||||||
|
onMouseMove={handleMouseMove}
|
||||||
|
onMouseUp={handleMouseUp}
|
||||||
|
onTouchStart={handleTouchStart}
|
||||||
|
onTouchMove={handleTouchMove}
|
||||||
|
onTouchEnd={handleTouchEnd}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DrawingCanvas;
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
.textLayer
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
text-align: initial;
|
||||||
|
inset: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
color: rgba(255,255, 0, 1.0);
|
||||||
|
line-height: 1;
|
||||||
|
-webkit-text-size-adjust: none;
|
||||||
|
-moz-text-size-adjust: none;
|
||||||
|
text-size-adjust: none;
|
||||||
|
forced-color-adjust: none;
|
||||||
|
transform-origin: 0 0;
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
.textLayer span
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.pageLayer
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
direction: ltr;
|
||||||
|
margin: var(--page-margin);
|
||||||
|
overflow: visible;
|
||||||
|
border: var(--page-border);
|
||||||
|
background-clip: content-box;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
padding-bottom: 17px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdfViewer
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdfViewer .canvasWrapper
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 5px 5px 15px 5px #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading
|
||||||
|
{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawLayer
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
background-color:transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.waterMarkLayer
|
||||||
|
{
|
||||||
|
background-color:transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdfViewer .pageLayer :is(span, br) {
|
||||||
|
color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
white-space: pre;
|
||||||
|
cursor: text;
|
||||||
|
transform-origin: 0% 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading_canvasWrapper {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
box-shadow: 5px 5px 15px 5px #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(255, 255, 255, 0.8); /* semi-transparent white background */
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#printFrame
|
||||||
|
{
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue