From 2a1449ff2fd89a76c43751e1cbe7d1e78b734355 Mon Sep 17 00:00:00 2001 From: Lani Aung Date: Sun, 11 Feb 2024 17:16:49 -0700 Subject: [PATCH] Close --- Scripts/play.ts | 54 +++++++++++++++++++++++++++++++++++++++++++--- wwwroot/js/main.js | 2 +- 2 files changed, 52 insertions(+), 4 deletions(-) diff --git a/Scripts/play.ts b/Scripts/play.ts index ed0b17b..81b3a98 100644 --- a/Scripts/play.ts +++ b/Scripts/play.ts @@ -9,6 +9,7 @@ export class PlaySpace { constructor(model: Playset) { const container = $(".container"); this.canvas = new fabric.Canvas("play_space"); + this.canvas.selection = false; this.canvas.setHeight(container.height()).setWidth(container.width()); this.model = model; this.selectSet(); @@ -19,6 +20,11 @@ export class PlaySpace { }); this.canvas.setZoom(this.canvas.width / model.width); + + this.canvas.on("mouse:down", event => { + if (!event.target) return; + console.log(event.target); + }); } async selectSet(set?: number) { @@ -32,8 +38,8 @@ export class PlaySpace { this.canvas.clear(); if (this.model.borderColor) this.canvas.backgroundColor = this.model.borderColor; - const cels = this.model.cels.filter(x => x.initialPositions[set]); - for (let cel of cels) { + const celGroups: { [key: number]: fabric.Image[] } = {}; + for (let cel of this.model.cels.filter(x => x.initialPositions[set])) { const image = await new Promise(resolve => { fabric.Image.fromURL(cel.image, image => resolve(image)); }); @@ -41,9 +47,51 @@ export class PlaySpace { image.set({ left: cel.initialPositions[set].x + cel.offset.x, top: cel.initialPositions[set].y + cel.offset.y, - selectable: cel.fix == 0 + selectable: cel.fix == 0, + hoverCursor: "default", + hasControls: false, + lockRotation: true, + lockScalingX: true, + lockScalingY: true, + hasBorders: false }); this.canvas.add(image); + + if (!celGroups[cel.mark]) celGroups[cel.mark] = []; + celGroups[cel.mark].push(image); + } + + this.linkItems(celGroups); + } + + linkItems(groups: { [key: number]: fabric.Image[] }) { + for (let key in groups) { + const group = groups[key]; + const length = group.length; + if (length < 2) continue; + + const top = group.pop(); + if (!top.selectable) continue; + + top.set({hoverCursor: "move"}); + const transformMatrix = top.calcTransformMatrix(); + const invertedTransform = fabric.util.invertTransform(transformMatrix); + for (let item of group) { + (item as any)["relationship"] = fabric.util.multiplyTransformMatrices(invertedTransform, item.calcTransformMatrix()); + } + + top.on("moving", event => { + const currentTransform = top.calcTransformMatrix(); + for (let item of group) { + const relationship = (item as any).relationship; + if (!relationship) continue; + const transform = fabric.util.multiplyTransformMatrices(currentTransform, relationship); + const translation = fabric.util.qrDecompose(transform); + item.setPositionByOrigin(new fabric.Point(translation.translateX, translation.translateY), "center", "center"); + item.set(translation); + item.set({flipX: false, flipY: false}).setCoords(); + } + }); } } } diff --git a/wwwroot/js/main.js b/wwwroot/js/main.js index e97fd5f..3db7711 100644 --- a/wwwroot/js/main.js +++ b/wwwroot/js/main.js @@ -35,7 +35,7 @@ eval("var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!\n * jQ \*************************/ /***/ (function(module, exports, __webpack_require__) { -eval("var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\n!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports], __WEBPACK_AMD_DEFINE_RESULT__ = (function (require, exports) {\n \"use strict\";\n Object.defineProperty(exports, \"__esModule\", ({ value: true }));\n}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\"), __webpack_require__(/*! fabric */ \"./node_modules/fabric/dist/fabric.js\")], __WEBPACK_AMD_DEFINE_RESULT__ = (function (require, exports, $, fabric_1) {\n \"use strict\";\n Object.defineProperty(exports, \"__esModule\", ({ value: true }));\n exports.PlaySpace = void 0;\n var PlaySpace = (function () {\n function PlaySpace(model) {\n var _this = this;\n var container = $(\".container\");\n this.canvas = new fabric_1.fabric.Canvas(\"play_space\");\n this.canvas.setHeight(container.height()).setWidth(container.width());\n this.model = model;\n this.selectSet();\n $(\".set-link\").on(\"click\", function (event) {\n var set = parseInt($(event.target).attr(\"data-set\"));\n _this.selectSet(set);\n });\n this.canvas.setZoom(this.canvas.width / model.width);\n }\n PlaySpace.prototype.selectSet = function (set) {\n return __awaiter(this, void 0, void 0, function () {\n var cels, _loop_1, this_1, _i, cels_1, cel;\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n if (!set) {\n set = this.model.sets.indexOf(true);\n }\n $(\".set-link\").removeClass(\"active\");\n $(\".set-link[data-set=\".concat(set, \"]\")).addClass(\"active\");\n this.canvas.clear();\n if (this.model.borderColor)\n this.canvas.backgroundColor = this.model.borderColor;\n cels = this.model.cels.filter(function (x) { return x.initialPositions[set]; });\n _loop_1 = function (cel) {\n var image;\n return __generator(this, function (_b) {\n switch (_b.label) {\n case 0: return [4, new Promise(function (resolve) {\n fabric_1.fabric.Image.fromURL(cel.image, function (image) { return resolve(image); });\n })];\n case 1:\n image = _b.sent();\n image.set({\n left: cel.initialPositions[set].x + cel.offset.x,\n top: cel.initialPositions[set].y + cel.offset.y,\n selectable: cel.fix == 0\n });\n this_1.canvas.add(image);\n return [2];\n }\n });\n };\n this_1 = this;\n _i = 0, cels_1 = cels;\n _a.label = 1;\n case 1:\n if (!(_i < cels_1.length)) return [3, 4];\n cel = cels_1[_i];\n return [5, _loop_1(cel)];\n case 2:\n _a.sent();\n _a.label = 3;\n case 3:\n _i++;\n return [3, 1];\n case 4: return [2];\n }\n });\n });\n };\n return PlaySpace;\n }());\n exports.PlaySpace = PlaySpace;\n $(function () {\n new PlaySpace(window.playSet);\n });\n}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\n\n//# sourceURL=webpack:///./Scripts/play.ts?"); +eval("var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nvar __generator = (this && this.__generator) || function (thisArg, body) {\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\n function verb(n) { return function (v) { return step([n, v]); }; }\n function step(op) {\n if (f) throw new TypeError(\"Generator is already executing.\");\n while (g && (g = 0, op[0] && (_ = 0)), _) try {\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] || ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\n if (y = 0, t) op = [op[0] & 2, t.value];\n switch (op[0]) {\n case 0: case 1: t = op; break;\n case 4: _.label++; return { value: op[1], done: false };\n case 5: _.label++; y = op[1]; op = [0]; continue;\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\n default:\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\n if (t[2]) _.ops.pop();\n _.trys.pop(); continue;\n }\n op = body.call(thisArg, _);\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\n }\n};\n!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports], __WEBPACK_AMD_DEFINE_RESULT__ = (function (require, exports) {\n \"use strict\";\n Object.defineProperty(exports, \"__esModule\", ({ value: true }));\n}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports, __webpack_require__(/*! jquery */ \"./node_modules/jquery/dist/jquery.js\"), __webpack_require__(/*! fabric */ \"./node_modules/fabric/dist/fabric.js\")], __WEBPACK_AMD_DEFINE_RESULT__ = (function (require, exports, $, fabric_1) {\n \"use strict\";\n Object.defineProperty(exports, \"__esModule\", ({ value: true }));\n exports.PlaySpace = void 0;\n var PlaySpace = (function () {\n function PlaySpace(model) {\n var _this = this;\n var container = $(\".container\");\n this.canvas = new fabric_1.fabric.Canvas(\"play_space\");\n this.canvas.selection = false;\n this.canvas.setHeight(container.height()).setWidth(container.width());\n this.model = model;\n this.selectSet();\n $(\".set-link\").on(\"click\", function (event) {\n var set = parseInt($(event.target).attr(\"data-set\"));\n _this.selectSet(set);\n });\n this.canvas.setZoom(this.canvas.width / model.width);\n this.canvas.on(\"mouse:down\", function (event) {\n if (!event.target)\n return;\n console.log(event.target);\n });\n }\n PlaySpace.prototype.selectSet = function (set) {\n return __awaiter(this, void 0, void 0, function () {\n var celGroups, _loop_1, this_1, _i, _a, cel;\n return __generator(this, function (_b) {\n switch (_b.label) {\n case 0:\n if (!set) {\n set = this.model.sets.indexOf(true);\n }\n $(\".set-link\").removeClass(\"active\");\n $(\".set-link[data-set=\".concat(set, \"]\")).addClass(\"active\");\n this.canvas.clear();\n if (this.model.borderColor)\n this.canvas.backgroundColor = this.model.borderColor;\n celGroups = {};\n _loop_1 = function (cel) {\n var image;\n return __generator(this, function (_c) {\n switch (_c.label) {\n case 0: return [4, new Promise(function (resolve) {\n fabric_1.fabric.Image.fromURL(cel.image, function (image) { return resolve(image); });\n })];\n case 1:\n image = _c.sent();\n image.set({\n left: cel.initialPositions[set].x + cel.offset.x,\n top: cel.initialPositions[set].y + cel.offset.y,\n selectable: cel.fix == 0,\n hoverCursor: \"default\",\n hasControls: false,\n lockRotation: true,\n lockScalingX: true,\n lockScalingY: true,\n hasBorders: false\n });\n this_1.canvas.add(image);\n if (!celGroups[cel.mark])\n celGroups[cel.mark] = [];\n celGroups[cel.mark].push(image);\n return [2];\n }\n });\n };\n this_1 = this;\n _i = 0, _a = this.model.cels.filter(function (x) { return x.initialPositions[set]; });\n _b.label = 1;\n case 1:\n if (!(_i < _a.length)) return [3, 4];\n cel = _a[_i];\n return [5, _loop_1(cel)];\n case 2:\n _b.sent();\n _b.label = 3;\n case 3:\n _i++;\n return [3, 1];\n case 4:\n this.linkItems(celGroups);\n return [2];\n }\n });\n });\n };\n PlaySpace.prototype.linkItems = function (groups) {\n var _loop_2 = function (key) {\n var group = groups[key];\n var length_1 = group.length;\n if (length_1 < 2)\n return \"continue\";\n var top_1 = group.pop();\n if (!top_1.selectable)\n return \"continue\";\n top_1.set({ hoverCursor: \"move\" });\n var transformMatrix = top_1.calcTransformMatrix();\n var invertedTransform = fabric_1.fabric.util.invertTransform(transformMatrix);\n for (var _i = 0, group_1 = group; _i < group_1.length; _i++) {\n var item = group_1[_i];\n item[\"relationship\"] = fabric_1.fabric.util.multiplyTransformMatrices(invertedTransform, item.calcTransformMatrix());\n }\n top_1.on(\"moving\", function (event) {\n var currentTransform = top_1.calcTransformMatrix();\n for (var _i = 0, group_2 = group; _i < group_2.length; _i++) {\n var item = group_2[_i];\n var relationship = item.relationship;\n if (!relationship)\n continue;\n var transform = fabric_1.fabric.util.multiplyTransformMatrices(currentTransform, relationship);\n var translation = fabric_1.fabric.util.qrDecompose(transform);\n item.setPositionByOrigin(new fabric_1.fabric.Point(translation.translateX, translation.translateY), \"center\", \"center\");\n item.set(translation);\n item.set({ flipX: false, flipY: false }).setCoords();\n }\n });\n };\n for (var key in groups) {\n _loop_2(key);\n }\n };\n return PlaySpace;\n }());\n exports.PlaySpace = PlaySpace;\n $(function () {\n new PlaySpace(window.playSet);\n });\n}).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),\n\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\n\n//# sourceURL=webpack:///./Scripts/play.ts?"); /***/ }),