{"id":16614241,"url":"https://github.com/biud436/initialeditor","last_synced_at":"2025-07-18T15:37:41.636Z","repository":{"id":43382738,"uuid":"294916739","full_name":"biud436/InitialEditor","owner":"biud436","description":"자체 개발한 2D 게임 엔진의 맵을 편집할 수 있게 해주는 웹 기반 맵 에디터(Tilemap Editor)입니다.","archived":false,"fork":false,"pushed_at":"2025-06-14T09:54:49.000Z","size":48820,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-14T10:34:56.690Z","etag":null,"topics":["react","tilemap","tilemap-editor","typescript"],"latest_commit_sha":null,"homepage":"https://initial-editor.biud436.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/biud436.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"biud436"}},"created_at":"2020-09-12T10:00:22.000Z","updated_at":"2025-06-14T09:54:53.000Z","dependencies_parsed_at":"2023-10-15T08:40:00.031Z","dependency_job_id":"7370f228-8396-4b13-a0f9-d1e5db2ff6fc","html_url":"https://github.com/biud436/InitialEditor","commit_stats":{"total_commits":309,"total_committers":1,"mean_commits":309.0,"dds":0.0,"last_synced_commit":"373415ab75825134ef214be381419d1f3e26d7bd"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/biud436/InitialEditor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biud436%2FInitialEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biud436%2FInitialEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biud436%2FInitialEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biud436%2FInitialEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/biud436","download_url":"https://codeload.github.com/biud436/InitialEditor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/biud436%2FInitialEditor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265787027,"owners_count":23828364,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","tilemap","tilemap-editor","typescript"],"created_at":"2024-10-12T02:05:18.061Z","updated_at":"2025-07-18T15:37:41.605Z","avatar_url":"https://github.com/biud436.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n![LOGO](https://repository-images.githubusercontent.com/294916739/2f3b679c-ef74-43a7-9d9d-9c08982e3db1)\n\n![typescript](https://img.shields.io/badge/typescript-5.2.2-green.svg?logo=typescript\u0026style=for-the-badge)\n![react](https://img.shields.io/badge/react-18.2.0-green.svg?logo=react\u0026style=for-the-badge)\n![pixi.js](https://img.shields.io/badge/pixi.js-7.3.1-green.svg?logo=pixi.js\u0026style=for-the-badge)\n\n\u003c/div\u003e\n\n# Introduction\n\nThis project allows you to edit multi dimensional tile map on my own game engine. it is worked fine on any platforms such as Linux Desktop, OSX, Windows and so on.\n\n## Tilemap\n\n![IMG](./packages/initial-editor/editor.png)\n\n## Child Window\n\n\u003cimg width=\"1392\" alt=\"image\" src=\"https://user-images.githubusercontent.com/13586185/189561657-2fb02462-0f7e-47ab-bc35-dab68e3a395f.png\"\u003e\n\n# Usage\n\n## Menu Commands\n\nThis stuff is written in a TypeScript. if you want to make a new menu command into the editor, you can add a new command into the `packages/menu/commands` directory, this editor can collect a decorator called `@OnMenuClick('menu-command-key')` and can execute a mapped action to its decorator.\n\n```ts\nimport { MenuCommand } from \"../../decorators/MenuCommand\";\nimport { OnMenuClick } from \"../../decorators/OnMenuClick\";\nimport { IBaseMenuCommand } from \"./IBaseMenuCommand\";\n\n@MenuCommand(\"file\", \"file-new\", \"새로 만들기\", [\"ctrl\", \"n\"])\nexport class NewFileCommand implements IBaseMenuCommand {\n  @OnMenuClick(\"file-new\")\n  action(ev: any) {\n    if (window.app) {\n      window.app.emit(\"openWindow\", {\n        path: \"/newWindow\",\n      });\n    }\n  }\n}\n```\n\nTo write a new menu command, you must import an interface named `IBaseMenuCommand` that starts with 'I' like as C# and so on. this interface has a name, children, shortcut properties, and action method. the action method is a function that can be executed when the menu command is clicked.\n\n## InitialDOM\n\nTo create a new element, you can use the `InitialDOM` class. this class is a wrapper class of the `document` object. this class has a static method called `query` and `fetch`. the `query` method is a wrapper method of the `document.querySelector` method. the `fetch` method is a wrapper method of the `document.createElement` method. the `css` method creates a new style sheet to the `head` element and returns class name.\n\n```ts\nconst parent = InitialDOM.query(\"#view\");\nlet child = null;\nif ((child = InitialDOM.query(\"#tileset-marker\"))) {\n  parent?.removeChild(child);\n  return;\n}\n\nthis._element = InitialDOM.fetch(\"div\");\nthis._element.id = \"tileset-marker\";\nthis._element.className = InitialDOM.css`\n        min-width: ${this._tileWidth}px;\n        min-height: ${this._tileHeight}px;\n        width: ${this._tileWidth}px;\n        height: ${this._tileHeight}px;\n        position: absolute;\n        top: 0;\n        left: 0;\n        margin: 0;\n        padding: 0;\n        border: 2px dotted yellow;\n        z-index: 50;\n        box-sizing: border-box;\n    `;\n```\n\nWhy the wrapper class is needed? In this way, it will be possible to change this class to another framework such as React, Vue, Angular and so on easily. so I wrote it like this way.\n\n# Environment\n\n| Platform Type |    Status     |\n| :-----------: | :-----------: |\n|   Electron    | Stable (100%) |\n\n## How to setup\n\nIn case of platform such as `OSX`, try these steps. First up, you must install node in your system.\n\n```sh\nbrew install node\nnode -v\ncd ~/Documents\ngit clone https://github.com/biud436/InitialEditor.git\ncd InitialEidtor\nsudo yarn install\n```\n\nIn case of platform such as `Windows 10`, try to download the Node.js LTS version in your system manually. and next, if you exist the program called `git` in environment variable named `PATH` of your system, you must just call the command such as `git clone https://github.com/biud436/InitialEditor.git` in desired directory. and next try to below step.\n\n```bat\ngit clone https://github.com/biud436/InitialEditor.git\ncd InitialEidtor\nyarn install\n```\n\n## How to start\n\nyou have to run the following command in the terminal.\n\n```sh\nyarn script:build\nyarn dev\n```\n\n## How to upstream from remote github repository\n\nTo upstream from the remote repository, you must call below command.\n\n```bash\ngit remote add upstream https://github.com/biud436/InitialEditor.git\ngit fetch upstream\ngit checkout main\ngit merge upstream/main\n```\n\n# License\n\nThis tool is under the MIT License.\n\n---\n\nBut some icon and javascript and stylesheets and images included at this tool have their own licenses.\n\n- Font Awesome Free - https://fontawesome.com/license/free\n- FSM Tile (2k_town05.png) - http://refmap-l.blog.jp/archives/8632768.html\n- FSM Tile (2k_town05-01.png) - http://refmap-l.blog.jp/archives/8632768.html\n- Tuxemon Tileset - https://opengameart.org/content/tuxemon-tileset\n","funding_links":["https://github.com/sponsors/biud436"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiud436%2Finitialeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbiud436%2Finitialeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbiud436%2Finitialeditor/lists"}