Merge branch 'main' of https://github.com/GAIB20/tugas-besar-grafkom-…

…1-grafkonn
GAIB20 · Apr 5, 2024 · 84a6244 · 84a6244
2 parents d2c2720 + eb7756c
commit 84a6244
Show file tree

Hide file tree

Showing 15 changed files with 72 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -1,30 +1,27 @@
-# React + TypeScript + Vite
+# 2D Web Based CAD (Computer-Aided Design)
+Program berbasis website ini dibuat untuk menyelesaikan Tugas Besar 1 IF3260 Grafika Komputer.
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Deskripsi program
 
-Currently, two official plugins are available:
+Sebuah program CAD 2 dimensi telah dikembangkan sebagai bagian dari Tugas Besar 1 dalam mata kuliah IF3260 Grafika Komputer untuk tahun ajaran 2023/2024. Program ini diakses melalui sebuah website dan memungkinkan pengguna untuk membuat gambar menggunakan bentuk dasar seperti garis, persegi, persegi panjang, dan poligon. Selain itu, pengguna dapat mengubah posisi, warna, sudut, serta melakukan transformasi seperti translasi dan rotasi pada bentuk-bentuk tersebut. Model gambar yang telah dibuat dapat disimpan sebagai file dengan format .txt sehingga dapat diakses dan ditampilkan kembali di kemudian hari.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Menjalankan program
+### Requirement
+- Install browser yang men-support WEBGL
+- Install [Visual Studio Code](https://code.visualstudio.com\)
+- Pada VS Code, install ekstensi <strong>Live Share</strong>
+- pastikan memiliki nodejs dan typescript
 
-## Expanding the ESLint configuration
+### How to Run
+1. Ketik npm install
+2. Ketik npm run dev
+3. Website siap digunakan
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+<a name="anggota-kelompok"></a>
 
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+## Anggota Kelompok
+| Nama                        | NIM      |
+| --------------------------- | -------- |
+| M. Rizky Syaban             | 13521119 |
+| Saddam Annais S.            | 13521121 |
+| Mohammad Rifqi Farhansyah   | 13521166 |
diff --git a/doc/Tubes1_13521119_13521121_13521166.pdf b/doc/Tubes1_13521119_13521121_13521166.pdf
diff --git a/index.html b/index.html
@@ -2,9 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <!-- Change the href attribute to point to the favicon.ico file -->
+    <link rel="icon" type="image/x-icon" href="public/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>GrafKonn : 2D Primitive Element</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
@@ -7,7 +7,7 @@ import { AbstractShape } from "../shape/AbstractShape";
 interface SidebarProps {
   shapeTypeArr: {
     id: number;
-    type?: "square" | "circle" | "line" | "rectangle" | "polygon";
+    type?:  "line" | "square" | "rectangle" | "polygon";
   }[];
   shapesArr: AbstractShape[];
 }
@@ -116,7 +116,7 @@ function Sidebar({ shapeTypeArr  }: SidebarProps) {
           <option value="add-vertex">Add Vertex</option>
           <option value="remove-vertex">Remove Vertex</option>
         </select>
-        <div className={`p-2 ${(selectedShape == "square" || selectedShape == "line") ? "block" : "hidden"}`}>
+        <div className={`p-2 ${(selectedShape === "square") ? "block" : "hidden"}`}>
           <p className="text-sm">Resize</p>
           <hr className="border-primaryCanvas border-[0.1px] opacity-25" />
           <div className="flex flex-col gap-y-2">
@@ -139,6 +139,29 @@ function Sidebar({ shapeTypeArr  }: SidebarProps) {
             </div>
           </div>
         </div>
+        <div className={`p-2 ${(selectedShape === "line") ? "block" : "hidden"}`}>
+          <p className="text-sm">Resize</p>
+          <hr className="border-primaryCanvas border-[0.1px] opacity-25" />
+          <div className="flex flex-col gap-y-2">
+            <div className="flex items-center mt-2">
+              <span className="text-xs pr-2  w-12 text-left">factor</span>
+              <input
+                type="range"
+                id="slider-resize-line"
+                min="0"
+                max="100"
+                defaultValue="1"
+                className="slider"
+                onChange={(event) => handleSliderChange(event, "ResizeLine")}
+              />
+              <div className="bg-black rounded-md w-10 px-2 py-1 ml-2 text-white text-xs">
+                <output id="sliderValResizeLine" style={{ display: "block" }}>
+                  0
+                </output>
+              </div>
+            </div>
+          </div>
+        </div>
         <div className={`p-2 ${selectedShape === "rectangle" ? "block" : "hidden"}`}>
           <p className="text-sm">ResizeX</p>
           <hr className="border-primaryCanvas border-[0.1px] opacity-25" />

diff --git a/src/mandatory/resizeLine.ts b/src/mandatory/resizeLine.ts
@@ -0,0 +1,15 @@
+import { AbstractShape } from "../shape/AbstractShape";
+
+export function handleResizeLine(e: Event, shape: AbstractShape) {
+    const slider = e.target as HTMLInputElement;
+    const factor = parseInt(slider.value)/100;
+
+    for (let i = 2; i < 4; i++) {
+        if (factor >= shape.scaleFactor) {
+            shape.locationArr[i] += (factor - shape.scaleFactor) * 20;
+        } else {
+            shape.locationArr[i] -= (shape.scaleFactor - factor) * 20;
+        }
+    }
+    shape.scaleFactor = factor;
+}
diff --git a/src/shape/Line.tsx b/src/shape/Line.tsx
@@ -10,8 +10,6 @@ export class Line extends AbstractShape {
         this.bufferLocSize = this.locationArr.length;
         this.type = "line";
         this.scaleFactor = 0;
-        this.scaleFactorX = 0;
-        this.scaleFactorY = 0;
         const v1 = [Math.random(), Math.random(), Math.random(), 1];
         const v2 = [Math.random(), Math.random(), Math.random(), 1];
         const v3 = [Math.random(), Math.random(), Math.random(), 1];

diff --git a/src/utils/setupEventListener.ts b/src/utils/setupEventListener.ts
@@ -10,6 +10,7 @@ import { onRemoveVertexMouseDown } from "../mandatory/removeVertex";
 import { handleResize } from "../mandatory/resize";
 import { handleResizeX } from "../mandatory/resizeX";
 import { handleResizeY } from "../mandatory/resizeY";
+import { handleResizeLine } from "../mandatory/resizeLine";
 import { handleRotate } from "../mandatory/rotate";
 import { handleTranslate } from "../mandatory/translate";
 import { AbstractShape } from "../shape/AbstractShape";
@@ -103,6 +104,11 @@ export function setupEventListener(
     drawScene();
   });
 
+  setupSlider("#slider-resize-line", canvas.width, (e: Event) => {
+    handleResizeLine(e, shape())
+    drawScene();
+  });
+
   // event listeners for moving vertex
   canvas.addEventListener("mousedown", (e: MouseEvent) =>
     onMoveVertexHandleMouseDown(

diff --git a/test/model_1.txt b/test/model_1.txt
@@ -0,0 +1 @@
+[{"type":"square","locationArr":[0,0,0,442.39791412353514,442.39791412353514,442.39791412353514,442.39791412353514,442.39791412353514,442.39791412353514,0,0,0],"translationArr":[501,16],"rotation":[-0.7771459614569708,0.6293203910498375],"color":[0.12288376193331674,0.6819231851508494,0.02011855913211691,1,0.6521104635978234,0.6111882029223266,0.7297087313059905,1,0.9562523152926989,0.41884364431407883,0.08337718745655631,1,0.9562523152926989,0.41884364431407883,0.08337718745655631,1,0.14102820795085935,0.6772213709120947,0.8455593964078902,1,0.12288376193331674,0.6819231851508494,0.02011855913211691,1],"scaleFactor":0.96,"scaleFactorX":0,"scaleFactorY":0}]
diff --git a/test/model_2.txt b/test/model_2.txt
@@ -0,0 +1 @@
+[{"type":"square","locationArr":[0,0,0,301.7979141235351,301.7979141235351,301.7979141235351,301.7979141235351,301.7979141235351,301.7979141235351,0,0,0],"translationArr":[559,0],"rotation":[0,1],"color":[0.8389958115996887,0.2798377285706082,0.2113661353782852,1,0.3993281235543953,0.7293999095556012,0.0033155513711602413,1,0.4965935671937616,0.8372034624540028,0.4454660245545332,1,0.4965935671937616,0.8372034624540028,0.4454660245545332,1,0.1689598034578934,0.5644299728822628,0.32510601357524305,1,0.8389958115996887,0.2798377285706082,0.2113661353782852,1],"scaleFactor":1.48,"scaleFactorX":0,"scaleFactorY":0},{"type":"rectangle","locationArr":[0,0,0,124.61458206176758,437.82916412353495,124.61458206176758,437.82916412353495,124.61458206176758,437.82916412353495,0,0,0],"translationArr":[112,191],"rotation":[0,1],"color":[0.2939279714971894,0.6626058452029446,0.5492123877757804,1,0.38679352693239033,0.6645943251194597,0.664968179125953,1,0.25972882024523547,0.8322793530951034,0.7571089671627917,1,0.25972882024523547,0.8322793530951034,0.7571089671627917,1,0.12035656443569964,0.8674796824582045,0.6577415954038102,1,0.2939279714971894,0.6626058452029446,0.5492123877757804,1],"scaleFactor":0,"scaleFactorX":9.43,"scaleFactorY":0}]
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[{"type":"square","locationArr":[0,0,0,442.39791412353514,442.39791412353514,442.39791412353514,442.39791412353514,442.39791412353514,442.39791412353514,0,0,0],"translationArr":[501,16],"rotation":[-0.7771459614569708,0.6293203910498375],"color":[0.12288376193331674,0.6819231851508494,0.02011855913211691,1,0.6521104635978234,0.6111882029223266,0.7297087313059905,1,0.9562523152926989,0.41884364431407883,0.08337718745655631,1,0.9562523152926989,0.41884364431407883,0.08337718745655631,1,0.14102820795085935,0.6772213709120947,0.8455593964078902,1,0.12288376193331674,0.6819231851508494,0.02011855913211691,1],"scaleFactor":0.96,"scaleFactorX":0,"scaleFactorY":0}]
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		[{"type":"square","locationArr":[0,0,0,301.7979141235351,301.7979141235351,301.7979141235351,301.7979141235351,301.7979141235351,301.7979141235351,0,0,0],"translationArr":[559,0],"rotation":[0,1],"color":[0.8389958115996887,0.2798377285706082,0.2113661353782852,1,0.3993281235543953,0.7293999095556012,0.0033155513711602413,1,0.4965935671937616,0.8372034624540028,0.4454660245545332,1,0.4965935671937616,0.8372034624540028,0.4454660245545332,1,0.1689598034578934,0.5644299728822628,0.32510601357524305,1,0.8389958115996887,0.2798377285706082,0.2113661353782852,1],"scaleFactor":1.48,"scaleFactorX":0,"scaleFactorY":0},{"type":"rectangle","locationArr":[0,0,0,124.61458206176758,437.82916412353495,124.61458206176758,437.82916412353495,124.61458206176758,437.82916412353495,0,0,0],"translationArr":[112,191],"rotation":[0,1],"color":[0.2939279714971894,0.6626058452029446,0.5492123877757804,1,0.38679352693239033,0.6645943251194597,0.664968179125953,1,0.25972882024523547,0.8322793530951034,0.7571089671627917,1,0.25972882024523547,0.8322793530951034,0.7571089671627917,1,0.12035656443569964,0.8674796824582045,0.6577415954038102,1,0.2939279714971894,0.6626058452029446,0.5492123877757804,1],"scaleFactor":0,"scaleFactorX":9.43,"scaleFactorY":0}]