613 lines
15 KiB
JavaScript
613 lines
15 KiB
JavaScript
// output image class: one image to one layer
|
|
// * path:
|
|
// * image layer
|
|
// * viewer()
|
|
// * select()
|
|
// * isLayerValid()
|
|
// * init image class: has three layers
|
|
// * path :
|
|
// * init image group layer
|
|
// * init image layer
|
|
// * background layer
|
|
// * isLayerValid()
|
|
// * mask class:
|
|
// * path
|
|
// * mask group
|
|
// * white mask
|
|
// * balck layer
|
|
// * select()
|
|
// * viewe()
|
|
// * isLayerValid()
|
|
|
|
const psapi = require('./psapi')
|
|
|
|
const ViewerObjState = {
|
|
Delete: "delete",
|
|
Unlink: "unlink",
|
|
|
|
}
|
|
|
|
class ViewerImage {
|
|
constructor () {
|
|
this.img_html = null
|
|
this.is_highlighted = false
|
|
this.can_highlight = true
|
|
this.is_active = false// active is a temporary highlight
|
|
this.state = ViewerObjState['Unlink']
|
|
|
|
// true will delete the layers from the layer stacks when the session ends,
|
|
// false mean use this.state to determine whither you delete the layer or not
|
|
this.autoDelete = false
|
|
}
|
|
info(){
|
|
console.log("state: ",this.state)
|
|
}
|
|
visible (visibleOn) {}
|
|
select () {
|
|
|
|
}
|
|
isActive(){
|
|
return this.is_active
|
|
}
|
|
active(isActive){
|
|
if(isActive){
|
|
//unlink it if it's active
|
|
// this.state = ViewerObjState['Unlink']
|
|
|
|
this.img_html.classList.add("viewerImgActive")
|
|
|
|
}else{
|
|
if(this.getHighlight() === false){// if it's not active and it's not highlighted
|
|
|
|
// this.state = ViewerObjState['Delete']
|
|
}else{
|
|
|
|
// this.state = ViewerObjState['Unlink'] //it's not active but it's highlighted then keep it
|
|
}
|
|
this.img_html.classList.remove("viewerImgActive")
|
|
}
|
|
this.is_active = isActive
|
|
|
|
}
|
|
setAutoDelete(auto_delete){
|
|
this.autoDelete = auto_delete
|
|
}
|
|
isLayerValid () {}
|
|
isSameLayer (layer_id) {}
|
|
setHighlight(is_highlighted){
|
|
if(this.can_highlight){
|
|
|
|
this.is_highlighted = is_highlighted
|
|
if(this.is_highlighted)
|
|
{
|
|
// this.state = ViewerObjState['Unlink']
|
|
this.img_html.classList.add("viewerImgSelected")
|
|
|
|
}else{
|
|
this.img_html.classList.remove("viewerImgSelected")
|
|
// this.state = ViewerObjState["Delete"]
|
|
}
|
|
}
|
|
}
|
|
getHighlight(){
|
|
return this.is_highlighted
|
|
}
|
|
toggleHighlight(){
|
|
|
|
const toggle_value = !this.getHighlight()
|
|
this.setHighlight(toggle_value)
|
|
// this.is_highlighted = !this.is_highlighted
|
|
// this.img_html.classList.toggle("viewerImgSelected")
|
|
}
|
|
setImgHtml(){}
|
|
|
|
async delete(){
|
|
try{
|
|
|
|
this.img_html.remove()//delete the img html element
|
|
|
|
//1) it's output layer // can_highlight && this.getHighlight()
|
|
//2) it init or mask relate layers // this.autoDelete
|
|
//3) it output layer that been used as init layer // !can_highlight && !this.autoDelete
|
|
|
|
// do 1) and 2) here . test for 3) in InitImage
|
|
|
|
//1)
|
|
if (this.can_highlight && (this.getHighlight() || this.is_active))
|
|
{//keep if can be highlighted and either is highlighted or active
|
|
this.state = ViewerObjState['Unlink']
|
|
}else{//
|
|
this.state = ViewerObjState['Delete']
|
|
|
|
}
|
|
|
|
|
|
if(this.autoDelete){//remove if it's first automated layer
|
|
this.state = ViewerObjState['Delete']
|
|
}
|
|
|
|
|
|
|
|
|
|
// else {
|
|
// //discard only if it's
|
|
// if (this.autoDelete){
|
|
// this.state = ViewerObjState['Delete']
|
|
// }
|
|
// }
|
|
}catch(e){
|
|
console.warn(e)
|
|
}
|
|
}
|
|
|
|
unlink(){
|
|
//keep the layer but unlink it from the ui
|
|
try{
|
|
|
|
|
|
this.img_html.remove()//delete the img html element
|
|
|
|
}catch(e){
|
|
console.warn(e)
|
|
}
|
|
}
|
|
|
|
|
|
addButtonHtml(){
|
|
// Create new container element
|
|
const container = document.createElement('div');
|
|
|
|
|
|
container.className = "viewer-image-container";
|
|
|
|
|
|
const elem = document.getElementById('svg_sp_btn');
|
|
|
|
// Create a copy of it
|
|
const clone = elem.cloneNode(true);
|
|
const button = clone
|
|
button.style.display = null
|
|
|
|
|
|
// Create button element
|
|
// const button = document.createElement('sp-button');
|
|
button.className = "viewer-image-button";
|
|
// button.innerHTML = "Button";
|
|
|
|
// Append elements to container
|
|
container.appendChild(this.img_html);
|
|
container.appendChild(button);
|
|
|
|
|
|
|
|
this.img_html = container;
|
|
}
|
|
|
|
}
|
|
|
|
class OutputImage extends ViewerImage {
|
|
constructor (layer, path) {
|
|
super()
|
|
this.layer = layer
|
|
this.path = path
|
|
this.img_html = null;
|
|
}
|
|
visible (visibleOn) {
|
|
try{
|
|
|
|
super.visible(visibleOn)
|
|
if (this.isLayerValid()) {
|
|
this.layer.visible = visibleOn
|
|
}
|
|
}catch(e){
|
|
console.warn(e)
|
|
}
|
|
}
|
|
async select () {
|
|
super.select()
|
|
if (this.isLayerValid()) {
|
|
await psapi.selectLayersExe([this.layer])
|
|
// console.log(`${this.layer.id} got selected`);
|
|
}
|
|
}
|
|
isLayerValid () {
|
|
super.isLayerValid()
|
|
//check if layer is defined or not
|
|
//true if the layer is defined
|
|
//false otherwise
|
|
let isValid = false
|
|
if (typeof this.layer !== 'undefined') {
|
|
isValid = true
|
|
}
|
|
return isValid
|
|
}
|
|
isSameLayer (layer_id) {
|
|
super.isSameLayer(layer_id)
|
|
const is_same = this.layer.id == layer_id
|
|
return is_same
|
|
}
|
|
|
|
setImgHtml(img_html){
|
|
super.setImgHtml()
|
|
this.img_html = img_html
|
|
}
|
|
async delete(){
|
|
try{
|
|
|
|
await super.delete()
|
|
// this.img_html.remove()//delete the img html element
|
|
if(this.state === ViewerObjState['Delete']){
|
|
await psapi.cleanLayers([this.layer])
|
|
}
|
|
}catch(e){
|
|
console.warn(e)
|
|
}
|
|
|
|
|
|
}
|
|
info(){
|
|
super.info()
|
|
}
|
|
// unlink(){
|
|
// //keep the layer but unlink it from the ui
|
|
// try{
|
|
|
|
// super.unlink()
|
|
// this.img_html.remove()//delete the img html element
|
|
|
|
// }catch(e){
|
|
// console.warn(e)
|
|
// }
|
|
// }
|
|
}
|
|
|
|
class InitImage extends ViewerImage {
|
|
constructor (init_group, init_snapshot, solid_layer, path) {
|
|
super()
|
|
this.init_group = init_group
|
|
this.init_snapshot = init_snapshot
|
|
this.solid_layer = solid_layer
|
|
|
|
this.path = path
|
|
this.can_highlight = false
|
|
// if (this.autoDelete === false){
|
|
// this.state = ViewerObjState['Unlink']
|
|
// }
|
|
}
|
|
visible (visibleOn) {
|
|
try{
|
|
|
|
super.visible(visibleOn)
|
|
// const isValid = this.isLayerValid()
|
|
let visibleValues = []
|
|
if (visibleOn) {
|
|
visibleValues = [true, true, true]
|
|
} else {
|
|
visibleValues = [false, false, false]
|
|
}
|
|
|
|
if (this.isLayerValid(this.init_group)) {
|
|
this.init_group.visible = visibleValues[0]
|
|
}
|
|
if (this.isLayerValid(this.init_snapshot)) {
|
|
this.init_snapshot.visible = visibleValues[1]
|
|
}
|
|
if (this.isLayerValid(this.solid_layer)) {
|
|
this.solid_layer.visible = visibleValues[2]
|
|
}
|
|
}catch(e){
|
|
console.warn(e)
|
|
}
|
|
}
|
|
|
|
async select () {
|
|
super.select()
|
|
|
|
const selectLayers = []
|
|
if (this.isLayerValid(this.init_group)) {
|
|
|
|
selectLayers.push(this.init_group)
|
|
}
|
|
// if (this.isLayerValid(this.init_snapshot)) {
|
|
|
|
// selectLayers.push(this.init_snapshot)
|
|
// }
|
|
// if (this.isLayerValid(this.solid_layer)) {
|
|
// selectLayers.push(this.solid_layer)
|
|
// }
|
|
|
|
await psapi.selectLayersExe(selectLayers)
|
|
// console.log(`${this.layer.id} got selected`);
|
|
}
|
|
|
|
isLayerValid (layer) {
|
|
super.isLayerValid()
|
|
//check if layer is defined or not
|
|
//true if the layer is defined
|
|
//false otherwise
|
|
// let isValid = [false,false,false]
|
|
let isValid = false
|
|
if (typeof layer !== 'undefined') {
|
|
isValid = true
|
|
}
|
|
|
|
return isValid
|
|
}
|
|
isSameLayer (layer_id) {
|
|
super.isSameLayer(layer_id)
|
|
let is_same = false
|
|
if(this.isLayerValid(this.init_group)){
|
|
is_same = this.init_group.id == layer_id
|
|
|
|
}
|
|
return is_same
|
|
}
|
|
setImgHtml(img_html){
|
|
super.setImgHtml()
|
|
this.img_html = img_html
|
|
}
|
|
async delete(){
|
|
try{
|
|
|
|
await super.delete()
|
|
|
|
// this.img_html.remove()//delete the img html element
|
|
|
|
if (!this.autoDelete && !this.can_highlight)
|
|
{//don't delete since it's output layer that is been used as init image
|
|
this.state = ViewerObjState['Unlink']
|
|
}
|
|
|
|
if(this.state === ViewerObjState['Delete']){
|
|
|
|
await psapi.cleanLayers([this.init_group,this.init_snapshot,this.solid_layer])
|
|
}
|
|
|
|
}
|
|
catch(e){
|
|
console.warn(e)
|
|
}
|
|
}
|
|
}
|
|
|
|
class InitMaskImage extends ViewerImage {
|
|
constructor (mask_group, white_mark, solid_black, path) {
|
|
super()
|
|
this.mask_group = mask_group
|
|
this.white_mark = white_mark
|
|
this.solid_black = solid_black
|
|
|
|
this.path = path
|
|
this.can_highlight = false
|
|
}
|
|
visible (visibleOn) {
|
|
try{
|
|
|
|
super.visible(visibleOn)
|
|
// const isValid = this.isLayerValid()
|
|
let visibleValues = []
|
|
if (visibleOn) {
|
|
visibleValues = [true, true, false]
|
|
} else {
|
|
visibleValues = [false, false, false]
|
|
}
|
|
|
|
if (this.isLayerValid(this.mask_group)) {
|
|
this.mask_group.visible = visibleValues[0]
|
|
}
|
|
if (this.isLayerValid(this.white_mark)) {
|
|
this.white_mark.visible = visibleValues[1]
|
|
}
|
|
if (this.isLayerValid(this.solid_black)) {
|
|
this.solid_black.visible = visibleValues[2]
|
|
}
|
|
}catch(e){
|
|
console.warn(e)
|
|
}
|
|
}
|
|
|
|
async select () {
|
|
super.select()
|
|
|
|
const selectLayers = []
|
|
// if (this.isLayerValid(this.mask_group)) {
|
|
|
|
// selectLayers.push(this.mask_group)
|
|
// }
|
|
if (this.isLayerValid(this.white_mark)) {
|
|
|
|
selectLayers.push(this.white_mark)
|
|
}
|
|
// if (this.isLayerValid(this.solid_layer)) {
|
|
// selectLayers.push(this.solid_layer)
|
|
// }
|
|
|
|
await psapi.selectLayersExe(selectLayers)
|
|
// console.log(`${this.layer.id} got selected`);
|
|
}
|
|
|
|
isLayerValid (layer) {
|
|
super.isLayerValid()
|
|
//check if layer is defined or not
|
|
//true if the layer is defined
|
|
//false otherwise
|
|
// let isValid = [false,false,false]
|
|
let isValid = false
|
|
if (typeof layer !== 'undefined') {
|
|
isValid = true
|
|
}
|
|
|
|
return isValid
|
|
}
|
|
isSameLayer (layer_id) {
|
|
super.isSameLayer(layer_id)
|
|
let is_same = false
|
|
if(this.isLayerValid(this.mask_group)){
|
|
is_same = this.mask_group.id == layer_id
|
|
|
|
}
|
|
return is_same
|
|
}
|
|
setImgHtml(img_html){
|
|
super.setImgHtml()
|
|
this.img_html = img_html
|
|
}
|
|
async delete(){
|
|
try{
|
|
|
|
await super.delete()
|
|
// this.img_html.remove()//delete the img html element
|
|
if(this.state === ViewerObjState['Delete']){
|
|
await psapi.cleanLayers([this.mask_group,this.white_mark, this.solid_black])
|
|
|
|
}
|
|
}catch(e){
|
|
console.warn(e)
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
class initImageLayers{//store info about the init image related layers
|
|
constructor(group,snapshot,solid_background,autoDelete){
|
|
this.group = group
|
|
this.snapshot = snapshot
|
|
this.solid_background = solid_background
|
|
this.autoDelete = autoDelete
|
|
}
|
|
}
|
|
class maskLayers{//store info about the init image related layers
|
|
constructor(group,white_mark,solid_background,autoDelete){
|
|
this.group = group
|
|
this.white_mark = white_mark
|
|
this.solid_background = solid_background
|
|
this.autoDelete = autoDelete
|
|
}
|
|
}
|
|
class ViewerManager{
|
|
//viewer manager will reset after the end of the session
|
|
//it will store
|
|
constructor(){
|
|
this.outputImages = []
|
|
this.initImages = []
|
|
this.initMaskImage
|
|
this.pathToViewerImage = {}// quick way to check if an link image path on disk to ViewerImage object.
|
|
this.initImageLayersJson ={}//{path: initImageLayers}
|
|
|
|
this.mask_layer
|
|
this.maskLayersJson ={}//{path: MaskLayers}
|
|
|
|
//Note:move initGroup, to GenerationSession
|
|
this.initGroup
|
|
this.init_solid_background
|
|
this.maskGroup
|
|
this.mask_solid_background
|
|
|
|
//last_selected_obj
|
|
this.last_selected_viewer_obj
|
|
|
|
}
|
|
initializeInitImage(group,snapshot,solid_background,path){
|
|
this.initGroup = group
|
|
this.init_solid_background = solid_background
|
|
this.addInitImageLayers(snapshot,path,true)
|
|
}
|
|
initializeMask(group,white_mark,solid_background,path){
|
|
this.maskGroup = group
|
|
this.mask_solid_background = solid_background
|
|
this.addMaskLayers(white_mark,path,true)
|
|
}
|
|
addMaskLayers(white_mark,path,auto_delete){
|
|
try{
|
|
|
|
if (!this.maskLayersJson.hasOwnProperty(path)){//it's a new mask, mostly for the first time storing the mask
|
|
|
|
const mask_layers = new maskLayers(this.maskGroup,white_mark,this.mask_solid_background,auto_delete)
|
|
this.maskLayersJson[path] = mask_layers
|
|
}else{//for updating the mask
|
|
|
|
//just update the html
|
|
const new_path = `${path}?t=${new Date().getTime()}`
|
|
console.log("new mask path: ",new_path)
|
|
// this.maskLayersJson[path].img_html.src = new_path
|
|
this.pathToViewerImage[path].img_html.src = new_path
|
|
}
|
|
}catch(e){
|
|
console.warn(e)
|
|
}
|
|
}
|
|
updateMaskLayer(){
|
|
|
|
}
|
|
addInitImageLayers(snapshot,path,auto_delete){
|
|
try{
|
|
|
|
if (!this.initImageLayersJson.hasOwnProperty(path)){
|
|
//if this is a new init image
|
|
//store it all of layers in a container object
|
|
const init_image_layers = new initImageLayers(this.initGroup,snapshot,this.init_solid_background,auto_delete)
|
|
this.initImageLayersJson[path] = init_image_layers
|
|
|
|
}
|
|
|
|
}catch(e){
|
|
console.warn(e)
|
|
}
|
|
}
|
|
|
|
hasViewerImage(path){
|
|
if (this.pathToViewerImage.hasOwnProperty(path)){
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
addOutputImage(layer,path){
|
|
|
|
const outputImage = new OutputImage(layer,path)
|
|
|
|
this.outputImages.push(outputImage)
|
|
this.pathToViewerImage[path] = outputImage//
|
|
return outputImage
|
|
}
|
|
addInitImage(group,snapshot,solid_background,path,auto_delete){
|
|
const initImage = new InitImage(group,snapshot,solid_background,path)
|
|
initImage.setAutoDelete(auto_delete)
|
|
this.initImages.push(initImage)
|
|
this.pathToViewerImage[path] = initImage
|
|
return initImage
|
|
}
|
|
addMask(group,white_mark,solid_background,path){
|
|
const mask = new InitMaskImage(group,white_mark,solid_background,path)
|
|
|
|
this.initMaskImage = mask
|
|
this.pathToViewerImage[path] = mask
|
|
return mask
|
|
}
|
|
deleteAll(){
|
|
|
|
}
|
|
keepAll(){
|
|
|
|
}
|
|
keepSelected(){
|
|
|
|
}
|
|
deleteSelected(){
|
|
|
|
}
|
|
deleteInitImages(){
|
|
|
|
}
|
|
deleteMask(){
|
|
|
|
}
|
|
}
|
|
|
|
module.exports = {
|
|
OutputImage,
|
|
InitImage,
|
|
InitMaskImage,
|
|
ViewerObjState,
|
|
ViewerManager
|
|
}
|