diff --git a/package-lock.json b/package-lock.json index 8aa7238..17dccc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "devDependencies": { + "@babel/plugin-proposal-class-properties": "^7.13.0", "@babel/preset-react": "^7.12.13", "babel-loader": "^8.2.2", "css-loader": "^5.1.3", @@ -31,7 +32,6 @@ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz", "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==", "dev": true, - "peer": true, "dependencies": { "@babel/highlight": "^7.12.13" } @@ -100,7 +100,6 @@ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.9.tgz", "integrity": "sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==", "dev": true, - "peer": true, "dependencies": { "@babel/types": "^7.13.0", "jsesc": "^2.5.1", @@ -112,7 +111,6 @@ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", "dev": true, - "peer": true, "engines": { "node": ">=0.10.0" } @@ -152,12 +150,27 @@ "semver": "bin/semver.js" } }, + "node_modules/@babel/helper-create-class-features-plugin": { + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz", + "integrity": "sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==", + "dev": true, + "dependencies": { + "@babel/helper-function-name": "^7.12.13", + "@babel/helper-member-expression-to-functions": "^7.13.0", + "@babel/helper-optimise-call-expression": "^7.12.13", + "@babel/helper-replace-supers": "^7.13.0", + "@babel/helper-split-export-declaration": "^7.12.13" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, "node_modules/@babel/helper-function-name": { "version": "7.12.13", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz", "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==", "dev": true, - "peer": true, "dependencies": { "@babel/helper-get-function-arity": "^7.12.13", "@babel/template": "^7.12.13", @@ -169,7 +182,6 @@ "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz", "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==", "dev": true, - "peer": true, "dependencies": { "@babel/types": "^7.12.13" } @@ -179,7 +191,6 @@ "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz", "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==", "dev": true, - "peer": true, "dependencies": { "@babel/types": "^7.13.12" } @@ -215,7 +226,6 @@ "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz", "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==", "dev": true, - "peer": true, "dependencies": { "@babel/types": "^7.12.13" } @@ -231,7 +241,6 @@ "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz", "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==", "dev": true, - "peer": true, "dependencies": { "@babel/helper-member-expression-to-functions": "^7.13.12", "@babel/helper-optimise-call-expression": "^7.12.13", @@ -254,7 +263,6 @@ "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz", "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==", "dev": true, - "peer": true, "dependencies": { "@babel/types": "^7.12.13" } @@ -289,7 +297,6 @@ "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.13.10.tgz", "integrity": "sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==", "dev": true, - "peer": true, "dependencies": { "@babel/helper-validator-identifier": "^7.12.11", "chalk": "^2.0.0", @@ -301,7 +308,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, - "peer": true, "dependencies": { "color-convert": "^1.9.0" }, @@ -314,7 +320,6 @@ "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "dev": true, - "peer": true, "dependencies": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -329,7 +334,6 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", "dev": true, - "peer": true, "dependencies": { "color-name": "1.1.3" } @@ -338,15 +342,13 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true, - "peer": true + "dev": true }, "node_modules/@babel/highlight/node_modules/has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "dev": true, - "peer": true, "engines": { "node": ">=4" } @@ -356,7 +358,6 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "dev": true, - "peer": true, "dependencies": { "has-flag": "^3.0.0" }, @@ -369,7 +370,6 @@ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.12.tgz", "integrity": "sha512-4T7Pb244rxH24yR116LAuJ+adxXXnHhZaLJjegJVKSdoNCe4x1eDBaud5YIcQFcqzsaD5BHvJw5BQ0AZapdCRw==", "dev": true, - "peer": true, "bin": { "parser": "bin/babel-parser.js" }, @@ -377,6 +377,19 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/plugin-proposal-class-properties": { + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.13.0.tgz", + "integrity": "sha512-KnTDjFNC1g+45ka0myZNvSBFLhNCLN+GeGYLDEA8Oq7MZ6yMgfLoIRh86GRT0FjtJhZw8JyUskP9uvj5pHM9Zg==", + "dev": true, + "dependencies": { + "@babel/helper-create-class-features-plugin": "^7.13.0", + "@babel/helper-plugin-utils": "^7.13.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-syntax-jsx": { "version": "7.12.13", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz", @@ -472,7 +485,6 @@ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz", "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==", "dev": true, - "peer": true, "dependencies": { "@babel/code-frame": "^7.12.13", "@babel/parser": "^7.12.13", @@ -484,7 +496,6 @@ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz", "integrity": "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==", "dev": true, - "peer": true, "dependencies": { "@babel/code-frame": "^7.12.13", "@babel/generator": "^7.13.0", @@ -2968,7 +2979,6 @@ "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", "dev": true, - "peer": true, "engines": { "node": ">=4" } @@ -3660,7 +3670,6 @@ "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", "dev": true, - "peer": true, "bin": { "jsesc": "bin/jsesc" }, @@ -7558,7 +7567,6 @@ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz", "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==", "dev": true, - "peer": true, "requires": { "@babel/highlight": "^7.12.13" } @@ -7616,7 +7624,6 @@ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.9.tgz", "integrity": "sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==", "dev": true, - "peer": true, "requires": { "@babel/types": "^7.13.0", "jsesc": "^2.5.1", @@ -7627,8 +7634,7 @@ "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true, - "peer": true + "dev": true } } }, @@ -7663,12 +7669,24 @@ } } }, + "@babel/helper-create-class-features-plugin": { + "version": "7.13.11", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz", + "integrity": "sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==", + "dev": true, + "requires": { + "@babel/helper-function-name": "^7.12.13", + "@babel/helper-member-expression-to-functions": "^7.13.0", + "@babel/helper-optimise-call-expression": "^7.12.13", + "@babel/helper-replace-supers": "^7.13.0", + "@babel/helper-split-export-declaration": "^7.12.13" + } + }, "@babel/helper-function-name": { "version": "7.12.13", "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz", "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==", "dev": true, - "peer": true, "requires": { "@babel/helper-get-function-arity": "^7.12.13", "@babel/template": "^7.12.13", @@ -7680,7 +7698,6 @@ "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz", "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==", "dev": true, - "peer": true, "requires": { "@babel/types": "^7.12.13" } @@ -7690,7 +7707,6 @@ "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz", "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==", "dev": true, - "peer": true, "requires": { "@babel/types": "^7.13.12" } @@ -7726,7 +7742,6 @@ "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz", "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==", "dev": true, - "peer": true, "requires": { "@babel/types": "^7.12.13" } @@ -7742,7 +7757,6 @@ "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz", "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==", "dev": true, - "peer": true, "requires": { "@babel/helper-member-expression-to-functions": "^7.13.12", "@babel/helper-optimise-call-expression": "^7.12.13", @@ -7765,7 +7779,6 @@ "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz", "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==", "dev": true, - "peer": true, "requires": { "@babel/types": "^7.12.13" } @@ -7800,7 +7813,6 @@ "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.13.10.tgz", "integrity": "sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==", "dev": true, - "peer": true, "requires": { "@babel/helper-validator-identifier": "^7.12.11", "chalk": "^2.0.0", @@ -7812,7 +7824,6 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, - "peer": true, "requires": { "color-convert": "^1.9.0" } @@ -7822,7 +7833,6 @@ "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "dev": true, - "peer": true, "requires": { "ansi-styles": "^3.2.1", "escape-string-regexp": "^1.0.5", @@ -7834,7 +7844,6 @@ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", "dev": true, - "peer": true, "requires": { "color-name": "1.1.3" } @@ -7843,22 +7852,19 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=", - "dev": true, - "peer": true + "dev": true }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true, - "peer": true + "dev": true }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "dev": true, - "peer": true, "requires": { "has-flag": "^3.0.0" } @@ -7869,8 +7875,17 @@ "version": "7.13.12", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.12.tgz", "integrity": "sha512-4T7Pb244rxH24yR116LAuJ+adxXXnHhZaLJjegJVKSdoNCe4x1eDBaud5YIcQFcqzsaD5BHvJw5BQ0AZapdCRw==", + "dev": true + }, + "@babel/plugin-proposal-class-properties": { + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.13.0.tgz", + "integrity": "sha512-KnTDjFNC1g+45ka0myZNvSBFLhNCLN+GeGYLDEA8Oq7MZ6yMgfLoIRh86GRT0FjtJhZw8JyUskP9uvj5pHM9Zg==", "dev": true, - "peer": true + "requires": { + "@babel/helper-create-class-features-plugin": "^7.13.0", + "@babel/helper-plugin-utils": "^7.13.0" + } }, "@babel/plugin-syntax-jsx": { "version": "7.12.13", @@ -7949,7 +7964,6 @@ "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz", "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==", "dev": true, - "peer": true, "requires": { "@babel/code-frame": "^7.12.13", "@babel/parser": "^7.12.13", @@ -7961,7 +7975,6 @@ "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz", "integrity": "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==", "dev": true, - "peer": true, "requires": { "@babel/code-frame": "^7.12.13", "@babel/generator": "^7.13.0", @@ -9974,8 +9987,7 @@ "version": "11.12.0", "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "dev": true, - "peer": true + "dev": true }, "globby": { "version": "6.1.0", @@ -10513,8 +10525,7 @@ "version": "2.5.2", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz", "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==", - "dev": true, - "peer": true + "dev": true }, "json-parse-better-errors": { "version": "1.0.2", diff --git a/package.json b/package.json index 889fead..097297f 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "deploy": "webpack --config webpack.prod.js && gh-pages -d dist -t true -m" }, "devDependencies": { + "@babel/plugin-proposal-class-properties": "^7.13.0", "@babel/preset-react": "^7.12.13", "babel-loader": "^8.2.2", "css-loader": "^5.1.3", diff --git a/src/Renderer.js b/src/Renderer.js index 0d224b5..0aed444 100644 --- a/src/Renderer.js +++ b/src/Renderer.js @@ -1,6 +1,6 @@ - + import * as THREE from 'three/src/Three'; // import { OrbitControls } from './utils/OrbitControls' import { TrackballControls } from './utils/trackball' @@ -8,6 +8,7 @@ import { Sketcher } from './sketcher/Sketcher' import Stats from './utils/stats.module.js'; import { add3DPoint } from './datums' +import {extrude} from './sketcher/extrude' @@ -114,6 +115,7 @@ export function Renderer(store) { this.render = render.bind(this) this.resizeCanvas = resizeCanvas.bind(this) this.addSketch = addSketch.bind(this) + this.extrude = extrude.bind(this) // this.waitPoint = waitPoint.bind(this) controls.addEventListener('change', this.render); @@ -163,16 +165,15 @@ async function addSketch() { - window.addEventListener('keydown', sketcher.onKeyPress) - this.canvas.addEventListener('pointerdown', sketcher.onPick) - this.canvas.addEventListener('pointermove', sketcher.onHover) + + sketcher.activate() sketcher.addEventListener('change', this.render); window.sketcher = sketcher this.render() - this.store.dispatch({ type: 'rx-new-sketch', idx: this.scene.children.length - 1 }) + this.store.dispatch({ type: 'rx-sketch', obj:sketcher }) } diff --git a/src/app.jsx b/src/app.jsx index 668b93a..4986660 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -14,7 +14,7 @@ export const Root = ({ store }) => ( const App = () => { const dispatch = useDispatch() - const sketches = useSelector(state => state.sketches) + const treeEntries = useSelector(state => state.treeEntries) return <> @@ -22,11 +22,16 @@ const App = () => { +
- {sketches.map((e, idx) => ( -
{e}
+ {treeEntries.allIds.map((entId, idx) => ( +
{ + renderInst.extrude(treeEntries.byId[entId]) + }} + >{entId}
))}
diff --git a/src/index.js b/src/index.js index 6758faa..de2b0cf 100644 --- a/src/index.js +++ b/src/index.js @@ -7,20 +7,58 @@ import { Root } from './app.jsx' import { createStore, applyMiddleware } from 'redux' import logger from 'redux-logger' - +let _entId = 0 function reducer(state = {}, action) { switch (action.type) { case 'toggle': return { ...state, toggle: action.payload } - case 'rx-new-sketch': - return { ...state, sketches: [...state.sketches, action.idx] } + case 'rx-sketch': + return { + ...state, treeEntries: { + byId: { ...state.treeEntries.byId, ['s' + ++_entId]: action.obj }, + allIds: [...state.treeEntries.allIds, 's' + _entId] + } + } + case 'rx-extrusion': + return { + ...state, + treeEntries: { + byId: { ...state.treeEntries.byId, ['e' + ++_entId]: action.obj }, + allIds: [...state.treeEntries.allIds, 'e' + _entId] + }, + mesh2sketch: { + ...state.mesh2sketch, + [action.skId]: _entId + } + } + case 'incsk': + return { ...state, id: _sketchID++ } default: return state } } -window.store = createStore(reducer, {sketches:[]}, applyMiddleware(logger)) + + + +const preloadedState = { + treeEntries: { + byId: { + // "s1": obj, + // "s1": obj2, + }, + allIds: [ + // 's1','m1' + ] + }, +} + + + + + +window.store = createStore(reducer, preloadedState, applyMiddleware(logger)) diff --git a/src/sketcher/Sketcher.js b/src/sketcher/Sketcher.js index ea43a67..e8e68e2 100644 --- a/src/sketcher/Sketcher.js +++ b/src/sketcher/Sketcher.js @@ -7,20 +7,14 @@ import { onHover, onDrag, onPick, onRelease } from './pickEvents' import { addDimension, setCoincident } from './constraintEvents' import { get3PtArc } from './sketchArc' import { extrude } from './extrude' +import {_vec2, _vec3, raycaster} from '../utils/static' -const lineMaterial = new THREE.LineBasicMaterial({ - linewidth: 2, - color: 0x555555, -}) -const pointMaterial = new THREE.PointsMaterial({ - color: 0x555555, - size: 4, -}) - class Sketcher extends THREE.Group { + + constructor(camera, domElement, store) { super() this.camera = camera; @@ -30,15 +24,10 @@ class Sketcher extends THREE.Group { this.sub = new THREE.Group(); this.add(this.sub); - - this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0); - this.sketchNormal = new THREE.Vector3(0, 0, 1) - - const axesHelper = new THREE.AxesHelper(2); this.sub.add(axesHelper); - + this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0); // [0]:x, [1]:y, [2]:z @@ -51,20 +40,15 @@ class Sketcher extends THREE.Group { this.l_id = 0; this.max_links = 1000 this.linksBuf = new Float32Array(this.max_links * 5).fill(NaN) - this.linkNum = { - 'line': 0, - 'arc': 1 - } + // [0]:type, [1]:val, [2]:pt1, [3]:pt2, [4]:lk1, [5]:lk2 this.constraints = new Map() this.c_id = 0; this.max_constraints = 1000 this.constraintsBuf = new Float32Array(this.max_constraints * 6).fill(NaN) - this.contraintNum = { - 'coincident': 0, - 'distance': 1 - } + + this.drawOnClick1 = drawOnClick1.bind(this); @@ -75,40 +59,35 @@ class Sketcher extends THREE.Group { this.onPick = onPick.bind(this); this.onDrag = onDrag.bind(this); this.onRelease = onRelease.bind(this); - this.onKeyPress = this.onKeyPress.bind(this); - // window.addEventListener('keydown', this.onKeyPress) - // domElement.addEventListener('pointerdown', this.onPick) - // domElement.addEventListener('pointermove', this.onHover) - this.raycaster = new THREE.Raycaster(); - this.raycaster.params.Line.threshold = 0.8; - this.raycaster.params.Points.threshold = 1.5; + this.matrixAutoUpdate=false; + this.selected = new Set() this.hovered = [] this.mode = "" this.subsequent = false; - this.target = new THREE.Vector3(); } + activate() { + window.addEventListener('keydown', this.onKeyPress) + this.domElement.addEventListener('pointerdown', this.onPick) + this.domElement.addEventListener('pointermove', this.onHover) + } + + align(origin, x_dir, y_dir) { // this.updateWorldMatrix(true, false); - const up = new THREE.Vector3().subVectors(y_dir, origin).normalize(); - const _m1 = new THREE.Matrix4() - const te = _m1.elements; - const _x = new THREE.Vector3().subVectors(x_dir, origin).normalize(); - const _z = new THREE.Vector3().crossVectors(_x, up).normalize(); - const _y = new THREE.Vector3().crossVectors(_z, _x); te[0] = _x.x; te[4] = _y.x; te[8] = _z.x; @@ -116,7 +95,6 @@ class Sketcher extends THREE.Group { te[2] = _x.z; te[6] = _y.z; te[10] = _z.z; this.quaternion.setFromRotationMatrix(_m1); - const parent = this.parent; _m1.extractRotation(parent.matrixWorld); const _q1 = new THREE.Quaternion().setFromRotationMatrix(_m1); @@ -124,11 +102,8 @@ class Sketcher extends THREE.Group { this.updateMatrix(); this.matrix.setPosition(origin) - this.plane.applyMatrix4(this.matrix) - this.inverse = this.matrix.clone().invert() - } @@ -175,8 +150,6 @@ class Sketcher extends THREE.Group { } } - - deleteSelected() { let minI = this.children.length; @@ -205,7 +178,7 @@ class Sketcher extends THREE.Group { for (let [key, obj] of this.constraints) { this.constraintsBuf.set( [ - this.contraintNum[obj[0]], obj[1], + this.constraintNum[obj[0]], obj[1], ...obj[2].map(ele => this.objIdx.get(ele.id) ?? -1), ], (i) * 6 @@ -261,23 +234,20 @@ class Sketcher extends THREE.Group { } } - getLocation(e) { - this.raycaster.setFromCamera( - new THREE.Vector2( + raycaster.setFromCamera( + _vec2.set( (e.clientX / window.innerWidth) * 2 - 1, - (e.clientY / window.innerHeight) * 2 + 1 ), this.camera ); - this.raycaster.ray.intersectPlane(this.plane, this.target).applyMatrix4(this.inverse) + raycaster.ray.intersectPlane(this.plane, _vec3).applyMatrix4(this.inverse) - return this.target.toArray() + return _vec3.toArray() } - - solve() { const pts_buffer = @@ -350,4 +320,19 @@ class Sketcher extends THREE.Group { -export { Sketcher, lineMaterial, pointMaterial } \ No newline at end of file +Object.assign(Sketcher.prototype, + { + linkNum: { + 'line': 0, + 'arc': 1 + }, + constraintNum: { + 'coincident': 0, + 'distance': 1 + }, + } +) + + + +export { Sketcher } \ No newline at end of file diff --git a/src/sketcher/extrude.js b/src/sketcher/extrude.js index 85cd7ea..d67b73b 100644 --- a/src/sketcher/extrude.js +++ b/src/sketcher/extrude.js @@ -1,12 +1,10 @@ import * as THREE from '../../node_modules/three/src/Three'; +import {pointMaterial} from '../utils/static' +export function extrude(sketch) { -export function extrude() { - - - - let constraints = this.constraints; - let linkedObjs = this.linkedObjs; - let children = this.children; + let constraints = sketch.constraints; + let linkedObjs = sketch.linkedObjs; + let children = sketch.children; let visited = new Set() let v2s = [] @@ -55,44 +53,27 @@ export function extrude() { findPair(children[1]) const shape = new THREE.Shape(v2s); - const extrudeSettings = { depth: 8, bevelEnabled: false }; - const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings); - const phong = new THREE.MeshPhongMaterial({ color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true }); - const mesh = new THREE.Mesh(geometry, phong); + const mesh = new THREE.Mesh(geometry, phong) + // mesh.applyMatrix4(sketch.inverse) + // mesh.matrix.premultiply(sketch.matrix).multiply(sketch.inverse) + mesh.matrixAutoUpdate = false; + mesh.matrix.multiply(sketch.matrix) + this.scene.add(mesh) const wireframe = new THREE.WireframeGeometry(geometry); - - - - const pointMaterial = new THREE.PointsMaterial({ - color: 0x555555, - size: 4, - }) - - - - const pts = new THREE.Points(wireframe, pointMaterial); - this.add(pts) + pts.matrixAutoUpdate = false; + pts.matrix.multiply(sketch.matrix) + this.scene.add(pts) + this.render() - - // const line = new THREE.LineSegments( wireframe ); - // line.material.depthTest = true; - // line.material.linewidth = 4; - - // line.material.opacity = 0.25; - // // line.material.transparent = true; - // line.material.transparent = false; - // this.add(line) - - this.add(mesh) - this.dispatchEvent({ type: 'change' }) + // this.dispatchEvent({ type: 'change' }) // this.visible = false } diff --git a/src/sketcher/pickEvents (copy).js b/src/sketcher/pickEvents (copy).js deleted file mode 100644 index b2497b4..0000000 --- a/src/sketcher/pickEvents (copy).js +++ /dev/null @@ -1,120 +0,0 @@ -import * as THREE from '../../node_modules/three/src/Three'; - -export function onHover(e) { - if (this.mode || e.buttons) return - - this.raycaster.setFromCamera( - new THREE.Vector2( - (e.clientX / window.innerWidth) * 2 - 1, - - (e.clientY / window.innerHeight) * 2 + 1 - ), - this.camera - ); - - const hoverPts = this.raycaster.intersectObjects(this.children) - - let idx = [] - if (hoverPts.length) { - let minDist = Infinity; - for (let i = 0; i < hoverPts.length; i++) { - if (!hoverPts[i].distanceToRay) continue; - if (hoverPts[i].distanceToRay < minDist) { - minDist = hoverPts[i].distanceToRay - idx = [i] - } else if (hoverPts[i].distanceToRay == minDist) { - idx.push(i) - } - } - if (!idx.length) idx.push(0) - } - - if (idx.length) { - console.log(idx) - if (hoverPts[idx[0]].object != this.hovered[0]) { - - for (let x = 0; x < this.hovered.length; x++) { - const obj = this.hovered[x] - if (obj && !this.selected.has(obj)) { - obj.material.color.set(0x555555) - } - } - this.hovered = [] - - console.log(idx.length) - for (let x = 0; x < idx.length; x++) { - const i = idx[x] - hoverPts[i].object.material.color.set(0x00ff00) - this.hovered.push(hoverPts[i].object) - } - - // console.log('render1') - this.dispatchEvent({ type: 'change' }) - } - } else { - if (this.hovered.length) { - - for (let x = 0; x < this.hovered.length; x++) { - const obj = this.hovered[x] - if (obj && !this.selected.has(obj)) { - obj.material.color.set(0x555555) - } - } - this.hovered = [] - - // console.log('render2') - this.dispatchEvent({ type: 'change' }) - } - } -} - - -export function onPick(e) { - if (this.mode || e.buttons != 1) return - - if (this.hovered.length) { - - for (let x = 0; x < this.hovered.length; x++) { - const obj = this.hovered[x] - this.selected.add(obj) - } - - if (this.hovered[0].type == "Points") { - this.domElement.addEventListener('pointermove', this.onDrag); - this.domElement.addEventListener('pointerup', this.onRelease) - } - } else { - for (let obj of this.selected) { - obj.material.color.set(0x555555) - } - this.dispatchEvent({ type: 'change' }) - this.selected.clear() - } -} - -export function onDrag(e) { - const mouseLoc = this.getLocation(e); - - for (let x = 0; x < this.hovered.length; x++) { - const obj = this.hovered[x] - this.ptsBuf.set( - mouseLoc, - this.objIdx.get(obj.id) * 3 - ) - } - - this.solve() - this.dispatchEvent({ type: 'change' }) -} - - -export function onRelease() { - this.domElement.removeEventListener('pointermove', this.onDrag) - this.domElement.removeEventListener('pointerup', this.onRelease) - - for (let x = 0; x < this.hovered.length; x++) { - const obj = this.hovered[x] - obj.geometry.computeBoundingSphere() - } - -} - diff --git a/src/sketcher/pickEvents.js b/src/sketcher/pickEvents.js index 1669435..3c7c669 100644 --- a/src/sketcher/pickEvents.js +++ b/src/sketcher/pickEvents.js @@ -1,9 +1,10 @@ import * as THREE from '../../node_modules/three/src/Three'; +import {raycaster} from '../utils/static'; export function onHover(e) { if (this.mode || e.buttons) return - this.raycaster.setFromCamera( + raycaster.setFromCamera( new THREE.Vector2( (e.clientX / window.innerWidth) * 2 - 1, - (e.clientY / window.innerHeight) * 2 + 1 @@ -11,7 +12,7 @@ export function onHover(e) { this.camera ); - const hoverPts = this.raycaster.intersectObjects(this.children) + const hoverPts = raycaster.intersectObjects(this.children) let idx = [] if (hoverPts.length) { diff --git a/src/sketcher/sketchArc.js b/src/sketcher/sketchArc.js index e1b198c..50f2892 100644 --- a/src/sketcher/sketchArc.js +++ b/src/sketcher/sketchArc.js @@ -1,6 +1,6 @@ import * as THREE from '../../node_modules/three/src/Three'; -import {lineMaterial, pointMaterial} from './Sketcher' +import {lineMaterial, pointMaterial} from '../utils/static' export function sketchArc(mouseLoc) { const p1Geom = new THREE.BufferGeometry().setAttribute('position', diff --git a/src/sketcher/sketchLine.js b/src/sketcher/sketchLine.js index 72b4cef..e6cc767 100644 --- a/src/sketcher/sketchLine.js +++ b/src/sketcher/sketchLine.js @@ -1,5 +1,5 @@ import * as THREE from '../../node_modules/three/src/Three'; -import {lineMaterial, pointMaterial} from './Sketcher' +import {lineMaterial, pointMaterial} from '../utils/static' export function sketchLine(mouseLoc) { diff --git a/src/utils/static.js b/src/utils/static.js new file mode 100644 index 0000000..14479c3 --- /dev/null +++ b/src/utils/static.js @@ -0,0 +1,23 @@ +import * as THREE from '../../node_modules/three/src/Three'; + +const lineMaterial = new THREE.LineBasicMaterial({ + linewidth: 2, + color: 0x555555, +}) + + +const pointMaterial = new THREE.PointsMaterial({ + color: 0x555555, + size: 4, +}) + +const _vec2 = new THREE.Vector2() +const _vec3 = new THREE.Vector3() + + +const raycaster = new THREE.Raycaster(); +raycaster.params.Line.threshold = 0.8; +raycaster.params.Points.threshold = 1.5; + + +export { lineMaterial, pointMaterial, _vec2, _vec3, raycaster } \ No newline at end of file diff --git a/webpack.common.js b/webpack.common.js index 3b4363a..177c6c2 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -1,18 +1,7 @@ const path = require('path'); module.exports = { - entry: './src/index.js', - - - output: { - filename: 'bundle.js', - path: path.resolve(__dirname, 'dist'), - // clean: true, - }, - - entry: { - redux: './src/redux.js', index: './src/index.js', renderer: './src/Renderer.js', }, @@ -20,9 +9,6 @@ module.exports = { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist'), }, - - - module: { rules: [ { @@ -43,6 +29,7 @@ module.exports = { loader: 'babel-loader', options: { presets: ["@babel/preset-react"], + plugins: ["@babel/plugin-proposal-class-properties"] } } },