scss styles for frames
parent
fc76ad81ab
commit
e0360b237a
|
|
@ -115,27 +115,25 @@ export class FrameHandler {
|
|||
public RefreshFrameViewer() {
|
||||
// set all frames to inactive
|
||||
for (let i = 0; i < this.frameViewer.children.length; i++) {
|
||||
this.frameViewer.children[i].className = 'frame';
|
||||
this.frameViewer.children[i].classList.remove('selected', 'warning');
|
||||
}
|
||||
// set current frame to active
|
||||
if (this.frameViewer.children[this.projectData.currentFrame] !== undefined) {
|
||||
this.frameViewer.children[this.projectData.currentFrame].className = 'frameActive';
|
||||
this.frameViewer.children[this.projectData.currentFrame].classList.add('selected');
|
||||
}
|
||||
|
||||
// check frames for data errors
|
||||
for (let f = 0; f < this.animationData.frames.length; f++) {
|
||||
// this.frameViewer.children[f].classList.add('warning');
|
||||
|
||||
if (this.animationData.pins !== undefined) {
|
||||
for (let p = 0; p < this.animationData.pins.length; p++) {
|
||||
if (this.animationData.pins[p] !== undefined) {
|
||||
const pinIDtoCheck = this.animationData.pins[p].id;
|
||||
console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
|
||||
// console.log('checking frame ' + f + ' for pinID ' + this.animationData.pins[p].name);
|
||||
if (this.frameViewer.children[f] !== undefined) {
|
||||
if (this.animationData.frames[f][pinIDtoCheck] === undefined) {
|
||||
if (f === this.projectData.currentFrame) {
|
||||
this.frameViewer.children[f].className = 'frameActiveWarning';
|
||||
} else {
|
||||
this.frameViewer.children[f].className = 'frameWarning';
|
||||
}
|
||||
this.frameViewer.children[f].classList.add('warning');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
|
@ -147,8 +145,8 @@ export class FrameHandler {
|
|||
|
||||
private RefreshImage() {
|
||||
if (this.filenames.length === 0) {
|
||||
this.frameNumberDiv.className = 'warning';
|
||||
this.frameNumberDiv.innerText = 'No images uploaded yet';
|
||||
// this.frameNumberDiv.className = 'warning';
|
||||
// this.frameNumberDiv.innerText = 'No images uploaded yet';
|
||||
} else {
|
||||
this.canvasContext.clearRect(0, 0, this.htmlCanvasElement.width, this.htmlCanvasElement.height);
|
||||
this.canvasContext.imageSmoothingEnabled = false;
|
||||
|
|
|
|||
|
|
@ -26,10 +26,9 @@ export class PinHandler {
|
|||
this.animationData = animationData;
|
||||
|
||||
// add origin click behaviour
|
||||
originPin.id = 'pinID_0';
|
||||
originPin.addEventListener('click', () => {
|
||||
this.DeselectAllPinContainers();
|
||||
originPin.className = 'pinButtonContainerSelected';
|
||||
projectData.currentlySelectedPin = 0;
|
||||
this.SelectPin(originPin);
|
||||
});
|
||||
// put origin into pincontainer array
|
||||
this.allPinContainers = [ originPin ];
|
||||
|
|
@ -63,6 +62,7 @@ export class PinHandler {
|
|||
this.allPinContainers[i].remove();
|
||||
}
|
||||
this.ResetPinSelection();
|
||||
this.UpdateAnimationPinNames();
|
||||
};
|
||||
|
||||
public GetAvailablePins = (): number[] => {
|
||||
|
|
@ -99,6 +99,20 @@ export class PinHandler {
|
|||
this.allPinContainers[0].className = 'pinButtonContainerSelected';
|
||||
};
|
||||
|
||||
private CheckOriginDataExists = () => {
|
||||
this.allPinContainers[0].className = 'pinButtonContainer';
|
||||
if (this.projectData.currentlySelectedPin === 0) {
|
||||
this.allPinContainers[0].className = 'pinButtonContainerSelected';
|
||||
}
|
||||
if (this.animationData.originX === null || this.animationData.originY === null) {
|
||||
if (this.projectData.currentlySelectedPin === 0) {
|
||||
this.allPinContainers[0].className = 'pinButtonContainerErrorSelected';
|
||||
} else {
|
||||
this.allPinContainers[0].className = 'pinButtonContainerError';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
private UpdatePinSettingsDiv = () => {
|
||||
// create info window div and append to pincontainer
|
||||
const newDiv = document.createElement('div');
|
||||
|
|
@ -146,15 +160,24 @@ export class PinHandler {
|
|||
newDiv.appendChild(selectPinButton);
|
||||
selectPinButton.textContent = 'Select';
|
||||
selectPinButton.addEventListener('click', () => {
|
||||
this.DeselectAllPinContainers();
|
||||
newDiv.className = 'pinButtonContainerSelected';
|
||||
this.projectData.currentlySelectedPin = parseInt(newDiv.id.split('_')[1]);
|
||||
console.log('selected pin ' + this.projectData.currentlySelectedPin);
|
||||
this.UpdateAnimationPinNames();
|
||||
this.SelectPin(newDiv);
|
||||
});
|
||||
this.UpdateAnimationPinNames();
|
||||
};
|
||||
|
||||
private SelectPin = (pinDiv: HTMLElement) => {
|
||||
this.CheckOriginDataExists();
|
||||
this.DeselectAllPinContainers();
|
||||
this.projectData.currentlySelectedPin = parseInt(pinDiv.id.split('_')[1]);
|
||||
if (pinDiv.className === 'pinButtonContainerError') {
|
||||
pinDiv.className = 'pinButtonContainerErrorSelected';
|
||||
} else {
|
||||
pinDiv.className = 'pinButtonContainerSelected';
|
||||
}
|
||||
console.log('selected pin ' + this.projectData.currentlySelectedPin);
|
||||
this.UpdateAnimationPinNames();
|
||||
};
|
||||
|
||||
private RemovePinDataForID = (pinID: number) => {
|
||||
// check for matching id in pin list and remove
|
||||
|
||||
|
|
@ -185,7 +208,20 @@ export class PinHandler {
|
|||
|
||||
private DeselectAllPinContainers = () => {
|
||||
for (let i = 0; i < this.allPinContainers.length; i++) {
|
||||
this.allPinContainers[i].className = 'pinButtonContainer';
|
||||
const pinDiv = this.allPinContainers[i];
|
||||
pinDiv.className = 'pinButtonContainer';
|
||||
if (i > 0) {
|
||||
// check frames for missing pin info
|
||||
const pinNumber = this.GetPinNumberFromID(pinDiv.id);
|
||||
for (let f = 0; this.animationData.frames.length; f++) {
|
||||
if (this.animationData.frames[f] !== undefined) {
|
||||
if (this.animationData.frames[f][pinNumber] === undefined) {
|
||||
pinDiv.className = 'pinButtonContainerError';
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,119 @@
|
|||
$bg-color: #859094;
|
||||
$bg-dark-color: #7a8386;
|
||||
$main-border-color: #6b7578;
|
||||
$main-font-color: #101e24;
|
||||
$selected-border-color: #09e7ca;
|
||||
$selected-bg-color: #4d998f;
|
||||
$warning-border-color: #aa093a;
|
||||
$warning-bg-color: #6e545c;
|
||||
$warning-selected-border-color: #ff044f;
|
||||
$warning-selected-bg-color: #aa093a;
|
||||
$warning-text-color: #ff1d61;
|
||||
|
||||
div {
|
||||
display: block;
|
||||
color: $main-font-color;
|
||||
font-family: "Arial", Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.numberinput {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.instruction {
|
||||
font-size: 12px;
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
border: 2px solid;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#frameViewer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.frame {
|
||||
flex: 1;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
max-width: 32px;
|
||||
color: $main-font-color;
|
||||
padding: 1px;
|
||||
display: inline-block;
|
||||
border: 2px solid $main-border-color;
|
||||
background-color: $bg-dark-color;
|
||||
|
||||
&.warning {
|
||||
border: 2px solid $warning-border-color;
|
||||
background-color: $warning-bg-color;
|
||||
}
|
||||
&.selected {
|
||||
border: 2px solid $selected-border-color;
|
||||
background-color: $selected-bg-color;
|
||||
&.warning {
|
||||
border: 2px solid $warning-selected-border-color;
|
||||
background-color: $warning-selected-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
font-size: 12px;
|
||||
width: 50%;
|
||||
border: 2px solid $warning-border-color;
|
||||
padding: 1px;
|
||||
background-color: $warning-bg-color;
|
||||
}
|
||||
|
||||
.warningMessage {
|
||||
display: block;
|
||||
color: $warning-text-color;
|
||||
background-color: $warning-bg-color;
|
||||
font-family: "Arial", Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $bg-color;
|
||||
}
|
||||
|
||||
#dropZone {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#canvasImage {
|
||||
border: 2px solid $main-border-color;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.pinContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.pinButtonContainer {
|
||||
max-width: 10%;
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
border: 2px solid $main-border-color;
|
||||
padding: 1px;
|
||||
|
||||
// .warning {
|
||||
// border: 2px solid $warning-border-color;
|
||||
// background-color: $warning-bg-color;
|
||||
// }
|
||||
|
||||
// .selected {
|
||||
// border: 2px solid $selected-border-color;
|
||||
// background-color: $selected-bg-color;
|
||||
// .warning {
|
||||
// border: 2px solid $warning-selected-border-color;
|
||||
// background-color: $warning-selected-bg-color;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
.removeButton {
|
||||
background-color: rgb(158, 15, 34);
|
||||
color: rgb(227, 227, 236);
|
||||
}
|
||||
|
|
@ -1,121 +0,0 @@
|
|||
div {
|
||||
display: block;
|
||||
color: #101e24;
|
||||
font-family: "Arial", Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.numberinput {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.instruction {
|
||||
font-size: 12px;
|
||||
margin: auto;
|
||||
width: 50%;
|
||||
border: 2px solid #6b7578;
|
||||
padding: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#frameViewer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.frame {
|
||||
flex: 1;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
max-width: 32px;
|
||||
color: #101e24;
|
||||
border: 2px solid #3f4446;
|
||||
padding: 1px;
|
||||
background-color: rgb(90, 92, 95);
|
||||
display: inline-block;
|
||||
}
|
||||
.frameActive {
|
||||
flex: 1;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
max-width: 32px;
|
||||
color: #101e24;
|
||||
border: 2px solid #0865df;
|
||||
padding: 1px;
|
||||
background-color: rgb(35, 75, 185);
|
||||
display: inline-block;
|
||||
}
|
||||
.frameWarning {
|
||||
flex: 1;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
max-width: 32px;
|
||||
color: #101e24;
|
||||
border: 2px solid rgb(233, 7, 75);
|
||||
padding: 1px;
|
||||
background-color: rgb(83, 14, 20);
|
||||
display: inline-block;
|
||||
}
|
||||
.frameActiveWarning {
|
||||
flex: 1;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
max-width: 32px;
|
||||
color: #101e24;
|
||||
border: 2px solid rgb(233, 7, 75);
|
||||
padding: 1px;
|
||||
background-color: rgb(185, 8, 61);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
font-size: 12px;
|
||||
color: rgb(233, 7, 75);
|
||||
width: 50%;
|
||||
border: 2px solid rgb(233, 7, 75);
|
||||
padding: 1px;
|
||||
background-color: rgb(83, 14, 20);
|
||||
}
|
||||
|
||||
.warning {
|
||||
display: block;
|
||||
color: #520012;
|
||||
font-family: "Arial", Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #818485;
|
||||
}
|
||||
|
||||
#dropZone {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#canvasImage {
|
||||
border: 2px solid #6b7578;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.pinContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.pinButtonContainer {
|
||||
max-width: 10%;
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
border: 2px solid #6b7578;
|
||||
padding: 1px;
|
||||
}
|
||||
.pinButtonContainerSelected {
|
||||
max-width: 10%;
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
border: 2px solid #0865df;
|
||||
padding: 1px;
|
||||
background-color: rgb(35, 75, 185);
|
||||
}
|
||||
|
||||
.removeButton {
|
||||
background-color: rgb(158, 15, 34);
|
||||
color: rgb(227, 227, 236);
|
||||
}
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
<meta charset="utf-8">
|
||||
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="stylesheet" href="assets/stylesheets/main.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="dropZone">
|
||||
|
|
@ -17,7 +16,7 @@
|
|||
<div id="canvasStyle">
|
||||
<canvas id="canvasImage" alt=""></canvas>
|
||||
</div>
|
||||
<div id="frameNumber" class="warning"></div>
|
||||
<div id="frameNumber" class="warningMessage"></div>
|
||||
<div id="frameViewer"></div>
|
||||
<button id="addpin">Create New Pin</button>
|
||||
<div id="pinContainer" class="pinContainer">
|
||||
|
|
|
|||
1
index.ts
1
index.ts
|
|
@ -1,4 +1,5 @@
|
|||
import { Page } from './app/page';
|
||||
import './app/stylesheets/main.scss';
|
||||
|
||||
const page = new Page();
|
||||
page.Load();
|
||||
|
|
|
|||
|
|
@ -19,7 +19,13 @@
|
|||
},
|
||||
"homepage": "https://github.com/MoonsideGames/AnimationTool#readme",
|
||||
"devDependencies": {
|
||||
"css-loader": "^3.2.0",
|
||||
"fibers": "^4.0.1",
|
||||
"node-sass": "^4.12.0",
|
||||
"prettier": "^1.18.2",
|
||||
"sass": "^1.23.0",
|
||||
"sass-loader": "^8.0.0",
|
||||
"style-loader": "^1.0.0",
|
||||
"ts-loader": "^6.1.2",
|
||||
"tslint": "^5.20.0",
|
||||
"tslint-config-prettier": "^1.18.0",
|
||||
|
|
|
|||
1114
pnpm-lock.yaml
1114
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
|
@ -1,31 +1,37 @@
|
|||
const path = require("path");
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
mode: "development",
|
||||
devtool: "inline-source-map",
|
||||
entry: "./index.ts",
|
||||
output: {
|
||||
filename: "bundle.js"
|
||||
},
|
||||
resolve: {
|
||||
// Add `.ts` and `.tsx` as a resolvable extension.
|
||||
extensions: [".ts", ".tsx", ".js"]
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: "ts-loader",
|
||||
options: {
|
||||
allowTsInNodeModules: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, '../dist'),
|
||||
compress: false,
|
||||
port: 8080
|
||||
}
|
||||
};
|
||||
mode: 'development',
|
||||
devtool: 'inline-source-map',
|
||||
entry: {
|
||||
main: [ './index.ts' ]
|
||||
},
|
||||
output: {
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
resolve: {
|
||||
// Add `.ts` and `.tsx` as a resolvable extension.
|
||||
extensions: [ '.ts', '.tsx', '.js' ]
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
allowTsInNodeModules: true
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: [ 'style-loader', 'css-loader', 'sass-loader?sourceMap' ]
|
||||
}
|
||||
]
|
||||
},
|
||||
devServer: {
|
||||
contentBase: path.join(__dirname, '../dist'),
|
||||
compress: false,
|
||||
port: 8080
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,25 +1,29 @@
|
|||
const path = require("path");
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
mode: "production",
|
||||
entry: "./index.ts",
|
||||
output: {
|
||||
filename: "bundle.js"
|
||||
},
|
||||
resolve: {
|
||||
// Add `.ts` and `.tsx` as a resolvable extension.
|
||||
extensions: [".ts", ".tsx", ".js"]
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: "ts-loader",
|
||||
options: {
|
||||
allowTsInNodeModules: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
mode: 'production',
|
||||
entry: './index.ts',
|
||||
output: {
|
||||
filename: 'bundle.js'
|
||||
},
|
||||
resolve: {
|
||||
// Add `.ts` and `.tsx` as a resolvable extension.
|
||||
extensions: [ '.ts', '.tsx', '.js' ]
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
|
||||
{
|
||||
test: /\.tsx?$/,
|
||||
loader: 'ts-loader',
|
||||
options: {
|
||||
allowTsInNodeModules: true
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(s*)css$/,
|
||||
use: [ 'style-loader', 'css-loader', 'sass-loader' ]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue