Skip to content

Commit 807f9fe

Browse files
mustafacagrimustafacagri
committed
Initial commit
0 parents  commit 807f9fe

33 files changed

+4438
-0
lines changed

‎.gitattributes

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto

‎.github/workflows/firebase-hosting-merge.yml

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: Deploy to Firebase Hosting on merge
2+
on:
3+
push:
4+
branches:
5+
- main
6+
jobs:
7+
build_and_deploy:
8+
runs-on: ubuntu-latest
9+
steps:
10+
- uses: actions/checkout@v4
11+
- name: Enable Corepack
12+
run: corepack enable
13+
- name: Install dependencies with Yarn
14+
run: yarn install
15+
- name: Build the project
16+
run: yarn build
17+
- uses: FirebaseExtended/action-hosting-deploy@v0
18+
with:
19+
repoToken: ${{ secrets.GITHUB_TOKEN }}
20+
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_REACT_THREEJS_EASELJS }}
21+
channelId: live
22+
projectId: react-threejs-easeljs

‎.github/workflows/firebase-hosting-pull-request.yml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# This file was auto-generated by the Firebase CLI
2+
# https://github.com/firebase/firebase-tools
3+
4+
name: Deploy to Firebase Hosting on PR
5+
on: pull_request
6+
permissions:
7+
checks: write
8+
contents: read
9+
pull-requests: write
10+
jobs:
11+
build_and_preview:
12+
if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
13+
runs-on: ubuntu-latest
14+
steps:
15+
- uses: actions/checkout@v4
16+
- uses: FirebaseExtended/action-hosting-deploy@v0
17+
with:
18+
repoToken: ${{ secrets.GITHUB_TOKEN }}
19+
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_REACT_THREEJS_EASELJS }}
20+
projectId: react-threejs-easeljs

‎.gitignore

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
.firebaserc
26+
/.firebase
27+
.yarn/install-state.gz
28+
tsconfig.app.tsbuildinfo
29+
tsconfig.node.tsbuildinfo
30+
tsconfig.tsbuildinfo

‎.prettierrc.json

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"arrowParens": "avoid",
3+
"bracketSpacing": true,
4+
"htmlWhitespaceSensitivity": "css",
5+
"insertPragma": false,
6+
"jsxBracketSameLine": false,
7+
"jsxSingleQuote": true,
8+
"printWidth": 120,
9+
"proseWrap": "preserve",
10+
"quoteProps": "as-needed",
11+
"requirePragma": false,
12+
"semi": false,
13+
"singleQuote": true,
14+
"tabWidth": 2,
15+
"useTabs": false,
16+
"vueIndentScriptAndStyle": false,
17+
"endOfLine": "lf",
18+
"singleAttributePerLine": true
19+
}

‎.yarnrc.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodeLinker: node-modules

‎README.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# 🌟 React - ThreeJS - EaselJS Drawing App 🎨
2+
3+
Welcome to the **React-ThreeJS EaselJS Drawing App** – a powerful tool for creating 2D and 3D visualizations! This app covers you whether you're looking to draw, manipulate shapes, or view objects in a 3D scene. Let's unleash your creativity! 🌐✨ This is the perfect boilerplate to kickstart your drawing projects with React, ThreeJS, and EaselJS! 🚀
4+
5+
## 🎯 Key Features
6+
7+
- 🎨 **Draw Shapes:** Draw rectangles, circles, lines, and custom paths effortlessly with a click-and-drag interface.
8+
- ✋ **Shape Manipulation:** Move, drag, and delete shapes as needed. Shapes adjust in real time for a smooth experience!
9+
- 🌐 **3D Viewer:** Toggle between 2D and view-only 3D mode to see your drawings come to life in a new dimension.
10+
- 🎨 **Random Colors:** Each shape you create is assigned a random stroke and fill color.
11+
- ⚡ **Real-Time Updates:** Watch your canvas update instantly as you interact with shapes.
12+
- ⌨️ **Keyboard Support:** Delete selected shapes using the Delete or Backspace keys for quick editing.
13+
14+
## 🛠️ Tech Stack
15+
16+
This project is built using modern technologies:
17+
18+
- **React** ⚛️
19+
- **Three.js** 🌐
20+
- **EaselJS** 🎨
21+
- **Vite** ⚡
22+
- **Lodash** 🛠️
23+
- **TypeScript** 🔧
24+
- **Firebase** 🔥
25+
- **SonarCloud** 🧪
26+
27+
### 📦 Dependencies
28+
29+
The project relies on several key libraries:
30+
31+
**React:** A library for building user interfaces.
32+
**Three.js:** A powerful 3D engine for rendering the 3D view mode.
33+
**EaselJS:** A library for drawing and manipulating 2D shapes.
34+
**Vite:** A fast build tool for modern web development.
35+
**Lodash:** A utility library for working with arrays, objects, and more.
36+
37+
### 🚀 Getting Started
38+
39+
To start the project locally, fork the repo and follow these steps:
40+
41+
```
42+
1. 🍴 Fork the repository
43+
2. 📥 Clone your forked repository
44+
3. 🛠️ Run `yarn install` to install dependencies
45+
4. 🚀 Run `yarn dev` to start the local development server
46+
```
47+
48+
The app will run on http://localhost:5173.
49+
50+
### Expanding the ESLint configuration
51+
52+
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
53+
54+
- Configure the top-level `parserOptions` property like this:
55+
56+
```js
57+
export default tseslint.config({
58+
languageOptions: {
59+
// other options...
60+
parserOptions: {
61+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
62+
tsconfigRootDir: import.meta.dirname,
63+
},
64+
},
65+
})
66+
```
67+
68+
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
69+
- Optionally add `...tseslint.configs.stylisticTypeChecked`
70+
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
71+
72+
```js
73+
// eslint.config.js
74+
import react from 'eslint-plugin-react'
75+
76+
export default tseslint.config({
77+
// Set the react version
78+
settings: { react: { version: '18.3' } },
79+
plugins: {
80+
// Add the react plugin
81+
react,
82+
},
83+
rules: {
84+
// other rules...
85+
// Enable its recommended rules
86+
...react.configs.recommended.rules,
87+
...react.configs['jsx-runtime'].rules,
88+
},
89+
})
90+
```
91+
92+
### 👾 How can I contribute?
93+
94+
- ⭐ Star the repository
95+
- 🛠️ Submit pull requests, report bugs, or suggest features
96+
97+
### 📬 Get in Touch
98+
99+
Feel free to reach out if you have any questions or need help:
100+
101+
- **GitHub:** https://github.com/mustafacagri
102+
- **Linkedin:** [@MustafaCagri](https://www.linkedin.com/in/mustafacagri/)
103+
104+
Made with ❤️ in 📍 Istanbul, using React ⚛️, Three.js 🌐, EaselJS 🎨, TypeScript 🔧, Vite ⚡, and Lodash 🛠️!

‎eslint.config.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
23+
},
24+
}
25+
)

‎firebase.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"hosting": {
3+
"public": "dist",
4+
"ignore": [
5+
"firebase.json",
6+
"**/.*",
7+
"**/node_modules/**"
8+
],
9+
"rewrites": [
10+
{
11+
"source": "**",
12+
"destination": "/index.html"
13+
}
14+
]
15+
}
16+
}

‎index.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link
6+
rel="icon"
7+
type="image/svg+xml"
8+
href="/vite.svg"
9+
/>
10+
<meta
11+
name="viewport"
12+
content="width=device-width, initial-scale=1.0"
13+
/>
14+
<title>Drawing APP With React + ThreeJS + EaselJS</title>
15+
<script src="https://cdn.tailwindcss.com"></script>
16+
<link
17+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
18+
rel="stylesheet"
19+
/>
20+
</head>
21+
<body>
22+
<div id="root"></div>
23+
<script
24+
type="module"
25+
src="/src/main.tsx"
26+
></script>
27+
</body>
28+
</html>

‎package.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "react-threejs-easeljs-drawing-app",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"lint": "eslint .",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@createjs/easeljs": "^2.0.0-beta.4",
14+
"lodash": "^4.17.21",
15+
"react": "^18.3.1",
16+
"react-dom": "^18.3.1",
17+
"three": "^0.169.0"
18+
},
19+
"devDependencies": {
20+
"@eslint/js": "^9.11.1",
21+
"@types/easeljs": "^1",
22+
"@types/lodash": "^4.17.10",
23+
"@types/react": "^18.3.11",
24+
"@types/react-dom": "^18.3.1",
25+
"@types/three": "^0.169.0",
26+
"@vitejs/plugin-react": "^4.3.2",
27+
"eslint": "^9.11.1",
28+
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
29+
"eslint-plugin-react-refresh": "^0.4.12",
30+
"globals": "^15.9.0",
31+
"typescript": "^5.5.3",
32+
"typescript-eslint": "^8.7.0",
33+
"vite": "^5.4.8"
34+
},
35+
"packageManager": "[email protected]+sha512.91d93b445d9284e7ed52931369bc89a663414e5582d00eea45c67ddc459a2582919eece27c412d6ffd1bd0793ff35399381cb229326b961798ce4f4cc60ddfdb"
36+
}

‎public/vite.svg

Lines changed: 1 addition & 0 deletions
Loading

‎src/@types/easeljs.d.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// src/@types/easeljs.d.ts
2+
import { Shape as CustomShape } from '../interfaces'
3+
4+
declare module '@createjs/easeljs' {
5+
export class Stage {
6+
constructor(canvas: HTMLCanvasElement)
7+
addChild(shape: CustomShape | Shape): void
8+
enableMouseOver(): void
9+
removeAllChildren(): void
10+
clear(): void
11+
removeChild(selectedShape: CustomShape | Shape): void
12+
update(): void
13+
children: Shape[]
14+
getObjectsUnderPoint(x: number, y: number, mode?: number): Shape[]
15+
}
16+
17+
export class Shape {
18+
x: number
19+
y: number
20+
offset: { x: number; y: number }
21+
id: number
22+
graphics: Graphics
23+
constructor()
24+
on(event: string, handler: (this: Shape, evt: { stageX: number; stageY: number }) => void): void
25+
}
26+
27+
export class Graphics {
28+
beginFill(color: string): Graphics
29+
beginStroke(color: string): Graphics
30+
setStrokeStyle(thickness: number): Graphics
31+
drawRect(x: number, y: number, width: number, height: number): Graphics
32+
drawCircle(x: number, y: number, radius: number): Graphics
33+
moveTo(x: number, y: number): Graphics
34+
lineTo(x: number, y: number): Graphics
35+
clear(): Graphics
36+
}
37+
38+
export class Ticker {
39+
static framerate: number
40+
static addEventListener(event: string, listener: (event: Event) => void): void
41+
static removeEventListener(event: string, listener: (event: Event) => void): void
42+
}
43+
}

‎src/@types/orbitControls.d.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
declare module 'three/examples/jsm/controls/OrbitControls' {
2+
import { EventDispatcher } from 'three'
3+
import { Camera } from 'three'
4+
import { HTMLElement } from 'three'
5+
6+
export class OrbitControls extends EventDispatcher {
7+
constructor(camera: Camera, domElement?: HTMLElement)
8+
9+
enableDamping: boolean // Add damping option
10+
dampingFactor: number // Damping factor for smooth movement
11+
enableZoom: boolean // Enable or disable zooming
12+
13+
update(): void
14+
}
15+
}

‎src/App.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#root {
2+
width: 100%;
3+
}

0 commit comments

Comments
 (0)