first commit

.gitignore

@@ -0,0 +1,5 @@
+out
+dist
+node_modules
+.vscode-test/
+*.vsix

.vscode-test.mjs

@@ -0,0 +1,5 @@
+import { defineConfig } from '@vscode/test-cli';
+
+export default defineConfig({
+	files: 'out/test/**/*.test.js',
+});

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+	// See http://go.microsoft.com/fwlink/?LinkId=827846
+	// for the documentation about the extensions.json format
+	"recommendations": [
+		"dbaeumer.vscode-eslint",
+		"ms-vscode.extension-test-runner"
+	]
+}

.vscode/launch.json

@@ -0,0 +1,21 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Run Extension",
+			"type": "extensionHost",
+			"request": "launch",
+			"args": [
+				"--extensionDevelopmentPath=${workspaceFolder}"
+			],
+			"outFiles": [
+				"${workspaceFolder}/out/**/*.js"
+			],
+			"preLaunchTask": "${defaultBuildTask}"
+		}
+	]
+}

.vscode/settings.json

@@ -0,0 +1,11 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+	"files.exclude": {
+		"out": false // set this to true to hide the "out" folder with the compiled JS files
+	},
+	"search.exclude": {
+		"out": true // set this to false to include "out" folder in search results
+	},
+	// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
+	"typescript.tsc.autoDetect": "off"
+}

.vscode/tasks.json

@@ -0,0 +1,20 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "watch",
+			"problemMatcher": "$tsc-watch",
+			"isBackground": true,
+			"presentation": {
+				"reveal": "never"
+			},
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			}
+		}
+	]
+}

.vscodeignore

@@ -0,0 +1,11 @@
+.vscode/**
+.vscode-test/**
+src/**
+.gitignore
+.yarnrc
+vsc-extension-quickstart.md
+**/tsconfig.json
+**/eslint.config.mjs
+**/*.map
+**/*.ts
+**/.vscode-test.*

.yarnrc

@@ -0,0 +1 @@
+--ignore-engines true

CHANGELOG.md

@@ -0,0 +1,9 @@
+# Change Log
+
+All notable changes to the "imagemarkpengent" extension will be documented in this file.
+
+Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
+
+## [Unreleased]
+
+- Initial release

README.md

@@ -0,0 +1,71 @@
+# imagemarkpengent README
+
+This is the README for your extension "imagemarkpengent". After writing up a brief description, we recommend including the following sections.
+
+## Features
+
+Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
+
+For example if there is an image subfolder under your extension project workspace:
+
+\!\[feature X\]\(images/feature-x.png\)
+
+> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
+
+## Requirements
+
+If you have any requirements or dependencies, add a section describing those and how to install and configure them.
+
+## Extension Settings
+
+Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
+
+For example:
+
+This extension contributes the following settings:
+
+* `myExtension.enable`: Enable/disable this extension.
+* `myExtension.thing`: Set to `blah` to do something.
+
+## Known Issues
+
+Calling out known issues can help limit users opening duplicate issues against your extension.
+
+## Release Notes
+
+Users appreciate release notes as you update your extension.
+
+### 1.0.0
+
+Initial release of ...
+
+### 1.0.1
+
+Fixed issue #.
+
+### 1.1.0
+
+Added features X, Y, and Z.
+
+---
+
+## Following extension guidelines
+
+Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
+
+* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
+
+## Working with Markdown
+
+You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
+
+* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
+* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
+* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.
+
+## For more information
+
+* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
+* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
+
+**Enjoy!**

docs/design.md

@@ -0,0 +1,172 @@
+# ImageMarkPengent拡張機能の設計書
+
+* 画像に赤い印や注釈を描ける
+* いちいちEXECLなどを開いて画像を加工するのも面倒
+
+## 機能一覧
+
+| 分類   | 機能        | 説明                                     |
+| ------ | ----------- | ---------------------------------------- |
+| ビュー | WebView表示 | `.png/.jpg`ファイルを開くとWebViewで表示 |
+| 機能   | マーク描画  | クリックしたところに記号を描画           |
+|        | 保存機能    | 加工後に保存する(別名保存も対応)         |
+
+最初は記号は丸のオブジェクトのみとする
+※ 番号付きマーカーや矢印 も将来的に追加できるようにする
+
+
+
+## 仕様について
+
+### フォルダの構成
+```txt
+imagemarkpengent/
+├── src/
+│   └── extension.ts          # 拡張機能のメインエントリ
+├── package.json              # 拡張機能の定義（コマンド、設定など）
+├── tsconfig.json             # TypeScript設定
+├── vsc-extension-quickstart.md  # チュートリアル的なREADME
+└── .vscode/
+```
+
+---
+
+## 開発ステップ
+
+1. コマンドを登録し.png/.jpgファイルに対して有効にする
+    - package.json に explorer/context のコマンドメニュー追加
+    - 対象拡張子を`.png/.jpg`に限定する
+2. WebView で画像を表示する処理を追加
+    - コマンドからWebviewPanelを作成し画像を`<img>`として読み込む
+    - canvas上に画像を描画してユーザーが上から描き込めるようにする
+3. クリック位置に赤丸を描画できるようにする
+    - WebView内でJavaScriptを使い`<canvas>`に描画する
+    - 座標はクリックイベントで取得、再描画用に保持
+4. 加工画像の保存機能を追加
+    - 「保存」ボタンをWebView内に用意
+    - `canvas.toDataURL()`を取得し、拡張機能に`vscode.postMessage()`で送信
+    - 拡張機能側でファイル保存（別名保存もサポート）
+
+### 
+完璧なスタートです！  
+以下に続きの「**開発ステップ**」とそれぞれの **具体的な手順** を設計書スタイルで追記します。
+
+---
+
+## 開発ステップ
+
+### ステップ 1. コマンドを登録し `.png/.jpg` ファイルに対して有効にする  
+- `package.json` に `explorer/context` のコマンドメニュー追加
+- 対象拡張子を `.png` / `.jpg` に限定
+
+### ステップ 2. WebView で画像を表示する処理を追加  
+- コマンドから `WebviewPanel` を作成し画像を `<img>` として読み込み
+- `canvas` 上に画像を描画して、ユーザーが上から描き込めるようにする
+
+### ステップ 3. クリック位置に赤丸を描画できるようにする  
+- WebView内で JavaScript を使い `<canvas>` に赤丸描画
+- 座標はクリックイベントで取得、再描画用に保持
+
+### ステップ 4. 加工画像の保存機能を追加  
+- 「保存」ボタンをWebView内に用意
+- `canvas.toDataURL()` を取得し、拡張機能に `vscode.postMessage()` で送信
+- 拡張機能側でファイル保存（別名保存もサポート）
+
+---
+
+## 各ステップの具体的な手順
+
+### コマンド登録（右クリックメニューに表示）
+
+**package.json**
+```json
+"activationEvents": [
+  "onCommand:imagemarkpengent.openImageEditor"
+],
+"contributes": {
+  "commands": [
+    {
+      "command": "imagemarkpengent.openImageEditor",
+      "title": "Open in ImageMarkPengent"
+    }
+  ],
+  "menus": {
+    "explorer/context": [
+      {
+        "command": "imagemarkpengent.openImageEditor",
+        "when": "resourceExtname =~ /\\.(png|jpg|jpeg)$/",
+        "group": "navigation"
+      }
+    ]
+  }
+}
+```
+
+---
+
+### WebViewに画像表示
+
+**extension.ts**
+
+```ts
+vscode.commands.registerCommand('imagemarkpengent.openImageEditor', (uri: vscode.Uri) => {
+  const panel = vscode.window.createWebviewPanel(
+    'imageEditor',
+    'ImageMarkPengent',
+    vscode.ViewColumn.One,
+    {
+      enableScripts: true,
+      localResourceRoots: [vscode.Uri.file(path.dirname(uri.fsPath))]
+    }
+  );
+
+  const imageSrc = panel.webview.asWebviewUri(uri);
+
+  panel.webview.html = getWebviewContent(imageSrc.toString());
+});
+```
+
+**getWebviewContent()**
+```ts
+function getWebviewContent(imageSrc: string): string {
+  return `
+    <html>
+    <body>
+      <canvas id="canvas"></canvas>
+      <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const img = new Image();
+        img.src = "${imageSrc}";
+        img.onload = () => {
+          canvas.width = img.width;
+          canvas.height = img.height;
+          ctx.drawImage(img, 0, 0);
+        };
+
+        canvas.addEventListener('click', (e) => {
+          const rect = canvas.getBoundingClientRect();
+          const x = e.clientX - rect.left;
+          const y = e.clientY - rect.top;
+          ctx.beginPath();
+          ctx.arc(x, y, 10, 0, 2 * Math.PI);
+          ctx.strokeStyle = 'red';
+          ctx.lineWidth = 2;
+          ctx.stroke();
+        });
+      </script>
+    </body>
+    </html>
+  `;
+}
+```
+
+---
+
+### 保存処理（vscode拡張から保存）
+
+- WebView内に「保存」ボタン追加
+- `canvas.toDataURL()` を取得し、`vscode.postMessage()` で送信
+- `extension.ts` で受け取ってバイナリ化し、`fs.writeFile()` で保存
+
+

eslint.config.mjs

@@ -0,0 +1,28 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+
+export default [{
+    files: ["**/*.ts"],
+}, {
+    plugins: {
+        "@typescript-eslint": typescriptEslint,
+    },
+
+    languageOptions: {
+        parser: tsParser,
+        ecmaVersion: 2022,
+        sourceType: "module",
+    },
+
+    rules: {
+        "@typescript-eslint/naming-convention": ["warn", {
+            selector: "import",
+            format: ["camelCase", "PascalCase"],
+        }],
+
+        curly: "warn",
+        eqeqeq: "warn",
+        "no-throw-literal": "warn",
+        semi: "warn",
+    },
+}];

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "imagemarkpengent",
+  "displayName": "ImageMarkPengent",
+  "description": "",
+  "version": "0.0.1",
+  "engines": {
+    "vscode": "^1.99.0"
+  },
+  "categories": [
+    "Other"
+  ],
+  "activationEvents": [],
+  "main": "./out/extension.js",
+  "contributes": {
+    "commands": [
+      {
+        "command": "imagemarkpengent.helloWorld",
+        "title": "Hello World"
+      }
+    ]
+  },
+  "scripts": {
+    "vscode:prepublish": "yarn run compile",
+    "compile": "tsc -p ./",
+    "watch": "tsc -watch -p ./",
+    "pretest": "yarn run compile && yarn run lint",
+    "lint": "eslint src",
+    "test": "vscode-test"
+  },
+  "devDependencies": {
+    "@types/vscode": "^1.99.0",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "20.x",
+    "@typescript-eslint/eslint-plugin": "^8.28.0",
+    "@typescript-eslint/parser": "^8.28.0",
+    "eslint": "^9.23.0",
+    "typescript": "^5.8.2",
+    "@vscode/test-cli": "^0.0.10",
+    "@vscode/test-electron": "^2.4.1"
+  }
+}

src/extension.ts

@@ -0,0 +1,26 @@
+// The module 'vscode' contains the VS Code extensibility API
+// Import the module and reference it with the alias vscode in your code below
+import * as vscode from 'vscode';
+
+// This method is called when your extension is activated
+// Your extension is activated the very first time the command is executed
+export function activate(context: vscode.ExtensionContext) {
+
+	// Use the console to output diagnostic information (console.log) and errors (console.error)
+	// This line of code will only be executed once when your extension is activated
+	console.log('Congratulations, your extension "imagemarkpengent" is now active!');
+
+	// The command has been defined in the package.json file
+	// Now provide the implementation of the command with registerCommand
+	// The commandId parameter must match the command field in package.json
+	const disposable = vscode.commands.registerCommand('imagemarkpengent.helloWorld', () => {
+		// The code you place here will be executed every time your command is executed
+		// Display a message box to the user
+		vscode.window.showInformationMessage('Hello World from ImageMarkPengent!');
+	});
+
+	context.subscriptions.push(disposable);
+}
+
+// This method is called when your extension is deactivated
+export function deactivate() {}

src/test/extension.test.ts

@@ -0,0 +1,15 @@
+import * as assert from 'assert';
+
+// You can import and use all API from the 'vscode' module
+// as well as import your extension to test it
+import * as vscode from 'vscode';
+// import * as myExtension from '../../extension';
+
+suite('Extension Test Suite', () => {
+	vscode.window.showInformationMessage('Start all tests.');
+
+	test('Sample test', () => {
+		assert.strictEqual(-1, [1, 2, 3].indexOf(5));
+		assert.strictEqual(-1, [1, 2, 3].indexOf(0));
+	});
+});

tsconfig.json

@@ -0,0 +1,17 @@
+{
+	"compilerOptions": {
+		"module": "Node16",
+		"target": "ES2022",
+		"outDir": "out",
+		"lib": [
+			"ES2022"
+		],
+		"sourceMap": true,
+		"rootDir": "src",
+		"strict": true,   /* enable all strict type-checking options */
+		/* Additional Checks */
+		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
+		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
+		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
+	}
+}

vsc-extension-quickstart.md

@@ -0,0 +1,44 @@
+# Welcome to your VS Code Extension
+
+## What's in the folder
+
+* This folder contains all of the files necessary for your extension.
+* `package.json` - this is the manifest file in which you declare your extension and command.
+  * The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin.
+* `src/extension.ts` - this is the main file where you will provide the implementation of your command.
+  * The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`.
+  * We pass the function containing the implementation of the command as the second parameter to `registerCommand`.
+
+## Get up and running straight away
+
+* Press `F5` to open a new window with your extension loaded.
+* Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`.
+* Set breakpoints in your code inside `src/extension.ts` to debug your extension.
+* Find output from your extension in the debug console.
+
+## Make changes
+
+* You can relaunch the extension from the debug toolbar after changing code in `src/extension.ts`.
+* You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
+
+## Explore the API
+
+* You can open the full set of our API when you open the file `node_modules/@types/vscode/index.d.ts`.
+
+## Run tests
+
+* Install the [Extension Test Runner](https://marketplace.visualstudio.com/items?itemName=ms-vscode.extension-test-runner)
+* Run the "watch" task via the **Tasks: Run Task** command. Make sure this is running, or tests might not be discovered.
+* Open the Testing view from the activity bar and click the Run Test" button, or use the hotkey `Ctrl/Cmd + ; A`
+* See the output of the test result in the Test Results view.
+* Make changes to `src/test/extension.test.ts` or create new test files inside the `test` folder.
+  * The provided test runner will only consider files matching the name pattern `**.test.ts`.
+  * You can create folders inside the `test` folder to structure your tests any way you want.
+
+## Go further
+
+* [Follow UX guidelines](https://code.visualstudio.com/api/ux-guidelines/overview) to create extensions that seamlessly integrate with VS Code's native interface and patterns.
+* Reduce the extension size and improve the startup time by [bundling your extension](https://code.visualstudio.com/api/working-with-extensions/bundling-extension).
+* [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VS Code extension marketplace.
+* Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration).
+* Integrate to the [report issue](https://code.visualstudio.com/api/get-started/wrapping-up#issue-reporting) flow to get issue and feature requests reported by users.