From 99cbb9a781b4c6ab98a158b422cedef7a0597822 Mon Sep 17 00:00:00 2001 From: Guanhua Hou Date: Mon, 28 Aug 2023 14:51:35 +0800 Subject: [PATCH 1/2] added: counter example --- examples/counter/design.json | 815 ++++++++++++++++++++ examples/counter/event_listeners.json | 10 + examples/counter/js/button_onclick.mjs | 25 + src/Domain/Layout/Layout.cpp | 4 +- src/Domain/include/Domain/Layout/Layout.hpp | 4 +- 5 files changed, 854 insertions(+), 4 deletions(-) create mode 100644 examples/counter/design.json create mode 100644 examples/counter/event_listeners.json create mode 100644 examples/counter/js/button_onclick.mjs diff --git a/examples/counter/design.json b/examples/counter/design.json new file mode 100644 index 000000000..02ee703f9 --- /dev/null +++ b/examples/counter/design.json @@ -0,0 +1,815 @@ +{ + "fileName": "hello-sketch", + "fileType": 1, + "frames": [ + { + "alphaMaskBy": [], + "bounds": { + "class": "rect", + "constrainProportions": false, + "height": 372.0, + "width": 566.0, + "x": 0.0, + "y": 0.0 + }, + "childObjects": [ + { + "alphaMaskBy": [], + "bounds": { + "class": "rect", + "constrainProportions": false, + "height": 42.0, + "width": 150.0, + "x": 0.0, + "y": 0.0 + }, + "class": "path", + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "frame": { + "class": "rect", + "constrainProportions": false, + "height": 42.0, + "width": 150.0, + "x": 92.0, + "y": -169.0 + }, + "id": "20E5A8D8-9B8F-4914-87EF-2357BD581D54", + "isLocked": false, + "maskType": 0, + "matrix": [ + 1.0, + 0.0, + 0.0, + 1.0, + 92.0, + -169.0 + ], + "name": "Rectangle", + "outlineMaskBy": [], + "overflow": 1, + "pathType": 0, + "shape": { + "class": "shape", + "subshapes": [ + { + "booleanOperation": 4, + "class": "subshape", + "subGeometry": { + "class": "contour", + "closed": true, + "points": [ + { + "class": "pointAttr", + "cornerStyle": 0, + "point": [ + 0.0, + 0.0 + ], + "radius": 0.0 + }, + { + "class": "pointAttr", + "cornerStyle": 0, + "point": [ + 150.0, + 0.0 + ], + "radius": 0.0 + }, + { + "class": "pointAttr", + "cornerStyle": 0, + "point": [ + 150.0, + -42.0 + ], + "radius": 0.0 + }, + { + "class": "pointAttr", + "cornerStyle": 0, + "point": [ + 0.0, + -42.0 + ], + "radius": 0.0 + } + ] + } + } + ], + "windingRule": 1 + }, + "style": { + "blurs": [ + { + "center": [ + 0.5, + 0.5 + ], + "class": "blur", + "isEnabled": false, + "motionAngle": 0.0, + "radius": 10.0, + "saturation": 1.0, + "type": 0 + } + ], + "borders": [ + { + "class": "border", + "color": { + "alpha": 1.0, + "blue": 0.592, + "class": "color", + "green": 0.592, + "red": 0.592 + }, + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "dashedOffset": 0.0, + "dashedPattern": [], + "endMarkerType": 0, + "fillType": 0, + "flat": 0.0, + "gradient": { + "class": "gradient", + "instance": { + "class": "gradientLinear", + "from": [ + 0.5, + 0.0 + ], + "invert": false, + "stops": [ + { + "class": "gradientStop", + "color": { + "alpha": 1.0, + "blue": 1.0, + "class": "color", + "green": 1.0, + "red": 1.0 + }, + "midPoint": 0.5, + "position": 0.0 + }, + { + "class": "gradientStop", + "color": { + "alpha": 1.0, + "blue": 0.0, + "class": "color", + "green": 0.0, + "red": 0.0 + }, + "midPoint": 0.5, + "position": 1.0 + } + ], + "to": [ + 0.5, + 1.0 + ] + } + }, + "isEnabled": true, + "lineCapStyle": 0, + "lineJoinStyle": 0, + "miterLimit": 10.0, + "position": 1, + "startMarkerType": 0, + "style": 0, + "thickness": 1 + } + ], + "class": "style", + "fills": [ + { + "class": "fill", + "color": { + "alpha": 1.0, + "blue": 0.847, + "class": "color", + "green": 0.847, + "red": 0.847 + }, + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "fillType": 0, + "gradient": { + "class": "gradient", + "instance": { + "class": "gradientLinear", + "from": [ + 0.5, + 0.0 + ], + "invert": false, + "stops": [ + { + "class": "gradientStop", + "color": { + "alpha": 1.0, + "blue": 1.0, + "class": "color", + "green": 1.0, + "red": 1.0 + }, + "midPoint": 0.5, + "position": 0.0 + }, + { + "class": "gradientStop", + "color": { + "alpha": 1.0, + "blue": 0.0, + "class": "color", + "green": 0.0, + "red": 0.0 + }, + "midPoint": 0.5, + "position": 1.0 + } + ], + "to": [ + 0.5, + 1.0 + ] + } + }, + "isEnabled": false + } + ], + "shadows": [] + }, + "styleEffectMaskArea": 0, + "visible": true + }, + { + "alphaMaskBy": [], + "bounds": { + "class": "rect", + "constrainProportions": false, + "height": 42.0, + "width": 150.0, + "x": 0.0, + "y": 0.0 + }, + "class": "path", + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "frame": { + "class": "rect", + "constrainProportions": false, + "height": 42.0, + "width": 150.0, + "x": 325.0, + "y": -169.0 + }, + "id": "D9DAF361-1980-4CC2-B4A0-DA729C88C3C6", + "isLocked": false, + "maskType": 0, + "matrix": [ + 1.0, + 0.0, + 0.0, + 1.0, + 325.0, + -169.0 + ], + "name": " ", + "outlineMaskBy": [], + "overflow": 1, + "pathType": 0, + "shape": { + "class": "shape", + "subshapes": [ + { + "booleanOperation": 4, + "class": "subshape", + "subGeometry": { + "class": "contour", + "closed": true, + "points": [ + { + "class": "pointAttr", + "cornerStyle": 0, + "point": [ + 0.0, + 0.0 + ], + "radius": 0.0 + }, + { + "class": "pointAttr", + "cornerStyle": 0, + "point": [ + 150.0, + 0.0 + ], + "radius": 0.0 + }, + { + "class": "pointAttr", + "cornerStyle": 0, + "point": [ + 150.0, + -42.0 + ], + "radius": 0.0 + }, + { + "class": "pointAttr", + "cornerStyle": 0, + "point": [ + 0.0, + -42.0 + ], + "radius": 0.0 + } + ] + } + } + ], + "windingRule": 1 + }, + "style": { + "blurs": [ + { + "center": [ + 0.5, + 0.5 + ], + "class": "blur", + "isEnabled": false, + "motionAngle": 0.0, + "radius": 10.0, + "saturation": 1.0, + "type": 0 + } + ], + "borders": [ + { + "class": "border", + "color": { + "alpha": 1.0, + "blue": 0.592, + "class": "color", + "green": 0.592, + "red": 0.592 + }, + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "dashedOffset": 0.0, + "dashedPattern": [], + "endMarkerType": 0, + "fillType": 0, + "flat": 0.0, + "gradient": { + "class": "gradient", + "instance": { + "class": "gradientLinear", + "from": [ + 0.5, + 0.0 + ], + "invert": false, + "stops": [ + { + "class": "gradientStop", + "color": { + "alpha": 1.0, + "blue": 1.0, + "class": "color", + "green": 1.0, + "red": 1.0 + }, + "midPoint": 0.5, + "position": 0.0 + }, + { + "class": "gradientStop", + "color": { + "alpha": 1.0, + "blue": 0.0, + "class": "color", + "green": 0.0, + "red": 0.0 + }, + "midPoint": 0.5, + "position": 1.0 + } + ], + "to": [ + 0.5, + 1.0 + ] + } + }, + "isEnabled": true, + "lineCapStyle": 0, + "lineJoinStyle": 0, + "miterLimit": 10.0, + "position": 1, + "startMarkerType": 0, + "style": 0, + "thickness": 1 + } + ], + "class": "style", + "fills": [ + { + "class": "fill", + "color": { + "alpha": 1.0, + "blue": 0.847, + "class": "color", + "green": 0.847, + "red": 0.847 + }, + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "fillType": 0, + "gradient": { + "class": "gradient", + "instance": { + "class": "gradientLinear", + "from": [ + 0.5, + 0.0 + ], + "invert": false, + "stops": [ + { + "class": "gradientStop", + "color": { + "alpha": 1.0, + "blue": 1.0, + "class": "color", + "green": 1.0, + "red": 1.0 + }, + "midPoint": 0.5, + "position": 0.0 + }, + { + "class": "gradientStop", + "color": { + "alpha": 1.0, + "blue": 0.0, + "class": "color", + "green": 0.0, + "red": 0.0 + }, + "midPoint": 0.5, + "position": 1.0 + } + ], + "to": [ + 0.5, + 1.0 + ] + } + }, + "isEnabled": true + } + ], + "shadows": [] + }, + "styleEffectMaskArea": 0, + "visible": true + }, + { + "alphaMaskBy": [], + "attr": [ + { + "baseline": 0, + "baselineShift": 0.0, + "class": "fontAttr", + "fillUseType": 1, + "fills": [ + { + "class": "fill", + "color": { + "alpha": 0.9, + "blue": 0.0, + "class": "color", + "green": 0.0, + "red": 0.0 + }, + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "fillType": 0, + "isEnabled": true + } + ], + "horizontalAlignment": 2, + "horizontalScale": 1.0, + "kerning": false, + "length": 5, + "letterSpacing": 0.0, + "lettertransform": 0, + "lineSpace": 24.0, + "linethrough": false, + "name": "PingFangSC-Regular", + "proportionalSpacing": 0.0, + "rotate": 0.0, + "size": 16.0, + "textParagraph": { + "class": "textParagraph", + "paragraphSpacing": 0.0 + }, + "underline": 0, + "verticalScale": 1.0 + } + ], + "bounds": { + "class": "rect", + "constrainProportions": false, + "height": 22.0, + "width": 46.0, + "x": 0.0, + "y": 0.0 + }, + "class": "text", + "content": "Count", + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "frame": { + "class": "rect", + "constrainProportions": false, + "height": 22.0, + "width": 46.0, + "x": 377.0, + "y": -179.0 + }, + "frameMode": 1, + "id": "2633A44B-F00D-467C-AA6E-5E0B692EC376", + "isLocked": false, + "maskType": 0, + "matrix": [ + 1.0, + 0.0, + 0.0, + 1.0, + 377.0, + -179.0 + ], + "name": "Count", + "outlineMaskBy": [], + "overflow": 1, + "style": { + "blurs": [ + { + "center": [ + 0.5, + 0.5 + ], + "class": "blur", + "isEnabled": false, + "motionAngle": 0.0, + "radius": 10.0, + "saturation": 1.0, + "type": 0 + } + ], + "borders": [], + "class": "style", + "fills": [], + "shadows": [] + }, + "styleEffectMaskArea": 0, + "verticalAlignment": 0, + "visible": true + }, + { + "alphaMaskBy": [], + "attr": [ + { + "baseline": 0, + "baselineShift": 0.0, + "class": "fontAttr", + "fillUseType": 1, + "fills": [ + { + "class": "fill", + "color": { + "alpha": 0.9, + "blue": 0.0, + "class": "color", + "green": 0.0, + "red": 0.0 + }, + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "fillType": 0, + "isEnabled": true + } + ], + "horizontalAlignment": 2, + "horizontalScale": 1.0, + "kerning": false, + "length": 1, + "letterSpacing": 0.0, + "lettertransform": 0, + "lineSpace": 24.0, + "linethrough": false, + "name": "ArialMT", + "proportionalSpacing": 0.0, + "rotate": 0.0, + "size": 32.0, + "textParagraph": { + "class": "textParagraph", + "paragraphSpacing": 0.0 + }, + "underline": 0, + "verticalScale": 1.0 + } + ], + "bounds": { + "class": "rect", + "constrainProportions": false, + "height": 36.0, + "width": 121.0, + "x": 0.0, + "y": 0.0 + }, + "class": "text", + "content": "0", + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "frame": { + "class": "rect", + "constrainProportions": false, + "height": 36.0, + "width": 121.0, + "x": 107.0, + "y": -172.0 + }, + "frameMode": 2, + "id": "038F6DB1-FE50-4502-B873-278DB19189B8", + "isLocked": false, + "maskType": 0, + "matrix": [ + 1.0, + 0.0, + 0.0, + 1.0, + 107.0, + -172.0 + ], + "name": "2", + "outlineMaskBy": [], + "overflow": 1, + "style": { + "blurs": [ + { + "center": [ + 0.5, + 0.5 + ], + "class": "blur", + "isEnabled": false, + "motionAngle": 0.0, + "radius": 10.0, + "saturation": 1.0, + "type": 0 + } + ], + "borders": [], + "class": "style", + "fills": [], + "shadows": [] + }, + "styleEffectMaskArea": 0, + "verticalAlignment": 0, + "visible": true + } + ], + "class": "frame", + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "frame": { + "class": "rect", + "constrainProportions": false, + "height": 372.0, + "width": 566.0, + "x": 0.0, + "y": 0.0 + }, + "id": "A7A23B73-C356-41AA-96D4-B8355A75FCD3", + "isLocked": false, + "maskType": 0, + "matrix": [ + 1.0, + 0.0, + 0.0, + 1.0, + 0.0, + 0.0 + ], + "name": "Small", + "outlineMaskBy": [], + "overflow": 1, + "style": { + "blurs": [ + { + "center": [ + 0.5, + 0.5 + ], + "class": "blur", + "isEnabled": false, + "motionAngle": 0.0, + "radius": 10.0, + "saturation": 1.0, + "type": 0 + } + ], + "borders": [], + "class": "style", + "fills": [ + { + "class": "fill", + "color": { + "alpha": 1.0, + "blue": 1.0, + "class": "color", + "green": 1.0, + "red": 1.0 + }, + "contextSettings": { + "blendMode": 0, + "class": "graphicsContextSettings", + "isolateBlending": false, + "opacity": 1.0, + "transparencyKnockoutGroup": 0 + }, + "fillType": 0, + "isEnabled": true + } + ], + "shadows": [] + }, + "styleEffectMaskArea": 0, + "visible": true + } + ] +} \ No newline at end of file diff --git a/examples/counter/event_listeners.json b/examples/counter/event_listeners.json new file mode 100644 index 000000000..0f5e4a2c4 --- /dev/null +++ b/examples/counter/event_listeners.json @@ -0,0 +1,10 @@ +{ + "/frames/0/childObjects/1": { + "click": [ + { + "createdAt": 1691118721013, + "fileName": "js/button_onclick.mjs" + } + ] + } +} \ No newline at end of file diff --git a/examples/counter/js/button_onclick.mjs b/examples/counter/js/button_onclick.mjs new file mode 100644 index 000000000..70e9d41e6 --- /dev/null +++ b/examples/counter/js/button_onclick.mjs @@ -0,0 +1,25 @@ + +const { DesignDocument, getVggSdk } = await import('https://s3.vgg.cool/test/js/editor/vgg-sdk.esm.js'); +const doc = await DesignDocument.getDesignDocument(); + +function handleEvent(event) { + console.log('handle event:', event, ', type:', event.type, ', target:', event.target); + switch (event.type) { + case 'click': { + // const valuePath = '/frames/0/childObjects/3/content'; + const valueNode = doc.frames[0].childObjects[3]; + + let count = valueNode.content; + count = parseInt(count) + 1; + + valueNode.content = count.toString(); + } + break; + + default: + break; + } + +} + +export default handleEvent; diff --git a/src/Domain/Layout/Layout.cpp b/src/Domain/Layout/Layout.cpp index ec62ff770..413262d37 100644 --- a/src/Domain/Layout/Layout.cpp +++ b/src/Domain/Layout/Layout.cpp @@ -15,10 +15,8 @@ void Layout::Layout::layout(Size size) std::shared_ptr Layout::Layout::createLayoutTree() { - auto doc = m_model->designDoc()->content(); - // todo, select frame - auto& frame = doc[K_FRAME][0]; + auto& frame = m_designJson["frames"][0]; if (!frame.is_object()) { WARN("no frame in design file"); diff --git a/src/Domain/include/Domain/Layout/Layout.hpp b/src/Domain/include/Domain/Layout/Layout.hpp index c722bd96a..2117d2716 100644 --- a/src/Domain/include/Domain/Layout/Layout.hpp +++ b/src/Domain/include/Domain/Layout/Layout.hpp @@ -31,7 +31,9 @@ class Layout nlohmann::json designDoc() { ExpandSymbol expandeSymbol{ m_designJson }; - return expandeSymbol(); + m_designJson = expandeSymbol(); + + return m_designJson; } void layout(Size size); From b52094b55e4c35f4421c1ea1056a8a689753ba98 Mon Sep 17 00:00:00 2001 From: Guanhua Hou Date: Wed, 30 Aug 2023 10:20:13 +0800 Subject: [PATCH 2/2] updated: counter example button state --- examples/counter/design.json | 2 +- examples/counter/event_listeners.json | 12 ++++++++++++ examples/counter/js/button_onclick.mjs | 14 +++++++++++++- 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/examples/counter/design.json b/examples/counter/design.json index 02ee703f9..da4a76807 100644 --- a/examples/counter/design.json +++ b/examples/counter/design.json @@ -448,7 +448,7 @@ { "class": "fill", "color": { - "alpha": 1.0, + "alpha": 0.5, "blue": 0.847, "class": "color", "green": 0.847, diff --git a/examples/counter/event_listeners.json b/examples/counter/event_listeners.json index 0f5e4a2c4..27bb2fc1b 100644 --- a/examples/counter/event_listeners.json +++ b/examples/counter/event_listeners.json @@ -5,6 +5,18 @@ "createdAt": 1691118721013, "fileName": "js/button_onclick.mjs" } + ], + "mousedown": [ + { + "createdAt": 1691118721013, + "fileName": "js/button_onclick.mjs" + } + ], + "mouseup": [ + { + "createdAt": 1691118721013, + "fileName": "js/button_onclick.mjs" + } ] } } \ No newline at end of file diff --git a/examples/counter/js/button_onclick.mjs b/examples/counter/js/button_onclick.mjs index 70e9d41e6..89fd7666b 100644 --- a/examples/counter/js/button_onclick.mjs +++ b/examples/counter/js/button_onclick.mjs @@ -5,6 +5,18 @@ const doc = await DesignDocument.getDesignDocument(); function handleEvent(event) { console.log('handle event:', event, ', type:', event.type, ', target:', event.target); switch (event.type) { + case 'mousedown': { + const buttonNode = doc.frames[0].childObjects[1]; + buttonNode.style.fills[0].color.alpha = 1.0; + break; + } + + case 'mouseup': { + const buttonNode = doc.frames[0].childObjects[1]; + buttonNode.style.fills[0].color.alpha = 0.5; + break; + } + case 'click': { // const valuePath = '/frames/0/childObjects/3/content'; const valueNode = doc.frames[0].childObjects[3]; @@ -13,8 +25,8 @@ function handleEvent(event) { count = parseInt(count) + 1; valueNode.content = count.toString(); - } break; + } default: break;