Force-load color picker and fix other stuff

src/plugins/remix/editor/components/SettingColorComponent.tsx

@@ -18,6 +18,7 @@ interface ColorPickerProps {
     showEyeDropper?: boolean;
     onChange(value: number | null): void;
 }
+
 const ColorPicker = findComponentByCodeLazy<ColorPickerProps>(".BACKGROUND_PRIMARY).hex");
 
 const cl = classNameFactory("vc-remix-settings-color-");

src/plugins/remix/editor/tools/brush.ts

@@ -4,14 +4,17 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { brushCanvas, render } from "../components/Canvas";
+import { brushCanvas, ctx, render } from "../components/Canvas";
 import { currentSize, ToolDefinition } from "../components/Toolbar";
 import { Mouse } from "../input";
 import { line } from "../utils/canvas";
 
 export const BrushTool: ToolDefinition = {
     onMouseMove() {
-        if (!Mouse.down) return;
+        if (!Mouse.down || !ctx) return;
+
+        ctx.lineCap = "round";
+        ctx.lineJoin = "round";
 
         brushCanvas.lineWidth = currentSize;
 

src/plugins/remix/editor/tools/crop.ts

@@ -109,10 +109,10 @@ export const CropTool: ToolDefinition = {
 
         cropCanvas.strokeRect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
 
-        fillCircle(bounds.left, bounds.top, 15, cropCanvas);
-        fillCircle(bounds.right, bounds.top, 15, cropCanvas);
-        fillCircle(bounds.left, bounds.bottom, 15, cropCanvas);
-        fillCircle(bounds.right, bounds.bottom, 15, cropCanvas);
+        fillCircle(bounds.left, bounds.top, 10, cropCanvas);
+        fillCircle(bounds.right, bounds.top, 10, cropCanvas);
+        fillCircle(bounds.left, bounds.bottom, 10, cropCanvas);
+        fillCircle(bounds.right, bounds.bottom, 10, cropCanvas);
 
         render();
     },

src/plugins/remix/editor/tools/shape.ts

@@ -90,9 +90,6 @@ export const ShapeTool: ToolDefinition = {
                 break;
         }
 
-        canvas.lineCap = "butt";
-        canvas.lineJoin = "miter";
-
         render();
     },
 

src/plugins/remix/index.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
 import { definePluginSettings } from "@api/Settings";
 import { disableStyle, enableStyle } from "@api/Styles";
 import { Devs } from "@utils/constants";
@@ -19,10 +19,15 @@ import css from "./styles.css?managed";
 
 // so FileUpload is loaded
 export const requireCreateStickerModal = extractAndLoadChunksLazy(["stickerInspected]:"]);
+// so ColorPicker is loaded
+export const requireSettingsMenu = extractAndLoadChunksLazy(['name:"UserSettings"'], /createPromise:.{0,20}el\("(.+?)"\).{0,50}"UserSettings"/);
 
 const CloudUtils = findByPropsLazy("CloudUpload");
 const PendingReplyStore = findStoreLazy("PendingReplyStore");
 
+
+const validMediaTypes = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
+
 const UploadContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
     if (children.find(c => c?.props?.id === "vc-remix")) return;
 
@@ -37,15 +42,23 @@ const UploadContextMenuPatch: NavContextMenuPatchCallback = (children, props) =>
     />);
 };
 
-const ImageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
-    if (!props.attachment || children.find(c => c?.props?.id === "vc-remix")) return;
+const MessageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
+    const url = props.itemHref ?? props.itemSrc;
+    if (!url) return;
+    if (props.attachment && !validMediaTypes.includes(props.attachment.content_type)) return;
 
-    children.push(<Menu.MenuItem
+    const group = findGroupChildrenByChildId("copy-text", children);
+    if (!group) return;
+    if (group.find(c => c?.props?.id === "vc-remix")) return;
+
+    const index = group.findIndex(c => c?.props?.id === "copy-text");
+
+    group.splice(index + 1, 0, <Menu.MenuItem
         id="vc-remix"
         label="Remix"
         action={() => {
             const key = openModal(modalProps =>
-                <RemixModal modalProps={modalProps} close={() => closeModal(key)} url={props.attachment.url} />
+                <RemixModal modalProps={modalProps} close={() => closeModal(key)} url={url} />
             );
         }}
     />);
@@ -103,16 +116,17 @@ export default definePlugin({
 
     async start() {
         addContextMenuPatch("channel-attach", UploadContextMenuPatch);
-        addContextMenuPatch("message", ImageContextMenuPatch);
+        addContextMenuPatch("message", MessageContextMenuPatch);
 
         await requireCreateStickerModal();
+        await requireSettingsMenu();
 
         enableStyle(css);
     },
 
     stop() {
         removeContextMenuPatch("channel-attach", UploadContextMenuPatch);
-        removeContextMenuPatch("message", ImageContextMenuPatch);
+        removeContextMenuPatch("message", MessageContextMenuPatch);
 
         disableStyle(css);
     },

src/plugins/remix/styles.css

@@ -42,6 +42,8 @@
 .vc-remix-canvas {
     max-width: 100%;
     max-height: 100%;
+    min-width: 50%;
+    min-height: 50%;
 }
 
 .vc-remix-editor {