Skip to content

Commit 2bc9629

Browse files
AbdullahAlfarajAbdullahAlfaraj
committed
create a ViewerImage class
1 parent 2f7cefa commit 2bc9629

File tree

2 files changed

+174
-20
lines changed

2 files changed

+174
-20
lines changed

‎index.js

Lines changed: 73 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const dialog_box = require('./dialog_box')
1515
const {entrypoints} = require('uxp')
1616
const html_manip = require('./html_manip')
1717
const export_png = require('./export_png')
18+
const viewer = require('./viewer')
1819

1920
async function getUniqueDocumentId () {
2021
try {
@@ -1545,6 +1546,8 @@ function removeInitImageFromViewer(){
15451546
function removeMaskFromViewer(){
15461547

15471548
}
1549+
1550+
15481551
async function viewerImageClickHandler(img,viewer_layers){
15491552

15501553

@@ -1562,6 +1565,7 @@ async function viewerImageClickHandler(img,viewer_layers){
15621565
//turn off all layers linked the viewer tab
15631566
for(cont_layer of viewer_layers){
15641567
try{
1568+
//viewerImageObj.visible(false)
15651569
let i = 0
15661570
//make all layers of that entry invisible
15671571
for (layer of cont_layer.layer ){
@@ -1572,6 +1576,7 @@ async function viewerImageClickHandler(img,viewer_layers){
15721576
}
15731577

15741578
//if the layer id of the first layer in the group container
1579+
//viewerImageObj.isSameLayer(layer_id)
15751580
if (cont_layer.layer[0].id == layer_id){
15761581
visible_cont = cont_layer
15771582
}
@@ -1586,12 +1591,56 @@ async function viewerImageClickHandler(img,viewer_layers){
15861591
for (layer of visible_cont.layer){
15871592

15881593
layer.visible = visible_cont.visibleOn[i]
1589-
g_visible_layer_path = layer_path //why do we store the layer_path?
1594+
g_visible_layer_path = layer_path //we store the path of the visible layer so we can acess it later in deleteHidden
15901595
i++
15911596
}
15921597

15931598

15941599

1600+
})
1601+
1602+
})
1603+
}
1604+
async function NewViewerImageClickHandler(img,viewer_layers){
1605+
1606+
1607+
img.addEventListener('click',async (e)=>{
1608+
//turn off all layers
1609+
//select the layer this image represent and turn it on
1610+
await executeAsModal(async ()=>{
1611+
const img = e.target
1612+
const layer_id = parseInt(img.dataset.image_id)
1613+
console.log("the layer id = ",layer_id)
1614+
const layer_path = img.dataset.image_path
1615+
let selectedViewerImageObj
1616+
// Array.isArray(layer)
1617+
1618+
//turn off all layers linked the viewer tab
1619+
for(viewerImageObj of viewer_layers){
1620+
try{
1621+
//viewerImageObj.visible(false)
1622+
1623+
//make all layers of that entry invisible
1624+
viewerImageObj.visible(false)
1625+
1626+
//if the layer id of the first layer in the group container
1627+
//viewerImageObj.isSameLayer(layer_id)
1628+
if (viewerImageObj.isSameLayer(layer_id)){
1629+
selectedViewerImageObj = viewerImageObj
1630+
}
1631+
} catch (e){
1632+
console.error("cannot hide a layer: ",e)
1633+
}
1634+
}
1635+
1636+
1637+
1638+
selectedViewerImageObj.visible(true)
1639+
selectedViewerImageObj.select(true)
1640+
g_visible_layer_path = layer_path //we store the path of the visible layer so we can acess it later in deleteHidden
1641+
1642+
1643+
15951644
})
15961645

15971646
})
@@ -1666,28 +1715,32 @@ async function loadViewerImages(){
16661715
image_paths = Object.keys(g_image_path_to_layer);
16671716
console.log("image_paths: ",image_paths)
16681717
let i = 0
1669-
const viewer_layers = Object.keys(g_image_path_to_layer).map(key => makeViewerLayer(g_image_path_to_layer[key]))
1670-
// g_viewer_layers = []// layer = {"layer":[mask_group,white_stroke,solid_black],visibleOn:[true,true,false],visibleOff:[false,false,false]}
16711718

1672-
1673-
if(g_init_image_related_layers.hasOwnProperty('init_image_group')){
1719+
// const viewer_layers = Object.keys(g_image_path_to_layer).map(path => makeViewerLayer(g_image_path_to_layer[path]))
1720+
1721+
const viewer_layers = Object.keys(g_image_path_to_layer).map(path => new viewer.OutputImage(g_image_path_to_layer[path],path))
16741722

1675-
const viewer_init_image_layer = makeViewerInitImageLayer(g_init_image_related_layers['init_image_group'],g_init_image_related_layers['init_image_layer'],g_init_image_related_layers['solid_white'])//make init image viewer container layer
1676-
const init_img_html = createViewerImgHtml('./server/python_server/init_images/',g_init_image_name,g_init_image_related_layers['init_image_group'].id)
1677-
container.appendChild(init_img_html)
1678-
viewer_layers.push(viewer_init_image_layer)
1679-
await viewerImageClickHandler(init_img_html,viewer_layers)// create click handler for each images
1680-
}
1723+
16811724

1682-
if(g_mask_related_layers.hasOwnProperty('mask_group')){
1683-
const viewer_mask_layer = makeViewerMaskLayer(g_mask_related_layers['mask_group'],g_mask_related_layers['white_mark'],g_mask_related_layers['solid_black'])//make mask viewer layer
1684-
const mask_img_html = createViewerImgHtml('./server/python_server/init_images/',g_init_image_mask_name,g_mask_related_layers['mask_group'].id)
1685-
container.appendChild(mask_img_html)
16861725

1687-
//add init mask image
1688-
viewer_layers.push(viewer_mask_layer)
1689-
await viewerImageClickHandler(mask_img_html,viewer_layers)// create click handler for each images
1690-
}
1726+
// if(g_init_image_related_layers.hasOwnProperty('init_image_group')){
1727+
1728+
// const viewer_init_image_layer = makeViewerInitImageLayer(g_init_image_related_layers['init_image_group'],g_init_image_related_layers['init_image_layer'],g_init_image_related_layers['solid_white'])//make init image viewer container layer
1729+
// const init_img_html = createViewerImgHtml('./server/python_server/init_images/',g_init_image_name,g_init_image_related_layers['init_image_group'].id)
1730+
// container.appendChild(init_img_html)
1731+
// viewer_layers.push(viewer_init_image_layer)
1732+
// await viewerImageClickHandler(init_img_html,viewer_layers)// create click handler for each images
1733+
// }
1734+
1735+
// if(g_mask_related_layers.hasOwnProperty('mask_group')){
1736+
// const viewer_mask_layer = makeViewerMaskLayer(g_mask_related_layers['mask_group'],g_mask_related_layers['white_mark'],g_mask_related_layers['solid_black'])//make mask viewer layer
1737+
// const mask_img_html = createViewerImgHtml('./server/python_server/init_images/',g_init_image_mask_name,g_mask_related_layers['mask_group'].id)
1738+
// container.appendChild(mask_img_html)
1739+
1740+
// //add init mask image
1741+
// viewer_layers.push(viewer_mask_layer)
1742+
// await viewerImageClickHandler(mask_img_html,viewer_layers)// create click handler for each images
1743+
// }
16911744

16921745

16931746

@@ -1703,7 +1756,7 @@ async function loadViewerImages(){
17031756

17041757
//add on click event to img
17051758

1706-
await viewerImageClickHandler(img,viewer_layers)
1759+
await NewViewerImageClickHandler(img,viewer_layers)
17071760
i++
17081761
}
17091762

‎viewer.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
2+
// output image class: one image to one layer
3+
// * path:
4+
// * image layer
5+
// * viewer()
6+
// * select()
7+
// * isLayerValid()
8+
// * init image class: has three layers
9+
// * path :
10+
// * init image group layer
11+
// * init image layer
12+
// * background layer
13+
// * isLayerValid()
14+
// * mask class:
15+
// * path
16+
// * mask group
17+
// * white mask
18+
// * balck layer
19+
// * select()
20+
// * viewe()
21+
// * isLayerValid()
22+
23+
const psapi = require('./psapi')
24+
25+
class ViewerImage{
26+
constructor(){
27+
28+
}
29+
visible(visibleOn)
30+
{
31+
32+
}
33+
select() {
34+
35+
}
36+
isLayerValid(){
37+
38+
}
39+
isSameLayer(layer_id){
40+
41+
}
42+
}
43+
44+
class OutputImage extends ViewerImage {
45+
constructor(layer, path) {
46+
super()
47+
this.layer = layer
48+
this.path = path;
49+
50+
51+
52+
}
53+
visible(visibleOn)
54+
{
55+
super.visible(visibleOn)
56+
if(this.isLayerValid()){
57+
this.layer.visible = visibleOn
58+
}
59+
}
60+
select() {
61+
super.select()
62+
if(this.isLayerValid()){
63+
psapi.selectLayers([this.layer])
64+
// console.log(`${this.layer.id} got selected`);
65+
}
66+
}
67+
isLayerValid(){
68+
super.isLayerValid()
69+
//check if layer is defined or not
70+
//true if the layer is defined
71+
//false otherwise
72+
let isValid = false
73+
if (typeof this.layer !== "undefined")
74+
{
75+
isValid = true
76+
}
77+
return isValid
78+
}
79+
isSameLayer(layer_id){
80+
super.isSameLayer(layer_id)
81+
const is_same = this.layer.id == layer_id
82+
return is_same
83+
}
84+
}
85+
86+
class InitImage extends OutputImage {
87+
constructor(name) {
88+
super(name); // call the super class constructor and pass in the name parameter
89+
}
90+
91+
// speak() {
92+
// console.log(`${this.name} barks.`);
93+
// }
94+
}
95+
96+
97+
module.exports = {
98+
OutputImage,
99+
InitImage
100+
}
101+

0 commit comments

Comments
 (0)