Skip to content

Commit 8210ec3

Browse files
AbdullahAlfarajAbdullahAlfaraj
authored
Merge pull request #47 from AbdullahAlfaraj/refactor-viewer
Refactor viewer
2 parents 1bfa4f2 + 929b83e commit 8210ec3

File tree

3 files changed

+292
-12
lines changed

3 files changed

+292
-12
lines changed

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,7 @@
272272
<div>
273273
<div style="display:inline-flex;">
274274
<div id="batchNumberViewerTabContainer" >
275+
<!-- we will append here batch number field here -->
275276
<!-- <sp-label>Images:</sp-label> -->
276277
<!-- <sp-textfield id="tiNumberOfImages" type="number" placeholder="1"
277278
value="1"></sp-textfield> -->

‎index.js

Lines changed: 69 additions & 12 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,36 @@ 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]}
1718+
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))
1722+
1723+
16711724

16721725

16731726
if(g_init_image_related_layers.hasOwnProperty('init_image_group')){
1674-
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
1727+
const viewerInitImage= new viewer.InitImage(g_init_image_related_layers['init_image_group'],g_init_image_related_layers['init_image_layer'],g_init_image_related_layers['solid_white'],'./server/python_server/init_images/')
1728+
viewer_layers.push(viewerInitImage)
1729+
// 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
16761730
const init_img_html = createViewerImgHtml('./server/python_server/init_images/',g_init_image_name,g_init_image_related_layers['init_image_group'].id)
16771731
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
1732+
// viewer_layers.push(viewer_init_image_layer)
1733+
await NewViewerImageClickHandler(init_img_html,viewer_layers)// create click handler for each images
16801734
}
16811735

16821736
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
1737+
const viewerInitMaskImage= new viewer.InitMaskImage(g_mask_related_layers['mask_group'],g_mask_related_layers['white_mark'],g_mask_related_layers['solid_black'],'./server/python_server/init_images/')
1738+
1739+
// 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
16841740
const mask_img_html = createViewerImgHtml('./server/python_server/init_images/',g_init_image_mask_name,g_mask_related_layers['mask_group'].id)
16851741
container.appendChild(mask_img_html)
16861742

16871743
//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-
}
1744+
viewer_layers.push(viewerInitMaskImage)
1745+
await NewViewerImageClickHandler(mask_img_html,viewer_layers)// create click handler for each images ,viewer_layers)// create click handler for each images
1746+
// await viewerImageClickHandler(mask_img_html,viewer_layers)// create click handler for each images
1747+
}
16911748

16921749

16931750

@@ -1703,7 +1760,7 @@ async function loadViewerImages(){
17031760

17041761
//add on click event to img
17051762

1706-
await viewerImageClickHandler(img,viewer_layers)
1763+
await NewViewerImageClickHandler(img,viewer_layers)
17071764
i++
17081765
}
17091766

‎viewer.js

Lines changed: 222 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
// output image class: one image to one layer
2+
// * path:
3+
// * image layer
4+
// * viewer()
5+
// * select()
6+
// * isLayerValid()
7+
// * init image class: has three layers
8+
// * path :
9+
// * init image group layer
10+
// * init image layer
11+
// * background layer
12+
// * isLayerValid()
13+
// * mask class:
14+
// * path
15+
// * mask group
16+
// * white mask
17+
// * balck layer
18+
// * select()
19+
// * viewe()
20+
// * isLayerValid()
21+
22+
const psapi = require('./psapi')
23+
24+
class ViewerImage {
25+
constructor () {}
26+
visible (visibleOn) {}
27+
select () {}
28+
isLayerValid () {}
29+
isSameLayer (layer_id) {}
30+
}
31+
32+
class OutputImage extends ViewerImage {
33+
constructor (layer, path) {
34+
super()
35+
this.layer = layer
36+
this.path = path
37+
}
38+
visible (visibleOn) {
39+
super.visible(visibleOn)
40+
if (this.isLayerValid()) {
41+
this.layer.visible = visibleOn
42+
}
43+
}
44+
select () {
45+
super.select()
46+
if (this.isLayerValid()) {
47+
psapi.selectLayers([this.layer])
48+
// console.log(`${this.layer.id} got selected`);
49+
}
50+
}
51+
isLayerValid () {
52+
super.isLayerValid()
53+
//check if layer is defined or not
54+
//true if the layer is defined
55+
//false otherwise
56+
let isValid = false
57+
if (typeof this.layer !== 'undefined') {
58+
isValid = true
59+
}
60+
return isValid
61+
}
62+
isSameLayer (layer_id) {
63+
super.isSameLayer(layer_id)
64+
const is_same = this.layer.id == layer_id
65+
return is_same
66+
}
67+
}
68+
69+
class InitImage extends ViewerImage {
70+
constructor (init_group, init_snapshot, solid_layer, path) {
71+
super()
72+
this.init_group = init_group
73+
this.init_snapshot = init_snapshot
74+
this.solid_layer = solid_layer
75+
76+
this.path = path
77+
}
78+
visible (visibleOn) {
79+
super.visible(visibleOn)
80+
// const isValid = this.isLayerValid()
81+
let visibleValues = []
82+
if (visibleOn) {
83+
visibleValues = [true, true, true]
84+
} else {
85+
visibleValues = [false, false, false]
86+
}
87+
88+
if (this.isLayerValid(this.init_group)) {
89+
this.init_group.visible = visibleValues[0]
90+
}
91+
if (this.isLayerValid(this.init_snapshot)) {
92+
this.init_snapshot.visible = visibleValues[1]
93+
}
94+
if (this.isLayerValid(this.solid_layer)) {
95+
this.solid_layer.visible = visibleValues[2]
96+
}
97+
}
98+
99+
select () {
100+
super.select()
101+
102+
const selectLayers = []
103+
if (this.isLayerValid(this.init_group)) {
104+
105+
selectLayers.push(this.init_group)
106+
}
107+
// if (this.isLayerValid(this.init_snapshot)) {
108+
109+
// selectLayers.push(this.init_snapshot)
110+
// }
111+
// if (this.isLayerValid(this.solid_layer)) {
112+
// selectLayers.push(this.solid_layer)
113+
// }
114+
115+
psapi.selectLayers(selectLayers)
116+
// console.log(`${this.layer.id} got selected`);
117+
}
118+
119+
isLayerValid (layer) {
120+
super.isLayerValid()
121+
//check if layer is defined or not
122+
//true if the layer is defined
123+
//false otherwise
124+
// let isValid = [false,false,false]
125+
let isValid = false
126+
if (typeof layer !== 'undefined') {
127+
isValid = true
128+
}
129+
130+
return isValid
131+
}
132+
isSameLayer (layer_id) {
133+
super.isSameLayer(layer_id)
134+
let is_same = false
135+
if(this.isLayerValid(this.init_group)){
136+
is_same = this.init_group.id == layer_id
137+
138+
}
139+
return is_same
140+
}
141+
}
142+
143+
class InitMaskImage extends ViewerImage {
144+
constructor (mask_group, white_mark, solid_black, path) {
145+
super()
146+
this.mask_group = mask_group
147+
this.white_mark = white_mark
148+
this.solid_black = solid_black
149+
150+
this.path = path
151+
}
152+
visible (visibleOn) {
153+
super.visible(visibleOn)
154+
// const isValid = this.isLayerValid()
155+
let visibleValues = []
156+
if (visibleOn) {
157+
visibleValues = [true, true, true]
158+
} else {
159+
visibleValues = [false, false, false]
160+
}
161+
162+
if (this.isLayerValid(this.mask_group)) {
163+
this.mask_group.visible = visibleValues[0]
164+
}
165+
if (this.isLayerValid(this.white_mark)) {
166+
this.white_mark.visible = visibleValues[1]
167+
}
168+
if (this.isLayerValid(this.solid_black)) {
169+
this.solid_black.visible = visibleValues[2]
170+
}
171+
}
172+
173+
select () {
174+
super.select()
175+
176+
const selectLayers = []
177+
if (this.isLayerValid(this.mask_group)) {
178+
179+
selectLayers.push(this.mask_group)
180+
}
181+
// if (this.isLayerValid(this.init_snapshot)) {
182+
183+
// selectLayers.push(this.init_snapshot)
184+
// }
185+
// if (this.isLayerValid(this.solid_layer)) {
186+
// selectLayers.push(this.solid_layer)
187+
// }
188+
189+
psapi.selectLayers(selectLayers)
190+
// console.log(`${this.layer.id} got selected`);
191+
}
192+
193+
isLayerValid (layer) {
194+
super.isLayerValid()
195+
//check if layer is defined or not
196+
//true if the layer is defined
197+
//false otherwise
198+
// let isValid = [false,false,false]
199+
let isValid = false
200+
if (typeof layer !== 'undefined') {
201+
isValid = true
202+
}
203+
204+
return isValid
205+
}
206+
isSameLayer (layer_id) {
207+
super.isSameLayer(layer_id)
208+
let is_same = false
209+
if(this.isLayerValid(this.mask_group)){
210+
is_same = this.mask_group.id == layer_id
211+
212+
}
213+
return is_same
214+
}
215+
}
216+
217+
218+
module.exports = {
219+
OutputImage,
220+
InitImage,
221+
InitMaskImage,
222+
}

0 commit comments

Comments
 (0)