Terncode/Pixelcanvas.io-overlay
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor

Browse Source
This commit is contained in:
Terncode
2025-02-06 22:43:21 +01:00
parent 750352d7d1
commit 1bb3c0187c
12 changed files with 110 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/UI/components/main.tsx
+23 -4
View File
@@ -64,7 +64,7 @@ export class Main extends React.Component<Props, State> {
}
componentWillUnmount() {
this.destroyed = true;
this.actualSave({collapsed: this.state.collapsed, opacity: this.state .opacity});
this.actualSave({collapsed: this.state.collapsed, opacity: this.state.opacity});
}
actualSave(settings: StoreSettings) {
return this.props.storage.setItem(this.STORAGE_KEY, settings);
@@ -122,9 +122,28 @@ export class Main extends React.Component<Props, State> {
/>
</MovableWindow>
{this.renderMap()}
{this.state.overlays.map((o, i) => <Overlay key={i} storage={this.props.storage} opacity={this.state.opacity} cords={this.props.cords} palette={this.props.palette} mural={this.props.store.murals[o]}/> )}
{this.props.store.murals[this.state.phantomOverlay] ? <Overlay storage={this.props.storage} opacity={50} cords={this.props.cords} palette={this.props.palette} mural={this.props.store.murals[this.state.phantomOverlay]}/> : null }
{this.state.overlayModify ? <Overlay muralObj={this.state.overlayModify.muralObj} opacity={this.state.opacity} storage={this.props.storage} cords={this.props.cords} palette={this.props.palette} mural={this.props.store.overlayModify!.pixels} onChange={(name, x, y, confirm) => {
{this.state.overlays.map((o, i) => <Overlay
key={i} storage={this.props.storage}
opacity={this.state.opacity}
cords={this.props.cords}
palette={this.props.palette}
mural={this.props.store.murals[o]}
/> )}
{this.props.store.murals[this.state.phantomOverlay] ? <Overlay
storage={this.props.storage}
opacity={50}
cords={this.props.cords}
palette={this.props.palette}
mural={this.props.store.murals[this.state.phantomOverlay]}
/> : null }
{this.state.overlayModify ? <Overlay
muralObj={this.state.overlayModify.muralObj}
opacity={this.state.opacity}
storage={this.props.storage}
cords={this.props.cords}
palette={this.props.palette}
mural={this.props.store.overlayModify!.pixels}
onChange={(name, x, y, confirm) => {
this.state.overlayModify!.cb(name, x, y, confirm);
}} /> : null}
</>;
src/UI/components/minimap.tsx
+15 -5
View File
@@ -2,7 +2,9 @@ import { Coordinates, CordType } from "../../lib/coordinates";
import { SelectedMural } from "../../interfaces";
import React from "react";
import { Btn, SELECTED_COLOR } from "../styles";
import { faCrosshairs, faMagnifyingGlassMinus, faMagnifyingGlassPlus } from "@fortawesome/free-solid-svg-icons";
import {
faCrosshairs, faMagnifyingGlassMinus, faMagnifyingGlassPlus
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import styled from "styled-components";
import { createCanvas, drawPixelsOntoCanvas } from "../../lib/utils";
@@ -123,7 +125,10 @@ export class Minimap extends React.Component<Props, Stats> {
onCords = (x: number, y: number) => {
const store = this.props.store;
if (store.selected && store.selected.m.x < x && store.selected.m.y < y && store.selected.w + store.selected.m.x > x && store.selected.h + store.selected.m.y > y) {
if (
store.selected && store.selected.m.x < x && store.selected.m.y < y &&
store.selected.w + store.selected.m.x > x &&
store.selected.h + store.selected.m.y > y) {
const xx = x - store.selected.m.x;
const yy = y - store.selected.m.y;
const colorIndex = store.selected.m.pixels[yy][xx];
@@ -246,11 +251,16 @@ export class Minimap extends React.Component<Props, Stats> {
render() {
return <div>
<Flex>
<Btn onClick={this.up}><FontAwesomeIcon icon={ faMagnifyingGlassPlus }></FontAwesomeIcon></Btn>
<Btn
onClick={this.up}><FontAwesomeIcon icon={ faMagnifyingGlassPlus } /></Btn>
<Scale>{this.state.size}</Scale>
<Btn onClick={this.down}><FontAwesomeIcon icon={ faMagnifyingGlassMinus }></FontAwesomeIcon></Btn>
<Btn onClick={this.down}><FontAwesomeIcon icon={ faMagnifyingGlassMinus } /></Btn>
<span style={{flex: 1}}>
<Btn title="Color assistant" style={{ borderColor: this.state.colorAssistant ? SELECTED_COLOR : ""} } onClick={() => this.toggleColorAssistant()}>Assist<FontAwesomeIcon icon={faCrosshairs} /> </Btn>
<Btn
title="Color assistant"
style={{ borderColor: this.state.colorAssistant ? SELECTED_COLOR : ""} }
onClick={() => this.toggleColorAssistant()}>Assist<FontAwesomeIcon
icon={faCrosshairs} /> </Btn>
</span>
{this.renderColor()}
</Flex>
src/UI/components/movableWindow.tsx
+7 -2
View File
@@ -155,7 +155,9 @@ export class MovableWindow extends React.Component<Props, State> {
}
}
onMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
this.setMoving(event.clientX,event.clientY, event.nativeEvent.offsetX, event.nativeEvent.offsetY);
this.setMoving(
event.clientX,event.clientY, event.nativeEvent.offsetX, event.nativeEvent.offsetY
);
this.setState({moving: true});
};
onTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
@@ -173,7 +175,10 @@ export class MovableWindow extends React.Component<Props, State> {
}
render() {
return <Movable ref={this.ref} style={{left: `${this.state.x}px`, top: `${this.state.y}px`}}>
<DragArea ref={this.dragRef} style={{cursor: this.state.moving ? "grabbing" : ""}} onMouseDown={this.onMouseDown} onTouchStart={this.onTouchStart} > <h2>{this.props.title}</h2> </DragArea>
<DragArea ref={this.dragRef}
style={{cursor: this.state.moving ? "grabbing" : ""}}
onMouseDown={this.onMouseDown}
onTouchStart={this.onTouchStart}> <h2>{this.props.title}</h2> </DragArea>
{this.props.children}
src/UI/components/muralEditor.tsx
+12 -4
View File
@@ -18,16 +18,24 @@ export class MuralEditor extends React.Component<Props> {
render() {
return <Border>
<div>
<span>Name</span> <Input type="text" value={this.props.name} onChange={e => this.props.onName(e.target.value)} />
<span>Name</span> <Input
type="text"
value={this.props.name} onChange={e => this.props.onName(e.target.value)} />
</div>
<div>
<span>X</span> <Input type="number" value={this.props.x} onChange={e => processNumberEvent(e, this.props.onX)}/>
<span>X</span> <Input
type="number"
value={this.props.x} onChange={e => processNumberEvent(e, this.props.onX)}/>
</div>
<div>
<span>Y</span> <Input type="number" value={this.props.y} onChange={e => processNumberEvent(e, this.props.onY)} />
<span>Y</span> <Input
type="number"
value={this.props.y} onChange={e => processNumberEvent(e, this.props.onY)} />
</div>
<Flex>
<Btn onClick={() => this.props.onConfirm()} style={{flex: 1}}>Confirm</Btn><Btn onClick={() => this.props.onCancel()} style={{flex: 1}}>Cancel</Btn>
<Btn onClick={() => this.props.onConfirm()}
style={{flex: 1}}>Confirm</Btn><Btn
onClick={() => this.props.onCancel()} style={{flex: 1}}>Cancel</Btn>
</Flex>
<small>Overlay does not work on scale -1. To fix that zoom in.</small>
</Border>;
src/UI/components/muralList.tsx
+3 -1
View File
@@ -63,7 +63,9 @@ export class MuralList extends React.Component<Props, State> {
};
render() {
return <ScrollContainer> {this.state.murals.map((m,i) => {
return <MuralView key={i} mural={m} cords={this.props.cords} palette={this.props.palette} store={this.props.store} selected={m === this.state.selected?.m} />;
return <MuralView key={i} mural={m} cords={this.props.cords}
palette={this.props.palette} store={this.props.store}
selected={m === this.state.selected?.m} />;
})}</ScrollContainer>;
}
}
src/UI/components/muralView.tsx
+10 -3
View File
@@ -5,7 +5,9 @@ import styled from "styled-components";
import { Border, Btn, Flex, SELECTED_COLOR } from "../styles";
import { CanvasToCanvasJSX } from "./canvasToCanvasJSX";
import { formatNumber, getMuralHeight, getMuralWidth, getPixelStatusMural } from "../../lib/utils";
import { IconDefinition, faDownload, faLayerGroup, faLocation, faPenToSquare, faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
import {
IconDefinition, faDownload, faLayerGroup, faLocation, faPenToSquare, faRefresh, faTrash
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Coordinates } from "../../lib/coordinates";
import { TEXT_FORMATS } from "../importMural";
@@ -129,7 +131,8 @@ export class MuralView extends React.Component<Props, State> {
}
btn(context: string, icon: IconDefinition, onClick: () => void, selected?: boolean) {
return <Btn style={{ borderColor: selected ? SELECTED_COLOR : "" }} onClick={() => onClick()}>{context} <FontAwesomeIcon icon={icon} /> </Btn>;
return <Btn style={{ borderColor: selected ? SELECTED_COLOR : "" }}
onClick={() => onClick()}>{context} <FontAwesomeIcon icon={icon} /> </Btn>;
}
get s() {
return this.props.store;
@@ -263,7 +266,11 @@ export class MuralView extends React.Component<Props, State> {
}
render() {
return <Border onClick={this.onLoad} style={{ border: this.props.selected ? "3px solid black" : "3px dotted black", cursor: "pointer" }} onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
return <Border onClick={this.onLoad}
style={{
border: this.props.selected ? "3px solid black" : "3px dotted black",
cursor: "pointer" }}
onMouseEnter={this.onEnter} onMouseLeave={this.onLeave}>
<Flex>
<CanvasToCanvasJSX canvas={this.props.mural.ref} height={this.state.height} width={this.state.width}/>
<Margin style={{flex: "1"}}>
src/UI/components/overlay.tsx
+2 -1
View File
@@ -146,7 +146,8 @@ export class Overlay extends React.Component<Props, State> {
renderModifyWindow() {
if (this.props.onChange) {
const copy = {...this.state};
return <MovableWindow storage={this.props.storage} storageKey="overlay-set" title="Position editor">
return <MovableWindow storage={this.props.storage}
storageKey="overlay-set" title="Position editor">
<MuralEditor
name={this.state.name}
x={this.state.x}