Skip to content

Commit

Permalink
Working also in Figjam
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoseLuisGJ
JoseLuisGJ committed Oct 13, 2022
1 parent b10f2c8 commit 9000f0f
Show file tree
Hide file tree
Showing 9 changed files with 250 additions and 147 deletions.
141 changes: 86 additions & 55 deletions dist/code.js
View file

Large diffs are not rendered by default.

19 changes: 15 additions & 4 deletions dist/ui.html
View file

Large diffs are not rendered by default.

19 changes: 15 additions & 4 deletions dist/ui.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
"main": "dist/code.js",
"ui": "dist/ui.html",
"editorType": [
"figma"
"figma","figjam"
]
}
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"viewport-mercator-project": "^7.0.1"
},
"devDependencies": {
"@figma/plugin-typings": "^1.15.0",
"@figma/plugin-typings": "^1.33.0",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"bootstrap": "^4.5.2",
Expand Down
13 changes: 13 additions & 0 deletions src/app/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const App = ({}) => {
const inputStyleID = useRef(null);

const [figmaComponents, setFigmaComponents] = useState([]);
const [editor, setEditor] = useState("figma");

const [mapMode, setMapMode] = useState("styles"); // styles or markers
const [styleMode, setStyleMode] = useState("mapboxStyle"); // mapboxStyle or customMapboxStyle
Expand Down Expand Up @@ -74,6 +75,14 @@ const App = ({}) => {
},
"*"
);
parent.postMessage(
{
pluginMessage: {
type: "ask-editorType"
}
},
"*"
);

// This is how we read messages sent from the plugin controller
window.onmessage = event => {
Expand All @@ -84,6 +93,9 @@ const App = ({}) => {
if (type === "components-response") {
setFigmaComponents(message);
}
if (type === "sending-editor") {
setEditor(storage);
}

let notifyStorage = false;
if (
Expand Down Expand Up @@ -221,6 +233,7 @@ const App = ({}) => {
accessToken={accessToken}
stateMarkers={stateMarkers}
markerImg={markerImg}
editor={editor}
/>
</div>
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/app/components/DrawMap.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ interface IMap {
accessToken: any;
stateMarkers: any;
markerImg: any;
editor: any;
}

const DrawMap: React.FC<IMap> = ({
Expand All @@ -26,7 +27,8 @@ const DrawMap: React.FC<IMap> = ({
isRetina,
accessToken,
stateMarkers,
markerImg
markerImg,
editor
}) => {
useEffect(() => {});

Expand Down Expand Up @@ -64,7 +66,7 @@ const DrawMap: React.FC<IMap> = ({
<div>
<div className="side-panel__footer p-2">
<button id="draw-map" className="primary" onClick={onDrawMap}>
Draw map to Figma
Draw map to {editor === "figma" ? <>Figma</> : <>FigJam</>}
</button>
</div>
</div>
Expand Down
191 changes: 113 additions & 78 deletions src/plugin/controller.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,94 +15,123 @@ figma.showUI(__html__, {

figma.ui.onmessage = msg => {
if (msg.type === "draw-map") {
/////////
// Map //
/////////
const nodes = [];
let imageHash = figma.createImage(msg.data).hash;
const rect = figma.createRectangle();
rect.name = "Basemap image";
rect.resize(msg.width, msg.height);
rect.fills = [{ type: "IMAGE", scaleMode: "FIT", imageHash }];
figma.currentPage.appendChild(rect);
// select the rectangle and focus the viewport
figma.currentPage.selection = [rect];
figma.viewport.scrollAndZoomIntoView([rect]);
nodes.push(rect);
/////////////
// Markers //
/////////////

let mapWidthOffset = (mapBoundary - msg.width) / 2;
let mapHeightOffset = (mapBoundary - msg.height) / 2;
if (figma.editorType == "figma") {
// Figma drawing
/////////
// Map //
/////////
const nodes = [];
let imageHash = figma.createImage(msg.data).hash;
const rect = figma.createRectangle();
rect.name = "Basemap image";
rect.resize(msg.width, msg.height);
rect.fills = [{ type: "IMAGE", scaleMode: "FIT", imageHash }];
figma.currentPage.appendChild(rect);
// select the rectangle and focus the viewport
figma.currentPage.selection = [rect];
figma.viewport.scrollAndZoomIntoView([rect]);
nodes.push(rect);
/////////////
// Markers //
/////////////

if (msg.markerImg == 1) {
// default marker option
// Create Master component
const markerComponent = figma.createComponent();
markerComponent.resize(16, 20);
markerComponent.name = "Default marker component";
let nodeSVG = figma.createNodeFromSvg(markerSVG);
markerComponent.appendChild(nodeSVG);
markerComponent.x = -100;
markerComponent.y = -100;
figma.currentPage.appendChild(markerComponent);
// Instances from master component
msg.markers.map(marker => {
let instanceMarker = markerComponent.createInstance();
instanceMarker.x = marker.x - mapWidthOffset;
instanceMarker.y = marker.y - mapHeightOffset;
instanceMarker.x -= instanceMarker.width / 2;
instanceMarker.y -= instanceMarker.height / 2;
figma.currentPage.appendChild(instanceMarker);
nodes.push(instanceMarker);
});
} else {
//Selected custom component
let selectedComponent = figma.root.findAll(
c => c.name === msg.markerImg && c.type === "COMPONENT"
);
msg.markers.map(marker => {
// @ts-ignore: Unreachable code error
let instanceMarker = selectedComponent[0].createInstance();
instanceMarker.x = marker.x - mapWidthOffset;
instanceMarker.y = marker.y - mapHeightOffset;
instanceMarker.x -= instanceMarker.width / 2;
instanceMarker.y -= instanceMarker.height / 2;
if (msg.markerImg == 1) {
// default marker option
// Create Master component
const markerComponent = figma.createComponent();
markerComponent.resize(16, 20);
markerComponent.name = "Default marker component";
let nodeSVG = figma.createNodeFromSvg(markerSVG);
markerComponent.appendChild(nodeSVG);
markerComponent.x = -100;
markerComponent.y = -100;
figma.currentPage.appendChild(markerComponent);
// Instances from master component
msg.markers.map(marker => {
let instanceMarker = markerComponent.createInstance();
instanceMarker.x = marker.x - mapWidthOffset;
instanceMarker.y = marker.y - mapHeightOffset;
instanceMarker.x -= instanceMarker.width / 2;
instanceMarker.y -= instanceMarker.height / 2;
figma.currentPage.appendChild(instanceMarker);
nodes.push(instanceMarker);
});
} else {
//Selected custom component
let selectedComponent = figma.root.findAll(
c => c.name === msg.markerImg && c.type === "COMPONENT"
);
msg.markers.map(marker => {
// @ts-ignore: Unreachable code error
let instanceMarker = selectedComponent[0].createInstance();
instanceMarker.x = marker.x - mapWidthOffset;
instanceMarker.y = marker.y - mapHeightOffset;
instanceMarker.x -= instanceMarker.width / 2;
instanceMarker.y -= instanceMarker.height / 2;

if (marker.name) {
for (var customProperty of instanceMarker.componentProperties) {
if (customProperty["type"] == "TEXT") {
instanceMarker.setProperties({
customProperty: marker.name
});
break;
if (marker.name) {
for (var customProperty of instanceMarker.componentProperties) {
if (customProperty["type"] == "TEXT") {
instanceMarker.setProperties({
customProperty: marker.name
});
break;
}
}
}
}
figma.currentPage.appendChild(instanceMarker);
nodes.push(instanceMarker);
figma.currentPage.appendChild(instanceMarker);
nodes.push(instanceMarker);
});
}

figma.currentPage.selection = nodes;
figma.viewport.scrollAndZoomIntoView(nodes);
const groupContainer = figma.group(nodes, figma.currentPage);
groupContainer.name = "Figmap";

////////////////////
// Figma response //
////////////////////
figma.ui.postMessage({
type: "map-drawed",
message: `Map drawed in Figma`
});
}
//console.log("allComponents ", allComponents);

figma.currentPage.selection = nodes;
figma.viewport.scrollAndZoomIntoView(nodes);
const groupContainer = figma.group(nodes, figma.currentPage);
groupContainer.name = "Figmap";
//////////////////
// Close plugin //
//////////////////
figma.closePlugin();
} else {
// FigJam drawing
const nodes = [];
let imageHash = figma.createImage(msg.data).hash;
const rect = figma.createRectangle();
rect.name = "Basemap image";
rect.resize(msg.width, msg.height);
rect.fills = [{ type: "IMAGE", scaleMode: "FIT", imageHash }];
nodes.push(rect);
figma.currentPage.appendChild(rect);
// select the rectangle and focus the viewport
figma.currentPage.selection = [rect];
figma.viewport.scrollAndZoomIntoView([rect]);

////////////////////
// Figma response //
////////////////////
figma.ui.postMessage({
type: "map-drawed",
message: `Map drawed in Figma`
});
//console.log("allComponents ", allComponents);
msg.markers.map(marker => {
let nodeSVG = figma.createNodeFromSvg(markerSVG);
figma.currentPage.appendChild(nodeSVG);

//////////////////
// Close plugin //
//////////////////
figma.closePlugin();
nodeSVG.x = marker.x - mapWidthOffset;
nodeSVG.y = marker.y - mapHeightOffset;
nodeSVG.x -= 10;
nodeSVG.y -= 8;
nodes.push(nodeSVG);
});
figma.group(nodes, figma.currentPage);

figma.closePlugin();
}
}
if (msg.type === "get-components") {
////////////////////
Expand Down Expand Up @@ -150,4 +179,10 @@ figma.ui.onmessage = msg => {
}
);
}
if (msg.type === "ask-editorType") {
figma.ui.postMessage({
type: "sending-editor",
storage: figma.editorType
});
}
};
4 changes: 2 additions & 2 deletions yarn-error.log
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ Arguments:
/usr/local/bin/node /usr/local/bin/yarn

PATH:
/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/homebrew/bin:/opt/homebrew/sbin

Yarn version:
1.22.19
Expand Down Expand Up @@ -36,7 +36,7 @@ npm manifest:
"viewport-mercator-project": "^7.0.1"
},
"devDependencies": {
"@figma/plugin-typings": "^1.15.0",
"@figma/plugin-typings": "^1.33.0",
"@types/react": "^16.9.35",
"@types/react-dom": "^16.9.8",
"bootstrap": "^4.5.2",
Expand Down

0 comments on commit 9000f0f

Please sign in to comment.